一覧表・単票のソースデザイン
最終更新日:2024年02月29日
概要
SPIRAL ver.1の一覧表設定画面および検索フォーム設定画面にて、ソースデザインを選択した場合、XSLファイルを編集して、ブラウザでの一覧表や検索フォームの表示を変更することができます。
当ページではXML、XSLの簡単な説明およびXSLのサンプルについてご案内いたします。
尚、HTMLについての知識があることを前提としています。
1.XMLとは
文や単語にマーク(印)をつけることで、コンピュータが書類に書かれている文や単語の意味を解釈できるようにした「マークアップ言語」です。
「<」「>」で囲まれた要素を使うことや、各要素に属性をつけて記述する形式は、HTMLとほぼ同じです。
XMLとHTMLの違い
(1)HTML
<p>メモ</p><p>本文</p>
HTMLには構造を表すタグしかないので、コンピュータから見ると「メモ」と「本文」の違いが分かりません。
(2)XML
<memo-heading>メモ</memo-heading><memo-text>本文</memo-text>
XMLは情報の意味を表すタグを自分で作って使えるので、コンピュータから見ると情報の意味が分かります。
XMLの用途
前述のとおり、コンピュータがXMLを読むと情報の意味が分かるので、条件を指定して情報を抜き出すことが可能です。
抜き出した情報を元に、元の書類とは見た目が異なる書類に変更したり、他のコンピュータに渡すことができます。
XMLの記述形式
HTMLと同じように、要素の開始タグ、属性、属性の値、文字列、要素の終了タグで構成されています。
また、要素に属する子要素を設定することができます。 例)<hour meridiem=”am” semidiurnal=”12″>00</hour>
XMLタグ
「一覧表・単票のXMLタグ」を参照ください。
スパイラルの場合
一覧表および検索フォームで使用しているXMLファイルを操作画面から見ることができます。
このXMLファイルの要素や属性の構造および名称を参考にして、XSLファイルを編集します。
一覧表設定画面または検索フォーム設定画面にて、「ソースデザイン」を選択後、「サンプルXML」ボタンを押してください。
(一覧表設定画面)
(検索フォーム設定画面)
※XMLファイルは編集できません。
※スパイラルの一覧表で設定しているXMLの構造についての説明は「スパイラルの一覧表で設定しているXML」をご覧ください。
2.XSLとは
XMLファイルから「条件を指定して情報を抜き出す」技術を担っているのが、XSLです。 XMLとXSLはセットで使うことが多いです。
XSLの構成
XSLは基本的に3つの部分から構成されています。
- 固定で書く部分
- 条件と処理を書く部分
- 条件で変化しない固定のHTML部分
固定で書く部分
一覧表および検索フォームでは、以下の部分は固定です。編集削除しないでください。 特に、<xsl:template match="
xxx"
>と記述されている部分は、システム固定のXML要素を指していますので、このままお使いください。
(1)一覧表
<?xml version="1.0" encoding="EUC-JP"?>
<xsl:stylesheet version="1.0" xmlns:xsl=">
<xsl:output method="html" />
<xsl:template match="/">
<xsl:apply-templates select="table" />
</xsl:template>
(中略)
<xsl:template match="/table">
<script type="text/javascript" src="{@jsPath}" charset="{@jsEncode}"></script>
<form method="post" action="{@action}">
$hidden:table:extension$
(中略)
</form>
</xsl:template>
</xsl:stylesheet>
(2)検索フォーム
<?xml version="1.0" encoding="EUC-JP" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/searchForm">
(中略)
<form method="get">
<xsl:if test="/searchForm/@action">
<xsl:attribute name="action">
<xsl:value-of select="/searchForm/@action" />
</xsl:attribute>
</xsl:if>
<-- hidden -->
$hidden:sf:extension$
(中略)
name="smp_sf_button_99999"
(中略)
</form>
</xsl:template>
</xsl:stylesheet>
name="
smp_sf_button_99999"
→一覧表作成時にシステムが自動で割り振ったIDがスパイラルへ送信されることで検索が機能しますので、「name="
smp_sf_button_99999"
」がパラメータとして送信されるよう設定してください。
条件と処理を書く部分
簡単な条件式と処理を書くことができます。条件により、ブラウザでの表示を切り替えることができます。
例)一覧表の表示件数のプルダウンで、指定されている表示件数を選択済(HTMLのselected)にする場合
<select name="_limit_9999">
<option value="10">
<xsl:if test="$limit = '10'">
<xsl:attribute name="selected">selected</xsl:attribute>
</xsl:if>
10件
</option>
</select>
条件で変化しない固定のHTML部分
XSLファイル内にHTMLの要素、属性、属性値、文字列を記述することができます。 例) <option value="
10"
>10件</option>
3.XPathとは
XSLファイルからXMLファイルにアクセスして情報を抜き出すため、「/」「@」などを使い、要素、子要素の階層を辿っていったり、属性を指定します。
その指定する技術を担っているのが、XPathです。 ブラウザでWebページにアクセスする場合に「/」を用い、「document/201610/index.html」など、目的のページまで階層を辿っていくのと似ています。
基本的な使い方
例)XMLファイルに次のような定義があるとします。 <要素A> <要素B 属性C="
属性値D"
>文字列</要素B> </要素A>
XPathは以下の通り記述します。
記述方法 | 意味 |
---|---|
/ | 全ての要素を指定 |
要素A | 要素A(<要素A>から</要素A>)を指定 |
要素A/要素B | 要素Aの子要素B(<要素B></要素B>)を指定 |
要素A/ 要素B/@属性C | 要素Aの子要素Bの属性Cを指定 |
//@属性C | 親要素は関係なく、属性Cを指定 |
要素A/要素B/* | 要素Aの子要素Bに属する全ての要素を指定 |
*[@属性C] | 属性Cを持つ全ての要素を指定 |
要素A[1] | 最初の要素Aを指定 |
要素A/要素B[position()=1] | 要素Aの最初の子要素Bを指定 |
要素B[@属性C =" 属性値D" ] |
属性Cの値が属性値Dではない要素Bを指定 |
要素A[要素B=" 文字列" ] |
値が文字列である要素Bを持つ要素Aを指定 |
スパイラルの場合
一覧表および検索フォームで使用するXMLファイルにおいて、検索方法(例.AND検索、OR検索)や抜き出せる情報の形式は、基本的にフィールドの差し替えキーワードが要素名の元になっています。
例)差し替えキーワードがemailの場合、要素名はusr_email
そのため、スパイラルに設定するXSLファイルでは、「usr_差し替えキーワード」「usr_差し替えキーワード/子要素」「usr_差し替えキーワード/子要素/@属性」というXPathをよく使います。
4.XSLの使い方
XSLの記述方法をご案内いたします。 ここで、前述のXPathを使います。
(1) テンプレート
XSLでは、情報を抜き出し処理をしたい数だけ「テンプレート」を作成します。 「テンプレート」の中に、どこから情報を抜き出すのか、どういう処理をするのかを記述します。 一覧表作成直後のXSLファイルにも、<xsl:template></xsl:template>の組み合わせが複数個記述されていることがご確認いただけます。
テンプレートの作成方法は2通りあります。
① XMLファイル内の要素や属性を指定する。
XPathで指定した対象に対する処理を定義する。
<xsl:template match="Xpath">処理</xsl:template>
テンプレートを実行する。
<xsl:apply-templates select="Xpath" />
② テンプレートに名称をつけ、後で呼び出す。
テンプレートに名称をつけ、処理を定義する。
<xsl:template name="テンプレート名">処理</xsl:template>
テンプレートを実行する。
<xsl:call-template name="テンプレート名">処理</xsl:call-template>
(2) 条件や処理内容
テンプレート内で、情報を抜き出す条件や処理を記述する方法をご案内します。
① 変数を作成する
<xsl:variable name="変数名">変数の値</xsl:variable>
「$変数名」として使います。 例)<xsl:variable name=”flg”>1</xsl:variable> の場合、「$flg」
② 引数を作成する
<xsl:param name="引数名" />
「$引数名」として使います。 例)<xsl:param name=”value” />の場合、「$value」
③ 引数を渡す
既存のテンプレートを実行する<xsl:call-template>の中で、<xsl:with-param>を使って、テンプレートに引数を渡します。
<xsl:with-param name="引数名" select="'引数の値'" />
例)「テキスト」と表示する場合
テンプレートを作成
<xsl:template name="sample">
<xsl:param name="value" />
<xsl:text>$value</xsl:text>
</xsl:template>
テンプレートを実行
<xsl:call-template name="sample">
<xsl:with-param name="value" select="'テキスト'" />
</xsl:call-template>
④ 条件式「もし・・・の場合」
<xsl:if test = “条件式”>処理</xsl:if>
例)属性selectedの値がtの場合、HTMLの要素に属性「checked」を追加する場合
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
⑤ 固定で書いたHTML要素に属性を追加する
<xsl:attribute name = “属性名”>属性の値</xsl:attribute>
例)HTMLのdiv要素にclass=”sample”を追加する場合
<div>
<xsl:attribute name = “class”>sample</xsl:attribute>
</div>
HTML
<div class=”sample”>
</div>
⑥ XMLファイル内の要素の値や属性の値を抜き出す
<xsl:value-of select = “XPath” />
例)時刻(時分)型フィールドの値を取得する場合
サンプルXML
<usr_openTime timezone_digit="+0900" timezone_name="JST">
<full_text>00時00分</full_text>
<hour meridiem="am" semidiurnal="12">00</hour>
<minute>00</minute>
</usr_openTime>
XSL
<xsl:value-of select = “usr_openTime/full_text” />
ブラウザでの表示
00時00分
⑦ 処理を繰り返し実行する
<xsl:for-each select = “XPath”>処理</xsl:for-each>
⑧ いくつかの条件の中で1つに合致した場合、処理を実行する
<xsl:choose>
<xsl:when test = “条件式”>処理</xsl:when>
<xsl:when test = “条件式”>処理</xsl:when>
<xsl:when test = “条件式”>処理</xsl:when>
<xsl:otherwise>処理</xsl:otherwise>
</xsl:choose>
⑨ 文字列を表示する
<xsl:text>文字列</xsl:text>
5.XSLのサンプル
- 検索フォームで、選択項目のチェックボックスをプルダウンに変更
- 検索フォームで、選択した地方に属する都道府県を自動で選択
- 一覧表で、tableタグを使わないで表示
- 一覧表で、特定の値の行のみ表示を変更
- 一覧表で、画像型フィールドに登録した画像のオリジナル画像を表示
- 一覧表で、マルチセレクトのデータをカンマ区切りではなく改行で表示
- 一覧表で、固定文字列を設けて単票へリンクさせる
6.用語説明
一覧表、検索フォーム | スパイラルのWebパーツの「一覧表・単票」を構成している一覧表および検索フォームのことです。一覧表・単票については、一覧表・単票 をご覧ください。 |
ソースデザイン | 一覧表および検索フォーム設定画面にて、表示するフィールドやデザインを設定する機能の一つです。 |
XSLファイル | 一覧表および検索フォーム設定画面にて、ソースデザインを選択した場合、設定するXSLのことです。 |
サンプルXML | 一覧表および検索フォーム設定画面にて、使用するXMLファイルのことです。 XSLファイルを設定する時、XMLの構造などを参考にするために使います。 |