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し、変更を検知してくれる

サンプルコード一式

github.com

mapbox-gl.jsでOSMを表示

mapbox-gl.jsのサンプルを検索すると、大抵はVector Tileのサンプルが多くヒットしてしまう。 ただ、これまで利用していたOSMなどのRaster Tileをベースに表示したい場合もある。

mapbox-gl.js でRaster Tile今回はOSMを表示する例 ※ 実行する際にmapboxのサイトからmapbox-glのJavaScriptCSSのファイルを取得してください。

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%;
}

実行結果

f:id:hinosita:20180731162856p:plain

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のドキュメン

developers.google.com

  • 無料
    • 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

実行結果

f:id:hinosita:20180716233709p:plain

f:id:hinosita:20180716233847p:plain

指定の場所にマーカーが立ち、Google Mapsが表示されているのは確認できた。
添付のGoogle Maps Platformのコンソール画面が、有料のSearch modeも数回実行した際のものだが、API Key単位でカウントされてしまうので無料のPlace modeSearch 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

ログを追ってると去年追加されたんだ。(結構最近で意外) 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の画面が表示される。 f:id:hinosita:20180704232528p:plain

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となります。 料金体系は完全に従量課金制となるようです。

cloud.google.com

これまでGoogle Maps あるいは他の地図サービスを利用していた方はこの機会に一度見直してみるのもよろしいのではないかと。

個人的に知ってる範囲内でサービスを列挙していこうと思います。 ※ 今回は各サービスの比較を行ないません。 メリット・デメリットや料金比較は利用用途などによって一概に比較できないので、各々で比較して頂ければと思います。(ご相談などは受けれるかとは思います) ※ 料金比較は行わないと記載しましたが、無料枠の有り無しは記載しようかと思っております。

地図サービス リスト

Google Maps Platform

言わずもしれた Google Maps

cloud.google.com

  • 月々の無料枠有り ※ 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地図

mierune.co.jp

  • 無料版有り

Mapbox

www.mapbox.com

  • 無料枠有り

Nextzen

Nextzen Developers

  • 無料

OpenMapTiles

openmaptiles.com

  • 商用利用は不可

MapTier

www.maptiler.com

  • 無料枠有り

  • 商用利用は不可

YOLP

Yahoo社が提供してる地図サービス

developer.yahoo.co.jp

  • 1日のリクエスト数の無料枠有り

MapFan API

IncrementP社が法人向けに提供してる地図サービス

business.mapfan.com

  • 体験版有り

Mapion 地図情報配信 API

株式会社マピオンが法人向けに提供してる地図サービス

www.mapion.co.jp

  • 体験版有り

いつもNAVI

ゼンリン社が提供してる地図サービス

www.zmap.net

  • 体験版有り

駅すぱあと 路線図

ヴァル研究所が運営している路線図 通常の地図とは異なりますが。

ekiworld.net

  • 有料

まとめ

地図サービスと言っても、いろいろあります。 各サービスでそれぞれ特徴があります。

今回のGoogle Mapsのサービス内容変更というイベントを機に一度見直しを行ってみるのはどうでしょうか? みなさんのサービスに合った地図サービスを探す一助になればと思います。

Webpackでmodule bundle時の環境変数

以前に自分でJSの環境変数の扱いについてのblogを書いたのですが、Webpackで環境変数を使用する際はこちらのライブラリの方が良いと思い試しみた hinoshita.hatenadiary.com

webpack-dotenv

webpackでjs等をbundleする際に、API KeyやHOST名など環境や開発時と公開時で値が変わる値の管理を容易にするライブラリ

github.com

環境準備

  • 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 で指定した値になって出力される

今回のサンプルプログラム

github.com