iPhoneからJSONをPOSTする備忘録

◇はじめに

自動化の処理を行う際に、自分が持ってるスマホをトリガーにして処理を開始したい場面があります。

以前は、「Scriptable」というアプリを使ってHTTPのリクエストを行ったりしてたのですが（以下の記事）、ショートカットアプリ内でHTTPリクエストがJSON形式で行えることを知ったため（結構前からできる模様）、備忘録も兼ねて記事にします。

◇環境等

• 使用デバイス
  • iPhone SE3
    • OS：iOS17.5.1
• 使用アプリ
  • ショートカットアプリ
• 使用ツール・サービス
  • webhook.site
  • Azure Logic Apps
  • Postman Flows

◇実装手順

ショートカットアプリ

今回は、iPhoneにプリインストールされている「ショートカットアプリ」を使用します。

このアプリでは、複数の手順をひとつにまとめた、文字通りショートカットを作成できます。
また、詳細は後述しますが、ショートカットアプリ内のオートメーションを使うと、特定の条件をトリガとして、作成したショートカットを自動実行することも可能です。

新規ショートカットの作成

まず、ショートカットアプリを開き、右上の+ボタンを選択します。

次に、ショートカットの名称やアイコンを分かりやすいように変更します。
今回はそのまま「JSONポスト」という名称に設定しています。

アクションを追加していくのですが、今回はカテゴリの中から「Web」を選択します。
カテゴリ内にある「URLの内容を取得」アクションを選択します。
※検索から探してもOK

アクションの名称だけで判断すると、特定のURLからデータをとるためのアクションと勘違いしやすいですが、アクションの詳細に書いてあるように、HTTPメソッドも指定可能で、APIリクエストの実行にも使えます。

アクションを選択すると、URLや方法（HTTPメソッド）、ヘッダなどを入力できるようになります。
URLの箇所はとりあえずスキップし、方法をGETからPOSTに変更します。

POSTを選択すると、本文（body）を入力する項目が追加されます。要求方法は初期設定がJSONになってるため、このままにしておきます。
なお、JSON以外に「フォーム」と「ファイル」という選択肢がありました。

JSONを選択時、本文には以下の5つのデータ型が選択できます。とりあえず今回はそれぞれの項目を入力して実際にPOSTしてみます。

こちらが実際に入力したデータです。
上から順に、

• テキスト：userName
• 数字：userId
• 配列：tagList
• 辞書：SNS
• ブール値：isDeleted

の項目を選んで入力しています。

テキスト

テキスト型を選択した場合、キーとテキストを入力する項目が表示されるため、適宜入力します。
なお、通常JSONではキーにはダブルコーテーションをつけ、値（value）にも、文字列型の場合はダブルコーテーションで括る必要がありますが、ショートカットアプリ内で入力する際はダブルコーテーションは不要でした。

数字

数字型もテキスト型とほぼ同じです。キーと数字を入力する項目が表示されるため、適宜入力します。

配列

配列型を選択した場合、キーは同じように入力しますが、値の方には、項目を追加してそれぞれに対して、テキストや数字を入力していきます。
今回は、テキスト型の要素を4つ入力しています。
なお、配列の各要素にも、更に配列や辞書の選択肢があるため、ネストすることもできそうです（今回は試してません）。

辞書

辞書型はネスト構造のJSONを作成する際に使用します。
今回は、SNSをキー名とし、その中に各SNSの項目を入力しています。

配列同様、各要素内には配列や辞書の選択肢があるため、更にネストすることもできそうです（今回は試してません）。

ブール値

ブール型の場合はキーの入力は他と変わりませんが、値部分は真or偽のどちらかを選択する形になります。

ここまでで、URL以外のアクションが完成したので、一旦完了ボタンを押して終了します。

◇動作確認

作ったショートカットを実行して、実際にデータを受け取ってみます。
今回はいくつかのサービスを使っています。
なお、それぞれのサービスで発行されるURLが異なるため、発行されたURLを先ほど作成したショートカットのURL欄に入力しています。

webhook.site

webhook.siteは個別にWebhook用のURLを割り振ってくれ、そのURLにアクセスする度にその詳細を表示してくれるサイトです。

参考にしたサイトを以下に記載します。

まずサイトにアクセスすると、自動的に個別のURLが割り振られます。

そのURLを先ほどのショートカット内のURLに入力します。

その後、ショートカットを実行するのですが、以下のようなポップアップが出た場合は許可を選択します。

ショートカットを実行後、再度webhook.siteを見ると、アクセス内容が左側に表示されます。
出力結果は下の画像のようになります。

出力結果

{
  "": [],
  "SNS": {
    "Qiita": {
      "name": "@yankee",
      "articleNum": 17
    },
    "Zenn": {
      "name": "@yankee",
      "articleNum": 8
    },
    "Github": {
      "name": "yankee-08",
      "repository": 5
    }
  },
  "tagList": [
    "IoT",
    "ローコード",
    "マイコン",
    "自宅サーバ"
  ],
  "isDeleted": false,
  "userId": 123,
  "userName": "yankee"
}

問題なく、JSON形式でPOSTされていることが確認できました。
なお、今回はショートカットアプリ内でヘッダーに"Content-Type:application/json"を指定していませんでしたが、webhook.site上の出力を見ると自動で"Content-Type:application/json"に設定されているようです。

---

Azure Logic Apps

次に、Azure Logic Appsを使って動作を確認してみます。
Azure Logic Appsは別の記事でも使っていますが、Azure版Power Automateといった形でPower Automate使ったことがあればそこまで戸惑わずに使えました（厳密にはできることが少し異なります）。
Power Automateのプレミアムコネクタが従量制で使えるので、個人的にちょっと試す際などに使ってます。
Azure Logic Appsの概要は以下のサイトが参考になりました。

Azure Logic Appsのリソース作成方法については割愛します。
リソース作成方法は公式ドキュメントに手順が載っているので、こちらを参考にしてください。

なお、Azure Logic Appsには、Standardプランと従量課金プランがありますが、今回は従量課金プランを選択しています。

全体のフローは以下のようになります。今回はトリガはWhen a HTTP request is receivedトリガを使用しました。

以下の公式サイトとほぼ同じ手順です。

When a HTTP request is receivedトリガでは、POSTメソッドのみ有効に設定しJSONスキーマについては、サンプルのペイロードから生成する方法を使っています。

Responseアクションでは、受け取ったデータのbodyをそのまま送り返しています。

ここまでできたら、保存ボタンを押します。すると、When a HTTP request is receivedトリガにWebhook用のURLが発行されるため、そのURLをショートカットアプリ内のURL欄に入力します。

ショートカットを実行後、作成したAzure Logic Appsのフローの実行履歴画面を開くとフロー実行履歴が表示されているはずです。
各行の実行結果の項目をクリックすることでフローの結果詳細を確認できます。
When a HTTP request is receivedトリガ内の「出力」-「body」を確認すると以下のようになっており、JSON形式でデータが送られていることが確認できます。

body全文

{
  "": [],
  "SNS": {
    "Qiita": {
      "name": "@yankee",
      "articleNum": 17
    },
    "Zenn": {
      "name": "@yankee",
      "articleNum": 8
    },
    "Github": {
      "name": "yankee-08",
      "repository": 5
    }
  },
  "tagList": [
    "IoT",
    "ローコード",
    "マイコン",
    "自宅サーバ"
  ],
  "isDeleted": false,
  "userId": 123,
  "userName": "yankee"
}

---

Postman Flows

最後に、Postman Flowsを使って動作を確認してみます。
Postman FlowsはPostmanのサービスの1つで、ワークフローを構築するためのビジュアルエディターです。
詳細は、公式の資料が参考になります。

つい最近、Postman Flowsのオンラインハッカソンがあり、これに向けてiPhoneショートカットと上手く連携できないかと言うところを試していましたが、結局完成には至らず、ハッカソンには応募できずじまいでした。
なので、せめてそのときに調べた内容を記事にしておこうと思ったのがこの記事を書くキッカケです。

Postman Flowsで新規フローを作成するには、トップ画面の左側から「フロー」を選択します。
なお、フローのアイコンが表示されていない場合は、黄色枠のアプリ追加アイコンを選択し、フローのチェックボックスを有効化してください。

「新規」ボタンを追加すると新たにフローが作成されますので、フローの名称を分かりやすい名前に設定しておきます。

ここにブロックを追加していく流れになるのですが、今回はHTTPリクエストした内容が正しく届いているかを確認するだけなので、Logブロックを配置します。
ブロックを配置するには、Startブロック右端をマウスクリックしてドラッグするか、何もない画面上で右クリックすることで新規ブロック追加メニューが表示されます。

各ブロックの役割はこちらの記事が参考にしてもらえればと思います。

出力系のブロックとしては、Logブロックに加えて、Outputブロックもあり、こちらはデータの表示やチャート、テーブル形式の表示など様々な表示が可能なのですが、今回試した限りでは、HTTPリクエストのbodyに格納したJSONデータを上手く表示することができませんでした。
ブロックの設定方法が誤っているのか、仕様なのか現状不明なため、解決した場合は追ってこの記事に反映したいと思います。

ブロックの配置が完了したら、左側にWebhookのCreateを選択します。

その後、このフローを実行するためのURLが表示されるため、このURLをショートカットのURL欄に入力します。
なお、このときに必ずPublishを実行してください。
（フローの中身を変更する度にPublishを実行しないとそのフローが更新されないため注意）

次に、三点リーダーを選択後、View published versionを選択します。

この状態でログ出力画面が下部に表示されていない場合はView Live Logsボタンを選択して、ログ出力画面を表示します。

ここまでできたら、先ほど同様ショートカットを実行すると、Postman Flowsのログ出力画面に新規でログが出力されます。

こちらでも問題なく、JSON形式のデータが送られていることを確認できました。

◇オートメーション機能

ショートカットアプリには、オートメーション機能があり、この機能を活用すると先ほどのJSONをPOSTするトリガーを設定することができます。
オートメーションの概要は公式ページに詳しい記載があります。

試しに、簡単なオートメーションを新規作成し、その中で先ほど作成したショートカットを呼び出してみます。

まず、ショートカットアプリを開き、オートメーションのタブを選択します。

右上の+ボタンを選択し、新規オートメーションの作成画面に遷移します。
その後、オートメーションの実行条件（トリガ）を一覧から選択します。

今回は、Wi-Fiへの接続をトリガとしています。

なお、使用できるトリガについては、公式ドキュメントに記載があります。

ネットワークの項目では、過去に接続したネットワーク（SSID）を選択するか、任意のネットワークを選択します。
今回は、任意のネットワークとしています。
オートメーションの実行時は「確認後に実行」としています。

「次へ」を選択すると、アクションを選択すル画面になるので、先ほど作成した、「JSONポスト」ショートカットを選択します。

これでオートメーションが作成できましたので、Wi-Fiを一旦切断後に改めてWi-Fiを接続してみます。
すると、画面上部にショートカットの実行に関する通知が表示されるので、これを選択すると、ショートカットの実行確認画面が表示されます。
ここで、実行を選択すると、先ほど同様ショートカットが実行され、JSONがPOSTされました。

ちなみに、オートメーション登録時に「確認後に実行」ではなく、「すぐに実行」を選択した場合、下のような通知が表示され、ショートカットが自動的に実行されました。

◇おわりに

今回は、JSONをPOSTするまでを試しましたが、次回はこのショートカットを使って、自動化を試してみたいと思います。

🔚END