![見出し画像](https://assets.st-note.com/production/uploads/images/113362570/rectangle_large_type_2_edfb755b9278fca72ce9d1f82460fbfc.png?width=1200)
notionを使って5分でアプリ作成してみた
Notionといえば、データベースをカスタイマイズして作れることがメリットで、データベースは自分なりに構築している方も多いと思います。
ただ、Notionを使っていないユーザーから見るとデータベースの自由度が高く、逆に使いにくいと感じる人も多いというのがデメリットととしてありました。
そんな課題を克服できるサービス「Notion Apps」が登場したので早速、使ってみました!
![](https://assets.st-note.com/img/1692014822954-1obiVPUF7I.png?width=1200)
5分でアプリ作成してみた
アカウント登録してCreate New App
Create New Appをクリックして使用するnotionのデータベースを選択
「Manage Database」で使用するデータベースを繋ぎこむことができます。
![](https://assets.st-note.com/img/1692015365953-UyL5nQaqSw.png?width=1200)
1ページ目を作成
基本的にはデータベースの何をどのように表示させるかを決めていきます。
StyleではグリッドかListかの表示形式を選択します。
Dataではnotionのプロパティの情報のどれを表示させるか、どう表示させるかを決めることができます。
![](https://assets.st-note.com/img/1692016193076-AMdtXldeWO.png?width=1200)
サブページを作成
Open item on clickを使うことで、1ページ目のデータをクリックした後に表示させるサブページのカスタマイズができます。
Notionデータベースの中から詳細で表示させたいデータだけを見せることができます。
表示順や表示方法のカスタマイズも可能です。
![](https://assets.st-note.com/img/1692016549919-a4a6T57af4.png?width=1200)
データベースの追加ができるページ作成
「Add New Data」を使うとアプリ上からデータベースの追加ができる画面を作成できます。
Googleフォームのような簡単なフォーム画面が作れるので、notionで直接入力するより使いやすいUIでデータベースへの追加ができます。
どの項目もフォームに表示させるかもカスタマイズ可能です。
![](https://assets.st-note.com/img/1692017292184-ctuKtM6nMZ.png?width=1200)
オプションで細かい設定を変更
Search:検索ボックスを付けることができます。
Allow Scan:バーコードスキャンで検索できるようにできます。
Filtering:データベースの中で表示させるものをフィルタリングできます。
Sorting:表示順を変えることができます。
In-App Filtering:アプリ内にフィルタを付けて、ユーザーがフィルタをかけれるようにします。
私はこんな感じでデータベースの中からアプリに表示させるものを限定できるようにフィルタリングの設定をしています。
![](https://assets.st-note.com/img/1692016924152-3oy34GlTAw.png?width=1200)
2ページ目を作成
「New Screen」をクリックすることで、新しいページが作成できます。
便利なのはページごとに違うデータベースを選択できる点です!
![](https://assets.st-note.com/img/1692017103279-m5qHtbkZ4K.png?width=1200)
表示する項目やフィルタリングなどを設定します。
![](https://assets.st-note.com/img/1692017623635-gQTrJpmciI.png?width=1200)
ページ全体の設定をカスタイマイズ
複数ページある場合、ページは「ページ下部のボタン」表示もしくは「サイドナビゲーション」表示が選べます。
タブの名前、表示順もカスタマイズできます。
![](https://assets.st-note.com/img/1692017821095-Pa3NJGEyxK.png?width=1200)
アプリのロゴ、名前、URL、テーマカラーなどが「Setting」ページで設定ができます。
![](https://assets.st-note.com/img/1692018134423-zCE72WmPpj.png?width=1200)
アプリが完成
AIニュースレターで紹介している使えるAIツール、最新のAIニュースを集約したアプリを作成しました!
おすすめのAIツールを紹介
![](https://assets.st-note.com/img/1692018360284-yZN2qDf53S.png?width=1200)
データベースの内容をもとに表示させたいものだけ表示できるのが便利!
![](https://assets.st-note.com/img/1692018406306-PYgN89lLbx.png?width=1200)
最新のAIニュースを掲載
ギャラリービューだとスタイリッシュに表示できて、パッとみnotionで出来ているとは思わないデザインです!
![](https://assets.st-note.com/img/1692018447791-6PT64fvd0Y.png?width=1200)
newsの要約はnotionAIのプロパティを使って表示させています。
![](https://assets.st-note.com/img/1692018564428-ScMBfejWvP.png?width=1200)
ニュースのアーカイブを掲載
![](https://assets.st-note.com/img/1692018629368-6NIsPcN868.png?width=1200)
完成したアプリ
因みにニュースレターは平日、毎日配信中です!
Notion Appsの活用法
notionAppsの一番のメリットは既存のデータベースを使って簡単にノーコードで作成できる点です。(notionユーザーじゃなくても使える!!)
また、共同編集でデータベースへの追加が誰でもできるので簡易的なホームページとして使うだけでなく、コミュニティ運営などでも使えるかなと思います。
Twitterでも色んな使い方をしている方がいました!
NotionのDBからノーコードでアプリが作れるNotionAppsめちゃくちゃいい!
— チャベス (@ChabesuB) August 10, 2023
奥さんと行きたいところを記録、共有するアプリがサクッと作れた!
奥さんはPCとNotionは使わないけどこのアプリ経由でNotionのDB にデータを作成、更新、保存できる!
自分はPCからNotionとSave to Notion で!
最高!! pic.twitter.com/n76bVoqTUk
【アプリ動画あり】NotionサポーターのDiscordくまりえ配信の中でたむらさんとNotionAppsを触ってましたが、こいつはいいぞ・・・!
— 熊倉 佳彦|いとなみ|Notion公式アンバサダー&テクニカルコンサル (@yoshihiko_k) August 7, 2023
NotionDBと接続して
・ページをリスト/ギャラリー表示
・ページ詳細
・入力フォーム… https://t.co/IgGhy7JMX7 pic.twitter.com/iMJ1LApi8J
この記事が気に入ったらサポートをしてみませんか?