高度なテンプレート作成

Liferayガイドで作成したテンプレートはCSS、HTML、FreeMarkerを使用し対応するストラクチャーのフィールドのスタイル設定とフォーマットをしましたが、Liferay DXP のテンプレートはJavaScriptも使用できます。これによりより複雑で、インタラクティブなコンテンツを作成することができます。次のステップでは、新しいストラクチャーを作成し、JavaScriptを使用してそのテンプレートを作成します。

ストラクチャーの作成方法

予約フォームのストラクチャーは比較的簡単です。テキストフィールドと画像フィールドのみ必要です。以下の手順で作成します。

メニュー () から「Liferayリゾート」→コンテンツ→Webコンテンツの順に展開します。
画面右上にあるオプション（）→ストラクチャーを選択
ページ右上の追加アイコン () をクリック
ストラクチャーを「予約フォーム」と名前を付けます。
キャンバスにテキストフィールドを追加します。そのフィールドの下に、画像フィールドを追加します。
テキストフィールド［項目ラベル］を、「ボタンテキスト」に設定します。名前フィールドを「buttontext」と設定します。
画像フィールドを「bgimage」と設定し、[項目ラベル]はそのままにします。
[保存]をクリック

ストラクチャーの設定が完了したので、次はテンプレートを編集します。

テンプレート作成

予約フォームのテンプレートはテキストと画像のスタイルを設定し、予約を送信するJavaScript ファンクションも含んでいます。下記の手順でテンプレートを作成します。

メニュー () を選択して、Liferayリゾート→コンテンツ→Webコンテンツに行きます
画面右上のオプション ()を選択し → テンプレートに行きます。
画面右下の追加() を選択します。
テンプレートを「予約フォーム」と名前を付けます。
[詳細]セクションを開き、ストラクチャーから[予約フォーム]を選択します。[言語]設定は[FreeMarker]にします。
次はテンプレートのスクリプトを作成します。ポップアップが開くJavaScript機能を追加します。スクリプトに、既存のコードを削除して、以下を追加します:
```
<script>
function bookNow() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
```
クリックすると、bookNow 機能で起動するpopuptextという名前のspanが含まれるまれるpopup という名前の divを追加します。この span はストラクチャーのbuttontext を取得し、機能内に popuptext を表示するように設定します。全てnamespace を使用しているので、それに応じてスタイルを作成することができます。 bookNow 機能の上に追加します:
```
<div class="popup" onclick="bookNow()">
 <button>${buttontext.getData()}</button>
 <span class="popuptext" id="myPopup">予約が完了しました。  <br /> リゾートでお待ちしております。 </span>
</div>
```

最後にスタイルを追加します。下記のコードはメインのdivとボタンのスタイルを定義します。次に、 bookNow 機能が呼び出された時に表示されるエリア（この時の表示設定はhidden非表示になっています）のスタイルを定義します。この機能が動作する時に、 .show クラスがアクティブになり、表示設定が、visible.になります。このコードをエディター内既存のコード上に追加します:

<style>
.popup {
    text-align: center;
    width: 100%;
    margin: auto;
    display: inline-block;
    cursor: pointer;
    height: 350px;
    background-image: url("${bgimage.getData()}");
}

button {
    position: relative;
    top: 110px;
    padding: 20px 20px;
    text-align: center;
    text-decoration: none;
    border: none;
    font-size: 40px;
    border-radius: 6px;
    background-color: #65b6f0;
    color: white;
}

.popup .popuptext {
    visibility: hidden;
    width: 450px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -220px;
    font-size: 150%;
}

.popup .show {
    visibility: visible;
}
</style>

完了したら、[保存]をクリックします。

これで、予約フォームのテンプレートが作成されました。次はストラクチャーとテンプレートを使ってコンテンツを作成します。

コンテンツの作成

ストラクチャー同様、ストラクチャーとテンプレートを使用したコンテンツはシンプルです。画像とボタンのテキストのみを含むことができます。下記の手順でこのようなコンテンツを作成します:

メニュー () を選択して、Liferayリゾート→コンテンツ→Webコンテンツに行きます
画面右下の追加 () → 「予約フォーム」を選択します。
タイトルに「予約フォーム」と記入
ボタンのテキストに「予約する」と記入します
画像をアップロードするには、［選択］→任意の画像をアップロードします
[公開]をクリックします

次はここで作成したコンテンツをページに追加します。

コンテンツの表示

Liferayリゾートの[リゾート予約」ページに行く
画面右上の追加 () から、コンテンツを展開します
[予約フォーム]コンテンツをページに追加します
コンテンツを含んでいるWebコンテンツディスプレイの[ルック＆フィールド設定]を開きます
[一般]タブから[アプリケーション・デコレーター]を[Barebone]に設定して[保存]をクリックします
ページをリフレッシュして、動作確認をします。

図2：クリック前の予約テンプレートの画面

図3：クリック後の予約テンプレートの画面

これでストラクチャーとテンプレートを使用したWebコンテンツの作成とスタイル方法が理解できました。次は、他のコンテンツ公開方法を説明します。

ドキュメント＆メディアの使用＞＞

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション

テンプレート作成

コンテンツの作成

コンテンツの表示