プログラミング不要のノーコード開発ツール「AppSheet（アップシート）」を始めましょう！
この記事ではアカウントを作成し、簡単なアプリを完成させるまで、AppSheetの使い方を一通り解説します。
データソースのGoogleスプレッドシートをダウンロードして、アプリを作ってみましょう！
目次
1. AppSheetは、Googleアカウントがあれば無料で始められる
AppSheetアカウントを作成するためには、Google、Microsoft、Apple、Dropboxなどクラウドデータプロバイダーのアカウントが必要です。
AppSheetはGoogleが提供しているサービスなので、Googleアカウントを利用するのが一番簡単です。
Googleアカウントを持っていない方は、はじめにGoogleアカウントを作成しておいてください。
2. AppSheetにアクセスしてアカウントを作成する
それでは、AppSheetアカウントを作成しましょう。
AppSheetにアクセスして、「Get started」をクリックします。
「Sign in with」が表示されます。
GoogleアカウントでAppSheetアカウントを作成するので、「Google」をクリックします。
AppSheetで利用するGoogleアカウントを選択してログインします。
表示されない場合は「別のアカウントを使用」をクリックして、自分のアカウントのメールアドレスとパスワードを入力してログインします。
AppSheetがGoogleアカウントへのアクセスをリクエストします。
アクセスを許可すると、AppSheetを通じて、Googleドライブ内のデータ（Googleスプレッドシート、画像、PDFなどのファイル）を表示したり、データを変更できるようになります。
「Google AppSheetを信頼できることを確認」以下を読んで、「許可」をクリックします。
以上で、AppSheetアカウントが作成できました。
「Create your first app」という画面が表示されれば成功です。
3. サンプルデータをGoogleドライブにアップロードする
AppSheetアカウントを作成したので、実際にアプリを作成してみましょう。
ここでは「超シンプル版タスク管理アプリ」を作ってみます。
本格的なタスク管理アプリの作り方は「AppSheetでタスク管理アプリ | カンバンでタスク管理しよう」で解説しているので、そちらを参照してください。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
簡単にアプリ作成体験ができるように、以下のようなサンプルデータを用意しました。
超シンプル版タスク管理アプリのエクセルデータを用意したので、下のアイコンをクリックしてデータをダウンロードしてください。
Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。
Googleドライブにエクセルデータを保存しました。
では、Googleドライブ上でこのエクセルデータを開いてみましょう。
エクセルデータを開いたら、Googleスプレッドシートに変換して保存しておきます。
Googleスプレッドシートに変換して保存しました。
4. AppSheetアプリを作成する
アプリを作成する準備ができました。
AppSheetにログインして、「+ Create」をクリックします。
「App」をクリックして選択し、「Start with existing data」をクリックします。
App name（アプリ名）は、とりあえず「simpleTask」にします。
Category（カテゴリー）は選択しなくてもよいです。
「Choose your data」をクリックしましょう。
「Select data source」でデータソースの場所（Googleドライブなど）を指定します。
ここでは、自分のアカウントの「Google Sheets」を選択します。
さきほど保存したGoogleスプレッドシート（超シンプル版タスク管理アプリ）を選択して「select」をクリックします。
AppSheetがデータソースを読み込んで、アプリを作成してくれます。
「We're setting up your new app...」と表示されるので少しの時間お待ちください。
AppSheetがアプリを作成しました。
エディタ画面が表示されて、画面右側に以下のようなプレビューが表示されます。
5. AppSheetの使い方〜エディタでアプリを設定する
テーブル（Table）
アプリが作成できたので、エディタ画面でアプリを設定していきましょう。
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
まずはテーブル（Table）です。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
エディタ左側メニュー「Data」をクリックして、「Tables」タブへ移動するとテーブルが表示されます。
サンプルデータには「タスク」というワークシートがひとつだけありました。
AppSheetが、この「タスク」ワークシートを読み込んで、「タスク」テーブルを作成してくれます。
テーブルの設定は特に変更する必要はありません。次に進みましょう。
列（Column）
「タスク」テーブルの列（Column）を設定していきます。
エディタ左側メニュー「Data」をクリック、「Columns」タブに移動して「タスク」をクリックして開きます。
「タスク」テーブルの列が一覧で表示されます。
「ID」から「メモ」はサンプルデータの1行目の項目です。AppSheetがサンプルデータを読み込んで、列を作成してくれます。
列にはそれぞれ「Type」という設定項目があります。
これは「データ型」といって、各列のデータがどのような型（テキスト、数値、日付、時間、画像など）か指定するものです。
こちらもAppSheetがサンプルデータを読み込んで、「ID」や「タスク」をText型、「作成日」や「期限」をDate型としてデータ型を自動的に設定してくれます。
列を設定してみましょう。はじめに「LABEL?」を変更します。
初期状態では「ID」列の「LABEL?」にチェックが入っていると思いますがチェックを外して、「タスク」列の「LABEL?」をチェックして有効にします。
アプリの設定を変更したら、必ず「Save」しましょう。
エディタ画面右上に「Save」ボタンがあるので、クリックして「Save」します。
「ステータス」列の設定をしてみましょう。
タスクのステータス（着手前、作業中、完了）をボタンで選択できるようにします。
「ステータス」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。
以下のように設定します。
- Type ：「Enum」
- Values：「Add」をクリックして、「着手前」「作業中」「完了」を追加する
- Input mode：「Buttons」
「メモ」列のType（データ型）を「LongText」にします。
以上で列設定は完了です。
ビュー（View）
続いてビュー（View）を設定してみましょう。
ビューはアプリの画面レイアウトや書式設定など、アプリの見た目を整える機能です。
エディタ左側メニュー「UX」をクリック、「Views」タブに移動します。
すでに「タスク」というビューが作成されているので、クリックして開いてみます。
「タスク」ビューの設定を確認します。
「View type」で画面レイアウトを選択できます。ここでは「deck」のままで大丈夫です。
下にスクロールして「View Options」の設定を変更してみましょう。
- Sort by：「期限」に変更して、「Ascending」にします。
- Primary header：「タスク」
- Secondary：「期限」
- Summary column：「ステータス」
以上のように設定を変更すると、下のような画面になります。
タスク名が少し大きく表示されて、期限とステータスが表示されるようになりました。
では、タスクをひとつクリックして開いてみましょう。
「Detail_View」という詳細画面に遷移します。
このビューの設定を変更してみましょう。
プレビュー画面下に「View: タスク_Detail」というリンクがあるので、クリックします。
「タスク_Detail」ビューの設定パネルが開きます。
「Quick edit columns」の「Add」をクリックして「ステータス」を追加してみましょう。
「ステータス」のモードが「Quick edit columns」に変更されて、ボタンクリックで変更できるようになりました。
続けて、画面右下の編集アイコンをクリックしてみましょう。
「Form_View」という入力フォームに遷移します。
このビューの設定を変更してみましょう。
記録上は必要ですが、入力フォームに作成日は不要なので、このフィールドを非表示にしてみます。
プレビュー画面下に「View: タスク_Form」というリンクがあるので、クリックします。
「タスク_Form」ビューの設定パネルが開きます。
「Column order」の「Add」をクリックして「作成日」以外の列を追加していきます。
「ID」も忘れずに追加してください。
以上のように設定すると、入力フォームに必要な列だけ表示できるようになります。
では実際にタスクをひとつ、新規で追加してみましょう。
プレビュー画面下の「タスク」をクリックして、右下の「+」ボタンをクリックします。
空の入力フィールドに必要事項を入力して「Save」をクリックします。
タスクを新規で追加できました。
書式設定（Format Rules）
最後にアプリの書式を変更してみましょう。
エディタ左側メニュー「UX」をクリック、「Format Rules」に移動して「New Format Rule」をクリックします。
ここでは、「期限を超過しているにもかかわらず、ステータスが完了でないタスク」の「期限」の書式を変更してみます。
期限超過なので、警告の意味を込めて「期限」の文字色を太字の赤色に変更します。
以下のように設定します。
- Rule name：「期限超過」
- For this data：「タスク」
- Format these columns and actions：「期限」を選択する
最後に「If this condition is true」を設定します。
ここに「期限を超過しているにもかかわらず、ステータスが完了でない時に」という条件式を設定します。
三角フラスコアイコンをクリックしてください。
Expression Assistantが開きますので、以下の式を入力してください。
AND( [ステータス] <> "完了", [期限] <= TODAY() )
「Visual Format」と「Text Format」を設定します。
- Text color：「red」
- Bold：チェックして有効にする
以上設定して「Save」します。
今日の日付と比較して「期限」の日付が超過しているタスクは、「期限」の日付が赤字（太字）で表示されるようになります。
6．AppSheetで作るサンプルアプリ
以上、「超シンプル版タスク管理アプリ」で簡単なアプリの作り方を体験しました。
このブログではサンプルアプリを作りながらAppSheetの使い方を学ぶことができます。
今回は「超シンプル版」でしたが、本格的なタスク管理アプリのサンプルも用意しています。
実際にアプリを作ってみることが使い方をマスターする近道です。
是非、挑戦してみてください！
ブログで解説しているサンプルアプリ
