ver.1サポートサイト


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

最終更新日: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つの部分から構成されています。

  1. 固定で書く部分
  2. 条件と処理を書く部分
  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のサンプル

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

 

6.用語説明

一覧表、検索フォーム スパイラルのWebパーツの「一覧表・単票」を構成している一覧表および検索フォームのことです。一覧表・単票については、一覧表・単票 をご覧ください。
ソースデザイン 一覧表および検索フォーム設定画面にて、表示するフィールドやデザインを設定する機能の一つです。
XSLファイル 一覧表および検索フォーム設定画面にて、ソースデザインを選択した場合、設定するXSLのことです。
サンプルXML 一覧表および検索フォーム設定画面にて、使用するXMLファイルのことです。 XSLファイルを設定する時、XMLの構造などを参考にするために使います。