乐胖代购免代理版

この記事は、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に繋がらなくて詰まってました。)

f:id:kiyoshidainagon:20181222104052p:plain

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

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に当たるみたいですね。

f:id:kiyoshidainagon:20181222104126p:plain

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

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に代入します。

電子工作

f:id:kiyoshidainagon:20181222102407p:plain

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

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

接続

これで事前の環境設定は完了したのでLINE Thingsに繋いでみましょう。 f:id:kiyoshidainagon:20181222101602p:plain

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

f:id:kiyoshidainagon:20181222101828p:plain

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

f:id:kiyoshidainagon:20181222101943p:plain:w150

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

つくる

実装

LIFF(WEBアプリ)

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

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

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

github.com