😎

AppSheetを使ってデジタルコレクションを構築する

に公開

概要

AppSheetを使ってデジタルコレクションを試作してみましたので、備忘録です。

対象データ

以下の記事と同じデータを利用しています。

https://zenn.dev/nakamura196/articles/7e9b4a6fa21a72

具体的には、『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵)をサンプルデータとして使用します。

https://iiif.dl.itc.u-tokyo.ac.jp/repo/s/agriculture/document/187cc82d-11e6-9912-9dd4-b4cca9b10970

成果物

以下のURLからアクセスいただけます。

https://www.appsheet.com/start/092a3ff4-1074-4e27-bbd1-f4820da77511

画像の一覧機能や、

地図へのマッピング機能、

簡単な集計機能を提供します。

作成方法

アプリの初期設定

アプリを作成します。

データソースとして、Google Sheetsを選択します。ちなみに、「AppSheet Database」を使用した場合、Free Planではデプロイできませんでした。

結果、デフォルトで地図表示、およびデータの一覧を表示するページ(View)を作成してくれました。

データ

「データ」タブに移動して、設定を行います。

例えば、使用しない項目には、「SHOW?」列のチェックを外します。また、「KEY?」と「LABEL?」に対して、「identifier」と「title」を割り当てました。

次に、「DISPLAY NAME」で、アプリ上で表示する名称を入力します。

さらに、検索に使用したい項目にのみ、「SEARCH?」列にチェックを入れます。

加えて、今回はデータの閲覧のみを行うため、「Read-Only」の設定を行います。

Views(マップ)

Views(マップ)はデフォルトのまま使用しました。

Views(main)

ここでは、View nameを「Browse」に変更して、View typeとして「card」を選択して、Positionには「next」を与えました。Positionについては、メニューにおいて「Browse」が「Map」の左にくるようになります。

さらに、レイアウトについて、それぞれの要素に割り当てるカラムを設定します。例えば以下では、画像を表示する列として、「_image_url」を指定しています。

結果、一覧画面が以下のように表示されます。

Views(chart)

以下のように、新規にViewを追加します。

そして、「Chart columns」に、ここではカテゴリが格納されたカラムを設定しました。結果、画面右部のように表示が変わります。

その他

その他、アプリの見た目を変更します。

設定 > Theme & Brand から、例えば、ヘッダーにロゴなどが表示されるように変更します。

また、今回の初期設定では「Map」Viewがはじめに開いてしまうので、「Browse」が表示されるように、「Views」の設定を変更します。

Preview

ここまでのところでプロトタイプはほぼ完成です。Previewモードで確認することができます。デフォルトで、各レコードの詳細画面も表示されます。

URLとして設定した値には自動的にリンクが付与されます。IIIFビューアへのリンクを与えたことにより、画像の詳細はリンク先で閲覧できます。

デプロイ

ここから、デプロイを行います。ただ、上記までの手順だと、以下のようにErrorやWarningが表示されます。それぞれについて対応します。

Account status

以下のように表示されます。

Invalid subscription plan: DemoApp-957795297: User signin not allowed with the FREE plan

そこで、「Security」から「Require sign-in」をオフにして、付随する質問にチェックを入れました。

再度、「Deployment Check」に戻り、「Continue editing」を押して、「Run deployment check」ボタンを押すと、以下のようにエラーが解消します。

Performance

Performanceにおいて、2件のwarningがあります。

設定 > Performance から、「Server caching」を有効にしました。

オフラインモードについては、「Store content for offline use」の挙動を十分に理解できず、デフォルトの設定から変更しませんでした。

その他

そのほか、アプリの説明の追加やカスタムロゴを設定することで、warningをなくすことができました。

APIの利用

さらに、APIによるデータの操作も可能なようでした。「Integrations」から有効にします。

以下は、Thunder Clientを用いて、Read処理を行った例です。

以下の記事が参考になりました。

https://zenn.dev/yuta_enginner/articles/5b382d51b0019e

まとめ

AppSheetの使い方として間違っている点や、今回作成したものがデジタルコレクションと呼べるか等はあやしいところですが、参考になりましたら幸いです。

AppSheetに限らず、ノーコードまたはローコードツールの発展が楽しみです。

Discussion