ウェブページにおいて図であったり飾りであったりする画像の配置はCSSを通して行う。多くの場合はクラスとしてパターン化した配置のひとつを要素に割り当てることで行うわけだが、これを自動化したい。具体的に言えば、画像の縦横サイズやアスペクト比、キャプションの有無に基づいて最適な配置を自動で行い、手作業で要素にクラス名を振らなくて済むようにしたい。
紙媒体の場合は物理的な制限があるので、文章が収まるようにレイアウトを決め、それに合うように画像を作成し配置するという形が多い。ウェブページでも同じように行われてきたが、物理的な制限は違う形のもののため、レイアウトは別の形で自由に行えるのではないだろうか。
また画像そのものにはその最適解が別にあるはずだ。写っているものの最も良い状態を求めて作成し、配置はその画像で伝えたいことが存分に伝わるように、かつ本文のバランスを崩すことなく配置できると良い。そういった場合には画像ありきで配置が決定できることになるので、自動化することも不可能ではない。
もちろんレイアウトにあわせて画像を調整するべき場合も多い。例えばロゴもそうだし、グローバル・ナビゲーションのアイコンもそうだ。ここでいう配置を自動化したい画像とは、主にブログ記事で使われる画像のようなコンテンツの一部である画像だ。
やたら大きくて横長ならばビューポートいっぱいに配置すると良さそうだし、正方形なら少しサイズを制限して本文の右に浮かせて配置すると良さそうだろう。こういうものはかなりのところまで一般化できるのではないだろうか。横長でも小さい画像なら本文の左に浮かせることができるし、それより少し大きい横長の画像なら本文からちょっと飛び出すような形で配置すると今風かもしれない。
自動化するといっても最終的にはパターン化した配置のためのクラスをどういう条件の画像へと割り当てるかということに過ぎない。クライアント・サイドで行うと実装は楽そうだが、パフォーマンスは大きく落ちることだろう。読んでいる途中でレイアウトが変化するなどということもありえ、あまりやるべきではなさそうだ。
逆にサーバー・サイドやローカルで行う場合はHTMLをちゃんとパースして行わなければならない。そうでないとレイアウトを制御するimg要素のコンテナーへクラスを割り当てるのが難しくなる。親の要素を選択するセレクターがあれば……というところだが、ないものはない。DOMを構築する何らかのライブラリを利用する必要があり、やりたいことに対してかなり大げさとも思える。
実装にはいくつか超えなくてはならないハードルがあるようだ。
実現するとブログ記事のHTMLソースからクラスやIDを追放できることになるので、保守性が上がりそうだ。もっと大雑把に言えばMarkdownだけでほぼ完全に管理することができるようになるということだ。画像の配置だけでなく、見出しを見つけたらその影響下の要素をまとめてセクションにするような機能もあってよい。
Markdownは便利ではあるが、それだけで書かれたコンテンツはやはり退屈な見た目になりやすい。画像は常に段落と揃って表示されるし、プログラムのコードであろうとシェルの入力例であろうと同じように表示される。もっとこのあたりでコンテンツの内容から判断してプレゼンテーションを工夫する余地はあるはずだ。
例えば次のようなMarkdownテキストを考えてみよう。恣意的な例であることは承知してもらいたい。
> Lorem ipsum dolor sit amet
Fusce tincidunt hendrerit quam. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque fermentum dolor
vel velit ultricies ullamcorper.このMarkdownテキストは通常blockquoteとp要素に変換される。しかし引用に続く段落を見ると同じ文章が出てきていることがわかるので、この引用は出典もないことであるし、まず間違いなくプル・クォートであると判断できるだろう。となるとblockquote要素の代わりにaside要素(仕様でもプル・クォートにはこの要素を使うことができると言及されている)を使って変換されるとなお良いと考えられる。
既にこういったコンテンツを考慮したMarkdownのプレゼンテーションを行う仕組みは少ないが存在する。例えばGitHubでは見出しへIDを機械的に振っており、かつそこへジャンプするためのURLを手軽にコピーできるようにもしてある。多くの人が便利に使っていることだろう。
このようにコンテンツを機械的に判断して(content-aware)、適切にマークアップしたり、画像をその大きさや縦横比によって自動配置するような機能を持つツールはもっと出てきても良いはずだ。文章が主で画像が従という今の関係性をもっとコンテンツという形で平等に扱える(マネージできる)ようなシステムが出てくると、初めてCMSが登場したと言えるのではないだろうか。