JavaScript
IoT
Lチカ
LINEmessagingAPI
obniz

概要

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

Lチカの様子

にっこりポイント😄

  • リッチメニュー作成時の指定内容は「URL」とし、obnizクラウド上のプログラムを直接指定する.
    こうすることで自前のサーバーやクラウドサービスを経由する必要なし.

がっかりポイント😞

  • 操作する際にリッチメニューをタップするたびに画面遷移が発生してウザい.

作成の流れ

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

必要なもの

  • obniz
  • 抵抗入りLED
  • リッチメニュー用画像(横1200ピクセル × 縦810ピクセル) 1枚
  • LINE developersアカウント

作成手順

①obnizにLEDをつなぐ
obnizにLEDと電源をつないでWiFiに接続しておく.
LEDは抵抗入りを使うと、写真のように直接挿すだけなのでオススメ.
Lチカ_OFF

obnizクラウド上でプログラムを作る.
obnizのサイト右上メニューから「クラウド」→「マイページ」をクリック
obniz_LINE_Lチカ_01

「新規作成」をクリック→以下を入力して「作成」をクリック
タイプ : WebApp - 新しいプログラムのためのhtmlファイル(デフォルト)
アクセスレベル : 非公開
ファイル名 : webhook_LED
       (※正しいファイル名は自動でprivate_webhook_LED.htmlとなる)
obniz_LINE_Lチカ_02

obniz_LINE_Lチカ_03

ソーステンプレートを以下のソースで置き換えて「保存&開く」をクリック.
"OBNIZ_ID_HERE"の箇所は自分のobnizのIDを記載する。
obniz_LINE_Lチカ_04

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が光るのを確認して、
Lチカ_ON

いったん「終了」をクリック.
(※ここまでは普通のLチカ.)
obniz_LINE_Lチカ_05

③obnizのイベントとして登録する
マイページの画面に戻り、画面下部のイベント欄の「新規作成」をクリック.
obniz_LINE_Lチカ_06

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

obniz_LINE_Lチカ_07

イベントが作成されて「Edit Event」画面になる.
Endpointが表示されるのでURLの文字列を控えておく。
※右上の「テスト実行」ボタンは、obnizが電源OFFの状態であっても{"status":"OK"}となるのであまり役に立たない?
obniz_LINE_Lチカ_08

LINE Messaging APIでチャネルを作成する
LINE Developersのサイト右上メニューから「プロバイダー新規作成」をクリック
obniz_LINE_Lチカ_10

プロバイダー名を入力して、「確認する」をクリック.
プロバイダー名 : m(何でもよい)
obniz_LINE_Lチカ_11

「作成する」をクリック.
obniz_LINE_Lチカ_12

「プロバイダーが作成されました!」と表示されるので、
「Messaging API」の画像をクリック.
obniz_LINE_Lチカ_13

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

アプリアイコン画像 : アイコン用に好きな画像を指定する
アプリ名 : obniz_Lチカ
アプリ説明 : LINEのリッチメニューからobnizをLチカします.
プラン : Developer Trial
大業種 : 個人
小業種 : 個人(その他)
メールアドレス : (自分のメールアドレス)
obniz_LINE_Lチカ_15
obniz_LINE_Lチカ_16
obniz_LINE_Lチカ_17

情報利用に関する同意事項が表示されるので、「同意する」をクリック.
obniz_LINE_Lチカ_18

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

obniz_LINE_Lチカ_19

チャネルが生成されたのを確認して、チャネルの画像をクリック.
obniz_LINE_Lチカ_20

チャネル基本情報の画面が表示される.
obniz_LINE_Lチカ_21

LINE@ MANAGERでリッチメニューを作る
LINE@ MANAGERのサイト右上のメニューから「アカウント一覧」をクリックし、画面下部のアカウント一覧から先ほど作成したチャネル(ここではobniz_Lチカ)をクリック.
obniz_LINE_Lチカ_22

画面左側のメニューから「リッチコンテンツ作成」をクリック.
obniz_LINE_Lチカ_23

リッチメニューの管理画面が表示されるので、「新規作成」をクリック.
obniz_LINE_Lチカ_24

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

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

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

obniz_LINE_Lチカ_25

obniz_LINE_Lチカ_26

obniz_LINE_Lチカ_27

リッチメニューの管理画面に作成したリッチメニューが一覧で表示される。完成!
obniz_LINE_Lチカ_28

動作確認
画面左側メニューの「アカウント設定」をクリック.
obniz_LINE_Lチカ_29

QRコードを使って友達追加.
obniz_LINE_Lチカ_30

リッチメニューをタップして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