2018-05-14

Google maps Platformについて触ってみた

GoogleMaps

Google maps Platform

2018年 6月11日以降 Google mapsは、Google maps Platformに移行されます。この移行に伴い、大きく変更になる点

APIの料金体系が変更となる
現在API key無しで利用している場合には、2018年 6月11日以降アクセスが不可となる。
18個に分割されていたAPIを、Maps、Routes、Placesの3つのサービスに集約

APIの料金体系が変更

無料枠が $200/Monthly 利用可能無料枠超過分は従量課金制となる

詳細な料金体系は公式のページを参照 cloud.google.com

この変更に伴い、API Key取得時にクレジットカードの登録が必須になってる。以前からクレジットカードの登録は必須だったらしいのだが、私が数年Google maps API Keyを新規に取得していなかったので、実際のところは不明。。。

API Key無しの場合

現時点でAPI Keyが無いと、エラー画面になるので、既にAPI Keyが無いとエラーになる？ f:id:hinosita:20180514001131p:plain

API Keyの作成

Google Maps Platformへアクセスする

cloud.google.com

画面内の 使ってみる ボタンをクリックすると以下のダイアログが表示される f:id:hinosita:20180514001527p:plain

「Maps」のみ選択してみる f:id:hinosita:20180514001700p:plain

次にプロジェクトの選択メニューになる f:id:hinosita:20180514001757p:plain

次にプロジェクトに課金情報の紐付けを行なう。既にGCP等で課金情報を登録済みの場合には、そちらの情報を利用可能。無ければ、新規に作成する必要がある。今回は新規に作成しました。

全ての設定が完了したら、GCPのコンソール画面になる。 GCPをこれまで利用してない人でも同様になるのだろうか？

f:id:hinosita:20180514002120p:plain

取得したAPI keyでGoogle Mapsを利用してみると、表示された。（されないと困りますが…） f:id:hinosita:20180514002442p:plain

Trafficも計測されている f:id:hinosita:20180514002642p:plain

疑問点

現在API Keyを利用しているが、課金が有効になっていない場合に無料枠を超過したらどうなるんだろうか？これまで通り超過した時点で課金を有効化してねーって形になるんだろうか？

2018-05-13

webpack-serve試してみたメモ

JavaScript webpack

webpack-serve

webpackの開発用web serverとして webpack-dev-server が多く利用されていると思う（webpackの公式にも記載されてるし）のですが、webpack-dev-server は、現在メンテナンスモードのみとなって機能追加等は今後行われない模様です。代替として webpack-serve を利用するのが良いと記載されてます。ただし、古いブラウザでテストする場合には webpack-dev-server 利用する。

github.com

webpack-serve

github.com

webpack-serve をインストールする

yarnの場合

yarn add webpack-serve -D

npmの場合

npm install webpack-serve -D

webpack-serve をauto-reloadの設定をする

webpack-config.js

const path = require('path');

const chokidar = require('chokidar');
const stringify = require('json-stringify-safe');
const WebSocket = require('ws');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

module.exports.serve = {
  content: [path.resolve(__dirname, 'dist')],

  config: {
  },
  hot: {
    host: 'localhost',
    port: 8081,
  },
  open: true,
  on: {
    'listening': () => {
      console.log('listening');
      const socket = new WebSocket('ws://localhost:8081');
      const watchPath = __dirname;
      const options = {};
      const watcher = chokidar.watch(watchPath, options);
      watcher.on('change', () => {
        const data = {
          type: 'broadcast',
          data: {
            type: 'window-reload',
            data: {},
          },
        };

        socket.send(stringify(data));
      });
    }
  },
};

これまでよりも記述量が増えてしまったけど、取り敢えずHTMLやJavaScriptのファイルを変更すると、browserの再読込されるところまでは動作の確認が出来た。ただ、もっと簡潔な設定方法が出来るといいんだけど。

2018-04-30

QGIS3でGDALの処理をしようとしたら、コマンドが見つからなかった話（Mac版）

QGIS QGIS3

1つ前の記事とも連動してるのですが、ポリゴンの融合をいざやろうとしたら、command not found ってなったので、対応メモ

ポリゴンの融合

QGISでポリゴンを結合する際にはGDAL/OGRの「ogr2ogr」というコマンドをバックグラウンドで実行されているのですが、融合処理を実行するとエラーになる。エラーの内容を確認すると ogr2ogr というコマンドが見つからないと。

GDALのPCにインストールされているかの確認

ターミナルで以下のコマンドを実行

$ which ogr2ogr

結果

/Library/Frameworks/GDAL.framework/Versions/2.2/Programs/ogr2ogr

GDALはインストールされてる。
QGISのPATHからGDALが見えていない模様。。。

QGISの設定の確認

PATHの確認（設定を変更後の画像です）

f:id:hinosita:20180430112219p:plain

「PATH」はQGIS開始時に変更されているらしい。。。

カスタム変数を利用することで、「PATH」に追加出来る

f:id:hinosita:20180430112512p:plain

/Library/Frameworks/GDAL.framework/Versions/2.2/Programs を PATH の先頭に追加する

設定後、QGISを再起動する。

再度ポリゴンの融合処理を実行

エラーにならずに処理が実行出来た。

Windowsの場合

私がWindows環境でQGIS3を利用したことがないので、正確なことはわからないのですが、Windowsで利用してる方に確認すると、 PATH を変更しなくても「GDAL」が動作しているようです。

2018-04-30

QGIS 3系で複数ポリゴンの融合

QGIS QGIS3

先日少しハマったのでメモ（会社の方に相談して解決したので、自力ではほぼ解決できず。。。）

実施したかったこと

shpファイルの複数のポリゴンを1つのポリゴン化したかった。
Googleで情報検索すると、QGIS2系だとメニューの「ベクタ」→ 「空間演算ツール」→「融合」で行えていた模様

QGIS3で実施しようとして困ったこと

QGIS3系だとメニューの「ベクタ」→ 「空間演算ツール」→「融合」がメニューにない。
- メニュー名（翻訳）が変わってる、ダイアログの内容が変わってる（後述します）

相談した結果

QGIS3系で見当たららないメニューは「プロセッシングツール」から探すと良いよってことなので、探して見る

プロセッシングツールボックスの表示

QGIS3系だとメニューの「プロセッシング」 → 「ツールボックス」

f:id:hinosita:20180430104911p:plain

QGISの右側にツールボックスが表示される

f:id:hinosita:20180430105039p:plain

「GDAL」→ 「ベクタジオプロセシング」→「融合」

f:id:hinosita:20180430105255p:plain

「融合」の処理ダイアログ

f:id:hinosita:20180430105451p:plain

2系の「融合」と同様に操作が出来る

QGIS3の「ベクタ」メニューから「融合（ディゾルブ）」を行なう方法

これまでの内容で複数のポリゴンを1つのポリゴンに出来たので、その時は気にしていなかっただが、後々ちゃんと見てみると「ディゾルブ」ってメニューがある。「ベクタ」→ 「空間演算ツール」 →　「ディゾルブ」

f:id:hinosita:20180430110037p:plain

ディゾルブで融合もしてみた

「ディゾルブ」メニューを選択すると以下のようなダイアログが表示され、処理をするとポリゴンの融合が出来る

f:id:hinosita:20180430110230p:plain

メニューの「ディゾルブ」とプロセッシングツールの「融合」の差異

メニューの方の翻訳が変わったのかと思ったのだが、微妙に表示されるダイアログも違うので、現在は2種類の融合処理が実装されているのかな。

f:id:hinosita:20180430110532p:plain

2018-03-22

Leaflet.jsをWebpackでbuildする

JavaScript webpack Leaflet.js

今年始めてのブログなんですね。（今年が既に3ヶ月過ぎようとしてるのは…）

なんどか同じような話題を書いてるような気がしますが。 Leaflet.js もnpmで管理されてるのに、公式ページやGithubに利用方法が明記されていないようなのでメモ（もしかしたら、見つけられていないだけかもしれないですが）

実行環境

node.js v9.7.1
leaflet.js v1.3.1
webpack v4.0.1
webpack-dev-server v3.1.0
css-loader v0.28.10
styleloader v0.20.2
url-loader v0.6.2

環境構築

ライブラリのインストール

yarn add leaflet webpack

HTMLの準備

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Webpack Sample</title>
</head>
<body>
  <div id="map"></div>
  <script src="main.js"></script>
</body>
</html>

JS

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import './css/map.css'
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'
import iconUrl from 'leaflet/dist/images/marker-icon.png'
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'

let map = L.map('map').setView([43.067, 141.35], 16);

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetinaUrl,
  iconUrl: iconUrl,
  shadowUrl: shadowUrl
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetinaUrl,
  iconUrl: iconUrl,
  shadowUrl: shadowUrl
});

L.marker([43.067, 141.35]).addTo(map)
.bindPopup('札幌駅前だよー')
.openPopup();

import 'leaflet/dist/leaflet.css' で node_modules に含まれているleaflet.cssをbundleしている

アイコン用の画像がbundleされないため、以下の処理を追加してDefaultアイコンを再初期化している

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetinaUrl,
  iconUrl: iconUrl,
  shadowUrl: shadowUrl
});

参考: L.Icon.Default brings a wrong image url · Issue #4968 · Leaflet/Leaflet · GitHub

map表示領域を設定するCSS

#map {
  width: 500px;
  height: 500px;
}

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js'
  },
  module: {
    rules : [
      // CSS
      {
        test: /\.css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            },
          }
        ]
      },
      {
        test: /\.png/,
        use: [
          'url-loader'
        ]
      }
    ]
  },
  mode: 'development',

  devServer: {
    contentBase: '.',
    open: true
  },
}

実行方法

npx webpack-dev-server

実行結果

f:id:hinosita:20180321235414p:plain

CDNやライブラリをダウンロードして実装するよりは多少手はかかるものの、npmでLeaflet.jsを取得しWebpackと連携することも出来ます。公式でなんで方法が公開されないんだろう…

今回のサンプルコード一式は公開してあります

github.com

2017-12-05

webpack-dev-server利用時のauto-reloadについて

JavaScript webpack

作業していて、webpack-dev-serverを利用時にHTMLファイルを更新しても、auto-reloadが行われなかたので対応メモ

webpack.config.jsの設定

module.exports = {
  entry:{
    …
  },
  output: {
    …
  },
  resolve: {
    …
  },

  devServer: {
    contentBase: path.join(__dirname, '/'),
    watchContentBase: true,
    …
  }
};

contentBase で指定したディレクトリにHTMLファイルを配置しる
watchContentBase の値を true に指定する。*1

*1:デフォルトは false

2017-10-25

npmのアップデート

node.js JavaScript npm

たいしした話ではないのですが、 npm install すると、最後になんか出てくる。

Update available 5.4.2 → 5.5.1
Run npm i -g npm to update

npm のバージョンが古いから上げてねってお知らせなのですが、npm のバージョンアップを npm で行なうという。 npm もJavaScriptだから、 npm で管理されていてもなんらおかしくはないけど。

ってか、コレっていつ頃から出るようになったんだろう？