内蔵スイッチを LINE Notify に通知しよう
内蔵スイッチを左右に回したり押したりすると LINE Notify にメッセージが届く仕組みを作ります。
LINE Notify に送るためには
まず、obniz クラウドはブラウザから LINE Notify にアクセスしようとすると、この場合 LINE Notify のサーバーが obniz.com からのアクセスを許可していないのでクロスドメインの制約からアクセスすることができません。
この制約はブラウザで限った話でして、サーバー間のやりとりでは、その制約は受けません。ですので、今回は IFTTT が橋渡しの役目をします。IFTTT Webhook サービスを使って obniz のデータを受けて IFTTT が LINE Notify に橋渡しをするという仕組みで進めます。
これが、事前準備で作った仕組みですね。
自作のサーバーや AWS Lambda のような仕組みが使える場合
もし、自作のサーバーや AWS Lambda のような仕組みが使えるのであれば、CORS を obniz.com に解放してあげれば、サーバーにアクセスできるようになるので、そういった開発がハッカソンで出来るのであればやってみましょう。
- AWS Lambda の例
- Node.js の Express サーバーの例
- Node.js + Express で複数オリジンに対応した CORS の実装サンプル
CORS を obniz.com に解放を狙い撃ちで行うのが大変なときは、一度 * （アスタリスク）で全開放して試すとハマりにくくておススメです。その上で、絞りましょう。
チーム内でそういった対応ができる場合は、ぜひ相談してみましょう～。
IFTTT Webhook のキーの準備
事前準備で準備した、こちらの IFTTT Webhook のキーを手元に準備します。メモしてない方は、再度 https://ifttt.com/maker_webhooks から Documentation ボタンをクリックして設定を確認しましょう。
シンプルに LINE Notify だけする
はじめに、トークンなどの設定がうまく揃っているか、スイッチの連携をせずシンプルに LINE Notify だけやってみましょう。
こちらを以前の内容は、すべて選択して消してから、エディタの内容を上書きします。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.24.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Simple LINE Notify!</h1>
<div id="obniz-debug"></div>
<script>
// 今回の obniz を指示するための設定
const obniz = new Obniz("OBNIZ_ID_HERE");
// 今回使う IFTTT Webhook の自分のキー
const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';
// 今回使う IFTTT Webhook の Event Name
const IFTTT_WEBHOOK_EVENT_NAME = 'line_notify';
// 接続後、ディスプレイに指示を出す
obniz.onconnect = async function () {
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("Simple");
obniz.display.print("LINE Notify");
obniz.display.print("with IFTTT!");
// IFTTT Webhook に fetch 関数で送る ////////////////////////////
// メッセージ内容を URLSearchParams で作る
// 実際のメッセージは message 値
const params = new URLSearchParams({
value1: 'シンプルに送ってみました！',
value2: 'value2',
value3: 'value3',
});
// 送る文字列に変換
const paramsString = params.toString();
// 設定
const config = {
method: 'GET',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
// IFTTT Webhook の URL をつくる
const IFTTT_WEBHOOK_URL = `https://maker.ifttt.com/trigger/${IFTTT_WEBHOOK_EVENT_NAME}/with/key/${IFTTT_WEBHOOK_YOUR_KEY}?${paramsString}`;
console.log("IFTTT_WEBHOOK_URL");
console.log(IFTTT_WEBHOOK_URL);
// 送信
await fetch(IFTTT_WEBHOOK_URL, config);
console.log("OK")
}
</script>
</body>
</html>
コピーアンドペーストできたら、
// 今回使う IFTTT Webhook の自分のキー
const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';
の 'IFTTT_WEBHOOK_YOUR_KEY' シングルクオーテーションの中を IFTTT Webhook のキーに変更します。
こちらを実行してみると、LINE Notify に「シンプルに送ってみました！」というメッセージが送られます。
スマホの LINE アプリケーションを見てみると、今回送った LINE Notify にメッセージがこのように送られています！
今回の fetch は GET リクエストで no-cors モード
// 設定
const config = {
method: 'GET',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
IFTTT の Webhook は GET リクエストで application/x-www-form-urlencoded 形式でデータを受け付けることができるため、今回はこのようにしています。また、mode を no-cors を CORS に影響されないデータ送信方法なので、そう設定しています。
no-cors 送信は、データを送るだけなら問題なくできるので、今回は使えます。もし、データの受信も含めたやり取りをしたい場合は、前述の通り自前のサーバー側で CORS を許可しましょう。
- fetchのmodeについて - Qiita
メッセージを変更してみましょう
IFTTT Webhook には value1 value2 value3 という 3 つのメッセージを受け付けています。
// メッセージ内容を URLSearchParams で作る
// 実際のメッセージは message 値
const params = new URLSearchParams({
value1: 'シンプルに送ってみました！',
value2: 'value2',
value3: 'value3',
});
こちらの value1: 'シンプルに送ってみました！', の部分がメッセージです。「シンプルに送ってみました！」の部分を変更してメッセージを変更してみましょう。
なおメッセージの文言は、IFTTT の Applet 内で Message の項目で設定していました。
内蔵スイッチと連携してみる
つづいて、内蔵スイッチと連携してみましょう。内蔵スイッチを左右に回したり押したりすると LINE Notify にメッセージが届く仕組みを作ります。
こちらを以前の内容は、すべて選択して消してから、エディタの内容を上書きします。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.24.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Simple LINE Notify!</h1>
<div id="obniz-debug"></div>
<script>
// 今回の obniz を指示するための設定
const obniz = new Obniz("OBNIZ_ID_HERE");
// 今回使う IFTTT Webhook の自分のキー
const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';
// 今回使う IFTTT Webhook の Event Name
const IFTTT_WEBHOOK_EVENT_NAME = 'line_notify';
// 接続後、ディスプレイに指示を出す
obniz.onconnect = async function () {
console.log("[switch]");
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("[switch]");
obniz.display.print("LINE Notify");
obniz.display.print("with IFTTT!");
// スイッチの動きを検出
obniz.switch.onchange = function (state) {
if (state === "push") {
// 押されたとき
console.log("push");
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("push");
// メッセージを送る
sendIFTTT("push");
} else if (state === "right") {
// 右に回したとき
console.log("right");
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("right");
// メッセージを送る
sendIFTTT("right");
} else if (state === "left") {
// 左に回したとき
console.log("left");
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("left");
// メッセージを送る
sendIFTTT("left");
} else if (state === "none") {
// 何もしていない時
console.log("none");
// ディスプレイ表示
obniz.display.clear();
obniz.display.print("none");
}
}
}
async function sendIFTTT(message) {
// IFTTT Webhook に fetch 関数で送る ////////////////////////////
// メッセージ内容を URLSearchParams で作る
// 実際のメッセージは message 値
const params = new URLSearchParams({
value1: message,
value2: 'value2',
value3: 'value3',
});
// 送る文字列に変換
const paramsString = params.toString();
// 設定
const config = {
method: 'GET',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
// IFTTT Webhook の URL をつくる
const IFTTT_WEBHOOK_URL = `https://maker.ifttt.com/trigger/${IFTTT_WEBHOOK_EVENT_NAME}/with/key/${IFTTT_WEBHOOK_YOUR_KEY}?${paramsString}`;
console.log("IFTTT_WEBHOOK_URL");
console.log(IFTTT_WEBHOOK_URL);
// 送信
await fetch(IFTTT_WEBHOOK_URL, config);
console.log("OK")
}
</script>
</body>
</html>
コピーアンドペーストできたら、
// 今回使う IFTTT Webhook の自分のキー
const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';
の 'IFTTT_WEBHOOK_YOUR_KEY' シングルクオーテーションの中を IFTTT Webhook のキーに変更します。
こちらを実行して内蔵スイッチを右・左・押してみると、LINE Notify に left right push が送られます。
余分な文字を減らしてメッセージを整える
IFTTT で受け付けたメッセージが編集できます。
このメッセージですと value2 value3 をメッセージを受け付けていますが、今回は value1 しか使いません。ちょっと整形してみましょう。
IFTTT の今回の Applet に移動します。IFTTT にアクセスして上部メニューの My Applet から Applet 一覧を表示し、今回の Applet をクリックします。
今回の Applet の右上の Settings ボタンをクリックして設定を表示します。
Then の LINE の設定をクリックします。
設定が表示されたら Message のフィールドをクリックすると {{Value1}} を囲われた部分が、Webhook から来た値 Value1 と置き換えます。
ちなみに、右下の Add ingredient をクリックすると、Webhook からもらえる値の一覧が表示されクリックすると {{ }} つきで入力できます。（今回は特に追加で入れるのではなく、減らしていくで操作する必要はありません）
ということで、Message フィールド内をこのように編集します。 {{Value1}} だけのシンプルなものです。編集できたら Update action をクリックします。
前のページに戻って、Edit Applet の画面に戻るので Update ボタンをクリックして設定を反映します。
これで準備が完了です。
再度 obniz を実行してみると、メッセージの内容がシンプルになります！
このように、obniz クラウドからはシンプルに値を送り IFTTT 側で、メッセージを調整することができます。
終了する
右上の終了ボタンをクリックします。
終了をすると obniz が処理待ちに戻ります。