メインコンテンツへスキップ
見出し画像

観劇記録アプリ、自作したほうが早いんちゃう?①準備編

    こんにちは。舞台観劇(おもに2.5次元界隈)を趣味としている面倒くさがり社会人です。

    情報が多い

    突然ですが、オタクの現場って情報量が多すぎませんか?
    情報解禁!申込!抽選!入金!発券!遠征!物販!交換!観劇!交換!みたいな。

    実際はもっと混沌としていて、私は年間50件くらいの現場(舞台以外も含む)に入るのですが、解禁申込現場解禁ホテル予約申込クレカ通知当落当落当落先着コンビニ入金物販交換交換交換当日券交換観劇交換交換EX予約梱包配信郵送配信事後通販配信申込申込クレカ通知当落交換観劇交換……みたいなことを一生やっています。
    とりあえずこれから先の楽しい予定は逃すまいと致死量のリマインダをセットしたり致死量のブラウザを開いたままにしてみるけど、それでも忘れるときは忘れる。何故なら情報が整理できていないから。遠征=旅行の準備ですら「チケットと財布とスマホと防振があればギリ行ける」と公言しているような雑な奴に丁寧な推し事ができる訳がないんですよね〜。今も3つくらい当落待ちあるけどいつ何の当落が出るんだったか忘れた。もはや覚えておく気もない。

    そんな奴が、ある時数年分の半券の情報をまとめてGoogleスプレッドシートに記録しそれを使ってグッズ整理をしたところ、これが非常に捗りまして。これはいいぞ!これからはちゃんとデータをまとめていこう!と思ったんですけど、史上最大級最悪おしまい繁忙期に入ってしまい、せっかく作った管理用スプレッドシートもものの3ヶ月ですっかり更新が滞ってしまったのでした。
    だって、Googleスプレッドシートってスマホからも見られるけど、スマホで入力すんのクッソ面倒くさいねんもん。横長と縦長でさぁッ!PC入力は得意だけど平日にPC引っ張り出して作業すんのもしんどいし、土日は現場行ってるし、普通に無理、次の連休は現場ないからそんときまとめて入力するね(するかなあ)

    スマホアプリが欲しい

    そのような経緯に加え、チケ代高騰が続く中で終わった現場の記憶が押し流されてすぐに風化するのはこれまで以上に惜しい(許せん)という思いも募りはじめ、データ整理を再開したいと考えていた夏頃、ちょうどTwitterで観劇記録アプリの情報を見かけました。確かに、スマホアプリがあったら隙間時間に入力したり、撮った写真の整理もしやすくなりそうですよね。
    ということで、いくつかインストールを検討してみたのですが、いろいろ考えている内に「もう自分でアプリ作った方がおもろいし早いんちゃうん?」という気がしてきて……

    いろいろ①:管理用スプレッドシートのデータもったいないかも(十中八九更新しなくなる、面倒くさがりに二兎は追えない)
    いろいろ②:万が一サ終したとき、お前にまた一からデータを作る根性はあるか(無いです)
    いろいろ③:ズボラなので欲しい機能を過不足なく備えたアプリを1つだけ手に入れたい(でも探すのが面倒くさいよね!)

    で、画面こねこねしてたらアプリができたよ。

    適当にやったらなんかできた

    画面イメージ:

    画像
    メインコンテンツの観劇履歴&予定。公演ごとにグループ化+公演日降順。
    画像
    公演詳細画面。右下のボタンからGoogleカレンダーへの連携やデータの複写登録が可能。
    画像
    公演情報入力フォーム。一応、写真やメモを残すこともできる。
    画像
    これはグッズ交換のお約束をメモしておく機能。
    画像
    取引予定入力フォーム。手渡しも郵送もどちらも登録可能。
    画像
    これは観劇当日の予定をざっくり確認できる「TODAY'S」。

    アプリの仕組み

    このアプリ、観劇記録というのはあくまでも扱うデータのジャンルであって、本質は「Googleスプレッドシート入力補助アプリ」です。
    私はアプリ開発以前からGoogleスプレッドシートに観劇履歴データを蓄積していたので、これを活用するためにGoogleが提供するノーコード開発プラットフォーム「AppSheet」を使ってスマホからの入力作業を楽におこなえるようにしました。
    これだけ聞くと皆さんが「観劇記録アプリ」と聞いてイメージするものとは少し違うかもしれません。が、そこは観劇オタクが作ったアプリですので、画像のとおり他にも現場で役立つ機能を搭載しております。主な機能の詳細は追って紹介します。

    このアプリの強み

    私が考えるこのアプリの強みは、次の3点です。

    個人でデータを管理できる

    AppSheetはクラウドストレージ上にあるGoogleスプレッドシートやExcelなどのデータを元にしてPC・スマホ対応のアプリを作成する業務改善ツールです。つまり、GoogleドライブやOneDrive等に保存されているデータと連携してスマホで作業をしやすくするためのアプリを作成することができるわけです。初めて見るアプリはセキュリティ・個人情報取扱の面で不安を感じられる方が少なくないと思いますが、自家製かつ自分が日頃使っているGoogleドライブやOneDriveがデータ保存先になりますので比較的安心して導入できるのではないでしょうか。

    マルチデバイス対応

    また、AppSheetはAndroid・iOSに対応しており、GoogleアカウントとAppSheetアプリがあれば様々なモバイル端末で作成したアプリを利用することができます。アプリから登録・編集した内容はクラウド上の元データへほぼリアルタイムに同期されますので、例えばPCで入力+スマホでカレンダー連携みたいな複数の端末を駆使した操作も可能です。OSをまたいで機種変更したときもGoogleアカウント等を引き継ぐことで使い続けられるはずです。

    長期運用の期待値が高い

    提供元がGoogleかつ業務改善ツールである(汎用性が高い)ということが今回の開発手段の決め手になりました。きっかけ・目的が「観劇の履歴・データを整理して蓄積すること」でしたので、データベースとして保持することを考えると観劇というニッチな趣味に特化した専用アプリよりもこちらの方が長期運用に対する期待値が高いと考えました。Google提供だからといってAppSheetがなくならない訳ではありませんが、データベース(GoogleスプレッドシートやExcelなど)はクラウドストレージ上に残りますし、将来的に履歴データインポートが可能な別アプリができたらその素材としても使えるやん?と思っています。

    デメリット

    Googleスプレッドシート+AppSheetのデメリット

    一方で、この手法にはデメリットもあります。
    まずは「デザイン・レイアウトの自由度が低いこと」。
    そして「第三者への配布が難しいこと」です。
    このアプリの内容と開発についてTwitterでpostしたところ興味を持ってくれた方がいたのでぜひ提供したいと思ったのですが、実は今回作ったアプリはAppStoreやGooglePlayなどのアプリストアで入手できるような手軽にインストールして使えるアプリとは異なります。アプリ+データベースをセットで複製し共有することはできるのですが、利用者ごとにデータベースの接続先を正しく設定し直す必要があります。共有するのは開発元(私)個人のGoogleドライブ内ファイルなので、共有先の方がデータベース接続先を変更せずにうっかりそのファイルに直接書き込んでしまうと私が全情報にアクセスできてしまうのですよね……もしアプリを複数人に共有していたら、設定によっては他の利用者同士でデータが閲覧・編集できてしまう可能性もあります。こちらのドライブの容量にも影響が出てしまうし、この方法は取りたくない。(ヒント:撮影可能現場)

    今回共有するもの

    お前もアプリ開発者にならないか?

    せっかく作ったものだから他の人にも使ってみてほしいけど、単純な配布・共有には不安がある……それならばもう残された方法は「設計書を元に各自で自分専用アプリを開発する」これでしょう。素晴らしい提案をしよう。お前もアプリ開発者にならないか?

    ということで、ここから先は「プログラミング未経験者でも作れる・Googleスプレッドシート拡張機能によるスマホで動くアプリ開発」として、各種データの構造・AppSheetの操作方法を紹介し、各自真似て作成していただくことでこのアプリを共有したいと思います。
    アプリを使ってみたい&自分で一から構築することに抵抗がない方はぜひ挑戦してみてください。(そういえば開発画面はすべて英語でした。英語苦手な方はがんばって)

    注記:筆者はAppSheetとスプレッドシートをノリと雰囲気で触っているので、一連の記事内で間違った用語を使用している場合があります。
    本稿は筆者が親しい方に向けて作業メモを整えたものですので、AppSheetについて正しい内容を知りたい方は然るべきところで学んでください。(私自身にこのスキルを磨く気は一切ありません。)お仕事などでGoogleWorkspaceを使われている方にとっても、目新しい情報はないかもしれません。

    では、どんな奴がどれくらいの期間で作れたか、改めて自己紹介です。参考にしてね。

    作った人:

    とても面倒くさがり。会社では申請WEBアプリを作ったりしてます(非IT人材で本業ではないのでせいぜい初〜中級レベル)。スマホはAndroid一筋。先日、いくつかの生成AIから「鬼厳しいQA担当」「AIを詰めるデジタル現場監督」などと言われた。細長い推しと顔が濃い推しがいます。

    開発期間:

    トータル20時間くらい 
    ・主要機能の観劇履歴管理機能は8時間
    ・Googleカレンダー連携機能は6時間
    ・取引管理機能と今日の予定機能のアプデに6時間
    仕様考えたりデバッグしたり生成AIをネチネチ詰めたり飲酒しながらの所要時間ですので、まねっこするときはもっと短時間でできると思います!

    2026年10月時点の主な機能:

    ■観劇履歴管理
    アプリからの新規データ登録
    登録済データの修正
    登録済データをコピーして編集→登録 ※マチソワ登録するとき便利
    履歴一覧表示(作品ごとにグルーピングして公演日降順)
    Googleカレンダーへの予定新規登録
    Googleカレンダーに登録済みの予定(日時)をアプリ経由で更新
    ■過年度の観劇アーカイブ ※元データを年別にシートを分けたい人向け
    ■お取引メモ
    進行中のグッズ交換の進捗管理ページ ※手渡し、郵送いずれも登録可
    ■TODAY’S
    観劇履歴とお取引メモから「今日一日のタスク」を抽出し表示する機能

    もうすでに追加したい機能ある、終わりがない、

    準備するもの

    それではいよいよ開発に取り掛かりましょう。
    まずは次のものを用意します。
    ・Googleアカウント
    使用するサービスはドライブ(スプレッドシート・必須)とカレンダーとフォト(任意)です。
    ・PC
    ・スマートフォン
    ・AppSheetアプリ(各アプリストアからスマホにインストール)
    開発作業はPCブラウザ上でやるので何かしらのソフトインストールは必要ありません。
    ブラウザ上にもスマホ画面のプレビューエリアがあるけど、実機でデバッグやりながら作業する方が動作がイメージしやすくておすすめです。

    ExcelやOneDriveを使いたい人は各自で連携方法調べてクレメンス。
    iOS版AppSheetも細かいところはわからないです、ごめんなさい。

    作成手順

    開発は観劇履歴管理→カレンダー連携→過年度アーカイブ→取引管理→TODAY’Sの順に進めていきたいと思います。
    本稿では【観劇履歴管理機能の途中】まで作成することができます。

    データシートをつくる

    まず最初に、Googleドライブ内にスプレッドシートを1つ作成します。
    これがこれから作るアプリの土台になります。
    ・この作業はスマホでおこなってもOK
    ・既存のファイル使用OK
    ・のちのち細かい設定を端折るとこのファイル名称がアプリのデフォルト名になります。なんかかっこいい名前付けとき。

    できましたでしょうか?では続いて、記録する項目(列)を作ります。
    左から順に
     No. (管理用。後で自動採番できるようにします。)
     公演名
     区分 (「舞台」「ライブ」みたいな分類。整理してる感が出ますね。)
     日程
     回 (「第一部」「昼の部」など。開演時間とかわかる前に仮情報を入れることもあるかもしれないので。ただのメモ欄です。)
     開演時間
     終演時間
     会場
     座席/整番
     Googleフォト
     観劇メモ
    としましょう。

    画像
    こんな感じ。自分が管理したい項目にカスタムしてOKです。区分欄の設定はこの後の手順に登場します。

    そして、あとで様々なマスタシートを増やすのでシート名も分かりやすく変更しておいてください。私はシートを年ごとに分けたい人なので[2026]にしています。

    AppSheetを開く

    次に、PCブラウザでGoogleドライブにアクセスし、先程作ったスプレッドシートを開きましょう。
    上部ツールバーの「拡張機能」を展開、その中にある「AppSheet」から「アプリを作成」を選択します。

    画像

    すると、先程のスプレッドシートがすでにデータソースに取り込まれた状態で新しいアプリが作成されます。
    画面はこんな感じ↓

    画像

    左側にナビゲーション、真ん中にカスタマイズエリア、右側にスマホアプリのプレビューが表示されるようになっています。

    データテーブルの確認とデータ型の整理

    元のスプレッドシートのデータがどのように連携されているか見てみましょう。
    左端からキャビネットのアイコン(Data)を選択し、開いたパネル内に先程「2026」シートがあることを確認します。

    画像
    この画像の項目名、ちょっと間違えてます。すみません。

    _RowNumberはAppSheet側が自動生成した項目です。今回作ったスプレッドシートはヘッダーのみ作成しすぐに連携した(レコードが無い)ため、データ型=TypeがすべてText型になっています。これを次の画像のとおり、それぞれ適した型に変更していきます。

    画像
    シート「2026」のデータ型。項目名間違ってるところあるのでデータ型だけ参考にしてください。

    Typeの変更のついでに、REQUIRE?=入力必須項目のチェックもつけておきます。右の方へスクロールすると、他にもチェック欄がありますが、基本的にはそのままでOK。SEARCH?のみデフォルトですべてONになっていると思いますが、アプリ内で検索をかけるときの対象にするかどうかなので自由に設定して構いません。私は公演名・区分・日程・会場・メモだけチェックを残して検索対象にしています。

    ここで一旦保存(画面右上のSAVEボタン押下)をしますと、区分のところにエラーが出ると思いますので、次はこれを解消しましょう。
    原因はTypeをEnum型(列挙型・あらかじめ用意したリストから値を選択する形式)にしているのに、元のスプレッドシートでその選択肢となる値が定義されていないから。アプリ側で選択肢を呼び出して入力・編集することができない状態です。
    元のスプレッドシートを開き、C列「区分」の2行目を選択、右クリックor挿入内の「プルダウン」を設定します。

    画像
    項目名と色、個数は特にルール無いです。お好みでどうぞ!

    完了ボタンを押したら、AppSheetに戻りTable:2026の右上にあるRegenerate schemaをクリック・実行してアプリに連携されているデータテーブルを更新します。

    画像
    連携済のテーブルをスプレッドシート側で設定変更したときはこの操作を行います。

    仮想列を追加する

    このアプリの公演一覧は表示形式にDeck型というものを使っているのですが、ここに表示できる項目は最大3つです。(画像の赤枠部分)
    公演名・日程・時間・会場・席番を入れたいところですが全部は入りきらないし、日程と時間は1行にまとまっていた方が見やすそうです。
    こういうとき、スプレッドシート側でそもそもデータ入力のルールを変えたり、複数の項目を結合し参照用のデータ列を作るのも一つの方法ですが、AppSheetにはスプレッドシート上のデータを変更せずにAppSheet上で計算・生成して処理に使うことができる「仮想列」という機能があるので、これを使って見た目を整えていきたいと思います。
    ※このアプリでは後々「TODAY’S」をタイムライン表示させるために時間単体のデータが必要となるので日程と時間をスプレッドシート側で一本化するアレンジはおやめください……!

    画像

    今回作る仮想列は次の3つです。
    ①最新観劇日
    ②公演日時
    ③会場+座席番号

    ①最新観劇日
    用途:2026年の履歴一覧の中で、公演名が同じものを1つのグループにまとめて、より後の日付で観劇履歴(予定)がある作品グループが一覧の先頭に来るように並べ替えるのに使用します。
    こちらもDeck型の表示項目節約のために作成しました。さっきの画像内の「2026/12/15 舞台「テスト」」の部分に使っていて、各レコードにこの値を持たせ集計・表示させています。集計・表示の設定はビューの作成の章で解説します。

    画像
    ついでに、作品単位でまとめとくとグッズ整理とか年末振り返りがしやすそう。という理由。

    設定方法:
    画面右上のAdd virtual columnをクリック
    App formula欄をクリックして、次の式をセットします。

    画像
    仮想列追加ボタンはここ
    CONCATENATE(TEXT(MAX(SELECT(2026[日程],[公演名]=[_THISROW].[公演名])),"YYYY/MM/DD")," ",[公演名])

    2026シート内で同じ公演名のレコードを抽出し、その中で日程の最大値を取得、TEXTで文字列に直して公演名と結合しています。
    式を入力してDoneを押下すると設定項目が増えているので、次の項目を設定します。その他の項目は変更不要です。
    Name:最新観劇日
    Type:Text

    画像
    テーブルに戻ると一番下に最新観劇日の行が増えています。仮想列は左端の編集(えんぴつ)アイコンが青色になっています。また、スプレッドシートを見ていただくと新しい列は増えていないはずです。

    ②公演日時
    用途:日付と時間をつなげて表示するため
    ①と同様に、Add virtual columnから次の3つを設定します。

    text([日程],"YYYY/MM/DD")& " " &text([開演時間],"HH:MM")

    Name:公演日時
    Type:Text ※表示用なので文字列として扱います。

    ③会場+座席番号
    用途:会場と座席番号をつなげて表示するため
    ①と同様に、Add virtual columnから次の3つを設定します。

    [会場]&" "&[座席/整番]

    Name:会場+座席番号
    Type:Text

    レコードの自動採番

    新しい公演データを登録した際に、No.列へ番号を自動入力する機能です。いちいちスプシ見て手動採番なんかやってらんないじゃん?
    AppSheet≫Data≫2026内のNo.の設定画面(鉛筆マーク)を開き、Auto Computeの欄を展開します。
    その中のInitial value欄=初期値に次の式を入力し、保存(Done)します。
    TypeがNumber型になっていることを確認したら完了です。App formulaは使用しません。

    MAX(2026[No.])+1

    これで新しいレコードを登録する際、スプレッドシート内のNo.列の最大値+1が初期値として自動で採番されるようになります。
    既存のデータの振り直しはありませんので、例えばレコードを削除するなどして欠番が出たときはそのままですし、2ヶ月先の公演が登録済で1ヶ月後のイベントを後から追加したときは公演日順で採番しなおすといったこともできません。あくまでも登録順です。
    このNo.の項についてはスプレッドシート側できれいに並べることにこだわらないようにしましょう。後ほどカレンダー連携・更新機能をつけるのですが、その時レコードと予定を紐づけるキーを作るのにこの番号を使います。カレンダー実装後にこの番号を入れ替えたり重複させたりすると連携エラーが起こる可能性があるので、こちらはデータ処理用と割り切っていただき、並べ替え用の番号が欲しい場合は別途番号列を追加してください。

    以上でデータを蓄積する場所とメインの観劇履歴機能を作成するためのパーツがそろいました。
    ここからはいよいよアプリの操作画面を作成していきます!

    (別記事に続きます)



    この記事が参加している募集

     
     
    よく舞台を観に行っているオタクです。GoogleスプレッドシートとAppSheetでオタク業務の効率化をはじめました。

    あなたへのおすすめ