AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。本シリーズでは、超初心者向けのはじめてのアプリ作りについてお伝えしています。

前回の記事はこちら。

AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順
ノーコードアプリ開発プラットフォームAppSheetによる超初心者向けのはじめてのアプリ作りについてお伝えしています。今回は、スプレッドシートのデータから自動でプロトタイプアプリを作る手順をお伝えします。

スプレッドシートのデータから自動でプロトタイプアプリを作る方法をお伝えしました。

それで、自動作成されたプロトタイプアプリ…どんな機能が追加されているんでしょうか?気になりますよね。

ということで、その自動作成されたアプリの機能について見ていきましょう。

まずは、AppSheetで自動作成されたアプリのデータ閲覧機能を見ていきましょう。

では、行ってみましょう!

前回のおさらい

前回、以下のスプレッドシート「従業員データ」をもとに自動でプロトタイプアプリを作りました。

スプレッドシート「従業員データ」

今回は、スプレッドシートのデータがアプリに反映されているようなので、どのような閲覧ができるのか見ていきましょう。

AppSheetの「View」とdeck view

アプリの初期画面が以下のとおりです。

AppSheetの「deck view」

データのひとつひとつが、一定の幅を持っていてリスト表示されていますね。

この表示方法を「deck view」といいます。

AppSheetでは、以下のように11種類の「View」と呼ばれる表示方法が用意されていて、この中から選択することができます。

AppSheetのView type

プロトタイプ作成時には、データを元にこれらのいくつかのViewが自動で採用されて、アプリが構築されいます。

deckやtableは一覧表示に向いていますね。galleryであれば画像つきの一覧です。

他のviewは一覧表示というよりは別の目的に使われる感じですね。

今後、もしかすると、このViewの種類は増えるかも知れません。

データの詳細を閲覧する: detail view

では、「Bob」のデータの部分をクリックしてみましょう。

AppSheetのプレビューでデータをクリック

すると、Bobさんのデータの詳細を見ることができるページに遷移します。

Viewでいうと「detail view」ですね。これは個別のデータを閲覧するのに適したViewです。

スプレッドシートにあった、Name、Email、HireDate、Activeのそれぞれの列のデータが文字列、日付、Yes/Noなど適した表示がされています。

左上の「戻る」アイコンまたは、下部のナビゲーションボタンの「シート1」をクリックしましょう。

AppSheetのデータのdetail view

すると元のdeck viewに戻ることができます。

データの検索

続いて、右上の虫眼鏡のアイコン「検索」ボタンをクリックしてみましょう。

AppSheetで検索アイコンをクリック

検索窓が表示されますので、そこにカーソルを置いて「B」などと入力してみてください。

すると、deck viewのリストが絞り込まれて、ヒットしたデータのみが表示されます。

検索ワードを入力して絞り込み

プロトタイプは検索ワードによる絞り込みも標準装備です。

カレンダー表示: calendar view

次にもう一つ、ナビゲーションボタン「Calendar」をクリックしてみましょう。

AppSheetでCalendarをクリック

すると、以下のようなカレンダー表示、その名もcalendar viewによる表示になります。

おそらく、従業員データに日付型があったので、AppSheetがそれに合わせたViewも作ってくれたのでしょう。

データをクリックしてみます。

AppSheetのCalendar View

すると、そこからそのデータのdetail viewを見ることができます。

AppSheetでcalendarからdetailへ

calnedar viewの上部の「week」をクリックすると、以下のように週表示も可能です。

AppSheetでCalendar Viewをweek表示

「day」をクリックすれば日表示もできます。

イベントの日程を管理するとか、Googleカレンダーとの連携をするとかもできそうですね。

まとめ

以上、AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてきました。

単純なデータシートですが、それを解析していくつかのviewを組み合わせてプロトタイプアプリができていることがわかりますね。

さて、次回はデータの編集について見ていきましょう。

AppSheetで自動作成されたアプリのデータ追加&編集機能を使ってみよう
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。超初心者向けのはじめてのアプリ作りについてお伝えしています。今回はAppSheetで自動作成されたアプリのデータ追加&編集機能を見ていきましょう。

どうぞお楽しみに!

連載目次:超初心者向け!はじめてのApp Sheetでアプリ作り

Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。コードを一切書かずにアプリが作れる…ノンプログラマー的にはそんな素晴らしい技術は使わない手はないでしょう!本シリーズでは、その第一歩として超初心者向けのチュートリアルということで、AppSheetによるアプリ開発を体験していきます!
  1. AppSheetとは何か?そしてそれを学ぶメリットと注意すべきポイントは?
  2. ノーコード開発プラットフォームAppSheetに無料でサインアップしよう
  3. AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順
  4. AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう
  5. AppSheetで自動作成されたアプリのデータ追加&編集機能を使ってみよう
  6. AppSheetで自動作成されたプロトタイプアプリのメニューを眺めてみよう
  7. AppSheetで無料で作成したアプリを初めてデプロイする手順
  8. AppSheetで無料&自動で作成したアプリをスマホにシェアしよう!

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

タイトルとURLをコピーしました