AppSheetの使い方 | AppSheetを始めよう

folder_openAppSheet
AppSheet アカウントを作成しよう

プログラミング不要のノーコード開発ツール「AppSheet(アップシート)」を始めましょう!
この記事ではアカウントを作成し、簡単なアプリを完成させるまで、AppSheetの使い方を一通り解説します。
データソースのGoogleスプレッドシートをダウンロードして、アプリを作ってみましょう!

1. AppSheetは、Googleアカウントがあれば無料で始められる

AppSheetアカウントを作成するためには、Google、Microsoft、Apple、Dropboxなどクラウドデータプロバイダーのアカウントが必要です。
AppSheetはGoogleが提供しているサービスなので、Googleアカウントを利用するのが一番簡単です。
Googleアカウントを持っていない方は、はじめにGoogleアカウントを作成しておいてください。

2. AppSheetにアクセスしてアカウントを作成する

それでは、AppSheetアカウントを作成しましょう。
AppSheetにアクセスして、「Get started」をクリックします。

AppSheet Webサービスで「Get started」をクリックする。

「Sign in with」が表示されます。
GoogleアカウントでAppSheetアカウントを作成するので、「Google」をクリックします。

Googleアカウントを選択する。

AppSheetで利用するGoogleアカウントを選択してログインします。
表示されない場合は「別のアカウントを使用」をクリックして、自分のアカウントのメールアドレスとパスワードを入力してログインします。

AppSheetで利用するGoogleアカウントを選択してログインする。

AppSheetがGoogleアカウントへのアクセスをリクエストします。

アクセスを許可すると、AppSheetを通じて、Googleドライブ内のデータ(Googleスプレッドシート、画像、PDFなどのファイル)を表示したり、データを変更できるようになります。

「Google AppSheetを信頼できることを確認」以下を読んで、「許可」をクリックします。

AppSheetがGoogleアカウントにアクセスすることを許可する。

以上で、AppSheetアカウントが作成できました。
「Create your first app」という画面が表示されれば成功です。

3. サンプルデータをGoogleドライブにアップロードする

AppSheetアカウントを作成したので、実際にアプリを作成してみましょう。

ここでは「超シンプル版タスク管理アプリ」を作ってみます。
本格的なタスク管理アプリの作り方は「AppSheetでタスク管理アプリ | カンバンでタスク管理しよう」で解説しているので、そちらを参照してください。

AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
簡単にアプリ作成体験ができるように、以下のようなサンプルデータを用意しました。

「超シンプル版タスク管理アプリ」のデータソースをAppSheetに読み込む。

超シンプル版タスク管理アプリのエクセルデータを用意したので、下のアイコンをクリックしてデータをダウンロードしてください。

Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。

Googleドライブにエクセルのデータをアップロード。

Googleドライブにエクセルデータを保存しました。
では、Googleドライブ上でこのエクセルデータを開いてみましょう。

Googleドライブ上でこのエクセルデータを開く。

エクセルデータを開いたら、Googleスプレッドシートに変換して保存しておきます。

エクセルデータを開いたら、Googleスプレッドシートに変換して保存。

Googleスプレッドシートに変換して保存しました。

Googleスプレッドシートに変換して保存。

4. AppSheetアプリを作成する

アプリを作成する準備ができました。
AppSheetにログインして、「+ Create」をクリックします。

AppSheetエディタを開き「Create」をクリックしてアプリを作成する。

「App」をクリックして選択し、「Start with existing data」をクリックします。

AppSheetエディタで「Start with existing data」をクリックする。

App name(アプリ名)は、とりあえず「simpleTask」にします。
Category(カテゴリー)は選択しなくてもよいです。
「Choose your data」をクリックしましょう。

App nameでアプリ名を入力、Choose your dataでデータを選択する。

「Select data source」でデータソースの場所(Googleドライブなど)を指定します。
ここでは、自分のアカウントの「Google Sheets」を選択します。

Google Sheetsを選択する。

さきほど保存したGoogleスプレッドシート(超シンプル版タスク管理アプリ)を選択して「select」をクリックします。

Googleスプレッドシートを選択する。

AppSheetがデータソースを読み込んで、アプリを作成してくれます。
「We're setting up your new app...」と表示されるので少しの時間お待ちください。

AppSheetがデータソースを読み込んで、アプリを作成する。

AppSheetがアプリを作成しました。
エディタ画面が表示されて、画面右側に以下のようなプレビューが表示されます。

AppSheetがアプリを作成する。

5. AppSheetの使い方〜エディタでアプリを設定する

テーブル(Table)

アプリが作成できたので、エディタ画面でアプリを設定していきましょう。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

まずはテーブル(Table)です。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。

エディタ左側メニュー「Data」をクリックして、「Tables」タブへ移動するとテーブルが表示されます。
サンプルデータには「タスク」というワークシートがひとつだけありました。
AppSheetが、この「タスク」ワークシートを読み込んで、「タスク」テーブルを作成してくれます。

テーブルの設定は特に変更する必要はありません。次に進みましょう。

テーブル(Table)を設定する。

列(Column)

「タスク」テーブルの列(Column)を設定していきます。
エディタ左側メニュー「Data」をクリック、「Columns」タブに移動して「タスク」をクリックして開きます。

列(Column)を設定する。

「タスク」テーブルの列が一覧で表示されます。
「ID」から「メモ」はサンプルデータの1行目の項目です。AppSheetがサンプルデータを読み込んで、列を作成してくれます。

列にはそれぞれ「Type」という設定項目があります。
これは「データ型」といって、各列のデータがどのような型(テキスト、数値、日付、時間、画像など)か指定するものです。

こちらもAppSheetがサンプルデータを読み込んで、「ID」や「タスク」をText型、「作成日」や「期限」をDate型としてデータ型を自動的に設定してくれます。

テーブルの列が一覧で表示される。

列を設定してみましょう。はじめに「LABEL?」を変更します。
初期状態では「ID」列の「LABEL?」にチェックが入っていると思いますがチェックを外して、「タスク」列の「LABEL?」をチェックして有効にします。

「LABEL?」を変更する。

アプリの設定を変更したら、必ず「Save」しましょう。
エディタ画面右上に「Save」ボタンがあるので、クリックして「Save」します。

アプリの設定を変更したら、必ず「Save」する。

「ステータス」列の設定をしてみましょう。
タスクのステータス(着手前、作業中、完了)をボタンで選択できるようにします。

「ステータス」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。

列の設定をする。

以下のように設定します。

  • Type :「Enum」
  • Values:「Add」をクリックして、「着手前」「作業中」「完了」を追加する
  • Input mode:「Buttons」

Type Details を設定する。

「メモ」列のType(データ型)を「LongText」にします。

「メモ」列のType(データ型)を「LongText」にする。

以上で列設定は完了です。

ビュー(View)

続いてビュー(View)を設定してみましょう。
ビューはアプリの画面レイアウトや書式設定など、アプリの見た目を整える機能です。

エディタ左側メニュー「UX」をクリック、「Views」タブに移動します。
すでに「タスク」というビューが作成されているので、クリックして開いてみます。

ビュー(View)を設定する。

「タスク」ビューの設定を確認します。
「View type」で画面レイアウトを選択できます。ここでは「deck」のままで大丈夫です。

「View type」で画面レイアウトを選択する。

下にスクロールして「View Options」の設定を変更してみましょう。

  • Sort by:「期限」に変更して、「Ascending」にします。
  • Primary header:「タスク」
  • Secondary:「期限」
  • Summary column:「ステータス」

「View Options」の設定を変更する。

以上のように設定を変更すると、下のような画面になります。
タスク名が少し大きく表示されて、期限とステータスが表示されるようになりました。

では、タスクをひとつクリックして開いてみましょう。

アプリのビュー(View)が変更される。

「Detail_View」という詳細画面に遷移します。

このビューの設定を変更してみましょう。
プレビュー画面下に「View: タスク_Detail」というリンクがあるので、クリックします。

「Detail_View」を表示する。

「タスク_Detail」ビューの設定パネルが開きます。
「Quick edit columns」の「Add」をクリックして「ステータス」を追加してみましょう。

「Detail_View」を変更する。

「ステータス」のモードが「Quick edit columns」に変更されて、ボタンクリックで変更できるようになりました。
続けて、画面右下の編集アイコンをクリックしてみましょう。

「Quick edit columns」に変更する。

「Form_View」という入力フォームに遷移します。

このビューの設定を変更してみましょう。
記録上は必要ですが、入力フォームに作成日は不要なので、このフィールドを非表示にしてみます。
プレビュー画面下に「View: タスク_Form」というリンクがあるので、クリックします。

「Form_View」を表示する。

「タスク_Form」ビューの設定パネルが開きます。

「Column order」の「Add」をクリックして「作成日」以外の列を追加していきます。
「ID」も忘れずに追加してください。

「Form_View」を変更する。

以上のように設定すると、入力フォームに必要な列だけ表示できるようになります。

入力フォームに必要な列だけ表示する。

では実際にタスクをひとつ、新規で追加してみましょう。
プレビュー画面下の「タスク」をクリックして、右下の「+」ボタンをクリックします。

タスクをひとつ、新規で追加する。

空の入力フィールドに必要事項を入力して「Save」をクリックします。

空の入力フィールドに必要事項を入力して「Save」をクリック。

タスクを新規で追加できました。

タスクを新規で追加。

書式設定(Format Rules)

最後にアプリの書式を変更してみましょう。
エディタ左側メニュー「UX」をクリック、「Format Rules」に移動して「New Format Rule」をクリックします。

アプリの書式を変更。

ここでは、「期限を超過しているにもかかわらず、ステータスが完了でないタスク」の「期限」の書式を変更してみます。

期限超過なので、警告の意味を込めて「期限」の文字色を太字の赤色に変更します。

以下のように設定します。

  • Rule name:「期限超過」
  • For this data:「タスク」
  • Format these columns and actions:「期限」を選択する

最後に「If this condition is true」を設定します。
ここに「期限を超過しているにもかかわらず、ステータスが完了でない時に」という条件式を設定します。

三角フラスコアイコンをクリックしてください。

書式(Format Rules)を設定する。

Expression Assistantが開きますので、以下の式を入力してください。

AND(
 [ステータス] <> "完了",
 [期限] <= TODAY()
)

「Visual Format」と「Text Format」を設定します。

  • Text color:「red」
  • Bold:チェックして有効にする

「Visual Format」と「Text Format」を設定。

以上設定して「Save」します。
今日の日付と比較して「期限」の日付が超過しているタスクは、「期限」の日付が赤字(太字)で表示されるようになります。

「期限」の日付が超過しているタスクは、「期限」の日付が赤字。

6.AppSheetで作るサンプルアプリ

以上、「超シンプル版タスク管理アプリ」で簡単なアプリの作り方を体験しました。

このブログではサンプルアプリを作りながらAppSheetの使い方を学ぶことができます。
今回は「超シンプル版」でしたが、本格的なタスク管理アプリのサンプルも用意しています。

実際にアプリを作ってみることが使い方をマスターする近道です。
是非、挑戦してみてください!

ブログで解説しているサンプルアプリ

Share Me!

次の投稿
AppSheet で電子名刺アプリ(第1回)連絡先をQRコードで表示しよう

関連記事

メニュー