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