> >

マークアップ上の引用作法

引用をするときには blockquote あるいは q 要素を使うというのはウェブログをやっている人ならかなり多くの人が知っていると思います。blockquote はブロック(段落のようなもの)で引用するときに使い、q はインラインで引用するときに使います。

<blockquote> と </blockquote> あるいは <q> と </q> で囲めばマークアップとしてはそこが引用であることを示したことになるのですが、これではどこのなんというページから引用したのかがわかりません。人が読むためにはその前後に引用元へのリンクを入れればよいのですが、マークアップとしてはそれは単に前や後ろに書いてあるリンクであって、その関連付けがなされていません。人がその前後の文脈を利用して解釈しなければならない関連付けは明示的なものではないのです。つまり、前後に付けるリンクでは引用の要件である引用元の明示がなされていないと言えます。

よく blockquote 要素の中に引用元へのリンクを付けているケースを見かけますが、これも変です。blockquote 要素の中は引用された文章でですから、そのリンクも引用されたものとマークアップ上はなってしまいます。

これを補うことができるのが blockquote 要素や q 要素の cite 属性です。これらの要素の cite 属性は引用元の URL を記述するものとして定義されています。ですからマークアップ上は cite 属性を付ければ引用元を明示したことになり、わざわざ前後にリンクを書く必要はありません。

人への配慮

しかしながら多くのブラウザではこれらの要素の cite 属性を見るのは手間ですし、見えたとしてもブラウザの URL 入力欄にコピー&ペーストをしなければ引用元を参照できません。ページのソースからしか cite 属性値を持って来れないブラウザは、もし CGI などへのリンクで '&' が含まれていたとしたら正しいマークアップでは "&" と書いてあるはずですから、それを "&" に直してやらないとブザウザの URL の入力としては正しくなくなってしまいます。

ですから閲覧者のことを考えればリンクを付けたほうが断然いいのです。

ただ前後にリンクを書いただけでは、たまたま前後に来たリンクと形式的には区別がつきません。blockquote 要素とマークアップ上もグループになった書き方をする必要があります。blockquote 要素の引用元へのリンクを div 要素でくくることで一つのまとまりであることを形式的に示すことができます。

その他諸々の配慮

blockquote 要素や q 要素の title 属性には引用元の文書のタイトルを付けるものです。また cite 属性ではなく cite 要素というのもあって、これは引用元を表す文言であることをマークアップするためのものです。

更に引用元はオンライン上の文書などですから、印刷物と異なり後から修正される可能性があります。修正されると前に書いてあったことは消えてしまいます。引用内容がたまたまそれに当たると、引用内容と引用元の内容が食い違ってきてしまいます。このためオンライン上の引用元は厳密に考えるといついつのどのページという指定の仕方をしなければ正確ではありません。

また、XHTML 1.0 Strict や HTML 4.01 Strict では blockquote 要素の中に直接文字列を書くのは誤りです。 p 要素など文を書くためのブロック要素の中にのみ文が書けるのが厳密な XHTML や HTML が意図しているところなのです。

こだわり引用マークアップ

以上のことを全て一気に実現するためには例えば次のようなマークアップになるでしょう。

ブロック引用

<div class="全体のCSSでのクラス">
    <blockquote cite="引用元のURL" title="引用日時の 引用元のタイトル">
        <p>

            引用元内容
        </p>
    </blockquote>
    <cite>引用日時の <_a href="引用元のURL">引用元のタイトル</a> から引用</cite>

</div>

インライン引用

<q cite="引用元のURL" title="引用日時の 引用元のタイトル から引用">引用元内容</q>

さあ大変なことになりました。これを手打ちで書くのはかなり面倒です。

そこで bookmarklet

そこで作ったのがこの bookmarklet なのです。もう三ヶ月くらい使ってきたのですが、あんまり便利なのでもったいないから公開しておこうというわけです。

使うためには次に挙げるリンクから好きなものをドラッグ&ドロップでブラウザのブックマークにしてください。

日時の記載無し

引用

日付のみ記載

引用

日時を記載

引用

百聞は一見にしかずですから、この bookmarklet で表示させた画面の例を示しておきます。

この画像はリンクになっています。リンク先はポップアップ表示をさせないときの bookmarklet の表示です。

アピールポイント

実際に使ってみるとすぐにわかりますが、この bookmarklet には、こだわったマークアップを生成する以外に次のアピールポイントがあります。

• 生成コード欄にフォーカスが当たるとコードを選択状態にする。

  コピーするときの手数が少なくなります。

• コードのタブインデント幅をその場で変えることができる。

  ペースト先のインデント幅に合わせてからコピーできます。

• 実際の表示例も掲載される。

  そのコードを使用した結果を目で見て確認できます。

• CSS シグネチャが付いている。

  "homepage_mac_com-yuji_okamura-bookmarklet-quote_html" という CSS シグネチャが付いているのでブラウザのユーザスタイルシートで表示例を自分用にカスタマイズできます。

• 全体の div 要素の class 名をカスタマイズできる。

  bookmarklet の URL の中に "&c=自分用のクラス名" と付け加えると、生成されるコードの全体の div 要素の class 名がデフォルトの "quote" から 自分用のクラス名 になります。

  既に似たような引用の仕方をしているときにご自分の CSS を書き換えなくて済むかもしれません。

制約事項

面倒なので frame を用いたページからの引用には対応していません。試していませんが iframe の中からの引用もうまくいかないかもしれません。

また、私が動作を確認したのは Firefox 1.5.x.x (Mac 版) と Safari 2.0.3 のみです。それ以外のブラウザでも新しいものなら動くと思いますが、確認していません。

追記

新たに確認したブラウザ

以下のブラウザでも確認しました。

• Windows: Internet Explorer 6.0 SP2
• Windows: Firefox 1.5.0.3
• Mac OS X: Opera 8.54
• Windows: Firefox 1.5.0.4

早速変更

mojo さんの指摘に基づいて cite 要素内の文言を改良しました。

その他に u パラメータに XSS の可能性がある脆弱性があったので改善しました。

OKAMURA のセキュリティ勧告「u パラメータに XSS の可能性がある脆弱性」によると当 bookmarklet に XSS の可能性があったそうです。危険度は 5 段階中の 3 の「中度に危険」。

これは u パラメータに渡される URL が HTML 属性値用のサニタイズがされずに表示に使用されることによって引き起こされるというものです。この脆弱性よって当 bookmarklet の実体である html に対する悪意があるリンクを辿らせることでユーザの Cookie 情報が奪取されたり、攻撃の踏み台にされる可能性がありました。

利用者の対策としては「アップデートされたからなにもしない」というものです。

サニタイズは web アプリの基本的な作法です。これをうっかり見落とすとは作者の力量が疑われますね。作者の顔を見てみたいものです。

Opera 9.0 に対応と若干修正

Opera 9.0 でちゃんと動作していませんでしたが、対応しました。また引用元の URL が CGI などでパラメータの区切りの & が含まれているときに & とすべきところが & となってしまっていたバグを修正しました。

ブックマークレットにしたブックマークには変更の必要はありませんが、ブラウザのキャッシュが効いてしまっていて最新版でない可能性があります。ブラウザのキャッシュを一度捨てるとよいでしょう。また Firefox Mac 版でしたら command-shift-R でリロードするとキャッシュを無視してリロードされるのでそれを一度やってみてください。Windows 版だったら ctrl-shift-R かな?

最新版は次の OS とブラウザで動作確認しています。

Mac OS X 10.4.7

• Safari 2.0.4
• Firefox 1.5.0.4
• Opera 9.0

Windows XP SP2 Professional

• Internet Explorer 6.0 SP2
• Firefox 1.5.0.4