🎁

AlfredからNotionにTODOを追加するWorkflowの作り方

2022/02/22に公開

こんにちは。株式会社ペライチWraptas 担当の  @nabettu です。

私は普段 Wraptas という 「Notion をヘッドレス CMS にして Web サイトを制作できる NoCode サービス」 を開発・運営しています。

https://wraptas.com/

みなさん Notion は使っていますでしょうか。 Notion は Evernote のようなドキュメント管理にデータベース機能を追加したワークスペースサービスです。

https://www.notion.so/

私はサービス開発での利用に加えて、日頃 Notion でドキュメントや Todo などを管理しています。Notion では以下のように Trello のようなカンバン形式でコンテンツを管理する機能があります。

TODO管理のサンプル

ここに TODO を追加するには都度 Notion のページやアプリを開かなければなりません。そこで本記事では 「Mac アプリの Alfred で書いたテキストをそのまま Notion の TODO に追加する Workflow」 を作っていきます。

Alfred はこちらの、Mac OS の Spotlight を高機能にしたようなランチャーアプリです。
https://www.alfredapp.com/

私も NoCode サービスを運営しているので、せっかくなので今回は NoCode サービスを駆使して 作っていきます。

※また、本記事で利用する Alfred の Workflow 部分は有料機能で、その他は無料で利用できます。

今回制作するアプリケーションのデータの流れ

  1. Alfred を起動して TODO を入力
  2. Alfred Workflow で script を実行して webhook を飛ばす
  3. Integromat で webhook を受け取る
  4. 受け取ったタイトルを Notion の TODO データベースに追加する

という流れになります。制作の流れはデータの流れとは逆に、次のように解説していきます。

  1. Notion で TODO データベースを準備する
  2. 今回用の Notion のインテグレーションを作成する
  3. Integromat でシナリオ作成をする
  4. Alfred の Workflow を作成する

という順番で制作していきます。

1. Notion で TODO データベースを準備する

Notion の中で TODO を管理したいデータベースを作成します。

今回は”ボード”のページを作成します。

ボードページの作り方

初期設定が以下になっています。

  • ステータスなし
  • 未着手
  • 進行中
  • 完了

一旦シンプルにしたいのでステータスなしを非表示にして、3つにします。

ステータスなしを非表示に

TODO管理のサンプル

TODO リストを作成し、適当にデータを入れてみました。

次に外部からデータを操作できるように API 連携のためのインテグレーションを追加していきます。

2. Notion のインテグレーションを追加する

Notion で外部からのデータを受け付けるための API を利用するためには、インテグレーションの登録が必要です。

外部サービスのインテグレーションを利用する場合は外部サービス内で Notion の認証をしますが、今回利用する Integromat は自前でインテグレーションを用意する形式ですので準備します。

利用したい Notion アカウントにログインした状態で以下の"インテグレーションの作成画面"にアクセスします。

https://www.notion.so/my-integrations

左側の「新しいインテグレーション」をクリックし、適当な名前をつけます。

この際、TODO データベースにデータを追加するだけなので「コンテンツの挿入」だけ、ユーザー情報は「担当者」などを割り振る際に必要なので「メールアドレスを含めて読み取る」を選択してください。

インテグレーション画面

次の画面で取得できるトークンが Integromat から Notion にデータを追加するための API Key なので、コピーしておきます。

その後は Notion で作成した TODO リストの画面に戻り、右上の共有ボタンを押します。その後招待ボタンを押下します。

共有から、招待

そこで先程作成したインテグレーションを選択し「招待」を行います。

これでデータベースに TODO のデータを追加する権限をインテグレーションに持たせることができました。

3.Integromat でシナリオ作成をする

次は NoCode サービスの Integromat の準備です。アカウントが無い方は作成してください。Integromat はサービスとサービスを連携する IPaaS と呼ばれるジャンルのサービスです。

https://www.integromat.com/

ログインし、「Create a new scenario」を押して連携を作ります。

まずは Alfred から受け取った Webhook でイベントを開始したいので、Webhook を追加します。アプリケーション一覧からスクロールで探すのは大変なので、テキスト検索で Webhook と入れてください。

webhookの追加

次に、Add→ 適当な名前を付与して「Save」します。

webhookの名前

すると、名前の下に Webhook を送る先の URL が表示されますので、これをコピーし、パラメータを付けてブラウザの URL 欄で開きます。

パラメータは title とします。そのため今回の場合は ?title=サンプルタイトル を追加して次のような URL になります。

https://hook.integromat.com/2lwmmk9m1m97o6ndrlubiv3vli4utckv?title=サンプルタイトル

(本来は接続確認だけなので、そのまま開いても進めますが、ここでパラメータをつけておくと後ほど手動で追加する手間が省けます)

Accepted と表示されたら OK です。Integromat に戻ると「Successfully determined」と表示されますので OK を押します。

これで受信部分はできたので、次は Notion への書き込みをします。

「add another module」から、Notion の追加をします。

moduleの追加

notionの追加

そして「Create a Database Item」をクリックします。

createDB

Notion と連携しますので、Connection の Add を押下します。今回はクローズドな利用なので Notion Internal を選択、適当な名前をつけて先程 Notion のインテグレーションで取得したトークンを貼ります。

notion connection

連携できたら DatabaseID を選択しますが、Search を押して TODO を押すと自動で登録されます。

その後下に TODO へ追加する項目が表示されますので、名前は左から選択して "title" とします。こちらは先程 Webhook の設定する際に入れたパラメータです。

タイトルを追加

ステータスや担当者などは自由に設定していただき、OK を押してください。

これでシナリオは完成です。下にある Save ボタンを押して保存してください。その後シナリオ全体を保存するために Control + S を押しておきましょう。

これだけだと起動するようになっていないため、左下の SCHEDULING を押して immediately を選択します。

これで Integromat 部分は完成したので、先程の WebhookURL でパラメータを付与した状態でまたブラウザで開き、実際に Notion 側へ追加されるかテストしてみましょう。TODO が追加されましたでしょうか。

4.Alfred の Workflow を作成する

最後に Alfred 側へ Workflow を追加します。

Alfred を起動し、Workflows→ 下のプラスボタンを押し、Blank Workflow を追加します。

alfred workflowを追加

適当な名前をつけて Create します。

alfred workflowをcreate

ここが画面上で非常に分かりづらいのですが、右クリックして inputs → keyword を追加します。

keywordを追加

Alfred で起動したい Keyword を設定します。今回は todo とします。わかりやすいタイトルも追加しておきましょう。

Save したら今度は Webhook を飛ばす Script を追加します。

Workflow 画面でまた右クリックし、Actions→RunScript を追加します。

run scriptを追加

ここで、先程の Webhook URL へ、 Alfred でtodo タイトルと入力した際のタイトルを付与した webhook を実行するようにします。

echo -nを消してcurlコマンドへ変更します。

また、その際に日本語が含まれているとエンコードが必要になってしまうので、変換しつつ送るために以下のように編集します。

query=$1

curl https://hook.integromat.com/2lwmmk9m1m97o6ndrlubiv3vli4utckv --data-urlencode title=$query

最後に workflow を接続します。todo の右の出っ張りから run script へドラッグします。
workflowを接続

これで完成です。Alfred は自動保存されているので、早速実行して Notion へ保存されるか試してみましょう。

投稿結果

無事に Notion の TODO へデータが追加されましたでしょうか。これでパッと思いついたタスクをすぐ TODO リストに追加できますね。

この記事でみなさんの Notion ライフが捗ることを願っています。

まとめ

Alfred から Notion の連携ができましたが、今回のアプリケーションを応用すれば Alfred 以外からでも Notion へいろいろなデータを連携できます。今回は Integromat を利用しましたが、他にも IFTTT や Zapier でも連携アプリケーションが豊富にあります。

  • Twitter でお気に入りしたツイートを Notion に保存して検索できるようにしておく
  • 毎日・毎週作るテンプレートを先にページを作っておく
  • Slack の Thread を Notion ページにまとめる

など、可能性は無限大です。また、簡単なことは概ね NoCode サービスの組み合わせで実現できます。

他にも、自社ブログが更新されたら自動で Notion に記事一覧を作成し、その情報をまとめた Notion を元にコーポレートサイトを作るなども弊社の Wraptas を利用すれば実現出来ます。

宣伝

ということで普段から Notion をお使いのみなさま、ぜひ Notion をそのまま Web サイトにできる Wraptas をお試しいただけると嬉しいです。

https://wraptas.com/

採用情報

そしてエンジニアのみなさん NoCode サービスを触ってみるだけでなく、作ってみる側に興味はないでしょうか。

現在ペライチではエンジニアを募集しています。 ※Wraptas ではなくペライチの採用枠となります。

▼ 選考をご希望の方はこちら(募集職種一覧)。
https://hrmos.co/pages/peraichi/jobs?category=1629135637016141824&utm_source=techblog&utm_medium=referral&utm_campaign=article-01fw931z89abwrb9s57ymxs119

▼ まずはカジュアル面談をご希望の方はこちらからどうぞ。
https://hrmos.co/pages/peraichi/jobs/0000029?utm_source=techblog&utm_medium=referral&utm_campaign=article-01fw931z89abwrb9s57ymxs119

募集中の職種についてご興味がある方は、お気軽にお申し込みください(CTO がお会いします)

以上です。読んでいただきありがとうございました。

ペライチ

Discussion