OpenCms テンプレート開発マニュアル

OpenCms テンプレート開発マニュアル
株式会社ジークス
（2010 年 10 月 25 日更新）
目次
1
OpenCms のページ生成の仕組み .....................................................................................4
1-1 ページの作成手順 ............................................................................................................................ 4
1-2 データの入力 ................................................................................................................................... 6
1-3 OpenCms のページ生成の仕組み .................................................................................................... 8
2
テンプレート（フリーテキストページ用）の作り方 .....................................................11
2-1 テンプレートの置き場所 ............................................................................................................... 11
2-2 モジュールの作成 .......................................................................................................................... 11
2-3 ディレクトリ構成と、Online、Offline について ........................................................................ 16
2-4 テンプレートの作成 ...................................................................................................................... 18
3 CMS タグライブラリの基本的な使い方 .........................................................................21
3-1 直接編集領域の指定 [cms:include] .............................................................................................. 21
3-2 リンクの指定方法（ディレクトリ階層が合わない場合） [cms:link] ......................................... 27
3-3 表示・非表示の制御 [cms:offline/online/block]........................................................................... 28
3-4 プロパティ値の表示 [cms:property] ............................................................................................ 30
3-5 リンク URL のコントロール [cms:editable] ................................................................................ 32
4
スクリプレットの記述.....................................................................................................33
4-1 CmsJspActionElement クラスの利用........................................................................................... 33
4-2 CmsRequestContext クラスの利用............................................................................................... 35
4-3 CmsObject クラスの利用............................................................................................................... 37
4-4 CmsResourceFilter クラスの利用................................................................................................. 38
4-5 CmsResource クラスの利用 .......................................................................................................... 41
4-6 JSTL と式言語の利用 .................................................................................................................... 43
4-7 SQL を実行して結果を表示する.................................................................................................... 44
5
テンプレート（構造化コンテンツ用）の作り方.............................................................45
5-1 構造化コンテンツ（XML Content）とは .................................................................................... 45
5-2 XSD の作成 .................................................................................................................................... 46
5-3 テンプレート JSP の作成.............................................................................................................. 50
5-4 リソースタイプの追加................................................................................................................... 51
5-5 入力項目を動的に増やす方法........................................................................................................ 56
5-6 ウィジェットの変更 ...................................................................................................................... 59
5-7 入力項目のグループ化................................................................................................................... 64
5-8 タブの設定..................................................................................................................................... 68
5-9 日本語ラベルの適用 ...................................................................................................................... 70
2
5-10 デフォルト値の設定 .................................................................................................................... 75
5-11 プロパティへのマッピング ......................................................................................................... 81
5-12 入力内容のチェック（バリデーション）の設定 ........................................................................ 84
5-13 プレビューボタンの設置 ............................................................................................................. 90
5-14 複数の構造化コンテンツの一覧を表示する................................................................................ 92
6
その他 ..............................................................................................................................96
6-1 HTML エディタのスタイルシートの指定 ..................................................................................... 96
6-2 直接編集領域に日本語のラベルをつける ..................................................................................... 97
6-3 文字コードの指定 .......................................................................................................................... 98
3
1
OpenCms のページ生成
ページ生成の
生成の仕組み
仕組み
テンプレート開発方法の説明に入る前に、OpenCms がどのような仕組みでページを表示しているか
を説明します。まず、ユーザーがページを作成する時の手順を確認してみましょう。
1-1 ページの作成手順
1.
ページを作成したいディレクトリまで移動します。次に、「新規」ボタンをクリックします。
2.
新規ダイアログが表示されるので、新規作成するリソースタイプを選択します。今回は、ページを
作成するので、
「フリーテキストページ」を選択し、
「次へ＞＞」ボタンをクリックします。
4
3.
ページの新規作成ダイアログが表示されます。
名前欄に作成する html の名前を入力します。この名前が、そのまま URL として使用されます。
ファイル名に全角文字や特殊文字を使用する事は出来ませんので、注意してください。
プルダウンに、現在登録されているテンプレートが表示されますので、適用するテンプレートを選
択し、
「次へ＞＞」ボタンをクリックします。
4.
この後、タイトル等を入力すれば登録完了となります（タイトルは全角文字の入力が可能です）。
下記のように、ファイルが作成されていれば成功です。
※ テンプレート化しない JavaScript、CSS などテキストファイルや、画像、PDF などのバイナリ
ファイルは、アップロードボタン又は WebDAV 経由で直接アップロードして登録します。
※ 尚、FireFox 3.6 以上であれば、HTML5 の機能を利用して、ブラウザからファイルを直接ドラ
ッグ＆ドロップでアップロードできます。他のブラウザも HTML5 の対応が進めば可能になります。
5
1-2 データの入力
ただ、この時点では、ページは作成されましたが、データが入力されていません。つまり、本文の無
い、空白のページが作成されただけです。では、実際にデータを入力する手順を確認してみましょう。
1.
先ほどのページをクリックすると、そのページのプレビューが別ウインドウで表示されます。
そのプレビューの中で、編集可能な領域には直接編集ボタン（
）が表示されますので、それを
クリックしてください。
2.
HTML エディタが起動し、データを入力する事が出来るようになります。
6
3.
そこに、データを入力したら、左上の、
「保存して閉じる」ボタンをクリックして下さい。
4.
5.
これで、データの入力が完了です。
7
1-3 OpenCms のページ生成の仕組み
次に、テンプレートと入力されたデータを組み合わせて、どのようにページを生成しているか、その
仕組みを説明します。
1.
まず、先ほど新規作成した news0309.html
には、入力されたデータが XML 形式で保存
されています。
どのようなデータが入っているかは、コン
テクストメニューから、
「拡張」→「コント
ロールコード編集」と選択すると確認でき
ます。
※ 注意：データが壊れる可能性がありますので、この XML は編集しないで下さい。
8
2.
新規作成のときに、プルダウンからテンプレートを選択しましたが、その時、この news0309.html
のプロパティに、選択したテンプレートのファイルのパスがセットされます。
ファイルのプロパティの確認したい場合は、コンテクストメニューから、
「プロパティ」→「拡張」
とクリックします。
3.
プロパティには、そのファイルに属する、さまざまな設定値が保存されます。
テンプレートのファイルのパス情報は、template プロパティに保存されます。
上のように、template プロパティには JSP ファイルへのパスが格納されています。
これが、このページを開いた時に適用されるテンプレートとなります。
テンプレートは全て JSP で作成されており、JSP として実行されます。
9
ユーザーが news0309.html のページを開くと、OpenCms は、news0309.html の template プロパ
ティを参照し、そこに指定されている JSP ファイルを実行します。
この JSP ファイルの中に、news0309.html に保存されている入力データ（XML）を取り出して表
示するようなロジックが書かれてあれば、入力データを使って HTML が生成されます。
10
2
テンプレート（
テンプレート（フリーテキストページ用
フリーテキストページ用）の作り方
では、次は実際にテンプレートを作成してみましょう。
2-1 テンプレートの置き場所
テンプレートは、JSP として作成します。
基本的に、OpenCms 上のどのフォルダ内に置いても、適用したい html の template プロパティにパス
を指定すれば動作します。
ただ、ページの新規作成ダイアログや、プロパティ・ダイアログで、テンプレートプルダウンに選択項
目として表示させたい場合は、テンプレートを置く場所は決まってきます。
この場合、各モジュールの templates フォルダ内に置かなければなりません。
2-2 モジュールの作成
テンプレートを作成するときは、OpenCms のモジュールを作成し、その中に置く事が一般的です。そ
うしておく事で、モジュール単位で ZIP ファイルにエクスポートし、別のマシンの OpenCms にインポ
ートするなど、利便性が向上します。
では、モジュールの作成方法を説明します。
1.
上段の表示プルダウンを、「エクスプローラ」から「管理メニュー」に変更し、管理画面を表示し
ます。次に、「モジュールの管理」をクリックし、「新しいモジュール」をクリックしてください。
11
2.
作成するモジュールの情報を入力する画面が表示されます。
データを入力し、OK ボタンをクリックしてください。
12
パッケージ名
パッケージ名
モジュールのパッケージ名を記述します。全角は使用できません。
これは、パッケージを ZIP にエクスポートした時のファイル名にも使用されます。
他のモジュールと名前がかぶらないようにする為、ドメインを逆にした名前を使う事が一般的です。
モジュール名
モジュール名
モジュールの名前です。全角を使用できます。分かりやすい一行の名前を付けてください。
モジュールの
モジュールの説明
このモジュールの内容を説明するテキストを入力してください。
モジュールバージョン
モジュールのバージョンです。0.1 のままで問題ありません。
モジュールグループ
モジュールのグループを文字列で指定します。適当なものをつけてかまいません。
複数のモジュールを作成するときに、分類しやすくするためのラベルです。
アクションクラス
モジュールのインポート時に実行されるクラスを指定します。
通常は、未入力で問題ありません。
著者名
このモジュールの著作権を持った人物の名前、または会社名を入力します。
著者メールアドレス
著者メールアドレス
このモジュールの著者への連絡先メールアドレスを入力します。
モジュールフォルダー
基本的に、全てにチェックを入れておけば問題ありません。
チェックを入れたフォルダーとその設定が自動的になされます。
後からフォルダーを作成する事は可能です。
13
3.
モジュールが作成できたかどうかを確認します。
表示プルダウンを「エクスプローラ」に戻して、サイトプルダウンを「/」に変更します。
モジュールは、/system/modules/以下に作成されますので、先ほど作成したモジュールのフォルダ
が存在するかどうか、ディレクトリを移動して確認してください。
尚、作成したモジュールのフォルダの直下に、templates フォルダが存在するかと思いますが、
このフォルダ内がテンプレートの置き場所となります。この下に JSP ファイルを作成していきます。
モジュールの templates フォルダの中に作成した JSP ファイルは、ページの新規作成ダイアログ
や、プロパティ・ダイアログのテンプレートプルダウンに、選択項目として自動的に表示されるよ
うになります。
※ 全てのユーザーで表示されるようになりますが、逆に、特定のユーザーには見せたくないテン
プレートの場合は、アクセス権限の設定で表示権限を OFF にする必要があります。
※ また、templates の下に、サイトのフォルダ名でサブフォルダを作成すると、ユーザーが、その
サイトを選んでいるときのみ表示されます。例えば、./templates/default/の下に置いた JSP テンプ
レートは、ユーザーが/sites/default/をサイトに選択している時のみ、プルダウンに表示されます。
これは、default_bodies 直下に置くボディー・ファイルも同様です。
14
4.
直接発行
このモジュールを、フォルダごと「直接発行」してください。パッケージ名のフォルダを右クリッ
クして、「直接発行」を行えば完了です。暫く待てば、全ての青字表示のリソースは、黒字表示と
なります。
管理画面で、読み込み中の画面が出てきて、そのまま動
かなくなる事がありますが、明らかに遅すぎる場合は、構
わず右上の再読み込みボタンをクリックして、リロードし
てください。
15
2-3 ディレクトリ構成と、Online、Offline について
ここで、OpenCms のディレクトリ構成について補足をします。
サイトプルダウンを「/」に変更すると、以下のようなディレクトリ構成が表示されます。
/sites/の下にフォルダがありますが、これが、各サイトのサイトルートになります。
OpenCms は複数のサイトを管理できますが、サイトを追加したい時は、ここにフォルダを作成します。
（※ フォルダ作成後、opencms-system.xml の設定変更と、Tomcat のリスタートが必要です。
）
フォルダを作成すると、サイトプルダウンに追加され、
サイトの切り替えが出来るようになります。
デフォルトでは、"/sites/default/"のみが作成されており、プルダウンで"/sites/default/"を選択すると、
左側のディレクトリツリーが、/sites/default/以下しか表示されないように制限されます。
サイトプルダウンで"/"を選択すると、左側のディレクトリツリーが/system/以下にもアクセスできるよ
うになります。ただし、"/"は管理者権限を付与されたユーザーしか選択できません。
/system/以下は、OpenCms のシステムファイルなどが存在し、誤って消すなどすると、OpenCms が動
かなくなってしまうので、扱いには注意が必要です。
16
テンプレートの JSP ファイルは、/system/modules/*/templates/以下に置く事になるので、サイトを”/”
に変える必要があります。しかし、ページ自体は各サイトに作成するので、サイトプルダウン
を、”/sites/default/”にする必要があります。
テンプレート開発中に、よく間違うのですが、JSP を編集し、サイトを”/”にしたままで HTML ページ
のプレビューを表示しようとするとエラーになります。
ページをプレビューするには、面度ですが、サイトプルダウンを、そのサイト（"/sites/default/”）に切
り替えてからプレビューする必要があります。
画像や CSS、JavaScript 等のリソースも、基本的には/sites/以下のディレクトリにアップロードします。
次に、Online と Offline の関係について、説明します。
OpenCms は、データを保存する場所として、Online と Offline の二つの領域が存在します。
サイトにアクセスしてきた訪問者が閲覧するページの情報は、全て Online 領域のデータです。
また、OpenCms で編集作業を行うと、それらの変更は全て Offline 領域に保存されます。
よって、OpenCms 上でどれだけ編集を行っても、Online 領域、つまり、公開されているサイトには全
く影響がありません。
そして、
「発行」という処理を行うと、Offline 領域の変更されたデータが、Online 領域の領域にコピー
されます。このとき、初めて公開サイトのページが更新されます。
左上のプロジェクト・プルダウンで Online か Offline かを選択できます。Online に切り替えると、公
開されているページの情報のみ表示され、変更し、まだ「発行」を行っていないデータは表示されない
事が確認できると思います。また、Online では、一切の編集が出来なくなっているはずです。
17
2-4 テンプレートの作成
テンプレートの作成方法を説明します。
1.
モジュールの下の templates フォルダ直下で、
「新規」ボタンをクリックし、JSP ファイルを選択
して下さい。
2.
JSP の新規作成ダイアログが表示されます。テンプレートのファイル名を半角で入力してください。
拡張子は JSP としてください。
18
3.
次にタイトルを入力してください。テンプレートを選択するプルダウンに表示されます。
4.
作成したテンプレートをコンテクストメニューの「ソースコードの編集」で開いてください。
19
5.
開いたら、ここに、HTML を貼り付けてください。
JSP なので、HTML の他にも、<% ~ %>で囲んで Java のコードを記述する事も可能です。
これ以降は、JSTL や OpenCms が提供するタグライブラリを用いてテンプレートを記述していき
ます。
ただ、その前に、おまじないとして、以下の 2 行は追記するようにしてください。一行目は、CMS
のタグライブラリを利用できるようにする為の記述で、もう一行は、直接編集ボタン（
）を利
用可能にする為の記述です。
<cms:editable/>タグは、<head> ～ </head>の中に記述してください。
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZYYX｜ePaper</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../common/css/screen.css" media="all" />
<cms:editable/>
</head>
<body>
20
3
CMS タグライブラリの
タグライブラリの基本的な
基本的な使い方
CMS が提供しているタグの基本的な使い方と、テンプレートの作成に必要な基本概念を説明します。
個々のタグの詳細な使い方は、
『OpenCms タグリファレンス』を参照してください。
3-1 直接編集領域の指定 [cms:include]
ページ内に編集領域を作成する場合は、その場所に<cms:include/>タグを記述します。
このタグが記述された所に直接編集ボタンが表示され、HTML エディタで編集できるようになります。
【ソースコード：sample3_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
</body>
</html>
21
【実行結果】
本文を入力していない場合
本文を入力した場合
（直接編集ボタンにマウスを乗せると、上のよう
に編集領域が赤枠でハイライト表示されます。
）
※ まれに、ブラウザのキャッシュなどの関係で、直接編集ボタンが表示されなかったり、表示位
置がずれていたりする事がありますが、その場合は、ブラウザをリロードしてください。
※ Shift+スペース、又は Ctrl＋スペースで直接編集ボタンの表示・非表示を切り替えられます。
22
同一ページ内に、2 つ以上の編集領域を指定したい場合は、element 属性の名前を違う名前にします。
element 属性に指定する名前は自由に決める事が出来ますが、半角英数で指定してください。
同じ名前を指定した場合、その編集領域は共有されます｡例えば、下の例では、編集領域１と編集領
域２は同じ内容が表示され、編集領域２の文字を変更すると、編集領域１も自動的に変更されます。
また、editable 属性を false にすると直接編集ボタンが非表示となり、そのエリアからは編集画面へ
遷移できなくなります。
【ソースコード：sample3_2.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
<div>編集領域２</div>
<div><cms:include element="body2" editable="true" /></div>
<div>編集領域３</div>
<div><cms:include element="body1" editable="false" /></div>
</body>
</html>
【実行結果】
23
ヘッダーやフッターなど、複数のテンプレートで共通となる部分があるかと思います。
その場合、共通部分のみを別のテンプレートにして、共有する事が可能です。
【ソースコード：header.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>

<div id=”header”>
<p>ここは、ヘッダーの領域です。</p>
</div>

【ソースコード：sample3_3.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:include file="header.jsp" />
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
</body>
</html>
【実行結果】
24
外部ファイル化したテンプレートのインクルードの場合は、element 属性を指定する必要はありません。
注意点として、上記の例では、header.jsp も sample3.jsp と同じ階層に作成しました。
つまり、モジュールの templates ディレクトリに header.jsp を置いた事になります。
この場合、ページの新規作成ダイアログなどでテンプレートを選択するプルダウンに、header.jsp も選
択可能なテンプレートとして表示されてしまいます。
HTML の部品として外部化した JSP は、通常、テンプレート選択プルダウンに表示させる必要が無い
ため、別のディレクトリに置くことが望ましいです。
一般的には、モジュールフォルダの下に elements フォルダを作成し、そこに外部ファイルを置きます。
header.jsp の移動に合わせて、テンプレートのインクルード先のパスも変更します。
【ソースコード：sample3_4.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:include file="../elements/header.jsp" />
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
</body>
</html>
25
次に、テンプレートの外部化と似た機能として、別のページの編集領域で入力されたデータをインクル
ードする事が出来ます。
【ソースコード：sample3_5.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<div>/news0309.html の編集領域 body1</div>
<cms:include element="body1" file="/news0309.html" editable="true" />
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
</body>
</html>
sample4.jsp を適用して作成された html ページは全て、news0309.html で入力したデータが上部に表
示されるようになります。news0309.html を編集すると、全てのページの上部も変更されます。
2 つ目の<cms:include/>タグは、file 属性の指定が無いので、その html ページそのものの body1 を表示
します。
先ほどのテンプレートの外部化とは違い、file 属性に指定するのは jsp ファイルではなく、html です。
テンプレートが適用され、作成されたページのパスを指定します。また、element 属性の指定は必須と
なります。
26
3-2 リンクの指定方法（ディレクトリ階層が合わない場合） [cms:link]
テンプレート内の画像や CSS、JavaScript ファイルのパス、リンク先の URL は、相対パスで記述す
るようにしてください。OpenCms は、実際に公開される時の URL と、プレビューする時の URL は違
います。よって、絶対パスで指定してしまうと、プレビューの時は表示されるが、公開するとレイアウ
トが崩れる、又は、その逆が起こってしまいます。
しかし、さまざまな階層で使用されるテンプレートの場合、相対パスで記述する事が出来ないかと思
います。例えば、CSS や画像などはどの階層のページからも共通で使用されます。また、全てのページ
で利用されるヘッダーを以下のように相対パスにしてしまうと、/index.html で正常に表示されたとし
ても、/news/index.html では、画像がリンク切れになってしまうと思います（/news/images/logo.gif
を参照してしまう為）。
【ソースコード：header.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>

<div id=”header”>
<img src="./images/logo.gif" alt="ヘッダーのロゴ画像">
</div>

このような場合は、以下のように、サイトルートからの絶対パスを指定した上で、<cms:link/>タグ
で囲みます。こうしておけば、OpenCms がリンクの階層を自動的に判断し、変換するようになります。
【ソースコード：header.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>

<div id=”header”>
<img src="<cms:link>/images/logo.gif</cms:link>" alt="ヘッダーのロゴ画像">
</div>

尚、この<cms:link/>は絶対パスにしなければいけない箇所のみに記述するようにした方が良いでし
ょう。必要の無いところまで<cms:link/>タグを多用すると、修正箇所も多くなるのは勿論、ページの
表示も遅くなってしまいます。相対パスで問題ない箇所は、相対パスのまま記述しておいて下さい。
27
3-3 表示・非表示の制御 [cms:offline/online/block]
テンプレートはさまざまなページで使用されますが、特定のページにはこの部分を表示したくないと
か、逆に、特定のページのみ、表示したいものがある場合、<cms:block/>タグを使用します。
表示・非表示を制御したい部分をこのタグで囲み、path 属性に表示を許可するパターンを記述します。
path 属性には、正規表現も記述する事が出来ます。また、カンマ区切りで複数指定する事も出来ます。
【ソースコード：sample3_6.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:block path="/index.html">
この部分は、/index.html の時のみ表示されます。<br/>
</cms:block>
<cms:block path="/news/.*.html">
この部分は、/news/ 以下で拡張子が html のページの時のみ表示されます。<br/>
</cms:block>
<cms:block path="/index.html, /news/.*">
この部分は、/index.html の時、又は /news/ 以下のページの時のみ表示されます。<br/>
</cms:block>
</body>
</html>
28
また、プレビューの時のみ表示させたい場合は、<cms:offline/>タグを、逆に、公開の時のみ表示さ
せたい場合は、<cms:online/>タグを使用します。これらのタグも<cms:block/>タグと同様、path 属性
で条件を記述する事が出来ます。
【ソースコード：sample3_7.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:offline>
この部分は、プレビューの時のみ表示され、公開された時には表示されません。<br/>
</cms:offline>
<cms:online>
この部分は、公開された時のみ表示され、プレビューの時には表示されません。<br/>
</cms:online>
<cms:offline path="/index.html">
この部分は、/index.html のページで、且つ、プレビューの時のみ表示されます。<br/>
</cms:offline>
</body>
</html>
29
3-4 プロパティ値の表示 [cms:property]
html ページには、さまざまなプロパティをセットできます。代表的なものは、Title プロパティや、
Keywords プロパティ、Description プロパティなどです。
これらは、コンテクストメニューの「プロパティ」で設定できる値です。
（管理画面から、適当なプロパティ名で追加する事も可能です。
）
ここで入力された値を表示する時は、<cms:property/>タグを使用します。
name 属性に表示させたいプロパティの名前を指定します。
【ソースコード：sample3_8.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><cms:property name="Title"/></title>
<meta name="keywords" content="<cms:property name="keywords"/>" />
<meta name="description" content="<cms:property name="description"/>" />
</head>
30
file 属性にパスを指定すると、そのファイルのプロパティ値を表示します。

<title><cms:property name="Title" file="/index.html"/></title>
file 属性に以下の値を指定すると、プロパティ値の取得方法が変わります。
search
その HTML ファイルのプロパティに値が無かった場合、親フォルダのプロパ
ティを再帰的に検索し表示します。
親のフォルダのプロパティ値に値をセットしておけば、それ以下のページ全
てに表示させる事が出来るので、非常に便利です。
element.uri
その HTML のプロパティ値ではなく、適用されているテンプレートのプロパ
ティ値を表示します。テンプレート単位で共通となる値であれば、こちらを
使用しようします。親フォルダは検索しに行きません。
search.element.uri
element.uri の親フォルダの再帰検索版です。

<title><cms:property name="Title" file="search"/></title>
escapeHtml 属性に true を指定すると、タグをエスケープして表示します。

<title><cms:property name="Title" escapeHtml="true"/></title>
plainText 属性に true を指定すると、タグを除去して表示します。

<title><cms:property name="Title" plainText="true"/></title>
default 属性に文字列を指定すると、該当のプロパティに値が無かった時、代わりに表示します。
<!—Title プロパティが未入力の場合は、"サンプルページ"と表示されます。 -->
<title><cms:property name="Title" default="サンプルページ "/></title>
31
3-5 リンク URL のコントロール [cms:editable]
<cms:link/>タグで囲んだリンクや HTML エディタで入力したリンクに関しては、<cms:editable/>タグ
である程度のコントロールが可能です。例えば、absolutelink 属性を true にすると、online（公開され
た）側でのリンクが、相対パスではなく、サイトルートからの絶対パスで出力されるようになります。
【ソースコード：sample3_9.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>

<html>
<head>
<cms:editable absolutelink="true"/>
<link rel="stylesheet" type="text/css" href="<cms:link>/common/css/screen.css</cms:link>" />
</head>
また、linkPrefix 属性に文字列を指定すると、出力されるリンクの前にこの文字が追加され、
逆に、linkPrefixCut 属性に文字列を指定すると、その文字から始まるリンクであった場合、その文字
を削除したリンクが出力されます。
【ソースコード：sample3_10.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<!-/opencms/common/css/screen.css と出力される場合、linkPrefixCut 属性に"/opencms"と指定する
と、出力される HTML は、/common/css/screen.css になる。さらに、linkPrefix 属性に"/jp"と指定
しているので、最終的に出力される HTML は、/jp/common/css/screen.css となる。
-->
<html>
<head>
<cms:editable absolutelink="true" linkPrefixCut="/opencms" linkPrefix="/jp" />
<link rel="stylesheet" type="text/css" href="<cms:link>/common/css/screen.css</cms:link>" />
</head>
Apache のリライトなどで、OpenCms のサイトの構成と、実際の URL 構成が違う場合に、これらの
属性を指定して調整します。尚、linkPrefix 属性と、linkPrefixCut 属性は、absolutelink 属性が true
のときのみ有効です。
これらの属性は、online（公開された）側でのみ有効ですが、offline（OpenCms 上でのプレビュー）
でも変換されるようにしたい場合は、linkOffline 属性に true をセットします。
32
4
スクリプレットの
スクリプレットの記述
OpenCms のテンプレートは JSP なので、<% ～ %>の中で Java のコードを記述する事が出来ます。
その場合でも、CMS のタグライブラリと同等の機能を利用する事が可能です。
4-1 CmsJspActionElement クラスの利用
タグライブラリの一部の機能は、CmsJspActionElement クラスが提供します。
【ソースコード：sample4_1.jsp】
<%@ page import="jp.zyyx.opencms.jsp.CmsJspActionElement, org.opencms.jsp.*" %>
<%
// インスタンスを生成します。
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
// index.html の"body"エレメントの入力値を取得します。
String content = jsp.getContent("/index.html", "body1", java.util.Locale.JAPAN);
// user タグと同じ機能です。引数で指定したプロパティ名に対応する値を取得します。
// 下の例の場合、ログインユーザーの名前を取得しています。
String username = jsp.user("firstname");
// property タグと同じ機能です。引数でプロパティ名を指定すると対応する値がかえってきます。
// 検索方法や読み込み対象のリソースファイルを直接指定することも出来ます。
// プロパティの値が空だったときに代わりに表示するデフォルト文字や、
// タグをエスケープするかどうかも指定できます。
String title1 = jsp.property("Title");
String title2 = jsp.property("Title", "search");
String title3 = jsp.property("Title", "search", "無題");
String title4 = jsp.property("Title", "search", "無題", true);
// link タグと同じ機能です。
String link = jsp.link("/sites/default/index.html");
// label タグと同じ機能です。
String label = jsp.label("flex.cache.label.title");
33
// <cms:editable />を記述した事と同じです。直接編集が可能なテンプレートになります。
jsp.editable(true);
// include タグと同じ機能です。指定したファイルをインクルードします。
// また、エレメント名を指定すると、一部分のみインクルードします。
// jsp.editable(true) が指定されていれば、第三引数に true を入れると直接編集できるようになります。
jsp.include("header.jsp");
jsp.include("/index.html", "body1");
jsp.include("header.jsp", null, true);
// パラメータを渡す場合は以下のようにします。
java.util.HashMap parameters = new java.util.HashMap();
parameters.put("__locale", java.util.Locale.JAPAN);
parameters.put("__navpart", "toprow");
jsp.include("header.jsp", null, parameters);
// template タグと同様の事をしたい場合は、以下のようにします。
if (jsp.template("head")) {
%>

<div id=”header”>
<p>ここは、ヘッダーの領域です。</p>
</div>

<%
}
// info タグと同じ機能です。
String version = jsp.info(".opencms..version");
%>
34
4-2 CmsRequestContext クラスの利用
現在のリクエストやページの状態を取得するには、CmsRequestContext クラスを使用します。
【ソースコード：sample4_2.jsp】
<%@ page import="
jp.zyyx.opencms.jsp.CmsJspActionElement,
org.opencms.jsp.*,
org.opencms.file.*"
%><pre><%
// インスタンスを生成します。
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
CmsRequestContext ctx = jsp.getRequestContext();
// 現在のページのパス（/news/index.html）を取得します。
out.println(ctx.getUri());
// 現在のページのディレクトリパス（/news/）を取得します。
out.println(ctx.getFolderUri());
// 現在ページにアクセスしているユーザーの情報を取得します。
out.println(ctx.currentUser().getName());
out.println(ctx.currentUser().getLastname());
out.println(ctx.currentUser().getFirstname());
out.println(ctx.currentUser().getEmail());
// 現在のプロジェクト名（Offline/Online）を取得します。
out.println(ctx.currentProject().getName());
// 現在のプレビュー日時を UNIX TIME（単位はミリ秒）で取得します。
out.println(ctx.getRequestTime());
// 現在のサイトルートのパス（/sites/default）を取得します。
out.println(ctx.getSiteRoot());
35
// 現在ページにアクセスしているユーザーの IP アドレスを取得します。
out.println(ctx.getRemoteAddress());
// 現在のページのエンコードを取得します。
out.println(ctx.getEncoding());
// 現在のページのロケールを取得します。
out.println(ctx.getLocale());
%>
</pre>
36
4-3 CmsObject クラスの利用
ファイルの一覧を取得したり、登録されているユーザーやグループの情報にアクセスするには、
CmsObject クラスを使用します。
【ソースコード：sample4_3.jsp】
<%@ page import="jp.zyyx.opencms.jsp.CmsJspActionElement,
org.opencms.jsp.*, org.opencms.file.*, java.util.*"
%><pre><%
// インスタンスを生成します。
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
CmsObject cms = jsp.getCmsObject();
CmsResourceFilter filter = CmsResourceFilter.DEFAULT;
// ファイルやフォルダが存在するかどうかチェックします。
out.println(cms.existsResource("/news/index.html"));
// 指定したファイルやフォルダのオブジェクトを取得します。
CmsResource res1 = cms.readResource("/index.html");
out.println("res1:" + res1.getRootPath());
// 指定したフォルダ直下にあるファイルやフォルダを取得します。
// 第三引数を true にすると、サブフォルダも再帰的に取得します（デフォルト）。
List<CmsResource> list1 = cms.readResources("/news/", filter, false);
for(CmsResource res : list1) {
out.println("list1:" + res.getRootPath());
}
// 指定したフォルダの内にあるファイルやフォルダを再帰的に取得します。
// ただし、第二引数で指定したプロパティ値が、第三引数の値と一致するもののみ取得します。
// 第三引数が null の場合、第二引数で指定したプロパティが未入力でないものを取得します。
List<CmsResource> list2 = cms.readResourcesWithProperty("/news/", "Title", null, filter);
for(CmsResource res : list2) {
out.println("list2:" + res.getRootPath());
}
%></pre>
37
4-4 CmsResourceFilter クラスの利用
一覧を取得する時に、CmsResourceFilter オブジェクトを引数に渡しています。
このクラスは検索条件を支持するためのもので、デフォルトでは、以下のものが用意されています。
CmsResourceFilter.ALL
全てのリソースを取得するフィルターです。
削除状態のリソース（斜線表示されているリソース）を含みます。
公開期間が対象外のリソースも含みます。
アクセス権限の設定で、
「表示」が拒否になっているリソースも含みます。
CmsResourceFilter.MODIFIED
変更されたリソースを全て取得するフィルターです。変更されたリソースとは、ステータスが「新規」、
「変更あり」、「削除」の何れか、つまり、エクスプローラビュー上で、ファイル名が斜線表示または、
黒字ではなく青字や赤字で表示されているリソースです。
青字や赤字のリソースは、
「発行」を行う事で「変更なし」になります。
CmsResourceFilter.DEFAULT
CmsResourceFilter.DEFAULT
標準的な条件のフィルターです。
削除状態のリソースは含みません。
公開期間が対象外のリソースは含みません。
アクセス権限の設定で、
「表示」が拒否になっているリソースも含みます。
CmsResourceFilter.DEFAULT_FILES
CmsResourceFilter.DEFAULT とほぼ同様ですが、このフィルターは、フォルダは対象外となり、ファ
イルのみを取得します。
CmsResourceFilter.DEFAULT_FOLDERS
CmsResourceFilter.DEFAULT_FOLDERS
CmsResourceFilter.DEFAULT とほぼ同様ですが、このフィルターは、ファイルは対象外となり、フォ
ルダのみを取得します。
CmsResourceFilter.IGNORE_EXPIRATION
CmsResourceFilter.IGNORE_EXPIRATION
公開期間のチェックを無視するフィルターです。
削除状態のリソースは含みません。
公開期間が対象外のリソースも含みます。
アクセス権限の設定で、
「表示」が拒否になっているリソースも含みます。
38
CmsResourceFilter.ONLY_VISIBLE
表示可能なリソースのみ取得するフィルターです。
削除状態のリソースは含みます。
公開期間が対象外のリソースも含みます。
アクセス権限の設定で、
「表示」が拒否になっているリソースも含みません。
CmsResourceFilter.ONLY_VISIBLE_NO_DELETED
表示可能で、削除状態でないリソースを取得するフィルターです。
削除状態のリソースは含みません。
公開期間が対象外のリソースも含みます。
アクセス権限の設定で、
「表示」が拒否になっているリソースも含みません。
また、上記の用意されているフィルター以外にも、自分で条件をセットして使用することが出来ます。
【ソースコード：sample4_4.jsp】
<%@ page import="
jp.zyyx.opencms.jsp.CmsJspActionElement,
org.opencms.db.CmsResourceState,
org.opencms.file.types.*,
org.opencms.jsp.*,
org.opencms.file.*,
java.util.*"
%><pre><%
// インスタンスを生成します。
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
CmsObject cms = jsp.getCmsObject();
// デフォルトのフィルター
CmsResourceFilter filter = CmsResourceFilter.DEFAULT;
// デフォルトの検索条件にリソースのステータスを追加
// 新規作成されたリソースのみ取得する。
CmsResourceFilter filter1 = filter.addRequireState(CmsResourceState.STATE_NEW);
// デフォルトの検索条件に公開日が本日以降という条件を追加
CmsResourceFilter filter2 = filter.addRequireReleaseAfter((new Date()).getTime());
39
// デフォルトの検索条件から公開期間の制限を除去
CmsResourceFilter filter3 = filter.addExcludeTimerange();
// デフォルトの検索条件にリソースタイプを追加。画像ファイルのみ取得する。
CmsResourceFilter filter4 = filter.addExcludeType(CmsResourceTypeImage.getStaticTypeId());
// デフォルトの検索条件にファイルのみ取得する条件を追加。
CmsResourceFilter filter5 = filter.addRequireFile();
// デフォルトの検索条件にフォルダのみ取得する条件を追加。
CmsResourceFilter filter6 = filter.addRequireFolder();
%></pre>
取得したリソースの List 内をソートする場合は、Collection クラスを使用します。
40
4-5 CmsResource クラスの利用
ファイルやフォルダの情報は、CmsResource オブジェクトとして返されます。
CmsResource オブジェクトから、そのリソースの情報を取得する事が出来ます。
【ソースコード：sample4_5.jsp】
<%@ page import="jp.zyyx.opencms.jsp.CmsJspActionElement, org.opencms.file.*" %>
<pre><%
// インスタンスを生成します。
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
CmsRequestContext ctx = jsp.getRequestContext();
CmsObject cms = jsp.getCmsObject();
CmsResource res = cms.readResource("/index.html");
// リソースの完全なパスを取得します。
out.println(res.getRootPath());
// リソースのサイトルートからのパスを取得します。
out.println(ctx.removeSiteRoot(res.getRootPath()));
// リソースのファイル名を取得します。
out.println(res.getName());
out.println(CmsResource.getName(res.getRootPath()));
// リソースの親フォルダのパスを取得します。
out.println(CmsResource.getParentFolder(res.getRootPath()));
// リソースのディレクトリ階層を数値で取得します。
out.println(CmsResource.getPathLevel(res.getRootPath()));
// リソースがファイルであれば true を返します。
out.println(res.isFile());
// リソースがフォルダであれば true を返します。
out.println(res.isFolder());
41
// リソースの作成日を UNIX TIME（単位はミリ秒）で取得します。
out.println(res.getDateCreated());
// リソースの作成者の ID を取得します。
out.println(res.getUserCreated());
// リソースの最終更新日を UNIX TIME（単位はミリ秒）で取得します。
out.println(res.getDateLastModified());
// リソースの最終更新者の ID を取得します。
out.println(res.getUserLastModified());
// リソースの公開日を UNIX TIME（単位はミリ秒）で取得します。
out.println(res.getDateReleased());
// リソースの公開期限を UNIX TIME（単位はミリ秒）で取得します。
out.println(res.getDateExpired());
// リソースの ID を取得します。
out.println(res.getResourceId());
// リソースタイプの ID を取得します。
out.println(res.getTypeId());
// リソースのステータスを取得します。
// 0:変更なし 1:変更あり 2:新規 3:削除
out.println(res.getState());
%></pre>
42
4-6 JSTL と式言語の利用
OpenCms のテンプレートでは、JSTL や式言語が使用できます。
スクリプレットの量が減り、HTML の可読性も向上するので積極的に利用してください。
式言語を利用すると、ページ、リクエスト、セッションのスコープに変数がセットされて入れば、
${変数名}という形式で表示させる事が出来ます。
また、セットされている変数が、クラスのオブジェクトの場合、アクセサメソッドの利用も出来ます。
JSTL は、標準的なタグライブラリです。使用するには、taglib の宣言を行ってください。
【ソースコード：sample4_6.jsp】
<%@ page import="jp.zyyx.opencms.jsp.CmsJspActionElement,org.opencms.file.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
CmsJspActionElement jsp = new CmsJspActionElement(pageContext, request, response);
CmsObject cms = jsp.getCmsObject();
// オブジェクトを request スコープの変数にセットする。
request.setAttribute("ctx",
cms.getRequestContext());
request.setAttribute("list1", cms.readResources("/news/",CmsResourceFilter.DEFAULT));
%>
<p>ページ URL：${ctx.uri}</p>
<c:forEach items="${list1}" var="res">
${res.rootPath}<br>
</c:forEach>
43
4-7 SQL を実行して結果を表示する
DB へ接続し、SQL を実行する場合でも、JSTL なら簡単に出来ます。
【ソースコード：sample4_7.jsp】
<%@ page import="org.opencms.main.*,java.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%
// 設定ファイル（/WEB-INF/config/opencms.properties）の Map オブジェクトを conf 変数にセット。
request.setAttribute("conf", OpenCmsCoreAccess.getConfiguration());
%>
<!—データソースの定義｡式言語で接続先データベースの情報を取得してセットする。 -->
<sql:setDataSource var="db"
driver
= "${conf['db.pool.default.jdbcDriver']}"
url
= "${conf['db.pool.default.jdbcUrl']}${conf['db.pool.default.jdbcUrl.params']}"
user
= "${conf['db.pool.default.user']}"
password = "${conf['db.pool.default.password']}"
/>

<sql:query var="rs" dataSource="${db}" >
SELECT * FROM CMS_OFFLINE_PROPERTYDEF
</sql:query>

<c:forEach var="rec" items="${rs.rows}" >
<c:out value="${rec.propertydef_name}" /> (<c:out value="${rec.propertydef_id}" />)<br/>
</c:forEach>
44
5
テンプレート（
テンプレート（構造化コンテンツ
構造化コンテンツ用
コンテンツ用）の作り方
5-1 構造化コンテンツ（XML Content）とは
先ほどまでのフリーテキストページは、編集領域を指定し、そこに HTML エディタでデータ入力で
きるようにするものでした。HTML エディタは、フリーフォーマットであり、どんなレイアウトも自由
に登録できます。これに対して、構造化コンテンツとは、入力フォームを細かく定義し、入力できるデ
ータの形式を制限します。
構造化コンテンツの作成は、以下の手順で行います。
1.
XSD を作成します（入力フォームは XSD と呼ばれる XML ファイルで定義します）。
2.
それに対応するテンプレートを JSP で作成します。
3.
XSD と JSP テンプレートのセットを、新しいリソースタイプとして登録します。
リソースタイプとは、フォルダーやテキストファイル、JSP、フリーテキストページといったファイ
ルやフォルダの種類の事で、新たなリソースタイプとして登録しておくと、ページの新規登録時に、そ
のリソースタイプを選択できるようになります。XSD を作成するたびに、リソースタイプを追加してい
く必要があります。
45
5-2 XSD の作成
最初に XSD を作成します。XSD はモジュールフォルダの schemas フォルダ内に置くのが一般的です。
まず、モジュールフォルダの直下に、schemas フォルダを作成してください。
schemas フォルダ内に移動して、「新規」ボタンをクリックしてください。
新規ダイアログが表示されますので、
「テキストファイル」を選択し、
「次へ＞＞」をクリックしてくだ
さい。
46
XSD ファイルの名前を入力します。ここでは、sample.xsd と入力します。
作成された sample.xsd のコンテクストメニューから、ソースコード編集を選択し、sample.xsd を編集
してください。
47
sample.xsd を以下のように記述します。黒字のところは、どのような XSD でも共通です。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
</xsd:schema>
まず、このリソースタイプの名前を半角英数で決めます。この例の場合は、”Sample” です。
3 行目の name 属性には、リソースタイプの名前の最後に”s”を追加した名前を指定します。
そして、type 属性には、name 属性の名前の前に”OpenCms”を付与した名前を指定します。
5 行目の name 属性には、3 行目の type 属性と同じ値を指定します。
7 行目の name 属性には、リソースタイプの名前を、type 属性には、name 属性の名前の前に”OpenCms”
を付与した名前を指定します。
11 行目の name 属性には、7 行目の type 属性と同じ値を指定します。
<xsd:sequence> ～ </xsd:sequence> の間（13 行目～17 行目）までが入力フォームの定義です。
入力フォームは、<xsd:element>で指定し、name 属性に、その項目の名前を半角英数の適当な文字列で指
定します。そして、type 属性にデータの種類を指定します。
48
入力可能なデータの種類には以下のものがあります。
データタイプ
OpenCmsBoolean
説明
真偽値を表す"true"または、"false"のデータが入ります。それ以外は
入りません。未入力の場合は、"false"がセットされます。
OpenCmsColor
"#RRGGBB"といった色情報を表す形式の文字列のみが入ります。
OpenCmsDateTime
日付をあらわすデータが入ります。
登録されるデータは、UNIX TIME 形式(long 値)のみです。
単位はミリ秒ですので、通常の UNIX TIME の値が 1000 倍されたデ
ータで保持されます。
OpenCmsHtml
文字列であれば何でも入ります。
OpenCmsLocale
"ja" や "en" といったロケールを示す文字のみが入ります。
OpenCmsString
文字列であれば何でも入ります。
OpenCmsVfsFile
リソースのパスを表す文字列のみが入ります。
また、OpenCms 上に存在しないリソースを指定するとエラーとなり、
保存できません。よって、http://～のような外部のファイルを指定し
たい場合は、OpenCmsString を使用する必要があります。
ファイルのパスだけではなく、リソースの ID まで保持するので、参
照先のリソースが移動されたりリネームされたとしても、自動的にパ
スが修正され、リンク切れにはなりません。
OpenCmsVfsImage
OpenCmsVfsFile とほぼ同様ですが、画像をサムネイル化した場合
は、その縦・横のサイズ情報や、クリッピングした時の座標情報など
も保持します。
画像の情報を保持するためのデータタイプですが、画像以外のファイ
ルを指定したとしてもエラーとなるわけではありません。
データタイプを指定すると、それに対応した入力フォームが適用されます。
例えば、OpenCmsHtml であれば、HTML エディタが、OpenCmsDateTime であれば、テキストフィ
ールド＋カレンダーが適用されます。
49
5-3 テンプレート JSP の作成
次は、テンプレートを作成します。ただ、このテンプレートは構造化コンテンツ用であり、フリーテ
キストページで使用するテンプレートではありません。フリーテキストページの新規作成画面で、テン
プレートプルダウンの選択項目に、この JSP が表示されると紛らわしくなります。よって、モジュール・
フォルダ直下の templates フォルダではなく、elements フォルダ内に JSP を作成します。
【ソースコード：sample5_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:contentload collector="singleFile" param="%(opencms.uri)" editable="true">
<div>Date:<cms:contentshow element="Date" /></div>
<div>Title:<cms:contentshow element="Title" /></div>
<div>SubTitle:<cms:contentshow element="SubTitle" /></div>
<div>Body:<cms:contentshow element="Body" /></div>
<div>URL:<cms:contentshow element="URL" /></div>
</cms:contentload>
</body>
</html>
構造化コンテンツで、入力されたデータは、<cms:contentload/>タグで囲まれた領域内でのみ、表示が
可能になります。
そして、データを表示するには、<cms:contentshow/>タグを使用します。このタグの、element 属性に項
目名を指定すると、該当する項目の入力データが表示されます。
作成できたら、sample.xsd と、sample5_1.jsp を「直接発行」して下さい。
schemas フォルダが、まだ「直接発行」されていなければ、直接発行してください。
親フォルダが新規（青字）の状態で、そのフォルダの下のファイルだけ「直接発行」しようとすると、
エラーとなり失敗します。
※ Offline ではプレビューできたのに、Online でプレビューするとエラーになる場合は、
JSP テンプレートを発行したかどうか、確認して下さい。
50
5-4 リソースタイプの追加
先ほど作成した XSD と JSP テンプレートのペアを使って、新しいリソースタイプを追加します。
この作業は、ブラウザ上では出来ません。
まず、サーバー上の設定ファイル、./WEB-INF/config/opencms-modules.xml を開いてください。
そして、XSD を配置したモジュールを定義している箇所を探し出してください。
jp.zyyx.opencms.sample なので、<name>jp.zyyx.opencms.sample</name>の記述がある箇所を検索す
れば見つかります。
そこに、以下の赤字と緑字の部分を追記して保存してください。
【設定ファイル：opencms-modules.xml】
<module>
<name>jp.zyyx.opencms.sample</name>
<nicename><![CDATA[サンプルモジュール]]></nicename>
<group>ZYYX</group>
<class/>
<description><![CDATA[サンプルのテンプレートを含んだモジュールです。]]></description>
<version>0.1</version>
<authorname><![CDATA[ZYYX Inc.]]></authorname>
<authoremail><![CDATA[[email protected]]]></authoremail>
<datecreated/>
<userinstalled/>
<dateinstalled/>
<dependencies/>
<exportpoints>
<exportpoint uri="/system/modules/jp.zyyx.opencms.sample/lib/" destination="WEB-INF/lib/"/>
<exportpoint uri="/system/modules/jp.zyyx.opencms.sample/classes/" destination="WEB-INF/classes/"/>
</exportpoints>
<resources>
<resource uri="/system/modules/jp.zyyx.opencms.sample/"/>
</resources>
<parameters/>
<resourcetypes>
<type class="org.opencms.file.types.CmsResourceTypeXmlContent" name="sample" id="80">
51
<properties>
<property>
<name>content-conversion</name>
<value type="shared"><![CDATA[xhtml]]></value>
</property>
<property>
<name>template-elements</name>
<value type="shared">
<![CDATA[/system/modules/jp.zyyx.opencms.sample/elements/sample5_1.jsp]]>
</value>
</property>
</properties>
<param name="schema">/system/modules/jp.zyyx.opencms.sample/schemas/sample.xsd</param>
</type>
</resourcetypes>
<explorertypes>
<explorertype name="sample" key="fileicon.sample" icon="page.gif" reference="xmlcontent">
<newresource uri="newresource_xmlcontent.jsp?newresourcetype=sample"
order="1" autosetnavigation="false" autosettitle="false"/>
<accesscontrol>
<accessentry principal="GROUP.Administrators" permissions="+r+v+w+c"/>
<accessentry principal="GROUP.Projectmanagers" permissions="+r+v+w+c"/>
<accessentry principal="GROUP.Users" permissions="+r+v+w+c"/>
</accesscontrol>
</explorertype>
</explorertypes>
</module>
リソースタイプを追加するたびに、赤字の<resourcetype> ～ </resourcetype> と、<explorertype> ～
</explorertype> の範囲を追記していきます。その時、赤字の部分は毎回、同じ記述で問題ありませんが、緑
色の部分は、リソースタイプごとに変更する必要があります。
緑字の部分で、”sample”と記述されている箇所は、リソースタイプの名前を小文字で指定している箇所
で、別のリソースタイプを追加する時は、その名前に置き換えて追記してください。また、同じリソー
スタイプ名の設定を、二重定義してはいけません。リソースタイプ名が重複していると、OpenCms が
正しく動作しません。
52
また、XSD の場所と JSP テンプレートの場所を記述する箇所も緑になっていますが、これも、リソ
ースタイプ別に変更してください。
最も注意しないといけない箇所としては、id="80" となっている部分です。これは、適当な数字を振れば
いいのですが、絶対に他のリソースタイプの ID と重複してはいけません。
order="100" となっている箇所があります。新規作成ダイアログでリソースタイプを選択する画面があります
が、そのときに表示されるリソースタイプの並び順をここで指定します。
尚、フリーテキストページや JSP、フォルダなどの標準のリソースタイプの設定は、opencms-modules.xml で
はなく、opencms-workplace.xml に記述されていますので参考にして下さい。
opencms-modules.xml の編集が終わったら、Tomcat を再起動してください。opencms-modules.xml
の変更後は、必ず Tomcat の再起動が必要になります。
再起動が終わったら、OpenCms へログインし、
新規ボタンをクリックしてください。
追加したリソースタイプが選択できるように
なっていると思います。
リソースタイプ名が、??? fileicon.sample ???
となっていると思いますが、これは、日本語の
ラベルをまだ設定していないからです。設定の
仕方は後述しますので、今は、無視してくださ
い。
53
次にページのファイル名を入力し、
「次へ>>」ボタンをクリックしてください。
次に、ページのタイトルを入力し、
「完了」ボタンをクリックしてください。
ここでエラーが出る場合は、XSD の記述に誤りがある可能性が高いようです。
また、opencms-modules.xml で設定した XSD と JSP テンプレートのパスが正確かどうか確認してく
ださい。
54
作成された xmlcontent.html をクリックし、プレビューを表示してください。
下のように、テンプレートが適用されたページが表示されると思います。
直接編集ボタンをクリックしてください。
XSD で定義したとおりの入力項目とフォームが表示されます。
適当な値を入力し、左上から二番目の「保存して終了」ボタンをクリックしてください。
55
5-5 入力項目を動的に増やす方法
項目数が可変となる入力項目をセットする場合は、XSD を以下のように修正します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" minOccurs="0" maxOccurs="5" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
</xsd:schema>
上記の例では、URL の入力項目を、ユーザー自身が 0～3 つまで増やせる事ができるようにしていま
す。可変長の入力項目の<xsd:element />の minOccurs 属性と、maxOccurs 属性で数を指定します。
minOccurs 属性に最小の場合の数字を指定します。例えば、この値が 0 の時は、最初は URL の入力欄は
表示されていません。2 であれば、最初から 2 つの入力欄が表示されます。minOccurs 属性を指定しない場合
は、1 が指定された事になります。
maxOccurs 属性に最大の場合の数字を指定します。例えば、この値が 5 の場合は、ユーザーは 5 つまで入
力欄を追加する事が出来ます。”unbounded”を指定すると、無制限となり、ユーザーはいくらでも入力欄を増や
56
す事が出来るようになります。maxOccurs 属性を指定しない場合は、1 が指定された事になります。
この XSD での URL 入力欄は以下のようになります。
URL 入力欄を 4 つまで増やした状態です。入力欄の右側には二重丸のボタン（
）があり、そのボ
タンの上にマウスを乗せると、4 つのボタンが表示されます。
は、削除ボタンをあらわし、クリックすると、その入力欄を、データごと削除します。
は、上に移動ボタンをあらわし、一つ上の URL 入力欄と、入力データを入れ替えます。
は、下に移動ボタンをあらわし、一つ下の URL 入力欄と、入力データを入れ替えます。
は、新規追加ボタンをあらわし、新しく入力欄を追加します。
これらのボタンを利用して、ユーザーが項目の数を自由に変更します。
XSD の修正のみの場合は、Tomcat の再起動は必要ありません。
XSD を修正すると、変更度合いによっては、既に入力していたデータが削除されるので注意してください。
HTML エディタを可変にしたいケースがあると思いますが、一画面内に 3 つ以内に納まるように考慮
してください。HTML エディタは巨大な JavaScript の塊で、たくさん配置すると、ブラウザの動作が
非常に重くなり、最悪、ブラウザが強制終了してしまう事があります。
57
次に、入力項目を可変にした場合、テンプレート側も可変に対応させなければなりません。
【ソースコード：sample5_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:contentload collector="singleFile" param="%(opencms.uri)" editable="true">
<div>Date:<cms:contentshow element="Date" /></div>
<div>Title:<cms:contentshow element="Title" /></div>
<div>SubTitle:<cms:contentshow element="SubTitle" /></div>
<div>Body:<cms:contentshow element="Body" /></div>
<cms:contentloop element="URL">
<div>URL:<cms:contentshow/></div>
</cms:contentloop>
</cms:contentload>
</body>
</html>
複数項目となった入力項目に関しては、ループする範囲を<cms:contentloop> ～ </cms:contentloop>
で、囲みます。そして、その中に<cms:contentshow/>タグを用いて表示させます。
element="URL"の記述は、<cms:contentloop/>タグで記述しているので、<cms:contentshow/>タグに
は必要ありません。
58
5-6 ウィジェットの変更
入力フォームの種類には、テキストフィールドや、ラジオボタン、チェックボックスなど、いくつかの
種類がありますが、OpenCms では、これらの入力インターフェースの部品をウィジェットと呼んでい
ます。OpenCms で利用可能なウィジェットには以下のものがあります。
データタイプ
BooleanWidget
説明
チェックボックスを表示します。
"#8899FF"等の色情報を入力するインターフェースを表示します。
ColorpickerWidget
カラーテーブルからマウスで色を選択できるインターフェースがあり、選
択した色情報は、テキストフィールドにセットされます。
ComboWidget
コンボボックスを表示します。プルダウンリストと、入力可能なテキスト
フィールドが組み合わさったインターフェースです。
日時情報を入力するインターフェースを表示します。
DateTimeWidget
カレンダーから日時を選択できるインターフェースがあり、選択した日付
は、テキストフィールドにセットされます。
DisplayWidget
DownloadGalleryWidget
GroupWidget
HtmlGalleryWidget
HtmlWidget
ImageGalleryWidget
LinkGalleryWidget
テキストの表示のみ行います。データの入力などは出来ません。
ダウンロードギャラリーを開いて、ファイルのパスをテキストフィールド
にセットするインターフェースを表示します。
グループを選択するインターフェースを表示します。
HTML ギャラリーを開いて、HTML の部品をセットするインターフェー
スを表示します。
使用しているブラウザが利用可能な HTML エディタを表示します。
イメージギャラリーを開いて、ファイルのパスをテキストフィールドにセ
ットするインターフェースを表示します。
外部リンクギャラリーを開いて、URL をテキストフィールドにセットす
るインターフェースを表示します。
MultiSelectWidget
複数選択可能なセレクトボックスを表示します。
SelectorWidget
セレクトボックスを表示します。
59
一行テキストを入力するテキストフィールドを表示します。
StringWidget
TableGalleryWidget
テーブルギャラリーを開いて、HTML のテーブルをセットするインター
フェースを表示します。
TextareaWidget
複数行テキストを入力するテキストエリアを表示します。
UserWidget
ユーザーを選択するインターフェースを表示します。
VfsFileWidget
ファイル選択用のインターフェースを表示します。ポップアップにより、
OpenCms の VFS のファイルツリーを表示し、
上記は一部の代表的なものです。詳しくは『OpenCms ウィジェットリファレンス』を参照して下さい。
ウィジェットを指定するには、XSD で以下のように指定します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" minOccurs="0" maxOccurs="5" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
60
<xsd:annotation>
<xsd:appinfo>
<layouts>
<layout element="Body" widget="TextareaWidget"/>
<layout element="URL" widget="VfsFileWidget"/>
</layouts>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
<xsd:annotation>内の<xsd:appinfo>内の<layouts> ～ </layouts>の中に、<layout/>タグで指定します。
element 属性に入力項目名を、そして、widget 属性にウィジェット名を指定します。
上記の例の場合、HTML エディタが使われていた Body を、シンプルなテキストエリアに変更し、URL
には、ファイル選択ボタンを表示する VfsFileWidget に変更しています。
VfsFileWidget は、入力項目の右にフォルダのボタンが表示され、クリックするとファイルをツリーか
ら選択するインターフェースが、別ウインドウで起動します。
61
データタイプとウィジェットは密接な関係があり、ナンセンスな組み合わせも考えられます。例えば、
データタイプが OpenCmsBoolean の場合、true か false しか入力できないので、HTML エディタのよ
うな高機能なものは必要ありません。HtmlWidget を指定するのはナンセンスとなります。
ウィジェットを指定しない場合は、データタイプごとに決められたデフォルトのウィジェットが使用
されます。データタイプとデフォルト・ウィジェットの対応表は以下です。
データタイプ
デフォルトのウィジェット
OpenCmsBoolean
BooleanWidget
OpenCmsColor
ColorpickerWidget
OpenCmsDateTime
DateTimeWidget
OpenCmsHtml
HtmlWidget
OpenCmsLocale
StringWidget
OpenCmsString
StringWidget
OpenCmsVfsFile
VfsFileWidget
セレクトボックスやチェックボックス等の複数選択項目の場合、その選択項目は configuration 属性で
指定します。項目名を | で区切って指定すると、選択項目として表示されます。
【ソースコード（一部のみ）：sample.xsd】
<xsd:annotation>
<xsd:appinfo>
<layouts>
<layout element="SubTitle" widget="ComboWidget"
configuration="IR 情報について|製品情報について|会社情報について"/>
</layouts>
</xsd:appinfo>
</xsd:annotation>
62
上記の場合、入力されるデータと選択項目のラベルが同じ値になります。
コンボボックスの場合は問題ありませんが、セレクトボックス等の場合、値とラベルを別にしたい場合がありま
す｡その場合、以下のような書き方ができます。
<layout element="SubTitle" widget="SelectorWidget"
configuration="value='1' option='男'|value='2' option='女' default='true' |value='3' option='未選択' "
/>
value が値で、option がラベルです。default='true'をセットすると、その項目がデフォルト値となります。
| でそれらを区切るところは変わりありません。
また、option を設定しない場合は、value の値がラベルに使用されます。
以下のように help を指定すると、各選択項目にポップアップで説明のテキストを表示させる事ができます。
<layout element="SubTitle" widget="ComboWidget" configuration="
value='IR 情報' help='IR に関するお問い合わせはこちら。' |
value='製品情報' help='製品に関するお問い合わせはこちら' |
value='会社情報' help='会社に関するお問い合わせはこちら' |
value='その他'
help='その他のお問い合わせはこちら。'" />
63
5-7 入力項目のグループ化
以下のように可変となった URL 入力欄があります。
これを、以下のように、URL 入力欄、テキスト入力欄、ターゲット選択欄の 3 つをグループ化した入
力フォームに変更してみたいと思います。
ただし、このぐらいの修正を XSD に加えてしまうと、今までの XSD で入力したデータの整合性が取
れない為、作り直しになるか、変換ルールを XSL で作成し、管理画面から変換を行う事になります。
では、まず、URL 入力欄、テキスト入力欄、ターゲット選択欄の 3 つの入力フォームを定義した XSD
を sample.xsd とは別のファイルで作成する必要があります。
以下の url.xsd を作成し、モジュール直下の schemas フォルダ以下に置いてください。
【ソースコード：url.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Urls" type="OpenCmsUrls"/>
<xsd:complexType name="OpenCmsUrls">
64
<xsd:sequence>
<xsd:element name="Url" type="OpenCmsUrl" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsUrl">
<xsd:sequence>
<xsd:element name="URL" type="OpenCmsString" />
<xsd:element name="Text" type="OpenCmsString" />
<xsd:element name="Target" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="optional"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<layouts>
<layout element="Target" widget="ComboWidget" configuration="_blank|_self|_top"/>
</layouts>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
まず、この XSD のデータタイプ名を半角英数で決めます。この例の場合は、”Url” です。
3 行目の name 属性には、データタイプ名の最後に”s”を追加した名前を指定します。
そして、type 属性には、name 属性の名前の前に”OpenCms”を付与した名前を指定します。
5 行目の name 属性には、3 行目の type 属性と同じ値を指定します。
7 行目の name 属性には、リソースタイプの名前を、type 属性には、name 属性の名前の前に”OpenCms”
を付与した名前を指定します。
11 行目の name 属性には、7 行目の type 属性と同じ値を指定します。
<xsd:sequence> ～ </xsd:sequence> の間（13 行目～15 行目）までが入力フォームの定義です。
URL 入力欄、テキスト入力欄、ターゲット選択欄の 3 つの入力フォームを定義しています。
ターゲットはウィジェットをコンボボックスにし、”_blank” 、”_self” 、”_top”を選択できるようにす
る為、23 行目の<layout/>で定義しています。
65
また、グループ化のための XSD の場合は、17 行目の use 属性は、必ず”optional” と指定してください。
インクルードされる側の XSD の場合は、opencms-modules.xml を修正する手順は必要はありません。
次に sample.xsd を修正します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:include schemaLocation="opencms://system/modules/jp.zyyx.opencms.sample/schemas/url.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsUrl" minOccurs="0" maxOccurs="5" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
</xsd:schema>
まず、先ほど作成した url.xsd を読み込めるようにする為に、3 行目のように記述し、url.xsd をイン
クルードしてください。
後は、URL のデータタイプのところを、url.xsd で定義したデータタイプを指定します。この場合の
データタイプ名は、”OpenCms”という文字が先頭に付与された単数形の名前を指定します。
66
これで、入力フォームがグルーピングされたものに修正されました。
ただ、テンプレートがそのままなので、こちらも、今回の変更に合わせて修正します。
【ソースコード：sample5_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:contentload collector="singleFile" param="%(opencms.uri)" editable="true">
<div>Date:<cms:contentshow element="Date" /></div>
<div>Title:<cms:contentshow element="Title" /></div>
<div>SubTitle:<cms:contentshow element="SubTitle" /></div>
<div>Body:<cms:contentshow element="Body" /></div>
<cms:contentloop element="URL">
<a href="<cms:contentshow element="URL"/>" target="<cms:contentshow element="Target"/>">
<cms:contentshow element="Text"/>
</a><br/>
</cms:contentloop>
</cms:contentload>
</body>
</html>
<cms:contentloop/>でループさせる範囲を囲むところは通常通りです。
その中で、<cms:contentshow/>を使って入力されたデータを表示しますが、element 属性に、入力項目の名
前を指定してください。ここで指定するのはインクルードされた方、つまり、url.xsd 側の入力項目名となります。
この XSD のインクルードによって、XSD ファイル同士で親子関係を持つ事になります。これは、親、
子、孫…と何階層でも持たせる事ができるのですが、注意点として、子の XSD ファイル内で親の XSD
ファイルのデータタイプを使用したり、自分自身のデータタイプを使用しないで下さい。無限ループと
なり、StackOverflow エラーが発生してしまいます。
67
5-8 タブの設定
入力項目が多いと、画面が縦に長くなりがちです。
そういう場合は、以下のように、タブで入力フォームを切り替えられるようにすると便利です。
上記の場合、TabBasic という名前のタブを用意し、その中に、Date、Title、SubTitle の 3 つの入力項
目を表示します。そして、TabDetail という名前のタブを用意し、その中に、Body、URL の 2 つの入
力項目を表示しています。XSD は以下のようになります。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
68
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<tabs>
<tab element="Date" name="TabBasic" collapse="false" />
<tab element="Body" name="TabDetail" collapse="false" />
</tabs>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
<tabs> ～ </tabs> の中に、必要なタブの数だけ、<tab/>を定義します。
<tab/>の element 属性には、そのタブの最初の入力項目名を指定します。最初のタブ（TabBasic）は、
Date から始まるので”Date”を指定します。
（最初のタブは必ず最初の入力項目名になるはずです。）
二つ目のタブ（TabDetail）は、Body 以降の入力項目となるので、”Body”を指定します。
<tab/>の name 属性には、そのタブの名前を指
定します。
name 属性が未設定の場合は、element
属性に指定した値が使用されます。
<tab/>の collapse 属性は、入力画面で、入力欄
の左にあるラベルを表示するかしないかを指定
します。true にすると、右の画面のように、ラ
ベルが表示されなくなります。
69
5-9 日本語ラベルの適用
今までは、ラベルが全て半角英数表記でした。これらを、全角の日本語にする方法を説明します。
まず、日本語ラベルを定義するテキストファイルを作成します。
モジュールの直下に classes という名前のフォルダがあると思いますが、その最下層まで移動して、
workplace_ja.properties という名前でテキストファイルを作成してください。
今回の場合は、以下のファイルを作成する事になります。
/system/modules/jp.zyyx.opencms.sample/classes/jp/zyyx/opencms/sample/workplace_ja.properties
ファイルの作成は、そのディレクトリまで移動し、｢新規｣→「テキストファイル」→「次へ>>」→（フ
ァイル名を入力）→「完了」という流れで行えます（ファイルの Title は無くても構いません）
。
workplace_ja.properties というファイル名についての補足になりますが、OpenCms は複数言語に対応
していますので、英語であれば、workplace_en.properties、ドイツ語であれば、workplace_de.properties
という名前でファイルを作成しておくことができます。ワークプレースの設定で、使用言語を切り替え
た時、各言語用のファイルを用意しておけば、対応する言語のラベルを表示させる事が可能です。
尚、対応する言語のファイルが存在しない場合は、最終的に workplace.properties を読みにいきます。
通常、workplace.properties には英語のラベルを定義しています。
では、workplace_ja.properties に以下の内容を入力し保存してください。
保存した後は、必ずこのファイルを「直接発行」して下さい。この操作は必須です。
「直接発行」の際、親フォルダがまだ発行されていなければ、親フォルダごと発行してください。
親フォルダを発行しない状態で、ファイルのみ発行する事はできません。
【設定ファイル：workplace_ja.properties】
fileicon.sample=構造化コンテンツのサンプルページ
label.Sample.Date=公開日
label.Sample.Title=タイトル
label.Sample.SubTitle=サブタイトル
label.Sample.Body=本文
label.Sample.URL=URL
label.Sample.TabBasic=基本情報
label.Sample.TabDetail=詳細情報
70
label.Url.URL=URL
label.Url.Text=リンクテキスト
label.Url.Target=ターゲット
一行目の fileicon.sample は、リソースタイプの日本語ラベルです。ページの新規作成ダイアログで、
??? fileicon.sample ??? となっていたと思いますが、ここでラベルを設定する事で、日本語の場合のみ、
この問題が解決します。
後は、構造化コンテンツの入力項目の日本語ラベルの定義ですが、入力項目名の指定には、次のルールがあ
ります。まず、必ず、"label."で始まらなければなりません。次に、XSD で指定したデータタイプ名の
単数形の名前を指定します。最後に、XSD で指定した入力項目の名前を指定します。
次に、sample.xsd や url.xsd 等の XSD ファイルを、このファイルを読み込ませるように修正します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:include schemaLocation="opencms://system/modules/jp.zyyx.opencms.sample/schemas/url.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsUrl" minOccurs="0" maxOccurs="5" />
</xsd:sequence>
71
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<resourcebundle name="jp.zyyx.opencms.sample.workplace"/>
<tabs>
<tab element="Date" name="TabBasic" collapse="false" />
<tab element="Body" name="TabDetail" collapse="false" />
</tabs>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
【ソースコード：url.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Urls" type="OpenCmsUrls"/>
<xsd:complexType name="OpenCmsUrls">
<xsd:sequence>
<xsd:element name="Url" type="OpenCmsUrl" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsUrl">
<xsd:sequence>
<xsd:element name="URL" type="OpenCmsString" />
<xsd:element name="Text" type="OpenCmsString" />
<xsd:element name="Target" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="optional"/>
</xsd:complexType>
<xsd:annotation>
72
<xsd:appinfo>
<resourcebundle name="jp.zyyx.opencms.sample.workplace"/>
<layouts>
<layout element="Target" widget="ComboWidget" configuration="_blank|_self|_top"/>
</layouts>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
言語のラベルを変更した場合は、Tomcat の再起動か、ワークプレースの初期化を行う必要があります。
ワークプレースの初期化は以下の手順で行います。
1.
ツールバーの表示プルダウンを「エクスプローラ」から「管理ツール」に変更。
2.
管理画面で、「ワークプレースツール」をクリック。
3.
「ワークプレースの初期化」をクリックし、
「OK」ボタンをクリック。
Tomcat の再起動、または、ワークプレースの初期化が終わったら、画面を確認してください。
73
74
5-10 デフォルト値の設定
入力項目の初期値を設定するには、以下のように、XSD に<defaults/>で定義します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:include schemaLocation="opencms://system/modules/jp.zyyx.opencms.sample/schemas/url.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsUrl" minOccurs="0" maxOccurs="5" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<resourcebundle name="jp.zyyx.opencms.sample.workplace"/>
<tabs>
<tab element="Date" name="TabBasic" collapse="false" />
<tab element="Body" name="TabDetail" collapse="false" />
</tabs>
75
<defaults>
<default element="Date" value="${currenttime}"/>
<default element="Title" value="（無題）"/>
<default element="SubTitle" value="${key.subtitle.default.value}"/>
</defaults>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
<defaults> ～ </defaults> の中に、<default/>で初期値を定義します。
element 属性に入力項目名を、value 属性にその初期値をセットします。
${currenttime}のようなマクロを指定することも可能です。このマクロは現在時刻を表しています。
マクロを指定するときは、全て、${（マクロ名）}という表記で記述します。
Title の初期値のように、直接文字列を入力する事も出来ますが、これだと、ワークプレースの言語設定をドイツ
語に変えても、日本語の初期値が表示されてしまいます。
このような場合、マクロを使用して、各言語用のプロパティファイルを参照するように指定できます。
プロパティファイルを参照する場合は、${key.(キー名)} という表記で記述します。
日本語ラベルのプロパティファイル（workplace_ja.properties）に以下の行を追加し、
「直接発行」→ワークプレースの初期化 or Tomcat 再起動を行ってください。
【設定ファイル（追加分のみ）
：workplace_ja.properties】
subtitle.default.value=サブタイトルの初期値です。
では、この構造化コンテンツのページを新規作成し、編集画面を確認してください。
（既に作成されているページを開いても意味がありません。
）
76
また、外部の XSD をインクルードしている場合、初期値をセットするのは親の XSD の方になるので注
意してください。子の XSD に初期値の定義を記述しても無効です。
また、子の XSD の初期値をセットする場合は、/ 区切りでその階層も指定する必要があります。
例えば、url.xsd の Text の初期値をセットする場合は、sample.xsd で以下のように定義します。
【ソースコード（一部のみ）：sample.xsd】
<defaults>
<default element="Date" value="${currenttime}"/>
<default element="Title" value="（無題）"/>
<default element="SubTitle" value="${key.subtitle.default.value}"/>
<default element="URL/Text" value="（無題）"/>
</defaults>
77
初期値に
初期値に独自の
独自のクラスを
クラスを指定する
指定する方法
する方法
動的な初期値を指定したい場合、マクロだけでは不十分な事があります。そのような場合は、自前で
作成したクラスを指定すれば、解決します。
初期値にクラスを指定する場合、<default>の value に、"class:（クラス名）"の形式で指定します。
ここに指定するクラスは、jp.zyyx.opencms.xml.content.defaults.I_CmsXmlContentDefault インター
フェースをインプリメントしたクラスでなければなりません。
以下のクラスは、翌日の 17 時の時間を UNIX TIME（単位はミリ秒）形式で返すサンプルです。
【ソースコード：Tomorrow17h.java】
package jp.zyyx.opencms.xml.content.defaults;
import java.util.Calendar;
import java.util.Locale;
import org.opencms.file.CmsObject;
import org.opencms.xml.types.I_CmsXmlContentValue;
public class Tomorrow17h implements I_CmsXmlContentDefault {
public String getDefault(CmsObject cms, I_CmsXmlContentValue value, Locale locale) {
Calendar cal = Calendar.getInstance();
cal.add(Calendar.DATE, 1);
cal.set(Calendar.HOUR_OF_DAY, 17);
cal.set(Calendar.MINUTE, 0);
cal.set(Calendar.SECOND, 0);
cal.set(Calendar.MILLISECOND, 0);
return String.valueOf(cal.getTimeInMillis());
}
public String getDescription() {
return "翌日の 17 時の時刻を UNIX TIME（単位はミリ秒）で返す。";
}
78
public String getLabel() {
return "翌日 17 時";
}
}
getDefault()メソッドが返す値が初期値として使われます。これを日付を入力するウィジェットで使用すると、ペ
ージを作成した時点の翌日の 17 時が初期値にセットされるようになります。
XSD で、Tomorrow17h クラスを指定する場合は、以下のようになります。
【ソースコード（一部のみ）：sample.xsd】
<defaults>
<default element="Date" value="class:Tomorrow17h"/>
<default element="Title" value="（無題）"/>
<default element="SubTitle" value="${key.subtitle.default.value}"/>
</defaults>
※ パッケージ名を省略すると、jp.zyyx.opencms.xml.content.defaults パッケージのクラスとみな
されます。
79
クラスに
クラスにパラメータを
パラメータを渡す場合
Tomorrow17h クラスに XSD からパラメータを渡したい場合は、クラス名の後にカンマを入れて、文
字列を指定します。
【ソースコード（一部のみ）：sample.xsd】
<defaults>
<default element="Date" value="class:Tomorrow17h, debug=true"/>
<default element="Title" value="（無題）"/>
<default element="SubTitle" value="${key.subtitle.default.value}"/>
</defaults>
指定したパラメータは、getDefault()メソッド内で "CMS_DEFAULT_ARGS" をキーに cms オブジェクトか
ら取得できます。
【ソースコード（一部のみ）：Tomorrow17h.java】
public String getDefault(CmsObject cms, I_CmsXmlContentValue value, Locale locale) {
String args = (String) cms.getRequestContext().getAttribute("CMS_DEFAULT_ARGS");
・・・（省略）・・・
}
80
5-11 プロパティへのマッピング
各ページには、さまざまなプロパティを設定する事ができます。
プロパティは、コンテクストメニューから「プロパティ」を選択すると設定画面が開きます。
また、コンテクストメニューから、
「拡張」→「公開期間の設定」と選択すると、
ページの公開日と公開期限を設定できます。
81
Title プロパティは、エクスプローラビューのファイル名の横に表示されます。
content-encoding プロパティは、ページの文字コードに影響します。
公開期間は、そのページの表示期間をあらわします。
このように、それぞれ重要な意味を持っているものがありますが、いちいち別の画面で設定するのが面
倒で、構造化コンテンツの編集画面で入力した内容を、自動的に、それぞれのプロパティにもセットさ
れるように関連付けを行う事ができます。
関連付けを行う場合は、XSD を以下のように修正します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
82
<mappings>
<mapping element="Date" mapto="attribute:datereleased" />
<mapping element="Title" mapto="property:Title" />
<mapping element="Title" mapto="property:Description" />
</mappings>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
<mappings> ～ </mappings> の中に、<mapping/>で定義を記述します。
<mapping/>の element 属性に入力項目の名前を指定し、mapto 属性にマッピング先を指定します。
マッピング先に公開日をセットする場合は、”attribute:datereleased” と記述します。
上記の例だと、Date に入力された日付が、保存時に、そのリソースの公開日にセットされます。
公開期限の場合は、”attribute:dateexpired”と記述します。
マッピング先にプロパティをセットする場合は、”property:(プロパティ名)” で記述します。
上記の例だと、Title に入力された文字を、Title プロパティと Description にマッピングします。
尚、この機能は、構造化コンテンツ→プロパティ or 公開期間への一方通行です。
つまり、構造化コンテンツの編集画面から入力すると、各プロパティや公開期間にセットされますが、
プロパティ編集画面でプロパティ値を変更したり、公開期間を変更しても、構造化コンテンツの入力値
は変更されませんので注意してください。
83
5-12 入力内容のチェック（バリデーション）の設定
XSD に、正規表現によるバリデーションを定義する事ができます。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<resourcebundle name="jp.zyyx.opencms.sample.workplace"/>
<validationrules>
<rule element="Title" regex=".+"
message="タイトルが入力されていません。" />
<rule element="SubTitle" regex=".+" type="warning"
message="サブタイトルが入力されていません。" />
<rule element="Date" regex=".+" type="error"
84
message="${key.validate.date.blank}" />
</validationrules>
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
<validationrules> ～ </validationrules>
の間に、<rule/> で定義していきます。
<rule/>の element に、入力チェックを行う
項目の名前を指定します。
regex に正規表現を記述します。記述した
正規表現に該当しない場合、エラーまたは
警告となります。
type には、”error”または”warning”を指
定します。”warning”を指定した場合は、
警告するだけで、保存はできます
が、”error”を指定した場合は、入力内容
を修正しないと保存できません。
message には、エラー、または警告時の
メッセージを入力します。直接文字列を
入力する事も出来ますが、それだと、ワー
クプレースの言語設定をドイツ語に変えて
も、日本語のメッセージが表示されてしま
います。このような場合、マクロを使用して、各言語用のプロパティファイルを参照するように指定できます。プ
ロパティファイルを参照する場合は、${key.(キー名)} という表記で記述します。
日本語ラベルのプロパティファイル（workplace_ja.properties）に以下の行を追加し、
「直接発行」→「ワークプレースの初期化 or Tomcat 再起動」を行ってください。
尚、一つのエレメント
は、一つだけです
つのエレメント（
エレメント（入力項目）
力項目）に定義できる
定義できる<rule/>は
できる
だけです。
です。
【設定ファイル（追加分のみ）
：workplace_ja.properties】
validate.date.blank=公開日が入力されていません。
85
先ほどの正規表現を利用したバリデーションでは、データベースにアクセスしたり、複数の入力項目
間で関連するチェックが出来ないなど、色々と制限があります。そういったバリデーションを行いたい
場合は、バリデーション用のクラスを作成し、保存の前に、それを読み込ませるようにします。
バリデーション用のクラスファイルのパッケージ名は決まっており、クラス名は、XSD のデータタイ
プ名と同じにします。パッケージ名は、jp.zyyx.opencms.xml.validator で、今回の場合、クラス名は、
OpenCmsSample となります。
このクラスファイルを作成し、サーバー上の WEB-INF/classes/以下にアップすれば完了で、XSD の
修正は不要です。（class ファイルをアップした後は、Tomcat の再起動が必要です。）
では、ソースファイルを見てみましょう。どのようなリソースタイプのバリデーションを実装する場合
でも、以下のソースの赤字以外の部分は変更の必要は無いので、このまま流用しても問題ありません。
【ソースコード：OpenCmsSample.java】
package jp.zyyx.opencms.xml.validator;
import java.util.List;
import java.util.ResourceBundle;
import org.opencms.file.CmsFile;
import org.opencms.file.CmsObject;
import org.opencms.xml.CmsXmlContentDefinition;
import org.opencms.xml.content.CmsXmlContentErrorHandler;
import org.opencms.xml.types.I_CmsXmlContentValue;
public class OpenCmsSample {
/**
* バリデーション.
* @param cms CmsObject
* @param definition XSD情報
* @param file 処理対象リソース
* @param errors エラーハンドラ
* @param contentValues widget情報
*/
public static void validate(
86
CmsObject cms,
CmsXmlContentDefinition definition,
CmsFile file, CmsXmlContentErrorHandler errors,
List<I_CmsXmlContentValue> contentValues) {
ResourceBundle messages = definition.getContentHandler().getMessages(
cms.getRequestContext().getLocale()).getResourceBundle();
for (I_CmsXmlContentValue value : contentValues) {
if (!value.isSimpleType()) {
continue;
}
if(value.getPath().equals("Title[1]")) {
String title = value.getStringValue(cms);
if(title == null || title.trim().length() == 0) {
errors.addError(value, "タイトルが入力されていません。");
}
} else if(value.getPath().equals("SubTitle[1]")) {
String subTitle = value.getStringValue(cms);
if(subTitle == null || subTitle.trim().length() == 0) {
errors.addWarning(value,"サブタイトルが入力されていません。");
}
} else if(value.getPath().equals("Date[1]")) {
String date = value.getStringValue(cms);
if(date == null || date.trim().length() == 0 || date.equals("0")){
errors.addError(value,
messages.getString("validate.date.blank"));
}
}
}
}
}
87
contentValues は、I_CmsXmlContentValue オブジェクトの List になっています。
I_CmsXmlContentValue オブジェクトが各入力項目の情報です。
ソースでは、I_CmsXmlContentValue オブジェクトを value という変数に格納していますが、
value.getPath()で各入力項目名をフルパスで取得できます。
可変長の入力項目を意識して、全て配列の形式の名前（xxx[1]）が返ってきます。
value.getName()であれば、パスの情報を含まず、名前だけが返ってきます。
シンプルな構造の入力項目であれば value.getName()で十分です。
value.getStringValue(cms)で、その入力項目の入力データを取り出すことができます。
エラーがあった場合、errors.addError()メソッド、または、errors.addWarning()メソッドで
エラーメッセージをセットしていきます。エラーの場合は、errors.addError()、警告の場合は、
errors.addWarning() を使用します。各言語用のプロパティファイルを参照する場合は、
messages.getString("validate.date.blank")でメッセージを取得できます。
以下は、I_CmsXmlContentValue クラスの代表的なメソッドです。
メソッド名
説明
例
getName()
エレメント名を取得します。
タイトル
本文
URL
getPath()
パスを取得します。
タイトル[1]
本文[1]
URL[2]
タイトルです。
これはサンプルデータです。
http://www.zyyx.jp/
タグなどの装飾情報を除いた
getPlainText(cms)
入力値を取得します。
入力されている値をそのまま取
これは<b>サンプル</b>
タイトルです。
getStringValue(cms)
得します。
getTypeName()
データタイプを取得します。
http://www.zyyx.jp/
データです。<br/>
OpenCmsString
OpenCmsHtml
OpenCmsString
Sample
Sample
Sample
Samples
Samples
Samples
getContentDefinition() コンテンツの定義名（単数形）を
.getInnerName()
取得します。
getContentDefinition() コンテンツの定義名（複数形）を
.getOuterName()
取得します。
88
XSD で定義された minOccurs の
getMinOccurs()
値です。
XSD で定義された maxOccurs
getMaxOccurs()
の値です。
1
1
1
1
1
5
0
0
1
1
1
2
このエレメントの番号です。0 か
getIndex()
ら始まります。
このエレメントに入力された個
getMaxIndex()
数です。(value.getMaxIndex()
<= maxOccurs)
89
5-13 プレビューボタンの設置
入力画面にプレビューボタンを設置する事ができます。
これにより、保存する前に、プレビューで確認する事ができるようになります。
プレビューボタンを表示するには、XSD を以下のように修正します。
【ソースコード：sample.xsd】
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:element name="Samples" type="OpenCmsSamples"/>
<xsd:complexType name="OpenCmsSamples">
<xsd:sequence>
<xsd:element name="Sample" type="OpenCmsSample" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
</xsd:complexType>
<xsd:complexType name="OpenCmsSample">
<xsd:sequence>
<xsd:element name="Date" type="OpenCmsDateTime" />
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="SubTitle" type="OpenCmsString" />
<xsd:element name="Body" type="OpenCmsHtml" />
<xsd:element name="URL" type="OpenCmsString" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
<xsd:annotation>
<xsd:appinfo>
<preview uri="${previewtempfile}" />
</xsd:appinfo>
</xsd:annotation>
</xsd:schema>
90
以下のように、右上に虫眼鏡のアイコンが表示され、クリックすると別ウインドウでプレビューが表示
されます。
また、以下のようにすれば、プレビュー時の URL を操作し、独自にカスタマイズした JSP で表示させ
る事もできます。
【ソースコード（一部のみ）：sample.xsd】
<xsd:annotation>
<xsd:appinfo>
<preview uri="/system/modules/......../prev.jsp?resource=${previewtempfile}" />
</xsd:appinfo>
</xsd:annotation>
91
5-14 複数の構造化コンテンツの一覧を表示する
特定のフォルダの下にある構造化コンテンツの一覧を取得して表示する場合は、<cms:contentload/>の
collector の指定を singleFile から zx.allInFolder に変更します。そして、param にパスと最大表示件
数を指定します。
【ソースコード：sample5_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<cms:contentload collector="zx.allInFolder" param="/news/|sample|10" editable="false">
<div>Date:<cms:contentshow element="Date" /></div>
<div>Title:<cms:contentshow element="Title" /></div>
<div>SubTitle:<cms:contentshow element="SubTitle" /></div>
<div>Body:<cms:contentshow element="Body" /></div>
<cms:contentloop element="URL">
<a href="<cms:contentshow element="URL"/>" target="<cms:contentshow element="Target"/>">
<cms:contentshow element="Text"/>
</a><br/>
</cms:contentloop>
<hr/>
</cms:contentload>
</body>
</html>
collector に zx.allInFolder を指定すると、特定のフォルダの直下のファイルをパスの昇順で取得します。
collector に指定する値次第で、取得されるリソースと、ソート順が決まります。そして、最大表示件数
などの詳細なパラメータを param で指定します。
92
collector に指定できる値は、以下のものがあります。
詳しくは、
「OpenCms タグリファレンス」を参照して下さい。
zx.singleFile
単一のファイルの情報を取得します。
zx.allInFolder
特定のフォルダの直下のファイルをパスの昇順で取得します。
zx.allInFolderDesc
特定のフォルダの直下のファイルをパスの降順で取得します。
zx.allInFolderDateReleased
特定のフォルダの直下のファイルを公開日の昇順で取得します。
公開日が未設定のファイルは最終更新日でソートされます。
zx.allInFolderDateReleasedDesc
特定のフォルダの直下のファイルを公開日の降順で取得します。
公開日が未設定のファイルは最終更新日でソートされます。
zx.allInFolderNavPos
特定のフォルダの直下のファイルを NavPos プロパティ値の昇順で取
得します。但し、NavPos が未設定のファイルが一つでもあると、
zx.allInFolderDateReleased と同様の動作になります。
zx.allInFolderNavPosDesc
特定のフォルダの直下のファイルを NavPos プロパティ値の降順で取
得します。但し、NavPos が未設定のファイルが一つでもあると、
zx.allInFolderDateReleasedDesc と同様の動作になります。
zx.allInFolderDateLastModified
特定のフォルダの直下のファイルを最終更新日の昇順で取得します。
zx.allInFolderDateLastModifiedDesc
特定のフォルダの直下のファイルを最終更新日の降順で取得します。
zx.allInSubTree
特定のフォルダ内のファイルをパスの昇順で取得します。
サブフォルダも再帰的に検索します。
zx.allInSubTreeDesc
特定のフォルダ内のファイルをパスの降順で取得します。
サブフォルダも再帰的に検索します。
zx.allInSubTreeDateReleased
特定のフォルダ内のファイルを公開日の昇順で取得します。
公開日が未設定のファイルは最終更新日でソートされます。
サブフォルダも再帰的に検索します。
zx.allInSubTreeDateReleasedDesc
特定のフォルダ内のファイルを公開日の降順で取得します。
公開日が未設定のファイルは最終更新日でソートされます。
サブフォルダも再帰的に検索します。
zx.allInSubTreeNavPos
特定のフォルダ内のファイルを NavPos プロパティ値の昇順で取得し
ます。但し、 NavPos が未設定のファイルが一つでもあると、
zx.allInSubTreeDateReleased と同様の動作になります。
サブフォルダも再帰的に検索します。
zx.allInSubTreeNavPosDesc
特定のフォルダ内のファイルを NavPos プロパティ値の降順で取得し
ます。但し、 NavPos が未設定のファイルが一つでもあると、
zx.allInSubTreeDateReleasedDesc と同様の動作になります。
サブフォルダも再帰的に検索します。
93
zx.allInSubTreeDateLastModified
特定のフォルダの直下のファイルを最終更新日の昇順で取得しま
す。サブフォルダも再帰的に検索します。
zx.allInSubTreeDateLastModifiedDesc
特定のフォルダの直下のファイルを最終更新日の降順で取得しま
す。サブフォルダも再帰的に検索します。
zx.allInFolderPriorityDateAsc
特定のフォルダの直下のファイルを collector.priority プロパティ値
の昇順で取得します。collector.priority プロパティ値が同じであれ
ば、collector.date プロパティ値を第 2 ソートキーとして使用します。
zx.allInFolderPriorityDateDesc
特定のフォルダの直下のファイルを collector.priority プロパティ値
の降順で取得します。collector.priority プロパティ値が同じであれ
ば、collector.date プロパティ値を第 2 ソートキーとして使用します。
zx.allInSubTreePriorityDateDesc
特定のフォルダ内のファイルを collector.priority プロパティ値の降
順で取得します。collector.priority プロパティ値が同じであれば、
collector.date プロパティ値を第 2 ソートキーとして使用します。
サブフォルダも再帰的に検索します。
zx.allInFolderPriorityTitleDesc
特定のフォルダの直下のファイルを collector.priority プロパティ値
の降順で取得します。collector.priority プロパティ値が同じであれ
ば、Title プロパティ値を第 2 ソートキーとして使用します。
zx.allInSubTreePriorityTitleDesc
特定のフォルダ内のファイルを collector.priority プロパティ値の降
順で取得します。collector.priority プロパティ値が同じであれば、
Title プロパティ値を第 2 ソートキーとして使用します。
サブフォルダも再帰的に検索します。
collector が未設定の場合、zx.allInFolderDateReleased が指定されたものとみなします。
94
次に、param には、読み込むフォルダのパスと、リソースタイプと、最大表示件数を指定します。
param では、パラメータが複数の場合、| で区切る事になっていますので以下のようにします。
【使用例】

<cms:contentload collector="zx.allInFolderDateReleasedDesc" param="/news/|sample|10" >
… （省略） …
</cms:contentload>
表示件数に 0 を指定すると、無制限になります。
リソースタイプには、構造化コンテンツのリソースタイプしか指定できません。
また、editable を true にした場合、直接編集ボタン、削除ボタン、新規ボタンが表示されるようにな
ります。その時、プレビューから新規ボタンをクリックして自動的に新しいページを生成できるように
なるのですが、ファイル名に、連番用マクロの%(number)を指定していれば、自動的にファイル名が決
定され、ページが生成されます。
【使用例】
<cms:contentload collector="zx.allInFolderDateReleasedDesc" editable="true"
param="/news/news%(number).html|sample|10" >
… （省略） …
</cms:contentload>
この場合、新規作成するたびに、/news の直下に news0000.html、news0001.html、news0002.html ・・・
と自動的にファイル名が割り振られます。
パスやリソースタイプは、カンマ区切りで複数指定する事が可能です。
また、最大表示件数の次に | で区切って、さまざまな関数を指定できます。
詳しくは、
「OpenCms タグリファレンス」を参照して下さい。
95
6
その他
その他
6-1 HTML エディタのスタイルシートの指定
フリーテキストページで使用される HTML エディタは、そのままではスタイルシートが適用されま
せん。その為、ページのプレビューを見るまでは、レイアウトが崩れたままであったり、表示色が違っ
てしまう為、編集作業に支障をきたす場合があります。
HTML エディタにスタイルシートを適用する場合は、テンプレートの template プロパティにスタイ
ルシートのパスを指定します。
サイトのスタイルシートを指定しても、余計な CSS 定義が含まれているため、上手くいかないケー
スが多いと思います。大抵は、HTML エディタ専用に、別途、スタイルシートを用意する事になります。
96
6-2 直接編集領域に日本語のラベルをつける
直接編集領域を作成すると、element で指定した文字が、HTML エディタのエレメントプルダウンに
表示され、HTML エディタ上で編集領域を切り替える事が出来ます。
【ソースコード：sample6_1.jsp】
<%@ taglib prefix="cms" uri="http://www.zyyx.jp/taglib/cms" %>
<html>
<head><cms:editable/></head>
<body>
<div>編集領域１</div>
<div><cms:include element="body1" editable="true" /></div>
<div>編集領域２</div>
<div><cms:include element="body2" editable="true" /></div>
</body>
</html>
element 属性には半角英数しか使用できませんが、日本語のラベルを適用したい場合は、
template-elements 属性にラベルを指定します。指定する時のフォーマットは、以下の通りです。
(element 名)|(日本語ラベル), (element 名)|(日本語ラベル), …
※ element 名とラベルを | でつなぎ、カンマ区切りで列挙していきます。
97
6-3 文字コードの指定
表示される HTML の文字コードは、デフォルトで UTF-8 です。これを、別の文字コードにしたい場
合は、そのページの content-encoding プロパティに文字コードを指定します。
※ プロパティにセットするのは、テンプレートの JSP ファイルではなく、html ファイルのプロパティ
なので注意してください。
また、html ページの content-encoding プロパティにセットすると、そのページの文字コードのみが
変更されますが、フォルダの content-encoding プロパティにセットすると、そのフォルダの中のページ
全てに対して適用されます。
html ページだけでなく、CSS や JavaScript、txt、xml といった、テキストデータであれば、同様の
方法で文字コードを指定できます。
注意点として、テキストファイルを OpenCms へアップロードする場合ですが、新規のときは UTF-8
ととして解釈されます。アップロードで新規作成されるとき、content-encoding プロパティには何もセ
ットされませんので、デフォルトの UTF-8 が適用され、文字化けとなります。
この場合は、アップロード後、手動で content-encoding プロパティに文字コードをセットするか、あ
らかじめ、そのフォルダの content-encoding プロパティに文字コードをセットしておく必要があります。
運用上の混乱を避ける為にも、サイト単位で文字コードは統一しておく事をお勧めします。
98

Download Report