書き置き。

ほぼ勉強の記録みたいなもんです。

HOKKAIDO アイディアソン&ハッカソン 2014 #hokkathon

チーム

参加申し込み時にグループ単位で申し込みをすることになっていた。前回2人ともプログラマでデザイナー欲しいと常々話していたところから、今回こそデザイナー方面でだれか、、、と思って声をかけたのが @6raoka さん。ハッカソン1日目が参加できないからとチューターとして申し込んでいた @irasally さんに2日目(の数日前)から参加してもらって、最終的に3人チームでの参加。

プロダクト

ラーメン好きの @6raoka さんが、ラーメンを食べた日は手帳に◯らのマークを書いている というエピソードから、それをアプリ化してみた。プロダクト名は「カレンらー」。

ラーメンはラーメン屋でしか食べない、との想定で、 Foursquareでラーメン屋のカテゴリに登録されている店でチェックインしたデータを、カレンダーにマッピングする。

余談だが、このプロダクトに辿り着く過程で、Foursquareのチェックインデータを Google Calendarにマッピングする方法、というのを教えてもらった。
頻繁にチェックインしている人なら、Google Calendar が予定を入れるだけでなくライフログの一つとしても使えるようだ。

今回使った技術的なトピック

  • 基本 HTML5+Javascript で作成し
  • Monaca でスマートフォンアプリ化
    • PhoneGap をWebサービス
  • YUIでカレンダー&アイコン表示
  • Foursquare の API (OAuth2.0)

去年に引き続きHTMLベースや位置情報系のAPI、スマートフォン向けのプロダクトというところは共通しているが、新たな試みとしてサーバーサイドを無くしてスマートフォンアプリにプログラム部分を詰め込むようにした。開発言語は PHP+JavaScript からJavaScript ひとつに絞られた。

前回もPhoneGapの存在は知っていたけど、当時はまだ Backbone に興味を持ってちょっと触り始めた程度だったので、サーバーサイドにPHPを入れて、逃げ道を作っていたように思う。それからすると、認証処理含めすべてJavaScript でやろうと決断できたあたり、ちょっとは成長できたのかな。

4回のデモ

一般的なハッカソンだと、どんなプロダクトを作りますっていう中間発表があるくらいで、あとはひたすら開発に勤しみ、最後に成果発表 というプログラムが多いと思う。
今回は、1日目に2回、2日目にも2回の計4回ものプレゼンタイムが用意されていた。

11時集合で1回目のデモが14:30に迫っている。
そこにランチタイムも含んでいることを考えると、さっさと作るものを決めて開発にとりかからなければならない。

毎度デモの最後にしまださんが言ってた「次のデモでお会いしましょう」という言葉が印象的だった。

1回目のデモ

大前提として、「1クリック(1タップ)以内でユーザに価値を届けられるもの」とテーマが決まっていた。

わりとすんなりプロダクトの方針は決定できた。 最初は Foursquareでチェクインするところを1タップとして考えていたけど、どうせなら写真も付けてチェックインしたい、など欲張ってしまって1タップでは収まらない。
「もう1タップさせて・・・」、と言いながら近くのラーメン屋でランチタイム。
チェックインするところは Foursquareアプリや Instagram 等各自の好きなアプリにお任せ、作るのはチェックインされたデータをAPIで取得してカレンダー表示をするところだけに絞った。

顧客の "iPhone で使えるアプリ” という要求仕様に対し、表示はHTMLで十分作れそう、HTMLで作って最後に PhoneGap もしくは Monaca でアプリ化すればいいだろう、という技術的な方針も自分の中では固まっていた。

1回目のデモではHTMLでプロトタイプを作った。
JavaScript でカレンダーを出し、各日付のマスの中にアイコンを付けられそうなものを探した。
平行して「◯ラ」のアイコンを作ってもらって、カレンダーのマス中に表示させるところまでできた。

2回目のデモ

FoursquareのAPIを睨みつつ、PhoneGap をインストールして、1回目のデモでできたカレンダーをiOS(iPhone)アプリの形にした。シミュレータで iPhone の枠に入ったのを見ると雰囲気が出てやる気も出てきた。

ここで1日目のアイディアソン&ハッカソンは終了。

合間の2週間

PhoneGap vs Monaca

OAuth2.0認証、PHPでは(Foursquareも含め)いくつかやったことがあって、それほど難しくないのはわかっていたけど、JavaScriptでやるのは初めてだったので、認証してアクセストークンをとるところまでを家でやっておいた。デバッグ方法の試行錯誤をしながらだったので余計に時間がかかってしまったけれど、終わってしまえばドキュメントに書いてあるとおりにURLとパラメータを準備して、InAppBrowserを使うのと、 jQuery で $.getJSON(); くらいの事だった。

PhoneGap単体で作る場合、jsファイルにconsole.log() を仕込むとそこで止まってしまうようで、プリントでバッグならぬアラートデバッグで頑張っていたのが、プロトタイプ段階では良かったけどそれ以上は限界だった。iPhoneの解像度が上がってフルHDサイズのモニタでも縦サイズがはみ出してしまうのも辛かった。家のiMac 27インチや、フルHDでも縦置きできるモニタがあればいいけど、MBAひとつで開発するのはちょっとつらい。(ノマドアプリ制作者はどうやってるんだろうな?シミュレータ使わない?)
その点、Monaca を使うと console.log() のログはデバッグアプリでも、MonacaのIDE内でも見る事ができる。配列やObjectを渡すと展開できないんだけど、ログが出るだけまだマシ。

2日目のハッカソン前日の夜、日が変わる頃、MBAで PhoneGap が他の環境と違って期待通りに動かないのは OSが最新じゃないからじゃないだろうか?というところに行き着いた。会社も家もiMacは10.9にしたけど、MBAだけ10.8のまま使っていた。(もしかしてXcode のバージョンアップだけでもよかったのかな?)
OSバージョンアップするにしても、もし明日マシンが使い物にならなくなってしまったら?という恐怖から、 ハッカソンでは PhoneGap 単体で開発するのは諦めて、Monaca を使うことにした。

3回目のデモ

プロダクトの概要説明と、Monaca の紹介をちょっとして、最後にはここに他の2人が作ってくれてるカレンダーのデザインがガッチャンコする予定です、という話をした。

最終デモ

早めに開発は切り上げて、アプリの形にしてパートナーに持って帰ってもらえるように、アイコンやスプラッシュ画像を登録したり、iOS Developer Program に登録したりお金払ったり、してた。

Androidのほうは仮証明書でStoreに載せられない版だけど、ちゃんとAndroid端末にインストールして動いていた。

iOS はお金払った後、アプリのビルドに必要な証明書や諸々のファイルを作れるようになるのに時間がかかってしまってタイムアップ。
最終デモはデバッガーで行うことにした。

デモの5分位前までちゃんとデータが表示されていたのに、1ヶ月に2回分しかラーメンを食べていない自分のデータじゃ面白くない、、とか頑張って作った認証部分もデモした方がいいんじゃないか、って余計な欲が出てきてしまったのがダメだった。どこでどうおかしくしてしまったのか、一度ログアウトしてアカウント切り替えをしようとしたら、その後一切動かなくなったところで、デモの順番がまわってきてしまった。

見せられるものがないのでなんともキレの悪いデモで終了してしまったのが本当に残念でならない。

まとめ

使いたい人もいる、使って貰えそうな人もいる、さらにガワ替え制作の要望ももらっているので、ここまできたら本当にちゃんと使えるアプリにするところまで、頑張ろうと思う。

ハッカソンスタイルの勉強会の「北海道開発オフ」を初めてから、早5・6年(?)
ここまできてようやく、時間内でモノを完成させる力が少しだけついてきたような気がする。 初めは欲張らずに小さく作り始める。 ここまでくるのに長かったな・・・・。

合わせて読みたい

@irasally さんのブログ
HOKKAIDOアイデアソン&ハッカソン2014-Day2に参加しました » 寺子屋未満