LINE Simple Beacon × Micro:bit ハンズオン / LINE Simple Beacon Microbit Hands on

2019年の忘年会企画で実施したLINE Simple Beacon × Micro:bit ハンズオン資料をUP

忘年会わいわいハンズオン♪ 〜micro:bit x LINE Beacon & Botの巻き〜
https://linedevkyushu.connpass.com/event/157340/

Transcript

1. 【祝】LINE Developer Group Kyushu 初開催☆ 忘年会わいわいハンズオン♪ 〜micro:bit x LINE Beacon & Botの巻き〜 1 Dec 20th, 2019 -- LDGQ 忘年会わいわいハンズオン ♪@エンジニアカフェ
2. 作るもの お得意様が来店した時に名前を教えてくれる（心の準備も）LINE Beaconを活用した サービスを作ってみましょう。 2 ◯◯様が ご来店しまし た。
3. 環境 • Node.js v12.13.1 • bot-sdk v6.8.3 • Mac／Linux／Windows／AWS Cloud9 • Visual Studio Code • micro:bit • Microsoft MakeCode 3
4. 4 本日行っていただく手順は下記です。 • 事前準備(LINE Bot作成) • micro:bit をLINE Beacon 化 • 動作確認
5. まず事前準備(LINE Bot作成)。 5
6. ngrokでホスティングせずに疎通確認 ngrokというトンネリングツールを使ってローカル環境だけで動作確認が出来るようにしま しょう。 参考: https://ngrok.com/ 6
7. 下記のようにコマンドをうち、ngrokを起動させましょう。 ngrokでホスティングせずに疎通確認 $ npm i -g ngrok $ ngrok http 3000 7
8. ngrokでホスティングせずに疎通確認 Forwarding https://xxxxxxx.ngrok.io -> localhost:3000 といった項目が表示されます。このhttps://xxxxxxx.ngrok.ioをコピーして、 メモしておきましょう。( ..)φ 8
9. 次にMessaging APIのチャネルを 作成していきましょう。 9
10. Messaging APIのチャネル作成 https://developers.line.me/ja/services/messaging-api/にアクセス。 「今すぐはじめよう」のボタンを押して進めていきましょう。 10
11. Messaging APIのチャネル作成 「LINEアカウントでログイン」を押してください。 11
12. Messaging APIのチャネル作成 LINEのログインを求められるのでログインしてください。 12
13. Messaging APIのチャネル作成 既にプロバイダーを作っている場合 → 利用するプロバイダーを選択しましょう。 13
14. Messaging APIのチャネル作成 初めて → 新規プロバイダー作成を選択しプロバイダー名を入力しましょう。 　　　　① 　　　　　② 14
15. Messaging APIのチャネル作成 チャネルアイコン画像を登録しましょう。（今回は必須ではありません） 15
16. Messaging APIのチャネル作成 チャネル名：「トラベルカンパニー管理者Bot」、チャネル説明：「お得意様がご来店時に 顧客情報を取得します。」を入力しましょう。 16
17. Messaging APIのチャネル作成 大業種と小業種を選択しましょう。 17
18. Messaging APIのチャネル作成 連絡可能なメールアドレスを入力しましょう。 18
19. Messaging APIのチャネル作成 下記２点の利用規約にチェックをして「作成」ボタンを押しましょう。 19
20. Messaging APIのチャネル作成 情報利用に関する同意について、「同意する」を押しましょう。 20
21. Messaging APIのチャネルが作成できましたね。 Messaging APIの設定をしていきましょう。 21
22. Messaging APIの設定 下スクロールすると、登録した内容を確認できます。必要な情報を見ていきましょう。 22
23. Messaging APIの設定 「チャネルシークレット」と「あなたのユーザーID」はメモしておきましょう。 ( ..)φ 23
24. Messaging APIの設定 Messaging API設定タブに移動し、QRコードで友だち追加をしましょう。 24
25. Messaging APIの設定 応答メッセージを利用しないので、「編集」から変更しましょう。 25
26. Messaging APIの設定 LINE公式アカウントの画面が開きます。応答メッセージを「オフ」に変更します。変更した 設定は自動で保存されます。 26
27. Messaging APIの設定 ①Webhookを利用するので、「オン」に変更します。 ②Webhook URLを設定するので、「Messaging API設定」ボタンを押してください。 27 ① ②
28. Messaging APIの設定 Webhook URLに、ngrok実行時にメモしたURL「https://xxxxxxx.ngrok.io/webhook」を入 力して「保存」ボタンを押しましょう。 28
29. Messaging APIの設定 設定画面に戻り、ブラウザを更新して、設定した値（Webhook URL・Webhookの利用、応 答メッセージ）を確認します。 29
30. Messaging APIの設定 メッセージ送受信設定のアクセストークンを再発行しましょう。これも後で使うのでメモし ておきましょう。( ..)φ 30
31. Messaging APIの設定ができましたね。 次はLINE BOTを動かす準備 をしていきましょう。 31
32. ソースコードをダウンロード ソースコードをgithubからダウンロードしましょう。 https://github.com/mochan-tk/linebeacon-travelcompany-handson 32
33. ソースコードをダウンロード ダウンロードフォルダを解凍しましょう。そしてワークフォルダ 「work-linebeacon-handson」を作成し、解凍したフォルダを移動しましょう。 33
34. 開発環境 • 準備 ngrokが起動するターミナルとは別のターミナルを開いてください。 まずNodejsのバージョンを確認しましょう。 $ node -v v12.13.1 34
35. 開発環境 • 準備 以下のコマンドで進めていきます。 ## linebeacon-travelcompany-handson-masterフォルダに移動 $ cd ~/work-linebeacon-handson/linebeacon-travelcompany-handson-master ## 必要なモジュールのダウンロードコマンドを実行 $ npm i 35
36. ファイルの設定 CHANNEL_SECRET="YOUR_CHANNEL_SECRET" CHANNEL_ACCESS_TOKEN="YOUR_CHANNEL_ACCESS_TOKEN" USER_ID="YOUR_USER_ID" .envファイルの「CHANNEL_SECRET」、「CHANNEL_ACCESSTOKEN」、 「USER_ID」に先ほどメモした「チャネルシークレット」、「チャネルアクセス トークン」、「ユーザーID」を入力して保存しましょう。 36
37. ファイルの設定 {"person":[ { "id": "xxx", "name": "◯◯", "lank": "S" }, { "id": "xxx", "name": "△△", "lank": "S" } ] } data.jsonの赤枠の「id」に「ユーザーID」、「name」に自分の名前を入力して保存しましょう。 37
38. 起動 • 起動 下記コマンドを実行しましょう。 行しましょう。 エラーがなければOKです。 $ node index.js 38
39. それでは、LINE Botの動作確認をしていきましょう！ 39
40. 動作確認 40 何かメッセージを入力して、返事が返ってくるか確認しましょう。返ってきたURLをタップ して、「同意して利用開始」を押してLINE Beaconの設定を有効にしましょう。
41. いよいよここからBeaconの設定をしていきましょう！ まずはLINE Simple BeaconのハードウェアIDを 発行していきます。 41
42. https://manager.line.biz/beacon/registerにアクセス。 「LINE Simple BeaconのハードウェアIDを発行」を選択します。 ハードウェアIDを発行 42
43. 先ほど作成したチャネルの選択ボタンを押します。 ハードウェアIDの発行 43
44. ハードウェアIDを発行を押します。 ハードウェアIDの発行 44
45. 表示されたハードウェアIDをメモしましょう。( ..)φ ハードウェアIDの発行 45
46. 次はmicro:bitをLINE Beacon化していきましょう。 46
47. https://makecode.microbit.org/v0にアクセス。「高度なブロック」を押してください。 micro:bitをLINE Beacon化 47
48. micro:bitをLINE Beacon化 48 「パッケージを追加する」を押してください。
49. micro:bitをLINE Beacon化 49 「https://github.com/pizayanz/pxt-linebeacon」を入力し、虫眼鏡ボタンを押すと、 「linebeacon」が表示されるので、クリックします。
50. micro:bitをLINE Beacon化 50 無線とBluetoothの両方は使えないので、 「元のパッケージを削除して「linebeacon」を追加する」ボタンを押します。
51. micro:bitをLINE Beacon化 51 メニューから「無線」が消え、「Line Beacon」と「Bluetooth」が表示されています。
52. 52 下記の手順でプログラミングしていきます。 • 起動時 • Beacon ON時 • Beacon OFF時
53. micro:bitをLINE Beacon化 53 まず、起動時の動作を下記のようにプログラミングします。「基本メニュー」から「アイコン を表示」を、「最初だけ」のブロックの中にドラッグ&ドロップします。
54. micro:bitをLINE Beacon化 54 次にBeacon ON時の動作を下記のようにプログラミングします。「入力メニュー」から、 「ボタン（A）が押された時」をドラッグ&ドロップします。
55. micro:bitをLINE Beacon化 55 そして先ほどのブロックの中に「LINE Beacon」メニューから「LINE Beacon start」をド ラッグ&ドロップします。
56. micro:bitをLINE Beacon化 56 その下に「基本メニュー」から「アイコンを表示」をドラッグ&ドロップします。アイコンを チェックに変更します。
57. micro:bitをLINE Beacon化 57 最後にBeacon OFF時の動作を下記のようにプログラミングします。「入力メニュー」か ら、「ボタン（A）が押された時」をドラッグ&ドロップします。そして、「A」を「B」に変更しま す。
58. micro:bitをLINE Beacon化 58 そして先ほどのブロックの中に「LINE Beacon」メニューから「LINE Beacon stop」をド ラッグ&ドロップします。
59. micro:bitをLINE Beacon化 59 その下に「基本メニュー」から「アイコンを表示」をドラッグ&ドロップします。アイコンをバツ に変更します。
60. micro:bitをLINE Beacon化 60 「LINE Beacon start」にメモしたハードウェアIDを書き換えます。
61. micro:bitをLINE Beacon化 61 題名に「linebeacon」と名前をつけて、「ダウンロード」を押します。 　　 ① ②
62. ダウンロード中に下記画面が表示されますが、ダウンロードが終われば自然と消えます ので何もしなくて大丈夫です。 micro:bitをLINE Beacon化 62
63. micro:bitをLINE Beacon化 63 「microbit-linebeacon.hex」がダウンロードフォルダーに保存されます。 micro:bit をPCに接続し、(Mac)デバイス／(Windows)ドライブ「MICROBIT」フォルダー に、先ほどダウンロードしたファイルを書き込みをします。 ① ②
64. それでは、LINE Beaconの確認をしていきましょう！ 64
65. 動作確認 65 まず、実機のmicro:bitのLEDにハートマークが表示されます。
66. 動作確認 66 次に、Aボタンを押すと、チェックマークが表示され、BOTにメッセージが送られてきます。※ ただしuserIdと名前を紐づけるシステムは別途必要です （LINE Beaconのオンオフを繰り返すたびBOTにメッセージが送られてきます。）
67. 動作確認 67 そしてBボタンを押すと、バツマークが表示されます。BOTにメッセージは送られません。 （もちろん、LINE Beaconのオンオフを繰り返してもBOTにメッセージは送られません。）
68. お疲れ様でした！ 68
69. LINE Beaconを使う際の各種設定 69
70. LINE Beaconの設定 70 LINE Beaconを利用するには下記を行う必要があります。 1. BluetoothをON 2. 位置情報をON 3. LINE BeaconをON 下記ページで手順を説明します。 参考URL http://snswalker.com/line-beacon/ https://ahiru8usagi.hatenablog.com/entry/LINEbeacon_ON https://appllio.com/line-beacon
71. LINE Beaconの設定 71 LINE Beacon をオンにしましょう。「設定ボタン」→「プライバシー管理」の順にタップして いきます。作りましょう。
72. LINE Beaconの設定 72 次に下スクロールして「情報の提供」をタップして「LINE Beacon」にチェックを付けます。
73. LINE API Document 73
74. LINE API Document 74 • https://developers.line.biz/ja/docs/messaging-api/using-beacons/