Mesh
myThingsDevelopers
myThingsDay 13

MESHソフトウェアタグとmyThings Developersをつないでみる

More than 1 year has passed since last update.

今回は下記の記事を参考にMESH × myThings Developersの記事を書きます。

概要

MESHボタンタグを押したら myThings Developers に連携し、そこから Twitter で自分にリダイレクトメッセージを送るというサンプルを紹介したいと思います。

準備するもの

流れ

  1. myThings Developers の準備
  2. MESHソフトウェアタグの作成
  3. MESHアプリでボタンタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる

1. myThings Developers の準備

1-1. 組み合わせの作成

今回は、下図の様にカスタムトリガーとTwitterを使った組み合わせを作成します。
組み合わせ.png

カスタムトリガーは下図のように設定します。
キーmsg名称メッセージ を設定します。
カスタムトリガー.png

Twitterは下図のように設定します。
アクション自分にダイレクトメッセージを送信 を選択し、メッセージは以下のように設定します。
{{メッセージ}} の部分にMESHから送られてきたメッセージが入る予定です。

MESHからのメッセージ
{{メッセージ}}

Twitter.png

1-2. テスト実行

組み合わせの作成が完了すると、テスト実行ができるようになります。
作った組み合わせが正しく動作するか確認します。
下図のように設定を行い、テスト実行を行うとTwitterの自分のアカウントにメッセージが届きます。
テスト実行.png

Twitterの自分へのダイレクトメッセージは下記のようになっているはずです。
Twitterテスト実行.png

これで、組み合わせが正しく動作することが確認出来ました。

1-3. 疎通確認

次に疎通確認のサンプルコードからMESHとの連携に必要な情報を抜き出します。

まずは下図の画面からサンプルコードを表示 ボタンを押して、サンプルコードを表示させます。
疎通確認サンプルコード.png

下記のようなサンプルコードが表示されます。
Step.2 組み合わせ実行確認の部分へスクロールして下さい。(表示された画面の下の方にあります。)
表示させたサンプルコードから$url$access_tokenに設定されている値をコピーして、手元に残しておいて下さい。後の手順で使用します。
サンプルコード.png

上記サンプルコードのすぐ上にサンプルレスポンスという部分があります。
そこからurlに設定されているhttps://mythings-developers.yahoo.co.jp/services/...という部分をコピーしてブラウザのアドレスバーにペーストしてください。
ユーザー設定URL取得.png

そうすると、下図のような画面が表示されるので、設定完了ボタンを押して設定を保存します。
(※コレを行っておかないとMESHでボタンタグを押してもTwitterへメッセージは飛びません。)
ユーザー設定.png

2. MESHソフトウェアタグの作成

2-1. MESH SDKのDeveloperアカウント登録

まずは、MESHソフトウェアタグを作成するための準備として、アカウント登録を行います。
このページからDeveloperアカウントを登録して、SDKを開きます。
登録方法が分からない場合は下記の記事を参考にしてください。

MESHソフトウェアタグの作成

Developerアカウントの登録が完了するとタグの作成ページが表示されるので、 Create New Tag ボタンを押してタグの作成画面を呼び出します。
タグ作成呼び出し.png

ボタンを押すと下記の画面が表示されるはずです。
まずは、タグの名称とFunctionの名称を設定します。
今回は、タグの名称は myThings Dev とし、Functionの名称は call myThingsと設定します。
タグ作成1.png

次にInputを設定します。
(これを設定しておかないとMESHアプリに追加した時に、ボタンタグと繋げる事ができないです。)
タグ作成2.png

最後にCodeを追加します。
CodeExecuteを選択し、以下のサンプルコードをコピーします。

//The API which gets daily weather forecast
var apiURL = "https://mythings-developers.yahooapis.jp/v2/services/<個別の値>/mythings/<個別の値>/run";

// アクセストークン
var accessToken = "<個別の値>";

var postArgs = {"msg": "テストメッセージ"};
var data = {"entry": JSON.stringify(postArgs)};

ajax ({
    url : apiURL,
    data : data,
    type : "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        "Authorization": "Bearer " + accessToken,
    },
    timeout : 5000,
    success : function ( contents ) {
        log("Success");
    },
    error : function ( request, errorMessage ) {
        log("Error");
    }
});

サンプルコード内の<個別の値>となっている部分は、myThings Developers疎通確認 の部分で取得した値に置き換えてください。
疎通確認Executeの各値の対応は以下になります。

疎通確認 Execute 備考
$url apiURL カスタムトリガー実行APIエンドポイント
$access_token accessToken アクセストークン

上記全ての入力が完了したら、左上のSaveを押して、タグを保存します。

タグ保存.png

タグの作成は以上です。

3. MESHアプリでボタンタグとソフトウェアタグ(myThings Developers)を繋いで、動かしてみる

3-1. アプリにDeveloperアカウントを紐付ける

アプリの右上のメニューからSDKを選択し、Developerアカウント登録したアカウントを紐付けます。
アカウント連携.jpg

3-2. ソフトウェアタグを追加する

次に右下にあるカスタムの追加ボタンを押して、ソフトウェアタグの追加画面を出します。
そうすると先程作ったmyThings Devが一覧に表示されるので選択すると下記の画面が表示されます。
そして追加ボタンをおすとログの右隣にmyThings...というタグが増えています。
ソフトウェアタグ追加.jpg

3-3. ボタンタグをソフトウェアタグを繋げる

あとはボタンタグと先ほど追加されたソフトウェアタグを繋げて完成です。
MESH.jpg

3-4. ボタンタグを押したらTwitterにメッセージが飛ぶ

あとはMESHのボタンタグを押せばTwitterにメッセージが飛びます。
動作確認.JPG

最後に

MESHとmyThings Developersって結構簡単に繋がりましたね。
(実際にやってみたら1時間程で繋がりました。)

但し、今回の方法には注意点があります!
今回の方法だと1時間程度しかMESHと連携できません。

理由は、私がサボって実装したからです。
今回、連携で使用したアクセストークンというものは有効期限があって、
それが1時間程度だからです。
サンプルコードにはリフレッシュトークンを使って有効期限が切れたアクセストークンをリフレッシュする処理が入っているのですが、私がサボってその実装を組み込んでいません。

すいません。時間があれば対応したいと思います!

1時間以上経ってしまって動かないけど、また動かしたいと思った方は、
myThings Developersで再度、サンプルコードを表示させてアクセストークンを取得して下さい。
そして、MESHソフトウェアタグのCodeExecuteに設定しているアクセストークンを書き換えて保存し、再度アプリ側でソフトウェアタグの追加を行うと動くようになります。