ver.1サポートサイト

一覧表・単票のソースデザイン

最終更新日:2024年02月29日

概要

SPIRAL ver.1の一覧表設定画面および検索フォーム設定画面にて、ソースデザインを選択した場合、XSLファイルを編集して、ブラウザでの一覧表や検索フォームの表示を変更することができます。

当ページではXML、XSLの簡単な説明およびXSLのサンプルについてご案内いたします。
尚、HTMLについての知識があることを前提としています。

1.XMLとは

文や単語にマーク（印）をつけることで、コンピュータが書類に書かれている文や単語の意味を解釈できるようにした「マークアップ言語」です。
「<」「>」で囲まれた要素を使うことや、各要素に属性をつけて記述する形式は、HTMLとほぼ同じです。

XMLとHTMLの違い

（１）HTML

<p>メモ</p><p>本文</p>

HTMLには構造を表すタグしかないので、コンピュータから見ると「メモ」と「本文」の違いが分かりません。

（２）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つの部分から構成されています。

1. 固定で書く部分
2. 条件と処理を書く部分
3. 条件で変化しない固定のHTML部分

固定で書く部分

一覧表および検索フォームでは、以下の部分は固定です。編集削除しないでください。 特に、<xsl:template match="xxx">と記述されている部分は、システム固定のXML要素を指していますので、このままお使いください。

（１）一覧表

<?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>

（２）検索フォーム

<?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は以下の通り記述します。

スパイラルの場合

一覧表および検索フォームで使用する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のサンプル

1. 検索フォームで、選択項目のチェックボックスをプルダウンに変更
2. 検索フォームで、選択した地方に属する都道府県を自動で選択
3. 一覧表で、tableタグを使わないで表示
4. 一覧表で、特定の値の行のみ表示を変更
5. 一覧表で、画像型フィールドに登録した画像のオリジナル画像を表示
6. 一覧表で、マルチセレクトのデータをカンマ区切りではなく改行で表示
7. 一覧表で、固定文字列を設けて単票へリンクさせる

6.用語説明