誕生日を迎えた親友にアプリをプレゼントした話

親友である@wacco0901さんが9/1に誕生日を迎えました。
なんでも相談できて、真剣にお仕事の話が出来て、趣味の合う大事な友人。
彼女とは自然と一緒に遊びに行く機会が多く、 「一緒に過ごした楽しい時間」を振り返ることができるもの をプレゼントしたいな、というところからスタートしました。

つくったもの

アプリのキャプチャ1 アプリのキャプチャ2 アプリのキャプチャ3

そしてつくったのがこちら。
彼女が持っているデバイスはiPhoneなので、ブラウザから見られるWeb時計アプリをつくりました。
写真は去年の9月から今年の8月までのもので、すべて彼女と一緒に行ったイベントやフェスのときに私のiPhoneから撮ったものです。
30秒ごとに背景の写真と、そのイベントの名称が切り替わるような仕組みになっています。

ホーム画面から起動するイメージなので、アイコンやスプラッシュ、そしてお誕生日おめでとうのカードもつくりました。
彼女の好きな色であるピンクをベースに。

カードビジュアル。ケーキがかわいくできたきがする…!

コードの内容と仕組み

イベントデータを外部JSONに入れておいて、00秒と30秒のときだけデータを更新する、という内容です。
「はじめてのハッカソン」の制作時間中にコードを書き(一人ハッカソンのような感じでした)、同じく運営をしていた@vnsksさんにレビューをお願いしました。
vns
ksさん 「画像のロードに時間がかかるのが気になるね」
というご指摘をいただいたのでプリローダーをつけて、ストレスなく見られるようにしました。

ベースのコードにはYomanのgenerator-webappで生成したものを使っています。
普段のお仕事ではなるべくgulpを使っているのですが、その普段のものだといらない機能が多かったので今回はGruntで。
gulpはコード少なめで書けるしわかりやすくて良い感じですが、Gruntの好きなプラグインがちらほらあるので、いまのところ状況に合わせてどっちも使っています。

上記のサンプルでは10枚程度しかデータを入れていませんが、
実際に撮った写真は100枚近くあり、そこから結構削って57枚を入れました。
JSONファイルを手入力でつくるのが地味にしんどかった気がする。あともう少し構造化出来たと思うけれど時間切れ。
JSONデータを扱うのははじめてだったので、次回なにかするときの課題にします。

一つ悔やまれることはこれ。

せっかく作ったスプラッシュ画像がちゃんと表示出来なかったのが心残りです。 なぜうまくいかなかったのかだけが謎……
以前は出来たと思うのですが、iOS7では確認できず。いつから仕様が変わってしまったのでしょうか。

今回のコードはGitHubに置いてあるので、気になる方は見てみてください。

作ってみて

つくったアプリも、カードも、喜んでもらえてうれしかったです。
自分がもっている技術で、喜んでくれたり幸せになってくれる人がいる。そんなWebの世界を好きになってからもう久しいですが、「誰のためにつくるか」「誰を幸せにするか」を改めて考える良い機会になったと思います。
誰かのことを思いながら、なにかをつくるのは本当に楽しいなと感じました。
彼女のことも、Webのことも、どちらも大好きだし大切に思っています。

いつもありがとう。これからもよろしくね。