2015年6月30日火曜日

「ダイバーシティハッカソン」に参加しました



障害者を助けるとかそうゆうのは苦手。
自分だっていっぱいいっぱいなので、助けるとかは重い。
そんな想いもあって、「健常者も障害者もフラットに楽しめる新しいあそびをつくる」というアイディアのチームに参加しました。
アイディアだけで、具体的なサービスはノーアイディアのようだったので、ぎりぎりまで迷ったけどこのチームを選んでよかった!
ちなみに、Yahoo!賞いただきました。
(全チーム何かの賞を貰える仕組みだったので最優秀以外は全部同じなんだけど)

<6月27日(土)>


イントロダクション(9:30-9:50)


様々な立場の人から説明があったのですが、経産省の人の「経産省って、本当は緩い役所なんです」が一番うけた。
さすがMETI、霞が関の外資系。

課題共有&アイディアソン(10:00-12:30)


このハッカソンは準備がとてもしっかりしていました。
イベントページをみればわかるけど、ちゃんとインタビューして、ペルソナたてて、そこから共通課題を抽出するところまでされている。

アイディアソンのやり方も面白い。
特に、2番ははじめての経験で、人のアイディアを組み合わせてうまく自分のアイディアを育てていけたのが楽しかった!


  1. テーブルごとのアイディア交換(ワールドカフェ)
  2. 個人ごとのアイディア交換(5分ずつペアを交換してアイディアを交換)
  3. 個人でアイディアをアウトプット
  4. 気になるアイディアに星をつける
  5. 星の多かったアイディアを選択
  6. 星は少ないけどどうしてもやりたい情熱枠を受付
  7. 自分のやりたいアイディアに参加してチーム結成


自分のアイディアはあまり星がもらえなかったけど、同じようなアイディアで星をたくさんもらっていたのがあったので、コンセプトをうまく言葉にまとめられていなかったんだと思う。。。

結局、最終的に自分は情熱枠のチームに参加。
チームの人数も一番少ないし、アイディアは生煮えだったけど、いいチームというか自分にあったチームに入れたと思う。


開発(14:00-22:00)


昼の作業


チームの構成は次のとおり。


  • 貴流さん(リーダー):デザイナー
  • 藤原さん:デザイナー
  • 手塚さん:エンジニア(C#)
  • 私:エンジニア(JavaScript)


バランスがよいといえばよいけど、1点問題が。
今回は人数も少ないし、Webアプリでバックエンドはなし、フロント重視でいくことは合意したものの、HTML/CSSを書く人がいない。
結局、仕方ないので自分がやることに。
なんか、前回のハッカソンでもCSS担当になったんだけど、変な流れが。。。

夜の作業


別に徹夜で作業する気はなかったんだけど、手塚さんが家が遠くて帰るの面倒だから泊まるというので乗っかりました。
泊まりOKのハッカソンというのははじめてだったので、いい経験になりました。

ちなみに、大して作業はしていなくて、近くの大江戸温泉物語にいってお風呂に入って、ラーメン食べて、仮眠室で寝ました(^^)

朝起きた時の会場からの風景

<6月28日(日)>


開発(朝-16:00) 


前の日に、手塚さんと大江戸温泉物語に行きながら、YahooのAPIいっぱい使ってYahooに媚びてみようかと冗談で話をしていて、結局、手塚さんがYahooのAPIでいくつか機能を作ってくれました。

自分はずっとCSSと格闘。
デザインも実はしっかり固まっていなかったので、回り道したりしてとにかく時間がかかってしまった。

プレゼンテーション(16:00-17:00)


このハッカソンは変わっていて、プレゼンとデモが分けられている。
うちのチームのプレゼンは藤原さんがつくってくれて、一番かっこよかったと思う。


タッチ&トライ(17:00-17:30)


藤原さんはデザインが気に食わないと言っていたけれど、みんなからデザインを結構褒めてもらえた。
がんばってCSSを書いた身としてはうれしかった。
あと、「健常者も障害者もフラットに楽しめる新しいあそびをつくる」というコンセプトにも共感してもらえたのがとってもよかった。

スタッフの方に、組み合わせるネタを機械的に集めて、人工知能で学習させたりしたら面白いというアドバイスをもらった。
なんか、最近はコンピュータが人間では思いつかないような料理を創造したりするらしい。
そこまでできたら本当にサービスになるかも!


デモサイト

http://itagakishintaro.github.io/itdiversity/

ソース

https://github.com/itagakishintaro/itdiversity

懇親会(18:30-20:00)


懇親会がはじまって出来上がった頃に賞の発表。
我々のチームは狙いどおりYahoo賞を受賞(^^)
でも、Yahooの人にYahoo! APIをいっぱい使ったからというだけじゃなくて、デザインとコンセプトがよかったから選んだと言ってもらえた!

優勝したチームはボタンを押すとLEDが光って、Bluetoothで電波を飛ばして近くにいる人に通知するというサービス。
リアルのモノを使って、シンプルでわかりやすくて、すぐにでも使えそうなすばらしい作品でした。
こういうIoTをからめるのが今どきの流れですね。

感想


はじめての形式のアイディアソン、初の泊まりハッカソンなど、いい経験になりました。
ただ、図らずもCSS係になってしまったので、技術的なおもしろさが味わえなかったのが残念。
次のハッカソンでは新しい技術にふれたいなぁ。

2015年6月17日水曜日

「はじめてのハッカソンvol.10」に参加しました



何度参加しても楽しい、何度参加してもいい「はじめてのハッカソン」(「初めて」の意ではないらしい)にまた参加しました。
今回は、普通のハッカソンではできない「あえてみんな普段やっていないところをやってみる」という試みをしてみました。
結果的には、よかったんじゃないかなぁという気がします。
こんな変なことも気軽にできちゃうのが「はじめてのハッカソン」のいいところです。


メンバー



  • 國吉さん(G'sアカデミーで4月からプログラミングを学んだばかり)
  • 阿部さん(フロントもバックエンドも一通り)
  • 松原さん(HTML/CSSのマークアップ)
  • 板垣(JavaScriptが多い?)



アイディアソン


阿部さんがさすがのファシリテーション力でうまく進めてくれました。
時間も少ないので、発散少なめで収束を意識したファシリで、とても参考になりました。

残念だったのは、全員がまじめだったこと。
かなり、スマートというか正攻法な方向にいってしまったので、遊び心とか一捻りとかキャッチーな何かが不足していました。
がんばって、AKB48総選挙的なアイディアをだしてみましたが、そもそも、AKB48総選挙の仕組みがよくわかってないので、広がらず。。。

結局、飲み会などの幹事さんにフォーカスしたサービスにランキングやSNSの要素を取り入れるという正攻法に決定。


お昼


昼食を食べながら普段どんな仕事をしているのか聞いていたら、松原さんはマークアップオンリーで、そのスペシャリストだということが判明。
じゃあ、今日マークアップやったら、簡単だし、いつもの仕事と同じになってつまらないだろうなぁと思ったので、「今日はあえてJavaScriptやりませんか?」と言ったら、「やってみます」とのこと。
だったら、みんな普段あまりやってないところをあえてやってみようよということで、次の感じに。


  • 國吉さん 普段:HTML/CSS => 今回:JavaScript
  • 阿部さん 普段:フロント+バックエンド => 今回:デザイン
  • 松原さん 普段:HTML/CSS => 今回:JavaScript
  • 板垣 普段:JavaScript => 今回HTML/CSS



プログラミング


國吉さんの状況


國吉さんはmilkcocoaを使ってチャット機能をつくることに。
すぐに完成させてしまっていて、ほとんど苦労していなかった様子。
その後、Bootstrap使ってデザインをきれいにするところがうまくいかなかったようです。
みんな自分で精一杯でフォローする余裕がなかったのと、そこはオプションだったので一人でがんばってもらいました。
(すみません。)


阿部さんの状況


Photoshopは入ってるけど、普段はデザインをしないとのことで苦労している様子でした。
ただ、ご自身でいろんな人に聞いて解決していました。
さすがです。


松原さんの状況


C3.jsというグラフ作成ライブラリを紹介して、がんばってもらうことにしました。
普通につくれていたのですが、本人はよくわからないけどできた様な感想を。
個人的には、理屈から入るより、いじってたら動いたとか、動かないのをなんとか動かしたを繰り返す方が楽しいと思うので、それでいいと思うのですが。。。


私の状況


松原さんはBootstrap嫌いみたいだったので、使い慣れたBootstrapが使いにくい雰囲気。
なんか別のないかなぁと思って探してたら阿部さんからGoogle Designというのを教えてくれました。
これは、マテリアルデザインだし、かなりいけそう!
ところが、ドキュメントがみあたらない。
迷ったのですが、完成させることを重視してここはあきらめました。
結局、bootstrap-material-design という以前に目をつけていたbootstrapベースのマテリアルデザインテンプレートを使うことに。
ドキュメントがbootstrap本家に比べて見にくいので少しとまどりましたが、松原さんにヘルプしてもらいながらなんとか形にできました。


成果物



なんと!プレゼンのときに私のつくった部分のレイアウトが崩れてしまいました。
(この画像は大丈夫)
幅を狭くしたときにおかしくなるのは國吉さんから聞いていたのですが、とりあえず今日は時間がないのでそこはいいやと放置していました。
プレゼンのときは、プロジェクターの解像度の関係で幅が狭くなり、大事なときにレイアウトが崩れてしまいました。。。
すみません。

ソース


https://github.com/niico-mm/nihonsyu


そういえば


全員日本酒好きだったのに、結局あんまり日本酒関係なかったなぁ。
Google Designいじってみよー。