APPSHEETで準備しているテンプレート紹介になります。
APPSHEETテンプレートがみたい方は、下記ボタンから公式サイトに移動してください。
今回は『かんばんボード』（Kanban Board）になります。
このサンプルはtrelloのようにタスクをカードで管理するアプリです。
テンプレート設定を理解すると自分の作るアプリに応用できます。
それに、アプリがどういう考えで設計されているか作成者の意図がわかって楽しいです。
それではサンプルをみていきましょう。
本サンプルの特徴
１．アプリ画面のボタンで別フォームへ移動します。
２．アプリ画面からボタンでカードが移動します。
３．カレンダーを使って実績を表示しています。
４．マスタ管理はメニューに設置しています。
actionボタンの編集方法がわからない人向けの記事です。
実際の画面を確認しよう
それではAPPSHEETのテンプレートにある『かんばんボード』のサンプルをみていきます。
主な画面は、『新しいプロジェクト』と『かんばん』と『カレンダー』の３つです。
『新しいプロジェクト』 は、新規プロジェクトの情報を入力する画面です。
『かんばん』 は、タスクカードを「Not Started（未着手）」「In progress（進行中）」「Complete（完了）」別にステータス管理する画面になります。
『カレンダー』は、未完了なプロジェクトの期限をカレンダーに表示する画面です。
ほかにもメニュー内にチームメンバーを編集追加するようになっていました。
マスタ管理画面はメニューにしたほうがメインボタンが少なくなっていいので参考になります。
次に「インフォ」メニューの「スペック」タブに移動して関連性をみてみましょう。
シートを示す青色の正方形が５つあり、『プロジェクト』を中心にして『タスク』、『ワークストリーム』、『ノート』、『パーソン』があります。
『プロジェクト』で『ワークストリーム』と『パーソン』を選択して、『タスク』と『ノート』をプロジェクト単位で作成する仕組みになっています。
緑色でひし形のスライスビューは、『プロジェクト』テーブルの進捗別です。
このアプリでは『プロジェクト』のリレーションがキモになっていますね。
スプレッドシートを確認しよう
それでは次にスプレッドシートを確認していきましょう。
『プロジェクト』のシートには、主キー、工程の外部キー、プロジェクトNo.、内容、開始日、期限日、完了日、ステータス、実施者の項目があります。
ステータスに関してスプレッドシート上でも色分けして管理しやすいようにしていました。
ただ、基本は管理画面もアプリ上で一覧表示したほうがいいと思います。
『タスク』のシートには、主キー、プロジェクトの外部キー、タスク内容、ステータス、実施者の項目があります。
プロジェクトの外部キーがあるので、プロジェクトに対してタスク追加できるトランザクションテーブルなんだとわかります。
『工程』のシートには、主キー、工程名、内容、カラーの項目があります。
ほかのシートからデータ取得していないので、工程マスタとして利用するテーブルなんだとわかります。
『パーソン』のシートには、名前、Email、役職、部署、写真の項目があります。
一見すると主キーがないように思いますが、これはEmailをキーとして利用しているからですね。
メアド変更もありえるので拡張性を考えるとIDをつけたほうがいいです
『ノート』のシートには、主キー、タスクの外部キー、ノート、添付、リンク、記載者、作成日時の項目があります。
『ノート』テーブルは『プロジェクト』テーブルと連結してたはずなのにプロジェクトIDがありません。
今までと異なる連携なので『ノート』テーブルがどうなっているか確認してみます。
「データ」メニューの「カラム」タブから『ノート』を開きます。
『ノート』テーブルにTaskのカラムがあります。
このアプリでは『プロジェクト』シートにもノートIDのカラムはありませんでした。
ここでTaskの編集を開きます。
編集画面を開くとソーステーブルが『プロジェクト』テーブルに設定されていました。
カラム名は「Task」ですが「Project」を選択する設定になっているので、APPSHEETの設定ミスだと思います。
ちなみに『プロジェクト』に対してメモしたいのであればこの仕様で大丈夫です。
『タスク』に対してメモしたい場合、ソーステーブルを『タスク』へ変更し、「Is a part of?（の一部ですか？）」にチェックを入れると、要望どおりの仕様になります。
『タスク』テーブルの一部として『ノート』テーブルを設定して利用するというのが簡単なやり方です。
ほかの選択肢としては、『タスク』のスライスで『ノート』テーブルを作って入力フォームに利用するか、Select()を使ってノート作成時にタスクIDを選択できるようにするかだと思います。
公式テンプレートにもミスはあります。だって人だもの。。。
アクション設定でボタンを作成しよう
画面のボタンは基本的に表示テーブルビューへの移動です。
それを別テーブルのフォームなどに移動する方法をこのサンプルで使っているので紹介します。
まず「Behavior（行動）」メニューの「actions（行動）」タブを開きます。
このサンプルでは『ノート』と『プロジェクト』にそれぞれ特別なボタンが作られています。
『ノート』
File（ファイル）：ファイルアイコンを押すとファイルが開くボタン
Link（リンク）：リンクアイコンを押すとファイルが開くボタン
『プロジェクト』
Add Note（メモ追加）：メモアイコンを押すと『ノート』入力画面が開くボタン
Add Task（タスク追加 ）：タスクアイコンを押すと『タスク』入力画面が開くボタン
Back to In Progress（進行中に戻る）：ステータスを「進行中」に変更するボタン
Completed（完了）： ステータスを「完了」に変更するボタン
In Progress（進行中）： ステータスを「進行中」に変更するボタン
Not started（始まっていない）：ステータスを「開始前」に変更するボタン
特に注目したのは、『プロジェクト』のステータス変更です。
ボタンでステータスを変更することで、ステータス別のリストにあるカードが移動したように動かしています。
カードをドラッグして動かすのがＵＩとして好ましいですが、ある設定のなかで似たような操作を作るのもアプリ製作の醍醐味です。
アクションの設定をみてみよう
APPSHEETのアクションは既存セットされているものから選択します。
選択できるアクションは次の画面のとおりです。
アクションのカテゴリーはアプリ、データ、外部、グループ化の４つがあります。
まず、アプリのアクションについてみてみましょう。
このサンプルでは『Add Task（タスク追加）』がアプリアクションです。
アプリアクションはDeep Linksの関数を使います。
この関数は、使用中のアプリまたは別のアプリの別のビューに移動するために使用されます。
LINKTOFORM()関数
現在のアプリの別フォームにリンクする関数
例：LINKTOFORM("Tasks_Form", "Project", [ID])
意味：Tasks_Formに移動します。
Projectカラムに[ID]を事前入力します。
別ビューへの移動や特定のレコード明細へ移動できたりします。
ＤeepＬinks関数の詳しい内容は以下の記事を参照してください。
-
【APPSHEET】これだけは理解したい６つの関数
APPSHEETは、スプレッドシートなど表計算ソフトを基にしたアプリ作成ツールです。そのため、表計算ソフトと同じくテーブルのカラムに関数を設定できます。ただ、初めは慣れていないので、どうすればいいかわ ...
次にデータアクションについてみていきましょう。
このサンプルでは『 Completed （完了）』がデータアクションです。
データアクションの関数はアプリアクションと違って複数のタイプを使用して元データを変更するアクションを行います。
このサンプルでは一つのボタンで二つのアクションを起こしています。
データアクション関数
例：状態（[Projects].[Status]） = "Completed"
完了（[Projects].[ Completed ]） = TODAY()
意味：プロジェクトテーブルのステータスカラムに Completed を入れる。
プロジェクトテーブルの完了カラムに今日の日付を入れる。
データアクションは計算式などいろいろな関数を使ってボタンでコントロールできます。
ユーザーの効率化を考えて導入してみてください。
次に外部アクションについてみてみましょう。
このサンプルでは『File（ファイル）』が外部アクションです。
外部アクションではファイルやURLなどが入っているカラムを指定するだけでアクションボタンが作成できます。
外部カテゴリーのファイルボタンであれば、「外部：ファイルを開く」を選択してファイルデータのあるカラムを設定すれば、ボタンとして利用できるようになります。
テーブル指定はすべて「For a record of this table（この表の記録について）」で指定します。
最後はグループ化アクションです。
グループ化アクションは他のアクションを複合して一つのボタンにします。
なので先にほかのアクションを作成する必要があります。
業務などで一連の行動になるものはグループ化して作成すると便利だと思います。（例：PDF化したデータは常にメール送信する場合など）
アクション設定はそれほど複雑ではないので色々と試してみてください。
マスタ系データはインポート／エクスポートのアクション設定をしておくと使う人は便利になります。
アクションボタンを設定しよう
作成したアクションはボタンとして利用します。
このサンプルでは、カンバンのダッシュボードにステータス別リストがあり、ボタンでカード移動するようになっています。
どのように設定しているかをみていきましょう。
ボタンの設定は「UX」メニューの「ビュー」タブから行います。
ここで『カンバン』のダッシュボードを開いて、どのビューを使っているか「表示オプション」の「エントリを表示」で確認します。
ダッシュボードへのビュー追加も表示オプションのエントリを表示で追加可能です。
このダッシュボードでは、『Completed（完了）』、『In Progress（進行中）』、『Not started（始まっていない）』のスライスビューを使用していました。
そこで 『In Progress（進行中）』 のビュー設定を参考にみたいと思います。
ボタンの設定は「表示オプション」の「レイアウト」から設定可能です。
画面タイプをカードにすると「表示オプション」の「レイアウト」でボタンを４つ設定できます。
『In Progress（進行中）』 のビュー では、カード右下に「 Not started（始まっていない） 」と「 Completed（完了） 」ボタンをセットして、ステータスの変更を画面上で操作できるようにしています。
このようにアクションで特別なボタンを設定して、カードにセットすれば画面上で移動するようにみせることが可能です。
やり方によっていろいろなＵＩにできることがわかり勉強になりました。
レコードの削除ボタンや編集ボタンはデフォルトであるのでアクションで作る必要はありません。
まとめ
このサンプルは、ユーザーのやりたいことをアクションボタンにしていました。
ボタンでデータ管理できるようにするとＵＸがよくなります。
特に情報共有に関してはユーザーの負担かけずに自動化できるレベルにまで作り込むことが可能です。
アプリによって日々の業務をどれだけなくせるか目指してみてください。
なお、APPSHEETのアクションは、いまのところ既存セットだけになります。
ただ、アクション内容が徐々に追加されているので期待して待っていましょう。
「Automation（オートメーション）」メニューでも細かい設定が可能です。
アクションだけで満足できなくなれば オートメーションにも挑戦してみてください。
それではまた～。
