空の HTML5 「コンテナ」ページの作成
ほとんどの Visualforce をスキップして独自のマークアップを追加する場合は、空のコンテナページを使用します。コンテナページは、HTML5 およびモバイル開発や、標準の Visualforce 出力が適さないその他の Web アプリケーションで特に有効です。
リモートオブジェクト、JavaScript Remoting、またはその他の Lightning Platform API を使用してサービス要求を実行し、結果を JavaScript で表示します。
次のコードは、初歩的なサンプルコンテナページです。
1<apex:page docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
2 showHeader="false" sidebar="false" standardStylesheets="false"
3 title="Unused Title">
4<html>
5
6 <head>
7 <title>HTML5 Container Page</title>
8 </head>
9
10 <body>
11 <h1>An Almost Empty Page</h1>
12
13 <p>This is a very simple page.</p>
14 </body>
15
16</html>
17</apex:page>
<apex:page> コンポーネントとその属性は、コンテナページの定義の中心部分です。
- docType="html-5.0" で、ページが最新の HTML5 docType を使用するように設定します。
- applyHtmlTag="false" および applyBodyTag="false" では、ユーザーのマークアップで <html> および <body> タグが指定されるため、Visualforce に独自に生成しないように指示します。
- showHeader="false"、sidebar="false"、および standardStylesheets="false" 属性では、Salesforce ユーザーインターフェースとビジュアルデザインを Visualforce ページに追加する標準ヘッダー、サイドバー、およびスタイルシートが抑制されます。また、セッションタイムアウト時にリダイレクトを支援するスクリプトなどの JavaScript リソースも抑制されます。
コンテナページでは <head> タグは必須ではありませんが、使用をお勧めします。値を <head> 要素に追加する必要がある場合、<head> タグを自分で追加する必要があります。その場合、Visualforce は、それに必要な値を <head> に追加します。それ以外の場合、Visualforce が独自の <head> を表示して、必要な値を追加します。
<apex:includeScript>、<apex:stylesheet>、<apex:image> などの Visualforce コンポーネントを使用してページ上の静的リソースを参照できます。<apex:includeScript> および <apex:stylesheet> の出力が <head> 要素に追加されます。追加しないと、Visualforce が独自の出力を追加します。<apex:image> 出力は、配置されたページ上の任意の場所に表示されます。