Where To Go: Destination Management System

When you are traveling somewhere, you might have following problems:

• Which is the nearest spot?
• How long does it take to go to each spots?
• How can I go around each spots efficiently?

I have developed an application which can solve these problems.

Where To Go　https://unhurried.github.io/where-to-go/ （Source Code: GitHub - unhurried/where-to-go）

Functional overview is following.

• Register the location and metadata (name, category, URL and memo) of a spot.
  • The location can be registered by converting(geocoding) the spot name.
  • Plot the location on the map and adjust it.
  • Store spot data in Local Storage, so can be retained after the browser restart.
• Show registered spots on the map.
• If you register the starting point (Home), the distance and the required time for each spot can be calculated.
• Sort registered spots by category, distance or required time.

This is a by-product of my AngularJS study, and currently only Google Chrome is tested the compatibility. I will add following features when I have time.

• Make the application compatible with major browsers.
• Add a function to import and export spot data.
• Optimize the layout for mobile devices.
• Display the route from the starting point to the spot.

Where To Go お出掛け先管理システム

旅行先などで、いくつか行きたい場所の候補があるときに出てくる、

• どこが一番近いのか？
• それぞれ行くのにどのくらいの時間がかかるのか？
• どの順番で行けばよいのか？

といった悩みを解決するためのアプリを作りました。

Where To Go　https://unhurried.github.io/where-to-go/
（ソースコード：GitHub - unhurried/where-to-go）

大まかな機能は以下の通りです。

• 場所（座標）とメタデータ（名称、カテゴリ、URL、メモ）を登録できる。
  • 座標は名称から変換（Geocode）して登録できる。
  • 座標の位置を地図に表示して微調整ができる。
  • データはLocal Storageに保存するためブラウザを再起動しても参照できる。
• 登録した場所を地図上にマッピングして参照できる。
• 出発点（Home）を登録すると各場所への距離と所要時間を計算できる。
• 登録した場所をカテゴリ、距離、所用時間等でソートして表示できる。

AngularJSの学習がてら実装したので、Google Chromeのみでしか動作確認をしていません…。
時間を見つけて↓の機能も追加していこうと思います。

• 主要ブラウザで動作するようにする。
• 場所データをインポート／エクスポートする。
• モバイルデバイスにレイアウトを最適化する。
• 出発点から各場所へのルートを表示できる。

ライブラリ手動追加時のESLintエラーを抑制する

この頃はかなり乗り遅れ感ありますが、こつこつAngularJSを試してみています。 Yeoman generator-gulp-angularで面倒な環境構築はスキップできるのですが、各ツールの動きを知らないせいで、時々はまってしまいます。

今回は手動でライブラリを追加したときに出る、ESLintのno-undefエラーの回避方法についてです。

たいていのライブラリはAngularのプラグイン化されていて、すぐにServiceとしてDIして使えるとか便利なのですが、ニッチなライブラリは自分でscriptタグを記載して組み込むことがあります。
このときに、ライブラリで定義されているグローバル変数を参照すると、ESLintで下記のようなエラーが指摘されます。

error  "xxx" is not defined     no-undef

放っておいても動作はするので問題ないのですが、これを回避するには、.eslintrcにグローバル変数を記載すれば良いです。

{
  "globals": {
     "xxx": true
  }
}

参考：http://yukidarake.hateblo.jp/entry/2015/11/11/200221

追記

id:mysticateaさんのコメントにある通り、globalsにはkeyにグローバル変数名、valueに上書きを許容するかを表す真偽値を持ったオブジェクトを指定するそうです。 http://eslint.org/docs/user-guide/configuring#specifying-globals

Windows VPS

自宅のPCがだいぶ年季入ってきたので、いっそのこと廃棄して完全クラウド化みたいなことができないかと思いつきました。
そこで、Windows系OSでリモートデスクトップが利用できるVPS、と対象を絞って各社のプランを調べてみました。

ベンダー	OS	仮想コア	メモリ	ディスク	ディスク種別	月額（税抜）	備考
さくら	Windows	3	2	100	SSD	3209
さくら	Windows	4	4	150	SSD	5500
ServerQueen	Windows	-	2	80	SSD	1530	新規受付停止
ServerQueen	Windows	-	4	120	SSD	3060	新規受付停止
SPPD	Windows	-	2	100	HDD	1500
SPPD	Windows	-	4	120	HDD	3000
お名前.com	Windows	-	2	100	HDD	4186
お名前.com	Windows	-	4	100	HDD	6040
GMO	Windows	-	4	200	HDD	5219
ABLENET	Windows	2	2	120	SSD	2077
ABLENET	Windows	3	4	150	SSD	3696

結論としては、自宅のPC同等のスペックを得るには月額4000～6000円（税込み）の費用でした。
電気代も考慮すると、1年でデスクトップPCを買い替えるくらいの感覚となりそうです。

AngularJSのminify対策（ng-annotate）

AngularJSのDI

AngularJSのDI（Dependency Injection）は、コントローラーに必要なオブジェクトを注入（定義しておいた変数にセットして）くれる機能です。
このとき、変数に注入すべきオブジェクトは変数名を見て決定しています。

例えば下記のコードでは、$scopeという変数名を見てスコープオブジェクト（https://docs.angularjs.org/guide/scope）を$scope変数にセットしています。

app.controller('MyCtrl', function($scope) {
    ...
});

minifyにより発生する問題

便利な機能ですが、この仕組みはminifyと相性が悪いのです。
minifyによって変数名が書き換わると、何を注入すべきかがわからなくなってしまいます。

a.controller('MyCtrl', function(s) {
    ...
});

$scopeがsに変わってしまい、これではスコープオブジェクトと紐付けられません。

この問題に対処するため、AngularJSではannotation（文字列として注入すべきオブジェクトの名称を渡す）機能が用意されています。（文字列はminifyしても変化しないため。）

a.controller('MyCtrl', ['$scope', function($scope) {
    ...
}]);

ng-annotate

ひとまずannotationで問題は解決できますが、DI対象が増えるとコードのメンテナンス性が悪くなってしまいます。（うっかり順番を間違えたり…。）
そこで、ng-annotateの登場です。DI宣言部分に@ngInjectを記述すると、annotationを自動生成してくれます。（あたりまえですがminifyの実行前に実施します。）

/* @ngInject */
app.controller('MyCtrl', function($scope) {
    ...
});

参考

• http://qiita.com/kawaz/items/363f430d21ec729f1b7d
• http://soundtricker.blogspot.jp/2014/08/angularng-annotateminify.html?m=1

Apache mod_proxyとmod_aliasの共存

TomcatでWebアプリケーションを動かすときには、クライアントとのコネクション管理や静的コンテンツ配信、セキュリティー向上といったことを目的として、前段にApacheを置くことがあります。

Apache -- (AJP or HTTP) --> Tomcat

この構成での静的コンテンツ配信について、↓のようなディレクトリ構成を設定しようとしたときにはまったので、ポイントをメモしておきます。

• /application/
  • Tomcatへ転送する
• /application/contents/
  • Apache上の静的コンテンツを配信する

Tomcatへの転送はmod_proxy、静的コンテンツの配信はmod_aliasを使いますが、注意しないといけないのは、 「ProxyよりもAliasの設定が優先されるのでProxyからAlias対象のパスを除外する必要がある」ということです。

conf設定例

ProxyPass /application/contents/ !
ProxyPass /application/ http://xx.xx.xx.xx:xx/application/ retry=5
ProxyPassReverse /application/ http://xx.xx.xx.xx:xx/application/

Alias /application/contents /xxx/xxx/xxx

参考

qwe.hatenablog.jp

Handling XML with Java

In this post, I will introduce methods of handling XML files with Java. (Ones built in Java SE/EE only.)

DOM (Document Object Model)

• http://www.w3.org/DOM/DOMTR
• DOM processes XML after loading it with tree data structure.
• You can write codes in the same way with other programming languages because the specification of API is standardized by W3C,

SAX (Simple API for XML)

• http://www.saxproject.org
• The XML parser invokes events (such as a beginning of an element) while reading XML from the start. An application register handlers each of the events, and pass how to process the events.
• The specification is defined by not standards body but volunteers, but it is supported by as many programming languages as DOM. Although It is more memory efficient than DOM, It unfits the processes which needs random accesses to the XML structure.

StAX (Streaming API for XML)

• https://www.jcp.org/en/jsr/detail?id=173
• The XML parser invokes events (such as a beginning of an element) while reading XML from the start. An application catch these events with I/F like the "iteration", and process according to the type of the events.
• The specification is defined in JSR 173. StAX is described as "pull type" while SAX is described as "push type".

JAXB (Java Architecture for XML Binding)

• https://jcp.org/en/jsr/detail?id=222
• The specification of API which interconverts between XML and Java Objects.
• It is defined in JSR 31 (JAXB 1.0) or JSR 222 (JAXB 2.0). It is easier to learn than JAXP as JAXB specializes in data conversion.