はじめに
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に画像を取り込む方法は複数ありますが、その中でもデータソースとして取り込む方法を紹介しました。
当記事が参考になれば幸いです。