Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Wikiのように独自タグでHTML整形を行う

MSXMLのXSLTを利用した独自記号による文章整形

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/01/26 00:00

XSLTを利用すると、Wikiで使われるような記号を用いたHTML整形を実装できます。本稿では、CodeZineの投稿用タグを例にその方法を紹介します。この方法では、本来HTMLに存在しないタグがあたかも存在するかのように振舞わせられるため、画像のサムネイルや目次を生成するタグなど、さまざまな応用例が考えられます。

目次

はじめに

 Wikiやさまざまなblogツール、CodeZineの投稿では、記号を使って文章を整形できるようになっています。整形用の記号はHTMLタグよりも少ない打鍵数で入力できる上に、見た目と修飾内容が結びついているので分かりやすく、文章デザインの統一も図りやすいというメリットがあります。

 本稿では、Wikiやblogの投稿だけではなく、HTML文章の作成に「記号による整形」(以下、Wiki整形)を使用するためのXSLTスクリプトを紹介します。

対象読者

 HTML文章の作成やXMLに興味のある方を対象とします。

必要な環境

 このサンプルはInternet Explorer 6.0+msxslを使用して動作確認をしています。スクリプト中でmsxslの独自拡張である<msxsl:script>を使用しているため、実行にはmsxslが必要になります。

 msxslはMicrosoftが配付している、MSXMLの中に含まれています。MSXMLはMicrosoftのホームページからダウンロードできます。

HTMLの中でWiki整形

 簡単な記号の組み合わせ表現できるWiki整形は、Wikiやblogなどネット上での投稿や書き込みによく利用されます。これを通常のHTML作成にも使おうというのが、本稿の趣旨です。

 記号付きテキストからHTMLを生成するプログラムを作ってもいいのですが、今回は、HTML中の<wiki>を探し、その中身を整形した結果と置き換えるスクリプトを用意しました。

置換対象となるHTMLの例
<html>
<head><title>wikiテスト</title></head>
<body>

<wiki>
この中身に対し、整形が行われる。
</wiki>

</body>
</html>

 テキストの変換に使用できるスクリプト言語は数多くありますが、ここではXSLTを使用することにします。XSLTはXMLを変換するために用いるスクリプト言語で、次のような利点があります。

  • Internet Explorerを使用すると、ファイルを開くだけで変換結果を確認できる。
  • タグ構造に関する処理が得意である。

 XSLTとInternet Explorerを組み合わせることで、変換の操作を行わずに整形結果を確認できるようになります。

変換の流れ
変換の流れ

 同様のスクリプトをperlやrubyを用いて作成しても構いません。その際は「.whtml」などの普段使わない拡張子に作成したスクリプトを関連付けて、ダブルクリックで実行できるようにしておくと変換の手間が省けます。

ダウンロードサンプルについて

 本稿のダウンロードサンプルには、変換を行うXSLTスクリプトである「wiki.xsl」と変換対象である「sample.xml」が含まれています。

 「sample.xml」をInternet Explorerで開くと自動的にXSLTによる変換が行われ、整形された内容が表示されます。ソースを確認すると、整形前の文章を見ることができます。

 また、「cz.xml」にはCodeZine投稿用のタグ「CZタグ」で整形を行うサンプルが掲載されています(著作権の都合上、デザインまで模倣するものではありません)。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5