Traditional Webでは、Web Screen/Block上に直接Commentを配置できた。
(Action Flowにコメントを残すのと同じイメージでUI上にコメントできた)
Reactive Web App/Mobile Appではできなかったのだが、この部分を補うForgeコンポーネントがあったので動作を確認する。
評価結果
基本的にはTraditional WebのUI上のCommentと同様に使える。
ただし、先頭を「TODO」にしてもReminderにはならない。
また、自動的に削除される(BlockのOnReadyについて述べた、この記事の最後の部分を参照)が一時的に空のDOM要素は配置されてしまう。
環境情報
Service Studio (Version 11.55.34)
Service Studio Comments (Version 1.0.0)
Screen上のコメント機能の用途
文字通りにUIにコメントを残す
複雑であったり意図を掴みにくいAction Flowにコメントを残すのと同じく、UIの複雑であったり意図を掴みにくい部分にコメントを残す。
保守性向上のため。
テンプレートやサンプル実装上のTODOリスト
開発者のために、テンプレート(Screen TemplateやCustom Application Template)やサンプル実装を提供することがある。
提供したテンプレートやサンプルは、各開発チームで要件に合わせた修正をするが、修正すべき場所を示すTODOリストを用意することがある。
そのTODOリストとして、Action Flow上のCommentや、(Traditional Webの頃の)UI上のCommentのIs Reminder=Trueにすると、TODOとしてIDEのTrueChangeタブに表示され、便利だった。
コンポーネントの使い方
と言っても、コンポーネントが提供するBlockを画面に配置し、Placeholderにコメントを書くだけだが。
操作例として、Bulk actions with filters Templateで作成した画面を利用する。
コンポーネントが提供するBlock
配置例
Traditional Webの頃の、UI上に配置するCommentと基本的には同じ使い方。
ただし、Platformが提供するCommentではないので当然だが、先頭に「TODO:」のように入力してもReminderにはならない。
実行時の動作 → このBlockはService Studio上でだけ見え、実行時には見えない(DOM要素も配置されない)
配置例の画面をブラウザで表示したところ。配置したGreen|Red|YellowCommentは表示されない。
次に、ブラウザの開発者ツールでこのページのDOM構造を確認してみる。
分かりやすく、RedCommentを配置したTitle部分。視覚的に見えないだけでなく、そもそもDOM要素が追加されていないことがわかる。
仕組みの確認
Widget Treeで確認 → Ifで実行時には表示されない仕組み
Conditionが固定でFalseのIfがあり、そのTrue Branch内にService Studio上で表示したいUI要素を配置している。そのため、実行時にはPlaceholder Commentに配置した要素は表示されない。
ではなぜService Studio上では表示されるのか。
デザイナー上でIfを選択すると、以下のように3つの○が表示され、そのうちの1つを選択できる。
左から順にTrue・False Branch両方表示する、True Branchのみ表示する、False Branchのみ表示する、であり、コンポーネント上では真ん中が選択されているため。
OnReadyのJSは必要か?
各BlockのOnReadyイベントで以下のJavaScriptが動き、Blockのルート要素(CommentRoot)の親となるDOM要素を削除している。
var commentRoot = document.getElementById($parameters.WidgetId);
if(commentRoot){
commentRoot.parentElement.remove();
}
Ifで不要な要素を非表示にしているが、Blockの配置場所に親DOM要素が置かれるため、想定外の動作を避けるために削除しているものと思われる。
念の為、Blockを手元のモジュールにコピーし、OnReadyを削除してから画面に配置してみた。仮説通り、JavaScriptを動かさないと無駄なDOM要素ができてしまうようだ。
(↓の選択部分)