Monthly Archives: 12月 2016

PhpStorm #001 – 日本語化

 

phpstorm_001_01

 

Web開発環境にPhpStormを導入したので、使い方などをこのblogで紹介していけたらと思います。

PhpStormとは、Jetbrainsが販売している有料のIDEです。JetbrainsはWebStormやPyCharmなど色々な種類のIDEを開発しています。
私は普段、BracketsVisual Studio Codeなどの無償のテキストエディタを利用しています。今回テキストエディタとは違う方向で、IDEのPhpStormも試してみたいと思います。

フロントエンド(HTML・CSS・JavaScript)のみの開発の場合はWebStormが向いていますが、PhpStormで開発することによりフロントエンドと合わせて、WordPress等のCMS(PHP・DB)の開発をすることも可能になります。

ライセンスについては企業と個人で分かれます。個人購入は年間10000円程度、企業購入は年間20000円程度となっています。時期によってはセールもやっているのその時は安価で購入できます。私は1年間の金額で1年半利用できるセールで個人購入してみました。購入する時は、日本代理店のサムライズムで購入するのがわかりやすくていいかもしれません。

 

また、PhpStormのメニューは基本的にすべて英語表示になっています。そのため今回はPhpStormを日本語化する方法を紹介しようと思います。

 

まず、PhpStormを起動してメニューを確認してみます。Configure → Preferencesを選択します。

phpstorm_001_02

 

設定画面が表示されます。すべて英語表示なのが確認できます。それでは日本語化してみようと思います。

phpstorm_001_03

 

日本語化に必要な「resources_jp.jar」をここからダウンロードします。

phpstorm_001_04

 

ダウンロードできたら、インストール先パスのlib下に「resources_jp.jar」をコピーします。

phpstorm_001_05

 

PhpStormをもう一度起動してメニューを確認してみます。Configure → Preferencesを選択します。メニューが日本語化されているのが確認できると思います。

phpstorm_001_06

 

PhpStormの日本語化は既存の設定にはありません。日本語化する場合は別途処理が必要になります。「resources_jp.jar」を利用することにより完全ではありませんがメニューを日本語化することが可能になります。

 
 

 

Try #004 – elasticsearchとkibanaでジオ的なことをしてみた

 

try_004_24

try_004_25

 

この記事は、「FOSS4G 二個目だよ Advent Calendar 2016」の17日目の記事です。

 

弊社ボスからこんな指令がありました。

ということで、今回は全文検索エンジン「elasticsearch」と可視化ツール「kibana」を使ってジオ的なことを試してみました。

elasticsearch?kibana?ってかたはこちらを参照してみてください。なんだかおもしろそうですね。ドキュメントを調べていくと、実はelasticsearchでは地理空間情報を扱えます。しかもなんと、そのデータを可視化するkibanaの地図部分にはLeafletが利用されているようです。今回はelasticsearchとkibanaの導入から簡単な可視化のところまで試してみようと思います。

まず試すには、elasticsearchのインストールが必要です。インストールするためには、Javaの実行環境入れたり色々と大変そうなので今回はGCPでVMをデプロイしようと思います。

ありがたいことにGCPのCloud Launcherには、elasticsearchがインストール済VMが提供されています。VMをデプロイするだけですぐelasticsearchを利用することが可能になります。
try_004_01

try_004_02

GCPは、デプロイされるまでの時間がめちゃくちゃ早いです。なのでもうソフトを起動する感覚でVMの作成・削除ができてしまいます。すごく贅沢な時代になったもんですね。。。もちろん起動するだけでも課金は発生するのでご注意ください。今回の内容だと、時間的には30円くらいで済んだ気がします。

 

デプロイが完了すると、下記画面になるので赤枠のボタンをクリックします。そうするとブラウザ上にターミナルが表示されてSSH接続ができます。
try_004_03

 

ついでにGCPの設定で、elasticsearchとkibanaで使用するポートも設定しといたほうがいいと思います。
try_004_05

 

ターミナルが起動したら、elasticsearchのインストールを確認するために、ステータスとバージョン情報を確認してみます。

try_004_06

正常にインストールされていることが確認できました。

 

次に、実際にelasticsearchにジオなデータを登録してみます。elasticsearchでは、データをindex・type・documentといいます。データベースで言うとたぶん、db・table・recordですかね?今回はindexをsampledb、typeをsampletable、documentを1〜2としてみます。

また、elasticsearchにはジオなタイプとして「geo_point」と「geo_shape」というものがあります。
ジオ的な情報を扱う時は、事前にスキーマの定義が必要みたいなので今回はpointというフィールドに「geo_point」を定義してみます。

try_004_07

 

スキーマが定義されたようなのでデータを登録してみます。今回はポイントとして2レコード登録してみます。

try_004_08

 

基本的にエラー表示がでなければ登録されているはずです。一応検索して確認してみます。

try_004_09

全てを検索すると、登録した2レコードが表示されました。

 

次に、空間検索を試してみようと思います。elasticsearchはジオなデータの登録だけではなく、空間検索にも対応しています。今回は、指定したポイントの中心から1km範囲内にあるレコードを検索してみます。範囲を検索したい時は、「geo_distance」を利用します。

try_004_10

検索結果に、登録したSapporo01のレコードのみ表示されました。検索エンジンで空間検索ができるのはすごいですね。

 

これだけでは物足りないので、可視化ツールのkibanaを使ってelasticsearchのデータを可視化してみようと思います。

まずは、kibanaをインストールをします。インストールするにはCarpe Diemというサイトが参考になりました。サイトの通り進めば正常にインストールできます。
※バージョンは、「kibana-4.5.3」に置き換えてください。それ以下のバージョンだとタイル地図表示がうまくいきません。

try_004_11

try_004_12

kibanaのインストールが終わったら、正常に稼働しているか確認します。

 

インストールが確認できたら次に、kibana.ymlを開いて設定を変更します。
try_004_13

 

ここでは、「elasticsearchの接続先」と「タイルURLの指定」を設定します。

try_004_14

 

kibana.ymlを保存したら、kibanaを再起動します。

try_004_15

 

それでは、実際にkibanaにアクセスしてみましょう。下記、URLにブラウザでアクセスします。kibanaの画面が表示されれば OKです。

try_004_16

 

次に、kibanaにelasticsearchで作成したindexを登録します。今回はsampledbと記述します。
try_004_17

 

一応、kibanaのバージョンが4.5.3になっているかを確認します。
try_004_18

 

最後に、elasticsearchに登録したデータを可視化してみます。メニューからTilemapを選択します。
try_004_19

 

新規作成を選択します。
try_004_20

 

タイル画像が表示されているのが確認できます。この地図表示部分には、Leafletが利用されているため一般的なタイル画像を読み込むことが可能です。
try_004_21

 

次に、Geo Coordinatesを選択してpointフィールドを選択して実行します。すると、elasticsearchで登録した2レコードが地図上に可視化されました。
try_004_22

 

検索バーに、Sapporo01と入力すると指定した地点のみ絞り込み検索することも可能です。
try_004_23

 

elasticsearchとkibanaを組み合わせると、ジオなことに限らず色々なデータ分析が可能です。大量なデータを自動で登録してドカンと処理して可視化するとおもしろそうですね。今度はBeatsとLogstashも試してみたいです。
※最新バージョンは5.1みたいなので情報少し古かったらごめんなさい。

 
 

 

Try #003 – LeafletとCARTOを組み合わせてみた

 

try_003_05

 

この記事は、「FOSS4G Advent Calendar 2016」の17日目の記事です。
今回はLeafletとCARTOを組み合わせてみようと思います。Web上に地図や地物を表示するコンテンツを手軽に公開したい場合、CARTOのサービスを利用するのはとても効果的です。

例えば
・独自UIでコンテンツを作りたい
・フロントエンド側で表示するには重すぎるデータがある
・できるだけサーバーレスで構築したい
などの場合

フロントエンド側をLeafletで、そしてバックエンド側をCARTOで実装する方法があります。

実は今年の3月に参加したハッカソンで構築したものがありまして、今回はそれを元としてFOSS4G 2016 TOKYOのハンズオンで使用した室蘭市さんのデータに置き換えてトライしてみようと思います。

 

まずは通常の使い方でCARTOのサービス内でMAPを作成します。表示したいデータをアップロードしてMAPに追加します。その際にレイヤ設定もしておきます。
設定が終わったら、右上にあるPUBLISHボタンを押します。
try_003_01

 

モーダルが開いたら、右側にあるCartoDB.jsの項目にあるJSONのURLをコピーしておきます。
try_003_02

 

これでバックエンド側の、CARTOの構築は終わりです。すごくシンプルです。

次に、フロントエンド側をLeafletで構築していきます。

index.html

HTMLとCSSは、いつものLeafletの流れと一緒です。ただ、HTMLについては下記の記述のようにLeafletのライブラリではなくCARTO.js(CartoDB.js)を読み込みます。
Leafletの基本機能はCARTO.jsに内包されているためLeafletのライブラリは読み込む必要がありません。
※LeafletとCARTOのライブラリの両方を読み込むと競合して動かなくなると思います。

 

ここから本題のJS部分の説明をしていこうと思います。

script.js

 

前半部分は、通常通りの背景地図読み込みや地図の初期表示設定を記述しています。

 

次に、CARTOのデータを読み込む部分です。
・cartodb.createLayerの引数(layerUrl変数)に、さっきコピーしたCARTOのJSONURLを記述
・.done(function(layer)〜で「ポイント選択時に画面中央寄せ」と「レイヤを各変数に割り当て」を実装

 

ついでにスケールバーも表示しておきます。

 

最後に、メニューでレイヤON/OFFを切り替える部分の実装です。
・sublayers[0].show();で指定レイヤ表示
・sublayers[0].hide();で指定レイヤ非表示

あと、試しに津波区域10m以上のみ表示する機能も実装してみました。
・sublayers[0].setSQL(SQL文);でレイヤに対してSQLの実行が可能

 

完成するとこんな感じで表示されます。津波区域のポリゴンは、データが結構数細かいのですがバックエンド側でCARTOを利用しているのでサクサク描画されます。

example

 

独自UIで大きなデータを扱いたい場合や、できるだけサーバーレスでWebGISを実現したい場合などはLeafletとCARTOを組み合わせるのもいいかもしれません。