LINE Thingsでお年玉を楽しくする

LINE Thingsでお年玉を楽しくする:

この記事は、Tech KAYAC Advent Calendar 2018 の23日目の記事になります。

こんにちは！面白法人カヤックのIoT芸人こと入江(@shinnoske0714)です。

業務ではHTMLファイ部というチームでフロントエンドエンジニアをやっています。

技術の無駄遣いをモットーに日々最新技術を追っています。今回は先日のLINE DEVELOPER DAYで発表されてたLINE Thingsを使って、お年玉をランダムに決めれるおみくじを作りました。

できたもの

まずはこちらをご覧ください。

youtu.be

なんで作ったの？

• 弊社にはサイコロ給という制度があり、親戚にはサイコロで給料が決まると思っている方も多かったから。
• 単純に年功序列で渡していく行為に面白みを感じなかったから。
• 誰に何円あげようって考えるのが単純にめっちゃめんどくさかったから。
• 今年もらえるお年玉の額を見積もるような子どもになって欲しくないから。(自分はそうだった)

そもそもLINE Thingsとは

LINE Thingsとは超簡単に言うと、LINEを介して、BLE対応デバイスにアクセスすることができるプラットフォームです。
また、制御のビューはLIFF(LINE Front-end Framework)というLINE上で動くWEBアプリでできていて、Web Bluetooth APIと同様に、フロントエンドのJavaScriptで開発ができることから今回使ってみようと思いました。

環境設定

WEB側

line-things-starterをフォークする

こちらのレポジトリをフォークしましょう。

https://github.com/line/line-things-starter
liff-app以下のファイルがLIFFのコードになります。js, css, htmlなどおなじみの拡張子で構成されています。

ホスティングする

WEBアプリなので、外部からアクセスできるようにする必要があります。今回はforkしたrepositoryをそのままnetlifyでホスティングしました。
できたサイトがこちらになりますhttps://compassionate-fermat-f925fc.netlify.com/

注) LINE Things経由でアクセスしないと、認証されません。

LINE側

LINE Botをつくる(Botと自分の端末で友達になるのを忘れずに)

割愛します。

下の記事を参考にしてください。
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

Botを作ったら、忘れずに自分のLINEアカウントで友達になっておきましょう。 (僕はこれでLINE Thingsに繋がらなくて詰まってました。)

こちらのアクセストークンを控えておいてください。

LIFFアプリをつくる

curlを叩く or 追加画面で作成します。公式がcurlだったのでそちらに準じました。

curl -X POST https://api.line.me/liff/v1/apps \ 
 -H "Authorization: Bearer {channel access token}" \ 
 -H "Content-Type: application/json" \ 
 -d '{ 
  "view":{ 
    "type":"{view size}", 
    "url":"{LIFF APP URL}" 
  }, 
  "description" : "{LIFF APP name}", 
  "features" : { 
    "ble": "true" 
  } 
}'

• channel access token : 先ほどのアクセストークン
• view size : Full, Tall, Compactの中から選べます。(どれでもいいかと)
• LIFF APP URL : ホスティングしたURLを指定します。
• LIFF APP name : 名前は適当に決めてあげましょう。

レスポンスで {"liffId":"1234abcd-xxxxxxx"} みたいなのが帰ってくると同時に、LIFFのタブに追加されていると思います。どうやらline://app/hogehoge のhogehogeの部分がliffidに当たるみたいですね。

トライアルプロダクトをつくる

curlを叩きます。

curl -X POST https://api.line.me/things/v1/trial/products \ 
-H 'Authorization: Bearer {channel access token}' \ 
-H 'Content-Type:application/json' \ 
-d '{ 
  "name": "{trial product name}", 
  "liffId": "{LIFF APP ID}" 
}'

• channel access token : 先ほどのアクセストークン(２回目)
• trial product name : 名前は適当に決めてあげましょう。(２回目)
• LIFF APP ID : 先ほどレスポンスで帰って来た値を入れましょう

レスポンスで返ってきた、serviceUuidをLIFFアプリ, デバイスのUSER_SERVICE_UUIDに代入します。

電子工作

構成されたパーツは、以下になります。シンプルですね。

• ESP32-DevKitC
• タクトスイッチ
• 抵抗10kΩ

接続

これで事前の環境設定は完了したのでLINE Thingsに繋いでみましょう。

https://github.com/line/line-things-starterこちらのREADME.mdの下方にLINE Thingsを有効化 兼 一覧画面に遷移するので読み込みましょう。

写真のようにデバイスとBluetooth接続していきます。

するとこのような画面になり、ボタンを押すと、Click Countが増加していきます。
これで準備完了です。

つくる

実装

LIFF(WEBアプリ)

おみくじのロジックはめっちゃ単純で、報酬額の配列があって、そこからランダムに1つ選ぶってだけです。

Vue CLIで開発したいなと思い、早速環境作ってみましたが、Line Thing上だとうまく動かなかったので、しぶしぶline-things-starterをちょこちょこいじる感じに実装していきました。lodashやTweenMaxなどのライブラリは全てCDNで読み込んでます。あとあとになって気づいたのですが、LINE ThingsでLIFFアプリを開かないと表示確認ができないため、デバッグがかなり辛かったです。console.logの代わりにalertを使いまくりました。後々今時のフロントエンド環境にしたい。

お世辞にもいいコードとは言い難いですが、一応貼っておきます。何かの参考にしてください。

github.com

ESP32

line-things-starterのsample.inoにもともスイッチの入力プログラムが入ってたので、ほぼ触ってません。ピン番号を変更したくらい。

モデリング

おみくじをモデリングします。

安定のFusion 360を使いました。
カバーと蓋の2パーツでできてます。

3Dプリント

AFINIA H400で出力しました。

出力後100円ショップで買った壁に貼る木目調のシールとマスキングテープを貼りました。

できたのがこちら(ボタン部分の穴を適当に作ってしまったので、若干歪んでますが。。。)

まとめ

いかがでしたか。

LINE Thingsは前述したようにデバッグしにくい部分やUUIDを変更するとOS側で前のキャッシュが残り続けて発見できなくなる現象みたいなのがちらほらありますが、フロントエンドの知識があれば簡単に実装できるので便利だなという印象でした。

あと、作ってから気づいたのですが、これおみくじ引くんじゃなくて押してますね。まぁたまには押すことも必要でしょう。

明日クリスマスイブは面白法人カヤックのテック芸人ことpontaroくんがUnityでなんかやってくれるそうです。芸人コンボ。乞うご期待！！！

ありがとうございました〜〜〜

参考

https://engineering.linecorp.com/ja/blog/line-things-developer-trial/
https://qiita.com/n0bisuke/items/0c09ae5da43b551e98b1
https://www.youtube.com/watch?v=RHHSoUyAOyE

オリジナルのエンクロージャ:

20181222110331.jpg