なぜWEBアプリなのか

私は最近、モバイルの場合なんでもかんでもアプリになっていてそれWebでいいじゃんと思うようなものですらアプリになっている現状に違和感を感じていました。 そこに前々から気になっていたPolymerがGoogle IOで1.0が発表されProduction readyになったことを受けて、試しにWEBアプリ作成してみることにしました。 Polymerについては Polymerとは で検索してみるといろいろ出てくるので、そちらを参照してみてください。

簡単なサンプル的なものを作成してもどの程度実用に耐えるのかあまりイメージがわかないと思ったので、それなりに使えるWebアプリを作ることを目標としました。

そこで今回はPolymerを使って下記のような機能を持った「犬のお散歩図鑑」を作成してみました。

• お散歩経路の位置情報を取得し、端末内に永続的に保存
• お散歩の履歴をGoogleMap上にヒートマップで表示
• 自動取得以外にユーザー操作でマーキング位置の保存

犬のお散歩図鑑を作ろうと思った経緯

犬はおしっこ（マーキング）をすることで縄張りを表現していると言われています。 確かにお散歩に行ってもいつもほぼ決まった場所でマーキングをしているように見えます。 それを可視化してさらに履歴も見れたら面白いのではないかと思い、このWEBアプリを作成してみました。

今回作成した実際のWebアプリ → 犬のお散歩図鑑

技術的には下記を要素を使用しています。

• Polymer 1.0
• IndexedDB
• GoogleMapAPI（Heatmap Layer）
• Google App Engine

※Google App Engineは技術的というよりも環境の話になりますが、無料で使用できる枠があり、SSL(https)やhttp2にも対応しているためちょっとしたものを作成・公開するのに最適だと思います。

Polymerについて

最初は Polymer Catalog から使いそうなものを自分で選択してみましたが、コンポーネント間の依存が解決できなかったのか思った通りに動かなかったので、Polymer Starter Kitを利用しました。 これはWEBアプリの雛形として十分に使えるので初めてPolymerを使用する方はまずここから始めることをお勧めします。

また気軽にマテリアルデザインを使ってみたい人はMaterial Design Liteを使ってみることをお勧めします。 こちらはBootstrapのようにCSSの指定だけで、マテリアルデザインが簡単に実現できます。 テンプレートも用意されているので、初心者にも使いやすいと思います。このブログもMDLで作成しています。

作ってみて思った点

・良かった点
Starter kitが秀逸なので、大きく変更しなければ、それっぽいものが簡単に作れる。
モバイルで見ても思った以上になめらかな動きをする。 メニューの開閉のなめらかさにはちょっと感動した。

・困った点
各イベントの実行タイミングが良くわからなかったため、初期化処理をどこで記述すれば動くのか手探りになった。 エレメント単体のイベント実行順は 本家サイト にあるが、例えばファーストページではないエレメントはページ表示時に発火するのか、ページ自体にアクセスがあった際に発火するのかなどが分からなかった。

ヒートマップの切り替えに手こずった。 ヒートマップの値を初期化して、再度値を設定しても前の値が残ってしまう問題に直面。 表示するたびに画面が重くなり、最終的にはフリーズしてしまうので、結構深刻だった。 分かってしまえば大した話ではないけど、ヒートマップを使っている人が少ないためかなかなか解決方法を見つけられなかった。

ブラウザによって各種APIの対応状況が違う。 特にiOSのブラウザは他と比較して対応してないAPIが結構あり、最後まで悩みのタネだった。

最後に

今回はまず動くものを作ってみたかったのでdomへのアクセス方法など作法的な部分はだいぶ目を瞑りました。 今後は今回のWEBアプリを作成するにあたって得られた知見をPolymerの作法を意識しつつ部分ごとに紹介していきたいと思います。 また個人的にはペットホテルに犬を預けたときにどんな散歩コースを歩いたのか知りたと思ったりするので、履歴情報の受け渡しが出来る機能を気が向いたら実装したいと思っています。

最後まで読んで頂きありがとうございました。