| KAZUSOFT
NetNewsログのXML化 FAQ集を作る XMLの変換(HTML化) KELFをXMLエディタ風に KazusoftのHPを素材に (番外)このハウツーの作成 |
| W3C仕様関係各種の情報XSLTプロセッサ |
この例ではXMLへのエクスポートのカスタマイズを取り上げます。
素材としてKELFのFAQ集を書くことにします。
作成するFAQ集は次のような構造を持つものとします。
＜インストール時＞
質問と回答１
質問と回答２
＜起動時＞
質問と回答１
質問と回答２
質問と回答３
＜文法＞
質問と回答１
質問と回答２
・
・
・
2. 文法を作る
素材としてKELFのFAQ集を書くことにします。
作成するFAQ集は次のような構造を持つものとします。
＜インストール時＞
質問と回答１
質問と回答２
＜起動時＞
質問と回答１
質問と回答２
質問と回答３
＜文法＞
質問と回答１
質問と回答２
・
・
・
まず上の構造に見合った文法をつくらなければなりません。
メインメニュー「ヘルプ」⇒「文法の設定」を開きます。
階層下げやセクション終了行の設定を簡単にするため、「コピー」機能を使い、文法番号１番をそのまま、あいている適当な番号へコピーします。そして「文法名」として「FAQ用」とでも名づけ、コメントとして「FAQ集の作成のため」とでも、記入しておきます。
肝心なのはタイトル行の設定です。
１番をコピーしたので、すでにタイトル行のパターンが入力されていますが、これをすべて削除します。そしてタイトル行として、次のふたつのパターンを入力します。
^＜.+＞$
^Q\.
２番目のパターンは、FAQの各項目になるセクションを、
Q. 質問
A. 回答
という構造で書きたいからです。
そして「タイトル行でセクションを区別する」と「タイトル行の種類で階層を区別する」のふたつともチェックしておきます。
これで文法が出来上がりました。
作成した文法を保存します。
./xml/textディレクトリにforfaq.kpsというファイルがあります。作成した文法の文法ファイルです。登録ユーザーの場合は「読み込み」機能が使えます。興味があるときはご利用ください。評価期間中は「読み込み」機能が使えません。上述の手法で文法を作っていただかなければなりません。
3. 文書を書く
メインメニュー「ヘルプ」⇒「文法の設定」を開きます。
階層下げやセクション終了行の設定を簡単にするため、「コピー」機能を使い、文法番号１番をそのまま、あいている適当な番号へコピーします。そして「文法名」として「FAQ用」とでも名づけ、コメントとして「FAQ集の作成のため」とでも、記入しておきます。
肝心なのはタイトル行の設定です。
１番をコピーしたので、すでにタイトル行のパターンが入力されていますが、これをすべて削除します。そしてタイトル行として、次のふたつのパターンを入力します。
^＜.+＞$
^Q\.
２番目のパターンは、FAQの各項目になるセクションを、
Q. 質問
A. 回答
という構造で書きたいからです。
そして「タイトル行でセクションを区別する」と「タイトル行の種類で階層を区別する」のふたつともチェックしておきます。
これで文法が出来上がりました。
作成した文法を保存します。
./xml/textディレクトリにforfaq.kpsというファイルがあります。作成した文法の文法ファイルです。登録ユーザーの場合は「読み込み」機能が使えます。興味があるときはご利用ください。評価期間中は「読み込み」機能が使えません。上述の手法で文法を作っていただかなければなりません。
作成した文法を使い文書を書きます。
筆者の好みでは、こうした場合は、KELFを通常のエディタ風に使って書きなぐり、ある程度たまったら「編集」⇒「文書全体を再解析」コマンドで、セクション構造を構築する。そしてまた書き連ねる・・・という手法が簡便のように感じます。もちろん好みですが。で、できあがったのが、下記のテキストです。
4. エキスポートを実行
筆者の好みでは、こうした場合は、KELFを通常のエディタ風に使って書きなぐり、ある程度たまったら「編集」⇒「文書全体を再解析」コマンドで、セクション構造を構築する。そしてまた書き連ねる・・・という手法が簡便のように感じます。もちろん好みですが。で、できあがったのが、下記のテキストです。
作成した文法でkelffaq.txtを解析したら、「ファイル」⇒「エクスポート」を実行します。
ウィザードが起動し、例によって最初のページ「XMLへのエクスポート」が開きます。
今回はスタイルシートとしてXSLを使ってみましょう。XSL(1999/XSL/Transform)を選択します。これから作り上げるファイルは、あとでHTMLへの変換の素材として使います。XSL(/TR/wd-XSL)では変換がうまくいきませんので、XSL(1999/XSL/Transform)にしてください。
入れ子構造で作成するので、「セクションによる入れ子構造は作らず・・・」のチェックはしません。
この状態のまま、とりあえずデフォルトのまま一度作成し、どんな感じになるか見てみましょう。「最終ページへ飛ぶ」をクリックし、「完了」をクリックします。
kelffaq.xmlとkelffaq.xslが作成されます。
今回はXSL(1999/XSL/Transform)で作成したので、IE5.01以降でないと、ブラウザで直接表示することはできません。（他のブラウザで表示を可能にする方法については後述します。）
IE5.01以降で表示した結果が下図です。画像をクリックすると拡大した画像を表示します。
なんだかごたごたしていますね。
無用のセクション間リンクが表示されています。
タイトル行の色や表題も今ひとつです。
これらを修正してもう少し見栄えよいものにしてみましょう。
5. 文法を修正
ウィザードが起動し、例によって最初のページ「XMLへのエクスポート」が開きます。
今回はスタイルシートとしてXSLを使ってみましょう。XSL(1999/XSL/Transform)を選択します。これから作り上げるファイルは、あとでHTMLへの変換の素材として使います。XSL(/TR/wd-XSL)では変換がうまくいきませんので、XSL(1999/XSL/Transform)にしてください。
入れ子構造で作成するので、「セクションによる入れ子構造は作らず・・・」のチェックはしません。
この状態のまま、とりあえずデフォルトのまま一度作成し、どんな感じになるか見てみましょう。「最終ページへ飛ぶ」をクリックし、「完了」をクリックします。
kelffaq.xmlとkelffaq.xslが作成されます。
今回はXSL(1999/XSL/Transform)で作成したので、IE5.01以降でないと、ブラウザで直接表示することはできません。（他のブラウザで表示を可能にする方法については後述します。）
IE5.01以降で表示した結果が下図です。画像をクリックすると拡大した画像を表示します。
なんだかごたごたしていますね。
無用のセクション間リンクが表示されています。
タイトル行の色や表題も今ひとつです。
これらを修正してもう少し見栄えよいものにしてみましょう。
再度、「文法の設定」ダイアログボックスを開き、「強調単語B」ページを開きます。
既存の強調単語を「全削除」し、次のふたつのパターンを強調単語にします。
（パターン１） ^Q\..+$
Q.xxxx行にマッチするパターンです。
強調表示する部分は０、すなわち全体です。
文字色を濃茶（赤＝64,緑＝青＝0)にしましょう。
ボールド体を指定してもいいです。
（パターン２） ^A\.
回答の冒頭、A.にマッチするパターンです。
強調表示する部分は０、すなわち全体です。
文字色を緑にしましょう。
ボールド体を指定してもいいです。
「強調単語」の設定が終わったら「文法を保存」して終了します。
KELF本体での表示は左のようになります。
6. 基本的な設定を変更
既存の強調単語を「全削除」し、次のふたつのパターンを強調単語にします。
（パターン１） ^Q\..+$
Q.xxxx行にマッチするパターンです。
強調表示する部分は０、すなわち全体です。
文字色を濃茶（赤＝64,緑＝青＝0)にしましょう。
ボールド体を指定してもいいです。
（パターン２） ^A\.
回答の冒頭、A.にマッチするパターンです。
強調表示する部分は０、すなわち全体です。
文字色を緑にしましょう。
ボールド体を指定してもいいです。
「強調単語」の設定が終わったら「文法を保存」して終了します。KELF本体での表示は左のようになります。
再度、エクスポートを実行します。
まず、最初のページで、「文書中の強調単語に文字装飾をつける」がチェックされていることを確認します。
そして今回は最後のページへは飛ばず、「次へ」をクリックします。「基本的な設定」というページが開きます。
ページ上部にある一覧には、セクションを囲むためのデフォルトの要素名がならんでいます。kelffaq.txtの場合、階層は２つしかありませんので、セクションを囲む要素名は２つだけです。
rank0が階層０、すなわち＜ｘｘｘｘｘ＞というセクションに対応します。
rank1が階層１、すなわちQ.xxxxではじまるFAQの各記事本体です。
ページ幅が小さいためすべては表示しきれていませんが、rank0, rank1ともに、Paragraphという項目はTRUE, SectionLinkという項目もTRUEになっているはずです。
Paragraph(段落)は、元の文章の改行を生かすかどうかです。XMLやHTMLは、連続する空白（改行を含む）をまとめて一個の半角スペースにしてしまいます。だからそのままの形で出力すると改行は消えてしまいます。改行を生かしたいときは、段落ごとに要素で包み、それなりの処理をしなければなりません。Paragraph=TRUEという表示は、そういう処理をすることを示しています。
SectionLink=TRUEは、「前へ」「後ろへ」という、各セクションを移動するためのリンク構造を作成表示することを意味します。
今回はこのセクション間リンクは不要ですから、設定を変更します。
一覧で「rank1」を選択状態にします。
ページ右下に「段落・セクション間リンクの扱い」という項目があります。その「セクション間リンク」というチェックボックスが非チェックであることを確認し、横の「変更」ボタンをクリックします。
一覧のSectionLinkがFALSEに変わりました。
でも、あれれ？
ParagraphもFALSE、段落処理をしない設定になっちゃいました。
これは横の「変更」ボタンが、「Paragraph」「SectionLink」をまとめて変更する仕様になっているためです。
「セクション間リンク」を非チェック、「段落をタグで囲む」をチェック状態にして、「変更」ボタンをクリックしてください。これでParagraphはTRUE, SectionLinkはFALSEに設定されました。
次は「rank0」を選択状態にします。
＜ｘｘｘｘｘ＞の部分です。ここの段落処理は不要です。だから「Paragraph」「SectionLink」をともにFALSEにしてしまいましょう。「段落をタグで囲む」「セクション間リンク」をともに非チェックにして「変更ボタン」をクリックします。
7. タイトル行の扱い
まず、最初のページで、「文書中の強調単語に文字装飾をつける」がチェックされていることを確認します。
そして今回は最後のページへは飛ばず、「次へ」をクリックします。「基本的な設定」というページが開きます。
ページ上部にある一覧には、セクションを囲むためのデフォルトの要素名がならんでいます。kelffaq.txtの場合、階層は２つしかありませんので、セクションを囲む要素名は２つだけです。
rank0が階層０、すなわち＜ｘｘｘｘｘ＞というセクションに対応します。
rank1が階層１、すなわちQ.xxxxではじまるFAQの各記事本体です。
ページ幅が小さいためすべては表示しきれていませんが、rank0, rank1ともに、Paragraphという項目はTRUE, SectionLinkという項目もTRUEになっているはずです。
Paragraph(段落)は、元の文章の改行を生かすかどうかです。XMLやHTMLは、連続する空白（改行を含む）をまとめて一個の半角スペースにしてしまいます。だからそのままの形で出力すると改行は消えてしまいます。改行を生かしたいときは、段落ごとに要素で包み、それなりの処理をしなければなりません。Paragraph=TRUEという表示は、そういう処理をすることを示しています。
SectionLink=TRUEは、「前へ」「後ろへ」という、各セクションを移動するためのリンク構造を作成表示することを意味します。
今回はこのセクション間リンクは不要ですから、設定を変更します。
一覧で「rank1」を選択状態にします。ページ右下に「段落・セクション間リンクの扱い」という項目があります。その「セクション間リンク」というチェックボックスが非チェックであることを確認し、横の「変更」ボタンをクリックします。
一覧のSectionLinkがFALSEに変わりました。
でも、あれれ？
ParagraphもFALSE、段落処理をしない設定になっちゃいました。
これは横の「変更」ボタンが、「Paragraph」「SectionLink」をまとめて変更する仕様になっているためです。
「セクション間リンク」を非チェック、「段落をタグで囲む」をチェック状態にして、「変更」ボタンをクリックしてください。これでParagraphはTRUE, SectionLinkはFALSEに設定されました。
次は「rank0」を選択状態にします。
＜ｘｘｘｘｘ＞の部分です。ここの段落処理は不要です。だから「Paragraph」「SectionLink」をともにFALSEにしてしまいましょう。「段落をタグで囲む」「セクション間リンク」をともに非チェックにして「変更ボタン」をクリックします。
同じ「基本的な設定」ページで、もうひとつ、タイトル行の扱いを変更しましょう。
一覧で、Title Rowという項目を見ると、
Elm/R
と表示されています。これはタイトル行を、セクション要素(rankX)の下部要素とし、本文から除外することを意味します。（KELFのヘルプ参照）。
デフォルトでは、すべてのタイトル行は本文から除外し、別にフォントを大きくしてセクションの先頭の表示するようになっています。
＜ｘｘｘｘ＞すなわちrank0のセクションはこのデフォルトをそのまま生かします。
Q.xxxxのセクションは、KELF本体で行った強調表示を生かすため、タイトル行を特別扱いしない設定にしましょう。タイトル行として特別扱いすると、強調表示が反映されません。
rank1を一覧を選択し、「タイトル行の扱い」という部分で、「特別扱いしない」というラジオボタンだけをチェック状態にして、「変更」ボタンを押します。
rank1のtitle row項は、空白に変化したはずです。
これで「基本的な設定」ページでの設定変更は終了しました。
8. タイトルと目次
一覧で、Title Rowという項目を見ると、
Elm/R
と表示されています。これはタイトル行を、セクション要素(rankX)の下部要素とし、本文から除外することを意味します。（KELFのヘルプ参照）。
デフォルトでは、すべてのタイトル行は本文から除外し、別にフォントを大きくしてセクションの先頭の表示するようになっています。
＜ｘｘｘｘ＞すなわちrank0のセクションはこのデフォルトをそのまま生かします。
Q.xxxxのセクションは、KELF本体で行った強調表示を生かすため、タイトル行を特別扱いしない設定にしましょう。タイトル行として特別扱いすると、強調表示が反映されません。
rank1を一覧を選択し、「タイトル行の扱い」という部分で、「特別扱いしない」というラジオボタンだけをチェック状態にして、「変更」ボタンを押します。
rank1のtitle row項は、空白に変化したはずです。
これで「基本的な設定」ページでの設定変更は終了しました。
「次へ」ボタンを何回かクリックして、「タイトル/目次の設定」というページを開きます。
「文書の先頭にタイトルをつける」チェックボックスはチェックされていますね。不要のときはこのチェックをはずしますが、今回はチェックしたままにしていおきます。
ただ「文書タイトルにする文字列」を変更します。
デフォルトは元の文書のファイル名＋Docという文字列、すなわちkelffaqDocになっています。これを「KELFのFAQ集」に変更します。
画像をタイトルにしたいときは、「画像を挿入」ボタンをクリックし、画像ファイルを指定してください。
「目次を作る」がチェックされていることを確認し、「次へ」をクリック。
9. XSLの詳細
「文書の先頭にタイトルをつける」チェックボックスはチェックされていますね。不要のときはこのチェックをはずしますが、今回はチェックしたままにしていおきます。
ただ「文書タイトルにする文字列」を変更します。
デフォルトは元の文書のファイル名＋Docという文字列、すなわちkelffaqDocになっています。これを「KELFのFAQ集」に変更します。
画像をタイトルにしたいときは、「画像を挿入」ボタンをクリックし、画像ファイルを指定してください。
「目次を作る」がチェックされていることを確認し、「次へ」をクリック。
「XSLの詳細」というページが開きます。
スタイルシートとしてCSSを選択している場合は、「CSSの詳細」になります。
「XSL(CSS)ファイルを新たに作る」という項目がチェックされています。
自分で編集したスタイルシートファイルがあり、それを使いたい場合は、このチェックをはずし、次のページへ進めばいいです。今回は新たに作成します。
まず「項目の一覧」で文書全体(<body>)を選択します。右側の「内容」欄にデフォルトで設定されているスタイルが表示されます。
デフォルトのスタイルをすべて削除し、次の各項目を入力します。
margin-left:15%;
margin-right:15%;
font-size:11pt;
text-align:left;
background-color:#CCCC99;
各意味についてはここでは説明しません。HTMLやホームページの作り方に関する解説書や、インターネット上の参考資料をお読みください。左のLINKsから、HTML4.01という項目へジャンプしていただくと、W3Cの仕様そのものを参照することができます。
入力がおわったら「スタイル変更」ボタンをクリックします。これをクリックしないと変更は反映されませんので注意してください。
「セクション全体」という項目も変更します。要素の一覧で「セクション全体」を選択します。
これを書いている時点のデフォルトは、
margin-bottom:45px;
color:black;
background-color:white;
text-align:left;
font-size:11pt;
です。（将来のバージョンで変更するかもしれません。）
これを少し変更します。
まず背景色。
background-color:#FFFFFCC
にします。
そして次の項目を付け加えます。
padding-left:10px;
padding-right:10px;
入力がおわったらまた「スタイル変更」ボタンをクリックし、変更を確定します。
もうひとつ、「セクションタイトル」を変えましょう。文字色と背景色です。
デフォルトは、それぞれ、
color:blue;
background-color:white;
になっています。これを、
color:black;
background-color:#FFFFFCC;
に変更します。
入力がおわったら「スタイル変更」ボタンをクリックし、変更を確定します。
そして文書の「目次」部分の背景色を変更します。
background-color:#CCCC99;
にします。「スタイル変更」ボタンをクリック。
以上です。
10. 最終ページ
スタイルシートとしてCSSを選択している場合は、「CSSの詳細」になります。
「XSL(CSS)ファイルを新たに作る」という項目がチェックされています。
自分で編集したスタイルシートファイルがあり、それを使いたい場合は、このチェックをはずし、次のページへ進めばいいです。今回は新たに作成します。
まず「項目の一覧」で文書全体(<body>)を選択します。右側の「内容」欄にデフォルトで設定されているスタイルが表示されます。
デフォルトのスタイルをすべて削除し、次の各項目を入力します。
margin-left:15%;
margin-right:15%;
font-size:11pt;
text-align:left;
background-color:#CCCC99;
各意味についてはここでは説明しません。HTMLやホームページの作り方に関する解説書や、インターネット上の参考資料をお読みください。左のLINKsから、HTML4.01という項目へジャンプしていただくと、W3Cの仕様そのものを参照することができます。
入力がおわったら「スタイル変更」ボタンをクリックします。これをクリックしないと変更は反映されませんので注意してください。
「セクション全体」という項目も変更します。要素の一覧で「セクション全体」を選択します。
これを書いている時点のデフォルトは、
margin-bottom:45px;
color:black;
background-color:white;
text-align:left;
font-size:11pt;
です。（将来のバージョンで変更するかもしれません。）
これを少し変更します。
まず背景色。
background-color:#FFFFFCC
にします。
そして次の項目を付け加えます。
padding-left:10px;
padding-right:10px;
入力がおわったらまた「スタイル変更」ボタンをクリックし、変更を確定します。
もうひとつ、「セクションタイトル」を変えましょう。文字色と背景色です。
デフォルトは、それぞれ、
color:blue;
background-color:white;
になっています。これを、
color:black;
background-color:#FFFFFCC;
に変更します。
入力がおわったら「スタイル変更」ボタンをクリックし、変更を確定します。
そして文書の「目次」部分の背景色を変更します。
background-color:#CCCC99;
にします。「スタイル変更」ボタンをクリック。
以上です。
「次へ」をクリックすると最終ページです。
ご苦労様でした。
「完了」ボタンをクリックすると、XMLを生成しますが、KELF登録ユーザーの場合は、「このウィザードの設定を保存する」をチェックしておくといいでしょう。kelffaq.txtを編集し、再度、XML化するとき、このウィザードの設定をクリック一発で復元できます。もっともkelffaq.txtの構造が変化した場合など、すべてが復元できるとは限らないのですが。
では「完了」ボタンをクリックします。
出来上がりは左の画像です。クリックすると拡大した画像を表示します。
いかがですか？
少しは見られる体裁になったでしょう。
今回はスタイルシートをXSLで生成したので、NNではうまく表示できません。
これを表示できるようにする方法については次項で説明します。
ご苦労様でした。
「完了」ボタンをクリックすると、XMLを生成しますが、KELF登録ユーザーの場合は、「このウィザードの設定を保存する」をチェックしておくといいでしょう。kelffaq.txtを編集し、再度、XML化するとき、このウィザードの設定をクリック一発で復元できます。もっともkelffaq.txtの構造が変化した場合など、すべてが復元できるとは限らないのですが。
では「完了」ボタンをクリックします。出来上がりは左の画像です。クリックすると拡大した画像を表示します。
いかがですか？
少しは見られる体裁になったでしょう。
今回はスタイルシートをXSLで生成したので、NNではうまく表示できません。
これを表示できるようにする方法については次項で説明します。