🎃

Slack->Notionのサービスを作成してみた

2022/04/20に公開約6,900字

概要

https://peer-quest.connpass.com/event/241196/

https://docs.google.com/presentation/d/1jQAVqMSoIRhWCdbuXKOb62Od5qH1tEaElOYKt_RsCR0/edit?usp=sharing

上記イベント、スライドで話したことについてあんまり詳細についてだせていなかったなと思いましたので、解説します。

作成したもののDemo

demo

SlackのInteractiveComponentsの話

一体何をするものなのかというと、メッセージに対してショートカットとなるものを追加してすぐ操作を実行できるようにするものです!

設定は次のようにできます!

slack-interactive-componentsの設定画面

slack-interactive-componentsの詳細の設定画面

slack-interactive-componentsの導入後の画面の変更点

Slackから自作したAPIにPOSTされてくる内容について

サンプルとしては次のようなものが送られてきます。

slack-interactive-componentsの元となるメッセージ

↑こちらの内容を送信すると↓のような値が送られます。

{
	"team": {
		"id": "Tから始まるワークスペースのID",
		"domain": "domainの設定が入ってくる"
	},
	"type": "message_action",
	"user": {
		"id": "UからはじまるユーザーのID",
		"name": "ohki_suguru",
		"team_id": "Tから始まるワークスペースのID",
		"username": "ohki_suguru"
	},
	"token": "tokenが入ります",
	"channel": {
		"id": "Cから始まるチャンネルID",
		"name": "times-ohki"
	},
	"message": {
		"ts": "1650451183.630089",
		"text": "Notion General Managerさん!!!(ガクブルガクブル)",
		"type": "message",
		"user": "UからはじまるユーザーのID",
		"files": [
			{
				"id": "F03C66ARCP5",
				"mode": "hosted",
				"name": "スクリーンショット 2022-04-20 19.36.14.png",
				"size": 14957,
				"user": "Uから始まるユーザーID",
				"title": "スクリーンショット 2022-04-20 19.36.14.png",
				"created": 1650451165,
				"editable": false,
				"filetype": "png",
				"mimetype": "image/png",
				"thumb_64": "https://files.slack.com/files-tmb/T02DLS9291T-F03C66ARCP5-2c0973562a/____________________________2022-04-20_19.36.14_64.png",
				"thumb_80": "https://files.slack.com/files-tmb/T02DLS9291T-F03C66ARCP5-2c0973562a/____________________________2022-04-20_19.36.14_80.png",
				"username": "",
				"is_public": true,
				"permalink": "https://[ドメイン].slack.com/files/U02EDFNLYCQ/F03C66ARCP5/____________________________2022-04-20_19.36.14.png",
				"thumb_160": "https://files.slack.com/files-tmb/T02DLS9291T-F03C66ARCP5-2c0973562a/____________________________2022-04-20_19.36.14_160.png",
				"thumb_360": "https://files.slack.com/files-tmb/T02DLS9291T-F03C66ARCP5-2c0973562a/____________________________2022-04-20_19.36.14_360.png",
				"thumb_480": "https://files.slack.com/files-tmb/T02DLS9291T-F03C66ARCP5-2c0973562a/____________________________2022-04-20_19.36.14_480.png",
				"timestamp": 1650451165,
				"is_starred": false,
				"original_h": 92,
				"original_w": 572,
				"thumb_tiny": "AwAHADChGyg/MqnjHOabtX++PyNNooAdtH98fkaNo/vj8jTaKAFwP71GBj71JRQB/9k=",
				"is_external": false,
				"pretty_type": "PNG",
				"thumb_360_h": 58,
				"thumb_360_w": 360,
				"thumb_480_h": 77,
				"thumb_480_w": 480,
				"url_private": "https://files.slack.com/files-pri/T02DLS9291T-F03C66ARCP5/____________________________2022-04-20_19.36.14.png",
				"external_type": "",
				"display_as_bot": false,
				"has_rich_preview": false,
				"permalink_public": "https://slack-files.com/T02DLS9291T-F03C66ARCP5-fe91137596",
				"public_url_shared": false,
				"media_display_type": "unknown",
				"url_private_download": "https://files.slack.com/files-pri/T02DLS9291T-F03C66ARCP5/download/____________________________2022-04-20_19.36.14.png"
			}
		],
		"blocks": [
			{
				"type": "rich_text",
				"block_id": "SLEP",
				"elements": [
					{
						"type": "rich_text_section",
						"elements": [
							{
								"text": "Notion General Managerさん!!!(ガクブルガクブル)",
								"type": "text"
							}
						]
					}
				]
			}
		],
		"upload": false,
		"client_msg_id": "c4c704cd-6de9-49b9-bab5-a44aa554aaf7",
		"display_as_bot": false
	},
	"action_ts": "1650453439.118171",
	"enterprise": null,
	"message_ts": "1650451183.630089",
	"trigger_id": "3414357278642.2462893077061.a63cf586f5807cd022be2e7be9d238e2",
	"callback_id": "add_notion_task",
	"response_url": "https://hooks.slack.com/app/[チームのID]/3426975843201/adqZATalle4XYMtVYhHiVkGE",
	"is_enterprise_install": false
}

response_urlに対してPOSTを送ると結果がうまくいったかどうかのメッセを送ることができます!
↓こちらのようになります!

slack-interactive-componentsの元となるメッセージ

APIの連携について

  1. SlackのInteractiveComponentsから実装したAPIに送信
  2. APIで値を受け取ったら、送られてきたJSONをパース
  3. 事前に登録されたNotionのDatabaseに向けて2の値をPOST https://api.notion.com/v1/pages で送信

今回については、Laravelで実装しましたが、公式SDKはありません。
そのため、3については、公式ドキュメントに従って次のようにして送信しました。
送信先のカラムに合わせてカラム名を指している「タスク名」は名前を変えたり、送信の際にもっと他のカラムの値も指定したいなどがあれば指定してみてください!

Notionに対するPOST
    private function savingNotionTask(string $channelId, string $message, string $databaseId)
    {
        $client = new \GuzzleHttp\Client();
        $NOTION_API_KEY = env('NOTION_SECRET'); // NotionのAPIのキーを環境変数で入れています
        $body = '{
            "parent": { "database_id": "'.$databaseId.'" },
            "properties": {
                "タスク名": { // ←ここがカラムのタイトルに当たります。
                    "title": [
                        {
                            "text": {
                                "content": "'.$channelId.'-'.mb_substr(($message), 0, 30).'"
                            }
                        }
                    ]
                }
            },
            "children": [ // このchildrenというのがデータベースのテーブルにおけるタイトルのページの中身になります!
                {
                    "object": "block",
                    "type": "heading_2",
                    "heading_2": {
                        "rich_text": [{ "type": "text", "text": { "content": "Slackから追加されたタスク" } }]
                    }
                },
                {
                    "object": "block",
                    "type": "paragraph",
                    "paragraph": {
                        "rich_text": [
                            {
                                "type": "text",
                                "text": {
                                    "content": "'.str_replace("\n", "\\n", $message).'"
                                }
                            }
                        ]
                    }
                }
            ]
        }';
        $response = $client->request(
            'POST',
            'https://api.notion.com/v1/pages',
            [
                'body' => $body,
                'headers' => [
                  'Accept' => 'application/json',
                  'Authorization' => 'Bearer '.$NOTION_API_KEY,
                  'Content-Type' => 'application/json',
                  'Notion-Version' => '2022-02-22', // ここについては古いバージョンになっているとエラーとなって動作しません。非公式SDKがこの仕様の餌食となっていることがあります
                ],
          ]
        );
    }

送信先のページは次のようになっています!

送信先となるNotionのデータベース

また送信したchildrenの内容はこのように格納されます!

送信先となるNotionのデータベースのchildren

GitHubで編集を提案

Discussion

ログインするとコメントできます