NEWSニュース

2020.01.10

TECH BLOG

新卒1年目だけで「HACK DAY 2019」に参加してみた話

CAMフロントエンジニアのdaikiです!前回の藤本くんに続き、「HACKDAY2019」のレポート第2弾です!

前回の記事:日本最大級のハッカソン「HACK DAY 2019」に新卒だけで出場してみた話

 

チームメンバー紹介 :チーム名「akira100」

フロントエンド daikikidoyunanonoakij ,  バックエンド ishikawa-pro ,  デザイナー erimeer

 

当日は豪華な参加特典として1000円分の昼食券と最近話題の完全食が配布されました。みんなで美味しいご飯を食べ、チームワークが一層高まりました。開発中は完全食をパクパク食べて開発速度MAXだー!

チームのみんなもパクパク食べて、栄養補給をしながら開発に勤しんでいました!

 

サービス紹介


私たちのチームは自由な発想とともに実用性を考慮してサービスを作りました。

テーマは「Webと現実をつなげる」です。一見「AR」かな?と錯覚するテーマですが、違います。

具体的には積み木やブロック、看板など普段物理的に目にしているもの、触れるものを簡単にIoT化して、Webの技術を駆使して見える化しよう!ということです。私たちは構想段階で、Legoブロックや、積み木をを想定してアイデアを出していましたが、もっとシンプルで良いんじゃないかということで「看板」に着目しました。

 

この「看板」を主軸として、私たちは自分が目にしているものを直接Web技術につなげてみようという試みを実現しました。

その名も「Suitter すいったー」です。

すいったーはSonyの「メッシュ Move」をつかった画期的なサービスです。

MESH-100AC 動き(Move)ブロック – 動きがきっかけになる新しい感覚 ワイヤレス加速度センサー | ソニー 

「看板」という誰でも直感的にわかる操作で、その店、席、部屋の状態がリアルタイムでWeb上に反映されるというものです。

 

(例)

Aさん「あの店席(部屋)空いてるかな?? あ、空いてる!」

Bさん「でもネットでしょ??反映までに時間かかってることあるから空いてないかもよ?」

 

このような問題を解決することができます。

ユーザーは「”今” 席が空いているかどうか」をリアルタイムに知ることができるんです。しかもWebで検索することができるので表示する端末はPCやスマホ、はたまたカーナビであろうが関係ありません。

ちなみに看板はリスペクトしている「つくってあそぼ」に習って牛乳パックで手作りしました。

 

支える技術


全体のアーキテクチャは以下の通りです。

画像引用 出典先:

Wikipedia

https://ja.m.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Polymer_Project_logo.png

https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:IFTTT_Logo.svg

wikimedia commons

https://commons.wikimedia.org/wiki/File:Firebase_Logo.png
https://commons.wikimedia.org/wiki/File:Google-Cloud-Functions.svg

 

シンプルすぎてほとんどコードは書きません。

フロントエンドはPolymerProjectの一つであるLit-Elementを使用しています。Lit-ElementはWeb-components技術を内包したライブラリで、手軽にWeb-componentsを使ってサービスを開発することができます。

 

採用した理由としては、コンポーネント思考でサービスを作りたかったことと、BEM記法によるCSSクラスの命名記述は開発コストが高いと判断したからです。Web-componentsならコンポーネントごとにCSSスコープが存在するので命名衝突に困ることはありません。

コンポーネント思考にすることで、メンバーそれぞれがサービスの一部品を作っていき、最後に組み合わせて作り上げるという分業がスムーズにできました。

また、状態管理をする規模ではなかったため、状態管理はしていません。vaadin-routerを使用してクライアント側でルーティングを実装し、SPAチックに実装しています。

バンドルツールにはrollupを採用しました。Lit-ElementはCSSをCSS-in-JSのように書くのでjsバンドルのみでいいため、いつものwebpackを使うのはやめて、お手軽実装です。(parcelでもよかったかも)

フロントエンド はほぼLit-Element一つで構成しました。

作成した画面はこんな感じです。

空いているかどうかの状態管理は後述のFirebaseで管理するため、フロント側は各店の状態をjsonデータでGetし、Lit-Elementのライフサイクルに当てるだけです。

このくらいの規模ならフレームワークはいりませんね、Lit-Elementのみで十分です。

 

また今回はバックエンドにFirebaseを採用しているため、バックエンドはコードを書かずに実装しました。そのため、フロントエンド の一番時間のかかるCSSに集中することができました。バックエンドに関するコードは全てフロントエンド側に書いてあり、通常の関数を叩くように数行のコードで実装できました。やはりFirebaseはハッカソンにて最強なのではと錯覚できました。

コンポーネントに取得してきたデータを反映させるコード

しかし当日になってリアルタイムリッスンをする方法を学んだので、少し時間がかかってしまいました。次回挑戦する機会があれば、準備段階でつなぎこみまでやりたかったです。

実際にFirebaseと通信しているコード

またCSSはkidoyuna、nonoakijの二人が頑張りました!erimeerの素敵なデザインを忠実に再現できたと思います。しかも、CSSプリプロセッサはPostCSSのimportしか使っておらず、ほとんど素のCSSで書きました。

ハッカソンでWebサービスを開発すると、どうしてもCSSに時間が取られてしまうので、次回挑戦するときはCSSを早く組み込める工夫が必要であることを学びました。

 

(例)

・toolsやhelperなどCSSの汎用的な雛形を予め作っておく

・BootStrap、TailWindなどのCSSフレームワークを使う

 

バックエンドは順調で、ものの数時間で作業を終わらせて余裕があったバックエンド担当のishikawa-proは今でも印象的です。

こちらも次回はバックエンド以外にハードウェアを作成できるようにしたいなという次第です!(ishikawa-proが)

 

まとめ


今回のハッカソンで、ハッカソンはアイデアソンだが普段から身につけている技術を成果として発表する場であることを学びました。私は前回もハッカソンに参加しているのですが、技術力のなさが故になかなか思い通りの物が作れず、ヤキモキすることがありました。

今回のハッカソンは今まで培ってきた技術を中心に「自分たちのやれる範囲で作りたいものを模索し作る」を意識して開発に取り組みました。その結果、非常にバランスの良い物ができたので満足しています。

フロントエンド はチーム全員がLit-Elementを業務で使ったことのある経験者たちだったからこそ、スムーズに作りたいものを実現することができたように思います。しかしそれが故に作れる物が絞られてしまうという欠点も発見することができました。

使える技術、技術力の高さが作れる物の範囲を広げてくれることを学んだので、次のハッカソンでさらに良い成績が取れるように、日々技術力の向上に努めようと思います!