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

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

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

苦慮したiOS7対応

最後に,せっかくのタイミングですので,iOS7対応について軽く触れておきます。

図14 iOS7における地図画面・一覧表示画面

図14 iOS7における地図画面・一覧表示画面

最近の筆者はAndroid端末を常用しており,iPod touchはまさにiPodとして使っていたため,最新情報に疎く,⁠フラットデザインに変わる」という情報しか頭に残っていませんでした。それはそれで対応はいずれ必要であっても,とりあえず動くだろうから放置して後日対応しようかな,とたかをくくっていたのですが,結果,してやられてしまいました。

実際にiOS7で従来のi降りつぶしを動かしてみたところ,以下のような問題が発生しました。より深刻だった順です。

  1. 検索バーが表示されず,クリックしても無反応となり,検索機能が利用できない
  2. 1.を解消しても,地点検索で複数の候補が検索された場合,候補の一覧表示が出ず,地点を選択できない
  3. インターフェースビルダ(画面設計をGUIで行う,Xcode内蔵のツール)ではなくコードで画面を作っていると,ビューの位置がおかしくなり,上部がナビゲーションバーに隠れてしまったり,下部に余分な空白が出たりする
  4. スイッチコントロールの幅が大きく変わったため,配置の見栄えが悪化
  5. 角丸矩形ボタンのデザインが変わり,枠線がなくなった結果,同期画面の視認性が著しく悪化した
  6. ステータスバーやナビゲーションバーの後ろが透け,テーブルビューのスクロールが見えているのに,各種一覧画面でステータスバーの下部につけた独自ヘッダの部分だけ透けておらず,違和感がある

図15 iOS6.1とiOS7でのアラートビュー

図15 iOS6.1とiOS7でのアラートビュー

1.は,iOS6以下で,検索バーを半透明なナビゲーションバーに入れるためのハック,および空欄の際に仮想キーボードの「検索」ボタンをタップできないようにするためのハックを入れていたためでした。幸いにしてこれらのハックじたいがiOS7では不要となったため,iOS7ではハックコードを実行しないようにして解決しました。

2.は,アラートビューの内部に任意のビューを入れるというハックがiOS7で一切動作しなくなったため,候補一覧を収めたテーブルビューが挿入できず,表示が出なくなった,というものでした。これは解決策がなかったため,iOS7の場合,見かけ上の大きさを背景を半透明にすることでアラートビューと同じにするというモーダルビューを表示し,ごまかすことにしました。このUI,標準のマップアプリでは実現しているので,何か非公開APIはあるのかもしれませんが……。

3.と4.は,UIをコードでデザインすることの危険性を,改めて体感することとなりました。これはフラットデザイン化で,画面の表示領域がステータスバーの領域まで広がったことによります。インターフェースビルダで設定すると自動的に調整されるのですが,コードだとベタ書きするしかなかったのです。

図16 iOS7における旧バージョンと最新バージョンの同期画面

図16 iOS7における旧バージョンと最新バージョンの同期画面

そして5.は,結局まともな対処方法を編み出すことができず,ご覧のとおり,システムのボタンの幅を横100%にしてごまかすことにしました。

図17 iOS7での背景透過のまねごと。独自ヘッダ部分では緑丸アイコンと「門司駅」がうっすら見えている。ステータスバーおよびナビゲーションバーではblurによりアイコンの緑色がぼんやり大きく広がっている

図17 iOS7での背景透過のまねごと。独自ヘッダ部分では緑丸アイコンと「門司駅」がうっすら見えている。ステータスバーおよびナビゲーションバーではblurによりアイコンの緑色がぼんやり大きく広がっている

6.は,単に透けさせるだけなら,色と透明度の調整だけです。しかしよく見ると,ステータスバーやナビゲーションバーの背後の表示内容には,かなりのblur効果がかかっています。これを実現する公開APIは存在しないため,世にある各種コードを使ってリアルタイムでのblurを試みたのですが,iOS7の開発バージョンではいずれもメモリリークするという状態だったため,泣く泣く断念しています。

次回はAndroidアプリ編

次回は連載最終回,Android版アプリ「降りつぶしroid」の紹介です。

i降りつぶしと大きく実装が異なる部分を中心に説明する予定です。

ミニコラム・ノマド開発&IT旅行

今回,冒頭で「i降りつぶしの開発は実質3ヶ月間」と書きました。実際には,うち2ヶ月間,Webアプリとセットではありますが,受託業務を約半分に減らして取り組んでいます。が,それでも,フルタイムで開発できた時間は延べ1ヵ月程度。一方で,ほぼすべての休日には降りつぶしのため出かけなければなりません。

それでも完成させられたのは,ひとえに,ノマド開発のおかげです。観光もせずにひたすら駅に乗下車しまくる旅行でも,ダイヤの都合上,1~2時間程度の空き時間がしばしば発生します。また列車での長距離移動では,その移動時間もまるまる空き時間です。初めて乗る線区なら景色を眺めたいところですが,正直,もう何度も乗っている線区が多くなりましたし(笑⁠⁠,これがまさに開発の時間となりました。

最大の問題である電源は,どのみちiPhoneアプリ開発に必須だったMacBookを,Airですが購入したため,サードパーティの専用外付け大容量セカンドバッテリを併用し,問題とならなくなりました。なにせセカンドバッテリ1回の充電ぶんで,MBAをほぼ2回充電できるのですから。つまり1日の使用可能時間を3倍に増やせたのです。

図A 2011年11月,JR四国の特急グリーン車(1万円で3日間乗り放題の「バースデイきっぷ」利用)で開発中のi降りつぶし。検索バーの幅がおかしい

図A 2011年11月,JR四国の特急グリーン車(1万円で3日間乗り放題の「バースデイきっぷ」利用)で開発中のi降りつぶし。検索バーの幅がおかしい

一方,そんなノマド環境の整備は,旅行者としての自己にも大きな変革をもたらしました。

その最大の変化は,⁠紙の時刻表を持ち歩かなくなった」ことです。

これ,鉄道マニアから心底驚かれることなのです。というのも,分刻みのスケジュールで乗り継ぐ者にとって,突発的なダイヤ乱れが発生した直後,次の乗り継ぎを急遽調べられることは必須のスキル。第3回のミニコラムで述べたとおり,行程はジグザグであり,それを時刻検索ソフトで検索することはほぼ不可能です。そのため一般的には紙の時刻表は必須となります。ただし一冊ですと重いため,みなさん,必要なページのみをコピーしたり,毎月買っている時刻表マニアならば前月の号をバラして綴じ直して携行したりしておられるようです。しかし筆者は,旅行中に次の予定を考えたりもするため,結局まるごと持ち歩いていました。

そしてそれを不要にでき,荷物が大幅に軽くなりました。PC版の駅すぱあとには,紙とほぼ同じ体裁で路線時刻表を表示する機能があります。これが紙の時刻表を上回っているのです。複数の路線が乗り入れている場合,紙の時刻表では別々のページへの掲載が多いのですが(例:東北本線・水郡線の安積永盛-郡山間⁠⁠,駅すぱあとではすべてマージされます。JRについては全駅の到着時刻も表示可能で,通過待ちがあるから駅に降りられる,などのとっさの判断も容易です。極限まで小さいフォントにすれば,MBAでもなんとか実用的な視認性が得られます(筆者はOsaka 6ptで見ています⁠⁠。

問題は,駅すぱあとにはIntel Macで動く版が存在しないことですが,筆者はそのためにVMware FusionとWindows 7を購入し,Windows版を動作させています。さらに,スマホ圏外でも地図を見るため(突発的なダイヤ乱れでの駅間徒歩移動調査用)のWindows版の地図ソフト,JRの複雑な運賃計算を実行できるMS-DOS用のソフトMARS.exeもWindows内にインストールしています。

もはや旅行に必要な紙片は,きっぷだけ。まさにIT化された旅行ですが,使ったきっぷの収集もしている筆者としては,それだけはIT化されたくないような……(笑⁠⁠。

図B 筆者使用のMacBook Airで表示した駅すぱあとの路線時刻表

図B 筆者使用のMacBook Airで表示した駅すぱあとの路線時刻表

著者プロフィール

よねざわいずみ

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

Twitter:@yonezawaizumi

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