Slack Platformを使いワークフローからnotionのページ作成 #TypeScript

概要

新しいSlack Platformを使いワークフローからNotionのページを作成します。
notionのAPIを使う部分はCustom Function(カスタムステップ)を使います。
Notion APIの使い方についてはこの記事では扱いません。
https://developers.notion.com/ を参考にしてからAPI用のシークレットトークンとデータベースのIDを取得しておいてください。

はじめに

クイックスタートからサンプルのアプリ実行まで紹介しているので、一通り実行するとわかりやすいと思います。
https://api.slack.com/automation/quickstart

Slack CLIの導入, 承認
https://api.slack.com/automation/quickstart#install-cli
詳しくは省略します。slack auth listでワークスペースの情報が表示されるまで確認してください。
スターターテンプレートと共にアプリ作成

$ slack create slack-to-notion --template https://github.com/slack-samples/deno-starter-template

作成するとfunctions, triggers, workflowsのフォルダがあると思いますが、これら3つがSlack アプリの主な構成要素となります。

各機能のざっくりとした説明は下記の通り

functions

Custom functions: https://api.slack.com/automation/functions/custom
自作のfunctionを作成する際はこちらのディレクトリの下で作成します。
Inputs(入力), outputs(出力)を定義して、SlackFunction内でやりたいことを実装します。
ワークフローのカスタムステップを作成する場合はこのCustom functionsを利用します。

triggers

https://api.slack.com/automation/triggers
ワークフローの起動方法をこちらで決めます。
サンプルはLink triggerでパプリックチャンネルからワークフローを起動します。
日付指定で実行する Scheduled triggerもあります。

workflows

https://api.slack.com/automation/workflows
functionを組み合わせて順次実行するワークフローを作成します。
カスタムステップを使う場合もこのワークフローにステップを追加します。

他の機能

datastores

https://api.slack.com/automation/datastores
アプリ内のデータを保存するデータベース。
今回は使用しません。

環境変数

https://api.slack.com/automation/environment-variables
.envがデフォルトで使えるためnotionのシークレットトークンとデータベースのIDを記述しておきます。

DATABASE_ID=XXX
NOTION_TOKEN=XXX

デプロイ

slack deploy でデプロイ
環境変数を使っている場合下記のように追加する必要がある。

$ slack env add MY_ENV_VAR asdf1234

ローカル実行

slack runでローカル環境の動作が確認できます。
ワークスペースを選択したら、ショートカット用のURLが表示されるので、slackチャンネルの上部の「＋関連ページを追加する」から表示されたリンクにURLを入力します。

https://slack.com/shortcuts/XXXX

作成したもの

ワークフロー上でモーダルを表示してステータス、タイトル、概要、内容を入力します。
ボタンを押すとnotionのDBにページが作成され、成功したらSlackのチャンネルにメッセージを送信します。

実際のコード

notion_workflow.ts

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";
import { NotionFunctionDefinition } from "../functions/notion_function.ts";
import Status from "../status.ts";

/// Workflow定義
const notionWorkflow = DefineWorkflow({
  callback_id: "request_workflow",
  title: "notionページ作成",
  description: "notionページ作成",
  input_parameters: {
    properties: {
      interactivity: {
        type: Schema.slack.types.interactivity,
      },
      channel_id: {
        type: Schema.slack.types.channel_id,
      },
      user_id: {
        type: Schema.slack.types.user_id,
      },
    },
    required: ["user_id", "interactivity"],
  },
});

const inputForm = notionWorkflow.addStep(
  // モーダル表示
  Schema.slack.functions.OpenForm,
  {
    title: "notionへの投稿",
    interactivity: notionWorkflow.inputs.interactivity,
    submit_label: "作成",
    fields: {
      elements: [
        {
          name: "status",
          title: "ステータス",
          type: Schema.types.string,
          enum: Object.values(Status),
          choices: [
            {
              value: Status.New,
              title: Status.New,
              description: "",
            },
            {
              value: Status.InProgress,
              title: Status.InProgress,
              description: "",
            },
            {
              value: Status.Closed,
              title: Status.Closed,
              description: "",
            },
          ],
        },
        {
          name: "title",
          title: "タイトル",
          type: Schema.types.string,
          description: "記事のタイトル",
        },
        {
          name: "summary",
          title: "概要",
          type: Schema.types.string,
          long: true,
          description: "記事の概要",
        },
        {
          name: "content",
          title: "内容",
          type: Schema.types.string,
          long: true,
          description: "記事の内容",
        },
      ],
      required: ["status", "title"],
    },
  },
);

/// notionに送信
const requestFunctionStep = notionWorkflow.addStep(NotionFunctionDefinition, {
  user_id: notionWorkflow.inputs.user_id,
  status: inputForm.outputs.fields.status,
  title: inputForm.outputs.fields.title,
  summary: inputForm.outputs.fields.summary,
  content: inputForm.outputs.fields.content,
});

// Slackメッセージ送信
notionWorkflow.addStep(
  Schema.slack.functions.SendMessage,
  {
    channel_id: notionWorkflow.inputs.channel_id,
    message: requestFunctionStep.outputs.result_message,
  },
);

export default notionWorkflow;

タイトルのプロパティはnotionのDBのtitleと同じプロパティ名にする必要があります

notion_trigger.ts

import { Trigger } from "deno-slack-sdk/types.ts";
import { TriggerContextData, TriggerTypes } from "deno-slack-api/mod.ts";
import notionWorkflow from "../workflows/notion_workflow.ts";

const notionTrigger: Trigger<typeof notionWorkflow.definition> = {
  type: TriggerTypes.Shortcut,
  name: "notionのページ作成",
  description: "notionのページ作成トリガー",
  workflow: `#/workflows/${notionWorkflow.definition.callback_id}`,
  inputs: {
    interactivity: {
      value: TriggerContextData.Shortcut.interactivity,
    },
    channel_id: {
      value: TriggerContextData.Shortcut.channel_id,
    },
    user_id: {
      value: TriggerContextData.Shortcut.user_id,
    },
  },
};

export default notionTrigger;

notion_function.ts

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";

export const NotionFunctionDefinition = DefineFunction({
  callback_id: "notion_function",
  title: "notionへの投稿",
  description: "notionへの投稿",
  source_file: "functions/notion_function.ts",
  input_parameters: {
    properties: {
      user_id: {
        type: Schema.slack.types.user_id,
        description: "ユーザーID",
      },
      status: {
        type: Schema.types.string,
        description: "ステータス",
      },
      title: {
        type: Schema.types.string,
        description: "タイトル",
      },
      summary: {
        type: Schema.types.string,
        description: "概要",
        long: true,
      },
      content: {
        type: Schema.types.string,
        description: "内容",
      },
    },
    required: ["user_id", "status", "title"],
  },
  output_parameters: {
    properties: {
      notion_page_id: {
        type: Schema.types.string,
        description: "作成したnotionページのID",
      },
      result_message: {
        type: Schema.types.string,
        description: "結果のメッセージ",
      },
    },
    required: ["result_message"],
  },
});

function postNotion(notionToken: string, blockJson: string) {
  const url = "https://api.notion.com/v1/pages";
  const options = {
    "method": "POST",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + notionToken,
      "Notion-Version": "2022-06-28",
    },
    "body": blockJson,
  };
  return fetch(url, options);
}

/// notionページに反映する内容
interface Request {
  userName: string;
  status: string;
  title: string;
  summary?: string;
  content?: string;
}

type SlackUser = {
  id: string;
  real_name: string;
};

type NotionResponse = {
  id: string;
  url: string;
};

export default SlackFunction(
  NotionFunctionDefinition,
  async ({ inputs, env, client }) => {
    let userName: string;

    // Slackユーザー情報取得
    try {
      const info = await client.users.info({
        user: inputs.user_id,
      });

      if (!info.ok) {
        throw new Error(info.error);
      }

      // Slackユーザー名設定
      const user = info.user as SlackUser;
      userName = user.real_name;
    } catch (error) {
      const resultMessage =
        `Slack APIからのエラーメッセージ:\n${error.message}`;
      return { outputs: { result_message: resultMessage } };
    }

    const request: Request = {
      userName: userName,
      status: inputs.status,
      title: inputs.title,
      summary: inputs.summary,
      content: inputs.content,
    };

    const blockJson = createBlockObjects(env["DATABASE_ID"], request);

    let resultMessage: string;

    try {
      // notionへの投稿
      const response = await postNotion(env["NOTION_TOKEN"], blockJson);
      if (!response.ok) {
        throw new Error(response.statusText);
      }

      const json = await response.json() as NotionResponse;
      resultMessage = `notionのページ: ${json.url}`;
    } catch (error) {
      resultMessage = `notionAPIからのエラーメッセージ:\n${error.message}`;
    }

    return {
      outputs: { result_message: resultMessage },
    };
  },
);

function createBlockObjects(databaseId: string, request: Request): string {
  const propertyBlock = (
    propertyName: string,
    type: string,
    content: string,
  ) => {
    return {
      [propertyName]: {
        [type]: [
          {
            "text": {
              "content": content,
            },
          },
        ],
      },
    };
  };

  const objectBlock = (type: string, content: string) => {
    return {
      "object": "block",
      "type": type,
      [type]: {
        "rich_text": [
          {
            "type": "text",
            "text": {
              "content": content,
            },
          },
        ],
      },
    };
  };

  const payload = {
    "parent": {
      "type": "database_id",
      "database_id": databaseId,
    },
    "properties": {
      ...propertyBlock("タイトル", "title", request.title),
      "ステータス": {
        "select": {
          "name": request.status,
        },
      },
    },
    "children": [
      objectBlock("heading_2", "概要"),
      objectBlock("paragraph", request.summary ?? ""),
      objectBlock("heading_3", "内容"),
      objectBlock("paragraph", request.content ?? ""),
    ],
  };
  return JSON.stringify(payload);
}

manifest.ts

import { Manifest } from "deno-slack-sdk/mod.ts";
import notionWorkflow from "./workflows/notion_workflow.ts";

export default Manifest({
  name: "slack-to-notion",
  description: "Slackからnotionページ作成",
  icon: "assets/default_new_app_icon.png",
  workflows: [notionWorkflow],
  outgoingDomains: ["api.notion.com"],
  botScopes: [
    "commands",
    "chat:write",
    "chat:write.public",
    "users:read",
  ],
});

outgoingDomainsに"api.notion.com"を指定しないとnotionのAPIにアクセスできないので注意

status.ts

enum Status {
  New = "新規",
  InProgress = "進行中",
  Closed = "完了",
}

export default Status

動作について

モーダル

Slackメッセージ

作成したnotionページ

Custom funtionについて

上記の例ではワークフローごと作成して、最後にSlackメッセージを送信するものまで作成しましたが
Custom funtionではnotionの接続部分だけ作成することもでき、自作のワークフローに組み込むことができます。