集まって作るのは楽しい！Bootstrapの可能性を引き出すハッカソン開催レポート

17.Jun.2013

去る5月26日に、loftworkシステムDiv主催のTwitter Bootsrtap ハッカソン『Bootstrap code Lab』が開催されました。昨今、注目のWeb構築のためのフレームワークを学習しつつ、実際にデモサイトを構築する試みでしたが、結果、当初僕たちが考えていたアウトプットや、体感してほしかったことを遥かに越えてみなさんがどうやったら案件に使えるか、どうやったらワークフローを変えられるかという視点も含めてワークされていました。ここでは、このイベントを企画・運営したロフトワークの関井が、写真と共に当日の様子をレポートしていきたいと思います。
text:関井遼平（ロフトワーク）

まずは、こもりまさあきさんによるBootstrap活用のポイントについて

アドバイザーとしてお招きしたこもりまさあきさん。最近ではBootstrapについてセミナーで話すことも多いという

イベントの流れはおおまかに2部構成となってまして、午前中の「Bootstapのお勉強＆チームビルディング」、午後からの「チームワーク＆発表」です。

エンジニアやプログラマーが集まってプログライミングを行うのが「ハッカソン」ですが、今回、ご協力いただいたのが、CSS niteなどでの登壇でもおなじみ、フリーエンジニアのこもりまさあきさん。自身もBootstrapを案件でも活用し、全国のセミナーでもその活用のポイントを紹介するなど、いわば、Boootstrap活用の旗振り役として知られています。本イベントの冒頭では、主に以下の点で、Bootstrapを紹介しました。

Bootstrapについて
Bootstrapを使いこなすために
Bootstrapの使い道
LESSについて

中でも、こもりさんが強調していたのが、「LESSを使って開発することで、カスタマイズにかかる作業工数を減らせる」という点です。慣れるには多少時間が必要かもしれませんが、他のフレームワークでも同様にLESSをつかうと効率的に組むことができるため、デザインへの対応も柔軟になっていくと思います（もちろん制限はありますが）。

続いては、ロフトワークシステムDivのクリスによる、「Bootstrap を LESS でカスタマイズする方法」についてです。クリスからは主に、カスタマイズする上での注意ポイントを紹介してもらい、後半のチームワークに続くヒントを得るセッションとなりました。自身もBootstrapを始めとしたCSSフレームワークについては大きな期待をよせているといいます。

陽気なエンジニア、クリスギリツァス。彼の経歴についてはこちらでも紹介。

この後、システムDivの安田からチーム分けとルール説明が行われ、午前の部は終了。「はやく触ってみたい！」という気持ちを抑えながらも、チームごとにランチタイムに突入。各チームの雰囲気はわきあいあい、食事を買ってきて、食べながら作業を開始するチームも続出していました。ちなみに、このようなハッカソンにおいて、チームでランチを取るのはオススメです。食べながら自然と共通の話題がでてきて、それだけでコミュニケーションをとりやすくなりました。

参加者がBootstrap初挑戦であるのと同様に、イベントの司会に初挑戦した安田。「もっとはじけてみたかった」とボソリ。次回以降、期待しています！

みんなで手を動かす楽しさを体感。チームメンバーとの相乗効果が楽しい！

今回のハッカソンのテーマは「コーポレイトサイトを速攻構築する」です。弊社スタッフを含め参加者が普段行なっている業務に即したシチュエーションを設計に盛り込みました。ただし、「Bootstrapを使って作る」前提以外はすべてお任せのフリー状態。17時のチーム発表に向けて、そのプロセスはチームごとの進め方が試されるわけです。

まずはどのチームも、制作物のイメージ固めとチーム内での役割分担から取り掛かっていたようです。その後は、要件定義をホワイトボードに書き出して、それをタスク分解するチーム、「プロトタイプ」を重視して、まずはプログラミングに入ってみてアイデアを出しあうチームなどスタイルはいろいろ。共通して見受けられたのは、プロセス自体をハックして楽しむ雰囲気が漂っていたこと。それが許されるのがハッカソンの大きな魅力ではないかと感じました。また、参加者の取り組む姿勢に意欲の高さを感じました。

例えば、参加者の一人は「CSSフレームワークでどれだけ作業効率UPが出来るか」という社命を受けて来たそうです。非常に「Bootstrapと実務」的な視点でハッカソンに参加してみたが、いざ作業にとりかかると、チームで作業する体験やそのやり方、何より楽しさに魅了されたようでした。また、あるチームでは、進めるにあって「失敗してもいいじゃない」という雰囲気が、チームワークを楽しくしていたとのこと。これを「ハッカソン・チャレンジ」と名付けて、どんどん作ってみる、共有してみる。そして、こもりさんやクリスにどんどんアドバイスをもらう、まさにグルービーな制作が実現できたのだと思います。

参加者の中には、プログラミングやコーディングができない人もいましたが、バナーやイメージ画像を制作してデザイン面を担当したり、「全体的な制作のフロー」を検討して、Bootstrapを使うことでどのように工程を短縮できるかを模索する方もいました。そのほか、こもりさんのアドバイスのもと、普段コードを書かない人もBootstrapを試してみるなど、各々の「やるべきこと」が自然発生的に行われていたのは面白かったです。

コーポレイトのデモサイトを速攻構築したあとは、参加者で成果をシェア

作業時間は少し短いかなあと思っていましたが、発表の時間は思った以上にあっという間に訪れました。各チーム、実際に作ったサイトを見せながら、こだわったポイントや感想を発表していきます。

自分達で架空の企業と製品を作り上げたチーム。動画まで作成されていました

実際の店舗にサイトを売りにいくことをテーマとしたチーム。レスポンシブでのサイトロゴの動きにもこだわられていました。

こもりさんからは「まずは体験して便利なところを見極める、そして、自分に使いやすい場面で活用していくのがおすすめ」という総評をいただきました。

正直、今回のイベントが初企画だったので、「Bootstrapがどんなものか分かった！」「今度使ってみよう！」と思ってもらえたらまずは良いかな、なんて考えてましたが、参加者のみなさん、そんな想像は遥かに越えてチャレンジングな試みをされてました。サイトを作ることのハックというより、作るまでの過程をハック？（模索？）している感じがとても印象的で、素直に「すげー！」と感動しました。みなさんの目的意識がすごく高い、ってことですよね。

早くも次回以降のハッカソンが開催してみたくてソワソワしています。新技術にトライするハッカソン、既存技術の熟達を目指すギークなハッカソン、アイデア出しと構築をがっつり行うイベントなど、いろいろアイデアがでてきました。またロフトワークシステムDivを中心に開催できればと思っていますので、これからもよろしくお願いします。

最後に…。今回のハッカソンのために開発したキャラクターもご紹介。クリスをイメージしたクマのキャラクターです。しかし、名前がまだありませんので、募集しています！

❏ イベント概要

Bootstrap code-lab！

http://opencu.com/events/bootstrap-codelab

日　時：2013年5月26日（日）10:00〜19:00
場　所：loftwork Lab 10F（渋谷区・道玄坂）
アドバイザー：こもりまさあき
運　営：loftwork システムDiv.