はてなブログAndroidアプリ開発の舞台裏

こんにちは!はてなでスマートフォンアプリを開発している id:cockscomb です!

先日リリースした はてなブログのAndroidアプリは、Android 5.0 Lollipopに対応し、Googleの新しいデザイン言語 Material Design をいち早く取り入れるなど、はてなが提供しているAndroidアプリとして様々な面で新しいものとなりました。まずは、Androidスマートフォンをお使いの皆さまにご利用いただけたら幸いです。いまならキャンペーンも実施中です。

http://f.st-hatena.com/images/fotolife/h/hatenablog/20141029/20141029120401.png
はてなブログAndroidアプリ

Get it on Google Play

さて、この新しいアプリですが、その開発においてもモダンな手法を多く取り入れています。本記事ではその開発について、順を追ってご紹介します。

企画・プロトタイピング

はてなブログAndroidアプリの開発に着手したのは、ちょうどGoogle I/Oのキーノートが行われた、今年6月26日のことです。このときのGoogle I/Oで、今日ではAndroid 5.0 Lollipopとして知られている、コードネーム「L」と呼ばれる次世代Android OSや、様々なデバイスで統一的に使えるユーザーインターフェイスを目指して作られた新しいデザイン言語の「Material Design」が発表されました。

開発を始める際にはまず、どのようなアプリを目指すのか、どんな機能をつけてどんな機能をつけないのか、そういった大切なことを決めます。もちろん、なるべく多くのことができるアプリにしたい気持ちもありますが、しかしここではリリースのために必要な最低限の機能に絞り込んでいきます。またアプリの方向性として、奇をてらうことなく、ユーザーのライフスタイルにフィットする、元からそこにあったようなものを目指すことにしました。そしてなるべくMaterial Designを取り入れようと決めました。

それらを決めると、すぐにペーパープロトタイピングを始めました。Material Designについての資料と見比べながら、画面の構成や画面のつながりを紙に描いていきます。スマートフォンの画面と同じサイズの紙に、なるべくすべての画面を描いていくのですが、ここではアプリの構造を意識して、矛盾がないように気を配ります。

ある程度できたタイミングで、紙に描かれたプロトタイプを用いてユーザビリティテストをします。紙芝居のように作ったプロトタイプを実際のアプリに見立てて、なるべく本物のように被験者に操作してもらい、その様子を観察します。このとき例えば「記事を書いて公開してください」といった目標を設定して、操作に迷わないか、ちゃんとボタンに気付くのか、といったことを確認します。この結果を元にペーパープロトタイピングをやり直し、修正していきます。このサイクルを何度か繰り返すことで、プロトタイプの精度を上げていくことができます。

f:id:cockscomb:20140627171130j:plain
ペーパープロトタイピングを用いたユーザビリティテスト

チームのやり方を決める

プロトタイピングが終わって開発を始める前に、チーム内でいくつかの決め事をしました。中でもデザイナーにXMLを書いてもらうのは特筆するべきでしょう。

Androidアプリの開発では、画面のレイアウトを定義するXMLファイルを多用します。ユーザーインターフェイスを構成するViewの要素を並べ、必要な属性を設定します。このXMLをデザイナーに書いてもらうことで、実際に動作するアプリを使って、デザイナー自身が試行錯誤を繰り返せるようになります。もちろんこの作業はエンジニアがやってもよいですが、デザイナー自身の手でできるようにしておくことで、遠慮なく色々試すことができるようになり、試行回数を増やすことができます。これは良いプロダクトを作るための近道です。もちろんデザイナーがレイアウトXMLを書くためには、エンジニアが適切なタイミングでやり方を教えたり、事前にいろいろ準備しておいたりする必要があります。

f:id:cockscomb:20141031152619p:plain
レイアウトを定義するXML

また開発に参加したメンバーは、僕自身も含めてAndroidアプリ開発の経験が浅かったので、例えば毎日Android端末を使い続けてAndroidのお作法を身体で覚えたり、たくさんの書籍を読んで知識を身に付けたりといった、基礎的な勉強もしています。ほかにも最初はエンジニア同士でペアプログラミングの時間を多く取ったり、また毎日ちょっとした朝会を行って前日の進捗を確認したり今後の方針を簡単に話し合ったり、といったことを行いました。

スクラムフレームワーク

開発が軌道にのってきた頃、確かに開発が進んでいるはずなのにその実感が得られないような状態になりました。全体にどれくらいのタスクがあるのか分かりにくく、リリースまでの見通しが不明瞭に感じられました。全体のタスクや進捗をうまく確認できるようにする必要に迫られました。

そこでスクラム開発を導入することに決めました。こういった状況のとき色々なやり方があるとは思いますが、まずは既存のフレームワークに乗ってしまうのが簡単だと考えました。まずチーム全員で『SCRUM BOOT CAMP THE BOOK』を読み、そこから素朴なスクラム開発が始めました。

スクラムでは、開発をスプリントと呼ばれる一定の期間に区切って、スプリントの最初に期間中に完成させるタスクを決めて、スプリントの最後にきちんと完成しているか振り返る、というのを何度も繰り返します。スクラム開発を進めるうち、リリースまでの見通しが立つようになるばかりか、習熟によって開発速度が上がっていくのも実感できるようになりました。その後も自分たちのチームがやりやすいように少しずつ改善を重ねて、アプリの完成に至るまでスクラムが非常に役立ちました。

f:id:cockscomb:20141031152712p:plain
プロダクトバックログとして利用したTrello

ユーザビリティテスト

アプリの基本的な機能ができてきた頃、実際に動作するアプリを使ってユーザビリティテストを行うことにしました。スプリントの終わりに毎回ユーザビリティテストを行い、アプリの基本的な機能や、スプリント中に作られた機能がちゃんと使いやすい状態で完成しているのか、丁寧に確かめます。そしてユーザビリティテストを行うと必ずいくつかの課題が見つかるので、それを次のスプリントで解消するように計画します。このイテレーションを何度も繰り返して、アプリを完成まで近づけていきました。

f:id:cockscomb:20141104112801j:plain
実際のアプリでユーザビリティテストする。この様子は はてなニュースの「DeployGate」をはてなブログのAndroidアプリ開発で使ってみた!という記事でも読むことができる

ユーザビリティテストによって開発者側の思い込みや妥協は打ち砕かれ、あるいは狙い通りに機能することが確認でき、実際に大きく作り直される部分もありました。ユーザビリティテストを行うのには準備も労力も要りますが、結果として大きく改善されたという実感があります。何度も繰り返すうちに労力は減っていきますし、スクラム開発のイテレーションの中に組み込むことで効果的な改善が期待できます。

リリース

f:id:cockscomb:20141031153615p:plain
Google Playで配信中

ここまで開発の流れを追ってきましたが、10月17日になってようやくAndroid 5.0 Lollipopの正式なSDKがリリースされて大急ぎで対応し、またQAや社内テストを通してさらにアプリを磨き上げ、10月29日にとうとうリリースすることができました。はてなブログとAndroidアプリを是非ご利用ください。まだまだ改善するべき部分もあると思います。今後のアップデートにご期待ください。

Get it on Google Play

リリース後に開発を振り返ると、必要になったタイミングで必要な手法を取り入れるような、そういうやり方だったように思いますが、どれを取っても間違いなく役立っており、無駄なことはひとつもなかったと思います。

個人としては、これまで開発手法に類するものにあまり興味を持てませんでした。しかしすばらしいプロダクトを作ろうとしたとき、個人の技術力だけではなく、優れた企画やそれを完成させられる良いチーム、そしてなるべく正しいと思われる判断を下すことのできる環境が必要なのだと思います。すばらしいプロダクトを作るための努力を惜しむべきではないし、これからも改善を続けたいと思います。

本記事では、はてなブログのAndroidアプリ開発を通して得られた経験をなるべく率直に書いたつもりです。拙いものではありますが、少しでも皆さまのお役に立てたら幸いです。


株式会社はてなでは、すばらしいプロダクトを一緒に作り上げていくスタッフを募集しています。

採用情報 - 株式会社はてな