STUDIOのNotion API連携、Noway Form利用してサイトからNotion DBにデータ取得したときの紆余曲折
先日参加したインターンシップで初めて STUDIO、Notion データベースを利用した web アプリを作成しました。
想定通りには完成させられなかったものの、作成過程で学んだこと、苦労したことを書きます。
キーワード
STUDIO と Notion API 連携、STUDIO で Noway Form 利用
記事の目的
私が困ったことを共有することで、上記キーワードの内容を行う下記ターゲットの助けになること
そのため、API 連携方法・Noway Form の作成方法、STUDIO の操作方法などの基本的な説明は公式ガイドページやその他参考記事に任せます。
この記事の価値は、私が作業工程でつまずいたこととその解決方法を示すことにあるため、黄色枠の注意書きに注目していただければ目的を果たせると思います。
初めて STUDIO に API 連携を行う際に感じたややこしさを乗り越え、その便利さ・楽しさを感じる一助となれば幸いです。
記事のターゲットの状態（＝作成を始めたばかりの頃の自分）
- STUDIO を初めて用いる
- API 連携も初めて
- Notion は少しだけ触ったことある程度
ツールはすべて無料の範囲で用いています。
技術選定
今回参加したインターンシップのテーマが、Notion データベースを利用したアプリの作成というものでした。
作成したグループ人数は自分を含めて 4 人、互いに初対面で、作成期間は約 1 ヶ月間と、毎日着実に進捗をあげられないと間に合わないと判断したため、ノーコードツールを用いることにしました。
その中でも、STUDIO を用いることにした理由は以下があげられます。
- 日本語に対応
- サーバーを自分で用意する必要がない
STUDIO と Notion API連携
以下の STUDIO 公式ガイドページを確認していただければ、Notion インテグレーション作成からデータベースへの接続、STUDIO への API 連携ができると思います。
データパネルが出現した様子
データパネルの properties トグルを開くと、Notion データベースで設定したプロパティが確認できると思いますので、プロパティそれぞれのトグルを最深まで開き、画面に表示したいものを、表示する箇所までマウスでドラッグして紐づけてください。
Noway Form で作成したフォームを STUDIO に埋め込む
次に、Noway Form の作成方法ですが、こちらは以下の記事を参考にしました。
作成が完了したら、フォーム編集画面上部の「埋め込み（iframe）」をクリックし、コードをコピーしておいてください。
フォーム上部の埋め込み（iframe）ボタン
STUDIO のデザインエディタに戻り、フォームを追加したいページにて、
「追加」 -> 「ボックス」 -> 「Embed の Blank」をクリックすると、埋め込みが可能なボックスが出現します。
そのボックスを選択した状態で、画面右側のメニューから、先ほどコピーしておいたコードをペーストすれば、STUDIO に Noway Form で作成したフォームを埋め込むことができます。
Noway Form の埋め込み
さいごに
以上 2 点、「STUDIO と Notion API連携」「Noway Form で作成したフォームを STUDIO に埋め込む」際に私が困ったことと、その解決方法を提示しました。
いずれも強力なツールであり、初心者であってもある程度品質の良いwebアプリを作成することができると感じました。ただ、無料の範囲ということもあり、制限が多く、100% 理想的な制作物にはできませんでした。
もちろん、公式の推奨する使用方法や、使用する状況によりもっと良いものが作れるとは思います。
今回、ノーコードツール STUDIO と、Notion データベースを用いて web アプリを作成することで、ツールの強力さ、簡便さ、窮屈さを知ることができました。
より柔軟に作成するには、それらツールが行ってくれていた処理を理解し、言語やデータ構造を学ぶことが重要である、と再認識することができました。
web アプリの作成をやってみたい初心者の方は、学習目的を掴む意味でも、今回説明したツールを利用して簡単なサイトを作成してみると良いと思います。
至らない点が多くあると思いますが、少しでも私のような初心者の手助けになれば幸いです。
Discussion