🎃
Slack->Notionのサービスを作成してみた
概要
上記イベント、スライドで話したことについてあんまり詳細についてだせていなかったなと思いましたので、解説します。
作成したもののDemo
SlackのInteractiveComponentsの話
一体何をするものなのかというと、メッセージに対してショートカットとなるものを追加してすぐ操作を実行できるようにするものです！
設定は次のようにできます！
Slackから自作したAPIにPOSTされてくる内容について
サンプルとしては次のようなものが送られてきます。
↑こちらの内容を送信すると↓のような値が送られます。
{
"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を送ると結果がうまくいったかどうかのメッセを送ることができます！
↓こちらのようになります！
APIの連携について
- SlackのInteractiveComponentsから実装したAPIに送信
- APIで値を受け取ったら、送られてきたJSONをパース
- 事前に登録された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がこの仕様の餌食となっていることがあります
],
]
);
}
送信先のページは次のようになっています！
また送信したchildrenの内容はこのように格納されます！
Discussion