micro:bitでLINE Thingsハンズオン #linethings #linedc #gwアドベントカレンダー


> [LINE Developer Community GWアドベントカレンダーの3日目](https://gw-advent.9wick.com/calendars/18)です。 -> https://linedevelopercommunity.connpass.com/

4月上旬にmicro:bit x LINE Thingsのハンズオンをやったんですけど、そのとき発生したトラブルの解決方法などを追記できたので記事を公開したいと思います。

## この資料について

この資料は[LINE Things触ってみようハンズオン](https://linedevelopercommunity.connpass.com/event/124842)のハンズオン内容になります。

> connpassに書いてますが、PCに[Arduino IDEのインストール](https://www.arduino.cc/en/Main/Software)してありますよね？してない人は前で話してる裏でコソッと入れてください！割と時間かかる場合があります。

あと、僕が試すことができなかったので、Windowsの人は今日は苦しい戦いになるかも... 

## 自己紹介

* のびすけ
	* LINE API Expert
* [IoT縛りの勉強会 IoTLT](https://iotlt.connpass.com/event/126701/)の主催
* 日本初のプロトタイピング専門スクール「[ProtoOut Studio](https://protoout.studio/)」
	* [プログラミング学習はもう古い。「令和」時代のイノベーションを担う日本初のプロトタイピング専門スクールを開校](https://prtimes.jp/main/html/rd/p/000000005.000020328.html)
	* [「プログラミング学習はもう古い」って言ってしまった件について](https://note.mu/n0bisuke/n/n214f041ee558)
		* <img src="https://i.gyazo.com/0ac9eb72bf77e559dc696880928040b5.png" width="300px">
		* 今日リリースした記事がはてブのホットエントリ乗って嬉しい。
		* 1期制募集中です！

## 今日やる内容

* LINE Thingsの概要紹介
* ハンズオン: LINE Things Starterのmicro:bit動作をみんなで試してみよう
* 時間が余ったら各自もくもく会

## LINE Thingsの概要

簡単にいうと、 **LINEから外部のBluetoothデバイスにアクセス出来るようになるAPI**です。

* [さっそくLINE Thingsを触ってみた（ESP32でリモートLチカ） #linedevday](https://qiita.com/n0bisuke/items/b0541a32f01007f938a4)
* [たぶん最速！LINE Things ハンズオン in Node学園祭2018 #nodefest](https://qiita.com/n0bisuke/items/ca6432154a590d0d4daf)

> <img src="https://i.gyazo.com/5dfa4b35ba813d5ce3e7a04f1e703e1c.png" width="400px">
> [ここ1週間 LINE Thingsで5つのデバイス 触ってみたのでまとめてみる ](https://speakerdeck.com/n0bisuke/koko1zhou-jian-line-thingsde5tufalsedebaisu-hong-tutemitafalsedematometemiru-number-iotlt-number-linethings)

* 活用例
	* [LINE Thingsで作った勤怠管理システムを解説してみる #linethings](https://qiita.com/n0bisuke/items/98ba8b0cb8b843c7cc38)
	* [LINE Things を使って Bluetooth LE でつながる電子工作をしてみた作品例まとめ](https://qiita.com/hktechno/items/083bb19ea61d1a067c48)

## 今日のハンズオンのゴール

[LINE Things Starter for BBC micro:bit](https://github.com/line/line-things-starter/tree/master/microbit)を試してみます。

> ![](https://i.gyazo.com/ba3a738b270d2d68e31e6224420220b6.jpg)
> https://www.instagram.com/p/BvRuBsxDnrD/

* 本来はLINE BOT側も作成してアプリケーションを作成しますが、LINE Things Starterを使うことでLINE BOT側の実装を省略できます。
* ESP32系やnRF52で試したりもしましたが、感覚的にmicro:bitが一番難しかったです。
	* Arduino IDEへのプラグイン追加的な手順が結構わかりにくいです。
	* 僕は一回やって挫折しました。
	* こういうのこそハンズオンでやるのがいいと思う笑

## 準備物の確認

* micro:bit
	* micro:bitって何？ -> [子供も大人もmicro:bit！基本の操作と初めてのプログラミング](https://dotstud.io/blog/microbit-getting-started-pokio/)
* micro:bitをPCをつなぐUSBケーブル
* スマーフォン
	* LINEアプリが入ってることを確認
	* Bluetoothがオンになっていることを確認
* PC
	* Arduino IDEがインストール済み

## ハンズオンスタート

### まずはLINE Things Starterと友達になりましょう

[この記事のSTEP3あたり](https://qiita.com/n0bisuke/items/b0541a32f01007f938a4#step3-%E8%A6%8F%E7%B4%84%E5%90%8C%E6%84%8F%E3%81%A8line-things-starter%E3%81%AEbot%E3%81%A8%E5%8F%8B%E9%81%94%E3%81%AB%E3%81%AA%E3%82%8B)をみます。

### Arduino IDEのセットアップをしていく(今回のメイン)

基本は[公式の手順](https://github.com/line/line-things-starter/blob/master/microbit/README.ja.md)ですが、ハンズオン都合的に少し順番を変えます。

```
* Arduino IDE を開きます
* arduino-nRF5 を README の手順に従ってインストールします
* BLEPeripheral ライブラリをインストールします
* Adafruit GFX ライブラリをインストールします
* Adafruit_Microbit ライブラリをインストールします
```

### Arduino IDEに各種ライブラリ(3種類)をインストール

* スケッチ -> ライブラリをインクルード -> ライブラリマネージャを開く

* 検索フォームに`arduino-BLEPeripheral`と入力して検索し、ライブラリをインストールします。バージョンは最新のものを指定しましょう。表示されているスクショは既にインストール済みの画面なので若干表示違うと思います。

<img src="https://i.gyazo.com/8ccd76bb60bcf56ad4df7276210e6203.png" width="500px">

* 同様に`Adafruit-GFX-Library`をインストール

<img src="https://i.gyazo.com/fe5779b13ec6695e48ad9c82ef356982.png" width="500px">

* 同様に`Adafruit_Microbit`をインストール

<img src="https://i.gyazo.com/cde88e7691b40aba631b4041cfe5dac2.png" width="500px">

* これで[BLEPeripheral](https://github.com/sandeepmistry/arduino-BLEPeripheral)、[Adafruit GFX](https://github.com/adafruit/Adafruit-GFX-Library)、[Adafruit_Microbit](https://github.com/adafruit/Adafruit_Microbit)の3種類のライブラリがインストール出来ました。

ここで一息いれてもいいかもしれません。

### arduino-nRF5 を README の手順に従ってインストール

ここが一番難しいかも。 (※macでしか試せてません。)

[arduino-nRF5](https://github.com/sandeepmistry/arduino-nRF5#board-manager)を開きます。

* Arduino IDEの環境設定(preference)から`追加のボードマネージャーのURL`を追加します。
	* `https://sandeepmistry.github.io/arduino-nRF5/package_nRF5_boards_index.json`を追加してOK。

<img src="https://i.gyazo.com/92ecc07e1f1a32e6fb43d4ea12165506.png" width="500px"> 

* ツール -> ボード -> ボードマネージャ から`Nordic Semiconductor nRF5 Boards`を追加します。

<img src="https://i.gyazo.com/bbacfe6931d48eb13117ce9062a10fdf.png" width="500px"> 

* ツール -> ボード から `BBC micro:bit`を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/35387/f469811a-257a-d83a-a136-9cc29a5b88ae.png" width="500px"> 

(まだケーブルは繋がず)

#### ここでWindowsの人だけ特殊手順が......

Windowsの人はmbedデバイスのドライバインストール作業が発生します。

> https://github.com/sandeepmistry/arduino-nRF5#windows

講師側で試せてません。すみません！

### micro:bitのセットアップ

* **micro:bitとPCをUSBケーブルで繋げてください**
* ツール -> シリアルポート -> /dev/cu.usb~ (BBC micro:bit)などが出てくることを確認して選択
	* Windowsの場合はCOM3などが表示されます。
	* ここで表示されない人は、↑のドライバーインストールがうまくいってない可能性が高いです。それ以外だとUSBケーブルが電源オンリーでデータ通信できないタイプになっているなどがありえます。ケーブルを他の人と交換してチェックしてみたりしましょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/35387/751a4db8-6f8a-50c4-98df-48593efbe645.png" width="500px"> 

* ツール -> SoftDevice のリストから S130 を選択してください

<img src="https://qiita-image-store.s3.amazonaws.com/0/35387/bb288862-393e-36ec-e1e8-eeae4fd5cf79.png" width="500px"> 

* ツール -> 書込装置 のリストから CMSIS-DAP を選択してください

<img src="https://qiita-image-store.s3.amazonaws.com/0/35387/0379e349-111c-f9ca-cffb-eab5aedb162f.png" width="500px"> 

* `arduino-nRF5 READMEの手順に従って、SoftDevice S130 をデバイスへ書き込みます。`
	* ちょっと複雑なので↓へ。

### SoftDeviceの書き込み

* Arudinoのスケッチのフォルダに移動します。
	* OS X: ~/Documents/Arduino
	* Linux: ~/Arduino
	* Windows: ~/Documents/Arduino

* その中に`tools/nRF5FlashSoftDevice/tool/`フォルダを作成しましょう。

<img src="https://i.gyazo.com/b0d71e3d79f87be78fdcc715d7751fa7.png" width="500px">

* [nRF5FlashSoftDevice.jar](https://github.com/sandeepmistry/arduino-nRF5/releases/download/tools/nRF5FlashSoftDevice.jar)を保存します。

<img src="https://i.gyazo.com/111f91bf9d8da50f5663090a8e6e1dd4.png" width="500px">

* **ここで一旦Arduino IDEを再起動**
	* 再起動すると、項目がなんか追加された！
	* ので`nRF5 Flash SoftDevice`を押してみます。

> ![スクリーンショット 2019-03-22 0.56.11.png](https://qiita-image-store.s3.amazonaws.com/0/35387/70edf9a2-e2da-87cb-7dd4-a8592c59686b.png "スクリーンショット 2019-03-22 0.56.11.png")

* エラーが出た。ぐぬぬ。`.hexファイル`のDLでこけてるみたいです。

> ![](https://i.gyazo.com/b67d76c9dedbd4db8f89aff1d75c9e67.png)

* [Nordicのサイト](https://www.nordicsemi.com/Software-and-Tools/Software/S130/Download)から直接`.hexファイル`DLして直接入れます。

> ![](https://i.gyazo.com/6b9dcb2945bcdbd773551266c0d883a5.png)

サイトのUIちょっと分かりにくいけど、なんとかDLできると思います。

> ![](https://i.gyazo.com/30f32b60786ee8ada607bbdf241e1bb1.png)

* `.hexファイル`の設定(macのみの手順になってるのでwindowsの方は適宜読み替えてください、すみません)

`~/Library/Arduino15/packages/sandeepmistry/hardware/nRF5/0.6.0/cores/nRF5/SDK/components/softdevice/s130/hex`にDLした.hexファイルを置きます。以下はコマンド例です。

```bash
cp ~/Downloads/s130nrf51201/s130_nrf51_2.0.1_softdevice.hex ~/Library/Arduino15/packages/sandeepmistry/hardware/nRF5/0.6.0/cores/nRF5/SDK/components/softdevice/s130/hex
```

> ![](https://i.gyazo.com/a7ae81e3295dc81df6a4b159ff890a53.png)

* 再度書き込みをしてみましょう。
	* `nRF5 Flash SoftDevice`をおしていけました。

> ![](https://i.gyazo.com/6e087e2a51201bd080d623ad6f462078.png)

### 空のスケッチの書き込み

ここまできたらセットアップ完了です。
からのスケッチを書き込んで試しましょう。

<img src="https://i.gyazo.com/ee98da3f17fcd44f5c80173fc3ffa09f.png" width="500px">

### LINE Things Starterのファーム書き込み

https://github.com/line/line-things-starter/blob/master/microbit/arduino/sample/sample.ino を書き込んでみましょう。

### LINEアプリとデバイスの連携して試してみる

LINEアプリ側とデバイス側で双方向に通信できるのが分かると思います。

## 早くおわた人向け - 追加コンテンツ

注意: ここから結構雑です。

[こちらの手順](https://github.com/line/line-things-starter/blob/master/liff-app/README.ja.md)を元にLIFFを作ってみましょう。

* [line developersのサイト](https://developers.line.biz/ja/)でログインします。

![](https://i.gyazo.com/3c4b0df931a2f4168f0758e9e8fce1fd.png)

* 新規プロバイダー作成 or 既存のプロバイダーを選択 -> 新規チャンネル作成を選択

![](https://i.gyazo.com/1341b6aa1dd05d09cb0573831ee0d10d.png)

* Messaging APIを選択

![](https://i.gyazo.com/5b529ff0a2a9e9d254ecd45f67465ea9.png)

* 情報を追加してBOTを作成

![](https://i.gyazo.com/3ee0285165d44e7823195b3651dc1db7.png)

* BOTが作成できたよ

![](https://i.gyazo.com/d97bd521b4a9c8a450486dc3ad6b2037.png)

* チャンネル基本設定のページ下部のQRコードから作ったBOTと友達になろう

![](https://i.gyazo.com/3cf8b32c83a1adbc4ff8a43521f8913c.png)

* 右のLIFFのタブからLIFFアプリを作成

![](https://i.gyazo.com/2bd1aa2207d259ef8146782ed7991fa2.png)

* エンドポイントを入れる必要があるので、一旦GitHubの手順へ
	* [ここ](https://github.com/line/line-things-starter)の右上からForkをする
	* フォークしたらリポジトリのsettingsからGitHub Pagesの項目へ、Sourceをmaster branchに設定

![](https://i.gyazo.com/914e1a4c0249d55c82a564115386af03.png)

	*  `https://<自分のgithubのID>.github.io/line-things-starter/` + `liff-app/`をエンドポイントへ
		* 例: `https://n0bisuke.github.io/line-things-starter/liff-app/`がn0bisukeのenndo

* エンドポイントを設定し、BLE featureをONに

![](https://i.gyazo.com/5893bd38bd2219f4d3ab007c2dbb1a14.png)

* CURLでサービスUUIDを生成

```bash
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}"
}'
```

↓実態例

```bash
$ curl -X POST https://api.line.me/things/v1/trial/products \
-H 'Authorization: Bearer 0yt1kkPxw6Ae9fTuQ/Refor4VOv2Ol4Ilpm16YMWH8ZS0rqO8e3qTr46g/0Pwjlq+xoJ0TPbsZOYWwc5uAC35nIR8JynnEcobZDWPU8LAjjX5PQIletABltk846/yOkqJmoqzYUW2Zz4dpnsNVQXUVGUYhWQfeY8sLGRXgo3xvw=' \
-H 'Content-Type:application/json' \
-d '{
  "name": "n0bisuke_microbit",
  "liffId": "1563239013-78E9voDZ"
}'
```

* 生成されたサービスUUIDを使ってArudinoのコードとliff.jsのサービスUUIDを書き換える

## うまく繋がらない場合

* [LINE Things x micro:bitで2回目以降で繋がらない場合の対処](https://qiita.com/n0bisuke/items/09bc7868d0f6af69879e)
* [前回の連携削除](https://qiita.com/n0bisuke/items/0c09ae5da43b551e98b1#step2-%E5%89%8D%E5%9B%9E%E3%81%AE%E9%80%A3%E6%90%BA%E5%89%8A%E9%99%A4%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%84%E4%BA%BA%E3%81%AF%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%84)

これらも試してみてください。

## まとめ

むずい！けど一回セットアップすると良い感じです。
micro:bitは安いし安定してるので結構おすすめ！