はじめに
OutSystemsでは、ウィジェットの表示・非表示を制御するためのプロパティが用意されています。
具体的には、Traditional Webでは「display」および「visible」、Reactive Webでは「visible」プロパティが該当します。
これらのプロパティを使用してウィジェットを非表示にした場合、DOM自体が生成されないのか、HTMLタグにhidden属性が付与されるのか、それともCSSで制御されるのか、この点の挙動をよく忘れてしまうことがあるので、実際に試して確認し、整理しておこうと思います。
動作環境
- OutSystems（バージョン11）
検証
Traditional Web
Traditional Webでは、displayプロパティで設定できるウィジェットと、visibleプロパティで表示・非表示を設定できるウィジェットがあります。
display
まず、displayプロパティを検証します。
displayオプションが存在するウィジェットとして、Containerウィジェットで検証します。
以下のContainerのdisplayオプションの設定を切り替えて確認を行います。
displayプロパティのTrue/False設定を切り替えてDOMを比較してみます。
- display=Trueの場合
<div>
<div>表示・非表示テスト</div>
<div id="wt8_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_wtDisplayTestContainer">DisplayTestContainer</div>
</div>
- display=Falseの場合
<div>
<div>表示・非表示テスト</div>
<div id="wt8_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_wtDisplayTestContainer" style="display:none">DisplayTestContainer</div>
</div>
displayプロパティをFalseに設定した際、ContainerのDOMは生成され、style属性にdisplay:noneが付与されます。
visible
次に、visibleプロパティを検証します。
visibleオプションが存在するウィジェットとして、Buttonウィジェットで検証します。
以下のButtonのvisibleオプションのTrue/False設定を切り替えて確認を行います。
visibleプロパティのTrue/False設定を切り替えてDOMを比較してみます。
- visible=Trueの場合
<div>
<div>
<span style="font-weight: normal;">表示・非表示テスト</span>
</div>
<input type="submit" name="wt7$OutSystemsUIWeb_wt18$block$wtContent$wtMainContent$wtVisibleTestButton" value="visibleテスト用ボタン" id="wt7_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_wtVisibleTestButton" class="Button Is_Default">
</div>
- visible=Falseの場合
<div>
<div>
<span style="font-weight: normal;">表示・非表示テスト</span>
</div>
</div>
visibleプロパティをFalseに設定した際は、ButtonのDOMは生成されません。
Reactive Web
次に、Reactive Webでvisibleプロパティを検証します。
visibleオプションが存在するウィジェットとして、Containerウィジェットで検証します。
以下のContainerのvisibleオプションの設定を切り替えて確認を行います。
visibleプロパティの設定を切り替えてDOMを比較してみます。
- visible=Trueの場合
<div data-container="">
<div data-container="">
<span data-expression="">表示・非表示テスト</span>
</div>
<div data-container="" id="VisibleTestContainer">
<span data-expression="">VisibleTestContainer</span>
</div>
</div>
- visible=Falseの場合
<div data-container="">
<div data-container="">
<span data-expression="">表示・非表示テスト</span>
</div>
</div>
visibleプロパティをFalseに設定した際、ContainerのDOMは生成されません。
まとめ
visibleプロパティをFalseに設定した場合、DOMの生成が行われませんが、displayプロパティをFalseに設定した場合はstyle属性にdisplay:noneが付与されます。
display:noneの場合、DOM自体は生成されるため、ユーザーがブラウザの開発者ツールを使用して要素を閲覧・操作できてしまうのでセキュリティ面で影響を及ぼすことがあります。また、要素の読み込みも発生するため、パフォーマンスにも影響を及ぼす可能性があります。
現在はOutSystemsのTraditional Webを利用する機会は少なくなっているかもしれませんが、displayプロパティとvisibleプロパティの挙動の違いを理解し、Ifウィジェットの利用を含めて適切な対応を検討する必要があります。