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

folder_openAppSheet

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

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

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

タスクのViewを設定する

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

AppSheetエディタでView設定画面を表示する。

Primary Views には「タスク」と「ドライブ」というViewが既に作成されていると思います。
「タスク」をクリックして、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を作成します。

AppSheetエディタで新規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の設定は以下のようにしました。

設定項目
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をコピーすれば、以下の項目だけ変更するだけです。

  • 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を作成します。

AppSheetの「Dashboard 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エディタでDashboard View を確認する。

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

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

AppSheetアプリでDashboard View をタブレットで確認する。

「期日」表示用の Virtual Column

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

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

AppSheetのVirtual Column(仮想列)を作成する。

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

「期日表示用」の Virtual Column(仮想列)を作成する。

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

TEXT関数で日付を設定する。

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

TEXT()(時間を加工する場合)

TEXT(時間, フォーマット)

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

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

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

します。

AppSheetのViewでSummary column を「期日表示用」に設定を変更した。

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

AppSheetエディタでプレビュー画面を確認する。

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

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

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

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

AppSheetのCalendar 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 に「期日」を設定することでタスクのスケジュールがカレンダー表示されます。

AppSheetのCalendar View を確認する。

期日まで5日以内

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

「5日以内」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をコピーする。

「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のDashboard 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で確認してみましょう。

AppSheetエディタのプレビュー画面で「期日」View を確認する。

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

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

Share Me!

前の投稿
AppSheetでタスク管理アプリ(第3回)スライスでデータを切り出す
次の投稿
AppSheetでタスク管理アプリ(第5回)Format Rulesで文字色を変える

関連記事

メニュー