LINE Things Mini Award ハッカソンでLINE賞貰ったことと振り返り #lambda

イベント

以下のイベントへの参加記録になります

参加のきっかけ

以前 AngelHack というハッカソンを初めて参加したときに一緒にチーム組めてその後も交流できている古澤さんの紹介のおかげです。

目的

基本的に LINEの API を勉強したかった、LINE Bot 作ってみたかったのが目的です。

普段の仕事

普段はサーバサイドで Go/gRPC/Kubernetes を利用して、社内 API の開発をしています。
平日は会社がコアタイム 10:00 - 15:00 なため、去年末ぐらいから色々な勉強会に参加して勉強して知識を広げようとしていますが、週末のイベントとかはハードルが一段高い感じです。
ちなみに今月の connpass はこんな感じです。

自己紹介の時間

絵で最近刺激的だったことを書く項目でした (wow になったこと）
- 絵は書いたことないので一瞬戸惑いましたが、以前 Google Cloud Next のイベントのパーティーで Google の社員の方々がバンドで演奏してたのが印象的だったのでこういうの書きましたｗ

アイデア提出

困っている、気になっていることとそれの対策の一覧を全員で共有しあって、興味あるところにチームか個別で参加していくスタイル（書いた内容に限定される訳ではない）。私は初めてだったので凄く良いと思っていますが、これはハッカソン、アイデアソンとしては普通かもしれません。
最初実際自分の方からでたアイデアは以下でした。
- 複数の宅配会社の再配達に困っているので、何か作りたい
- 投資で情報が見逃したりするので、自分用にカスタマイズされた投資情報を届けるサービス
- 家に帰るときとか、LINEで同じメッセージを送ったりするので、定型文を送るようにしたい
- 水分と食事の栄養なんりしていて必要に応じてアラート通知してくれるサービス
- レジサービスと通知
その時にまだチームになっていなかったですが、同じテーブルにいた(のちチームパートナーになる）阿部さんのいくつかをアイデアに興味ありました。
- 積み本とか本棚の管理
- コインランドリーに出したかどうか、忘れたりするので管理と通知する的な内容

チームメンバー探し

自分は初体験だったので、あまり他の方に負担かけたくなかったので、積極的に参加したいと言って別のチームに入る込むことはしかなった。
ただ本棚は興味あったので、被っててもいいから何か作ろうと思いました。
- 自分の方でやりたいと思ったのは以下の内容です。
  - 積み本の管理
    - バーコードで入力または手入力
    - どのぐらい読んだかの進捗を管理
    - 総資産の表示、読んでない分の価格をマイナスで表示
    - 話題の本を読むように通知（ランキング形式で届ける）
    - 持ってる本の感想とか概要を、一冊かまたは設定分毎朝ランダムで届ける
    - 読んで見ようか思ったときに、スケジュール表との連携とか
その時、阿部さんは他のチームの探しから戻ってきてました。
- 話してみたら、本棚関係のアイデアでもやりたいことだったので、「ブックシェルフ」という名前を何かを作ろうということで話詰めました。

実際初めてみてわかったこと

本単位ではデバイス置くのは難しい
本を読むこむのに、バーコード読み込むデバイスは会場にはあまりなかった
本屋さんなら各段にデバイス置くとか、各ジャンルに置くとかのアイデアはあった
（あとで、別のチームの方が本の重さとか、本棚に置いて傾き度などで判定するアイデアがあったのでなるほどねと思いました。）
そのあと少し本周りで何できるか考えましがが、本にこだわる必要もないことが分かりました。

実際作ろうとしたアイデア

普通小規模なお店とかは今流行りのモバイル決済などの導入が難しい、分かりづらいという問題があります。
そこで店側じゃなくて、ユーザ側にそのシステムを提供するのはどうかというアイデアです。実際これでビジネスをして行きたいと本気で思ってます。
あと、今回の LINE Things の良いところは、特に追加アプリとかのダウンロードも必要なく、友達登録して、デバイス登録して直ぐ使えるサービスです。

作り始める

まずは各デバイスの検証

M5Stick-Cの検証

Arduino とかは３０分ほどで導入
- ソースコードとサンプルの探し - https://github.com/line/line-things-starter/tree/master/m5stick-c/arduino
- ドライバーインストール - https://github.com/line/line-things-starter/tree/master/m5stick-c
- ライブラリーのインストール
- Board の設定 (後からとったスクショです）
- Upload (firmware の焼く作業）ができました。
- BlueTooth接続とかで、２時間ぐらい使いましたが、持っている端末デバイスが出てこないとかの技術的な問題と力不足で、LINE Things dev board を選択することになりました。
  - なんか Android は古い場合繋がらない問題とかがあるそうでしたの仕方なく、今回は使用しないことにしました。
  - 別のチームがうまく使っていたので、自分の力不足かと思います。
お互い Windows 扱いと Mac 扱いだったのですが、特に不便なことはなかった。
後、AWS と GCP、普通に REST API で一切トラブルなく連携出来ました。
- AWS Lambda ちょっと触って見たんですが、API Gateway とかもあまり覚えていなく、AWS側は任せることにしました。

LINE Things dev board の検証

サンプルコード探し
LINE Things dev board はデフォルトで以下のようなLIFFアプリケーションの画面を出すことができます。（画像はハンズオンから）
- BlueToothの電波状態、接続・接続解除
- LED操作
- ボタン操作の通知有効・無効
- 後その画面でUUIDまで書き換えられちゃいます。
- ハンズオンでは LIFF アプリからメッセージ送って OLEDディスプレイで表示するというのもあります。
ハンズオン https://qiita.com/cpulabs/items/3a37a70cfa41129cb024
Arduino とLIFFのアプリケーションのソースコードはこちらにあります https://github.com/line/line-things-dev-board
- M5Stick-C はデフォルトでFactoryTestというアプリが組み込まれているので、LineThingsから接続する場合は Firmware の書き換えが必要です。
- サンプルは他にもあります https://qiita.com/h-takauma/items/b9cdc48259879a37b6b2
- 他にも FlappyBird アプリとかもあります。 (Arduino のサンプルの一覧のらインストールできます）激ムズゲームです。

タイトル

タイトル決めたタイミングはあまり覚えていないですが、最終的に「LINE_Thingsでオーダーエントリーシステムをつくってみた」というタイトルになりました

技術選定

別のハッカソンで Ruby 使って Docker ビルドで時間めちゃ潰されたの思い出してたので、今回は nodejs で書くことにしました。
後、サンプルは GitHub パージとかでもホスティングできるのですが、キャッシュの問題でハマりたくないので、再開動作確認してから、Google Cloud の AppEngine にしました。
一緒にしていた型は AWS で開発されていたらしいので、GCP ↔ AWS で役割分担して、REST APIでやり取りすることにしました。
LIFFはウェブアプリとして開発できるため、ウェブのフレームワークを使用することにしました。
デフォルトで入っているアプリは Bootstrap 使っていたのですが、ガリガリに querySelector で DOM 操作してたので、少し手慣れている Vuejs を使おうと思いました。bluma/buefy は使いたかったですが力不足なため vuetifyjs にしました。
実際作ってみて LIFF アプリケションのビルド 10秒ぐらい、デプロイ３０秒ぐらいだったので技術として良かったと思っています。

画面の選定

注文する画面
決済画面
店員を呼び出すボタン
デバイス一覧の画面と作ることに決めました。

終わった後の画面ですが、画面はこんな感じでした

1日目途中までしかできなかったんですが、帰ってやることにしました。

やっぱり今回も夜眠れなかった。

以前の AngelHack は土日夜も通してやるハッカソンだったんですが、今回は一旦土曜夕方に解散しているので普通に眠れると思ったら、大間違いでした。
普通に家帰ってお風呂、食事などしたら夜１２時ぐらいになりました。そこからの開発再スタートです
VueJS / Vuetifyjs 意外とまだ分かっていないことが多いことが分かったので時間多少取られてました。
expressjs の bodyparser の挙動が変わっていたの知らなかったため、３０分ほど時間使いました。
メニューだけで朝までなりました。最終的な画面はこんな感じです。（サイゼリアのメニューですが、画像も欲しかった）

LINE Pay も出来そうなという連絡きました

パートナーの方から API のリクエスト、レスポンスの設計とLINE Pay も出来るという連絡が夜中にいただきました。
LINE Notify とかも組み込んでもらっているので、普通に最高です！

二日目

眠いのもあってテンション低く、自分は普通に遅刻しました
後、夜色々雑食食べたのですが、朝ごはん食べるの忘れてました。（普通にダメなパターン）
BlueToothのペアリングで格闘してましたが、なかなか難しかった。

決済画面も作ってくれるということに

デバイスで格闘してたら時間たってしまったので、決済画面を作ってくれることになりました。
- 本人は VueJs 一切知らないらしいですが、30分で完全理解した感じでした。流石です。
その後、LIFF の画面のサーバ側 AppEngine からユーザの決済リクエストを受けて、AWS の Line Pay 連携しているサーバーに送って、LINE Pay で決済完了したら、LIFF画面にリダレクトするという実装をしました。1時間かからない程度
Payment 完了ページ
注文完了ページを作成

発表

手応えはあったんですが、インパクトはあまりなかったので、賞はもらえないと思ってました。
コミュニティー賞は確か３番目ぐらいだった。なのでレベルはそのぐらいです。

LINE 賞を頂きました

Line Things dev board
M5Stick-C

これからも開発を進めていきたいと思います

弁当は美味しかった

基本的に勉強会とかイベントの食事出たりしますが、あまり期待していなかったですが、今回は美味しくいただきました！

懇親会

前日に別のイベントで同じ物を食べたのですが、今回は色々交流できてとてもよかったです。

追記

後日になりましたが M5Stick-C と LINE Things dev board で色々試しています。
Wifi 接続のサンプルでシリアルポートに接続できることと Wifi 接続もできることを知ってちょっと感動しました。

Connecting to PRIVATE001
\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 0 - WIFI_READY
\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 2 - STA_START
.............\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 5 - STA_DISCONNECTED
\[W\][WiFiGeneric.cpp:351] _eventCallback(): Reason: 2 - AUTH_EXPIRE
\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 0 - WIFI_READY
\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 2 - STA_START
\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 2 - STA_START
.\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 4 - STA_CONNECTED
..\[D\][WiFiGeneric.cpp:336] _eventCallback(): Event: 7 - STA_GOT_IP
\[D\][WiFiGeneric.cpp:379] _eventCallback(): STA IP: 192.168.x.x, MASK: 255.255.x.x, GW: 192.168.x.x
.
WiFi connected
IP address:
192.168.x.x

今後の課題

実際完成した商品にしたい
- DBなどを利用して
- 店側の管理画面と確認画面など
- 注文してまだきてないものの確認
- LIFFとEndpointの間の通信の暗号化（出来れば
- デバイス連携をちゃんとしたい
- できなかった店員呼び出しボタン
LINE Things Mini Award への準備