データーレンダリング

MulCMS マニュアル

データーレンダリングについて

MulCMSのデーターレンダリング機能は CSSセレクター を使ってHTML内のタグを抽出してシステムと連動(レンダリング)させることができます。(レンダリングしたタグなどを以後リソースと呼ぶ)

レンダリングしたリソースは、MulCMSが提供する機能を使って内容の修正をしたり、翻訳したり、言語毎に表示を切替えたりすることができます。

このデーターレンダリング機能により、HTMLとCSSの知識さえあれば誰でもダイナミックな多言語サイトを構築できるようになります。下には一般的によく利用されているCSSセレクターやセレクターコンビネーションの例を示しています。

CSSセレクターの例

セレクター レンダリング対象
p すべての <p>タグ
title <title>タグ
#main-nav id="main-nav" がついているタグ
.masthead class="masthead" がついているすべてのタグ

CSSセレクターコンビネーションの例

セレクター レンダリング対象
div#logo <div id="logo">...</div>
div.content <div class="content">...</div>
a[href].highlight <a href="..." class="highlight">...</a>
.nav li class="nav" がついているタグ内のすべての liタグ
div.content > p class="content"がついているdivタグ直下にある pタグ
div.head + p class="head"がついているdivタグに隣接する pタグ

テキストのレンダリング

例えば下のサンプルHTMLにある <p class="highlight">...</p>タグ内の文字列 [highlight text] をMulCMSとレンダリングしたい場合:

<div id="content">
    <p class="highlight">highlight text</p>
    <p>....</p>
    <p>....</p>
</div>
				

MulCMSの管理画面の対象ページのリソース画面からCSSセレクターを使って以下のようにレンダリングを行えます。


テキストリソースの修正機能

改行の許可・非許可

MulCMSの編集機能を使ってテキストリソースの内容を変更する時に、エンターによる改行を許可するかどうかを指定できます。


改行を許可しない場合の変更画面

改行を許可した場合の変更画面


画面上で直接修正を行えるCMS機能

テキストリソースの編集可能チェックボックスにチェックを入れると、以下のように画面上から直接文言の修正を行えるようになります。


画面で対象のリソースをクリック

文言の修正ポップアップで文言を修正可能

注意

この機能を利用するには、HTMLでBootstrapを利用出来るようにしておく必要があります。

ヒント

この機能を利用するには、MulCMSのオーナーアカウント(セットアップを行ったGoogleアカウント)でGoogleにログインしておく必要があります。

※ オーナーアカウントは Google Cloud Consoleの IAM と 管理 で確認もしくは追加することができます。

※ MulCMSの管理画面にアクセスすることでこのログイン処理を行えます。

管理画面URL: http://<project_id>.appspot.com/mulcms/


HTMLタグの属性をレンダリング

MulCMSはHTMLにあるテキスト以外にも、タグの属性をレンダリングし、言語毎にその値を変えることができます。この機能を使うことによって、言語毎に異なる画像を表示したり、色、サイズ、classなどを言語毎に変えたりすることができます。

属性のレンダリングは、タグのCSSセレクターとレンダリングしたい属性名を指定することでできます。


例えば、下のサンプルHTMLにある <img>タグの属性のレンダリングを行う場合:

<div id="content">
    <img src="main.png" width="300px">
    <p>....</p>
    <p>....</p>
</div>
				

例: 画像のurlをレンダリング

例: 画像の幅をレンダリング


ヒント

例で示した属性以外にも、タグのclass, style, 独自で定義した data-* などの属性をレンダリングし、言語毎に変えることができます。