はじめに

AppSheetを使ってメニュー画面を作成し、メニュータイル用にアイコン画像を使用しました。
その際、以下の画像のように表示されない問題が発生しました。
この問題について調査し、スプレッドシートで画像をデータソースとして取り込む方法について記載します。

前提

メニュータイル内にアイコン画像を読み込みます。

使用するアイコン画像をGoogleドライブに保存します。

画像ファイルは、データソースに使用するスプレッドシートと同じフォルダ内、もしくはそのサブフォルダに保存してください。

今回は以下のフォルダに保存しています。
マイドライブ/appsheet/data/作成されたアプリのフォルダ/アイコン/

アイコンは以下のサイトからダウンロードしました。

①データソース用のスプレッドシートを作成します。
保存場所：マイドライブ/appsheet/data/作成されたアプリのフォルダ

「ホーム画面」という名前でスプレッドシートを作成し、項目としてMenuとimegeを追加します。

②データを追加します。
menu:表示する名前
image:画像のファイルパス

画像のファイルパスはアイコン/ファイル名形式またはファイル名のみで参照可能です。

③作成したスプレッドシートをAppSheetに追加します。
1.「+」ボタンを押下

2.「GoogleSheets」を選択します。

3.データを選択し、「Add 1 table」を押下します。

④テーブル追加後、データの「TYPE」を修正します。

NAME	TYPE
Menu	Text
image	Image

プレビューを確認すると、アイコンが表示されています。

画像がうまく表示されない原因は、画像の保存場所でした。
Appsheetに画像を取り込む方法は複数ありますが、その中でもデータソースとして取り込む方法を紹介しました。
当記事が参考になれば幸いです。