erimeer当日は豪華な参加特典として1000円分の昼食券と最近話題の完全食が配布されました。みんなで美味しいご飯を食べ、チームワークが一層高まりました。私たちのチームは自由な発想とともに実用性を考慮してサービスを作りました。テーマは「Webと現実をつなげる」です。「AR」かな?と錯覚するテーマですが、違います。具体的には積み木やブロック、看板など普段物理的に目にしているもの、触れるものを簡単にIoT化して、Webの技術を駆使して見える化しよう!ということです。私たちは構想段階で、Legoブロックや、積み木をを想定してアイデアを出していましたが、もっとシンプルで良いんじゃないかということで「看板」に着目しました。この「看板」を主軸として、私たちは自分が目にしているものを直接Web技術につなげてみようという試みを実現しました。Move」をつかった画期的なサービスです。「看板」という誰でも直感的にわかる操作で、その店、席、部屋の状態がリアルタイムでWeb上に反映されるというものです。あ、空いてる!」Bさん「でもネットでしょ??反映までに時間かかってることあるから空いてないかもよ?」このような問題を解決することができます。席が空いているかどうか」をリアルタイムに知ることができるんです。Webで検索することができるので表示する端末はPCやスマホ、はたまたカーナビであろうが関係ありません。ちなみに看板はリスペクトしている「つくってあそぼ」に習って牛乳パックで手作りしました。全体のアーキテクチャは以下の通りです。commonshttps://commons.wikimedia.org/wiki/File:Firebase_Logo.pnghttps://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を使うのはやめて、お手軽実装です。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を業務で使ったことのある経験者たちだったからこそ、スムーズに作りたいものを実現することができたように思います。それが故に作れる物が絞られてしまうという欠点も発見することができました。