LoginSignup
0
3

More than 5 years have passed since last update.

@shisaito

Webscript.ioを使って簡単にカスタムアクションを試す方法

Last updated at Posted at 2016-11-01

概要

myThings Developersでカスタムアクションを利用する場合は、リクエストを受け付けるためのウェブサーバが必要になります。しかし、ほとんどの方は、公開されたウェブサーバを持っていないと思いますので、簡単にカスタムアクションを試す方法を紹介します。

ここでは、webscript.ioというサービスを使って、myThingsサーバとのやりとりを確認します。
また、組み合わせの例として、Y!天気→カスタムアクションを設定しています。
スクリーンショット 2016-10-16 13.18.52.png

webscript.ioとは？

webscript.ioとはオンライン上で、自分でサーバを用意することなく、発行されたURLを利用して、リクエストの確認やwebhoookのテストが簡単に行えるウェブサービスです。
しかも、アカウント登録なしで、試せます。

カスタムアクションのテスト方法

1.webscript.ioのURL発行

まずは、https://www.webscript.io/ にアクセスします。
画面上部のメニュー項目からScriptsを選択し、規約同意画面に進みます。
規約同意すると、テスト用のURLが発行されます。URLは7日間有効です。
all2.png

2.発行されたURLにアクセスする

発行されたURLの右にリンクのアイコンがありますので、クリックして開きます。
もしくは、URLをコピペして、ブラウザで開きます。
http://[発行されたURL].webscript.io/script

アクセスすると、あらかじめ設定されたメッセージが実行されます。

// ブラウザに表示されるレスポンス内容
I'm a webscript.io script. I was called with an HTTP GET request, with the following headers:

{"Accept-Language": "ja,en-US;　〜省略〜}

3.ログを確認する

管理画面に戻るとRequest log（スクリプトの下）に、ログが出力されています。
このログを確認することで、webscript.ioへのリクエスト内容、レスポンス内容を確認することができます。
get_sample.png

基本的な使い方はこれだけです。発行されたURLにアクセスするたびにログが出力されます。

4.スクリプトをカスタマイズする

次にスクリプトを編集してみます。
行番号が振っているテキストフィールドをクリックして、スクリプトを編集します。
webscript.ioでは、Lua(ルア、https://ja.wikipedia.org/wiki/Lua) と呼ばれるスクリプト言語を用いて処理を書くことができます。webscript上で簡単な前処理を行った上で、レスポンスを返すといったことも可能です。詳しくは、ExamplesやDocumentationを参考にしてください。

まずは、以下のサンプルに書き換えてみます。
returnは、アクセスしてきたブラウザやサーバに対して、返す内容（レスポンスデータ）を書きます。

-- 記述サンプル。どれか1つをコピペする
return "Success!"
return "<h1>Hello, World!</h1>", {["Content-Type"]="text/html"}
return 200
return request.headers

-- こんな書き方も可能です。user_idだけを返します
local json = json.parse(request.body)
return json.user_id

5.カスタムアクションにURLを登録する

次に、myThings Developersの画面に戻ります。
webscript.ioで発行したURLをコピーして、カスタムアクションのリクエストURLにセットします。
custom-url.png

シークレットは、空欄のままでOKです。設定を保存してください。
リクエスト内容のこちらをクリックすると、送られてくるデータ項目のイメージを確認できます。

6.テスト実行

カスタムアクションを保存して、組み合わせが正常に作成されると、テスト実行の画面が表示されます。
テスト実行用設定ボタンを押して、作成した組み合わせをテストします。
スクリーンショット 2016-10-16 11.30.24.png

テストで送るデータ項目を設定し、テスト実行を押します。
（初回アクセス時でチャンネルの認証を行っていない場合は、先に認証を行います。）

ここでは、カスタムアクションに東京都渋谷区の天気予報情報を渡します。
実行すると、myThingsのサーバから、カスタムアクションのURLにデータが送られます。
スクリーンショット 2016-10-16 11.33.19.png

7.ログを確認する

webscript.ioの画面でログを確認してみましょう。
myThingsのサーバからPOSTのデータが届いています。
post-data.png

ヘッダ情報に続いて、送られてくる内容（BODY）がmyThingsの利用者情報と天気情報です。
エンコードされた情報は、読みにくいため、JSONの内容をデコード・整形すると読みやすくなります。
ここでは、JSON formatterというサービスを使って、デコードと整形します。
jsonを貼り付けて、Format/Beautifyボタンを押します。

{
   "user_id":"***************************",
   "service_id":"4df05bd0ce07010b8be9824e6a2edc83",
   "mythings_id":"aeeee6a113cd0b14534028143e6654ff",
   "values":[
      {
         "jisName":"\u6771\u4eac\uff08\u6771\u4eac\uff09",
         "date":"2016-10-15",
         "weather":"\u6674\u308c",
         "image":"http:\/\/i.yimg.jp\/images\/weather\/general\/forecast\/moon.gif",
         "url":"http:\/\/weather.yahoo.co.jp\/weather\/jp\/13\/4410\/13113.html",
         "highTemp":"23",
         "lowTemp":"12",
         "precip":"0",
         "wind":"\u6771\u306e\u98a8",
         "wave":"0.5\u30e1\u30fc\u30c8\u30eb"
      }
   ]
}

json内容のデコード後↓

{
  "user_id": "***************************",
  "service_id": "4df05bd0ce07010b8be9824e6a2edc83",
  "mythings_id": "aeeee6a113cd0b14534028143e6654ff",
  "values": [
    {
      "jisName": "東京（東京）",
      "date": "2016-10-15",
      "weather": "晴れ",
      "image": "http://i.yimg.jp/images/weather/general/forecast/moon.gif",
      "url": "http://weather.yahoo.co.jp/weather/jp/13/4410/13113.html",
      "highTemp": "23",
      "lowTemp": "12",
      "precip": "0",
      "wind": "東の風",
      "wave": "0.5メートル"
    }
  ]
}

これで、myThingsから送られてきたデータ内容を確認できます。

まとめ

今回は、webscript.io上でデータの内容を確認しましたが、実際のサーバで受け取って処理することにより、天気予報と連携したサービスを作ることができます。ほかにも役立つチャンネルが多数ありますので、組み合わせを試してみてください。アイディア次第で、面白いサービスを簡単に作ることができます。

トラブルシューティング

  • myThingsのテスト実行が失敗する
    • チャンネルの認証が成功しているか確認してください。一度チャンネル認証を解除して、再認証してみてください。
    • テスト実行は、しばらく時間が経過すると無効になるため、再度テスト用設定画面を呼び出して、テスト実行を行ってください。
  • webscript.io側のログで400や500のエラーが出る
    • スクリプトの文法エラーの可能性があります。文法エラーが出ていないか確認してください。
  • 天気のデータが同じ内容で繰り返し届く
    • 天気予報は15分毎に発火します。データの変更が無くても1時間に4回通知されます。（設定トリガーによって発火条件、タイミングは異なります）
    • 手動でテスト実行した時は、その都度、データが通知されます。テストデータが送られるものもあります。
  • 天気の内容に応じて条件分岐するように動かしたい
    • トリガーは1つしか設定できないため、複数の組み合わせを作って対応します。例えば、URLのパラメータで、晴れだったら/tenki?sunny、雨だったら/tenki?rainy というようにカスタムアクションの飛ばし先を複数用意する方法があります。
    • もしくは、カスタムアクション側（サーバ）でパラメータやPOST内容を判定して、処理を分ける方法があります。
  • 組み合わせを定期的に実行したい
    • 15分毎や決まった時間で定期的に組み合わせを動かしてみたい場合は、次のステップにある疎通確認に沿って進めてください。
  • その他
0
3
1

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
0
3