ハッカソン参加レポート〜新しいAPIや開発環境に積極的にチャレンジ〜
Production & Operating部門Webデザイン＆デベロップメントユニットの芦川です。主にバックエンドの開発を担当しているエンジニアです。
前々回のコラムで、Webディレクターの足代が「脱サララーメン屋の開業に見る、サイト初期設計の重要性〜コンテンツ企画とあわせて考えたいサイトの構造〜」と題して、コンテンツ開発だけではない弊社の業務範囲についてお伝えしました。
企業のメディア化やコンテンツマーケティングにおいて、エンジニアは、裏側の業務を担当していて、お客様と接点を持つことはあまり多くありません。その業務内容をご紹介するのは、かなり狭い領域の話になってしまいますので、今回は、インフォバーンのエンジニアの取り組みのひとつとして、「Communicate Hack」というハッカソンに参加してきた様子を報告いたします。
まず、「ハッカソンって何？」という方のために簡単におさらいしておきます。
ハッカソン（Hackathon）とは「ハック」と「マラソン」を掛けあわせた造語で、通常は一定時間内に1つのテーマに従って行われるプログラミングコンテストのことを指します。チーム制を取ることが多く、最後はプレゼン発表を行う、というのも特徴的な点でしょうか。
またトレンドとしては、新しいWebサービスなどをテーマにして開催されることが多いようです。有名なところではFacebookの「いいね！」ボタンも同社のハッカソンから生まれたそうです。
今回のハッカソンの内容は「Twilio」という電話やSMSをWeb経由で操作できるAPIを使ってサービスを1日で作るというもの。
「たった4行で作れる」とだけあって、単純な通話機能だけであればアカウント登録から30分程で動かすことができました。ではハッカソンの様子を時間を追って紹介します。
前日
事前に行われたアイデアソンに参加していたこともあり、必要な物はもちろん、あった方がいい物もなんとなくわかったので、以下を準備しておきました。
1. 無線ルーターとノートPC
当日はネット環境がないので、これは必須でした。
2. Twilio アカウント
無料でもある程度のことはできますが、SMS等の一部機能の使用は課金が必要。当日の短い時間で、このあたりの制限を気にしたくなかったことと、自分のモチベーションのためにも課金しておきました。
3. Webサーバーのセットアップ
こちらもTwilioを使ううえで必須ではありませんでしたが、Web API 経由の方が圧倒的にプログラミングの自由度が上がります。特にユーザーの情報をDBに保存する場合は、Web サーバーは必須です。
ちなみに、Twilio と Web サーバーの連携の仕組みはこのようになっています。
4. マニュアルを読んでサンプルコードを動かす
公式のドキュメントに日本語のサンプルがかなりあったので、1個ずつ試していきました。Twilio の概要をある程度把握することができました。今回使ったのは、サーバーサイド twilio-node、クライアントサイド Twilio.js ライブラリです。その時に書いたコードはこちらにあります。
ハッカソン当日
チーム結成
当日は、一人で参加していた学生の安西さん（イベント当日はまだ10代！）とチームを組むことに。学校の先輩の指示で応募したそうですが、勇気ありますね。彼女はまだプログラム経験がないとのことなので、アイデア出しとプレゼン資料作成をお願いしました。
要件定義
前日のアイデアソンで、作成するサービスの大枠は決まっていました。それは、音声で行う「ボトルメール」のようなサービス。
「声でつなぐ」というところから「糸電話」をイメージしたものを目指すことにしました。実際の作業としては、紙の上で簡単な遷移を起こした後、GoogleDocs上で編集していき、常に内容が共有できるようにしました。
イメージを具体化する上で活躍したのは安西さんのイラスト。iPadのアプリを器用にに使いこなし、手書き風のイラストをいくつも作ってくれました。
そしてバックエンドで開発するものの大枠は、
1. Web（または電話）から音声を録音。録音した情報はDBに保存
2. 録音した音声の再生
3. 会員登録のような仕組み。可能なら Twitter 認証
という要件となりました。
この段階では録音した音声データにどのようにアクセスするのかわかっていなかったので、取り急ぎサンプルを例にして録音機能を作ってみてから考えることにしました。
実装
実際に録音まで作るとTwilioサーバー上にmp3ファイルが作成され、ファイルへアクセスするURLがAPIを通してサーバーへ送られることがわかりました。
再生は通話からのTwiML経由か、HTMLのaudioタグ。 実装速度を優先して、audioタグに。保存するデータがわかったので、DB定義を決めて、単純にURLをテキストで保存することにしました。
ただし、この時点で昼過ぎまでかかってしまったため、認証系の機能はあきらめ、音声の再生までデモを行うことにしました。 プレゼン資料以外に、フロント用のUIの作成も必要です。
チームにHTMLが得意な人がいなかったので、フロントのUIは最低限。 Bootstrapのサンプルに少し手を入れて使いました。フロント側は慣れない作業のため、思ったより時間がかかり、ここで発表まで残り2時間。あとは休憩とプレゼン資料作りに注力することにしました。
プレゼンと結果
プレゼンは別フロアにあるホールに場所を変えて行われました。Twillioの事業責任者をはじめ、Webサービスに精通している審査員の方々を前にして各チーム5分のプレゼンを行い、プレゼンの内容と、開発したサービスの内容の両方で審査が行われました。
結果は6チーム中の3位。
まずまずの結果ですが、他のチームに比べてプレゼンが弱かったかもしれません。上位のチームは、実物でのデモは最小限にし、紹介は、スクリーンショット等で済ませていました。実際、プレゼンの時間は限られていたので、無理にデモを行う必要はなかったのかもしれません。
まとめ
ハッカソンでは、開発能力以外にも、企画やプレゼンテーション能力が求められます。エンジニアといえども、今後、お客様のニーズを捉え、課題を解決できるソリューションを提供していくためには、企画力やプレゼン能力が重要になってきます。今回、ハッカソンに参加したことは、良いトレーニングになりました。
また、業務では安定したライブラリを活用しがちですが、新しいAPIや環境を試すことで少しは自分の能力アップも図れたのではないかと思います。
エンジニアは裏側の業務を担当していますが、企業のメディア化、コンテンツマーケティングにおいて新しいチャレンジを行う際には、それをカタチにし、実現していく役割を担っています。エンジニアとして、インフォバーンのコアコンピタンスを支える役割を果たし、さらにテクニカルな視点から、プラスαな提案ができるよう、今後も最新技術のキャッチアップや技術力の向上に務めていきます。
