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

第5回 iPhone用アプリケーション「i降りつぶし」の開発

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

スマホ用アプリ

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

iPhoneアプリの開発

i降りつぶしは,2011年12月に最初のバージョンをリリースしています。Webアプリ版は同年11月末の公開でしたので,わずか半月で開発……できるわけはありません。

実際には,Webアプリの開発と同時並行で進めていました。このためにMacBook Airを同年8月末に購入,ただちに着手していましたので,3ヶ月かかったことになります。

もちろん,それまで何も経験がないところからでは,3ヶ月での開発も不可能です。実はそれ以前,2010年末から2011年夏にかけ,iPad用の商品カタログアプリ(Ad-Hoc版)⁠地図を操作するアプリ(App Store経由での広告付無料配布)の開発を受託したことがあり(開発機は貸与)⁠Objective-Cはその際に覚えました。ちょうど,単なる画面切り替えアプリを手探りで作り,次にMapKitでの位置情報サービスアプリの開発で細かいノウハウを吸収する,という手順で,まさに「お金をもらいながらの勉強」をさせていただきました。

筆者のプログラミング歴は,未成年時代のBASICは別として,MS-DOS用のいわゆるフリーソフトウェアを1988年に作りはじめてからとなります。もちろん当時はCで開発するしかなく,その後プロになりちょうどWindows 3.1の開発に関わるようになってC++を覚え,以来2001年まではほぼC++での開発をメインに行なっていました。その経験もあり,Objective-Cとはじめて接したときも,そのきわめて柔軟な仕様にはプラスイメージしか感じず,久々に「言語を操ること」じたいを楽しみながら開発できました。

そんな中,実質3本めのiOSアプリ開発となったのがこのi降りつぶしです。

地図画面

i降りつぶしは,iPhoneアプリとしてはごくごく一般的な,ポートレート(縦長)固定画面のタブバー切り換えアプリケーションです。そしてアプリ起動直後の表示は地図画面となります。

図1 地図画面

図1 地図画面

きわめてオーソドックスな地図画面です。もちろん,スワイプやピンチで表示領域を変化させることができます。

上部には現在位置移動ボタン(タップにより中心が現在位置に移動)および検索バーがあり,下にツールバーがあります。そして地図部分をシングルタップすると,トグルでその2つのバーの表示・非表示が切り換わります。決して広くない地図画面を少しでも広げるための,地図アプリではオーソドックスな工夫です。

また,画面上には,i降りつぶしが管理する鉄道駅が,ピンでプロットされています(iOSでは地図上のマーカをアノテーションと呼びますが,以下,ピンとします)⁠赤いピンは乗下車していない駅,緑のピンは乗下車済の駅です。

これらのピンをタップすると,コールアウト(吹き出し)が表示されます。さらにこのコールアウト右側の情報ボタンをタップすると,後述する「駅情報画面」が表示されます。

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

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

下部のツールバーには2セットのセグメンティッドコントロールが配置されています。

左側のコントロールは,画面上に表示するピンの種類を,⁠全駅」⁠乗下車済駅のみ」⁠未乗下車駅のみ」と切り換えます。自分が乗下車した駅がどのくらいあるのか,残りは何駅あるのか,を見て,ニヤニヤするためだけの機能です(笑)⁠

右側のコントロールのうち,⁠地図」⁠空撮」⁠複合」は,Googleマップなどと同じ意味です。唯一特殊なのが「一覧」で,これをタップすると,地図上に表示されている駅を,地図の表示の中心位置から近い順に,テーブルビューで一覧表示する,という機能です。

これは降りつぶしアプリには必須の機能なのです。同じ駅に複数の鉄道事業者が乗り入れている場合,また同じ事業者でも新幹線駅と在来線駅がある場合(降りつぶし.netでは,新幹線の駅は在来線の駅とは「別の駅」と扱う仕様です)⁠厳密な「停車場中心」を調べきれていないため第2回参照)⁠駅の位置情報が同じになっている場合があります(図2の小田原駅がまさにそれ)⁠この場合,地図上のピンをタップしてそれぞれの駅の吹き出しを出し分けることは不可能です。そんなとき,この「一覧」を選択することによって,ピンが重なっていてもすべてを表示し分けることが可能となっています。もちろん,この各項目をタップすると,地図のコールアウトをタップしたのと同じく,⁠駅情報画面」が表示されます。

図3 検索画面とその結果

図3 検索画面とその結果

上部の検索バーをタップすると地図検索モードとなり,スコープバーもどきが表示されます。これはiOS標準のスコープバーではなく,同じビジュアルのビューを自前で表示しているものです。

セグメンティッドコントロールが2つ表示されていますが,上のコントロールは検索種別の指定です。下のコントロールは「駅名」⁠読み」⁠路線」を上で選択したときに限り有効で,検索語の前方一致・部分一致を選択できます。

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

一方,その他の検索種別を指定した場合は,アプリ内部のSQLiteデータベースから条件に一致する駅を検索し,地図上にそれらのみを表示させるデータベース検索のフィルタとして動作することになります。

このような,同じ操作にまったく異なる2つの動作が混在しているUIは,一般的には好ましいものではありません。ただ,一度試してみればその違いは直感的に明らかとなり,使い分けも自然と行えるだろう,と判断しての実装となっています。

著者プロフィール

よねざわいずみ

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

Twitter:@yonezawaizumi

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

コメント

コメントの記入