降りつぶし.net~同期するWebアプリ・スマホアプリの開発・運用~

第6回(最終回) Android用アプリケーション「降りつぶしroid」の開発

この記事を読むのに必要な時間:およそ 7 分

スマホ用アプリ第2弾

降りつぶし.netは,⁠日本の鉄道駅」にいつ乗下車したのか,を管理するソリューションです。前々回まで,過去の記録を管理するためのWebアプリケーションと,そのWebアプリケーションとデータを同期する仕組みについて説明しました。そして前回と今回にわたり,リアルタイムに記録を更新することができるスマホアプリの開発について説明します。最終回となる今回は,前回取り上げたiPhone用アプリの完成後に制作しリリースした,Android用アプリケーション「降りつぶしroid」です。

Androidアプリの開発

降りつぶしroidは,Android 2.2以降で動作する,降りつぶし管理のためのアプリケーションです。最初のバージョンは2012年12月にリリースしました。iPhoneアプリのリリースからまる1年かかってしまいました。

これは,Android開発には様々な落とし穴があり過ぎたこと,筆者自身がJavaに対して苦手意識を持っていたこと,の2つによります。

Androidアプリの経験は,2011年に既に動作しているアプリの修正作業などを手伝う機会があり,その後同年9月に(すなわち,i降りつぶしの開発と並行して)地図を操作するアプリのテスト開発を受託し,3ヵ月で一応完成させています。しかしこれが今考えると実にひどい実装で,要求仕様どおりには動作しているのですが少しでも機能拡張しようとするとうまく動かなくなる,そんな代物だったのです。

また,Javaについては,得意としていたC++でできることがあれもできないこれもできない,ということで面倒くさく感じていました。が,2012年,Javaの案件(おもにServlet)の受託が急に増えたためそうも言ってられなくなり,慣れてきて苦手意識もなくなりました。これも年末にリリースを間に合わせる原動力になりました。

Android Maps V2への対応

2012年12月リリースの初版は,地図APIとしてAndroid Mapsを使っていました。

このAPI,レイヤの追従描画がスムーズでない,そのままではタップジェスチャを独自に拾えない,マーカーは重なりも考慮しながらすべて自前で描画しなければならない,吹き出しは完全に自前で実装しなければならない,一部APIがドキュメントどおりに動かない,Honeycomb(3.0)からの新しい画面の仕組みであるフラグメントと共存できない,とないないづくしの恐るべき代物で,かなり苦労させられました。

ところが,その同じ2012年12月,Android Maps V2という新バージョンのAPIが公開されたのです。上記の問題をほぼすべて解決し,当時のGoogle Mapsアプリとほぼ同じ操作もできるというこのAPI。しかし,これは従来のAPIとまったく互換性がありませんでした。

その時点でアクティビティを切り替える実装などすべて済んでいたので,いまさらすべての画面をフラグメントにつくりかえることなど,年内リリースの目標上,絶対に不可能です。

そんなわけで,初版では古い地図APIによる古い描画の地図画面となっていました。

そして2013年11月,ついにV2への対応が完了しています。同年8月に,Jelly Beans(4.1)のUIを古いAndroidでも動作させることができるサポートライブラリの完成度が上がったことで,重い腰をあげることになりました。また,この連載に合わせて完成させるというのもきっかけの1つではあります(笑)⁠

以下に紹介する画面は,その最新版のものとなります。

地図画面

最新版の降りつぶしroidは,Jelly Beansの標準的なUIである,アクションバーおよびナビゲーションドロワーを持つアプリケーションです。アプリの初回起動時の表示は地図画面となりますが,それ以降の起動時は最後に表示していた画面を再度開くようになっています。

図1 地図画面

図1 地図画面

i降りつぶしの地図画面UIを踏襲しつつ,操作感やミテクレをAndroid版の地図アプリに近づけた画面となっています。もちろん,スワイプやピンチで表示領域を変化させることができます。回転や傾斜も可能です。

上部にはコンパス(必要に応じて表示)⁠検索ボックス,および現在位置移動ボタン(タップにより中心が現在位置に移動)があり,下には表示切り替え用の半透明なセグメンティッドコントロール風の(実は)ラジオボタン,またズームイン/アウトボタンがあります。地図部分をシングルタップすると,トグルで検索バーおよびラジオボタンの表示・非表示が切り換わります。決して広くない地図画面を少しでも広げるための機能です。

また画面上には,降りつぶしroidが管理する鉄道駅がピンでプロットされています。赤いピンは乗下車していない駅,緑のピンは乗下車済の駅です。

これらのピンをタップすると,情報ビュー(吹き出し)が表示されます。表示されている情報ビューをタップすると,後述する「駅情報画面」が表示されます。

図2 地図画面での表示の切り換え

図2 地図画面での表示の切り換え

地図の下部には2セットのセグメンティッドコントロール風のラジオボタンが配置されています。

これらの操作とその意味は,第5回の記事で説明したi降りつぶしとまったく同一です。

ただし,i降りつぶしにおいては,これらはツールバー上に置かれていました。降りつぶしroidではこれが地図上に半透明なボタンとして置かれています。一覧表示画面は単なるリストビューなのですが,これらのボタンを消してしまうと地図表示に戻る方法がなくなってしまいます。そのため,ぶかっこうなのですが,一覧表示でもボタンを表示したままにしています。

図3 検索画面とその結果

図3 検索画面とその結果

上部の検索ボックスをタップすると地図検索モードとなります。i降りつぶしでは,単純な地点検索と,駅の絞り込み表示の設定という,2つの機能が実装されていましたが,降りつぶしroidでは後者は未実装となっています。次期バージョンでは実装される予定です。

検索ボックスに地名などを入力して検索を実行すると,入力された語句をGoogle Maps APIで検索し,検索結果のうちユーザが選択した地点を地図の中心に移動させます。この機能は地図表示にのみ影響するもので,駅データベースへの操作を含みません。

駅情報画面・乗下車日画面・メモ画面

地図画面の情報ビュー(吹き出し)をタップした場合,あるいは地図画面または他の画面にて表示されている駅の一覧から特定の駅をタップした場合,この画面が開きます。

図4 駅情報画面・乗下車日画面・メモ画面

図4 駅情報画面・乗下車日画面・メモ画面

レイアウトは異なりますが,これらの画面の機能も第5回で解説したi降りつぶしとまったく同じです。

駅情報画面の「今日」ボタンをタップすると,乗下車日画面を出すことなく直接その時点での日付がデータベースに登録されます。

また「乗下車」をタップすると乗下車日画面が開きます。乗下車済か未乗下車かの切り換えはチェックボックスで行い,年・月・日の設定は数値ピッカーで行います。

なおこの画面は,Honeycomb以降の環境で実行した場合のものです。バージョン2.xには数値ピッカーが存在しません。そのためリフレクションで日付ピッカーからリソースを取り出し,各環境にマッチしたUIでの日付入力を実現しています。両者の切り分けは,ベタですがバージョン別にレイアウトファイルを用意し,さらにロジックも単純なif文での場合分けです。

図5 乗下車日画面のバージョン比較

図5 乗下車日画面のバージョン比較

著者プロフィール

よねざわいずみ

合資会社ダブルエスエフ代表社員。学習塾講師やら芸能ライターやら劇団主宰やらいろいろ経て現在はよろず請負プログラマ。最近の開発はPHP,JavaScript,Java,MTプラグインなど。お仕事随時募集中。

Twitter:@yonezawaizumi

鉄道旅行ブログ:http://feelfine.blog.izumichan.com/

コメント

コメントの記入