Running by Gyroscope

この記事は、いまはもう提供していない、以前のランニングアプリについてのものです。

Gyroscope Runningができるまで

コードネームQuicksilver：私たちの最初のReact Native製iPhoneアプリ

先日、Running by Gyroscopeという実験的な新しいiPhoneアプリを出しました。最近のランを共有するための、美しい画像をつくれるアプリです。これは、そのアプリをどう設計し、どんな道具でつくり、その途中で何を学んだかの話です。

このアプリは、いちばん人気のある2つの連携、RunkeeperとStravaが支えています。どちらも活動の記録がとても上手です。ランを記録すると、Gyroscopeが生のデータを自動で同期します。あとは楽しみながら、どんな物語を伝えたいかを選ぶだけです。

景色のいいルートの衛星地図でしょうか。それとも、息をのむような夕焼けの写真でしょうか。あるいは、それがドーナツ7個分だったという事実でしょうか。心拍数がとても高かったから、そこを見せたいのかもしれません。選ぶのはあなたです。

第1章

2015年3月

Gyroscopeのウェブサイトを出したばかりのころでした。仕組みはうまく動いていました。走ればすぐに同期されて、aprilzero.comに自分の数字が、Spotifyで聴いていた音楽の情報まで含めて出てくるのです。

美しいダッシュボードはできていましたが、共有する方法は、まるごと誰かに送りつけることだけでした。

次の大きな課題は、モバイルと共有でした。

3月のある午後、私はTwin Peaksまで走りに行きました。よく晴れた気持ちのいい日で、遠くに2つの橋が見えていました。

街を見下ろしながら、この瞬間を共有する方法がほしいと思いました。標高も、心拍数も、そこまでのルートも、聴いていた音楽も、見ていた景色も（写真で）、すべて記録して数字にしていたのに、それを自分の体験としてもう一度組み立て直す方法がなかったのです。

山を登るルートを重ねた、拡張現実のような画面が頭に浮かびました。撮った写真の上に自分の体の数字と場所を重ねた、共有できるカードというアイデアがひらめきました。その情報はもうGyroscopeの中にあって、あとはきちんとデザインするだけでした。

これはInstagramに出したら気持ちいいだろうと思い、試すのが楽しみで家までずっと走って帰りました。

第2章

できるふりをして、できるようになる

家に着くとすぐPhotoshopを開いて、撮った写真をいくつか放り込みました。ランの地図のデータを足して、数字と組み合わせて、素朴なインフォグラフィックをつくりました。いつかはうまく自動でやってくれる道具ができるかもしれませんが、そのときは一から手でつくるほうが速かったのです。

街の名前や距離といった基本のデータは隅に置きました。文字の色（ティール）は写真から拾い、写真を撮った場所に印を足しました。数時間後、投稿した写真にはたくさんのいいねがついていました。どうやってつくったのかと聞かれました。

この実験を続けようと決めました。走るたびに手で画像をつくり、新しいデザインを試すのです。

それから数週間、走るたびに新しい画像をつくって共有し続けました。地図のスタイルをいろいろ試し、音楽や天気や心拍数といった細部を加えました。こうした小さな飾りがランに気づきと奥行きを足してくれて、みんなも気に入ってくれたようでした。

走ったあとにカードをつくって共有するという創作の時間が、本当に楽しみになってきました。エンドルフィンと相まって、かなりくせになりました。撮った写真を見返す、地図のルートをいろいろな角度から眺める、いい差し色を選ぶ。創作と物語づくりの層がいくつも重なっていたのです。

私の好きなものがいくつも合わさっていました。写真、ランニング、そして注目されること。

写真に数字とロゴを少し足すだけで、ただの写真だったものがグラフィックデザインや、いっそアートのように感じられる。そこには何かがありました。要素の並びと形が響き合って、部分の合計よりずっと大きな何かが生まれるのです。

旅先でも、これをつくるのは楽しいものでした。カードは、訪れたいろいろな場所を残しておく、絵はがきのようなものでした。

音楽や地図といったデータの表示を切り替えるだけで、同じ内容から違う物語が生まれます。たとえば、きつめのランなら心拍数を足すかもしれません。とても暑い日や寒い日なら、天気が面白い数字になります。きれいな夕焼けや景色があれば、たいてい良い背景になりました。地形が面白ければ、衛星写真がそれを引き立ててくれました。

この実験を数か月続けたあと、これはかなりすごい製品になると気づきました。自分がとにかくほしかったですし、他にも使ってみたいと言ってくれる人がたくさんいました。

いくつか案を描き始め、実験の中からいちばん良いレイアウトをまとめていきました。

第3章

アプリをデザインする

新しいデザインを始めるとき、私はまず目的を並べます。正しい目標を選ぶことは、見た目を良くすることよりも大事で、しかも難しいことがよくあります。Quicksilverには、大事だと感じた指針がいくつかありました。それが、私たちがつくるすべてのピクセルとコードを決めることになります。

できるだけ多くのいいねをもらう
最新のランがすぐ見られる
カスタマイズを楽しくする

いちばん響くようにデザインする

できるだけ多くのいいねをもらうには、他の人の心に届くように、ちょうどいい見た目の華やかさと、焦点と、文脈が必要です。私たちが向き合う相手は、同じ競技をやっている人だけでなく一般の人たちだと気づいたことが、形を決めるうえで役立ちましたし、他のみんながやっていることとの大きな違いになりました。

多くのアプリは、成績を上げるための細かい数字を見せます。でも走らない友だちにとって、その情報はあまり面白くありません。それよりドーナツ5個分だったと知って、いいねを押すほうがずっと楽しいはずです。あるいは、必死で登った山の頂上からのきれいな写真のほうが。

レイアウトのひとつひとつを、それぞれの名前とアイコンを持つ、ひとつのブランドのようにつくろうとしました。これはアプリの中心となる機能なので、直感的で、使っていて楽しいものでなければなりませんでした。

いくつか案を試したすえに、レイアウトは画面の下に長い一覧で並べる形になりました。いろいろなレイアウトをめくって選ぶのは、本当に気持ちのいい体験でした。

ランニングのためのInstagramのフィルターのようでした

起動画面

写真とユーザーのつくるものがアプリの大きな部分だったので、開いた瞬間にそれが伝わってほしいと思いました。

背景に使える良い写真を探し始めました。友人のAdamは、私の知るいちばん腕のいい写真家のひとりですが、快くMt. Tamでの1枚を使わせてくれました。

アプリに置いてみた瞬間、ひと目で気に入りました。静けさと自然そのもので、アプリ全体の調子を決めるのにぴったりでした。

独立したアプリ

いちばん大きなデザインの判断のひとつは、これをランニング専用の別のアプリにすることでした。ホーム画面に「Running」という言葉が見えて、自分のものにすぐ触れられるようにしたかったのです。

これから対応を増やしていったとき、たとえばサイクリングや水泳なら、ほしいものだけを入れられます。画面がごちゃごちゃして、何階層もの移動に埋もれるのを避けたかったのです。

活動のフィード

他の多くのランニングアプリは記録の開始を目立たせる必要がありますが、私たちにはそれがないので、いつも中身を主役にできました。最近のラン以外は、すべてサイドバーの中に隠しました。

ランひとつひとつの見せ方も、いろいろな形とたとえを試しました。重ねたカードにも、たくさんのタイルにもできます。情報の詰まり具合をいろいろ試したところ、大きなものは場所を取りすぎました。数分使ってみて、寄りすぎていて、ほしかった全体像が見えていないと気づきました。ウェブサイトの表示がよくできていたので、結局そこと同じ、ペースで色分けしたバーを使い回すことにしました。

いちばん速いランといちばん長いランをヘッダーに置いてみました。下までたどらなくても、いつでもすぐ見られるようにです。それはやさしい挑戦状になります。アプリを開くたびに、自分の記録を破る機会があるのです。マラソンを走った人や、本当にすごいことをやった人なら、いつでもそれに触れられます。

サイトにあった、止まらずに増え続ける年齢のカウンターはとても人気があったので、ここにも似たものを置いて、最後に走ってからの時間を数えるようにしました。その数字が大きくなるほど、やる気が出てくれたらと思っています。

第4章

ドーナツのカウンター

その夏、私たちはサンフランシスコのTrue Venturesのオフィスで働いていました。ある日、誰かがドーナツを何箱かオフィスに持ってきました。昼食のあと、誰か、たしかPhil Blackだったと思いますが、それを8等分に切って、小さなかけらしか食べないなら数に入らない、と言いました。科学的にはそんなことはないとわかっていながら、私はいろいろな味を少しずつつまみ始めました。

ランニングのアプリをつくりながら、グレーズドのバターミルクドーナツを4分の1食べている自分。その夜、このおやつを帳消しにするにはどれだけ走ればいいのだろうと気になりました。少し調べてみると、ふつうのドーナツはおよそ200カロリーで、ランで消費するカロリーはおおよそ（体重 × 0.75 × 距離）だとわかりました。

地図のデータがないラン、たとえばランニングマシンの上や、Fitbitで記録したものには、ずいぶん手を焼いていました。アプリはすべての表示を地図に頼っていたので、もっと融通のきく別の手が必要だったのです。

そこに座って、自分のいろいろなランについて計算しながら、2つのことに気づきました。自分のランがドーナツ何個分なのか、まったく見当もつかなかったこと。そして、それを知るのがなかなか楽しかったことです。

こうして、ドーナツのカウンターが生まれました。

少し計算して、だいたいのドーナツの数を出します。ドーナツ1個分の短いランのこともあれば、とんでもなく長いこともあります。その日の残りは、1個から6個まで、いろいろな数のきれいなドーナツのストック写真を探して過ごしました。

第5章

ベータテスト

アプリの素朴な版が動くようになると、サイトでいちばん走っている人たち、100本以上のランを記録している人たちに招待を送りました。アカウントに何千本ものランをためている人が何人もいて、驚きましたし、圧倒されました。

私も走るのは好きでしたが、彼らの水準には遠く及びません。これを良い製品にするために必要なのは、彼らの感想と提案でした。

最初は、ただ手でメールを送っていました。不具合や提案の返事が来て、私はみんなの言うことを何とか把握しようとしていました。

そのうち誰かが、Facebookのグループをつくってはどうかと言いました。他のベータテストでやってみて、とても役に立ったそうです。新しく非公開のグループをつくって、上位のテスターの何人かにリンクを送りました。それはやがて100人を超え、その多くが毎日走りながらアプリを使ってくれました。

不具合の報告や提案がたくさん集まっただけでなく、ほしいものを自分でデザインしてくる人まで出てきました。

新しい機能のアイデアを出し合い、グループのみんなに届け、実際の中身が入った状態ですぐに見られました。

第6章

道具とコツ

Gyroscopeには、このアプリを実現するために本当に力を尽くしてくれた素晴らしいチームがいます（Mahdi、Eric、Robbie、ありがとう）。それに加えて、外からの助けもたくさんありました。ここでは、私たちにとってかけがえがなく、開発の時間を大きく節約してくれた素晴らしい資料や製品を紹介します。

React Native

ウェブの出身なので、JavaScriptとCSSやFlexboxのようなレイアウトの仕組みを使うのは、とても直感的に感じられました。iPhoneアプリのデザインをしたことはありましたが、実際にそのコードを書いたことはありませんでした。React Nativeがなかったら、誰か他の人が開発してくれるのを待つしかなかったでしょう。こういう副業のような企画は、たぶん始まりもしなかったはずです。

Brent Vatneは最初期のベータテスターのひとりで、React Nativeの貢献者でもあり、行き詰まったときや、まだドキュメントに載っていないことを聞きたいとき、本当にたくさん助けてくれました。Brent、ありがとう。

私たちが始めてから、Reactはずいぶん良くなりました。0.3あたりから、公開したときの0.12まで、新しい版が出るたびに性能が上がり、抱えていた問題が直っていきました。

まだ手を入れる余地はありますし（アニメーションの性能はもっと良くなってほしい）、それでも改善はとても速いです。少なくとも私たちのごく単純なアプリでは仕事をこなしてくれましたし、他の方法よりずっと速く進めました。

React Nativeのネットワーク越しのライブリロードのおかげで、新しいアイデアを何度も試したり、細かい調整をしたりが数分でできました。いまとなっては、コンパイルし直して変化を待つなんて考えられません。

Mapbox

Mapboxは素晴らしい地図の道具をつくっていて、私たちのサイトのあちこちで使っています。エディタでスタイルや色を自由に変えられます。これを使っていろいろなスタイルをつくりました。この暗く、そぎ落としたタイルもそのひとつです。

最初は彼らのiOS GLの実装を試しましたが、そもそも地図を動かしたり拡大したりできる必要はないと気づきました。単純に保つために、すでにあるウェブの実装をwebviewで使い回すことにしました。何か月もかけて試して良くしてきたコードを、そのまま活かせます。

Imgix

このアプリならではの機能のひとつは、写真に合わせてカードのスタイルを変えることです。Imgixが色の組み合わせを分析してくれるので、文字などの要素を、写真に合う色や引き立て合う色にできます。

Imgixは、画像を強調したりぼかしたりといった効果にも使っています。写真をクラウドで処理するということは、最初に少し待ち時間ができるということでもあります。スマホの中だけで完結させるのではなく、ユーザーが写真をアップロードすることになりますし、アップロードして処理済みの写真を受け取り直すのに1分ほどかかることもあります。それでも、節約できる時間と手に入る機能を思えば、割に合う取引でした。

Fabric by Twitter

クラッシュを追いかけるためにFabric/Crashlyticsを使い始めました。アプリの初期には、よくクラッシュしていました。時間をかけてすべて直しましたが、それでも私は利用状況の数字を見るためにこのダッシュボードを開いていました。

分析の仕組みを用意するつもりでいたのですが、必要なものはほとんどこのダッシュボードにそろっていました。いちばん好きだったのは、いま使っている人の数を見ることでしたが、月間の利用者数（MAU）やDAU/MAUの比率、継続率といった数字も、とても示唆に富んでいました。

ベータの間にアプリへ手を入れると、1回あたりの利用時間や継続率が実際に変わっていくのが見えました。Parseでプッシュ通知を入れたことは、もう一度使ってもらうこと、ちょうどいいときに戻ってきてもらうことに、大きな効き目がありました。

Parse

初期の版では、最新のランが読み込まれたかどうかを、自分でアプリを開いて確かめるしかありませんでした。Parseで新しいランのプッシュ通知を送るようにしてから、継続率は大きく上がりました。

第7章

ドーナツ77個

ある日、Instagramで私たちへの言及を眺めていました。夕焼けの写真がいくつかあって、そのあとに、ドーナツ77個分のランをしたらしい人が目に入りました。

きっとカロリーの計算に不具合があるか、誰かが嘘のデータを入れたのだろうと思いました。自転車の記録が、間違ってランとして入っていたのかもしれない、と。

Nateが書いていた「Fat Dog」を開いて、調べてみました。それはカナダで行われる120マイルのウルトラマラソンで、世界でもっとも過酷なもののひとつだと言われていました。すごい。

彼の投稿をベータテスターのグループで共有しました。Nateの見事なランを見て、こういう特別なランをみんなに見えるところで紹介したいと思うようになりました。

そこでアプリのサイドバーに2つの機能を足しました。注目のランのフィードと、最近走った友だちの一覧です。

Nateの記録はいまも破られていません。77個は、Gyroscopeで記録されたドーナツの最高数のままです。とはいえこの企画を始めてから、人を甘く見てはいけないと学びました。次の版では、念のため3桁にも対応させます。

第11章

次は何でしょう

このアプリをApp Storeで公開し、たくさんの人が自分の生活を記録して分かち合うために使ってくれています。

Tatianaは、歩数をすべて記録して共有することで、40ポンド近く減らしました。

Dan Grantは、心臓発作のあと、回復して健康でいるためにイングランド中を自転車で走っています。

Runningで学んだことを使って、新しいGyroscopeのアプリをつくりました。あなたの人生の物語をまるごと見せるアプリです。これもReact Nativeでできています。どうやってつくったのかを読むか、App Storeでアプリを手に入れてください。