AppSheetで制作するアプリのトップページを構築する方法

こんにちは！　Excel講師の榊裕次郎です。

AppSheetでの制作アプリは、トップページを構築することができないため、その代わりにトップページ用のGoogleスプレッドシートを1枚用意し、トップページらしく1枚のページを作成する、といったテクニックを考えてみました。

まず、用意するもの！　正方形サイズのトップページ用画像です。長方形になると、画像が途切れてしまいますので、正方形でご用意ください。

表紙画像が完成したら、最初にGoogleスプレッドシートを作成します。ポイントは、ユニークなIDがないとエラーが出力されるため、No列を作成しておきましょう。

スプレッドシートの名前は「AppSheetTopPage」とつけてみました。

これで準備完了。

AppSheetの管理画面より、[Data]メニューから[Tables]を開いて、[Add New Table]をクリックします。

Googleを選んで、Googleドライブに保存した「AppSheetTopPage」を探しましょう。

ExcelでもOffice365のOneDriveから持ってくることができるので、Excelで上記のことを行っても構いません。ただまあGoogleのほうが相性はよさそうです。

選択が終わったら、[Data]メニュー→[Columns]タブより、各データのTYPEを設定していきます。

最初、表紙画像の項目は[Text]になっているので[image]に変更してください。これで、表紙画像の列のデータ型は画像になりました。

【修正：2020/07/30追記】↑のキャプチャで、Noの項目「SHOW?」がOnになっているので、Offにしてください。これで画面上には表示されません。

次に、[UX]メニューより設定をしていきます。

View Nameは「Home」としました。ここは任意で構いません。For this data はTopPage（←これはGoogleスプレッドシートのシート名が代入されます。Googleスプレッドシートにあらかじめ「シート１」→「TopPage」と名前を入力していました）。

View typeをgalleryに設定し、アプリ上のフッター一番左にアイコンを位置したいので[left most]を設定します。

続いて、その直下の項目です。

Image sizeは Large を選択しました。アイコンはHomeと検索すると、家のアイコンが出てきます。

あとは、右側のプレビュー画面より、画像をアップしていきます。

TypeをImageにすると、ここがこのような項目になるのですね。

画像を選びます。正方形サイズがしっかりと収まります。

これでアップロードできました。

この状態だと、画像をいくつもアップロードできる状態になってしまうのと、表紙に「＋」ボタンは不要なので、ここでまた[Data]メニューに戻ります。

TopPageの詳細項目より、更新をRead-Onlyにしておきましょう。これで更新ができなくなり、アップロードした1枚の画像が表紙になる、といった具合です。

最後に、[UX]メニューの[Options]タブより、アプリを起動した初期画面を「Home」に設定しておきます。

これで完了です。

定められたシステムの中での強引なテクニックですが、いつかはアップデートがされ、トップページも管理画面から作れるようになれるといいのですけどね。

2020年7月29日現在、考えに考え抜いたトップページテクニックでした！

榊 裕次郎

Excel講師

1981年10月生まれのてんびん座、東京都出身。趣味は、旅行と料理とワイン。2024年は、佐賀県に行って「呼子のイカ」を思いっきり食べたいです。

引き続き、青森・秋田・岩手でのお仕事ご依頼、お待ちしております！