増井俊之の「界面潮流」

「界面」=「インタフェース」。ユーザインタフェース研究の第一人者が、ユビキタス社会やインターフェース技術の動向を読み解く。

第32回 マクロで楽々HTML

2009年6月 8日

(これまでの増井俊之の「界面潮流」はこちら

Cのプログラムでは、定義された規則に従ってプログラム中の文字列を別の文字列に置き換えるマクロ機能を利用することができます。たとえばプログラム中で以下のような記述をしておくと、

#define SIZE 100

その後に出現するSIZEという文字列はすべて100という文字列に置き換えられるので、

char array[SIZE];

のような記述は

char array[100];

と書いたのと同じことになります。

これは100バイトのメモリ領域を確保するための宣言文であり、この領域を利用するプログラムは100バイト以上のデータをこの領域にコピーしたりしないように注意しなければなりません。領域サイズは仕様変更などにより変更される可能性がありますから、サイズに依存する部分では以下の例のように「100」のかわりに「SIZE」と記述しておけば、サイズの変更があってもあちこちを修正する必要がありませんし、プログラムの意味を理解することが容易になります。

if(length < SIZE){ ...

文章におけるマクロの利用

文章を書くときにもこのようなマクロ機能が使えると便利です。「非決定性状態遷移機械」のような長い文字列が何度も出現する文を書くとき、Cの場合と同じように

#define NFSM 非決定性状態遷移機械

のようなマクロ定義を利用することができれば、何度も「非決定性状態遷移機械」を入力したりコピペしたりするかわりに「NFSM」と書くだけですみますし、表記揺れのミスを防ぐことができます。また、用語を「非決定性オートマトン」に変更したくなったような場合でも、定義部分だけ修正すればよいことになります。

文書整形システムTeXでは強力なマクロ機能を活用できるので大変便利ですが、残念ながらHTMLにはマクロ機能がありませんから、同じような記述を何度も書かなければならないことがよくあります。例えば、凝ったレイアウトが必要な場合、複数の<div>タグを何段も入れ子にすることがありますが、そのような場合は全ての<div>を生真面目に記述する必要があります。同じような記述をマクロで置き換えることができれば記述の量をかなり減らすことができます。

HTML + m4

UnixやMac OSにはm4という汎用マクロプロセッサが標準搭載されています。m4は、C言語で有名なBrian KernighanとDennis Ritchie (K&R)が開発したマクロプロセッサで、Kernighanのソフトウェア作法という本で実装法が解説されています。C言語の普及度に比べるとm4の知名度は惨憺たるものですが、HTMLでマクロ機能を使いたいような場合に手軽に使うと便利です。

m4ではdefine()でマクロを定義します。たとえば

define(NFSM,非決定性状態遷移機械)
<h1>NFSM</h1>
NFSMとは...

というテキストをm4で処理すると、全ての「NFSM」が「非決定性状態遷移機械」で置き換えられて

<h1>非決定性状態遷移機械</h1>
非決定性状態遷移機械とは...

という出力が得られます。

m4では、数値をインクリメントするincr()や、条件判断を行なうifelse()などを利用できるので、以下のように、繰り返し処理を行なうtimesマクロを定義することができます。

define(times2,`ifelse($1,$2,$3,
`times2(incr($1),$2,$3)$3')')
define(times,`times2(1,$1,$2)')
times(4,`<br>')

このテキストをm4で処理すると以下のような出力が得られます。

<br><br><br><br>

入れ子の<div>を使いたい場合は以下のようにしてdiv2マクロを定義することができます。

define(div,`<`div' class="$1">
`$2'
</`div'>')
define(div2,`div(class1,div(class2,$1))')

この後に続けて

div2(abc)
div2(def)

と記述したものをm4で処理すると、

<div class="class1">
<div class="class2">
abc
</div>
</div>
<div class="class1">
<div class="class2">
def
</div>
</div>

のような出力が得られます。div2(abc)のような記述をするだけで長いHTMLが生成されるので便利だといえるでしょう。

定型的な記述が多いWebページでは、マクロ機能を使うと記述の量を大幅に減らすことができるでしょう。CSSを使うことによってスタイルの記述を簡素化するのと同じように、HTMLの本文全体にわたってマクロを利用することにより、文書の本質的な部分により注力することができるようになるかもしれません。m4はあらゆるUnixやMac OSに搭載されているので今すぐ使えるというメリットはありますが、かなりプログラマ臭がするシステムであり、普通のWebページ制作者にはとっつきにくいと思われるので、より使いやすい汎用マクロプロセッサの普及が望まれるところです。

フィードを登録する

前の記事

次の記事

増井俊之の「界面潮流」

プロフィール

1959年生まれ。ユーザインタフェース研究。POBox、QuickML、本棚.orgなどのシステムを開発。ソニーコンピュータサイエンス研究所、産業技術総合研究所、Apple Inc.など勤務を経て現在慶應義塾大学教授。著書に『インターフェイスの街角』などがある。

過去の記事

月間アーカイブ

ブログ一覧

  • Autopia
  • Compiler
  • Cut up Mac
  • Danger Room
  • Epicenter
  • from Wired Blogs
  • Gadget Lab
  • Intel International Science and Engineering Fair (Intel ISEF)
  • IPTVビジネスはどのようにデザインされるか
  • Listening Post
  • Web2.0時代の情報発信を考える
  • Wired Science
  • yah-manの「イマ、ウェブ、デザイン、セカイ」
  • yomoyomoの「情報共有の未来」
  • それは現場で起きている。
  • ガリレオの「Wired翻訳裏話」
  • サービス工学で未来を創る
  • デザイン・テクノロジーによるサステナビリティの実現
  • デザイン・ビジュアライゼーションが変えるマーケティング・ワークフロー
  • マイケル・カネロスの「海外グリーンテック事情」
  • 佐々木俊尚の「ウィキノミクスモデルを追う」
  • 佐々木俊尚の「電脳ダイバーシティ」
  • 合原亮一の「科学と技術の将来展望」
  • 合原亮一の「電脳自然生活」
  • 増井俊之×LogMeIn
  • 増井俊之の「界面潮流」
  • 大谷和利の「General Gadgets」
  • 小山敦史の「食と人のチカラ」
  • 小島寛之の「環境と経済と幸福の関係」
  • 小田中直樹の「バック・トゥ・ザ・フューチャー」
  • 小田切博の「キャラクターのランドスケープ」
  • 山路達也の「エコ技術研究者に訊く」
  • 後藤和貴の「ウェブモンキーウォッチ」
  • 携帯大学 web分校
  • 木暮祐一の「ケータイ開国論II」
  • 木暮祐一の「ケータイ開国論」
  • 松浦晋也の「モビリティ・ビジョン」
  • 歌田明弘の「ネットと広告経済の行方」
  • 清田辰明の「Weekly image from flickr」
  • 渡辺保史の「コミュニケーションデザインの未来」
  • 濱野智史の「情報環境研究ノート」
  • 白田秀彰の「現実デバッグ」
  • 白田秀彰の「網言録」
  • 石井孝明の「温暖化とケイザイをめぐって」
  • 竹田茂の「構成的アプローチ」
  • 織田浩一の「ソーシャルメディアと広告テクノロジー」
  • 荒川曜子の「それはWeb調査から始まった」
  • 藤井敏彦の「CSRの本質」
  • 藤倉良の「冷静に考える環境問題」
  • 藤元健太郎の「フロントライン・ビズ」
  • 藤田郁雄の「サバイバル・インベストメント」
  • 西堀弥恵の「テクノロジーがもたらす快適な暮らし」
  • 関裕司の「サーチ・リテラシー」
  • 飯田泰之の「ソーシャル・サイエンス・ハック!」
  • 高森郁哉の「ArtとTechの明日が見たい」

Agile Media Network clipping

Yahoo!知恵袋が発見した「質問力」という金脈

米ネット広告は完全復活だが成長率は今がピーク、モバイル広告の割合は意外…

パワースポット「清正の井戸」に行って来ました。