Yappli で iOS エンジニアをしている三宅です!

Yappli では CMS を利用してアプリをノーコードで作成できるアプリプラットフォームの開発を行っています。業務とは関係のないプライベートでのお試し実装ですが、今回はノーコードツールである「Notion」とノーコードコラボして「Notion でノーコードアプリを作る」をミニマムで試してみました!🚀

Notion とは

Untitled

Notion はメインとしてはドキュメンテーションツールですが、ロードマップの可視化や機能仕様のドキュメント化、プロジェクト管理などさまざまな用途にフィットし、それらのページを簡単に作成し Web ページとして公開することができるなどの魅力的な機能がたくさんあります。

※ 画像は Notion の公式サイトから引用

Notion API

そんな Notion ですが、待望の API が今年の 5月 に public beta として公開されました 🎉

Start building with the Notion API

Beta 版なので今後に期待したい部分はありつつも、ノーコードで作成したページのレイアウトとデータの情報を API 経由で取得できるようになったことで、様々な利用用途がありそうです...!

ちなみに現時点で Beta 版は API Rate Limit が設定されており、3 requests / second となっています。

今回はこちらの Notion API を利用して、ノーコードでシンプルなアプリを作成できるまでを試してみたいと思います💪🏻

Notion のどんな表現をアプリでどう表現するか

今回はサンプルアプリの実装なので凝った作りは避けつつ、Notion の Table を利用して画面構成を作っていく形で試してみたいと思います。

※ Rate Limit もあるので、データソースは外部の JSON を読み込むようにしたりなど、雑な部分はご容赦ください🙇🏻w

実際に利用する Notion のテーブルは以下です🐈

レイアウト

Notion API のセットアップと API Client の実装

Notion API の実装はドキュメントを確認してください。以下のように integration を Notion のページに invite し、integration の Secret Key を Request Header にのせることでリクエストできます!

Untitled