AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順


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

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

前回の記事はこちら。

ノーコード開発プラットフォームAppSheetに無料でサインアップしよう
ノーコードアプリ開発プラットフォーム「AppSheet」による超初心者向けのはじめてのアプリ作りをお伝えしています。今回はAppSheetに無料でのサインアップをするところまでの手順をお伝えします。

AppSheetに無料でサインアップするところまでを進めました。

今回はいよいよスプレッドシートのデータをもとにアプリを作ってみたいと思います。

AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順です。

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

アプリの元データとなるスプレッドシートを選ぶ

Quick Startからはじめる

前回、Googleアカウントを使ってAppSheetのサインアップを行いました。

すると、AppSheetのログイン後の画面は、以下のようになります。

AppSheetサインアップ後のページ

「Quick Start」に何やら色々と並んでいますね…

実はこれ、Googleアカウントで既に作成済みのスプレッドシートです。

AppSheetのアプリ開発は、すでにデータのあるスプレッドシートや、質問が作られているフォームから、自動でプロトタイプを作るところからはじめることができます。

そこで、その題材となるスプレッドシートを選ぶのが、その第一歩となるのですが、AppSheetが、「このスプレッドシートをアプリ化したらいいんじゃね?」というおすすめのものが「Quick Start」に並んでいるのです。

なお、Quick Startに目当てのスプレッドシートがなければ、検索欄に入力して、対象のスプレッドシートを絞り込むことができます。

AppSheetでスプレッドシートを検索する

題材とするスプレッドシートについて

ここで題材とするスプレッドシートですが、以下の「従業員データ」を使います。

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

従業員について以下のようなデータを記録しているスプレッドシートですね。

  • Name: 名前
  • Email: メールアドレス
  • HireDate: 入社日
  • Active: 在籍しているかどうか

ちなみに、以下にリンク貼っておきます。閲覧可にしていますので、データの入力が面倒であればコピーして使ってください。

Google スプレッドシート: ログイン
Google スプレッドシートには、無料の Google アカウント(個人ユーザー向け)または G Suite アカウント(ビジネス ユーザー向け)でアクセスできます。

スプレッドシートから自動でアプリ作成

ということで、AppSheetのQuick Startから「従業員データ」を選択して進めてみましょう。

AppSheetのデータとして「従業員データ」を選択する

少し待つと…

以下のような画面が現れます。

AppSheetのプロトタイプアプリ

見慣れない画面なので、すこしキョドるかも知れませんが、これはAppSheetの「Editor」、アプリを作成するための編集画面となります。

もう既にプロトタイプのアプリが作成されたのですが、わかりますか?

スマホ版のプレビューを見る

右側のエリアをご覧ください。

「Mobile」つまりスマホで見たときのプレビューなのですが、元となっていたスプレッドシート「従業員データ」のデータっぽいやつが並んでいるように見えますね。

AppSheetのMobileのスタート画面のプレビュー

それぞれのデータには、編集ボタンとメールボタンが用意されています。

また画面内には、その他以下のような要素も確認できます。

  • ハンバーガーメニューボタン
  • 検索ボタン
  • 更新ボタン
  • 新規追加「+」ボタン
  • 「シート1」ボタンと「Calendar」ボタン

タブレット版のプレビューを見る

右上の「Tablet」のアイコンをクリックすると、タブレットで表示したときのプレビュー画面に切り替わります。

同じ内容を表示する画面で、画面が大きくなりましたね。

AppSheetのTabletのプレビュー

ブラウザ版のプレビューを見る

さらに、右上の「Open in tab」をクリックすると…

AppSheetでOpen in tabをクリック

別タブで大きな画面での表示に切り替わります。

つまり、これはPCでブラウザで使用するときのプレビューになるわけですね。

AppSheetのブラウザ版のプレビュー
つまり、モバイル・タブレット・ブラウザと3つのプレビューを確認しながら、エディタでプロトタイプアプリの調整ができるんですね。

まとめ

以上、AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順をお伝えしました。

各版のプレビュー画面をざっと見ただけですが、このようなプロトタイプアプリが、スプレッドシート「従業員データ」を元に自動で作成されているのです。

すごくないですか?

作成されたプロトタイプアプリの機能について、次回より詳しく見ていきましょう。

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をコピーしました