iPadアプリ「じゃらん東京」、「じゃらん四国」リリースしました
フナミタカオです。
９月17日にiPadアプリケーション、「じゃらん東京」、「じゃらん四国」をリリースしました。iPad有料旅行ジャンルランキングで、５月にリリースした「じゃらん沖縄」とあわせて１〜３位に並ぶことができました。購入いただいたみなさま、心より感謝いたします。
今年の夏はこのアプリの開発をずーっとやっていましたが、AppStoreに並んだ瞬間は本当感慨深いものが有りました。また、9/24より「じゃらん四国」はiTunesStoreのトップバナーでも紹介されることになりました。本当嬉しいです。このエントリでは、開発者自ら、愛を込めて、このアプリのいいところをご紹介しますね。
9/26からiTunes Storeのトップページで紹介されています！
じゃらん沖縄
東京、四国の前身となる、アプリが「じゃらん沖縄」です じゃらんムックとして発売中の本のPDFをベースに、記事と地図の連動ができるところが、このアプリの特徴です。 こちらの動画やiPadじゃらん沖縄アプリのご紹介
http://www.jalan.net/jalan/doc/howto/20100526_ipad_okinawa.html
をご覧いただければと思います。
このじゃらん沖縄に関しては、国内発売と同時にiPadをリリースしたいと思っていたときに、じゃらんコンテンツの電子化が検討されていることを知り、短期間で開発に取り組んだのでした。すでに、本として世の中に出ているものでもあり、たとえ、PDFを読めるだけのシンプルなものであっても、コンテンツが魅力的なので、そこそこダウンロードしてもらえるのではという皮算用もあり、じゃらんコンテンツをアプリ化したいと強く思いました。
すばらしいコンテンツをアプリができることになったのですが、課題は3つありました。
1.アプリの開発力の習得
2.いけてるUIをつくる
3.制作フローの設計と実装
1.アプリの開発力の習得
これまで、iPhoneのホットペッパーアプリの開発経験があったのですが、ホットペッパーアプリでは、UIKitには、ほとんど手を付けずじまいだったので、UIKitのお作法から勉強しながら開発するという状態でした。 ただ、たくさんの参考書が本屋さんで買える状態になっているということは、ラッキーでした。開発ノウハウを本にしていただいた皆様には本当感謝です。いくつか読んだのですが、
iPhoneプログラミングUIKit詳解リファレンス
そのなかでUIKit系で参考になったは↑こちらです。
iPhoneSDK開発のレシピ
またPDFの読み書きや、トリッキー的なことは↑こちらです。
最初はPDFをそのまま表示する方針で実装していたのですが、元PDFが印刷品質ということもあり、ラスタライズが劇重で、とても使えなかったです。
PDFのままでも、画像の最適化等を行えばつかえるかもしれないとおもったのですが、iBookのPDF表示もそれほど、速くないことを鑑み、はやばやと断念。PNG形式を２つの解像度で用意し、拡大縮小にあわせて差し替えるという方法で本誌の画像は入れ込みました。
ただ、アプリサイズは肥大化し、PDFの状態であれば、150MBほどだったのですが、PNGにすると400MB近くになってしまいました。
かなり大きくなったとはいえ、元素図鑑のサイズが2Gということを知り、サイズは気にせずに大きなままになっています。
参考：ファイルサイズ1.2GのiPadアプリを見つけた - iRSSの日記
苦労話でいけば、ページングのアニメーション実装や、メモリリークつぶしと多数ありますが、実装しながら、考えるという開発作業で、横展開するよりも、自力で試行錯誤する方式をとりました。
2.いけてるUIをつくる
じゃらん沖縄の売りは、「２画面UIによる、記事と地図の連動」だと思います。
特にじゃらんが旅行ガイドブックであったことも幸いしたのですが、地図と記事をrんどうさせることで、今までにない体験を提案できたのではと思っています。
この２画面UIが生まれたヒントはiPhoneプログラミングUIKit詳解リファレンスにありました。
SampleForRotateManualという回転したときに、縦と横それぞれで、ビューを変えるというサンプルコードがありました。
このように、縦と、横で、画像の 配置を換えています。
この回転サンプルをヒントに、画像の部分を記事とMapにしたらどうだろと、実装してみました。
そしてもうひとつ、この２画面UIには、実は結構前から思い入れがありました。
2006年9月15日、MTLの前身の「たたみラボ」時代に「PlaceEngine開発元のソニーコンピュータサイエンス研究所に潜入！」というブログをエントリしているのですが、ここでDSでガイドブック的なものが作れないかと構想していました。
当時はGPSはまだまだ珍しく、PlaceEngineと組み合わせれば、位置連動のアプリができるなあと思っていました。今回の開発では、一般の開発者でも持ち運べるGPS内蔵タブレット(=iPad)にアプリを載せることができる時代がきたんだなあという点でも、非常に感銘を受けました。
ほんの３年前には、夢のような話だったのですから...
この思いが、iPhoneプログラミングUIKit詳解リファレンスとつながるのですが、実装始めちゃうと、意外とあっさりと動いたのもびっくりでした。
最初に動作したときの写真ですが、これをみたときは、我ながら感動しました。
ちゃんと回転したりしています。ことしのGWはこのへんの実装をずーっとやっていました。
寝不足になって、大変ではあったのですが、面白くて寝る間も惜しんで開発しているという状態で本当たのしかったです。
3.制作フローの設計と実装
PDFから、画像変換を行い、２画面UIのビューアも目処がたってきましたが、もう一つ重要なのは、メタデータの追加。 記事と地図を連動させるには、記事が何ページ目のどの矩形にあるのかを座標で指定されている必要があります。また、各スポットのジャンルや、エリア名も本誌の状態では持っていませんでした。必要なの情報は、スポットごとに
-掲載されているページと、ページ内の座標。
-店名、エリア名等の情報
-緯度経度
となります。
これらを、メタデータとして付与するために、簡易的なデータエントリフローを構築しました。
これらを実現するために、各スポットに、ユニークなIDをつけて、IDで、それぞれのデータをひもづけるようにしました。
専用の入力システムはないのですが、以下のように、３つのツールを使って、作業を進めました。かなり、地味な作業です。
-掲載されているページと、ページ内の座標。 --- PDFへの注釈付与 -- テキストとしてIDを入力
注釈ツールはMacOSX10.6のプレビューだと付与可能。Acrobatなしでできた
-店名、エリア名等の情報 --- エクセル ---店名等はPDFからコピー＆ペースト
DTPデータはあるのですが、一覧データはありませんでした。
-緯度経度 --- Google マイマップ -- コメント欄にIDを入力
マイマップで緯度経度を指定し、KMLをダウンロード＆パースし、文字列に入力したコメントから、スポットIDを取り出し、ID、緯度、経度の一覧を作成しました。
東京、四国版も同様の方法でつくられています。
このメタデータの作成の部分は、じゃらんムック編集部の皆様ににおねがいしました。
出来合いのツールの組み合わせでしたが、開発者でなくても、使えるツールを提供することで、作業の分担を行えました。
最終的には、これらのデータをマージして、CodeDataに投入しています。
iPadの国内発売延期もあり、開発期間に１ヶ月余裕ができたのですが、その分機能のアイデアはいろいろ出てくるもので、積み残しがありつつ、なんとか、iPadの発売と同時にリリースすることができました。
発売同時であったことや、テレビ数社にも取り上げていただき、好調な売れ行きでした。
じゃらん東京、じゃらん四国での拡張点
さて、好調のじゃらん沖縄でしたが、積み残しと思っていた点は、びしっとユーザーの皆様からレビューにて、ご指摘いただきました。
いくつかピックアップさせていただくと
面白いけど・・・ - ★★by Kaeruman - Version 1.0.0 - 05 July 2010
沖縄に行く予定があったので、初めて有料app購入しました。 まさに持ち運ぶipadらしい試みだと思います。 ただ・・・出来は中途半端ですね。
1)気にいった記事の店から地図に飛べない 地図上のピンをクリックすると記事に飛べるけど旅行でガイドブックを使う時は逆のケースが多いはず。
2)メモ機能が欲しい 本なら折り目を入れておけばいいんですけど。せめて付箋くらいつけられないものですかねぇ？？
3)GPS機能生かして 今いる場所からどれ位か、分かると使う意味があると思うんですが。
とにかく、値段が安いから文句は言えないんでしょうが、ipadの良さを生かし切ってない、非常に惜しい！ 改善すればすごくいいものになると思います。
沖縄に行って使いました。 - ★★★★by やーや - Version 1.0.0 - 20 July 2010
使いにくい点もありましたが、大変役に立ちました。 現在地から最寄りのショップ検索ができるようになれば最高だと思うので☆４つにさせてもらいました。
他の方も書いてますが記事から地図に飛べれるようにもしてもらいたいですね。
実際にはマップ表示にして現在地周辺のドロップを一つずつチェックして気になるところへ行ってみました。 ルート案内できないのでmapと併用で使いました。 雑誌だと暗いところでは読めない記事でもiPadなら夜道でも歩きながら拡大して読めたりできたので大変助かりました。 買ってよかったアプリです。
まずまず良い内容だが、操作性はもう一息 - ★★★by Double-H - Version 1.0.0 - 27 May 2010
雑誌の内容に加えて、地図連動という付加価値があって350円（期間限定115円）という価格は絶妙で、普段この手のガイドブックなんて要らないと思っている私も買ってしまった。沖縄や北海道など頻繁に出かけていて、十分知っているから不要と思っていても、iPadに入ってこの値段なら一冊買って入れておこう、と思う。
ただ、操作性がこなれてないのが気になった。電子書籍ならではの「ページをめくる」感覚がないだけでなく、右へ進めば良いのか、左へ進めばいいのか、非常に判りづらい。 最初は右に進むようになってるのだが、すぐにいけなくなり、その後は目次からしか行けないのか？と誤解を与えかねない作りは要改善。電子書籍とは言え、本の体裁を取っているのだから、最初から常に一方向で最後まで読めるようにすべき。
できれば、巻頭の目次ページくらいは、記事タイトルをタッチすれば、該当ページにジャンプできるようにした方がいいと思う。
また、地図連動そのものは良いのだが、操作を誤って海のど真ん中に行ってしまったような場合のために、初期全体図に戻るボタンもあった方が慣れない人のためには良いだろうと思う。 内容は良いのだから、操作性を改善すれば、素晴らしい定番ガイドブック電子書籍シリーズとして十分評価できるものになると思う。
iphone対応でなかった・・・ - ★★★by 勇魚 - Version 1.0.0 - 28 May 2010
ipad専用とは・・・。購入したあとに気づいてしまった・・。旅先でipadで利用というよりiphoneでの利用したい ひとの方が多いと思います。書店で読んで良かったので期待していたんですが残念です。 iphoneへの対応へのバージョンアップを是非お願いしたい。
・ページめくりの方向を統一してほしい。
・記事から、地図を呼出せるようにしたい
・現在位置を表示して、周辺のスポットを見つけたい
・現在位置からルートを表示したい。
・目次ページにはリンクをつけてほしい。
・戻りボタンが必要。
・iPhone版が欲しい
等々全くおっしゃるとおりで、なんとか、改善すべくバージョンアップを行うことにしました。コード改修の関係で、以前のバージョンとの互換性を考慮しなくてもよいというkとで、まずは、多版展開分の新規アプリで機能拡張を行うことに決めました。
一気に２版同時にすすめることにしたときは、結構軽い気持ちで、大変そうに思わなかったのですが、やってみると、版ごとに入れ込む機能もいくつか必要で、意外と時間がかかってしまいました。
実は、リクルートWebサービスの開発運用も担当しているのですが、そちらでは、Perlを書きつつ、時間を見つけてObjective-cのコーディングもやっているという結構ハードな状況でした。
とはいえ、なんとか、いいものにすべく、今回は
・表紙からのスクロール方向を統一する
・記事から、地図を呼出せるようにする
・GPSで現在位置を表示し、近隣のスポットを表示
・GoogleMapとの連動し現在位置からルートを表示させる
徒歩ボタンを押して、Mapを開くと、
経路が表示された
・お気に入り＆コメント機能
スポットにコメントでき、★もつけられる。
ツールバー右の目次ボタンで目次を開き、お気に入りを開くと、お気に入りが一覧できる。
・じゃらんネットとの連動（東京のみ）
・アプリを終了したあと、再度起動すると前回みていた、ページやスポットが開く
・ナビゲーションバーを廃止し、ツールバーに集約。
・ピンの色を、分野別に４色に
を実現しました。
残念ながら、積み残しもまだあるのですが、今後の拡張計画には入っています。
がんばります！
今回のアプリ開発は、多くのライターさん、デザイナーさん、編集の皆さん、DTPオペレーターさんによって、作っていただいた、本があったこともあり、iPad版は、リクルート社内の数人のメンバーで作ることができました。
コーディングに関しては、ほぼ、スクラッチで作り上げてきたのですが、多くのネット上の記事と、参考書と、すばらしいiOS SDKのおかげで、みんな元気に、リリース日を迎えることができました。
電子書籍、iPadというすべての開発者・制作者にとって初めての分野で、僕らのアプリが一つの提案になったのではないかと思っています。もちろん、改善点はまだまだ有るのですが、改善が必要なくらい、使っていただくことができ、ご意見もいただけるというのは本当にすばらしいことだと思います。
自分の作った製品がほぼリアルタイムに評価されていく時代になったということを、身をもって感じることができました。購入したいただいた皆様には本当に感謝です。そして、まだ、使ったことがない皆様も、ぜひ、この機会に体験してみてくださいね。
今後の予定
一段落つきたところですが、まだまだ終わりません。
これからの拡張計画です。
順番や時期はまだ未定なのですが、リリース目指してがんばります！
・じゃらん沖縄のバージョンアップ
・iPhone版のリリース
・他版の追加
・UIの改善（目次へのリンク追加、戻るボタンの追加）
・動画コンテンツの追加
・Twitter連動
等々、まだいっぱいいるのですが（秘密も）どうぞ、おたのみに！
また、10/2(土) 13:00～ より、「Mashup Caravan - Beach Talks in Okinawa」でお話させていただきます。なんといっても沖縄ですので、「じゃらん沖縄」をからめた、Mashアップコンテスト作品のアイデアなどお話しできればと思っています。
どうぞよろしくお願いいたします！
では、これからも、じゃらんムックシリーズにご期待ください。
