今日から始めるAI×電子工作 
photo credit: @superamit via photopin cc
こんにちは、ボーノです。
今回は、初めてハッカソンに参加したのでその時に行った準備と当日の一部始終を記録しました。
コンテンツ
ハッカソンとは？
もはや説明も不要だと思いますが、ハック(Hack）とマラソン（Marathon）から作られた造語。
エンジニア、デザイナ、プランナ等が集まり、チームを組んで短期間のうちに何か面白いもの作ろうというイベントです。
アフィリエイトソンとは？
アフィリエイト＋マラソンの造語。
ハッカソンの1種で、アフィリエイトを利用したWebサイトを1日で作ってしまおうという企画です。
今回は楽天、リクルート、Yahooの共同開催で、各社のAPIとアフィリエイトサービスを利用するのが条件。
1日の最後に発表会があり、そこで当日の成果を互いに評価し合います。
そして本当の勝負はそこからで、その後1ヶ月間のアフィリエイトで1ヶ月間の報酬を競い合います。短期間なのがネック。
参加する前の心境
初のハッカソンということで、かなりどきどきの参加でした。
Webエンジニアを志して半年が経過し、自分なりに一生懸命勉強をしてきたつもり。3日坊主の自分がここまでやってこれたのは、やはり心底Webの世界が好きだからだとつくづく感じます。
まだまだ技術力やノウハウが足りないのは承知なのですが、「もう少し知識がついてから」等と言っていてはいつまで経っても成長できないと思っています。
先日参加したCSS Niteで鷹野さんがお話していた通り、仕事はいつも自分のスキルより高い仕事が来る（タモリ語録）という言葉を思い出します。
ということで私も、意を決して参加することにしました。
準備したこと 2013/6/18～6/21
オークションに特化して考えてみる
今回は上記3社のサービスを利用するという条件付きなのである意味絞りやすい。探して見ると、宿検索とかショッピングとか定番物が多かった。
私は、プライベートでも良く利用しているオークションに関するサービスを作る事にした。
アイデアとしては、
- 入札者の数と金額に応じて成長する木、オークションツリー
- キャラクターものばかりを集めた、キャラオク
- 比較しやすいUIを利用したサイト
等など。
う～ん、どれもぱっとしない。
アイデアが固まらない中、とりあえず当日すんなり作業が進むように準備だけしとくことにした。
デプロイ環境の用意とソフトの準備
AWSでインスタンスを立ち上げ、ElasticIPまで割り当てておく。ドメイン取得は名前が決まった後で。
こういうハッカソンはフレームワークを使うと勝手に判断し、cakePHPの使い方を復習し直す。
・・う～ん、全然使いこなせる気がしない。仕方ないのでレガシーPHPで作る事にする。
見た目は、第1回のを見て見るとBootstrapを使ってるのが大半だったので、自分も使う事にする。
確かに見た目はオシャレになるけど、使い勝手が悪くて手をつけていなかったのだが、再チャレンジ。やっぱりちょっと違和感がある。まぁ当日がんばろう。
チームを組んだ場合も想定し、Github使ってみる。これも初めて。
git add➡commit➡pushの流れは覚えた。
サイト企画はオンラインのCacooを使おう。
画面デザインはphotoshopで。
これで一通り、サイト企画➡モックアップ作成➡画面作成➡サーバサイド作成➡リリースの一連の流れができそうな雰囲気になってきた。
当日の記録 2013/6/22
前夜祭は参加できず
本当は前夜祭の6/21LTに参加したかったけど、突然の残業で行けず。
静岡という場所柄、平日開催はかなりきついす。
一応keynoteでスライドまで作ったんだけど、また次の機会にしよう。ちなみにもちろんLTも初トライ。
8:00 開始直前に構想固まる
ネタを再度考え、なんとなく構想が固まった。
出品するまでに至った熱い物語をアピールできる場を提供しようと思った。
オークションというのはその性質上、中古品が当たり前であるが、その程度や状態はその使用者の「思い入れ」で全然違う物となる。
特にギターやカメラ等、趣味の指向が強い物はなおさらで、買うまでに至った背景、想い、使用中にあったエピソード等、そこには「ストーリー」があるはずである。
今までは、例えばギターであれば何年モデルで誰が使っていたタイプ、等でのみ選ばれており、どれだけ大切に使っていたとしても「中古品」というだけで他のよく分からない出品者と一緒に同じ土俵に並べられてしまう。
それはその人に取って、かなり心外なのではないか？
俺はこんなにこいつのことを大事にしていたんだぞ！という熱い気持ちを語れる場があってもいいのではないかと。
また入札を考えている人にとっても、今までは横一線に並んだ商品は値段、モデル、場所等でしか選ぶ基準がなかった。
しかも相手は誰か分からないので、どんな風に使われていたか分からず、そこにはある意味の気持ち悪さが発生する。
熱い想いを読んで、そこに「共感」できる気持ちがあったり、その人の「人柄」が良く分かったら、もっと気持ちよく入札できるのではないか？しかも落札後ももっと大事に使えるのではないか。
前の使用者の気持ちも一緒に付いてきたんだから。そう考えました。
ということで、物を買ってからオークションに出すまでの物語という意味で、「Story to Auction」というサービスを考えました。
（ちなみにこの名前はハッカソン当日、発表10分前に思いついて慌てて修正）
10:00 スタート
銀座の会場に到着。
人はまだ10人くらい？予想外に静かで安心した。
前夜祭でチーム編成とかもあったらしいので、既にみんなチームになっていてもう作成とか始まってぎらぎらしているのかと思ったけど見た感じみんな個人参加ぽかった。
自分はチームメイトが欲しかったので赤いカードをぶら下げて着席。
最初にルール説明があり、スタート。
赤いカードの人は集まって、チームを組むかどうか話し合った。なんとなくみんな構想が違っていそうだったので、とりあえずはばらばらで始め、自分の企画が無理そうだったら他の人に便乗しようと言うことになった。
11:00 情報収集、交流
上記の構想が実現可能か、Yahooオークションdeveloperの光野さんという方に聞いた。疑問だったのは下記2点。
- YahooオークションAPIを使ってのアフィリエイトの技術的手法
- 他のサイトで自身の出品物をアピールするのがOKなのか、規約的な所
ヤフオクはどんな出品物にもアフィリエイトリンクを付けられるということで。どちらも問題なさそうだったので、作業に取りかかる。
同じテーブルに座った方々とお話。
赤いカードの方達も同じテーブルでやろうということになった。
青森から来た方もいて、自分も静岡だし、このイベントのスケールの大きさを感じる。後で知ったけど、広島からの人もいた。
こういう場では、フリーの方に合う確率が異様に高い。まぁそりゃそうか。それにしても色んなタイプの人がいておもしろい。
そして皆さん共通して個性的で、目がぎらぎらしている。
11:30 作業開始
まずはヤフオクAPIを使ってみるところから。
APIの仕組みがまだ完全に理解できていないので、少し苦労した。
最終的には、ヤフオク出品ページに載っているヤフオクIDを投げれば、そのタイトル、画像、url等を取得する事に成功した。
そこのリンクにアフィリエイトのリンクを付与してWebサイト上に載せれば、アフィリエイト成功。
うん、なんとなくいけそうな気がしてきた。
12:30 画面構成、サイトマップを考える
次に画面構成、サイトマップを手書きで考えた。
1日で作れる範囲はたかが知れているので、なるべくシンプルにを心がけた。
ビューはトップページ、物語作成ページ、出品物リストページ、物語閲覧ページの4つ。
全てオークションIDをベースに作れるので、苦手な認証作業とかも不要。全てPHPを使用。cakePHPを使いたかったけど、マスターできなかったため断念。
データベースも超シンプルで、MySQLを利用し、テーブルは1つのみ。
オークションID、タイトル、熱いメッセージ、画像URL、出品ページURL行を作成。
PHPファイルはビューの他に、データベースへ格納した後にリストページにリダイレクトするファイルも作成。
15:00 中間地点
終了は19:00。まだ9割くらいの集中力は保っていた。
ここまでで一通りの流れは作れたかな？見た目を全くいじっていなかったので、ビューの装飾に取りかかる。予定通りbootstrapを使用。
始めはbootstrapだけダウンロードして、一から自分で作って行くつもりだったけど少し作業してあまりに時間かかりそうな事を悟ったため、断念。
bootstrapサイトに便利なサンプルが置いてあったので、丸々コピー。そしてそれを全てのビューファイルに貼付けるという荒技。
というより何というメンテナンス性のなさ。
恐らく、最もやってはいけない行為だろう。いや、考えている時間はない。こぴぺこぴぺこぴぺ…
何となくかっこよくはなったけど、微修正が全く分からない。ボタンがセンタリングできていなかったり、トップメニューと文字が重なっていたり。かなり気持ちが悪い。
とりあえず無視して、全ビューファイルをそれっぽい形にしていく。とにかく一通形にするのが大事だと思うので。
17:00 ラストスパート
集中力7割くらい。少しずつ疲れが出てくる。
何となく全体の流れはできたので、微修正に取りかかる。
タイトルのフォント、トップページのキャッチフレーズ、説明文、ボタンの配置、画像リストの並べ方。
う～ん、bootstrap難しい！！
かなり妥協してタイムアップ！
19:00 発表会兼懇親会
1チームずつ発表していく。ほとんどが個人での作成だった。
宿検索だったり、ツアー検索だったり、鉄道検索、色検索、ギター検索…みんなそれぞれで面白かった。
技術的にやばいと思ったのは、FLASHを利用して女の子が出品物を紹介してくれるサービスと、3次元の世界に検索で引っかかったパネルを並べてその空間で自由にパネルの位置を変更できたり、大きさを変えたりできる「ぐりぐり」というサービス（先ほどの光野さん作成。さすが！）。
私も無事？に発表が終わった。
ネットワークが繋がらなくて全てのページを見せられなかったけど、今のオークションに足りない物は少しでも話せたかな。
途中でドミノピザとビールが届けられ、飲みながら他の方のプレゼンを聞く。この時間が溜まらなく楽しい。
最後に互いに、1番今日の成果でがんばった！と思うものを投票し合い、本日のチャンピオンを決めた。
1人1票で、自分のサービスには2票の方が入れてくれた。初参加でこれは嬉しい！
参加者でのdeveloperの方以外の最高が4票で1人、3票も確か1人だったので良く捉えて実質3位ということにしときましょう。（同率3位は何チームかいましたけど）
技術的にはまだまだだったけど、今のオークションに不満を持って、共感してくれた方がいるのかもしれない。
今後のとても良い励みになりました。
本当のエントリー締め切りは1週間後なので、もう少し使い勝手の良いサービスにしようと思います。とりあえずドメイン取得しよう。短めにstoryauc.comかな。
ご参加された皆さんも、お疲れ様でした。
最後に
ということで、良い初ハッカソンでした。
半年間がんばって、やっと土俵に片足くらいは乗せられるようになってきました。
もっと技術と知識を磨いて、優勝狙える位になりたいと思います。
それにしても、やっぱりWeb開発って、楽しいですね。光野さんお勧めのthree.jsというライブラリも早く使ってみたい。
＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／
