April Zeroができるまで：パート2

April Zeroができるまで

パート2

私のデザインの進め方は、毎回違います。

たとえばtheory11のときは、ロサンゼルスの街で見知らぬ人に手品を見せながら、頭を切り替えました。Quizletのスタイルガイドは、ハワイの上空でスカイダイビングをして、自由落下しながら青い海と褐色の砂と白い波を見ているときに思いつきました。前のサイトの配色は、赤いDucatiから借りました。

そしてこのサイトができるまでは、もっと遠回りでした。世界中の冒険と、新しい機械と、自分の体を使った実験が絡んでいます。もちろん、すべては研究開発のためです。

数か月かけていろいろなアプリと機器を試したあと、自動で計測できて、手間がいちばん少ない組み合わせを決めました。

• Moves iPhoneアプリ：位置情報のために
• Cardiio iPhoneアプリ：心拍数のために
• Instagram：写真のために
• Runkeeper iPhoneアプリ ‐ ランの記録のために
• Withingsの無線体重計：毎日の体重のために
• Withingsの血圧計：心拍数と血圧のために
• Bodymetrixの超音波：体脂肪率のために
• 毎月の血液検査：中性脂肪と栄養の値のために

2014年5月：タイ

私はDustin Curtisとアジアを回りながら、サイトのモバイル版のアイデアを描いていました。モバイルという状況を活かせる何か、外にいるときに毎日役立つと思える何かを考えようとしていました。

一度見て終わり、そのまま忘れられるようなものはつくりたくありませんでした。絶えず変わり、リアルタイムで更新され続けて、そのときいちばん大事なこと、新しい場所や、心拍数が上がっているという知らせ、あるいは健康の状態そのものを見せてくれるものにしたかったのです。

いまの制約はいくらか無視して、こうしたデータが常に手に入るようになる、すぐそこまで来ている未来に向けてデザインしたいと思いました。いまのところ、この数字は絶えず更新されるわけではありません。体重は1日に1回ほど、血液の値は月に1回だけ、心拍数は自分ではかったときだけ、1日に数回です。

数年のうちに、いやもっと早く、このデータをずっと自動で、途切れなく取れる新しい機器が現れると思っています。Appleか他の大手が来年のうちに答えを出さなければ、Kickstarterの誰かが出すでしょう。

心が躍ったモバイルの体験のひとつは、自分の体の数値をすべて重ねた拡張現実の画面でした。カメラの映像をぼかせば、スマホが透けているように見せられますし、情報はその上のいくつかの層に置けます。ブラウザでは実現できないとわかりましたが、いつかアプリとしてまた考えてみるかもしれません。

スマホからすべての情報をひと目で見られるということに興奮して、何もかもをひとつの直感的なダッシュボードに収めようと試み続けました。

ダイビングの学校

行き着いたのは、タイの東の海岸にある小さな島、タオ島でした。スキューバダイビングで有名だったので、免許を取ることにしました。

昼はダイビングの学校に行き、夜は新しいモバイルのモックアップをつくりました。MacBookのPhotoshopをiPhoneのSkala Previewにつないで、それぞれのデザインを実際の文脈で見られるようにしました。スマホを手に取り、それぞれのページを開いたまま歩き回って、感触を確かめるのです。

おかげで、大きさや読みやすさといったデザインの細部をたくさん決められました。「文字はどこまで小さくできるか」「屋外で読むにはどれくらいのコントラストが必要か」「1画面にどれだけの情報を入れられるか」

上のほうでゆっくり回る細い輪は、デスクトップ版をほのめかしつつ、少しだけ個性を与えていました。最初は主張が強すぎたので、ほとんど気づかないくらいになるまで、透明度と色を落とし続けました。

スマホにスクリーンショットを入れて歩き回り、周りの人に見せました。

「このページは何を伝えようとしていると思う？」「どこをタップする？」

最初のうち、ページに詰め込まれたものを理解するのは、みんな大変そうでした。Danはどの列から見ればいいのかわかりませんでした。Dustinは何もかも小さすぎると文句を言いました。ボートに乗り合わせた他の人たちは、たぶん、なぜこの男はノートパソコンを持ってきたのだろうと思っていたでしょう。

すべてをページに収めるという考えはうまくいかないと気づき、いちばん関係の深い数字だけに削り始めました。

バンコクにいたとき、安く全身のMRIを撮れないかといくつかの病院に行きましたが、数千ドル以上と、高すぎることがわかりました。それでもその間に、自分の体を医療の目で丸ごと見るという考えにすっかり惹かれてしまい、もっと臨床的で科学的な感じを出すために、それをページに入れることにしました。まずはごく平均的な人のストック画像を使い、あとで自分の本物と入れ替えるつもりでした。

人体の断面という感触は、地図のようなありふれたものと比べても、本当に気に入りました。ページをちらりと見るだけで何が起きているかがつかめて、バーや数字を近くで見ればデータもすぐに読み取れます。良いアニメーションがつけば、さらに良くなるはずです。これは生きている人間へのリアルタイムの回線なのだとはっきり伝えたかったのです。退屈な医療のグラフの寄せ集めではなく。多くのアプリが陥る、似たような円グラフやドーナツグラフを何十個も並べる罠は避けなければなりませんでした。

医療の測定値をただ並べるのではなく、物語を伝えようとしていました。

このころには、デザインが面白くなってきていました。心拍数は、リアルタイムのデータが流れ込むようになればとくに格好よくなるはずです。MRIのアニメーションが実現できるかはわかりませんでしたが、これはデスクトップの体験と並べても大丈夫だと初めて思えたモバイルのデザインでした。

コードにする準備ができました。南のマレーシアへ向かいながら、次の数日はアニメーションづくりに費やしました。

数日の試行のすえに、MRIが走査され光る様子をCSSで再現する方法を見つけました。600pxあたりにブレークポイントを足して、ブラウザでモバイルのレイアウトをつくり始めました。形になってきたところで、パソコンのIPアドレスからスマホに読み込んで、iPhoneの実機に合わせて直接試して詰めていきました。

これでモバイルにようやく答えが出たので、Explorerのデスクトップの体験を仕上げに戻るときが来ました。

前の版は美しかったのですが、情報が多すぎました。その日の活動を、もっとまとまった、わかりやすい形で見せる方法を考えなければなりませんでした。答えは、移動の階層を増やして、その日の詳しい情報が求められるまでは各タイムラインを簡素な形に抑えることだろうと踏んでいました。

お腹が空いていると考えがまとまらないので、まずは寿司でお腹を満たしてから、最後のデザインを決めることにしました。

2014年6月：日本

築地で朝ごはん

翌朝、東京に着いて、世界でいちばん新鮮な魚が集まる築地の市場に向かいました。

ひと月ものあいだ揺れる船や遅い列車で移動したあとでは、時間に正確で無駄のない日本の地下鉄はすばらしく感じられました。自分のサイトにも同じ感触がほしいと思いました。あちこちを押していけば新しい場所にたどり着き、何も壊れないと信じられる。速くて、きれいで、間の取り方はミリ秒まで完璧。

1時間後、私は刺激を受け、お腹も満ちて、サイトのデザインを仕上げる準備ができていました。

ホテルに小さな机を用意して、作業を始めました。まずモバイルを決めてから大きくしていくことにしました。小さな画面では絶対に成り立たない突飛なものをつくってしまわないためです。

この1か月、私はモバイルで時間がどちらに流れるべきかをずっと考えていました。最新の活動が上から入ってくるべきでしょうか。FacebookやTwitterのようなフィードは、たいていこの形です。それとも、カレンダーのように、1日目から時間の順に並ぶべきでしょうか。

困ったことに、正しい答えはひとつではありませんでした。これは自分の活動のリアルタイムのフィードであり、同時に過去にやったことのカレンダーでもあります。それぞれが正反対のデザインを求めるのに、選べるのはひとつだけでした。

実際のデータを両方の形でたくさん並べてみて、自分は時間の順を期待することのほうが多く、そうでないとページを読み違えることがよくあるとわかりました。

最終的に、月のページは1日目の午前0時から始めることにしました。新しい内容が下、古い内容が上です。

移動にはGoogle Mapsを使っていて、そのモバイルのデザインに感心していました。経路のタイムラインは、いつもきれいで頼りになります。

似た感触を出すには、余白に詰め込もうとしていたデータの多くを捨てる必要がありました。モバイルの体験では、使いやすさと単純さのほうが大事で、すべての情報がひとつの画面にそろっていることよりも優先されました。

日の出と日の入りや、その日の写真などをうまく見せる方法をあれこれ考えていました。良いデータではありましたが、複雑さが増しすぎました。新しい版はずっと単純で、訪れた場所の一覧だけです。

その日の活動で中身を更新して、それ以外はほとんど消しました。情報は多くありませんが、ずっとすっきりしてきました。ようやく、スマホで気軽に使えて、人にも見せられるものになったのです。

その日のうちに、WWDCでAppleがHealthKitを発表しました。期待していたほどではなく、画期的な機器が一緒に出たわけでもありませんでしたが、これで時計は正式に動き出しました。

その臨床的で医療的なデザインを見て、Explorerがどれだけ大事なのかにも気づきました。最初に思っていた以上にです。位置と移動のデータは、そうでなければばらばらでただの豆知識にすぎない数字の寄せ集めに、文脈と意味を与えてくれます。

これをつくって公開するために家へ帰るまで、日本にいられるのはあと数日でした。結局のところ、本物のつくり手は世に出すのです。

茶の湯

翌朝、公園を長めに走りました。頭をすっきりさせて、ひらめきが降りてくる余地をつくりたかったのです。HealthKitの記事を読んだあとで、頭の中は、運動をゲームにするとか、計算で心臓発作を防ぐとか、突飛な考えでいっぱいでした。

そのあと、日本の伝統的な茶の湯を見に行くことにしました。会場は美しい庭で、鯉の池と豊かな緑に囲まれていました。着物姿の女性が、近くで魚と戯れていました。

最初に出てきたのは、六角形の木の敷物にのった小さな菓子でした。それを見て、少し前に描いていた案を思い出しました。六角形は四角形のように入れ子にできないので、私はほとんどあきらめていたのです。

月のページの上に置く、象徴になるヘッダーをずっと探していて、見つかっていませんでした。前の版の円はきれいでしたが、記憶に残るものでも、心が躍るものでもありませんでした。お茶の体験のおかげで、六角形の案をもう一度考えてもいいころかもしれないと思えました。

見た目に面白い要素になりながら、豊かな情報も伝えられそうなことに、心が躍りました。中身の量がものを言う案なので、動く小さなアイコンを何百も並べた正確なモックアップをつくろうとするより、実際のデータでいきなりつくり始めるほうがいいと思いました。

これが最初にコードにした版です。とくにきれいではありませんが、生のデータが入り、これから手を入れていく要素の基本の配置ができました。

ひとつひとつを六角形にするのは、CSSの画像マスクだけで済みました。場所の集まり全体は、面白い遠近感を出すために3D空間で少しだけひねっています。端に薄く影をつけて、視線が中央に向くようにしました。

ここではFoursquareの場所の分類が大きな働きをしてくれました。分類の体系をつくり、それを表す優れたアイコンも用意してくれていたのです。

場所をひと目で見分けられるように色分けをしたところ、月ごとの型が見えてきました。自然や公園は緑、空港や駅は青緑、レストランやカフェはだいたいオレンジ、住まいやホテルは控えめな灰色です。

よく潜っていた月は緑が多くなります。ニューヨークにいたときは、イタリア料理の赤がたくさんあります。日本への旅は、寿司のピンクだらけでした。

ページの上部をデザインしてコードにできたので、次はその下のタイムラインをどう埋めるかを考える番でした。データはすべてそろっていて、あとはきちんと見せるだけです。

六本木で迷う

お茶の場所からの帰り、私は遅れていました。着物の女性と日本語を練習しようとして、時間を忘れていたのです。1時間もしないうちにパークハイアット東京をチェックアウトしなければならないのに、街の反対側にいました。Google Mapsによれば、地下鉄で43分かかります。

麻布十番の駅に向かう電車に乗り込みました。「大丈夫だ」と自分に言い聞かせます。「荷造りはたいてい5分もかからない」

電車に乗ると、Instagramの写真に気の利いた説明をつけようとして気を取られ、顔を上げたときには降りるはずの駅が過ぎていくところでした。しまった。次の駅で降りました。六本木でした。

戻るべきか進むべきか、路線図をにらみながら、あれほど気に入っていた地下鉄がいちばん必要なときに裏切ったことに腹を立てていました。自分が本当は何を見ているのかに気づくまで、しばらくかかりました。

そこには、たくさんの場所が、文字の多い細い線の上に並んでいました。文字はどれも少しだけ傾いています。大きく鮮やかな色の丸が、地域を見分けさせます。私が探していたのは、これでした。

タイムラインの上に情報を並べるこの見せ方が、Explorer 2.0のデザインを仕上げるために最後に必要だったひらめきでした。傾いた文字は重なりの問題を解き、大きく太い丸は小さくまとめてもすぐ意味がわかります。

ページの半分は、その日に関わる他の細かい情報を描くために取っておきたいと思いました。上に並ぶ場所が、それがいつどこで起きたのかという文脈をつくってくれます。残りの空間を地図で埋めるという案も試しました。

1日ごとに描きたいものはたくさんありました。睡眠、食事、移動、気分、血糖値など。さしあたっては、手に入れやすくて、日ごとの変化がいちばん大きいデータを使うことにしました。移動、GitHubのコミット、そして心拍数です。

場所の名前に色をつけると、色分けしたアイコンとの結びつきを保ったまま、文字の間隔をうまく空けられました。

背景に地図を敷く案も試しました。見た目としては、それが加える豊かな奥行きがとても気に入りました。ただ、関係のないデータをその上に置くと、途端にわかりにくく感じられました。

地図の代わりに、Instagramの写真をぼかして背景にしてみました。そうすると、それぞれの日のデータに、他にはない面白い背景がつきます。他に何もしなかった日がたくさんあるので、その隙間はGitHubのコミットと公開の履歴が埋めてくれます。

何日もかけてじりじりと進み、試しては直し、文字どおり世界中を歩いて答えを探したすえに、突然すべてがかみ合いました。最後の層を足した瞬間に、これだとわかりました。

デザインの段階は、ようやく終わりました。つくり始めるときです。

2014年7月：サンフランシスコ

ここまで私は、これを実際にどうつくるか、どの技術を使うかを決めるのを先延ばしにしていました。インフラやコードに気を取られず、デザインとフロントエンドにすべての時間を注ぎたかったのです。試作の段階でごく単純なJekyllのままでいたことは、速く動いて多くの案を試すために欠かせませんでした。すべてが静的だったので、面白い版を後の参考にとっておくのもかんたんでした。

隣人はNodeを推していました。Railsを使えばと言う人も何人もいました。以前はDjangoを使っていて、気に入っていました。言語はそこまで重要ではないとわかっていました。ひとつ選んで書き始めることが必要なだけです。

Ruby on Railsで1日遊んでみました。多くの人にすすめられたからです。あとから他の開発者に加わってもらうことを考えると、堅実な選択に思えました。1時間かけてHello Worldの例を動かして公開してみたところ、これでは進みが遅すぎると気づきました。新しいフレームワークの細かい作法を覚えるのではなく、ものをつくることに時間のすべてを使わなければなりません。

結局、ずっと前に分析のスタートアップをつくったときに使っていたPythonとDjangoにしました。Herokuのおかげで、公開もサーバーの管理も、慣れていたAWSよりずっとかんたんでした。数分でサイトは公開され、数時間ですべてのページのURLが空のテンプレートにつながり、数日でほとんどのモデルが動いて、いろいろなAPIからデータを取り込むようになりました。ここからが本番です。

連携したかったサービスのほとんどは、よくできた文書つきのOAuth 2.0のAPIを備えていたので、アカウントをつないで必要なデータを引いてくるのは、驚くほどかんたんでした。Herokuのスケジューラに10分ごとに新しいデータを確かめる仕事を仕込み、何かあれば取り込むようにしました。

フロントエンド

• SASS
• Compass
• CoffeeScript
• LiveReload
• jQuery
• PJAX
• jQuery Throttle
• D3

サイトは、全体で1つのCSSファイルと1つのJavaScriptファイルを読み込みます。開発中は整理と部品化のために小さなSASSとCoffeeのファイルに分かれていて、それをつなげたものです。

開発では、CSSやJavaScriptを変えるたびにサイトを即座に読み込み直すために、MacアプリのLiveReloadを使っています。何かを変えるたびに数秒ずつ短くなるので、何千回も繰り返すときにはとても助かります。

バックエンド

• Python
• Django
• Postgres
• Memcached
• Heroku

Herokuには、この構成を用意するための親切な手引きがあります。公開はとても単純で、「git push heroku master」と打つだけで変更が反映されます。GitHubには頻繁に、Herokuには公開したいときに送っています。

重い問い合わせのあるページの速さがしばらく心配でしたが、Memcachedが救ってくれました。サイトはとても静的で、新しいデータが入ったときにしか変わらないので、ほとんどのテンプレートをキャッシュして、すぐに返せました。

最後の直線

デザインの作業は、視点がたびたび変わることや、途中で邪魔が入ることでかえって良くなります。会話の途中や、街で何かを見かけたあとに答えが出ることもあります。

ですが開発のときは、何千行ものコードを頭に入れたまま集中するために、邪魔の入らない日が続いてほしいこともあります。ルームメイトの2人が1週間出かけていたので、静かな時間ができました。

デザインが決まり、データも流れ込んでいたので、公開の前に残っていたのは、長い不具合と速さの問題の一覧だけでした。これが公開されるまで、部屋に閉じこもることにしました。

フロントエンドとバックエンドを行ったり来たりしながら、生のデータをページに足しては整えていきました。

CSSで何かをつくるとき、私はまず、ごく単純なスタイルで配置から手をつけます。目的は、すべてを正しい場所に置くことであって、見た目を良くすることではありません。最初の段階は、バックエンドが必要なものをすべて出しているかを確かめることです。それを済ませてしまえば、あとはずっと同じCSSファイルの中で過ごせます。セレクタがきちんと効いているかを確かめるためだけに、すべてにbackground: redやbackground: blueを当てます。それから配置と位置を、レスポンシブや例外的な場合を考えながら詰めていきます。それが片づいたら、たいていは新しいスタイルシートをつくって、デザインの細部を埋め、見た目を整えます。

上の六角形と同じ色とアイコンを使ったので、その日に行った場所の種類がすぐにつかめました。家は何度も繰り返し出てくるのに、とくに面白いものではないので、他の場所が引き立つように控えめにしました。青ではなく白い丸です。

文字はすべて隠して、それぞれのタイムラインをより単純で軽いものにしました。日をクリックすると開いて、より詳しい情報が出ます。

最初に足したのは移動のデータで、歩き、走り、車などで場所と場所をつなぎました。すべて絶対位置で置いたので、開始と終了の時刻でひとつひとつを描けます。

ぼかしたInstagramの写真が、データを見せる背景として、日ごとに面白く多様な表情を与えてくれました。そのあと、それぞれの日に本物の心拍数のデータを足しました。

少し体裁を整えると、ページがまとまり始めます。場所と場所のあいだには弧が描かれ、移動の種類と長さを示します。歩きのような地味なものはとても小さく、長いランや飛行機は目に入りやすい明るい色になります。

右側には、街の名前と、前の日と次の日への移動のための場所を空けてあります。

空白の多い日もありました。1日じゅう家にいたか、眠っていたように見えます。GitHubのコミットが物語の残りの隙間を埋めて、いつ働いていたのか、何に取り組んでいたのかを見せてくれます。

月のページ

日ごと、月ごとのページができたので、月の一覧と、ページを行き来するときのアニメーションに取りかかりました。

最初、月は縦の一覧に並び、訪れた街や場所の種類の情報がついていました。その月の上位の写真も、何があったのかの見取り図になってくれます。

もともとはレスポンシブのモバイル版として考えたものですが、月をひとつずつの小さな塊にするほうが、一覧よりも心が躍ると気づきました。押したくなりますし、触れる物のように感じられます。

Mapbox

自分のランに文脈を与えるために、地形と道路の入った控えめな背景がほしいと思いました。Google Mapsは素晴らしいのですが、もう少し自由に手を入れたかったので、Mapboxを試すことにしました。値段は少し高く思えましたが、設定はとてもかんたんですし、良い地図のあるきれいなホームページのためなら、じゅうぶん見合うと考えました。

Runkeeperは、走っているあいだ5秒ごとにGPSの座標を並べて渡してくれます。その点からSVGの線をつくるのに、MapboxのJavaScriptのライブラリを使いました。最初は、線が始点から終点へ伸びるアニメーションのために込み入ったコードを書くことになるかと心配しましたが、stroke-dashのCSSプロパティを使った単純なCSSのトランジションで済みました。この例では、オフセットを0に近づけていくと、線が少しずつ現れます。

path.line {
	/* Assuming a stroke length of 100px */
	stroke-dasharray: 100px;
	stroke-dashoffset: 100px;
	transition: all 500ms ease;
}

path.line.loaded {
	stroke-dashoffset: 0;
}

批評の時間

毎晩、Stammyが仕事から帰ってくると、私たちは新しい機能や変更を見ていきました。行き詰まったときや、もうひとつの意見がほしいときには、YuriやDustin、他の友人にもリンクやスクリーンショットを送りました。他の人の視点をもらい、新しい目で定期的に見てもらうことは、本当に助けになります。アイデアの多くは、話し合いの中や、何かがしっくりこないという感想への答えとして生まれました。

人から意見をもらうというのは、言われたことを全部そのままやったり、嫌われたものを消したりすることではありません。意見は、自分のやったことが筋の通ったものか、うまく働いているかを教えてくれますが、何をすべきか、どんな未来を描くべきかは教えてくれません。ビジョンは人任せにできません。文句が出るたびに継ぎ当てと小細工を重ねた企画は、たいてい手を入れるのも保つのも難しくなります。

強い反応はたいてい良い兆しです。たとえ否定的でも、感情を動かされるくらい真剣に向き合ってくれたということですから。それは実のところ珍しいことです。みんなの感想がぼんやりしていたり、言うことが何もなかったりするなら、それはたいてい、心を動かさないデザインだという悪い兆しです。全員が嫌うなら、それはひどいものか、素晴らしいもののどちらかです。見分けがつかないこともあります。

絶えず意見をもらうことは大切ですが、否定的なものが来た瞬間にすべてを投げ出したり、案をまるごと捨てたりしてはいけません。私はふつう、次の改訂に向けてまとめておきます。図面を引き直さなければならないほどの重大な問題でない限りは。

たとえば今の版では、移動の弧がわかりにくいという意見をたくさんもらっています。それを直すために公開を遅らせるのは筋が通らないと思いましたが、次に出す版では別のやり方をとります。

いろいろな種類の人から、とくに技術に明るくない人や、こういう画面に慣れていない人から意見をもらうことにも意味があります。人によって考え方も触れ方もこれほど違うのかと知るのは、もどかしくもあり、目が開かれることでもあります。だからこそ、カフェや、まったく知らない人に試してもらうのが好きなのです。はっとする気づきが得られますし、自分には当たり前でも他の人には通じないことが見つかります。

どれだけ磨き上げ、考え抜いたデザインにも粗はありますし、しっかり試すことで良くなります。

チャットヘッド

問い合わせフォームなんて2006年のものです。訪れた人と楽しくやりとりできる方法がほしいと思いました。私の考えでは、多くの人は何か言いたいことがあるのに、たいていは公式めいた問い合わせフォームに気後れしてしまいます。私自身がそうです。

サイトの他の部分の見た目はかなり未来的で自動化されたものでしたが、ここは楽しく、親しみやすく、人間らしくしたいと思いました。サイトは格好よくありたいけれど、人が気後れするほどではいけません。

以前は、毎日Facebookのチャットヘッドで人と話していました。とても自然なデザインで、自然なやりとりの仕方でした。ここでも似た感触にしたかったのです。多くの人がすでに慣れているものですから。いずれはこのサイトをチャットの窓口にして、Messenger越しにリアルタイムで話せるようにもできます。

Aboutのページ

この企画は、たくさんの他のソフトウェアと機器に支えられています。それぞれにきちんと感謝を示して、使っている道具をすべて共有できる方法がほしいと思いました。そこで、協力してくれたところのロゴを「powered by」として並べ、カーソルを合わせると名前と役割が見えるようにしました。

医療のダッシュボードのようにならず、もっと楽しく人間らしく感じられるように、ブリトーについての数字も足しました。ブリトーを嫌いな人がいるでしょうか。

Powered by 砂糖

終盤は、集中を保って徹夜で作業するために、とんでもない量の砂糖をとっていました。体には最悪でしたが、数時間は頭がはっきりして、ほとんどどんな問題も解けました。問題が難しいほど、解くのに必要な砂糖も増えます。

2014年7月11日

公開の日

金曜日でした。サイトはほぼできていたので、最後の仕上げにAlexの家へ行くことにしました。こういうことにはもうひと組の目があるといいですし、世界でも指折りのJavaScriptの達人がそばにいるなら、なお心強いものです。

やることの一覧は、残った小さなものばかりでした。チャットヘッドから実際にメッセージが送れるようにする、Twitterのボタンを足す、メタの説明文を直す、最初の記事を書く、CDNの素材を更新する、公開のツイートを考える、など。

並んで作業していた数時間のあいだに、彼は私たちの年齢のカウンターを起動画面にするChrome拡張をつくってしまいました。

金曜の夜に出すのは遅すぎるか、それともみんながパソコンの前に戻る月曜まで待つほうが筋が通るかを、少し話し合いました。あと数日待つのが賢明だったのでしょうが、そのときの私は、休みなくアドレナリンでコードを書き続けた1週間のあとで疲れ果てていて、いましかないと感じていました。

DNSの設定をいくつか変えて、ツイートを投稿して、公開されました。

金曜の夜だったので、最初の閲覧はほとんどがスマホからでした。私は自分の時間の大半をデスクトップ版に使っていたのに、多くの人が体験していたのは、素朴なモバイルの実装のほうでした。

終盤にレスポンシブのデザインへ多くの時間を割いていたのは幸運でした。みんな気に入ってくれて、スマホだけで共有してくれていました。もう一度やるとしたら、モバイルの体験にもっと時間を使うでしょう。多くの人にとって、それが最初の、そしてしばしば唯一の触れ方なのですから。

すべて順調に見えたころ、Stammyから「体重1517ポンドになってるよ」というDMが来ました。ずいぶん妙です。私はもっと軽い気分でした。

Sportのページのコードは長いあいだ触っていなかったので、急に壊れるはずがありません。ページのソースを見ると、生の値がピリオドではなくコンマになっていました。151.7ではなく151,7です。JavaScriptはコンマを無視して、そのまま誤って読んでいました。キャッシュを消すと、ページは元どおりになりました。妙です…

その夜遅く、バーで友人にスマホでサイトを見せていたとき、ページの見出しのひとつがロシア語になっているのに気づきました。おかしい。さっきの不具合とすぐに結びつきました。どちらも、暴走した多言語化のコードのせいのはずです。

もちろん、家に帰って調べることになりました。

原因は、Djangoの単純な設定でした。数字や日付のために多言語化（よくi18nと略されます）が有効になっていたのです。それがキャッシュの仕組みと合わさって、外国から呼ばれたあとの一部分が壊れていました。この機能を切るのは1行の修正で済み、世界中の誰にとっても同じ体験になりました。

小さく、目立たない手がかりが、どこかにある直すべき不具合を指し示す。これはその数多い例のひとつにすぎません。

その夜、長い1週間の作業のあとで、私は疲れ果てながらも満ち足りて眠りにつきました。サイトはついに公開され、私のツイートから数千人が見てくれていました。週末はゆっくり休んで、来週になってから世界にどう広めるかを考えよう。そう思っていましたが、その必要はありませんでした…

翌朝

私が眠っているあいだの数時間で、みんながRedditやHacker News、インターネットのあちこちに投稿してくれていました。翌日の朝7時に友人と走る約束をしていたので、私にしては珍しく早く起きました。それが幸運でした。

スマホは通知であふれていました。数百のツイートに、たくさんのメール。サイトを開こうとすると、ひどく遅い。分析を見ると、この数時間でアクセスが天井を突き抜けていて、負荷でほとんど応答しなくなっていました。幸いHerokuでの増強はかんたんで、dynoを2から8に増やしました。極端なアクセスをさばけるだけのウェブサーバーがあれば、また一瞬で表示されるようになります。

数時間のうちに、サイトは10万人の訪問者を超えました。午後には20万人。どうやら気に入ってもらえたようです。ツイートやメッセージは流れ込み続けました。

誰かに理解してもらえるのか、気に入ってもらえるのかもわからなかったので、いろいろな人が感想を書いて広めてくれるのを見て、本当に身の引き締まる思いでした。とくにうれしかったツイートがいくつかあります。私がとても尊敬している人たちからのものでした。

何百人もの人が、同じような質問をしているのに気づきました。

• アニメーションはどうやってつくったの？
• どんな技術を使っているの？
• 血液の値はどうやって知るの？
• 自分もこれを持つにはどうすればいい？

最初の10人か20人に返事をしたところで、始まりから終わりまでの話をまるごと書くべきだと気づきました。世界に伝えずにおくには、面白すぎる道のりでした。誰にも見せたことのない古いスケッチやモックアップ、試作が何百とあったのです。

そうしてこの記事が始まりました…

あとがき

私はこのサイトを、ほとんど自分の個人的なおもちゃとしてデザインしました。これが未来だとはわかっていましたが、このデータを毎日集める手間をかける価値があると他の人も思うかどうかは、わかりませんでした。それでも、少なくとも何人かはとても関心を持ってくれたようです。公開したあと、自分のものをどうすれば持てるのかという何百通ものメッセージが届きました。

数か月後、私はGyroscopeという会社を始めることにしました。いまはもう動いていて、誰でも登録して自分の生活を記録し始められます。