お手軽IoTツール 「MESH」 ~始め方からREST APIを叩いてみるところまでやってみた~

はじめに

・MESHに出会ってから私自身まだ半年ですが、色々触っていく中ですごく良い製品だと感じました。この感動をぜひ共感したくこのページを書きました。決してMESHの回し者ではありません笑
・IoTを始めてみたいけど、ハードル高そうでなかなか試せてないっという方におすすめです。
・かな~り長文ですので、興味ないところはすっ飛ばしながら読んで頂けると助かります。

このページの目標

• MESHの概要を理解し、始め方からカスタムコードによるWEB APIの連携まで使って見るところまでを目指します。
• このページを最後までやるとざっとですが以下のことが理解できると思います。
  • MESHの基本的な使い方(GPIOタグは除く)
  • MESHのカスタムタグからREST APIを叩く方法
  • Qiita API(REST API)の基本的な使い方

そもそもMESHってなに？

• Bluetoothを搭載したIoTブロック（SONY製）です。スマホと連携して様々な仕掛けを作ることができます。現在7種類のIoTブロックがあり、MESHではIoTブロックのことを「MESHタグ」と呼ぶようです。

[MESH IoTブロックラインナップ]

• MESHの特筆すべき特徴

その１：ノンプログラミングで簡単にIoTを試せる！

・MESHではスマートフォンアプリとIoT デバイスをBluetoohで連携可能なので、マイコンや電子回路の知識を必要とせずに簡単に始めることができます。
・スマートフォンアプリでは直感的なプログラミング(ドラック＆ドロップ)が可能なため手軽に様々な仕掛けを作成することができます。

その２：クラウドサービス・REST APIとの連携が可能！

・GmailやIFTTT(イフト)といったクラウドサービスとの連携が標準で搭載されています。※IFTTTって何？という方はこちらを読んでみてください。
・MESH SDKを利用するとREST APIを叩くことも可能です。※こちらはJava Scriptによるコーディングが必要です。

その３：GPIOも使える!

・GPIOも使えるので秋葉原で買えるようなセンサーも使うことが可能です。
　※こちらの機能は私も試したことがないので詳しくは分かっていません。

[スマートフォンアプリの画面イメージ]

• つまるところMESHとは！
  センサ-スマホ-クラウド連携を実現する本格的なIoTツールです！しかも、ほぼノンプログラミングで！(※1) めっちゃ凄い製品だと思いませんか！？

  (※1):MESHに焦点を当てて考慮した場合です。IFTTT等のクラウドサービス使う場合はプログラミングが必要になるかもです。偉そうに書いてますが、私自身はあんまりIFTTTを使ったことがありません。

ごちゃごちゃ書いてるけど結局何？と思ったあなた

細かいことはいいから何ができるのか教えてくれ！っと思ったあなたはMESHレシピ集を覗いてみてください。様々な活用例が載っているのでイメージし易いと思います。

めっちゃいい製品だけど実用での利用は厳しいかも!?

• 一応MESHの長所だけなく、短所についても考察してみました。

  ※MESHハブを使うとスマホだけでなくラズパイでもMESHタグを利用できるようですが、今回はスマホを前提に記載しています。

• 以下に短所を挙げました。

  「実用での利用が厳しそう」＝「短所」という観点で列挙しています。
  • その１：スマホが10m以内に無いと使えない。

    ※詳しくはこちら
  • その２：バッテリーが１ヶ月くらいしか持たない。

    ※詳しくはこちら
  • その３：スマホ1台につきMAX10個までのMESHタグしか使えない。

    ※詳しくはこちら
  • その４：MESHタグ単価が高い。

    ・一番安いものでも5,980円します。※詳しくはこちら
  • その５：屋外の利用は厳しそう。

    ・屋外で使えないことは無いのですが、温度が0℃～ 35℃、防水、防塵、耐塩害性は無しという条件、更に寿命や運用まで考慮すると屋外どこでもという訳にはいかなさそうです。※詳しくはこちら
    
    

• 以上の点を踏まえると、学校で、個人宅で、オフィスの会議室で、といった限定的なシーンでは実用での利用が可能と言えそうです。

  しかし、工場や屋外といったより幅広いシーンではさまざまな問題や課題に直面することが想定されるため、残念ながら実用での利用は厳しそうと言わざる得ないでしょう。

MESHをはじめる

これから作成するもの

• MESHタグ(ボタン)をリモートシャッターに見立て、遠隔操作でスマホの自撮りをやってみる。

必要なもの

• ハードウェア：
  • スマホ(iOSかAndroid)
  • MESHタグのボタンタグ(緑色のブロック)
• ソフトウェア：
  • MESHアプリ(Apple store, Google Playから無料でダウンロード)

MESHアプリの初期設定

• まずはMESHアプリとMESHタグをペアリングさせ、Bluetooth接続を確立します。
• MESHアプリを起動後、チュートリアルに従ってください。めっちゃ分かりやすかったのでここでの詳細説明はやめておきます。代わりにちょっと分かりにくかったと感じたところのみ、解説します。

• 分かりにくいと感じた点：

  • その１：MESHタグの電源について
    長押しすると白く光り電源がオンになります。すぐに光が消えてしまうので、あれ電源入った？と感じるかもしれません。続けて、短押しすると今度は緑に光るはずです。緑に光っていれば電源が入っています。ちなみにもう一度長押しすると電源がオフになります。
  • その２：ペアリングについて
    ペアリング初回時は中々に時間が掛かります。MESHタグをスマホに近づけてみたり、付近にBlutooth通信機器がある場合離れてみたり、MESHタグを再起動するなど辛抱強く試してみてください。

[左：長押し時、右：短押し時]

MESHの仕掛けを作ってみる

• こちらもチュートリアルが充実しているので詳細な説明は省きました。以下図のように作ってみてください。
  

• これで完成です！あとはボタンタグを押して見てください。パシャリと音がなって写真が撮れるはずです。めっちゃ簡単ですね！！ちなみにちょっと残念なのですが、カメラアプリのようにカメラ画面は出てきません。なのでどんな写真になるかは撮ってからでないと分からないです。自撮りするにはかなり難易度高いですね笑

• これじゃ物足りないという方はMESHレシピ集を参考に色々試して見てください。ノンプログラミングで作れるので色んな仕掛けがサクサクと作れると思います。

MESH SDKとカスタムタグを使ってREST APIを叩いてみる

• ここから先は中級向けになってきます※プログラミングも必要になってくるため

これから作成するもの

必要なもの

• ハードウェア：
  • スマホ(iOSかAndroid)
  • MESHタグのボタンタグ(緑色のブロック)
• ソフトウェア：
  • MESHアプリ(Apple store, Google Playから無料でダウンロード)
  • MESH SDK アカウント
  • Qiita アカウント

Qiita APIの準備

APIの有効化　~アクセストークンの発行~

• Qiitaの設定画面にアクセスし、画面左のナビゲーションペインから「アプリケーション」を選択し、リンク「新しくトークンを発行する」をクリックする。

-　必要事項を記述し、「発行する」をクリックして権限を設定します。今回は「read_qiita」のみにしてみました。
ちなみにQiita APIv2ドキュメントによると各スコープは以下を意味するそうです。

read_qiita - Qiitaからアクセストークンに紐付いたユーザに関連したデータを読み出す
read_qiita_team - Qiita:Teamからデータを読み出す
write_qiita - Qiitaにデータを書き込む
write_qiita_team - Qiita:Teamにデータを書き込む


• アクセストークンが発行されたので、メモ帳等にコピペしておきます。

Qiita APIのテスト〜Postmanを使ってみる〜

• Postmanというツールをご存知でしょうか？REST APIを簡単に試すのに便利なツール(Chromeアプリ)です。最近はネイティブアプリでもリリースされています。今回はこのPostmanを使ってQiita API経由で私自身が投稿した記事を取得してみます。

• Postmanを起動し、画面上部のバーを"GET"にし入力欄に「https://qiita.com/api/v2/authenticated_user/items?page=1&per_page=20」
  を入力します。その後バーのすぐ下の「Headers」タブをクリックしkey欄に「Authorization」、value欄に「Bearer▲アクセストークン」を入力します。※▲は半角スペース
  成功すれば下の画像のようにPostmanの画面下部にjsonデータがダウンロードされます。
  

• Postman でjavascriptの自動生成
  画面右上の方に「code」というボタンがあるのでそれを押します。
  プルダウンメニューから言語を選択します。今回は「JavaScript Jequery Ajax」を選択します。
  このコードは後ほど利用します。
  

  MESH SDKの準備

  アカウント新規作成

• MESH公式サイトへアクセスし"Create New Account"をクリックします。

[MESH SDKログインサイト]

• 必要事項を入力し、"I agree to the MESH SDK Terms of Use"をチェックし"REGISTER"ボタンをクリックします。クリック後登録確認画面に遷移しますので、再度REGISTER"ボタンをクリックします。

[MESH SDK アカウント新規登録]

• 以下のようなアカウント認証メールが送られてくるので、メール本文のリンクををクリックしてアカウントをアクティベートします。※メールが送られてから7日間でリンクが無効化されるので忘れずにクリックしておきましょう

[アカウント認証メール]

カスタムコードを作成する

• アカウント認証後、Mesh SDKにログインすると以下のようなページにアクセスできます。「Create New Tag」をクリックします。
• タグの名前やアイコンをお好みで命名します。また「Function」もお好みで命名し、「▼」を押してメニューを展開します。次に「Connector」の「Input Conneotor」と「Output Connector」の「+」をクリックします。
• 「Code」の「▼」をクリックして次に「Execute」をクリックして、コードを記述します。

コードには先程Postmanで生成したコードを貼り付け一部手直します。
修正１：変数settingsのheaderから「postman-token」を消す
修正２：$.ajax().done()のコールバック関数中console.log()→logに変更
追加１：$.ajax().done()のコールバック関数中、APIの結果の生データと整形データをログとして出力する処理を追加

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://qiita.com/api/v2/authenticated_user/items?page=1&per_page=20",
  "method": "GET",
  "headers": {
    "authorization": "Bearer yourQiitaAccessToken",
    "content-type": "Application/json",
    "cache-control": "no-cache"
  }
}

$.ajax(settings).done(function (response) {
  log(JSON.stringify(response));
    for(var i = 0; i < response.length; i++){
        log("//////////\nタイトル ：" + response[i].title + "\n内容：" + response[i].body);
    }
});

最後にページ上部にある「SAVE」をクリックします。

• 上記はPostmanで思いっきり楽しましたが、公式ドキュメントに則って真面目にコードを書いてみました。

ajax ({
    url: "https://qiita.com/api/v2/authenticated_user/items?page=1&per_page=20",
    method: "GET",
    headers: {
        "authorization": "Bearer yourQiitaAccessToken",
        "content-type": "Application/json",
        "cache-control": "no-cache"
      },
    timeout : 5000,
    success: function( contents ){
        log(JSON.stringify(contents));
        for(var i = 0; i <  contents .length; i++){
            log("//////////\nタイトル ：" +  contents [i].title + "\n内容：" +  contents [i].body);
        }
        callbackSuccess( {
            resultType : "continue",
            runtimeValues : runtimeValues
        } );
    },
    error : function ( request, errorMessage ) {
        log("request:" + JSON.stringify(request));
        log("errorMessage:" + JSON.stringify(errorMessage));
        callbackSuccess( {
            resultType : "continue",
            runtimeValues : runtimeValues
        } );
    }
});

return {
    resultType : "pause"
};

※細かすぎるのですが、私が最近ハマったので書いておきます。興味ある方はどうぞ

ポイントとしてはcallbackSuccess()とコード末尾のretrun文です。
後に、MESHのアプリ内にてタグを連携させるためには意識しておく必要があります。
retrun文のpauseによりajaxの非同期通信が終わるまで一時的に待機し、終了したらcallbackSuccess()中のcontinue信号を次のタグに伝える仕様になってます。javascriptは非同期処理のため、同期処理が必要な場合はコールバック関数を使って明示的に記載する必要があるみたいです

MESHアプリとの連携設定

• ここからはiOSアプリまたはAndroidアプリの操作になります。アプリを起動し、画面右上の「・・・」をタップし、「アカウント」をタップします。
• MESH SDKのサインインに使ったメールアドレス、パスワードを使って認証を行います。
• ログイン後は今まで作ってきたカスタムアプリ一覧が表示されます。皆様は先程作ったアプリを追加してください。

MESHの仕掛けを作る

• 画面右のナビゲーションのカスタムの項目から先程加えたタグを長押しして、画面中央にドラッグ&ドロップします。次にボタンタグも追加し、以下図のようにします。
  

• ここまでで準備は完了です。MESHタグ(ボタン)をクリックして見てください。その後アプリの画面右のナビゲーションのカスタムの項目のログをクリックするとAPIで引き出したQiitaの情報が吐き出されています。
  

最後に

MESH SDKを使った外部クラウドサービスとの連携に苦労したので備忘録も兼ねて書いてみました。
結構ハマったところもありましたが、やはりしっかりと解説されているリファレンスマニュアルをベースに色々試して見るのが良いと思います。
IFTTTとかとも連携させてみるとLINEをはじめ各種様々なクラウドサービスとの連携が更に簡単に幅広くできるので可能性が広がります。
MESHを色々いじってみた結果、「簡易&お手軽なNode-RED」のようなものだと感じました。Node-REDにハードルを感じている方はMESHから初めて見るのもありかと

引用・参考サイト

引用：MESH公式サイト
参考：MESH SDKログインサイト
参考：MESH SDK リファレンスマニュアル
参考：さまざまなサービスが連携できる「IFTTT（イフト）」の使い方
参考：MESHレシピ集
参考：MESHタグのバッテリーはどのぐらいもちますか？
参考：MESHはどのようなOS、機器で利用できますか？
参考：MESHタグは屋外でも使うことができますか？
参考：MESH製品仕様
参考：Qiita APIv2ドキュメント
参考：(Qiita API v2 活用) Qiita の記事を API 経由で取得する方法