【NotionApps】ノーコードで簡単にNotionと連携したスマホアプリを作成する方法

この記事では、非エンジニアでもノーコードで簡単に Notion と連携したアプリを作れる「 NotionApps 」の使い方を解説します。

NotionApps を使うことで 「行きたいところ」を家族と共有できるメモアプリなどをとても簡単に作ることができるようになります。

上記で紹介したアプリのデータは、Notion のデータベースに保存されており、NotionApps 経由でデータを作成・閲覧・更新・削除ができます。Notion を開かずに Notion のデータベースを操作することができます。

NotionApps を使うことで、非エンジニアでも Notion をデータベースとしたアプリが簡単に作れてしまいます。自分が使い勝手の良いオリジナルのアプリを作って、周囲の人と共有したり、世の中に公開することもできます 。 無料で使用できるので、Notion と連携できる アプリ開発 に興味のある方は最後まで記事を見てみてください。

サンプルアプリ が公式サイトにいくつか用意されています。スマホからの確認が実際の動作を体験できておすすめですが、以下のように PC からもアプリの動作を確認できます。

NotionApps では、以下のような開発画面からノーコードでアプリを開発することができます。画面右側には、NotionApps と連携した Notion のデータベースの項目（プロパティ）が表示され、この項目の中からアプリに表示するデータを選択したり、アプリのレイアウトをカスタマイズすることができます。

アプリには検索機能やフィルタ機能を簡単に実装することができます。また、タブ機能で表示データの切替ができたり、サイドナビゲーション（ハンバーガーメニュー）も簡単に使用することができます。

一つのアプリ内で複数の Notion のデータベースを連携することができます。例えばタスク管理アプリを作る場合、プロジェクトを管理する「プロジェクト管理 DB」と、タスクを管理する「タスク管理 DB」の二つのデータベースをアプリと連携することができます。連携できるデータベースの数は無制限です。

ユーザー認証機能を簡単に実装できたり、特定のデータの表示・非表示をユーザーごとに切り替えることができます。もちろん権限設定無しで不特定多数に公開することも可能です。

データベースのプロパティのみではなく、ページ内のブロック表示にも対応しています。無料プランの場合、5ブロックまで表示可能です。

実際に使用している様子は以下のツイートを参考にしてください。

アプリのレイアウトの自由度は小さいです。例えば、アプリのトップ画面は「リスト表示」か「グリッド表示（1カラム or 2カラム）」のみからしか選択できません。よって作成したアプリの見た目はどれも似たようなデザインとなってしまいます。

例えば、以下は英単語アプリの例で、左側はリスト表示、右側はグリッド表示（2カラム）にした場合です。

ユーザーによって表示するページ・非表示にするページを切り替えることはできますが、同じページに対してユーザーによって閲覧権限と更新権限を切り替えるということは現状できません。例えば、管理者ページをアプリ内に準備しておき、管理者のみがアクセス可能、一般ユーザーはアクセス不可という対応はできます。しかし、同一のページに対して、管理者のみが更新可能、ユーザーは閲覧のみという対応は現状できません。

データベースのほとんどのプロパティに対応していますが、リレーションにはまだ対応していません。ただし、リレーションプロパティには今後対応予定と明記されています。

料金プランは以下です。無料プランの場合でも、連携できるデータベース数や作成できるアプリの数は無制限です。ただし、連携できるデータ（ページ数）は 500ページまでとなっています。例えば、3 つのデータベースを連携している場合、各データベースのページ数が「200 + 200 + 100 = 500」までは連携できます。またプライベートアプリに招待できるユーザー数についても無料プランは少なくなっています。

以下の公式サイトから NotionApps に登録します。

Convert Notion databases into powerful apps • NotionApps

Build client portals, membership portals, partner apps, field apps, internal tools, directories, student portals, or any custom apps. Choose what Notion data is shared with each user.

https://www.notionapps.com

「Clone an app template」、「Start with your data」の 2択から始めることができますが、今回は自分でデータベースを用意してアプリを作成したいため、「Start with your data」をクリックします。

メールアドレスとパスワードを入力してサインアップするか、Google のアカウントでサインアップします（自分の場合はなぜか Google でのサインアップはできませんでした）。

サインアップが完了してサインインすると、以下のような管理画面に入ることができます。これで登録は完了です。

今回は、以下のように日記と習慣トラッカーとして使用するデータベースを Notion に準備し、このデータベースを NotionApps でスマホアプリ化します。

参考までに上記のデータベースをテンプレートとして公開しておきます。必要な方は、データベースの確認や複製を行ってください。

https://chabesu-test.notion.site/ac8ea707df524902a78978b8ef19ca93?v=cea39b86e47840d68ac8fd66e1f9a82d&pvs=4

完成したアプリを操作する様子は以下です。アプリを操作することで、データベースの更新や新たなページの追加ができています。

では、アプリを作成していきます。まずは、NotionApps と Notion のデータベースを連携します。「Connect Notion」をクリックします。

データベースとの連携設定画面になるので、「ページを選択する」をクリックし、任意のデータベースを選択した後、「アクセスを許可する」をクリックします。

データベースとの連携が完了したので、「Create New App」をクリックします。

先ほど連携したデータベースを選択し、「Build App」をクリックします。

すると、すでにある程度形になったアプリが作成されます。

まずは日記アプリを作っていきます。

設定を以下のピンクの枠のように変更します（クリックで項目を選択するのみです）。するとトップページはほぼ完成しました（残念ながら現状は、日付の書式の調整ができません）。

続いて、日記を新規追加するページを作成します。新規追加ページは習慣トラッカーを含め全てのデータを追加できるようにしておきます。項目の並びのみ調整します。

続いてデータのソートとフィルタ設定のボタンの追加を行います。データのソートは日付が新しい順、フィルタボタンは曜日でフィルタが設定できるように準備しておきます。

これでトップ画面は完成しました。続いて、日記の詳細画面を作成します。日記の詳細画面では、「日付」は更新しないので閲覧のみ、「名前」、「日記」、「画像」のみ更新できるようにしておき、習慣トラッカーは削除します。

これで日記に関するページは全て完成しました。続いて、習慣トラッカーのページを作成します。

「New Screen」をクリックすると、更新ページ（Update Items）、閲覧ページ（View Items）など 4種類から選択することができますが、今回は習慣トラッカーを更新したいので「Update Items」を選択します。するとページ下部にタブが現れます。タブの設定（アイコン、タブ名の設定、タブの並び替えなど）は「All Screens」から設定できます。ページ下部のタブではなく、サイドナビゲーションにページを移行したい場合は、ドラッグ&ドロップで移行することができます。

習慣トラッカーページの作成方法は、日記ページと同様なので割愛します。以上でアプリの作成は完了です。

ページ右上の「Publish」をクリックするとアプリが公開されます。その後、「Share」をクリックするとリンクが表示されるので、そのリンクをスマホで開くことでアプリとして使用することができます。

今回は、NotionApps の使い方を解説しました。NotionApps は使い方次第で、個人や家族、チームや公開アプリとしても便利に使えます。また、Notion のデータベース側で関数プロパティや Notion AI を使って工夫することでもっと便利に使える可能性もあります。例えば、以下の英単語アプリでは、関数プロパティを工夫することでワンクリックで Google 翻訳を開き、英文の発音を確認するということもできるようにしています。皆さんもぜひ、さまざまなアイデアで便利なアプリを作成してみてください。