AppSheetで作ろう！（1）｜映画鑑賞記録

日付:


前書き

日頃から業務でGoogleドライブには大変お世話になっています。

取引先へ出向くこともある職種柄、資料は基本的にGoogleドライブで管理しています。

そんなドライブの新しい機能を知ったときはとてもワクワクしますね。

この機能は業務に使えるだろうかと試行錯誤している時間がとても楽しいです。


そして最近知った、AppSheet。

ノーコードでアプリが作れる。何それ超楽しそう！！

ってことで、絶賛いろいろ試し中です。

自身の備忘録、兼、成長の過程として、アプリの作り方を記していきたいと思います。


初回は映画鑑賞記録をアプリにします。

映画館と取引がある仕事柄、ちょこちょこ映画は観ていたのですが、「劇場版 鬼滅の刃 無限列車編」に心臓を撃ち抜かれて以来、自分でもどうかしてると思うほど何度も観に行っておりまして。

これは鑑賞記録を残してみようと思っていたので、アプリにするのにちょうどよい素材となりました。


目次

前書き

アプリの仕様

1）項目の属性を設定する

2）見た目を編集する

鑑賞履歴一覧

カレンダー表示を追加

アプリ全体の見た目の調整

3）使ってみる

パソコンで使う

スマホで使う

後書き


アプリの仕様

今回のアプリでは以下ができます。

  • 情報の登録

    • 作品名

    • 作品サイトURL

    • 感想

    • 鑑賞日

    • 劇場（どこの映画館か）

    • シアター（何番スクリーンか）

    • 上映タイプ（字幕・吹き替えなど）

    • チケット（画像の登録）

  • 登録した情報の一覧表示

  • 鑑賞日のカレンダー表示


スマホで見たアプリの画面はこんな感じ。



使うデータはこちらのスプレッドシート。


AppSheetのログイン方法などは他でも説明されているので割愛しまして、スプレッドシートを取り込んで以降の設定を記します。


スプレッドシートを取り込んだところ。


1）項目の属性を設定する

ここを設定することで、AppSheetが自動的にいろいろといい感じに判断してくれます。


Data＞Columns

詳細情報（取り込んだスプレッドシートの該当シート）をクリック

  • スプレッドシートに複数のシートがあり、該当のシートが表示されていない場合は、Data＞TablesのNew Tableから該当のシートを追加すると、Columnsに現れます。


TYPEを設定する

  • サイトURL：Url（リンク表示にしてくれます）

  • 感想：Long Text（改行のある文章を入力できるようになります）

  • 鑑賞日：Date（カレンダー表示から日付を選択できるようになります）

  • チケット：Image（写真を撮れたり、すでにある画像から登録できるようになります）


右の画面はアプリの動作が確認できるようになっています。

試しに情報を入力してみます。

右下の（+）アイコンクリックで入力画面が出ます。

項目横の＊マークは入力必須の印です。

  • Data＞ColumnsのREQUIRE？で編集ができます。こちらの画像では見切れてますが、画像中央の編集画面を右へスライドすると出てきます。


Saveで情報が登録されました。


クリックすると詳細情報が表示されます


スプレッドシートにも、入力した情報が反映されています


2）見た目を編集する

鑑賞履歴一覧

UX＞Views

詳細情報をクリック


  • Views name：詳細情報から鑑賞記録に変更

  • View type：cardからdeckに変更（ここは皆様のお好みで）

  • View Options＞Primary header：作品名

  • View Options＞Secondary header：鑑賞日



編集に合わせて右側のアプリ表示も都度変更されるので、確認しながらお好みで見やすい表示にしてください。


カレンダー表示を追加

UX＞Views

New Viewをクリック

  • View name：カレンダー

  • View type：calendar

  • View Options＞Start date：鑑賞日

  • View Options＞End time：鑑賞日（これをすると、Descriptionで指定した項目がカレンダー上に表示される）



画面右上、SAVEの下にあるアイコンOpen in tabをクリックするとブラウザの画面が開き、ここでも情報の登録、編集の操作が可能。

パソコンでアプリを利用する場合の見た目がわかります。


アプリ全体の見た目の調整

UX＞Brand

  • Theme：ダークモードも選択できる

  • Primary color：アイコンなどの色を選択できる


画面右上、SAVEをクリック。

  • SAVEせずに画面を閉じると、スプレッドシートを取り込んで以降におこなった作業が消えてしまいます。

はいっ、これで今回の目的、映画鑑賞記録アプリが完成です！


3）使ってみる

Share App＞Linksで、アプリのリンクが取得できます


パソコンで使う

Share App＞LinksからBrowser Linkをコピーしてアクセス


スマホで使う

iOS・AndroidともにAppSheetのアプリがあります。

アプリから利用する場合はShare App＞LinksのInstall Linkへアクセス


パソコンで使うのと同様、ブラウザで利用する場合はBrowser Linkを取得してアクセス


スマホならチケットを写真に撮るのも手軽で重宝してます。


後書き

自身で使うだけなら以上で完了です。

本手順をまるっとそのままなぞれば、30分程度で完成させられるのではないかと思います。


作ったアプリを他の人も使えるようにするには、デプロイなる作業が必要になるようです。

私は今のところ自分だけが利用するものを試しにちまちま作っているので、現時点ではデプロイをしたことがありません。

検索すればデプロイについて説明されている記事がありますので、必要な方はそちらをご参照なさってください。


次は、各地にある映画館の場所を地図上にマッピングしてくれるアプリの作成手順を執筆予定です！


 

コメント

コメントを投稿