obniz で LINE Things！

[obniz]( https://obniz.io/ ) が [ LINE Things ]( https://developers.line.biz/ja/docs/line-things/ ) に対応したというニュースを見て、
これは試さねば！、と思い早速やってみました。

# obniz と LINE Things について
obinizとは、電子工作・IoTが簡単に行えるデバイスです。
詳細は、以下の記事・公式サイトをご覧ください。

* [ラズベリーパイより簡単にIoT電子工作ができる「obniz」が1億円を調達、コンセプトは“ハードウェアのAPI化” | TechCrunch Japan]( https://jp.techcrunch.com/2018/11/22/cambrianrobotics-fundraising/ )
* [obnizについて詳しく知る]( https://obniz.io/spec )

LINE Thingsは、LINEアプリ を介して BLE（Bluetooth Low Energy）対応デバイスを操作するIoTプラットフォームです。
こちらも詳細は、公式ページをご覧ください。

* [LINE Things]( https://developers.line.biz/ja/docs/line-things/ )
    * [LINE Thingsについて](https://developers.line.biz/ja/docs/line-things/about-line-things/ )

# 試すときに参照した情報
今回参照した主な情報は、以下のとおりです。

* [LINE Things Developer Trial ハンズオン - Qiita]( https://qiita.com/hktechno/items/bb83cc898c75819b2664 )
* [line-things-starter/obniz at master · line/line-things-starter]( https://github.com/line/line-things-starter/tree/master/obniz )

1つ目が、[昨年11月に参加した LINE Things のイベント]( https://line.connpass.com/event/109322/ )で提供された[ハンズオン用資料]( https://qiita.com/hktechno/items/bb83cc898c75819b2664 )で、
2つ目は、[GitHub の LINE Things関連の情報]( https://github.com/line/line-things-starter/ )のうち、[obniz に関する情報が書かれた部分]( https://github.com/line/line-things-starter/tree/master/obniz )です。

# LINE Things で obniz を使ってみる
## obniz側の設定など
[上記のGitHubのページ]( https://github.com/line/line-things-starter/tree/master/obniz )を見つつ、準備を進めます。

1. まず、obniz を利用可能な状態にします（電源をつないで、Wi-Fiに接続）。
2. [obniz の「プログラム」のページ]( http://obniz.io/program )を開き、  
[上記の GitHub のページのサンプル（htmlファイル） ]( https://raw.githubusercontent.com/line/line-things-starter/master/obniz/sample.html ) の内容を貼り付けつつ、  
ソースコード中（「// Change this to your Obniz ID」の下の行）に、上記 1）で obniz の画面に表示された ID（8桁の数字）を入力します。
3. 試しにプログラム実行してみると、QRコードや ID が表示されていた画面に、以下のように Obniz Ready という文字が表示されます。
![IMG_4202.jpg](https://qiita-image-store.s3.amazonaws.com/0/50868/2c8926d9-6d2c-557a-2981-ff0c47a166a7.jpeg)
上記 2）のソースコードの「USER_SERVICE_UUID」の部分は、書きかえる必要がありますが、ひとまず後回しに。

## LINE側のあれこれ
上記の [LINE Things ハンズオンの資料]( https://qiita.com/hktechno/items/bb83cc898c75819b2664 )をもとに進めて行きます。
資料で丁寧に説明されているので、おおまかな流れだけをテキストをメインで記載します（詳細は[ハンズオン資料]( https://qiita.com/hktechno/items/bb83cc898c75819b2664 )をご参照ください）。

1. 資料の[「LINE Things Starter を体験する」]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#line-things-starter-%E3%82%92%E4%BD%93%E9%A8%93%E3%81%99%E3%82%8B )という部分の、  
[「LINE Developers の開発者情報登録とプロバイダーの作成」]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#line-developers-%E3%81%AE%E9%96%8B%E7%99%BA%E8%80%85%E6%83%85%E5%A0%B1%E7%99%BB%E9%8C%B2%E3%81%A8%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%AE%E4%BD%9C%E6%88%90 )に従って、  
開発者情報の登録や、LINE の Bot を作るためのプロバイダー作成を行います。
2. 上記 1）の続きの部分[「Messaging API のチャネル (LINE Bot) の作成」]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#messaging-api-%E3%81%AE%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB-line-bot-%E3%81%AE%E4%BD%9C%E6%88%90 )を参照しつつ、  
Messaging API の新規チャネルを作成します。
3. 上記 2）で作成したチャネルで「 "アクセストークン（ロングターム）" の "再発行" 」を実行します。  
このページの「Channel Secret」と合わせて「アクセストークン（ロングターム）」を後で参照できるようメモしておきます。
4. 同ページ内で「LINEアプリへのQRコード」という項目があるので、その QRコードを LINEアプリで読み込み、Botを友達追加します。
5. [ハンズオン資料内の「LIFF アプリの準備と作成」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#liff-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%BA%96%E5%82%99%E3%81%A8%E4%BD%9C%E6%88%90 )に従って、LIFF (LINE Front-end Framework) アプリの準備を行います。  
資料に書かれたとおり、サーバの準備を省略するため「GitHub Pages」を活用すると良いです。  
この手順を実行すると、「 https://{（GitHutのユーザ名）}.github.io/line-things-starter/liff-app/ 」という URLで LIFFアプリを利用できるようになります（この URL が「LIFF のエンドポイント URL」になります）。
6. LINE Things 向けの LIFF を作成する際には、BLE feature を  ON に設定する必要があります。  
[ハンズオン資料の「LIFF アプリの作成と BLE feature の付与」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#liff-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8-ble-feature-%E3%81%AE%E4%BB%98%E4%B8%8E )を参照し「LINE Developers コンソールからの LIFF の作成」を行っていきます。  
資料に書かれたとおり、BLE feature の付与やエンドポイント URL の設定を進めます。  
この作成手順の後に表示される「LIFF URL」は、後で使うのでメモしておきます。
7. [ハンズオン資料の「LINE Things プロダクトの作成」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#line-things-%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90 )を見ながら、curl コマンドを使って LINE Things の新しいプロダクトを作成します。  
[資料に記載された参照ページ]( https://developers.line.biz/ja/docs/line-things/regist-product/ )を見ながら、LINE Things Developer Trial 専用 API を利用してプロダクトを作成します。  
手順の中の curl コマンドに含まれる「"name": "<trial product name>"」の部分は、好きなプロダクト名称で良いようです（後で分かりやすいものにしておくのが良いです）。また、liffId には、上記 6）で作成した LIFF URL の文字列のうち line://app/ 以降の部分の文字列を用います。  
このプロダクト作成 API を叩いたときに、結果として表示される情報の中で、「serviceUuid」が、obniz のセットアップの手順にでてきた、ソースコード中の「// Change this to your generated service UUID」と書かれた行の下で使う情報です。[obniz の「プログラム」のページ]( http://obniz.io/program )で、この部分を 取得した serviceUuid の内容に書きかえましょう。
8. [ハンズオン資料の「LIFF アプリの書き換え」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#liff-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88 )を参照しつつ、「liff.js」の「USER_SERVICE_UUID」を書きかえます。  
ハンズオン資料では「Fork したリポジトリを手元の PC へ clone」して書きかえを行っていますが、この部分は下記のリポジトリのファイルを、GitHub上で直接書きかえました。  
```
https://github.com/{（GitHutのユーザ名）}/line-things-starter/blob/master/liff-app/liff.js
```  
9. [ハンズオン資料の「LINE と LINE Things デバイスを連携させてみよう」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#line-%E3%81%A8-line-things-%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%82%92%E9%80%A3%E6%90%BA%E3%81%95%E3%81%9B%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86 )の手順で、資料内に掲載されている QRコードを LINEアプリで読み取り、LINE Things の機能を有効化します。
10. 上記 9）での機能の有効化を行った後、[obniz の「プログラム」のページ]( http://obniz.io/program )で「保存＆開く」をクリックし、obniz側のプログラムを実行します。  
11. 上記 10）でプログラムの実行が成功していれば、LINEアプリで obnizが検出されます。そして、LINEアプリの画面の "連携可能なデバイス" の部分に、先ほど作成したプロダクトの名前が表示されるので、それを選択します。
12. [ハンズオン資料の「LINE Things の LIFF BLE 機能を体験しよう」の部分]( https://qiita.com/hktechno/items/bb83cc898c75819b2664#line-things-%E3%81%AE-liff-ble-%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%93%E9%A8%93%E3%81%97%E3%82%88%E3%81%86 )にあるとおり、LINEアプリの画面上で「連携画面のプロダクト名」をタップします。
13. ここで表示されるペアリングの要求を承認すると、LIFF アプリが立ち上がります。起動されたアプリ上で、以下の動画にあるように、「Switch LED ON（OFF）」と書かれたボタンをタップすると、obnizのディスプレイ上に表示された ON/OFF の文字が、ボタンのタップに連動して切り替わります。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> で <a href="https://twitter.com/hashtag/linethings?src=hash&amp;ref_src=twsrc%5Etfw">#linethings</a> 、<br>早速試してみたよ。 <a href="https://t.co/tMjRyAATre">pic.twitter.com/tMjRyAATre</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1092429039384485889?ref_src=twsrc%5Etfw">2019年2月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 最後に

今回、obniz を LINE Things の連携デバイスとして利用しました。
その他、obnizは冒頭の記事などにも書いてあったとおり、電子工作などにも利用できます。

公式ページに [obnizを使った楽しい作品例]( https://obniz.io/explore )がたくさん掲載されていたり、[公式で動作確認されたパーツのリスト＆パーツを動作させるためのプログラム集]( https://obniz.io/doc/obnizjs_parts )が掲載されています。
是非、ご興味のある方は、そちらも見てみてください。