こんにちは。株式会社ペライチ の Wraptas 担当の @nabettu です。
私は普段 Wraptas という 「Notion をヘッドレス CMS にして Web サイトを制作できる NoCode サービス」 を開発・運営しています。
みなさん Notion は使っていますでしょうか。 Notion は Evernote のようなドキュメント管理にデータベース機能を追加したワークスペースサービスです。
私はサービス開発での利用に加えて、日頃 Notion でドキュメントや Todo などを管理しています。Notion では以下のように Trello のようなカンバン形式でコンテンツを管理する機能があります。
ここに TODO を追加するには都度 Notion のページやアプリを開かなければなりません。そこで本記事では 「Mac アプリの Alfred で書いたテキストをそのまま Notion の TODO に追加する Workflow」 を作っていきます。
Alfred はこちらの、Mac OS の Spotlight を高機能にしたようなランチャーアプリです。
私も NoCode サービスを運営しているので、せっかくなので今回は NoCode サービスを駆使して 作っていきます。
※また、本記事で利用する Alfred の Workflow 部分は有料機能で、その他は無料で利用できます。
今回制作するアプリケーションのデータの流れ
- Alfred を起動して TODO を入力
- Alfred Workflow で script を実行して webhook を飛ばす
- Integromat で webhook を受け取る
- 受け取ったタイトルを Notion の TODO データベースに追加する
という流れになります。制作の流れはデータの流れとは逆に、次のように解説していきます。
- Notion で TODO データベースを準備する
- 今回用の Notion のインテグレーションを作成する
- Integromat でシナリオ作成をする
- Alfred の Workflow を作成する
という順番で制作していきます。
1. Notion で TODO データベースを準備する
Notion の中で TODO を管理したいデータベースを作成します。
今回は”ボード”のページを作成します。
初期設定が以下になっています。
- ステータスなし
- 未着手
- 進行中
- 完了
一旦シンプルにしたいのでステータスなしを非表示にして、３つにします。
TODO リストを作成し、適当にデータを入れてみました。
次に外部からデータを操作できるように API 連携のためのインテグレーションを追加していきます。
2. Notion のインテグレーションを追加する
Notion で外部からのデータを受け付けるための API を利用するためには、インテグレーションの登録が必要です。
外部サービスのインテグレーションを利用する場合は外部サービス内で Notion の認証をしますが、今回利用する Integromat は自前でインテグレーションを用意する形式ですので準備します。
利用したい Notion アカウントにログインした状態で以下の"インテグレーションの作成画面"にアクセスします。
左側の「新しいインテグレーション」をクリックし、適当な名前をつけます。
この際、TODO データベースにデータを追加するだけなので「コンテンツの挿入」だけ、ユーザー情報は「担当者」などを割り振る際に必要なので「メールアドレスを含めて読み取る」を選択してください。
次の画面で取得できるトークンが Integromat から Notion にデータを追加するための API Key なので、コピーしておきます。
その後は Notion で作成した TODO リストの画面に戻り、右上の共有ボタンを押します。その後招待ボタンを押下します。
そこで先程作成したインテグレーションを選択し「招待」を行います。
これでデータベースに TODO のデータを追加する権限をインテグレーションに持たせることができました。
3.Integromat でシナリオ作成をする
次は NoCode サービスの Integromat の準備です。アカウントが無い方は作成してください。Integromat はサービスとサービスを連携する IPaaS と呼ばれるジャンルのサービスです。
ログインし、「Create a new scenario」を押して連携を作ります。
まずは Alfred から受け取った Webhook でイベントを開始したいので、Webhook を追加します。アプリケーション一覧からスクロールで探すのは大変なので、テキスト検索で Webhook と入れてください。
次に、Add→ 適当な名前を付与して「Save」します。
すると、名前の下に Webhook を送る先の URL が表示されますので、これをコピーし、パラメータを付けてブラウザの URL 欄で開きます。
パラメータは title とします。そのため今回の場合は ?title=サンプルタイトル を追加して次のような URL になります。
https://hook.integromat.com/2lwmmk9m1m97o6ndrlubiv3vli4utckv?title=サンプルタイトル
（本来は接続確認だけなので、そのまま開いても進めますが、ここでパラメータをつけておくと後ほど手動で追加する手間が省けます）
Accepted と表示されたら OK です。Integromat に戻ると「Successfully determined」と表示されますので OK を押します。
これで受信部分はできたので、次は Notion への書き込みをします。
「add another module」から、Notion の追加をします。
そして「Create a Database Item」をクリックします。
Notion と連携しますので、Connection の Add を押下します。今回はクローズドな利用なので Notion Internal を選択、適当な名前をつけて先程 Notion のインテグレーションで取得したトークンを貼ります。
連携できたら 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 を追加します。
適当な名前をつけて Create します。
ここが画面上で非常に分かりづらいのですが、右クリックして inputs → keyword を追加します。
Alfred で起動したい Keyword を設定します。今回は todo とします。わかりやすいタイトルも追加しておきましょう。
Save したら今度は Webhook を飛ばす Script を追加します。
Workflow 画面でまた右クリックし、Actions→RunScript を追加します。
ここで、先程の Webhook URL へ、 Alfred でtodo タイトルと入力した際のタイトルを付与した webhook を実行するようにします。
echo -nを消してcurlコマンドへ変更します。
また、その際に日本語が含まれているとエンコードが必要になってしまうので、変換しつつ送るために以下のように編集します。
query=$1
curl https://hook.integromat.com/2lwmmk9m1m97o6ndrlubiv3vli4utckv --data-urlencode title=$query
最後に workflow を接続します。todo の右の出っ張りから run script へドラッグします。
これで完成です。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 をお試しいただけると嬉しいです。
採用情報
そしてエンジニアのみなさん NoCode サービスを触ってみるだけでなく、作ってみる側に興味はないでしょうか。
現在ペライチではエンジニアを募集しています。 ※Wraptas ではなくペライチの採用枠となります。
▼ 選考をご希望の方はこちら（募集職種一覧）。
▼ まずはカジュアル面談をご希望の方はこちらからどうぞ。
募集中の職種についてご興味がある方は、お気軽にお申し込みください（CTO がお会いします）
以上です。読んでいただきありがとうございました。
Discussion