iPhoneショートカットAppで「これから帰るよ〜」をSlackに投稿するショートカット作成方法

この記事は、[Code Polaris Advent Calendar 2024](https://qiita.com/advent-calendar/2024/code-polaris) 7日目の記事です。

# はじめに
仕事終わりに、家族とのチャンネルに「これから帰るよ〜」とSlackに投稿している。
1. Slackを開く
2. チャンネルを探す
3. テキストを入力する
4. 投稿ボタンを押す

一連の操作を毎回行うが面倒になってきたので、iPhoneのショートカットアプリでショートカットを作ることにした。

# 環境
* iOSバージョン: 18.1.1
* Slackバージョン
    * デスクトップ版: 4.41.98
    * モバイル版: 24.11.30

# 手順
## 1. SlackのWebhook URLを取得する

### 1-1. Slackのアプリケーション追加ページより incoming-webhooks を検索・選択する。
* https://slack.com/apps

![スクリーンショット 2024-11-27 19.15.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/647fb997-a171-c620-6b3b-5db6edb0e8ba.png)


### 1-2. 「Slackに追加」をクリック
![スクリーンショット 2024-11-27 19.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/b9fb8ce2-e3a7-c92b-720b-922fa6f12e07.png)

### 1-3. 「Incoming Webhook インテグレーションの追加」をクリック
![スクリーンショット 2024-11-27 19.22.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/53035fe1-81a6-18ee-d878-a43e95fc6a49.png)

### 1-4. Webhook URLを控えておく
![スクリーンショット 2024-11-27 19.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/65699a90-1edf-dfbf-db01-af91805f69fa.png)

 <details><summary>Webhook URL確認方法</summary>

もしWebhook URLを控え忘れても以下の手順で確認できる。
Slackのアプリケーション追加ページより incoming-webhooks を検索・選択
* https://slack.com/apps

「設定」で作成したIncoming Webhook一覧が見られる。
編集マークをクリックするとWebhook URLの項目がある。

![スクリーンショット 2024-12-01 17.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/64141b78-41c1-72d3-ae87-9601236f380c.png)


</details>

## 2. ショートカットを作成する
### 2-1. ショートカットアプリを開き、右上の「+」をタップ
![IMG_2665.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/97017b95-8fa8-3d89-5b21-ed16f3b2c065.jpeg)

### 2-2. ショートカットに名前をつける
「新規ショートカット」→「名称変更」
![IMG_2666.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/c4946c71-7afb-0015-3e53-46dbce59b650.jpeg)

### 2-3. 「URLの内容を取得」をタップ
アクションを検索欄に「URL」と入力したら出てくる
![IMG_2667.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/1744cd25-758d-98c7-21d4-def03a68c27f.jpeg)

### 2-4. 控えておいたSlack Webhook URLを貼り付ける
「URL」をタップして貼り付ける
赤枠をタップして詳細設定を行う
![IMG_2668.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/7f0b25c4-6a7c-3276-d91d-205e935fa6a3.jpeg)

### 2-5. 下記の設定にする
* 方法：POST
* 本文を要求：JSON
![IMG_2669.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/74a2e279-9aff-05fe-d1b1-92ae15d22d94.jpeg)



「新規フィールドを追加」をタップ→「テキスト」をタップ
![IMG_2670.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/bbd067be-bfb3-aec1-95e2-190b4131950b.jpeg)





キー名に「text」、テキスト名に「これから帰るよ〜」と入力する。
![IMG_2673.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/1808e9cc-fc2e-847a-3a46-2419a19d219a.jpeg)


「完了」をタップするとポップアップが出るので「許可」
![IMG_2672.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/2c54d205-3161-8245-fb17-a8a4c1d6fb3d.jpeg)






# 動作確認

右下の「▶️」をタップする。
![IMG_2675.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/3a210918-e099-6109-9ef3-8d455ccdba60.jpeg)

見づらいが小さい文字で「ok」と表示された。
![IMG_2676.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/a134cb9b-01cc-4a55-5952-f01c4cff22fe.jpeg)

Slackを見てみると、投稿されてるのを確認できた。
![IMG_2677.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/0ef9dd5b-d20b-588e-0052-f679da2b569f.jpeg)




# おわりに
作成したショートカットをホーム画面に追加すればワンタップでSlackへの投稿が済むのでとても便利！

# 参考サイト
* [SlackのIncoming Webhooksを使い倒す #slackbot - Qiita](https://qiita.com/ik-fib/items/b4a502d173a22b3947a0)

* [iPhone ショートカット Appで充電完了を Slack へ通知 #ショートカットApp - Qiita](https://qiita.com/romochi/items/4c433275968293d83ef2)