見出し画像

AppSheetで「推し活アプリ」をつくってみた【②実装編/レベル1】

千葉真希

この記事は、前回の記事（下記参照）に続いて、AppSheetで「自分専用推し活アプリ」を作成した記録です。

今回は実装編ということで、

  1. データベースの作成とアプリ作成

  2. データの準備

  3. ビューの設定

という流れでまとめていきます。


要件確認

改めて、つくりたい機能は下記3つです。

  • メディア等出演情報のスケジュール管理（カレンダー）

  • 写真ギャラリー/アルバム

  • ライブ等イベントの感想記録

AppSheetでは、いろいろなデータベースを紐づけられますが、今回はスプレッドシートを使ってやっていきます👍

まず、上記3つの情報ソースは今回共通のものにします。1つの「イベント」に対してほしい情報をまとめ、ビューの形式に合わせて表示する情報を選択できるようにデータをつくっていきたいと思います。

データベースの作成とアプリ作成

スプレッドシートを新規に作成し、図のように列ごとに「カラム名」を設定します。
今回、ファイル名は「推し活アプリ_202405」シート名は「イベント」としています。

必要情報は、下記です。

  • イベント（の名前）

  • 日時

  • 詳細

  • 画像

  • URL

  • コメント（感想も書きたいので笑）

それ以外の「イベントID」と「ギャラリー表示」については後に説明します。

ここまできたら、早速アプリを作成します！
「拡張機能」→「AppSheet」→「アプリを作成」

作成中…
こんな画面になったらOK！

作成できたら、まずは左側のメニュー「Data」から設定をしていきます。
ここからが本番です！

データ準備

データベースの型や条件について設定する

「イベント」というテーブルを開くと、このようになります

1行目の_RowNumberはこちらで設定したものではないですが、「行番号」として自動的に入ります。

まずは下記の表にまとめたように、「TYPE」の選択と、各チェックボックスなどの設定作業をしていきましょう。

イベントID

  • 行ごとのデータを識別する際のキーになるのがイベントID

  • INITIAL VALUE ：初期値 として 「= UNIQUEID」をいれることで個別のIDが自動生成されます。

  • REQUIRE （必須）：ON

イベント

  • データ中で一番メインとなる情報、という意味で「LABEL」に設定

  • REQUIRE ：ON

ギャラリー表示

  • このあと「写真ギャラリー」をつくった際に、イベント情報として入力した内容をギャラリーにも表示するかどうかのフラグです。

  • Enum ：選択肢の中から1つ選択できるデータの型。鉛筆✏️マークから下のように設定します。

Value（選択ボタンに表示される値）を「表示する」に設定

その他

  • 表の通り

  • 全て「必須」にはしない（入れなくてもデータを登録できる）

ビューの設定

イベントの入力をするとカレンダーに日時が反映されるようにする

左側のメニュー「Views」を開くと、このような表示になります

  • View name, View type：カレンダーを選択

  • View Options：カレンダーに表示させる日時をデータの「日時」に設定

  • Description：カレンダーに表示させるタイトルをデータの「イベント」に設定

  • Icon：好きなアイコンに変更

データが何も入っていないと分かりづらいので、ここでダミーデータをいれてみます。（スプレッドシートをいじらなくても、プレビュー画面にある＋ボタンから直接入力できます！）

イベントIDは自動生成されるので、イベント名、日時、詳細、画像をいれて保存

該当の日時をみると、確かに予定が入っています！

さらにクリックすると、詳細画面のようなものが出てきます。
次はこの画面を編集していきます。

もうちょっといい感じにしたい

詳細画面の見た目を編集する

ちょっと分かりづらいですが、左下あたりに「イベント_Detail」というメニューがあります。こちらを編集していきます。

実はFormのほうで先ほど入力した画面の編集ができる

いろいろ編集できる箇所はありますが、最低限の部分だけにします。

  • Main image：メインビジュアルとして登録した画像を表示させます

  • Column order：並び替えと表示選択ができるので、下記の通り設定

    • 日時

    • イベント

    • 詳細

    • URL

  • Display mode：No Headings

上記の通り設定するとこんな感じになります

カレンダーの設定は一旦完了とします。

イベント記録を一覧で表示させる

ライブなどのイベントごとの感想・記録などもしたいので、別の画面もつくりたいと思います。
データベース設計から変えてもいいのですが、今回は簡単に1つのデータベースを使いたいので最初に設定したものを使って、新たなビューを作成します。

  • ViewsからAddボタンで新しいビューを作成

  • 名前を変更

  • View type：deck

  • Position：later（下のメニューバーに表示する順番）

  • Sort by：日時

  • Primary header：イベント

  • Secondary header：コメント

  • Show action bar：オフ

イベント記録の一覧はこんな感じ

こちらもカレンダー同様に、＋ボタンから入力可能です。
イベントの行をクリックすると、先ほど設定した詳細画面と同じものが出てきます。

（余談：ここまで書いて思い出したのですが、AppSheetはデフォルトで自動保存ではないので、逐次「Save」をお忘れなく！）

写真ギャラリーをつくり、アルバムのような見た目にする

最後にこちらです。
同じようにビューを設定するのですが、データベースの設定をしたときに「ギャラリーにも表示するかどうかのフラグ」のカラムをつくっていましたよね。ここで使います！

ビューを設定する前に、このフラグがONになっているものだけを抽出したデータを用意します。

Data→Add Slice

スライスは、フィルタのようなもので、ある条件のものだけデータを抜き出すものです。

  • Source Table：「イベント」というデータを元とする

  • Row filter condition：「ギャラリー表示する」というカラムの値が「表示する」になっているものを抽出する、という式が入っています

ビューで「ギャラリー」をつくっていきます。

同じようにつくっていけばOK

あとは、先ほどと同様に、詳細画面の設定をこちらから行います。

今回は表示させる情報をイベント名と詳細だけにしました

ギャラリー表示の分岐がうまくいっているか確認する

データを複数いれてみたいと思います。

  • テスト2：未選択

  • テスト3：「表示する」を選択

元のスプレッドシートと同期されています
「記録」には表示
「ギャラリー」には表示されない

ということで、うまくいっていると思います！

まとめ

これまでの手順で、以下の機能を実装したアプリができました！

  • 推しの活動予定を管理するカレンダー

  • イベントなどの記録ページ

  • 写真のギャラリー表示

今回は、シンプルな機能かつ細かい部分もデフォルトのままなので、もう少しグレードアップしたものを次回以降にまたまとめたいと思います。

実際、ここまでは他のアプリで代替できるものではあると思うので、ここからよりニッチな要望を叶える機能をつくっていくことになります笑

ちょっとでも面白そうと思っていただけたら、こちらはGoogleアカウントがあれば簡単につくれるので、ぜひトライしてみてください。
調べてみると色々な記事や動画がありますし、私でもわかることであればいつでもお答えします！

勉強会も実施しました

今回の内容は、パパゲーノ Work & Recovery という就労継続支援B型事業所で、利用者さん向けの勉強会の題材としても紹介しました。

なんと嬉しいことに、勉強会後にご自身でもアプリ作成にチャレンジしてみたという利用者さんもいらっしゃいました！

この間の推し活アプリを作るトレーニングはとても楽しかったです。Appsheetを知らなかったので、目からウロコでした。早速家で推し活アプリではないのですが、服の在庫の把握と服の稼働回数やどの気温帯でどんな服を着たのか、どのイベントで何を着ているかなどのアナリシスが必要で、『今日は何着る？何着た？』というアプリを作ってみました。

月の振り返りアンケートから。とってもおもしろそうなテーマです。
そのほか勉強会後にいただいた感想

今後も楽しく学んでいけたらと思っています。

ここまで読んでいただき、ありがとうございました。
よかったら"♡"いただけると嬉しいです！


いいなと思ったら応援しよう！