kintone advent calendar 2023 の 22日目ですん！

今回、Notionとkintoneの連携について書こうと思いいろいろとサンプルを作っていたんですが、どうしてもエンジニア寄りの内容になってしまいました……。
お試しするにはkintoneのカスタムスクリプトのほかにバックエンド用のサーバーが必要な感じです。
やること自体は極力シンプルにしましたので、少々お付き合いくださいませ。

Notionとは？

ここ最近で急に話題になりはじめた感じがあるWebサービスです。
どんなことができるかというと、メモやタスク管理、それからデータベース的にも使うことができるツールですね。
これだけだと、ええ？ちょっとkintoneに似てない？まさか競合を勧めるつもりでは……！？
という印象があるかもしれませんが、kintoneの強みが「まとまると強い」にあるのに対して、Notionは個人の脳内の整理に強い、という触り心地かなと思います。
データ保守的な運用や統制なんかを考えると断然kintoneアプリなんですが、ちょっとリッチなメモを取りたい、みたいなシーンで重宝すると思います。

何が嬉しいか

なんでこれと連携しようと思ったかというと、タスク管理を統合したい、です。
みなさんどうでしょう。作業依頼や稟議の決裁依頼ってひとつのサービスに統合されてますか？
私は全く統合されておりません！
kintoneの他に、slackやchatworkでメンションされたり、開発進捗管理やスクラムであればjiraとかでしょうか。メールで組織全体に「この資料確認しておいてね！」と来ることもありますね？
zoomのコメント欄でリンクが共有されたこととかないですか？
きっとあるんです。どこかにメモらないと忘れますね？
そういうときにNotionはちょうど良いかもしれないです。

というわけでNotion APIとkintoneカスタマイズを使って連携できるかやってみよう、ということなのです。

NotionのAPIについて

kintoneのアプリも作ってカスタマイズしていくんですが、まずはNotion側の準備をしていきましょう。
Notionのアカウント登録、は割愛しまして登録したNotionアカウントでAPIを使えるように設定していきます。

Notionのシークレットコードを発行

アカウントは登録しましたか？
そしたら
→ My インテグレーション
へアクセスしておもむろに [＋New integration] を押します。

（※ひとつ登録されてますがこんな画面です）

Create a new integration
というフォームに遷移します。

どこのワークスペースにアクセスするシークレットコードか
管理用の名前

を決めます。
ワークスペースは自分のアカウントのものを選択。はじめて登録したアカウントであればそのままでOKです。
名前はあとで何に使ったものかわかりやすい名前ならなんでよいですね。今のところここでつけた名前をどこかに入力するようなことはしないので。

[Submit→]
を押すとページが遷移してシークレットコードが発行されます。発行まで２手。早い。

Internal Integration Secret というボックスに Show とという押せそうな色のリンクがあるので押下。
シークレットコードが表示されます。 Copy できます。

個別のアクセス権をシークレットコードへ付与する

ワークスペースの指定はしましたが当然ながらまだアクセス権は与えられていません。
目的のページ（kintone的に言えばアプリ）で権限を設定する必要があります。
Notion新規登録でサンプルのページがいくつか存在しています。画面左側に一覧表示されていますね。
そのなかの「タスク管理」ページを使ってみましょう。

タスク管理ページは、

未着手
対応中
完了

の3つのステータスでカラムが3列に並んでいるレイアウトになっています。
それぞれステータスのカラムにある＋ボタンでタスクを追加したりステータスを変更したりすることでタスク管理ができるというすんぽうです。
このレイアウトはよくある形ですね。

ちなみにサンプルデータで対応中に「お母さんに電話する」とかあります。
忙しくてなかなか実家に帰れない人向けのタスクっすね！
というか対応中って……今まさに電話中ということなの？　どうなの？　しらんけど。

……シークレットコードへのアクセス権の設定が今回の目的でした。

画面右上の三点リーダーのメニューアイコンを押すとプルダウンメニューが開きます。

この下のほうに
[＋Add connections]
というボタンがあるのでカーソルをあわせます。
すると、外部連携用のサービスがいくつか表示されますが、そのなかに先ほど登録したシークレットコードの名前もあるはずです。
それを選択しましょう。

確認のダイアログボックスが表示されるので、

Confirm

でアクセス権付与完了です。読み書きどっち？の権限設定も細かくできますが両方とも認可されるのでここでは割愛します。

タスク管理ページのプロパティにurlリンクを追加する

今回の連携ではあくまで備忘録的なタスク管理を行いたいという目的です。
なのでタスクの名前と、そのタスク本体へのリンクを登録するというミニマムな形で作るとします。
そこで初期登録では存在しないURLリンクプロパティをタスク管理ページに追加します。

せっかくなのでお母さんに電話するというタスクを開いてみましょう。
（もしかしたらバージョンによってはNotionの初期登録タスクは違うものかもしませんが、なにかしらサンプルのタスクはあるはずなのでそれで置き換えてお読みください）

画面右側にタスクの詳細が表示されます。
ステータスや作成日といった情報の下に [＋Add a property] というボタンがあります。このボタンで入力できるプロパティが追加できます。

今回はURLを追加したいので、Type のなかから URL と選択すると、URLが入力できるプロパティが追加されます。

バックエンドサーバーからNotionのAPIを実行する

さてここからは実装にひと手間必要な部分になるのですが、バックエンドで動かすためサーバーへの実装が必要になります。
なんでも良いのですが、APIを実行するスクリプトとしてnoejsを使用したサンプルを用意しました。

kintoneからのデータPOSTを受け付けるためのサーバーです
httpクライアントとしてaxiosモジュールを使用しています

    /**
     * Notion API を使用してデータを登録します。
     * @param {string} title タスク名として登録される文字列
     * @param {string} url タスクのURLに代入される文字列
     * @returns 
     */
    async postNotionDatabase(title, url) {
        try {
            // Notionの「タスク管理」ページにアクセスした際のURLです
            const NOTION_DATABASE_URL = 'https://www.notion.so/********?v=********'
            // Notionで発行したシークレットコードです
            const NOTION_SECRET_KEY = 'secret_********'

            const protocol_check = NOTION_DATABASE_URL.match(/https:\/\/www\.notion\.so\/(.*)/)[1]
            const db_id = protocol_check.split('?').shift()

            const headers = {
                'Content-Type': 'application/json',
                'Notion-Version': '2022-06-28',
                'Authorization': `Bearer ${NOTION_SECRET_KEY}`
            }

            const request_body = {
                parent: {
                    database_id: db_id
                },
                properties: {
                    Name: {
                        title: [{
                            text: {
                                content: title
                            }
                        }]
                    },
                    URL: {
                        url: url
                    }
                }
            }

            const resp = await axios({
                method: 'POST',
                url: 'https://api.notion.com/v1/pages',
                headers,
                data: request_body
            })

            return resp

        } catch (error) {
            console.error('postNotionDatabase', error)
            throw error
        }
    }

Notoinのエンドポイントに対して同じようにPOSTさせられればなんでもよいです。

ここまででNotionのAPIを使用する準備は整いました。

kintoneの案件管理アプリを使って連携してみる

なんでも良いんですが、タスクになりそうなアプリの例ということで案件管理アプリを使ってみます。

アプリ管理＞アプリを作成する

と来て、おすすめアプリのなかに 営業支援パック があるのでこれでアプリを作ってみましょう。

顧客管理
活動履歴
案件管理

と3つの連携したアプリが作成される優れものです。
このなかの 案件管理 アプリをカスタマイズします。

こんな感じのアプリですね。

案件管理アプリにカスタマイズjavascriptを追加

アプリを作成したらアプリの画面を開いて、

アプリの設定 ＞ JavaScript / CSSでカスタマイズ

と移動します。
PC用とスマートフォン用に同じもので大丈夫なので、以下のスクリプトをアップロードします。

動作は、レコードの登録成功時にバックエンドサーバーへ案件名とレコード詳細画面のURLをPOSTする、という内容になっています。

    kintone.events.on(
        [
            "app.record.create.submit.success",
            "mobile.app.record.create.submit.success"
        ],
        async (event) => {
            const record_url = kintone.api.url(`/k/${event.appId}/show#record=${event.recordId}`).replace(/\.json$/, '')
            const req_body = {
                // タスク名として案件名を送信
                title: event.record['案件名'].value,
                // タスク実体へのリンクとしてレコードのURLを送信
                url: record_url,
            }
            const headers = {
                'Content-Type': 'application/json'
            }

            // NotionのAPIをPOSTするためのサーバーへPOSTします
            // {title, url} といったjsonをPOSTするので、
            // バックエンド側の postNotionDatabase へ渡す値として使います。
            const API_URL = 'https://ほげほげ'
            return kintone.proxy(
                API_URL,
                'POST',
                headers,
                req_body
            )
        }
    )

うまく送信できれば、
案件管理アプリで登録した案件名がタスク名として、
案件管理アプリのレコードの詳細画面が、タスクのURLとして、
Notionに登録されます。

以上！
案件管理アプリの新規レコードをNotionのタスク管理へ追加してみる、でございました。

バックエンドサーバーを用意しなければならないという、advent calendarで書くにはどうなんだという内容になってしまいましたが、ご容赦ください。

さて最後にちょっと宣伝です

『機能拡張スタンダードAll-In』というプラグインを販売しておりますー。
レイアウトを作ってPDF出力したり、自動計算とかレコード検索の入力ボックス設置などいろいろできるプラグインとなっております。
2017年のリリース以来ありがたいことに多くの方にご利用いただきまして、機能追加を重ねております。
お問い合わせなど不要でご試用いただけますので、ひとつお試しいただければと。

そんな感じでーす！