中学生の時に溜めたお年玉でPowerBook 1400を買った。父のMacを借りて使っているのが段々息苦しくなってきて、アレなファイルも保管したいし、自分のメールボックスも持ちたいしという感じで、自分専用の部屋を持つようなつもりで買った。そのMacはG3カードを刺して高校生になるまで使った。
父が買っていたMacPowerという雑誌のお陰で、僕の頭はMacのことでいっぱいだった。隅々まで読んで、フリーウェアを片っ端から試してということを朝から晩までやっていた。不安定だったMacOSを再インストールするのは日常茶飯事だった。
世間ではWindowsが主流になっていて、僕もどうやら社会に出たらそれを使って仕事をしなくてはいけないらしい…。そうは言ってもMacPower誌に踊るMacの神話が完全にインストールされていたので、たとえシェアがなくても、多少不安定でも、使っているだけで何かにコミットしている気分になっていた。
僕がPowerBookを買って程なくして、スティーブ・ジョブズがAppleに復帰した。いつか買ってやろうと思っていたNewtonが殺されて、僕はジョブズを憎んだ。PowerPC G3を搭載した低価格なiMacが出て、その人気がじわじわと上がっていると聞いた時、なんだか居心地が悪かった。ニッチな製品を楽しんでいる同好会的な雰囲気が崩れていくような気分になったのだ。
iPodは完全に看過していたし、Mac OS Xの最初のバージョンも微妙な出来だった。今から思うと色々仕方ないことは判るのだが、一ユーザーとしては裏切られた気分だった。ジョブズがAppleとその製品に大手術をしているのはなんとなく理解していたが、彼が正しいことをしているのかその時点ではわからなかった。*1
もちろんその後、Appleはデジタルライフスタイルカンパニー*2として不死鳥のような復活を果たし、Macの販売台数も大きく伸びた。プログラマーとして就職を考えた時、Macを使える職場は驚くほど多くなっていた。
今僕はMacを使ってiPhoneアプリを作る仕事をしている。中学生の時には全く考えられなかった話だ。自分がプログラマーになるとも思っていなかったし、Appleが残って、ましてやAppleの製品と関わりながら自分が食べていくことができるなんて本当に想像できなかった。たぶん僕は喜ぶべきなのだろう。自分が好きなものを使っていたら、いつの間にか面白いことを仕事にできるようになっていたのだから。
今年仕事でWWDCに行くことができて、始めてジョブズを見た。多分今年が最後になるだろうと誰もが言っていて、実際にそうなってしまった。真ん中くらいの席から見たジョブズは、痩せていてあまり顔色がいいとは言えなかったが、iCloudの機能を淡々と語る姿には、かつて画面の向こうから見ていた彼と同じ説得力があった。そしてその場にいるだけで何かにコミットしている気分になった。でも昔とは少し違っている――僕はもうプロのプログラマーで実際にコミットしているし、ここに来たのは会社のお金で僕にとってこれは仕事なのだ。
僕が影響を受けた神話は、どちらかと言うと手を動かしてプログラムを書いていた人たち、スティーブ・ウォズニアックやビル・アトキンソンといった面々で、今でもそれは変わらない。それでも一人のニッチなコンピューターの愛好家が大人になって、そのまま好きなコンピューターを使って仕事ができるようになったのは端的に言って非常にありがたい。そしてそれはジョブズの大手術とその先の壮大なビジョンがなければ達成されなかった。そのことに大きく感謝する。
今はただ悲しい。一度は目の前にいた人が死んだというだけでも悲しいのに、今目の前にある製品を作った人だと思うとなおさら悲しい。
@fladdictさんが監訳されたことで話題の、オライリー本『iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン』、早速会社で購入してもらって読みました。読み終わってまず思ったのは、これはiPhone開発に携わるすべての人に必読の本になるだろうということです。エンジニア、デザイナー、企画者と分担が分かれている場合は、全員が読むといいのではないでしょうか。この本はiPhone開発に必要な共通言語を提供してくれます。それも、コードを使わずに。
本書から得られる内容としては大きくふたつあると思います。ひとつはiPhone開発のプロセスを解説書としての側面。もうひとつはiPhoneのUIカタログとしての側面です。
この本に書かれている開発プロセスは、ベストプラクティスと言えるものになっていると思います。ユーザーニーズを探ること、シンプルさを追求すること、ペーパープロトタイピングを行うことなどです。
勉強会に行くと複数の開発者と話をする機会がありますが、だいたいみんな同じような作り方をしている気がします。自分も開発をはじめた時は周りの人やネットの事例などを漁ってプロセスを組み立てていったのですが、やはり同じようなことをしていると感じます。今まで業界では割と一般的に行われていたことが、きちんと言語化されていると思います。
これまでiPhoneのUIで使われる標準的なパーツについては、XCodeをいじったことのある現場のエンジニアが一番情報を持っている状態だったと思います。なにが簡単でなにが簡単でないのかを見極めるためには、やはりコードを書いてSDKを叩きまくるのが近道です。しかし、企画者やデザイナーが設計を行う場合もあり得ます。自分もアプリの設計に関わる全員にSDKのインストールを強要するのはあまり現実的ではないと思っていました。
本書ではよく使われるナビゲーションの基本を３つに分類し、それぞれを詳細に解説することで、設計に見通しを与えてくれます。また、UIパーツのそれぞれの使いどころや、アンチパターンについても解説されています。
もちろんSDKの全貌を一冊の本で書ききるということは不可能なのですが、それでもかなりの内容が盛り込まれています。その内容についても、こういう場合にはこれもできる、こういう方法もSDKではできるから検討してみようという具合にアプリの目的ベースで解説されています。
本書はコードが一切登場しないiPhone開発本ですが、そのことが本書の目的であるアプリ設計へのフォーカスにうまく作用していると思います。iPhoneアプリの解説書というと、まずXCodeを入れてObjective-Cを書いてというのが定石ですが、そこを省くことで、まずなぜそのアプリを作るのか、そのアプリはどういう問題を解決するのかという話に集中できます。AppStoreにアプリが氾濫している今、それは本当にユーザーに使ってもらえるものなのか、「タップする価値のあるアプリか」という命題から出発する本書の切り口は、今後さらに重要なものになっていくと思います。
ちょっと不思議なことですが、コードが一切出てこないにも関わらず、読み終わった後でコードを書きたくなりました。これが最善だと思って作ったアプリでもも、もしかしたらもっと良くできるかもしれない、そう思わせてくれる本だと思います。
個人的にはFacebookアプリの元開発者であるJoe Hewittさんのインタビューが載っていたのが非常に嬉しかったです。（ファンなので…）
iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
しかしこういう本が出るということがiPhoneアプリ開発の環境が成熟してきた証しだと思うと、（新参者ですが）なんだか感慨深いものがありますね…。
先日書いたエントリーが好評で、そのご縁で、お台場で行われるスマートフォン2011春というイベントで講演をさせていただくことになりました。4/28日(木)の13:00~13:50の枠で、『iPhoneアプリとAndroidアプリの開発を比較する〜はてなブックマーク開発の現場から〜』というタイトルです。
基本的には、先日のエントリーの内容をもう少し整理して、具体例を増やしながら解説したものになると思います。UI設計から実装まで、双方の共通点や相違点について話します。自分がネイティブアプリを作る際に気を付けていることなども盛り込む予定です。iPhoneアプリ、Androidアプリのどちらかに興味がある方に、別のプラットフォームにチャレンジするのも面白いということを伝えられるような内容にしたいです。
講演のような形で喋るのは初めてなので緊張しますが、せっかくの機会なのでがんばってみたいと思います。お時間のある方は是非聞きに来てください！
この三ヶ月ではてなブックマークiPhoneアプリの新バージョンとAndroidアプリを開発してきました。
両方共担当はエンジニア
id:ninjinkunとデザイナー
id:kudakurage、総合ディレクション
id:nagayamaです。同じ開発者がiPhoneアプリとAndroidアプリ両方を作った事例として、なかなか面白いのではないかと思います。開発期間はちょうどそれぞれ一ヵ月半ずつでした。
自分にとってもブクマチームに移動してから初めての大きな仕事だったので、両方共思い入れがあるプロダクトです。開発話と一緒に、スマートフォンアプリを作る際の流れや、気を付けていることなどをまとめようと思います。（長いです）
iPhoneもAndoirdも開発の流れは基本的に一緒で、以下のような流れになります。
ざっくり並べただけではWebサービス開発と変わりません。ただし、スマートフォンアプリはUIの検討の比重がWebアプリよりも高くなってきます。そのあたりの事情を以下、iPhoneアプリ、Androidアプリそれぞれの開発を振り返りながら書いていきたいと思います。
iPhoneアプリは昨年から提供していたのですが、自分のブックマークやお気に入りの閲覧機能がない等、機能が多少足りていない状況がありました。iPhoneユーザの増加に合わせて、機能強化を図ろうというところから開発が始まりました。
当初、後発のiPadアプリのほうが機能が豊富という逆転現象が起こっていたので、まずはiPadアプリと機能的に同等なものにしようというところからスタートしました。ホットエントリー、カテゴリ、新着、自分のブックマーク、お気に入りの閲覧等はここで実装が決定。
それに加えて、ブックマークをするユーザー数も増やしたかったため、iPad版にはなかった、ネイティブUIでのブックマーク追加も入れることになりました。また、iPhoneからはてブを知ってもらって入ってくるユーザーも増えるだろうということで、新規ユーザー登録フローの改善も盛り込まれました。
自分がアプリを開発するときは、最初に紙に仕様書を書きます。以下がそれです。
自分が勝手に仕様書と呼んでいるだけで、実際は裏紙にボールペンでがりがり描かれたただの絵です。スマートフォン開発はUIの実装コストが高いので、まず絵を描いて、UIやナビゲーションをある程度検討してから実装にとりかかるようにしています。（Photoshopなどを使ってモックを作る技術がないだけとも言う…)このときは絵を描いている日が三日ぐらい続いた気がします。
絵を描いてはデザイナーとディレクターに見せ、ある程度形になってきたら非開発者の社員にも見せます。ボタン（の絵）を実際に押してみて遷移やアクションのイメージを確かめたりもします。きちんとしたユーザビリティテストをしているわけではないので、所謂ペーパープロトタイピングより簡単なものですが、これでも結構有用です。
左は没になったタブベースのナビゲーション。右にははタグキーボードが描かれているので、この時点でタグキーボードは思いついていたようです。
実際にリリースされたタグキーボードはこんな感じです。
コーディングについてはあまり特別なことはしていません。先日技術勉強会で発表した作り方そのままです。
iOS4に特化して作ったので、組み込みの正規表現クラスが使えたり（今までなかった！）、ヘッダの画像を入れ替えるAPIが使えたりして便利でした。後はASIHTTPRequestのファイルキャッシュ機能を使って画像をキャッシュしたりしています。autoreleaseを使うパターンにも慣れてきたので、メモリ周りでもほとんどはまりませんでした。
ある程度できてからは、とにかく毎日使う、ナビゲーションの不自然な点をなくす、重い部分はチューニングするというサイクルの繰り返しでした。
トップに表示されているカテゴリのアイコンはリリース直前にid:kudakurageさんが根性で作ってくれたものです。*1これがなかったら全部同じフォルダアイコンが表示されるという非常にお寒い仕様でリリースすることになっていたところでした。これは後述するAndroidアプリでも使いまわしできたので、非常によかったです。id:kudakurage++
このアプリは12/22日にリリースされました。
昨年末、各社からAndroid機が多数発売され、Androidユーザの増加はほぼ確定的だろうという中で、iPhone版がリリースされる前からAndroid版の開発も決まっていました。自分は一応夏ごろにAndroidを入手して使っていたものの、開発は自分もid:kudakurageも初めてだったので、とりあえず一冊本を読んで、あとはGoogleの配布しているGoogleIOアプリのコードを参考に設計を行いました。
読んだ本はこれです。
既にiPhone版がリリースされていたので、その機能を盛り込むことははじめからだいたい決まっていました。それに加えて、Androidならではの機能として、インテント、ブラウザ変更、コンテキストメニューが新たに追加されました。
インテントについては前々から相性の良さそうな仕組みだと思っていたので、最初から採用が決まっていました。一方、ブラウザ変更やコンテキストメニューなどは社内のAndroidユーザーの意見をいろいろ聞いて、取り入れたものです。
ヒアリングをしていて一番驚いたのは、端末のフラッシュメモリの内蔵容量が少ない機種が多いため、SDカードにアプリを移せないとアプリを消してしまうユーザーも結構いるということでした。SDカードにアプリを移すのはAndroid SDK 2.2以降なら設定に一行追加するだけなので、これはすぐに取り込みました。
また、iPhone版のユーザーの動向なども見て、新規ユーザーにももう少しブックマークのことを知ってほしいという意図から、ヘルプも新しく追加されました。
調査している中で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を読んで影響を受けてから、プロトタイピングやインタビューも取り入れるようになりました。
すぐに業務に活かせる手法や、ベストプラクティス的なものも書かれていて、取り入れやすかったのだと思います。まだまだ本に書いてあることの半分も実践できていませんが、リリースしたプロダクトについて、使いやすいという評価を多数いただいて、方向性は正しそうだと自信を持つことができました。この本の輪講も今週社内ではじまります。
はてなブックマークiPhone, Androidアプリは今後も継続的なバージョンアップを通じて利便性を向上させて行きます。iPhone, Androidをお持ちの方でまだご利用されていない方は、一度試してみてください。
おまけで、没になったAndroid版のスタートアップ画面案を載せておきます。所謂Dashboardと呼ばれているものです。DashboardはFacebookのように機能が独立していて、象徴的なアイコンが作れないと良いものにならないと考えているので、今回は不採用でした。しかし自分で描いておいて何ですが、この絵ではそもそも採用したくないですね…。
木下誠さんの新作（素晴らしい本です！）を読んだところ、同じように紙に手描きでプロトタイピングしたりするシーンが出てきて、やっぱりみんな同じなんだ…とちょっと自信を持つことができました。プロによるパターンが詰まっているので、一度iOS開発をしてみた後に読むのが良さそうです。
iPhone Stencil Kit - UI Stencils
ちなみに自分は
id:r_kurainから譲ってもらったステンシルを使って絵を描いています。絵を描くのが得意なわけではないので、このツールにかなり助けられています。
