webpack-serve v2 を動かすまでのメモ
春先にwebpack-serveのv1 が出てたと思ったけど、気がつけばv2のbeta版の話がGithub上でされてて、忙しくて追うのを放置してたらいつの間にかv2が公式リリースされてたので簡単に触ってみたメモ
npmでインストールしておくもの
必須 - webpack - webpack-cli - webpack-serve
サンプルを動作させるのに必要(webpack-serve)とは関係無し - html-webpack-plugin
各種ファイル
設定ファイル関連
- webpakc-config.js
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.resolve(`${__dirname}/src/js`, 'index.js'), output: { path: path.resolve(`${__dirname}`, 'dist'), filename: 'main.js' }, mode: 'development', module: { rules: [] }, plugins: [ new htmlWebpackPlugin({ template: 'src/html/index.html', filename: 'index.html', chunk: ['main'], inject: true }) ] };
- serve-config.js 外出は必須ではないが、外出した方が今後見通しがよくなりそうなので今回は外出してみた。
const serve = require('webpack-serve'); const config = require('./webpack.config.js'); serve({}, {config}).then((result) =>{});
srcフォルダ
- index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webpack-Serve V2 Sample</title> </head> <body> <h1>Webpack-Serve V2 Sample</h1> </body> </html>
- index.js 今回はwebpack-serveの動作とwatchの確認のためのコードなので、コンソールに出力するだけのJavaScript
console.log('test1');
動作確認
$ npx webpack-serve
このコマンドで動作するはずなのだが、なぜか8080
ポートで2重起動というエラーが出てしまう。。。(原因調査中)
$ npx webpack-serve --port 8081
port
optionを付けると動作した
index.jsを変更すると、webpack-serveがreloadeし、変更を検知してくれる
サンプルコード一式
mapbox-gl.jsでOSMを表示
mapbox-gl.jsのサンプルを検索すると、大抵はVector Tileのサンプルが多くヒットしてしまう。 ただ、これまで利用していたOSMなどのRaster Tileをベースに表示したい場合もある。
mapbox-gl.js でRaster Tile今回はOSMを表示する例 ※ 実行する際にmapboxのサイトからmapbox-glのJavaScriptとCSSのファイルを取得してください。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Mapbox-gl.js Sample OSM</title> <link rel="stylesheet" href='css/main.css' /> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id='map'></div> <script src='js/vendor/mapbox-gl.js'></script> <script src="js/app.js"></script> </body> </html>
JavaScript
let map = new mapboxgl.Map({ container: 'map', center: [141.3564, 43.0611], zoom: 16, style: { "version": 8, "sources": { "OSM": { "type": "raster", "tiles": ['http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'], "tileSize": 256 } }, "layers": [{ "id": "OSM", "type": "raster", "source": "OSM", "minzoom": 0, "maxzoom": 22 }] } });
- sourcesのtypeは
raster
に設定 - sources のオブジェとのkeyとlayersのsourceの値を揃える
- layersのtypeは
raster
に設定
CSS
html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; width: 100%; height: 100%; }
実行結果
leaflet.jsなどと同様にRasterのOSMが表示出来る。
【参考URL】 www.mapbox.com
Google Maps Platform Maps Embed APIを利用してみる
Google Maps Platformの新料金体系になったので、少しずつ利用してみる。
今回はMaps Embed API
を利用してみる。(どれだけ利用しても無料なので)
料金については、公式の料金表を参照して頂きたい。 cloud.google.com
Embed API
の課金体系が2種類あるので注意が必要
Embed Advanced
のモードを利用した際には課金対象となる。
Embed APIのドキュメン
- 無料
- Place mode
- View mode
- 有料
- Directions mode
- Street View mode
- Search mode
各モードの切り替えはiframe内src
パラメータのURLで切り替える
実行内容
今回はPlace mode
を試してみる。(Search mode
も検証のため試したが内容については後述)
- サンプルコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google maps sample</title> </head> <body> <div> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=<API Key> &q=北海道札幌市北区北6条西4丁目1-1&zoom=15"> </iframe> </div> </body> </html>
クエリパラメータのq
にマーカーを置く場所を指定する。
zoomは必須ではない。
札幌駅の住所はwikiの情報を参照
札幌駅 - Wikipedia
実行結果
- Google Maps Platformのコンソール画面
指定の場所にマーカーが立ち、Google Mapsが表示されているのは確認できた。
添付のGoogle Maps Platformのコンソール画面が、有料のSearch mode
も数回実行した際のものだが、API Key単位でカウントされてしまうので無料のPlace mode
とSearch mode
のカウントが集計されてしまって、どのモードへのアクセスかが切り分けできない。
これはこれで、あまりよろしくない感じがしてる。
また、Place mode
でマーカーは立てられるが、ポップアップなどの実装や複数点にマーカーを立てることが出来ないので利用用途は限定される。
express-generatorでtemplate engineを指定しないでアプリ雛形を作成
最近、Expressを利用してるのですが、 express-generator
の情報を探すとhtmlのtemplate engineが指定した情報が多い。
defaultは、jade
(指定しないと、 jade
) が指定される。
個人的にはExpressはWeb APIが中心なので、アプリの雛形にはtemplate engineを含めたくない。 express-generatorのGithubをみたら、HTMLで出力するoptionがあった。
ログを追ってると去年追加されたんだ。(結構最近で意外) github.com
雛形を作成する際に、 --no-view
optionを付けた状態で実行する。
$ npx express --no-view ./tmp-app && cd ./tmp-app
- 実行結果
create : tmp-app/ create : tmp-app/public/ create : tmp-app/public/javascripts/ create : tmp-app/public/images/ create : tmp-app/public/stylesheets/ create : tmp-app/public/stylesheets/style.css create : tmp-app/routes/ create : tmp-app/routes/index.js create : tmp-app/routes/users.js create : tmp-app/public/index.html create : tmp-app/app.js create : tmp-app/package.json create : tmp-app/bin/ create : tmp-app/bin/www change directory: $ cd ./tmp-app install dependencies: $ npm install run the app: $ DEBUG=tmp-app:* npm start
- 雛形アプリのディレクトリ構成
. ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── index.html │ ├── javascripts │ └── stylesheets │ └── style.css └── routes ├── index.js └── users.js
publicディレクトリの中がindex.htmlなどになっている。
expressを実行するために、必要なmoduleをインストールする。
$ npm install
$ moduleをインストール後、アプリを実行する。
$ npm run start
http://localhost:3000にアクセスすると、デフォルトのExpressの画面が表示される。
Express実装時のauto-reload
ちょっとやっては、また忘れた頃にちょっとExpressを触るという感じで、どっぷりやってる訳ではないのでExpressとかは入門レベルからなかかな脱せない…
Expressでauto-reload
コードを編集して、確認するのに毎回アプリを再起動してたので他のプログラミング言語のように auto-reload
出来ないかと思って調べた結果 nodemon
というライブラリが利用されていそう。
インストール
nodemon
のインストール
npm install -D nodemon
or
yarn add -D nodemon
実行
※ express-generatorでアプリを実装されている前提
npx nodemon ./bin/www
- 実行後
[nodemon] 1.17.5 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node ./bin/www`
これで、プロジェクトを監視している
ファイルの更新
プロジェクト内のファイルを変更
[nodemon] restarting due to changes... [nodemon] starting `node ./bin/www`
アプリを停止しなくても、更新されているのが確認出来ます。
WEB & Maps 再検討
WebサイトやWebアプリなどで地図というとGoogle Mapsが真っ先に思い浮かぶ方が多いかと思いますが、Google Mapsが2018年06月11日からサービス名と料金体系が大幅に変更されます。 サービス名はGoogle Maps Platformとなります。 料金体系は完全に従量課金制となるようです。
これまでGoogle Maps あるいは他の地図サービスを利用していた方はこの機会に一度見直してみるのもよろしいのではないかと。
個人的に知ってる範囲内でサービスを列挙していこうと思います。 ※ 今回は各サービスの比較を行ないません。 メリット・デメリットや料金比較は利用用途などによって一概に比較できないので、各々で比較して頂ければと思います。(ご相談などは受けれるかとは思います) ※ 料金比較は行わないと記載しましたが、無料枠の有り無しは記載しようかと思っております。
地図サービス リスト
Google Maps Platform
言わずもしれた Google Maps
- 月々の無料枠有り ※ 2018年06月11日からの新料金体系でもあります。
Bing Maps
Microsoft社が提供してる地図サービス
Custom Maps API for Business | Bing Maps for Enterprise
- 月々の無料枠有り
Open Street Map
コミニュティベースで作成されている地図サービス
OpenStreetMap Japan | 自由な地図をみんなの手に/The Free Wiki World Map
- 無料
地理院タイル
- 無料
MIERUNE地図
- 無料版有り
Mapbox
- 無料枠有り
Nextzen
- 無料
OpenMapTiles
- 商用利用は不可
MapTier
無料枠有り
商用利用は不可
YOLP
Yahoo社が提供してる地図サービス
- 1日のリクエスト数の無料枠有り
MapFan API
IncrementP社が法人向けに提供してる地図サービス
- 体験版有り
Mapion 地図情報配信 API
株式会社マピオンが法人向けに提供してる地図サービス
- 体験版有り
いつもNAVI
ゼンリン社が提供してる地図サービス
- 体験版有り
駅すぱあと 路線図
ヴァル研究所が運営している路線図 通常の地図とは異なりますが。
- 有料
まとめ
地図サービスと言っても、いろいろあります。 各サービスでそれぞれ特徴があります。
今回のGoogle Mapsのサービス内容変更というイベントを機に一度見直しを行ってみるのはどうでしょうか? みなさんのサービスに合った地図サービスを探す一助になればと思います。
Webpackでmodule bundle時の環境変数
以前に自分でJSの環境変数の扱いについてのblogを書いたのですが、Webpackで環境変数を使用する際はこちらのライブラリの方が良いと思い試しみた hinoshita.hatenadiary.com
webpack-dotenv
webpackでjs等をbundleする際に、API KeyやHOST名など環境や開発時と公開時で値が変わる値の管理を容易にするライブラリ
環境準備
- webpack、dotenv-webpackをインストール
npmの場合
npm install -D webpack webpack-cli dotenv-webpack
yarnの場合
yarn add -D webpack webpack-cli dotenv-webpack
dotenv-webpackの利用
- .env ファイルの用意
HOST=127.0.0.1
- webpack.config.js の設定
dotenv-webpackをrequireし、
plugins
でインスタンス化する
const path = require('path'); const Dotenv = require('dotenv-webpack'); module.exports = { entry: path.resolve(`${__dirname}/src`, 'index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, mode: 'development', plugins: [ new Dotenv() ] };
- 実装時の参照例
process.env.
の後に.env
で指定したkeyで指定する
console.log(process.env.HOST);
- webpackでbundle後
console.log("127.0.0.1");
process.env.HOST
が .env
で指定した値になって出力される