NotionAppsでアプリ開発する手順

ユーザー登録(無料)

NotionAppsのトップページにアクセス

Create custom apps from Notion in minutes • NotionApps

Buildclientportals,membershipportals,partnerapps,fieldapps,internaltools,directories,studentportals,oranycustomapps.ChoosewhatNotiondataissharedwitheachuser.

www.notionapps.com

「Create your app」をクリック。

「Sign up」する

「Sign in」する

データベースの作成

「NotionApps」は、Notionのデータベースを利用してアプリを開発します。

そこで、Notionのページを新しく作成して、そこへ新規にデータベースを追加します。（※データベースの中身は空っぽでOK）

Notionにログインする

The AI workspace that works for you. | Notion

Atoolthatconnectseverydayworkintoonespace.ItgivesyouandyourteamsAItools—search,writing,note-taking—insideanall-in-one,flexibleworkspace.

www.notion.so

用途を選択し、「続ける」をクリック

「ページを追加」をクリックし、適当なタイトルを入力し、「テーブル」をクリック。

「新規データベース」をクリック

NotionAppsとNotionの接続

NotinoAppsに戻り、「Connect Notion」ボタンをクリックします。

「ページを選択する」をクリック

先ほど作成したデータベースにチェックを入れ、「アクセスを許可する」をクリック。

アプリの作成

「+ Create New App」をクリック

先ほど作成したデータベースにチェックをいれ、「Build App」をクリック。

「Guide」は面倒くさいのでスキップします。

データの表示

Notionに戻り、データベースにデータを入れる

NotionAppsに戻り、削除ボタンをクリックしてリセットしておく。

「DELETE」をクリック。

「+New Screen」をクリック

「View items」をクリック

Notionのデータベースに追加した情報が、エディタのアプリ画面に表示される。もしデータが反映されていない場合は、エディタ上部の「Reload」をクリックして更新。

今回は焼き鳥屋の情報を画像つきで表示するため以下のような設定にする。

• View Type：Grid
• Grid Column Count：One
• Grid Image Style：Rectangle

Notionデータベースとの連動も以下のように設定します。

• Title：名前
• Description：リンク
• Image：画像

画像付きの焼き鳥屋リストが閲覧できるようになった。

データの追加

Notionのデータベースから情報を読み取れたので、次は新しい情報をアプリからデータベースへ追加できる仕組みを作っていく。「New Screen」をクリックし、「Add New Item」をクリック。

追加するためのフォームが自動的に生成された

公開

「Publish」をクリックして公開。

「Share」をクリック

コピーしたURLをブラウザで開くと、アプリにアクセスできる。PCブラウザからWebアプリとして利用でき、スマホのブラウザからアクセスしてアプリのように使うこともできる（PWAに対応）

動作確認

データを追加してみたいと思います。各項目を入力し、「Save」をクリック

画面に追加された。

データベースにもデータが追加されている。