AppSheetでタスク管理アプリ（第4回）ダッシュボードでカンバン作成

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第3回）はカンバンボード用のスライスを作成しました。
今回は、AppSheetのDashboard（ダッシュボード）Viewを設定して、カンバンボードを作っていきます。
Dashboard（ダッシュボード）Viewを活用すれば、動きのあるアプリができるので是非挑戦してみてください！

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

1. AppSheetの見た目はViewで設定する

AppSheetアプリの見た目（画面レイアウト）はViewという機能で設定します。
AppSheetに用意されている「View type」というテンプレートを選んで設定するだけなので、短時間で簡単にアプリの画面レイアウトを作成することができます。
では、タスク管理アプリのViewを設定していきましょう。

タスクのViewを設定する

はじめに、タスクのViewを設定しましょう。
AppSheetエディタの左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

Primary Views には「タスク」と「ドライブ」というViewが既に作成されていると思います。
「タスク」をクリックして、View設定パネルを開きます。

ここでは「タスク」Viewの設定を以下のように変更しました。
View type は「deck」または「Card」の「list」あたりがよいと思いますが、ここでは「deck」にしました。

設定項目	値
View name	「タスク」
For this data	「タスク」
View type	「deck」
Position	「left」
View Options
Sort by	「Add」→「期日」,  Ascending
Group aggregate	「COUNT」
Main Image	**none**
Primary header	「タスク」
Secondary header	「タスク説明」
Summary column	「期日」
Actions	「Edit」
Display
Icon	「tasks」

ドライブのViewを設定する

続けて、「ドライブ」Viewを設定します。
「ドライブ」をクリックして、View設定パネルを開きます。

ここでは「ドライブ」Viewの設定を以下のように変更しました。
Position を「menu」に変更しています。

設定項目	値
View name	「ドライブ」
For this data	「ドライブ」
View type	「deck」
Position	「menu」
View Options
Sort by	「Add」→「_RowNumber」,  Descending
Primary header	「タスクID」
Secondary header	「タイトル」
Summary column	「区分」
Actions	「Open File（ファイル）」
Display
Icon	「folder」

ノートのViewを設定する

続けて、「ノート」Viewを設定します。
「New View」をクリックして新しいViewを作成します。

ここでは「ノート」Viewの設定を以下のように設定しました。

設定項目	値
View name	「ノート」
For this data	「ノート」
View type	「deck」
Position	「menu」
View Options
Sort by	「Add」→「_RowNumber」,  Descending
Primary header	「タスクID」
Secondary header	「ノート」
Actions	「Edit」
Display
Icon	「comment-alt-lines」

2. カンバンボード用のViewを設定する

次に、タスク管理アプリのキモ、カンバンボード用のViewを作っていきます。
ここで、前回（第3回）作っておいたスライスを使用します。

「New View」をクリックして新しいViewを作成します。

未着手

「未着手」のボード用Viewを設定します。

「未着手」Viewの設定は以下のようにしました。

設定項目	値
View name	「未着手」
For this data	「未着手 ( slice )」
View type	「deck」
Position	「ref」
View Options
Primary header	「タスク」
Secondary header	「タスク説明」
Summary column	「期日」
Actions	「Edit」

作業中

続けて「作業中」のボード用Viewを設定します。

Viewはコピーして作ることができます。
「未着手」Viewの設定パネルを開いて、右上の「copy」をクリックしてViewをコピーしましょう。

「未着手」Viewをコピーすれば、以下の項目だけ変更するだけです。

• View name：「作業中」
• For this data：「作業中 ( slice )」

完了

さらに続けて「完了」のボード用Viewを設定します。

「作業中」と同じように、Viewをコピーしましょう。以下の項目だけ変更するだけです。

• View name：「完了」
• For this data：「完了 ( slice )」

カンバン（Dashboard View）

最後に3つのViewを合わせてカンバンボードを作成します。
ここでは、Dashboard（ダッシュボード）Viewを使って、3つのカンバンViewを切り替えて表示させます。

「New View」をクリックして新しいViewを作成します。

「カンバン」Viewの設定は以下のようにしました。
Dashboard View に特徴的な設定は以下の通りです。

• View entries：ダッシュボードに表示するViewを追加します。「Tall」にすることでViewが3つ横並びになります。
• Use tabs in mobile view：チェックすると、スマホの小さな画面ではタブ表示されます。

設定項目	値
View name	「カンバン」
View type	「dashboard」
Position	「left most」
View Options
View entries	「Add」→「未着手」, Tall 「Add」→「作業中」, Tall 「Add」→「完了」, Tall
Use tabs in mobile view	check
Display
Icon	「layer」

カンバンボードが完成しましたので、AppSheetで確認してみましょう。
プレビューの左上にあるアイコンでビュー切替ができます。
左はスマホなのでタブ表示、右だとタブレット縦型です。

AppSheetスマホ版では、「未着手」「作業中」「完了」のタブがあります。
クリックして表示を切り替えできます。

AppSheetタブレット版については、実際のタブレット画像の方が参考になります。
下のような画面になります。

「期日」表示用の Virtual Column

「期日」のような日付は「2021/08/15」のように表示されます。
少々長いので、Virtual Column（ヴァーチャル・カラム）を使って日付が短縮表示しましょう。
Virtual Columnは列設定の機能なので、一旦、「Data」に戻ります。

AppSheetエディタの左側メニュー「Data」 → タブメニュー「Columns」→ 「タスク」テーブルの設定パネルを開きます。
右上にある「Add Virtual Column」をクリックします。

Virtual Column の設定パネルが開きます。
Column name を「期日表示用」にしました。
App formula は三角フラスコアイコンをクリックします。

Expression Assistant に以下のように入力します。

入力した式にはTEXTというAppSheet関数を使用しています。
第1引数に「時間」に関する列や文字列を設定すると、第2引数で設定した形式で文字列を返します。
上のような式では、「期日」列の値が「2021/08/15」の場合、「21/8/15」という値が返ってきます。
日付や時刻などの表示を加工できるようになります。

では、Viewに戻りましょう。
AppSheetエディタの左側メニュー「UX」 → タブメニュー「Views」でViewの設定をします。

設定するViewは「タスク」「未着手」「作業中」「完了」です。
これら4つのViewについて、View Options の

• Summary column：「期日」→「期日表示用」に変更

します。

プレビュー画面を確認してみましょう。
期日が短縮されて表示されているでしょうか。

すべて終わったら、右上の「Save」をクリックして保存することを忘れずに。

3. 期日用のViewを設定する

最後に、期日管理用のViewを作っていきます。
カンバンと同じく、前回（第3回）作っておいたスライスを使用します。

まずは、タスクをカレンダー表示するViewを作成します。
「New View」をクリックして新しいViewを作成します。

Viewの設定は以下のようにしました。

設定項目	値
View name	「カレンダー」
For this data	「タスク」
View type	「calendar」
Position	「ref」
View Options
Start date	「作成日」
End date	「期日」
Description	「タスク」
Category	「カラー」

View type に「calendar」を選びました。

Start date に「作成日」、End date に「期日」を設定することでタスクのスケジュールがカレンダー表示されます。

期日まで5日以内

スライスを作成した「期日まで5日以内」用のViewを設定します。
「New View」をクリックして新しいViewを作成します。

「期日まで5日以内」用のViewは以下のように設定しました。

設定項目	値
View name	「5日以内」
For this data	「期日まで5日以内 ( slice ) 」
View type	「deck」
Position	「ref」
View Options
Primary header	「タスク」
Secondary header	「タスク説明」
Summary column	「期日表示用」

期日当日

続けて「期日当日」用のViewを設定します。

カンバンボードでもやってみましたが、Viewはコピーして作ることができます。
「5日以内」Viewの設定パネルを開いて、右上の「copy」をクリックしてViewをコピーしましょう。

「5日以内」Viewをコピーすれば、以下の項目だけ変更するだけです。

• View name：「当日」
• For this data：「期日当日( slice )」

期日超過

さらに続けて「期日超過」用のViewを設定します。

「当日」と同じように、Viewをコピーしましょう。以下の項目だけ変更するだけです。

• View name：「超過」
• For this data：「期日超過( slice )」

期日（Dashboard View）

最後に3つのViewを合わせて「期日」Viewを作成します。
カンバンボードと同じように、Dashboard（ダッシュボード）Viewを使います。

「New View」をクリックして新しいViewを作成します。

「期日」Viewの設定もカンバンボードと同じように設定します。

• View entries：ダッシュボードに表示するViewを追加します。「Tall」にすることでViewが3つ横並びになります。
• Use tabs in mobile view：チェックすると、スマホの小さな画面ではタブ表示されます。

設定項目	値
View name	「期日」
View type	「dashboard」
Position	「right」
View Options
View entries	「Add」→「カレンダー」, Tall 「Add」→「5日以内」, Tall 「Add」→「当日」, Tall 「Add」→「超過」, Tall
Use tabs in mobile view	check
Display
Icon	「calendar-times」

「期日」Viewが完成しましたので、AppSheetで確認してみましょう。

以上、Viewを使ってタスク管理のカンバンボードを作成しました。
タスク管理アプリとしては基本的な機能はほぼ完成しています。

次回（第5回）は、期日が「5日以内か」「当日か」「超過か」 によって文字色を変える方法を学びます。
AppSheetでは、Format Rules を使用すると条件を設定して文字の書式を変えることができます。