そして広がるNotionの可能性 〜Notion APIを添えて〜

MIERUNE BBQ #07 登壇資料
Notion、Notion APIの魅力を共有。

Transcript

1. そして広がるNotionの可能性 〜Notion APIを添えて〜 須田 峻宗
2. ©Project PLATEAU / MLIT Japan 須田 峻宗 　自己紹介 SUDA 　TAKAMUNE 3年前に北海道に埼玉から移住 新雪を好む生粋の「パウダージャンキー」 パウダーの嗅覚には定評あり◎ ソフトウェアエンジニア
3. ©Project PLATEAU / MLIT Japan 先日新しい板を 買いました。 　自己紹介
4. ©Project PLATEAU / MLIT Japan 　自己紹介 BBQ経由で 昨年11月にMIERUNEに入社 『 BBQ入社 』
5. ©Project PLATEAU / MLIT Japan 　自己紹介 2023.05.31 BBQ #1 参加 2023.06.30 BBQ #2 参加 2023.07.27 BBQ #3 人生初登壇 2023.09.29 BBQ #4 参加 2023.10.31 BBQ #5 参加 2023.12.27 BBQ #6 参加 2024.02.27 BBQ #7 BBQ初 2回目の登壇 2023.11.01 MIERUNE 入社 シニア向けモバイルアプリ開発における 設計思想について
6. ©OpenStreetMap contributors そして広がるNotionの可能性 〜Notion APIを添えて〜
7. ©Project PLATEAU / MLIT Japan 　　Notion 使ってる人います？
8. ©OpenStreetMap contributors 01　Notionとは 02　Notion APIでできること 03　組み込んでみた 04　まとめ 目次
9. ©OpenStreetMap contributors 01 Notionとは
10. ©Project PLATEAU / MLIT Japan オールインワン Notionの特徴 　Notionとは ドキュメント・メモ・プロジェクト管理, 表計算, カレンダー 参照: Figma, Google Drive・Sheets・Docs, GitHub, etc...
11. ©Project PLATEAU / MLIT Japan Notionの特徴 　Notionとは 自由 レゴ etc... 埋め込み データベース テーブル テキスト
12. ©Project PLATEAU / MLIT Japan ページブロック Notionの特徴 　Notionとは ブロック テキスト ブロック ・・・ DB ブロック ページ ブロック 無限階層が可能！
13. ©Project PLATEAU / MLIT Japan Notionの特徴 　Notionとは
14. ©OpenStreetMap contributors 02 Notion APIでできること
15. ©Project PLATEAU / MLIT Japan •ページ •データベース コンテンツの読み取り・書き込み・削除 　Notion APIでできること コメントの読み取り・書き込み・削除 ユーザー情報の読み取り
16. ©Project PLATEAU / MLIT Japan 　Notion APIでできること •ページ •データベース コンテンツの読み取り・書き込み・削除 コメントの読み取り・書き込み・削除 ユーザー情報の読み取り
17. ©Project PLATEAU / MLIT Japan Notionと外部(他サービス)を連携させる仕組み 　Notion APIでできること ページ・データベース コネクト GitHub GitHub コネクト Slack Slack コネクト 開発者 ・・・ インテグ レーション
18. ©Project PLATEAU / MLIT Japan どのような値が取れるのか 　Notion APIでできること 実際にやってみます
19. ©OpenStreetMap contributors 03 組み込んでみた
20. ©OpenStreetMap contributors コンテンツ 読み取り編
21. ©Project PLATEAU / MLIT Japan ブログ執筆から投稿 組み込んでみた - コンテンツ読み取り 記事執筆 Qiita・Zenn 投稿サイト テキスト 画像 コピペ
22. ©Project PLATEAU / MLIT Japan 組み込んでみた - コンテンツ書き込み ブログ執筆から投稿 - 画像 記事執筆 Qiita・Zenn 投稿サイト web公開？ ダウンロードして アップロード？ クラウド？
23. ©Project PLATEAU / MLIT Japan 組み込んでみた - コンテンツ書き込み ブログ執筆から投稿 - 画像 記事執筆 Qiita・Zenn 投稿サイト web公開？ ダウンロードして アップロード？ クラウド？ 面倒くさい！！
24. ©Project PLATEAU / MLIT Japan 『Notion to Blog』 組み込んでみた - コンテンツ読み取り 記事執筆 Qiita・Zenn 投稿サイト Notionページ内の画像を自動的にS3にアップロード、 ページの画像パスをオブジェクトURLに置換し、Markdownに変換 API データ AWS S3 画像 テキスト Markdown 変換 コピペ パス置換
25. ©Project PLATEAU / MLIT Japan 『Notion to Blog』 組み込んでみた - コンテンツ読み取り Notion APIで取得できる画像パスは Notion環境AWS S3の署名付きURL 1時間で参照できなくなる。 自分の環境にコピーして配信することで、 この問題を解決する。
26. ©Project PLATEAU / MLIT Japan 『Notion to Blog』 組み込んでみた - コンテンツ読み取り
27. ©Project PLATEAU / MLIT Japan 『Notion to Blog』 組み込んでみた - コンテンツ読み取り 実際にやってみます
28. ©OpenStreetMap contributors コンテンツ 書き込み編
29. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み ある休日・・・ 「MS Accessで管理している社員の行動管理を移管 して、移動先でも容易に確認できて、画面上・メールで の更新を他のツールでもできるようにしたい。 あと分析もしたい。」 「それNotionでよくないっすか？」 お客さん 私 やってみた
30. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み データベース LINE BOT メール Google Sheets 更新 分析 閲覧・更新
31. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み データベースブロック 社員B(ページブロック) 社員C(ページブロック) 社員D(ページブロック) 社員A(ページブロック) 現在:〇〇 社員A(ページブロック)
32. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み データベースのブロックのうち、更新するブロックを特定する。 "filter": { "property": "line_user_id", "rich_text": { "equals": "{line_user_id}" } } https://api.notion.com/v1/databases/${notionDatabaseId}/query
33. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み 特定したブロックのプロパティを更新する "properties": { "現在": { "rich_text": [ { "text": { "content": currentTask } } ] } } https://api.notion.com/v1/pages/${pageId}
34. ©Project PLATEAU / MLIT Japan 社員の行動管理 組み込んでみた - コンテンツ書き込み 今回はLINEのみだが、メール他も当然可能
35. ©Project PLATEAU / MLIT Japan 組み込んでみた - コンテンツ読み取り 実際にやってみます 社員の行動管理
36. ©OpenStreetMap contributors 04 まとめ
37. © 地理院地図 全国最新写真（シームレス） •Notionは素晴らしいツール。 •Notion APIで他サービスとの連携は 新しいNotionの可能性をもたらす。 •添えるどころじゃなかった まとめ