NotionAppsでタスク管理アプリを自動生成

# はじめに
NotionAppsってご存じですか？

簡単に言うと、
Notionのデータを使って、ノーコードでアプリが作れる！
というものです。

ここ数日、色々とカスタマイズ＆実行をしながら、メモを作っています。
おかげで何本か記事にできる程度のメモの蓄積はできました。

が、そんな細かい内容の前に、
「はじめてみよう」な記事がQiitaに見当たらなかったので、
まずは、自動でアプリが作られるまでの流れを記事にしておきます。

# 前提条件
Notionのアカウント(無料版でOK)を持っていること。
本稿ではNotionについての説明は割愛いたします。

2023年8月4日(執筆)時点での内容となります。

# NotionAppsとは
先ほども書きましたが、
Notionのデータを使ったアプリをノーコードで作れてしまうサービスです。

公式サイトはこちら

https://www.notionapps.com/

料金は、基本的に無料で使うことができ、何個でもアプリを作ることができます。
各プランでの違いは、扱えるデータ数やユーザ数等が違うといったところです。
![NotionApps_価格.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/5371a1c0-468b-72eb-d2d0-263d8affc1e2.png)

# NotionAppsアカウントの作成
NotionAppsを使うにはアカウント作成が必要です。
(Notionのアカウントとは別です)

以下の手順でアカウントを作成します。
1. 公式サイト右上の「Create your app」をクリックします。
1. メールアドレス/パスワードを入力するか、Googleサインインを行います。
![NotionApps_アカウント作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/dc7db097-7948-7a9b-d770-10756522bb90.png)
1. 作成できると、下記画面が表示されます。
![NotionApps_アカウント作成済.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/445bb9dd-ace0-49f6-4f34-426cb46986c6.png)
1. 画面左の「Setting」をクリックすると、ライセンスや使用状況が確認できます。
NotionAppsからのサインアウト、NotionAppsのアカウント削除もここから行えます。
![NotionApps_設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/030fe966-f690-4455-56af-6ca178ceb24b.png)

# Notionとの接続
次にNotionとの接続を行います。

1. 「Connect Notion」をクリックします。
![NotionApps_Notionとの接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/c11af8cf-5985-af36-06c5-435e23807c24.png)

1. Notion AppsからNotionへのアクセス許可を求められます。
「ページを選択する」をクリックします。
![NotionApps_Notion接続リクエスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a02527c8-b605-5cae-83c9-a1f4f98b56f8.png)

1. ページ(データベース)へのアクセス許可を求められます。
今回は、Notionにデフォルトで作成されている「タスク管理」を元にアプリを作成するため、
「タスク管理」にチェックをつけ、「アクセスを許可する」をクリックします。
![NotionApps_Notionページアクセス許可.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/e9e8604d-0a2d-631e-8a0c-210fe0425c24.png)

1. 画面が切り替われば、Notionとの接続は完了です。
![NotionApps_Notion接続完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/18b273c7-16a4-8984-cbde-015d4d83bd9c.png)

# アプリの作成
実際にアプリを作成します。

1. 「Create New App」をクリックします。
![NotionApps_Notion接続完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/18b273c7-16a4-8984-cbde-015d4d83bd9c.png)

1. 使用するデータベースを選択し、「Build App」をクリックします。
今回は「タスク管理」を選択し、アプリを作成します。
![NotionApps_アプリ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4f50be43-253d-9512-a042-86bb32732218.png)

1. 数秒でアプリが作成します。

# できたアプリ
自動で作成されたアプリには、一覧画面と編集画面が用意されています。
また、以下のような機能も自動で作成されています。

* 一覧画面から編集画面への遷移
* 編集画面でのデータベースの更新
* 編集画面から一覧画面への遷移

## 一覧画面
対象項目をタップすると、編集画面に遷移します。
また、画面上部には検索窓も用意され、値を入力するとデータを絞り込むことができます。
![NotionApps_一覧画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/6c4b390d-c772-934e-a280-836c63d90073.png)

一覧画面では、色々なことがカスタマイズできます。
* 画面上部の「画面名」
* 検索窓の有無
* 各行の表示内容(5項目まで表示可)
* 一覧形式(リスト表示/グリッド表示)
* 一覧表示する抽出条件
* 一覧表示の並び替え順
* 新規登録ボタンの有無
* ユーザが絞り込みを行うためのフィルタ機能の有無

次に、色々試してみて、逆に変えられなくて不便に思った点です。
* 日付項目の表示形式が(15 August 2023)のような形式から変えられない。
* 表示エリアの高さや幅が変えられない。

## 編集画面
値を変更し、「SAVE」ボタンをクリックすると、データベースが更新され、一覧画面に遷移します。
![NotionApps_編集画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/0266a479-805c-47e2-df4d-9b215d17d0e1.png)

編集画面でも、色々なことがカスタマイズできます。
* 「SAVE」ボタンの文言や表示位置
* 「削除」ボタンの有無、文言や確認メッセージの有無やメッセージ文言
* 項目の表示/非表示(条件に合致するときは表示するみたいなこともできる)
* 項目の変更可否(表示する部品が変更できる)
例えば、Textだと編集可だが、View Textだと参照のみ。
* 必須入力の設定
* バーコードスキャン可否
* 画像や動画、リンク、地図の表示も部品を配置するだけ
* メーラー、SMS、電話起動なんかも簡単にできる

一覧画面の時に紹介した不便に思った点については、編集画面でも同様です。

# スマホで動かす
作成したアプリをスマホで動かすには、
1. 画面右上の「Publish」をクリックします。
1. 「Share」をクリックするとURLが表示されるので、スマホでURLを入力します。
1. アプリとしてスマホから実行できます。

NotionAppsで変更を加えたら、「Publish」すれば、スマホのアプリも最新化されます。

# まとめ
私がNotionを使っていて、不便に思っていたのは「入力のし辛さ」でした。
恐らく同じように思っていた方は多いのではないでしょうか？

しかし、このNotionAppsにより、入力のし辛さが飛躍的に改善されます。
Notion APIを使って自分でアプリを作成するほどの柔軟性はありませんが、
データの登録/更新を行うアプリをノーコードで非常に簡単に作成できます。

ご興味持たれた方は、是非お試しください。

次回は、画面のカスタマイズについて書こうと思います。

# 参考文献
[NotionでPWAアプリの開発を実現するノーコードツール「NotionApps」の使い方！](https://paiza.hatenablog.com/entry/2023/08/01/150000)