· 

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

ダッシュボードViewでカンバンボードを作成する

 

このブログではタスク管理アプリを通じてAppSheetの使い方を学びます。

 

前回(第3回)はカンバンボード用のスライスを作成しました。

今回はViewを設定して実際にカンバンボードを作っていきます。

1. タスク、ドライブ、ノートのViewを設定する

 

それでは、Viewを設定しましょう。

左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

 

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 「タスク」
Scondary header 「タスク説明」
Summary column 「期日」
Actions 「Edit」
Display
Icon 「tasks」

 

続けて、「ドライブ」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」
Scondary header 「タイトル」
Summary column 「区分」
Actions 「Open File(ファイル)」
Display
Icon 「folder」

 

続けて、「ノート」Viewを設定します。

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

 

新規Viewを作成する。

 

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

 

設定項目
View name 「ノート」
For this data 「ノート」
View type 「deck」
Position 「menu」
View Options 
Sort by 「Add」→「_RowNumber」,  Descending
Primary header 「タスクID」
Scondary 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 「タスク」
Scondary 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を作成します。

 

「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」

 

カンバンボードが完成しましたので、確認してみましょう。

プレビューの左上にあるアイコンでビュー切替ができます。

左はスマホなのでタブ表示、右だとタブレット縦型です。

 

Dashboard View を確認する。

 

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

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

下のような画面になります。

 

Dashboard View をタブレットで確認する。

「期日」表示用の Virtual Column

 

「期日」のような日付は「2021/08/15」のように表示されます。

少々長いので、Virtual Column(ヴァーチャル・カラム)を使って日付が短縮表示しましょう。

Virtual Columnは列設定の機能なので、一旦、「Data」に戻ります。

 

左側メニュー「Data」 → タブメニュー「Columns」→ 「タスク」テーブルの設定パネルを開きます。

右上にある「Add Virtual Column」をクリックします。

 

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

 

Virtual Column の設定パネルが開きます。

Column name を「期日表示用」にしました。

App formula は三角フラスコアイコンをクリックします。

 

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

 

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

 

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

 

入力した式にはTEXT関数を使用しています。

第1引数に「時間」に関する列や文字列を設定すると、第2引数で設定した形式で文字列を返します。

上のような式では、「期日」列の値が「2021/08/15」の場合、「21/8/15」という値が返ってきます。

日付や時刻などの表示を加工できるようになります。

 

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

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

 では、Viewに戻りましょう。

左側メニュー「UX」 → タブメニュー「Views」でViewの設定をします。

 

設定するViewは「タスク」「未着手」「作業中」「完了」です。

これら4つのViewについて、View Options の

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

します。

 

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

 

プレビュー画面を確認してみましょう。

期日が短縮されて表示されているでしょうか。

 

プレビュー画面を確認する。

 

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

 

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

 

期日管理用のViewを作っていきます。

カンバンと同じく、前回(第3回)作っておいたスライスを使用します。

 

まずは、タスクをカレンダー表示するViewを作成します。

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

 

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 「タスク」
Scondary 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が完成しましたので、確認してみましょう。

 

 

「期日」View をプレビューで確認する。

 

以上、Viewを使ってタスク管理のカンバンボードを作成しました。

タスク管理アプリとしては基本的な機能はほぼ完成しています。

 

次回(第5回)は、期日が「5日以内か」「当日か」「超過か」 によって色を変える方法を学びます。

Format Rules を使用すると条件を設定して文字の書式を変えることができます。

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。