AppSheetを使ってデジタルコレクションを構築する
概要 AppSheetを使ってデジタルコレクションを試作してみましたので、備忘録です。 対象データ 以下の記事と同じデータを利用しています。 具体的には、『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵)をサンプルデータとして使用します。 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モードで確認することができます。デフォルトで、各レコードの詳細画面も表示されます。 ...