2006-09-06 アーカイブ

ソースコードのマークアップについて以前書いたなあ

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻を読んで、ソースコードのマークアップについて何度か記事を書いたことを思い出しました。 hxxk.jp は自分のための備忘録サイトです ! ( 何度も書いてアピール )

それら過去の記事を交えて、 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻の内容について触れてみます。

pre 要素でソースコードをマークアップするなら

以前 CSS を書く前に読んでもらいたいことでも書きましたが、 CSS 2 では、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと示しています。

User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.

Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

そしてそのデフォルトスタイルシートは、デフォルトスタイルシートのサンプルに沿って作られるようになっています。 一般的なパソコンの Web ブラウザにおいて、文書製作者によるスタイルシートやユーザスタイルシートが全く適用されない場合でも、 em 要素の強調部分がイタリックで表示されたり、 strong 要素の強調部分がボールドで表示されたりするのはこのためです。

もっとも、 This appendix is informative, not normative. とあるように、あくまで参考であって必ず守らなければならないものではありません。 例えば初期の携帯電話のように、文字をイタリックやボールドで表示することができない UA ではこれに準拠していないことになりますがそれはさておき。

さて、このデフォルトスタイルシートのサンプルの pre 要素に関する部分だけを抜粋してまとめてみると、次のようになっています。 ( ちなみに、 CSS 2.1 のデフォルトスタイルシートのサンプルでは少し内容が異なっていますが、 white-space や font-family の指定は変わりありません。 )

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    unicode-bidi: embed;
}

@media print {
    pre {
        page-break-inside: avoid;
    }
}

@media speech {
    pre {
        pitch: medium;
        pitch-range: 0;
        stress: 0;
        richness: 80;
    }
}

よって、ソースコードを pre 要素でマークアップするのなら、 white-space: pre; を指定する必要は特にありません。 ( 製作者スタイルシートやユーザスタイルシート内でユニバーサルセレクタを使って * { white-space: normal; } とでもしていれば別ですが。 )

もちろん、指定しても全く問題はありませんが一応「冗長な指定ですよ」ということで。 同様に、 font-family: monospace; とも指定されているので、 font-family プロパティを指定しなくても等幅フォントで表示されることになります。 ( なお、 code 要素もデフォルトスタイルシートは font-family: monospace; と指定されています。 )

pre 要素でマークアップすると、横方向にはみ出る ?

overflow指定なしもすっきりでいいかもしれませんが、横幅が長いコードを貼り付けると全体のレイアウトが崩れる可能性がありますよね と書かれてある部分ですが、以前 pre 要素による整形済文字列をどう扱う ? という記事を書きました。 i d e a * i d e a - Lifehacks by 100SHIKI.COM の……すみません著者情報を見つけられなかったので名前が分かりませんが「 i d e a * i d e a の中の人」は、 overflow プロパティの値に auto を用いるか scroll を、 IEですっきり見えるscrollの方にしますかね ということで決めていますが、 overflow: auto; という指定でも、合わせて width プロパティを指定しておけば IE でもはみ出る部分はスクロールバーを表示してすっきり見せてくれます、ご参考まで。

また、 コピペして使ってもらう という目的に重きを置くなら、 <pre><textarea cols="n1" rows="n2" readonly="readonly">ソースコード</textarea></pre> というマークアップ ( n1 と n2 は任意の数字 ) をすれば、 Ctrl+A によるソースコードのみの選択も可能です。 ( 私は pre 要素内に textarea 要素を配置することはあまり推奨しませんが、 XHTML 1.1 および XHTML Basic 以外の DTD なら、仕様上は配置することが可能です。 )

overflow指定したらCTRL+Aでtextarea内だけ選択できるかと思ったら全然だめでした・・・orz。 と書かれてありますが、おそらく pre 要素にて囲まれたボックスを textarea と混同しているのでしょう。 元来、 textarea 要素でマークアップされた部分は、 Windows の一般的なブラウザではその部分をクリックして Ctrl+A することにより、その部分のみの選択をすることができます。

実体参照をどうするか

皆さんコードを貼り付けるときはきっと単にコピペしているだけだと思うのですが実態参照はどうしているんでしょうね とありますが、私の場合はソースコード部分だけをテキストエディタにコピーして、 $ を &#36; 、 & を &#38; 、 < を &#60; 、 > を &#62; に置換して、記事中の文章にペーストしています。 なお、文字実体参照ではなく数値文字参照にしているのは私の好みです。

ちなみに、 $ は文字参照しなくても構わないのですが、私のように Movable Type を使用している場合は、 Movable Type のテンプレートのソースコードを記述する際に、 Movable Type のテンプレートタグと混同して誤動作してしまわないように文字参照しています。

ちょっとした tips

みなさんの方法も教えてくれるとうれしかったり・・・ごにょごにょ。 ということで、 hxxk.jp で使っているテクニックをご紹介。 ちなみに、「ソースコードをどのようにマークアップするか」という点はソースコードは blockquote でマークアップ ? にて書いていますが、 pre+code 派です。 なお、ソースコードのマークアップに関する議論リンク集というものもありますので、これを見てみるのも良いかもしれません。

さてテクニックの紹介と言っても、過去に書いた記事を紹介するだけですが。 pre 要素でソースコードの説明に詳しく書いていますが、 pre[title]::before という属性セレクタと擬似要素セレクタを組み合わせて、 pre 要素に title 属性を記述している場合のみに、その title 属性の値を ::before 擬似要素で表示するということをやっています。 残念ながら IE ( 7 を含む ) はこれに対応していませんが、「対応していない場合でも問題は無く、対応していればなお便利」という類のものなので、試してみてはいかがでしょうか。

トラックバック送信先

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻

私のサイト hxxk.jp は、 pre+code 派です。 また、合わせて overflow プロパティをどうしているか、文字参照をどうしているか、 title 属性による補足情報の提供方法などを解説してみました。

FeedBuerner Top40 っていうものがあったんですね

Lucky bag::blog: ldR の購読者数が Bloglines を抜いたにて初めて知ったんですが、 FeedBurner ( 日本語版 ) の登録者・講読者数のランキングっていうものがあったんですね。 「ランクアップのためにクリックお願いします♪」的なランキングは大嫌いですが、こういった登録者・講読者数の指標は特に嫌いということはありません。 そういう意味では livedoor Reader の登録数ランキングも同じですね。

何故嫌いではないかというと、単なるクリックによって集計するランキングは組織票や騙しクリックなどが容易で、あまり信頼できないイメージがあるんですよね。 もちろん登録者・講読者数によるランキングも、アカウントを大量取得して不正にランクアップという可能性もありますが、単なる閲覧中のワンクリックとレジストレーションではだいぶ障壁の高さが違いますので、ある程度信頼できるかなあと。

hxxk.jp は FeedBurner ( 日本語版 ) ではなく FeedBurner ( 英語版 ) の方を利用しているのでランキングには入っていませんが、もし FeedBuerner Top40 の中に入れ込むなら、一応 Top10 には入るくらいの講読者数なんですねえ。 もちろん、現在 FeedBurner ( 英語版 ) を利用している weblog が全て FeedBurner ( 日本語版 ) に移行すれば、 Top40 にすら入らない可能性も充分に考えられますが。

まあ、講読者数ランキングのためにサービスを移行するなんてことはしませんので、現在講読中の方はそのまま FeedBurner ( 英語版 ) による Feed をご講読ください。

更新をしなくてもページビューが落ちていなかった

さて、これが久々の更新となり、前回の記事である Safari と content プロパティ (3) から実に 2 週間以上間が空いたわけですが、実はページビューとしてはほとんど落ちていません。 Feed を講読している人が 500 人以上いるのだから、更新しなければ単純に 500PV くらい減少するのではないかと思いますが……。

もちろん、 Feed を講読している人は Feed リーダで読んでいる方も多いと思いますので、 Web ブラウザによるページビューには現れないのかもしれません。 しかし、よくよくアクセスログを見ていると、検索によるアクセスがかなりの率を占めていて、新着記事だけを読みに来る方の分のアクセスが無くても、全体としてはあまり減少しているように見えないということに気付きました。

アクセスログから分析する「はてなブックマーク効果」と「ニュースサイト効果」と「検索エンジン効果」でも検索エンジンによるアクセス効果について触れましたが、やはりランキングの順位を上げることや講読者数を増やすことに注力するより、記事を書くこと自体に力を入れていった方が結果的にアクセス増につながっていくのかなと思いました。 まあ私はアクセス数自体にはこだわっていないので、的確な分析が出来ていないかもしれませんが。 ( アクセス増によって疑問への回答や、私の間違った認識に対する補足の増加につながることは嬉しいのですが、数字自体の増加にはあまり関心を持っていません。 )

ちなみに、 2 週間以上記事の更新が止まっていたのは、本業やその他の行事が立て込んでいるうちに、だんだんと「書かなくてもいいかなあ」という気持ちになっていったためです。 ずるずるとそう考えてしまうというのは危険なので、まだ色々と立て込んだままですがちょっと記事を書くことにしました。 なお、 Lucky bag::blog の e-luck さん同様、 hxxk.vox.com の方ではもう少し頻繁に益体の無いことを書いています。 時間が取れたら、これまで d:id:hxxk に書いた内容も hxxk.vox.com に移そうかな。

FeedBuerner Top40 を見ていて気付きました

ちなみに、 FeedBuerner Top40 に挙がっている weblog の内、知っている weblog が 4 つしかないあたりに私の weblog 界隈への興味の狭さが窺えます。 講読している Feed 自体は少なくないと思うのですが、いわゆる有名 weblog はあまり見ていないなあと。

……ところで、 FeedBuerner Top40 という title になっていますが、 FeedBurner Top40 ですよね ?