【GoogleAppSheet入門ガイド】シンプルToDoリストの作り方

今回は、初心者の方でも簡単にアプリを作成できる「Google AppSheet」の入門ガイドをお届けします。

このガイドでは、AppSheetを使って初めてのアプリを作る方に向けて、手順を丁寧に解説していきます。

目次
  1. AppSheetでアプリを作ろう
  2. 今回作成するアプリの概要
  3. アプリを作る前に準備すること
    1. 何を管理するかを考える
    2. マインドマップでアイデアを整理する
    3. 必要な管理項目の設定
    4. スプレッドシートに項目を入れる
  4. スプレッドシートからアプリを作成する
    1. アプリ作成の手順
      1. スプレッドシートの準備
      2. AppSheetの拡張機能を起動
      3. アプリの作成と初期設定
    2. モバイルビュー画面の活用しよう
  5. アプリの設計手順
    1. 初期状態の確認と調整
    2. 各フィールドの設定(ID、タスク、カテゴリーなど)
      1. IDの設定
      2. タスクの設定
      3. カテゴリーの設定
      4. ステータスの設定
      5. 日付の設定
  6. アプリの使いやすさを整える
    1. IDフィールドの非表示設定
    2. ステータスの初期値設定
    3. タスク入力の自動化と調整
  7. テストデータの登録と確認
    1. テストタスクの入力方法
    2. 正常に動作しているかの確認
  8. アプリの表示設定 (VIEWS)
    1. 見栄えの調整とデザインの変更
    2. タスクの完了・未完了でのグループ化
  9. アクションボタンの追加と活用
    1. アクションの追加
    2. アクションのタイプ設定
    3. ボタンのアイコンと表示位置の設定
  10. カレンダー表示の設定
    1. ビューの追加
    2. ビューのタイプをカレンダーに設定
    3. カレンダーの基本設定
  11. ダッシュボードの作成とカスタマイズ
    1. ダッシュボードビューの作成
    2. 表示するビューの選択
    3. 配置とサイズの調整
    4. 視覚的にわかりやすいダッシュボードの作成
  12. AppSheetを活用して業務改善を進めよう

AppSheetでアプリを作ろう

Google AppSheetは、プログラミングの知識がなくても簡単にアプリを作成できるプラットフォームです。

データ管理や業務効率化に役立つアプリを手軽に作成でき、多くのビジネスシーンで活用されています。

今回は、AppSheetを使った「シンプルToDoリスト」の作成方法を紹介します。

タスク管理とカレンダー機能を備えたこのアプリで、日常の業務や個人のタスク管理がより便利になります。

今回作成するアプリの概要

今回作成するアプリは、左側にタスクリスト、右側にカレンダーが表示されるシンプルなToDoリストです。

このアプリの主な機能は次の通りです。

  • タスクをリスト形式で表示し、管理がしやすい
  • カレンダー表示で、タスクの期限や予定を視覚的に確認できる
  • カテゴリーやステータス(完了・未完了)を簡単に設定でき、タスクの状態を一目で把握できる

これらの機能により、日々のタスクを効率よく管理できるようになります。

それでは、具体的な作成手順について説明していきます。

アプリを作る前に準備すること

アプリを作り始める前に、何を管理するかを明確にしておくことが重要です。

以下、アプリの作成前に行うべき準備について解説します。

何を管理するかを考える

最初に考えるべきことは、アプリで何を管理するかです。今回作成するToDoリストでは、以下の項目を管理します。

  • ID(一意の識別子として使用)
  • タスク名(やるべきことの内容)
  • カテゴリー(仕事・プライベートなど分類)
  • ステータス(完了・未完了)
  • 期限(タスクの締め切り日)
  • 作成日(タスクの作成日)

これらの項目を事前に決めることで、アプリの設計がスムーズに進みます。

特にIDは、AppSheetの機能上必須となるため、必ず含める必要があります。

マインドマップでアイデアを整理する

アプリの構造を考える際には、マインドマップを使ってアイデアを整理することがオススメです。

マインドマップを活用することで、どの項目をどのように管理するかを視覚的に把握でき、アプリ設計のイメージが明確になります。

例えば、タスクの管理項目として「ID」「タスク名」「カテゴリー」「ステータス」「期限」「作成日」が必要であれば、それらの項目をマインドマップで視覚化し、関連性を見ながら構成を決めるとよいでしょう。

必要な管理項目の設定

次に、管理項目を具体的に決定していきます。

今回は、シンプルなToDoリストアプリということで、基本的な6つの項目に絞っていますが、必要に応じて項目を追加することも可能です。

例えば、担当者を追加して、タスクの割り当て管理を行うこともできます。

そして、項目が決定したら、次はこれらをどのようにスプレッドシートに展開するかを考えます。

スプレッドシートに項目を入れる

AppSheetのアプリ作成では、Googleスプレッドシートをデータソースとして使用します。

決定した項目をスプレッドシートに反映させたら、いよいよAppSheetの拡張機能を使ってアプリを作成していきます。

スプレッドシートからアプリを作成する

AppSheetでは、Googleスプレッドシートをデータソースとして利用し、簡単にアプリを作成することができます。

まず、スプレッドシートを用意し、先ほど決めた管理項目を入力していきます。

シートの名前は「シンプルToDoリスト」にし、項目ごとに列を設定します。

以下、AppSheetの拡張機能からアプリを作成する手順を見ていきましょう。

アプリ作成の手順

スプレッドシートの準備

用意したスプレッドシートを開き、データが正しく入力されていることを確認します。

シート名は「シンプルToDoリスト」とし、各列に管理項目を設定します。

AppSheetの拡張機能を起動

Googleスプレッドシートのメニューから「拡張機能」→「AppSheet」→「アプリを作成」を選択します。

すると、AppSheetのウィンドウが表示され、自動的にアプリの初期設定が行われます。

アプリの作成と初期設定

AppSheetが自動的にデータを読み込み、初期のアプリが作成されます。

この時点で基本的なアプリの骨組みが出来上がり、タスクの入力やデータ表示が可能な状態になります。

モバイルビュー画面の活用しよう

AppSheetでは、作成したアプリをすぐに確認できるモバイルビューやタブレットビュー、デスクトップビューが用意されています。

これにより、アプリがどのように表示されるのかを視覚的に確認しながら設計を進めることができます。

例えば、アプリの表示をモバイルビューで確認し、項目の配置やボタンの位置などを細かく調整することもできます。

これにより、ユーザーにとって使いやすいインターフェースが完成します。

アプリの設計手順

ここからは、アプリの設計手順について詳しく見ていきます。

作成したアプリの初期状態を確認し、必要に応じて各項目の設定を行いましょう。

初期状態の確認と調整

AppSheetで自動生成されたアプリは、初期状態ではまだ調整が必要な部分が多くあります。

例えば、カテゴリーやステータスなどのフィールドは選択肢が設定されておらず、タスクの入力もまだ使いづらい状態です。

各フィールドを具体的に設定し、ユーザーが操作しやすいように調整します。

各フィールドの設定(ID、タスク、カテゴリーなど)

スプレッドシートで設定した項目に設定をしていきます。

IDの設定

IDはアプリの中で各タスクを一意に識別するための重要な項目です。

AppSheetではIDを自動的に生成するユニークIDの設定が用意されているため、この機能を利用してIDを管理します。

この設定により、IDは手動で入力する必要がなく、ユーザーに見えない形で管理されます。

タスクの設定

タスクフィールドは、ユーザーが自由に入力できる形式に設定します。

状況に応じて異なる内容を入力できるようにするため、自由入力ができるように設定しておきます。

カテゴリーの設定

カテゴリーは選択式にし、「仕事」や「プライベート」などの選択肢を設定します。

これにより、入力の手間を減らし、データの統一性を保つことができます。

選択式にするには、AppSheetのフィールド設定で「Enum」(イーナム)タイプを選び、選択肢を登録します。

ステータスの設定

ステータスも選択式に設定し、「完了」と「未完了」を選択できるようにします。

これにより、タスクの進捗状況を簡単に管理できるようになります。

設定手順はカテゴリーと同様で、Enumタイプを選んで選択肢を登録します。

日付の設定

日付フィールドには「Date」または「DateTime」タイプを設定し、ユーザーが簡単に日付を選べるようにします。

「Date」は日付のみ、「DateTime」は日時までを入力する設定です。

これにより、タスクの期限や作成日を簡単に管理できます。

アプリの使いやすさを整える

アプリの基本設定が完了したら、次に使いやすさを整えるための微調整を行います。

IDフィールドの非表示設定

IDはアプリの内部で必要なものであり、ユーザーが操作する際に表示される必要はありません。

AppSheetの設定画面で「Show」オプションのチェックを外すことで、IDをユーザーから非表示にできます。

この設定により、見た目がすっきりし、不要な情報が表示されないようになります。

ステータスの初期値設定

タスクを新規作成する際、ステータスは通常「未完了」から始まります。

AppSheetでは、ステータスの初期値を設定することができ、これによりユーザーが一から選択する手間を省くことができます。

「Initial Value(初期値)」に「未完了」と設定することで、新しいタスクが作成された時点で自動的に未完了の状態になります。

タスク入力の自動化と調整

タスクの作成日やその他のデータが毎回入力されるのは手間がかかります。

そこで、AppSheetの「Initial Value(初期値)」に関数を使うことで、現在の日時を自動で入力することができます。

例えば、「NOW()」という関数を使用することで、作成日が自動で入力され、手間を減らすことができます。

テストデータの登録と確認

テストタスクの入力方法

ここでは、アプリが正常に動作するかどうかを確認するために、テストデータを登録していきます。

テストデータを入力することで、各項目が正しく設定されているか、アプリの使い勝手はどうか、などを実際に確認できます。

まずは「テストタスク」という名前でいくつかのタスクを作成し、入力の流れや設定内容が適切に反映されているかを確認します。

正常に動作しているかの確認

入力したタスクが正しく表示されているかを確認し、編集や削除が正常に機能することをチェックします。

これにより、アプリの使い勝手や設定内容が適切かどうかを確認できます。

アプリの表示設定 (VIEWS)

AppSheetでは、アプリの見栄えやデザインをカスタマイズすることができます。

ここでは、アプリの表示設定を調整し、使いやすいデザインに仕上げる方法を解説します。

見栄えの調整とデザインの変更

アプリの見た目を整えるために、VIEWS(ビュー)の設定を調整します。

初期状態では「デック」ビューが設定されていることが多いですが、用途に応じて「テーブル」や「ギャラリー」、「カレンダー」などの表示形式を選ぶことができます。

デックビューが見づらいと感じた場合には、テーブルビューに変更することで、情報を一覧形式で表示できます。

特に多くのタスクを管理する際には、テーブルビューの方が視覚的に分かりやすくなります。

タスクの完了・未完了でのグループ化

タスクを完了・未完了でグループ化することで、進捗状況が一目でわかるようになります。

ビューの設定で「ステータス」でグループ化し、未完了タスクを上部に表示するなどの調整を行います。

AppSheetのビュー設定で「グループバイ」オプションを使用し、「ステータス」でグループ化します。

これにより、未完了のタスクが上部に、完了したタスクが下部に表示され、どのタスクが進行中か一目で把握できるようになります。

アクションボタンの追加と活用

アクションボタンを追加することで、タスクをワンクリックで完了にするなどの操作が可能になります。

「ステータス完了」ボタンを設定し、ボタンを押すだけでタスクのステータスが変更されるようにします。

アクションボタンは、アプリの操作を簡単にするための便利な機能です。

今回は、タスクのステータスを完了にするアクションボタンを追加していきます。

アクションの追加

AppSheetの「アクション」設定画面に移動し、「新しいアクションを作成」をクリックします。

アクションの名前は「ステータス完了」に設定し、アクションボタンを押すとタスクのステータスが「完了」になるように設定します。

アクションのタイプ設定

「Set the value of some column in this row(この行のある列の値を設定)」というアクションタイプを選び、ステータスを「完了」に変更する設定を行います。

これにより、ボタンを押すだけでタスクのステータスが変更されるようになります。

ボタンのアイコンと表示位置の設定

ボタンのアイコンは視覚的にわかりやすいものを選びましょう。

チェックマークなど、完了を表すアイコンを設定することで、直感的に操作できます。

また、表示位置も調整し、使いやすい場所に配置します。

設定が完了したら、実際にアクションボタンを使用してタスクを完了にします。

ボタンを押してタスクのステータスが正しく変更されるかを確認し、操作性が向上していることを確認します。

カレンダー表示の設定

カレンダー表示を追加することで、ToDoリストのタスクをより直感的に確認できるようになります。

まずは、カレンダービューを新たに作成し、アプリに追加する方法をご紹介します。

ビューの追加

AppSheetの「ビュー」設定に移動し、「新しいビューを追加」をクリックします。

ビューの名前を「カレンダー」と設定し、どのデータを表示するかを「ToDoリスト」に指定します。

ビューのタイプをカレンダーに設定

新しく作成したビューの「ビュータイプ」を「カレンダー」に設定します。

これにより、タスクがカレンダー形式で表示されるようになります。

カレンダーの基本設定

カレンダーの基本設定として、表示するデータのフィールドを指定します。

例えば、タスクの期限を「開始日」として設定し、タスクの終了日を指定するフィールドがない場合は同じ日付を「終了日」に設定することで、カレンダー上にタスクが表示されるようになります。

ダッシュボードの作成とカスタマイズ

ダッシュボードを作成することで、複数のビューを一つの画面で表示できるようになります。

これにより、タスクとその期限を同時に確認でき、作業の全体像を把握しやすくなります。

ダッシュボードビューの作成

AppSheetの「ビュー」設定に移動し、「新しいビューを追加」をクリックします。

ビューの名前を「ダッシュボード」と設定し、ビュータイプを「ダッシュボード」に選択します。

表示するビューの選択

ダッシュボードに含めるビューを設定します。

「ToDoリスト」と「カレンダー」を選び、それぞれをダッシュボードに追加します。

これにより、左側にタスクリスト、右側にカレンダーが表示される画面が完成します。

配置とサイズの調整

ダッシュボード内で各ビューの配置やサイズを調整し、見やすいレイアウトにします。

タスクリストとカレンダーがバランスよく表示されるように配置し、視認性を高めます。

視覚的にわかりやすいダッシュボードの作成

ダッシュボードのレイアウトを調整し、情報が視覚的にわかりやすくなるように工夫します。

タスクリストとカレンダーの配置を工夫し、色やアイコンを使って重要な項目を強調することで、使いやすさを向上させます。

なお、本ブログの内容は当社youtubeチャンネルでも紹介していますので、ぜひご確認ください。

AppSheetを活用して業務改善を進めよう

AppSheetの基本的な使い方と応用方法を理解することで、より効率的なワークフローを構築できます。

業務に特化した機能を取り入れることで、さらに効果的な業務改善が可能になります。

当社では、Google AppSheetを活用した業務改善アプリの開発をサポートする「アップシートマジック」というサービスを提供しています。

プロのサポートを受けながら、自社のニーズに合ったアプリを構築したい方、AppSheet構築のスキルを身に付けたい方は、ぜひご相談ください。

アップシートを検討中の企業様へ

Googleアップシートで
これまでの業務がガラリと変わります

ノーコードの可能性を広げることで
圧倒的な業務の効率化を実現する

目次
  1. AppSheetでアプリを作ろう
  2. 今回作成するアプリの概要
  3. アプリを作る前に準備すること
    1. 何を管理するかを考える
    2. マインドマップでアイデアを整理する
    3. 必要な管理項目の設定
    4. スプレッドシートに項目を入れる
  4. スプレッドシートからアプリを作成する
    1. アプリ作成の手順
      1. スプレッドシートの準備
      2. AppSheetの拡張機能を起動
      3. アプリの作成と初期設定
    2. モバイルビュー画面の活用しよう
  5. アプリの設計手順
    1. 初期状態の確認と調整
    2. 各フィールドの設定(ID、タスク、カテゴリーなど)
      1. IDの設定
      2. タスクの設定
      3. カテゴリーの設定
      4. ステータスの設定
      5. 日付の設定
  6. アプリの使いやすさを整える
    1. IDフィールドの非表示設定
    2. ステータスの初期値設定
    3. タスク入力の自動化と調整
  7. テストデータの登録と確認
    1. テストタスクの入力方法
    2. 正常に動作しているかの確認
  8. アプリの表示設定 (VIEWS)
    1. 見栄えの調整とデザインの変更
    2. タスクの完了・未完了でのグループ化
  9. アクションボタンの追加と活用
    1. アクションの追加
    2. アクションのタイプ設定
    3. ボタンのアイコンと表示位置の設定
  10. カレンダー表示の設定
    1. ビューの追加
    2. ビューのタイプをカレンダーに設定
    3. カレンダーの基本設定
  11. ダッシュボードの作成とカスタマイズ
    1. ダッシュボードビューの作成
    2. 表示するビューの選択
    3. 配置とサイズの調整
    4. 視覚的にわかりやすいダッシュボードの作成
  12. AppSheetを活用して業務改善を進めよう