photo credit: Solar Team Eindhoven zonneauto Stella Era van Solar Team Eindhoven via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。本シリーズでは、超初心者向けのはじめてのアプリ作りについてお伝えしています。
前回の記事はこちら。
AppSheetに無料でサインアップするところまでを進めました。
今回はいよいよスプレッドシートのデータをもとにアプリを作ってみたいと思います。
AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順です。
では、行ってみましょう！
アプリの元データとなるスプレッドシートを選ぶ
Quick Startからはじめる
前回、Googleアカウントを使ってAppSheetのサインアップを行いました。
すると、AppSheetのログイン後の画面は、以下のようになります。
「Quick Start」に何やら色々と並んでいますね…
実はこれ、Googleアカウントで既に作成済みのスプレッドシートです。
AppSheetのアプリ開発は、すでにデータのあるスプレッドシートや、質問が作られているフォームから、自動でプロトタイプを作るところからはじめることができます。
そこで、その題材となるスプレッドシートを選ぶのが、その第一歩となるのですが、AppSheetが、「このスプレッドシートをアプリ化したらいいんじゃね？」というおすすめのものが「Quick Start」に並んでいるのです。
なお、Quick Startに目当てのスプレッドシートがなければ、検索欄に入力して、対象のスプレッドシートを絞り込むことができます。
題材とするスプレッドシートについて
ここで題材とするスプレッドシートですが、以下の「従業員データ」を使います。
従業員について以下のようなデータを記録しているスプレッドシートですね。
- Name: 名前
- Email: メールアドレス
- HireDate: 入社日
- Active: 在籍しているかどうか
ちなみに、以下にリンク貼っておきます。閲覧可にしていますので、データの入力が面倒であればコピーして使ってください。
スプレッドシートから自動でアプリ作成
ということで、AppSheetのQuick Startから「従業員データ」を選択して進めてみましょう。
少し待つと…
以下のような画面が現れます。
見慣れない画面なので、すこしキョドるかも知れませんが、これはAppSheetの「Editor」、アプリを作成するための編集画面となります。
もう既にプロトタイプのアプリが作成されたのですが、わかりますか？
スマホ版のプレビューを見る
右側のエリアをご覧ください。
「Mobile」つまりスマホで見たときのプレビューなのですが、元となっていたスプレッドシート「従業員データ」のデータっぽいやつが並んでいるように見えますね。
それぞれのデータには、編集ボタンとメールボタンが用意されています。
また画面内には、その他以下のような要素も確認できます。
- ハンバーガーメニューボタン
- 検索ボタン
- 更新ボタン
- 新規追加「+」ボタン
- 「シート1」ボタンと「Calendar」ボタン
タブレット版のプレビューを見る
右上の「Tablet」のアイコンをクリックすると、タブレットで表示したときのプレビュー画面に切り替わります。
同じ内容を表示する画面で、画面が大きくなりましたね。
ブラウザ版のプレビューを見る
さらに、右上の「Open in tab」をクリックすると…
別タブで大きな画面での表示に切り替わります。
つまり、これはPCでブラウザで使用するときのプレビューになるわけですね。
つまり、モバイル・タブレット・ブラウザと3つのプレビューを確認しながら、エディタでプロトタイプアプリの調整ができるんですね。
まとめ
以上、AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順をお伝えしました。
各版のプレビュー画面をざっと見ただけですが、このようなプロトタイプアプリが、スプレッドシート「従業員データ」を元に自動で作成されているのです。
すごくないですか？
作成されたプロトタイプアプリの機能について、次回より詳しく見ていきましょう。
どうぞお楽しみに！
連載目次：超初心者向け！はじめてのApp Sheetでアプリ作り
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。コードを一切書かずにアプリが作れる…ノンプログラマー的にはそんな素晴らしい技術は使わない手はないでしょう！本シリーズでは、その第一歩として超初心者向けのチュートリアルということで、AppSheetによるアプリ開発を体験していきます！- AppSheetとは何か？そしてそれを学ぶメリットと注意すべきポイントは？
- ノーコード開発プラットフォームAppSheetに無料でサインアップしよう
- AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順
- AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう
- AppSheetで自動作成されたアプリのデータ追加＆編集機能を使ってみよう
- AppSheetで自動作成されたプロトタイプアプリのメニューを眺めてみよう
- AppSheetで無料で作成したアプリを初めてデプロイする手順
- AppSheetで無料＆自動で作成したアプリをスマホにシェアしよう！
- スマホ版のAppSheetアプリからデータの編集と追加をする方法
- スマホ版AppSheetのアプリギャラリーとホーム画面への追加方法
- AppSheetでプロトタイプアプリを作成する３つの方法
- AppSheetでアイデアを入力しながらプロトタイプを作る手順
- AppSheetでアイデアから作成したアプリのテーブルやカラムを眺めてみよう！
