最新情報から便利な使い方まで。Notion 情報に特化した Web メディア。

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



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

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

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

NotionApps のデータの保存先のデータベース
NotionApps のデータの保存先のデータベース

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

💡

今回紹介する NotionApps は Notion API という仕組みを使って作られています。Notion API は誰でも無料で使用可能で、使い方を知ればより自由に、自分だけのアプリケーションを作ることが可能です。Notion API について詳しく知りたいという方は、以下のリンクを参考にしてみてください。

サンプルアプリ

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

PC でもサンプルアプリを動かすことができる
PC でもサンプルアプリを動かすことができる

できること

直感的な操作でノーコード開発ができる

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

NotionApps の開発画面
NotionApps の開発画面

検索機能やフィルタ機能が実装できる

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

データベースを複数連携できる

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

プライベートアプリが作成できる

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

ページ内のブロック表示に対応

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

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

できないこと

レイアウトの自由度が小さい

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

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

リスト表示
リスト表示
グリッド表示
グリッド表示

閲覧権限や更新権限は制御できない

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

リレーションプロパティには対応していない

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

料金プラン

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

NotionApps の料金プラン
NotionApps の料金プラン

登録方法

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

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

Start with your data をクリックする
Start with your data をクリックする

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

サインアップ画面
サインアップ画面

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

NotionApps の管理画面
NotionApps の管理画面

日記と習慣トラッカーアプリを作成

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

アプリと連携する Notion のデータベース
アプリと連携する Notion のデータベース

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

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

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

NotionApps で作成したアプリでデータベースを更新する様子
NotionApps で作成したアプリでデータベースを更新する様子

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

「Connect Notion」をクリック
「Connect Notion」をクリック

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

Notion のデータベースを選択
Notion のデータベースを選択

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

「Create New App」をクリック
「Create New App」をクリック

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

データベースを選択し「Build App」をクリック
データベースを選択し「Build App」をクリック

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

アプリがすでに作成されている
アプリがすでに作成されている

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

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

クリックのみでトップページはほぼ完成
クリックのみでトップページはほぼ完成

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

新規追加ページを作成
新規追加ページを作成

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

ソート設定とフィルタボタンの追加
ソート設定とフィルタボタンの追加

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

日記の詳細画面
日記の詳細画面

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

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

習慣トラッカーページの追加
習慣トラッカーページの追加

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

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

おわりに

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


株式会社 TEMP では、法人さま向けの Notion サポートを承っております。Notion の導入や運用にお困りの企業さまは、下記ページよりお気軽にお問い合わせください。


もっと Notion を学びたい方へ

Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営しています。会員数は現在300名以上。

  • 分からないことは24時間チャットツールでいつでも質問できる
  • コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
  • 1から学べる Notion 学習ロードマップで初心者からでも学習可能
  • Notion 大学限定の学習動画が100本以上
  • 定期的に開催している有料セミナーへの無料参加券
  • 過去の有料記事・有料テンプレートが全て閲覧可能

コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

Notion 大学とは?特徴・料金・参加方法について解説します

この記事の執筆者

チャベスのアイコン画像

チャベス

Web ライター・ディレクター。Notion 公式のおすすめのテンプレートクリエイター。個人で Notion をちょっと便利にする Chrome 拡張機能を開発中。代表作は「NotionSidebarHider」「Notion文字数カウント」。本業はメーカーで研究開発をしているエンジニア。

Twitter / Notion