List 2 Table for Blog EditorとWeb文書の機械処理
xfy Communityに掲載されている「List 2 Table for Blog Editor 」は、従来のXHTMLに定められた意味を利用して、Web文書を機械処理するプログラムです。この観点から少し詳しく紹介してみます。
「List 2 Table for Blog Editor 」は、記述中のBlog記事に存在するリスト項目(ul要素、ol要素中のli要素)から表を作成して記事へ追加します。このように記事中の内容に対して処理を行う機能を、「xfy Blog Editor」のユーザコマンドのとして実装したものです。
概要
XHTMLにおけるリスト要素(ul要素、ol要素、dl要素)とは、文字通り情報のリストを指定するものです。すなわち、これはきわめて基本的な意味マークアップであり、テキストのレイアウトを直接に指す概念ではないことに注意してください。このような誤解は、リストを「箇条書き」と表記した場合に起こりやすいと考えます。
いくつかの情報のまとまりを並列するものとしてリストアップしたら、それに続く文章中で、それらについて深く検討して表として整理したいときがあります。あるいは、いくつかの情報のまとまりを順序づけられたものとしてリストアップしたら、それに続く文章中で、それらを手順としてとらえてチェックリスト表を構成したいときがあります。
「List 2 Table for Blog Editor 」は、このような執筆の流れを支援する簡単なツールであり、Blog記事執筆向けとして実装されています。
動作
見かけ上はこのよう動作します。次のような記述があるとき:
休暇で利用するホテルの条件:
- キッチン
- パソコンを置けるくらい広いデスク
- PHSの圏内
というところかな。
このユーザーコマンドを実行すると、次のように表が生成されます:
休暇で利用するホテルの条件:
- キッチン
- パソコンを置けるくらい広いデスク
- PHSの圏内
というところかな。
キッチン | |
---|---|
パソコンを置けるくらい広いデスク | |
PHSの圏内 |
執筆者は、ここからさらに、次のように続けることができます:
休暇で利用するホテルの条件:
- キッチン
- パソコンを置けるくらい広いデスク
- PHSの圏内
というところかな。これを当てはめてみると:
xfyホテル | ジャスト・ホテル | |
---|---|---|
キッチン | × | ○ |
パソコンを置けるくらい広いデスク | ◎ | ○ |
PHSの圏内 | ○ | × |
仕組み
仕組みは簡単です。次のようなリスト構造を見つけて:
<ul> <li>キッチン</li> <li>パソコンを置けるくらい広いデスク</li> <li>PHSの圏内</li> </ul>
次のような表を生成し、挿入するだけです:
<table border="1"> <tr> <th>キッチン</th> <td> </td> </tr> <tr> <th>パソコンを置けるくらい広いデスク</th> <td> </td> </tr> <tr> <th>PHSの圏内</th> <td> </td> </tr> </table>
ここでリスト構造を見つけることは、ul要素を見つけることです。このためプログラムは40行ほどです。
見かけ上は箇条書きにレイアウトされていても、次のような記述などを処理対象に含め始めると、このような簡単なプログラムとはならず、また利用者の意図しない動作をすることになるでしょう:
<p>・キッチン<br /> ・パソコンを置けるくらい広いデスク<br /> ・PHSの圏内</p>
まとめ
以上で、「List 2 Table for Blog Editor 」が、従来のXHTMLに定められた意味を利用して、リストを元に表を生成する機械処理を行うことを示しました。