はてブiPhone・Androidアプリの開発プロセス

この三ヶ月ではてなブックマーク iPhoneアプリの新バージョンとAndroidアプリを開発してきました。

両方共担当はエンジニアid:ninjinkunとデザイナーid:kudakurage、総合ディレクションid:nagayamaです。同じ開発者がiPhoneアプリとAndroidアプリ両方を作った事例として、なかなか面白いのではないかと思います。開発期間はちょうどそれぞれ一ヵ月半ずつでした。

自分にとってもブクマチームに移動してから初めての大きな仕事だったので、両方共思い入れがあるプロダクトです。開発話と一緒に、スマートフォンアプリを作る際の流れや、気を付けていることなどをまとめようと思います。（長いです）

開発プロセス

iPhoneもAndoirdも開発の流れは基本的に一緒で、以下のような流れになります。

機能の検討
UIの検討
実装

ざっくり並べただけではWebサービス開発と変わりません。ただし、スマートフォンアプリはUIの検討の比重がWebアプリよりも高くなってきます。そのあたりの事情を以下、iPhoneアプリ、Androidアプリそれぞれの開発を振り返りながら書いていきたいと思います。

はてなブックマーク iPhoneアプリ

iPhoneアプリは昨年から提供していたのですが、自分のブックマークやお気に入りの閲覧機能がない等、機能が多少足りていない状況がありました。iPhoneユーザの増加に合わせて、機能強化を図ろうというところから開発が始まりました。

機能の検討

当初、後発のiPadアプリのほうが機能が豊富という逆転現象が起こっていたので、まずはiPadアプリと機能的に同等なものにしようというところからスタートしました。ホットエントリー、カテゴリ、新着、自分のブックマーク、お気に入りの閲覧等はここで実装が決定。

それに加えて、ブックマークをするユーザー数も増やしたかったため、iPad版にはなかった、ネイティブUIでのブックマーク追加も入れることになりました。また、iPhoneからはてブを知ってもらって入ってくるユーザーも増えるだろうということで、新規ユーザー登録フローの改善も盛り込まれました。

UIの検討

自分がアプリを開発するときは、最初に紙に仕様書を書きます。以下がそれです。

自分が勝手に仕様書と呼んでいるだけで、実際は裏紙にボールペンでがりがり描かれたただの絵です。スマートフォン開発はUIの実装コストが高いので、まず絵を描いて、UIやナビゲーションをある程度検討してから実装にとりかかるようにしています。（Photoshopなどを使ってモックを作る技術がないだけとも言う…)このときは絵を描いている日が三日ぐらい続いた気がします。

絵を描いてはデザイナーとディレクターに見せ、ある程度形になってきたら非開発者の社員にも見せます。ボタン（の絵）を実際に押してみて遷移やアクションのイメージを確かめたりもします。きちんとしたユーザビリティテストをしているわけではないので、所謂ペーパープロトタイピングより簡単なものですが、これでも結構有用です。

左は没になったタブベースのナビゲーション。右にははタグキーボードが描かれているので、この時点でタグキーボードは思いついていたようです。

実際にリリースされたタグキーボードはこんな感じです。

実装

コーディングについてはあまり特別なことはしていません。先日技術勉強会で発表した作り方そのままです。

iOS4に特化して作ったので、組み込みの正規表現クラスが使えたり（今までなかった！）、ヘッダの画像を入れ替えるAPIが使えたりして便利でした。後はASIHTTPRequestのファイルキャッシュ機能を使って画像をキャッシュしたりしています。autoreleaseを使うパターンにも慣れてきたので、メモリ周りでもほとんどはまりませんでした。

ある程度できてからは、とにかく毎日使う、ナビゲーションの不自然な点をなくす、重い部分はチューニングするというサイクルの繰り返しでした。

トップに表示されているカテゴリのアイコンはリリース直前にid:kudakurageさんが根性で作ってくれたものです。*1これがなかったら全部同じフォルダアイコンが表示されるという非常にお寒い仕様でリリースすることになっていたところでした。これは後述するAndroidアプリでも使いまわしできたので、非常によかったです。id:kudakurage++

このアプリは12/22日にリリースされました。

昨年末、各社からAndroid機が多数発売され、Androidユーザの増加はほぼ確定的だろうという中で、iPhone版がリリースされる前からAndroid版の開発も決まっていました。自分は一応夏ごろにAndroidを入手して使っていたものの、開発は自分もid:kudakurageも初めてだったので、とりあえず一冊本を読んで、あとはGoogleの配布しているGoogleIOアプリのコードを参考に設計を行いました。

読んだ本はこれです。

Google Androidプログラミング入門

作者: 江川崇,竹端進,山田暁通,麻野耕一,山岡敏夫,藤井大助,藤田泰介,佐野徹郎
出版社/メーカー: アスキー・メディアワークス
発売日: 2009/07/01
メディア: 大型本
購入: 19人クリック: 451回
この商品を含むブログ (59件) を見る

機能の検討

既にiPhone版がリリースされていたので、その機能を盛り込むことははじめからだいたい決まっていました。それに加えて、Androidならではの機能として、インテント、ブラウザ変更、コンテキストメニューが新たに追加されました。

インテントについては前々から相性の良さそうな仕組みだと思っていたので、最初から採用が決まっていました。一方、ブラウザ変更やコンテキストメニューなどは社内のAndroidユーザーの意見をいろいろ聞いて、取り入れたものです。

ヒアリングをしていて一番驚いたのは、端末のフラッシュメモリの内蔵容量が少ない機種が多いため、SDカードにアプリを移せないとアプリを消してしまうユーザーも結構いるということでした。SDカードにアプリを移すのはAndroid SDK 2.2以降なら設定に一行追加するだけなので、これはすぐに取り込みました。

また、iPhone版のユーザーの動向なども見て、新規ユーザーにももう少しブックマークのことを知ってほしいという意図から、ヘルプも新しく追加されました。

UIの検討

調査している中でGoogleのAndroid UIパターンが出てきたのですが、使い道のよくわからないパターンや、他でほとんど見ないパターンが多く、正直あまり参考になりませんでした。（ActionBarだけ採用しました)

例によって紙に手描きでレイアウトです。基本的にはiPhoneアプリと同じナビゲーションなのですが、パーツの配置などはAndroid用になっています。あまりiPhone版に縛られないように、絵は一度全部描き直しています。

タブの配置で迷っていたようです。最初に真ん中で実装して動かしてみて、その後結局左の案になりました。

この時も三日くらい絵を描いていました。僕自身がAndroidネイティブユーザーではないという自覚があったので、HTC Desireユーザーであるサポートチームのid:AirReaderに何度も紙を見せて、Androidっぽくなっているかを確認しながら進めました。協力していただいたid:AirReader++。

実装

Javaは初めてだったのですが、特別に必要になる知識がほとんどない、非常に素直な言語で、今までただの食わず嫌いだったことがわかりました。yoskiさんも書いてらっしゃいましたが匿名クラスでListenerを渡せばコールバックも書きやすいですね。iOSの知識が通用するところも多いです。

一方、UIのレイアウト実装に関してはかなりコストがかかりました。画面のサイズが端末ごとでまちまちなため、相対位置指定でレイアウトを行う必要があり、決め打ちで済むiPhoneよりも実装は手間でした。特にヘルプページなど、staticなページでいちいち画像の位置を指定するのは面倒でした。分量が多い場合はHTMLを流しこむ等した方が賢かったかもしれません。

Viewの要素があまり見た目が良くないものが多いため、背景や形状などを画像で上書きしたViewもたくさん作りました。ぱっと見ではわからないのですが、このアプリには100枚くらいの画像が使われています。押し込んだボタンの影なども画像で描いています。Android、全体的にUIのView要素は貧弱です。最初にGoogleIOアプリのコードを読んで、ActionBarがただの背景を塗った棒だったのはさすがに唖然としました…。

Layout XML, Style XML, Drawable XML等のXML群を書きまくるはめになったので、XMLも入れるとコードの量はiPhnoe版よりだいぶ増えています。最後は自分とデザイナー二人でXMLを書いたりしていました。

また、ログインをアプリ内でも持ちたいという要求に、ログイン管理アプリの改修とログイン用のクラスを作ってくれたid:cho45++。最初はログイン管理アプリがなくてもログインでき、あとからログイン管理アプリを入れると、その情報をインポートして、他のはてなアプリでも利用出来るようになるという、非常にかっこいい仕様になっています。

このアプリは2/4にリリースされました。

おわりに

ここまで見てきたように、自分がアプリを作る際は、最初にナビゲーションやUIをある程度詰めて検討することにしています。

振り返ってみると、昨年の夏に書籍About Face 3を読んで影響を受けてから、プロトタイピングやインタビューも取り入れるようになりました。

About Face 3 インタラクションデザインの極意

作者: Alan Cooper,Robert Reimann,David Cronin,長尾高弘
出版社/メーカー: アスキー・メディアワークス
発売日: 2008/07/22
メディア: 大型本
購入: 9人クリック: 188回
この商品を含むブログ (26件) を見る

すぐに業務に活かせる手法や、ベストプラクティス的なものも書かれていて、取り入れやすかったのだと思います。まだまだ本に書いてあることの半分も実践できていませんが、リリースしたプロダクトについて、使いやすいという評価を多数いただいて、方向性は正しそうだと自信を持つことができました。この本の輪講も今週社内ではじまります。

はてなブックマーク iPhone, Androidアプリは今後も継続的なバージョンアップを通じて利便性を向上させて行きます。iPhone, Androidをお持ちの方でまだご利用されていない方は、一度試してみてください。
iPhoneアプリ
 Androidアプリ

おまけで、没になったAndroid版のスタートアップ画面案を載せておきます。所謂Dashboardと呼ばれているものです。DashboardはFacebookのように機能が独立していて、象徴的なアイコンが作れないと良いものにならないと考えているので、今回は不採用でした。しかし自分で描いておいて何ですが、この絵ではそもそも採用したくないですね…。