デザイナーズDTDとでもいうものを定義して古いコンテンツのまずいhtmlをアップデートする

ブログの外枠のデザイン変更は苦になりませんが、記事本文のマークアップのルール変更は大変です。新しいルールを元に記事本文の全てを手動で書き換えるのは現実的ではありません。

この書き換えを自動化するには次の2つのアプローチが考えられます。

1. 記事本文をマークダウン等の中間表現で持っていてHTML化のコンバータをアップデートする
2. デザイナーが記事本文用のDTDを定義する
   • 記事投稿の際に本文用DTDでチェックする
   • アップデートの際には旧DTDから新DTDへの変換ツール用意する

僕は後者の方針でいきます。

便宜上DTDと書きましたが、要はタグ構造を定義し（制限し）これを検証ツールに突っ込むわけです。検証ツールは js で書くので定義部分も json になると思います。恐らく CSS のセレクターを流用してだいたい事足りるんじゃないでせうか。

本年はそのためのツールの開発に取り組みたいと思っています。以上で方針を書きましたので一旦ここまで、これ以降は蛇足です。

昔書いた記事のhtmlがイケてない問題、そして今書いているhtmlも将来ダメになる問題

ブログサービスを利用し始めて12年が過ぎました。この間 goo と livedoor で書いていた記事は Blogger にインポートし、ゆびとまで書いていた DIY 日記はごっそり消滅… 総じて9割超の日記は残すことが出来ています。

現在懸案なのが、以前に書いた日記のタグ構造です。些細なことから致命的なことまで以前に書いた記事(html)には様々な問題があります。

1. 最新の記事と見栄えが異なり総じてダサい
2. <P> や <blockquot> が使えていない
3. サムネイルの拡大スクリプト PicaThumbnail で拡大できない

しかし、1000件を超える記事たちを手書きで書き換えるわけにはいきません。書き換えが終わったころには HTML6 や新しいブラウザやデバイスが登場しデザイントレンドも変わって再び書き換えなんてことに…

企業メディアでも同じ問題は起こってる

この問題は個人のブログに限らずより大きなリソースを注げる企業メディアでも起こっています。みなさんも過去に書かれた記事と最近書かれた記事で、本文の様子が違うなぁと感じたことあると思います。

丁度、随分昔に書かれた記事ながら僕が度々読み返すお気に入り記事があります。この記事のスクリーンショットと同じ Web メディアの最近の記事のスクリーンショットを比較して見てみます。

2006年の記事『スマートフォンでAjax』

高橋 登史朗氏による記事は Windows Mobile を搭載した携帯電話、W-ZERO3 や X01HT の登場を背景に書かれたものです。フルブラウザを搭載する携帯電話が珍しかったこの時代に、DHTML・Ajax に不十分ながら対応した Internet Explorer Mobile 用の Web アプリ開発のための情報が紹介されています。

Windows Mobile 5.0 時代の IE Mobile は css-p 対応が削除された一方で XHR を搭載しました。しかし DOM 自体は基本的に IE4.01 のソレで innerHTML を駆使してページを変更するという胸熱のサンプルプログラムが紹介されています。

---

すいません、つい熱くなってテーマに関係ないことを長く書きました…サムネイルをクリックして拡大して頂き、次の同メディアの最近の記事のスクリーンショットと比較してみましょう。

2015年の記事『表の空っぽのセルにだけ、CSSで斜線を引く方法』

最近書かれた記事で比較しようと物色していたところ、どうやって斜線を入れるのだろう？と目に留まった記事です。CSS3 の linear-gradient を使うとのこと、なるほど！

---

さて、2006年の記事と比較すると200pxのサムネイル画像にテキストが回り込んでいる点がまず目につきます。サムネイルに本文が回り込んだ方が余白が出来ず（読者のスクロール量が減る）画面上のアクセントとなるため読みやすさも上がると考えます。僕のブログでもサムネイルに本文を回り込ませています。

ソースのチェック

回り込み(float)のクリアとか気になったのでここでソースのチェックをしてみます。ソースのコンテンツ部分は適宜に省略しています。

2006年更新の『スマートフォンでAjax』のソース

<main role="main">
 <article class="aa_article">
  <div id="popin_read" class="aa_article-content clearfix" data-tracking-zone="m8">
   <style type="text/css">
    <div style="font: bold 24px Times;">
     <br>
     <font size="+2">スマートフォンでAjax</font>
     <hr>
     <br>
     <ul>
     <br>
     <table id="setright" width="200" cellspacing="5" cellpadding="0" border="0">
      <tbody>
       <tr>
        <td>
         <img alt="X01HTでAllAboutを表示" src="htc3.jpg" width="200" border="0">
        </td>
       </tr>
       <tr>
      </tbody>
     </table>
     <br clear="all">
     最近、携帯電話にキーボードの付いたものを見かけるようになってきました。...
     <br>

2015年公開の『表の空っぽのセルにだけ、CSSで斜線を引く方法』のソース

<main role="main">
 <article class="aa_article">
  <div id="popin_read" class="aa_article-content clearfix" data-tracking-zone="m8">
   <h3>表の空っぽのセルに対してだけ、CSSで斜線などの装飾を加える方法</h3>
   ウェブ上に表(テーブル)を掲載する際、何も書かれていない空っぽのセルに...
   <br>
   <br>
   ■<b>縦横の見出しが交差する部分(＝左上の1マス)に斜線を引く</b>
   <br>
   <div class="right200 article_image_box">
    <a class="article_gallery" href="/gm/gc/457196/photo/1343758/" rel="" title="空欄に斜線を引いた表の例">
     <img class="article_image" src="sampletable1.png" alt="空欄に斜線を引いた表の例" width="200" height="150">
    </a>
    <p class="cap">空欄に斜線を引いた表の例</p>
   </div>
   右図では、行と列の見出しが交差する「左上端の1マス(緑色矢印の部分)」に...
   <br>
   <br>
   また、「空欄である」と明示する目的でセル内に斜線を引きたい場合もあるでしょう。...
   <br>
   <br>
   <div class="BRClearAllClass">
    <br class="articleFloatClear">
   </div>
   ■<b>「総当たり戦」のような表で、行列が重複(交差)する部分にだけ斜線を引く</b>
   <br>

えぇと、いろいろアレですがいちいちは書きません…

翻って僕のブログも2009年頃まで遡るとカオスですし、2014年以前の記事ですらサムネイルが拡大できません…

例え閲覧に支障がなくともまずいマークアップは意図を正しく検索エンジンに伝えることができなかったり、スクリーンリーダの動作に支障が出るかもしれません。

僕は技術の維持向上のためというのもブログ運営の理由の一つのです。本年はいよいよこの問題にガツンと取り組みたいと思います。その上で書き換えのうまくいっていないIT系メディアに出会ったら、心の中でファビュラスな微笑をたたえたい。

ではでは本年もよろぴくぴく。