LoginSignup
5
4

More than 5 years have passed since last update.

@getapojim

LINEでリッチにLチカ✨

Last updated at Posted at 2018-09-13

概要

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チカ
　初期表示メニュー　：　表示しない
　テンプレート選択　：　画像で作成
　画像タイプ　：　画像タイプ７

コンテンツ設定
　アップロード　：　事前に準備した横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

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4