LINEでリッチにLチカ✨

# 概要
LINEのリッチメニューからobnizをLチカしてみたのでポイントを整理しておく。

# Lチカの様子
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">obnizをLINEでリッチにLチカ<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a><a href="https://twitter.com/hashtag/IoT?src=hash&amp;ref_src=twsrc%5Etfw">#IoT</a><a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a><a href="https://twitter.com/hashtag/LINE?src=hash&amp;ref_src=twsrc%5Etfw">#LINE</a><a href="https://twitter.com/hashtag/MessagingAPI?src=hash&amp;ref_src=twsrc%5Etfw">#MessagingAPI</a><a href="https://twitter.com/hashtag/L%E3%83%81%E3%82%AB?src=hash&amp;ref_src=twsrc%5Etfw">#Lチカ</a> <a href="https://t.co/p7BY8fGc3x">pic.twitter.com/p7BY8fGc3x</a></p>&mdash; m (@getapojim) <a href="https://twitter.com/getapojim/status/1039881243964239872?ref_src=twsrc%5Etfw">2018年9月12日</a></blockquote>

# にっこりポイント&#x1F604;
- リッチメニュー作成時の指定内容は「URL」とし、obnizクラウド上のプログラムを直接指定する．<br>こうすることで自前のサーバーやクラウドサービスを経由する必要なし．

# がっかりポイント&#x1F61E;
- 操作する際にリッチメニューをタップするたびに画面遷移が発生してウザい．

# 作成の流れ
①obnizにLEDをつなぐ
②obnizクラウド上でプログラムを作る
③obnizのイベントとして登録する
④LINE Messaging APIでチャネルを作成する
⑤LINE@ MANAGERでリッチメニューを作る

# 必要なもの
- obniz
- 抵抗入りLED
- リッチメニュー用画像（横1200ピクセル × 縦810ピクセル）　1枚
- LINE developersアカウント

# 作成手順
①obnizにLEDをつなぐ
obnizにLEDと電源をつないでWiFiに接続しておく．
LEDは抵抗入りを使うと、写真のように直接挿すだけなのでオススメ．
<img width="450" alt="Lチカ_OFF" src="https://qiita-image-store.s3.amazonaws.com/0/85506/b3091088-cfd4-05d5-1618-c6f407831ae6.jpeg">

②[obnizクラウド](https://obniz.io/users/me)上でプログラムを作る．
obnizのサイト右上メニューから「クラウド」→「マイページ」をクリック
<img width="450" alt="obniz_LINE_Lチカ_01" src="https://qiita-image-store.s3.amazonaws.com/0/85506/2fb1e54a-ea26-57fe-1806-17052e8f35d2.png">

「新規作成」をクリック→以下を入力して「作成」をクリック
タイプ　：　WebApp - 新しいプログラムのためのhtmlファイル（デフォルト）
アクセスレベル　：　非公開
ファイル名　：　webhook_LED
　　　　　　　（※正しいファイル名は自動でprivate_webhook_LED.htmlとなる）
<img width="450" alt="obniz_LINE_Lチカ_02" src="https://qiita-image-store.s3.amazonaws.com/0/85506/3d4072a5-58ea-bbb6-f417-9dd0f06d4a5a.png">

<img width="450" alt="obniz_LINE_Lチカ_03" src="https://qiita-image-store.s3.amazonaws.com/0/85506/7a5cb579-07d7-01cf-e63c-1ae94c1b7c4b.png">

ソーステンプレートを以下のソースで置き換えて「保存&開く」をクリック．
"OBNIZ_ID_HERE"の箇所は自分のobnizのIDを記載する。
<img width="450" alt="obniz_LINE_Lチカ_04" src="https://qiita-image-store.s3.amazonaws.com/0/85506/edd45a5b-197e-959b-9198-5978472855e6.png">

```html:private_webhook_LED.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.9.5/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE"); //IDは自分で置き換える
obniz.onconnect = async function () {
  var led = obniz.wired("LED", { anode:0, cathode:1 } );
  led.on();
}
</script>
</body>
</html>
```

LEDが光るのを確認して、
<img width="450" alt="Lチカ_ON" src="https://qiita-image-store.s3.amazonaws.com/0/85506/479ad4a3-40e4-f3fb-6359-06727abd17e4.jpeg">

いったん「終了」をクリック．
（※ここまでは普通のLチカ．）
<img width="450" alt="obniz_LINE_Lチカ_05" src="https://qiita-image-store.s3.amazonaws.com/0/85506/a857737e-8fe4-8b22-409c-8a851ad554d1.png">

③obnizのイベントとして登録する
マイページの画面に戻り、画面下部のイベント欄の「新規作成」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_06" src="https://qiita-image-store.s3.amazonaws.com/0/85506/15c99f9d-ac9d-cf6e-dc8a-46231faaffd1.png">

Create Eventの画面で以下の通り入力して「作成」をクリック．
名前　：　Lチカ_webhook
実行するWebApp　：　先ほど作成した「private_webhook_LED」を選択．
きっかけ　：　「webhook」を選択．

<img width="450" alt="obniz_LINE_Lチカ_07" src="https://qiita-image-store.s3.amazonaws.com/0/85506/8d83e8a3-4a6e-0b2f-9a6e-37bd426f1ebc.png">

イベントが作成されて「Edit Event」画面になる．
Endpointが表示されるのでURLの文字列を控えておく。
※右上の「テスト実行」ボタンは、obnizが電源OFFの状態であっても{"status":"OK"}となるのであまり役に立たない？
<img width="450" alt="obniz_LINE_Lチカ_08" src="https://qiita-image-store.s3.amazonaws.com/0/85506/d16071bd-4c6c-e761-f80b-2f0723192550.png">


④[LINE Messaging API](https://developers.line.me/ja/services/messaging-api/)でチャネルを作成する
LINE Developersのサイト右上メニューから「プロバイダー新規作成」をクリック
<img width="450" alt="obniz_LINE_Lチカ_10" src="https://qiita-image-store.s3.amazonaws.com/0/85506/7665e3d5-571e-7323-2a31-774626165b53.png">

プロバイダー名を入力して、「確認する」をクリック．
プロバイダー名　：　m（何でもよい）
<img width="450" alt="obniz_LINE_Lチカ_11" src="https://qiita-image-store.s3.amazonaws.com/0/85506/189b33fa-fe21-874c-8b45-64569de7d624.png">

「作成する」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_12" src="https://qiita-image-store.s3.amazonaws.com/0/85506/6dce985c-284c-a4a4-0aa3-156eb5b675b7.png">

「プロバイダーが作成されました！」と表示されるので、
「Messaging API」の画像をクリック．
<img width="450" alt="obniz_LINE_Lチカ_13" src="https://qiita-image-store.s3.amazonaws.com/0/85506/68b6e04e-4822-1fb5-5ce4-e1b710a044be.png">


「新規チャネル作成」画面で、以下の通り入力して「入力内容を確認する」をクリック．

アプリアイコン画像　：　アイコン用に好きな画像を指定する
アプリ名　：　obniz_Lチカ
アプリ説明　：　LINEのリッチメニューからobnizをLチカします．
プラン　：　Developer Trial
大業種　：　個人
小業種　：　個人（その他）
メールアドレス　：　（自分のメールアドレス）
<img width="450" alt="obniz_LINE_Lチカ_15" src="https://qiita-image-store.s3.amazonaws.com/0/85506/140c816f-527f-edf8-3cad-696f4f0cbbc2.png">
<img width="450" alt="obniz_LINE_Lチカ_16" src="https://qiita-image-store.s3.amazonaws.com/0/85506/f98d221f-9f08-75dd-f907-f9aab790648e.png">
<img width="450" alt="obniz_LINE_Lチカ_17" src="https://qiita-image-store.s3.amazonaws.com/0/85506/2ff5e8bf-23a9-6d27-50a2-1a7e4ca0d347.png">

情報利用に関する同意事項が表示されるので、「同意する」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_18" src="https://qiita-image-store.s3.amazonaws.com/0/85506/14a6d9ce-a1e6-b9f4-dbb0-2ade193bedf3.png">

確認画面が表示されるので、画面下部にて以下の通り入力して「作成」をクリック．
LINE@利用規約　:　チェックを付ける
Messaging API(Developer Trial プラン)利用規約　:　チェックを付ける

<img width="450" alt="obniz_LINE_Lチカ_19" src="https://qiita-image-store.s3.amazonaws.com/0/85506/b18d9f13-d55d-8507-d12e-7add69a20e5c.png">

チャネルが生成されたのを確認して、チャネルの画像をクリック．
<img width="450" alt="obniz_LINE_Lチカ_20" src="https://qiita-image-store.s3.amazonaws.com/0/85506/19395f66-e52d-688f-60ae-c72d544b5015.png">

チャネル基本情報の画面が表示される．
<img width="450" alt="obniz_LINE_Lチカ_21" src="https://qiita-image-store.s3.amazonaws.com/0/85506/ec0cdce5-6397-e0d9-8a10-cf6008672a1d.png">



⑤[LINE@ MANAGER](https://admin-official.line.me/)でリッチメニューを作る
LINE@ MANAGERのサイト右上のメニューから「アカウント一覧」をクリックし、画面下部のアカウント一覧から先ほど作成したチャネル（ここではobniz_Lチカ）をクリック．
<img width="450" alt="obniz_LINE_Lチカ_22" src="https://qiita-image-store.s3.amazonaws.com/0/85506/49573c8c-4320-e016-7349-c6e7e686c886.png">

画面左側のメニューから「リッチコンテンツ作成」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_23" src="https://qiita-image-store.s3.amazonaws.com/0/85506/46638429-46a7-7dee-a2e3-c0f32698fa35.png">

リッチメニューの管理画面が表示されるので、「新規作成」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_24" src="https://qiita-image-store.s3.amazonaws.com/0/85506/81142df7-7297-a110-f778-b8fdff1b3373.png">

リッチメニューのタイプとコンテンツを以下の通り指定して「保存」をクリック．

タイプ
　表示設定　：　反映する
　表示期間　：　作成しているその日　～　適当な長さ（ここでは月末）
　タイトル　：　obniz_Lチカ
　初期表示メニュー　：　表示しない
　テンプレート選択　：　画像で作成
　画像タイプ　：　画像タイプ７

コンテンツ設定
　アップロード　：　事前に準備した横1200 x 縦810の画像を指定（ここではLEDの画像）
　リンク　：　「URL」を選択して、obnizイベントのEndpointのURL文字列を指定する．
　リンクテキスト　：　obniz_Lチカ

<img width="450" alt="obniz_LINE_Lチカ_25" src="https://qiita-image-store.s3.amazonaws.com/0/85506/3a5ad1f1-d862-1d24-2288-010f480a9ec0.png">

<img width="450" alt="obniz_LINE_Lチカ_26" src="https://qiita-image-store.s3.amazonaws.com/0/85506/195ace55-ff6c-3974-13a2-41d7c97784e0.png">

<img width="450" alt="obniz_LINE_Lチカ_27" src="https://qiita-image-store.s3.amazonaws.com/0/85506/680394dd-aab5-8794-7ef4-0f10ef6e65b7.png">

リッチメニューの管理画面に作成したリッチメニューが一覧で表示される。完成！
<img width="450" alt="obniz_LINE_Lチカ_28" src="https://qiita-image-store.s3.amazonaws.com/0/85506/7c668611-05ff-bb32-f1cc-fdb864e7d3b8.png">

動作確認
画面左側メニューの「アカウント設定」をクリック．
<img width="450" alt="obniz_LINE_Lチカ_29" src="https://qiita-image-store.s3.amazonaws.com/0/85506/7984c077-68ab-4c6f-26ce-6c0ade399589.png">

QRコードを使って友達追加．
<img width="450" alt="obniz_LINE_Lチカ_30" src="https://qiita-image-store.s3.amazonaws.com/0/85506/c194ffef-fc82-d793-6f55-704bd0b0740b.png">

リッチメニューをタップしてLチカ実行！
（冒頭の動画参照）


#参考
obniz Cloud　サーバーレス イベント
https://obniz.io/doc/about_event

LINE Messaging API
https://developers.line.me/ja/services/messaging-api/

LINE@ MANAGER
https://admin-official.line.me/

いらすとや　青色発光ダイオード（LED）
https://www.irasutoya.com/2015/01/led_10.html