Go to Qiita Advent Calendar 2024 Top

4

More than 5 years have passed since last update.

LINEでリッチにLチカ✨

Last updated at 2018-09-19Posted at 2018-09-13

概要

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

Lチカの様子

obnizをLINEでリッチにLチカ#obniz #IoT #JavaScript #LINE #MessagingAPI #Lチカ pic.twitter.com/p7BY8fGc3x
— m (@getapojim) 2018年9月12日

にっこりポイント😄

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

がっかりポイント😞

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

作成の流れ

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

必要なもの

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

作成手順

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

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

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

obniz_LINE_Lチカ_03

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

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チカ．）

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

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

obniz_LINE_Lチカ_07

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

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

プロバイダー名を入力して、「確認する」をクリック．
プロバイダー名　：　m（何でもよい）

「作成する」をクリック．

「プロバイダーが作成されました！」と表示されるので、
「Messaging API」の画像をクリック．

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

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

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

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

obniz_LINE_Lチカ_19

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

チャネル基本情報の画面が表示される．

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

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

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

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

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

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

obniz_LINE_Lチカ_25

obniz_LINE_Lチカ_26

obniz_LINE_Lチカ_27

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

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

QRコードを使って友達追加．

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

4

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

4