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

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

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

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

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

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

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

言うまでもなく,駅データベースとしてのi降りつぶしの,まさにデータベースレコードを表示します,という画面です。そしてもちろん,乗下車記録の管理もここから行います。

「乗下車」をタップすると乗下車日画面が開きます。乗下車済か未乗下車かの切り換えはスイッチコントロールで行い,年・月・日に「不明」を含み,スイッチが「オン」になっていれば,フリックやスワイプで無限に回転するようにカスタマイズした日付ピッカーコントロールで指定された日付が記録されます。

なお,この画面が閉じられる際,日付ピッカーの位置は保存され,次にこの画面を開いた駅が「未乗下車」状態だった場合,日付ピッカーは前の駅で入力したのと同じ日付になります。これは,スマホから過去の記録を一括入力する場合の利便性を考えて実装した機能です。入力し忘れていた昨日降りた駅を連続して入力したい,というような場合,日付ピッカーの操作が一切不要となります。

また,⁠メモ」をタップするとメモ画面が開きます。説明すべきことは……とくにありません。

そして筆者が個人的に重宝しているのが,駅情報画面の残り3つの項目です。

「今日,乗下車しました!」をタップすると,乗下車日画面を開くことなく,ただちに現在日が乗下車日として設定され,この項目自体が消滅します。この消滅はiOSのUIとしてはやや問題ありですが,実際に駅で記録をつける際に絶大な威力を発揮しています。

「この駅をウィキペディアで見る…」をタップすると,Safariが開いてウィキペディアの当該駅の項目を読めます。これもまた,駅構造や駅営業時間,駅前の様子などでふと思った疑問を現場で調べるのに重宝しています。

「この駅を地図の中心に表示…」は,これをタップしても何も起こりませんが,その後で地図画面に戻る,あるいは開くと,この駅が画面中央に来ています。これは,他の一覧画面から駅を調べ,その駅の周囲の地図を確認する場合,たとえば通勤中などに次回の旅の計画を考えたりずるときに有用です。

全事業者画面・事業者画面・路線画面・駅一覧画面

タブバーの「全事業者」をタップすると開く画面です。テーブルビューによる一覧表示で,Webアプリと全く同じ遷移第3回参照)を行います。各項目の表示順もWebアプリと完全に同一です。

図5 全事業者画面・事業者画面・路線画面・駅一覧画面

図5 全事業者画面・事業者画面・路線画面・駅一覧画面

この画面のレイアウトは,一覧表示系のすべての画面で共通です。プログラミング的には,UINavigationControllerを継承したGroupsViewControllerクラスを共通の基底クラスにして処理しています。

標準UIのナビゲーションバーの下には,独自のヘッダがあります。このヘッダには,その画面で表示されているすべての駅の数と,そのうち乗下車済駅の数,乗下車済率,残りの駅数が表示されます。

テーブルビューの各セル(行)は,左端に乗下車済かどうかがわかるアイコン(緑丸が乗下車済,赤棒線が未乗下車。非同期ロード中は灰色の三点リーダ⁠⁠,大きめの太字で事業者種別・事業者名・路線名・駅名,その下に小さめの細字で情報,というレイアウトになっています。この情報は,駅一覧画面では乗下車日を,それ以外ではヘッダと同じ統計情報を,それぞれ表示しています。

すべてのセルはタップ可能で,駅一覧画面以外ではより深い階層の画面が開かれ,駅一覧画面では先の駅情報画面が開かれます。

なお,これら4画面のうち,路線画面のみ,ナビゲーションバーの右上に「地図選択」というボタンが表示されます。これをタップすると,地図画面の検索バーに,この画面で表示されている路線の駅のみのフィルタリングが設定されます。もちろん,地図上のピン表示も,この路線の駅のみとなります。

全都道府県画面・駅一覧画面

図6 全都道府県画面・駅一覧画面

図6 全都道府県画面・駅一覧画面

都道府県別の統計を見ることができます。2階層のみの構成で,都道府県をタップすると,その都道府県に位置する全駅の一覧が表示されます。駅一覧は,市郡名以下の住所の文字列による文字コード順で並べているため,実用性はあまりありません。全都道府県画面で各都道府県別の統計情報を見る,という用途が主となります。

駅一覧画面の各セルの情報表示は,乗下車日と住所をコロンで並べたものです。

また駅一覧画面のナビゲーションバーの右上には「地図選択」ボタンがあり,タップすると地図画面にて当該都道府県に位置する駅のピンのみがフィルタリング表示されるようになります。

読み画面・読み画面2・駅一覧画面

図7 読み画面・駅一覧画面

図7 読み画面・駅一覧画面

読みがな別の統計を見ることができます。3階層構成で,読みがなの先頭1文字をまず選択し,次に読みがなの先頭2文字を選択して,3階層めで読みがな先頭2文字が一致する駅の一覧となります。

まるで実用性がなく,むしろ降りつぶしとは関係ない雑学豆知識ネタ(⁠⁠ぴ」ではじまる駅はあるのに「ぷ」ではじまる駅はない,など)としての活用が主となるでしょう(笑⁠⁠。

駅一覧画面のソート順は読みがな順,各セルの情報表示は乗下車日・フルの読みがな・事業者名を並べたものです。ナビゲーションバー右上の「地図選択」ボタンは,タップすると地図画面にて当該読みがな1文字または2文字ではじまる駅のピンのみがフィルタリング表示されるようになります。

なお,この画面には現在,不具合があります。鉄道ファンや多くの三重県民にとっては「あるある」話ですが,JR西日本・近鉄・伊勢鉄道の津駅の扱いです。なにせ読みがなは「つ⁠⁠,2文字目が存在しません。しかしこの画面での一覧はあくまで「読みがなが○○ではじまる駅」ですから,⁠つ(2文字目なし⁠⁠」という読みがな2文字の駅一覧を単純にデータベースから検索すると,⁠つ」で始まるすべての駅が表示されてしまいます。アプリの次期更新で,1文字駅を特別扱いするコードを追加し,この不具合を解消する予定です。

著者プロフィール

よねざわいずみ

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

Twitter:@yonezawaizumi

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