この記事は？

LINE ThingsでなんかIoT的なことやってみたい！
と思ったときに、いろいろ情報はあるけど、ただただ、最初はデバイスとLINEの連携だけ動かしてみたいんだよなぁって情報は少なかったので、M5Stackから情報を送信して、LINEのLIFFに値を出すみたいな物を作ったのでそれを軽く紹介と解説の記事です。

LINE Thingsとは？

LINE Thingsは、LINEを介して、チャネルとBluetooth® Low Energy対応デバイスを連携し、操作を可能にするIoTプラットフォームです。

LINE Thingsについて

簡単に言うと、BLEを使ってLINEアプリとデバイスが通信することができて、LIFFなどを使ってデバイスを操作したりもできます。

最近では自動通信機能が登場して、LINEBotと連携できるようになっていたりもします。

LIFFとは？

LINE Front-end Frameworkのことで、LINEのトークルーム内でWebアプリを起動することができ、そのWebアプリからトークルームにテキストや画像を送信することができます。

LINE Front-end Framework - LINE Developers

LINEだけで操作を完結できるため、別のアプリを起動する必要がなくシンプルな操作で、UXの改善に役立ちます。

作った物

こんな感じの温度計です。

gifには写ってませんが、以下の写真のようにM5Stackに非接触温度センサユニットを装着して、その温度センサから取れる温度をLIFFに飛ばしています。

環境

開発環境

Mac(MacOS Mojave)
iOS版LINE
Arduino IDE(v1.8.5)

デバイス

M5Stack Gray
M5Stack用非接触温度センサユニット

ソースコード

こちらがLIFFとM5Stackのコードなります。

line-things-starterのリポジトリを参考にさせていただきました。

使い方は、liff.jsとline-things-thermometer.inoの{YOUR_SERVICE_UUID}を自分で取得したLINE-ThingsのサービスUUIDに置き換えて、LIFFアプリは自前やGitHubPages にホスティングするとか、ローカルで動かすなら、ngrokやserveoを使って外部に公開するなどして、LIFFで見れるようにしてください。M5StackはArduinoIDEを使って、温度センサーのついたM5Stackにline-things-thermometer.inoを書き込んでください。

サービスUUIDの取得についてはこちらの記事を参考にしてください。

ちょっと解説

通信部分について
今回はM5Stackで温度センサーの値を取って、BLE通信でLIFFに送信しています。

m5Stackの温度センサユニットを使用して、温度を取得するコードはこんな感じです

line-things-thermometer.ino

float getTemperature(void)
{
  Wire.beginTransmission(0x5A); // Send Initial Signal and I2C Bus Address
  Wire.write(0x07);             // Send data only once and add one address automatically.
  Wire.endTransmission(false);  // Stop signal
  Wire.requestFrom(0x5A, 2);    // Get 2 consecutive data from 0x5A, and the data is stored only.
  result = Wire.read();         // Receive DATAd
  result |= Wire.read() << 8;   // Receive DATA

  temperature = result * 0.02 - 273.15;

  return temperature;
}

取得した温度をBLE通信を使って送信しているのはこの部分です(途中でM5Stackやシリアルモニターにプリントしてますが気にしないでください)

line-things-thermometer.ino

 void loop()
{
  M5.update();
  
  // 温度の取得
  temperature = getTemperature();
  
  M5.Lcd.fillRect(120, 100, 120, 100, BLACK);
  M5.Lcd.setCursor(120, 100);

  char buf[24];
  // 温度をbufferに格納する
  snprintf(buf, 24, "%.0f", temperature * 10);

  M5.Lcd.println(temperature);
  Serial.println(buf);

  delay(500);

  M5.Lcd.clear();
  
  //bufferをセットして送信する
  notifyCharacteristic->setValue(buf);
  notifyCharacteristic->notify();

次にLIFF側でBLEで送信された値を受け取ってるのはこの部分です

liff.js

function liffGetTemperatureCharacteristic(characteristic) {
    characteristic.startNotifications().then(() => {
        // characteristicに変更があれば発火
        characteristic.addEventListener('characteristicvaluechanged', e => {
            const buff = (new Uint8Array(e.target.value.buffer));
            // bufferから値を数値で取り出す
            var val = Number((new TextDecoder).decode(buff));
            console.log(buff);
            // LIFFのUIに出す
            uiTemperature(val);  
        });
    }).catch(error => {
        uiStatusError(makeErrorMsg(error), false);
    });
}

以上です。
基本的にline-things-starterのコードを参考に、デバイスでの値の取得とデバイスからの送信、LIFF側での受信の部分を扱っているので、M5Stackで別のセンサーの値を送りたい場合でも、上記の部分のコードを変えるだけでほとんど対応ができると思います。

終わりに

今回は簡単にLINE ThingsでデバイスからLIFFにセンサーの値を送るものを作りましたが、次回はLIFF側から何かのアクションをデバイスに送る物を作ろかなと思います。

ちなみに、締め切りまで1週間をきっていますが、LINE Things Mini Awardというイベントもあるので、この記事でLINE Things触って見ようと思ったら、ぜひ応募してみてください。