こんばんは。だいぶ日も長くなってきましたね。

　さて、小生のブログで、「エクセルデータをHTMLテーブルに変換」というエントリーを書いて、そこでppBlog用に見栄えの良いTABLEを作成してくれるページ を公開していました。早速、使って下さったユーザーの方から、ppBlogをリスト表示にしていると、テーブルのスタイルシートが有効になっていないとのご指摘がありました。確かに、リスト表示での個別スタイルシート指定はすっかり対応を忘れていました。

　というわけで、ppBlogでは記事毎にスタイルシートやJavaScriptを指定することが可能ですが、あまり知られていない気もするので簡単に使い方を書いておきます。スタイルシート（CSS）を指定したければ、記事のどこでも良いので、[style][/style]で囲った中の記述がCSSとして認識されます。記述はまんまCSSと同じです。具体例を挙げると以下のような感じ。

[style]
.article-content table { border-color: tomato; }
[/style]

とか。.article-contentは、記事内容要素に対するクラス名です。記事の個別表示のときは、記事ボックスはひとつしかないので問題ありませんが、複数の記事が表示されている場合、上の例だと、別の記事にテーブルが含まれていたら（クラス名が同じため）そこにも反映されてしまいます。なので、これを回避するには、指定したい記事の固有IDを利用すると良いです。ppBlogでは、すべての記事にUID1234567890のようなIDが割り振られます。

[style]
#UID1234567890 .article-content table {
  border-color: tomato; /* IDを利用して適応先の .article-content を絞り込む */
} 
[/style]

追記 2009/02/19 18:56:29 考えてみると、このUIDを付加する作業は、ppBlogの方で自動的にやるべきかなぁ。次バージョンではそうしようと思います。

　記事ごとのJavaScript指定も同じように、[script][/script]で囲った中に記述すればOKです。

[script]
alert("Bonjour, tout le monde!"); /* 普通にJavaScriptを記述 */
[/script]

　前置きが長くなりましたが、本題。最初に挙げたリンク先 のソースを見れば分かりますが、動的にスタイル指定を適応させる処理を入れています。同じような処理は、ppBlogで使っているソースハイライト表示用のsyntax.js でも使っていますが、ここでは、上記エクセルコピペのテーブル変換の部分を抜粋してみます。

var sheet = d.styleSheets && d.styleSheets[0]; /* 最初のスタイルシートを取得 */

var rulesCSS = { /* JSON形式で要素毎のスタイルを指定 */
  'table' : 'border: solid 1px gray; margin: 2em auto; border-collapse: collapse;',
  'table td' : 'border: solid 1px gray; padding: 2px; text-align: right;',
  'table th' : 'border: solid 1px gray; padding: 2px; text-align: center;',
  'thead tr th' : 'background: #eeffff;',
  'tbody tr th' : 'background: #ffeeee;'
};

for (var el in rulesCSS){
 if(sheet.addRule){ /* IE 向け */
  sheet.addRule(el, rulesCSS[el]);
 } else {  /* Firefox, Safari, Opera 向け */
  sheet.insertRule(el + '{' + rulesCSS[el] + '}', sheet.cssRules.length);
 }
}

　このように、予めJSON配列などに適応させたいCSSを記述している時は、こんな感じで動的に変更させることが出来るのですが、「普通のCSSの記述」つまり

<style type="text/css">
  table { border: solid 1px gray; margin: 2em auto; border-collapse: collapse; }
  table td { border: solid 1px gray; padding: 2px; text-align: right; }
  table th { border: solid 1px gray; padding: 2px; text-align: center; }
  thead tr th { background: #eeffff; }
  tbody tr th { background: #ffeeee; }
</style>

を、このまま適応させたいときもあると思います。ppBlogでは、リスト表示モードというのがあり、記事の読み込みにはAjaxを活用しています。この際に、最初の方で紹介した、記事ごとのCSS記述があると、まさにこんな感じで、テキストとしてCSSの記述も読み込みます。で、それを処理するのを忘れていました、という最初の話に戻るのですが、その辺の処理は以下のようにしてみました。lib.jsの256行目あたりからの部分ですが、IEとMozilla系で処理が違うので条件付きコンパイルを使っています。

if(!o("#css4list")){ /* ID#css4list を持つオブジェクトがなければ */
 oParts.create("style＃css4list", null, o("head")); /* ID名css4listを持つSTYLE要素をHEAD要素の子要素として追加 */
 newCSS = o("#css4list").$; /* HTMLStyleElementオブジェクトの取得 */
 newCSS.type = "text/css";
} else newCSS = o("#css4list").$;
 /*@cc_on @*//*@if(1) newCSS.styeSheet.cssText = css[1]; @else@*/
 newCSS.textContent = ""; /* 前に適応させたCSSをクリア */
 newCSS.appendChild(d.createTextNode(css[1])); /* 新たにCSSを設定 */
/*@end@*/

　リストモードでは記事は常にひとつしか表示されないので、ひとつ動的スタイルシート用のHTMLStyleElementを用意しておけば十分です。IEとMozilla系では、そこから先の処理が違います。IEでは、スタイルシートオブジェクトから操作。

HTMLStyleElement.styleSheet.cssText = (先に挙げたような素のCSSテキスト);

　Mozilla系では、DOMオブジェクトとして操作。

HTMLStyleElement.appendChild(document.createTextNode(先に挙げたような素のCSSテキスト));

　複数行にわたるCSSテキストを一気に適応させたいときは、こんな感じでしょうか。

ちなみに、[object HTMLStyleElement]から[object CSSStyleSheet]にアクセス？する際もIEとMozilla系では違いますね。IE８では、だいぶ歩み寄りが見られたような気もするけど。

[object HTMLStyleElement].styleSheet = [object CSSStyleSheet] /* IE */
[object HTMLStyleElement].sheet = [object CSSStyleSheet] /* Mozilla */

なので上のスクリプトの例では、IEの処理部分は以下のように書いても同じです。

document.styleSheets[document.styleSheets.length - 1].cssText = css[1];

つまり

newCSS.styleSheet == document.styleSheets[document.styleSheets.length - 1];

まぁこんなとこですかねぇ。そろそろアップデートせねば。。

---

　こんばんは。Windows ７βを試用中ですが、写真をお洒落に見せるスクリプト (photoeffect.js)が、IE8βでエラーとなり意図した効果が得られないのを発見。調べてみると、IE8ベータがVMLをサポートしていないのが原因っぽいです。おそらく、正式版ではVMLはサポートされるとは思いますが、確証はないので(Silverlightとかあるし)、現時点での回避策を考えてみました。

　IE8には、３つのレンダリングモードがあり、(紆余曲折ありましたが)デフォルトではフル標準モードでレンダリングされます。じゃ、どんな時にQuirksモード(後方互換^[1]の非標準モード)になるかというと、以下の場合です。

の３つです。詳しくは、SummerWind - IE8のレンダリングモードに関するまとめ あたりを参照。

　今どきのブログシステムでは、これらに該当しない可能性が高く、IE8は標準モードで動きます。なので(少なくとも現時点では)VMLのスクリプトが動かないわけです。じゃ、どうするか？　簡単そうなのは、METAスイッチ^Gを使うこと。とりあえずVMLはIE7モードでは問題なく作動するので、以下のようなmetaタグをwebページに追加すれば良いです。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

　確かに、これは簡単だし現実的な解決法ですが、こうしちゃうと、JavaScriptもIE7モードになっちゃいます。IE8では、querySelectorAllなどのSelectors APIやらDOMオブジェクトに対するgetter/setter API など、面白そうなAPIがサポートされるのに、IE7モードで走らせると、それらが使えません。

　出来れば、IE8モードのままでVMLも有効にしたいです。こんなときに使えるのが、インラインフレーム<iframe>。最近、ちっとも更新されていないのが気がかりな Dean Edwardsのエントリー が参考になります。

　つまり、IE8なページの中で、sandbox化されたIE後方互換の環境を構築し、その中でVMLを走らせるわけです。実際のデモを見たほうが早いと思うので、IE8βでアクセスしてみて下さい。IE7でも動きます。

　　→　http://p2b.jp/demo/vml-IE8.html

　IE8やIE7では、どう見えるかイメージショットも載せておきます。

　ここでは、単に画像を出力させるVMLを、以下のように関数化しています。

function vmlImg(src, w, h, r){
 /*
 @src: 画像ファイルを指定 
 @  w: 表示させる横幅
 @  h: 縦幅
 @  r: 回転角度(オプション)、-360～360
 */
 var ifr = document.createElement("iframe");
 ifr.marginWidth= "0"; ifr.marginHeight= "0";
 ifr.scrolling = "no"; ifr.frameBorder = "0";
 ifr.style.width = w + "px"; ifr.style.height = h + "px";
 
 document.body.appendChild(ifr);
 var idoc = ifr.contentWindow.document;
 idoc.write(""); idoc.close(); // これがないと document.body は null になる
 if(idoc.namespaces){
  if(!idoc.namespaces.v){
   idoc.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML" );
  }
 }
 idoc.body.style.backgroundColor = document.body.currentStyle.backgroundColor;
 var img = idoc.createElement('<v:image src="'+ src +'" />');
 var imgcss = img.style;
 imgcss.width = w + "px"; imgcss.height = h + "px";
 if(r){
  imgcss.rotation = r;
  ifr.style.width = 2 * w + "px"; ifr.style.height = 2 * h + "px";
 }
 idoc.body.appendChild(img);
}

　IE8版ではVMLが正式にサポートされるのを期待して、深追いはしません。

　大晦日に書いていた記事ですが、なかなか時間が取れずこんな時季になりました。瑞祥新春(ずいしょうしんしゅん) 2009。今年もよろしくお願いします。

　とりあえず、以下の点について、現時点での考えを自分なりに纏めてみました。

1. BLOCKQUOTE要素とCITE要素のグループ化
2. CSSによるCITE属性やTITLE属性抽出の問題点
3. 引用ブックマークレットの活用
4. 参考リンク

1. BLOCKQUOTE要素とCITE要素のグループ化

　昔から、BLOCKQUOTE要素とCITE要素をどう扱うかについては悩ましい問題です（個人的に）。さて、いきなりですが、ここで簡単なクイズをば。XHTML1.0 Strictの仕様に則ると仮定して、考えてみて下さい。

Q. 以下のXHTML文法の間違いを指摘せよ。

<blockquote
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="いのちの流れ">
　日夜 私の血管を流れる 同じ命の流れが
　この世界を流れ 旋律に合わせて踊る
</blockquote>

　一見すると、BLOCKQUOTE要素に用いられるCITE属性（validなURIのみ可）も適切ですし、TITLE属性も付いてます(これらは必須ではありませんが)。問題は、その引用文です。単なるテキストですが、ブロック要素の直下には、インラインであるテキストは置くことが出来ません。なので、ここは、

<blockquote
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="いのちの流れ">
 <p>日夜 私の血管を流れる 同じ命の流れが
　この世界を流れ 旋律に合わせて踊る</p>
</blockquote>

とP要素などのブロックレベルでテキストを囲む必要があります。では、次はどうでしょうか。

<blockquote
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="いのちの流れ">
<p>日夜 私の血管を流れる 同じ命の流れが
　この世界を流れ 旋律に合わせて踊る</p>
<cite>
 <a href="http://martin.p2b.jp/200812-stream-of-life.html">
 「生命潮流」より抜粋
 </a>
</cite>
</blockquote>

　現時点で、CITE属性に与えられたリンクを適切に処理するブラウザはないようなので(ケータイ除く)、読み手に分かりやすいように、CITE要素を使って、リンクを用意しました。先ず、ここで問題となるのが、BLOCKQUOTE要素の中にCITE要素を含めて良いのか？　ですが、これは後で考えるとして、少なくとも、文法エラーではありません。問題は、CITE要素（≠属性）です。CITE要素はインラインレベルなので、これも、最初と同じように、P要素などで囲ってやる必要があります。CITE属性とCITE要素とは、全く別ものであることに留意して下さい。

<blockquote
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="いのちの流れ">
<p>日夜 私の血管を流れる 同じ命の流れが
　この世界を流れ 旋律に合わせて踊る</p>
<p><cite>
 <a href="http://martin.p2b.jp/200812-stream-of-life.html">
 「生命潮流」
 </a>
</cite>より抜粋</p>
</blockquote>

　では、先ほど述べた、BLOCKQUOTE要素の中のCITE要素の扱いですが、色んな意見があるようです。神崎氏は、「引用の方法」についてのセクションで次のように述べています。

「引用の方法 」より抜粋

出典を示すcite要素の位置は、文法的には特に定められていません。ただし、この例のようにblockquote要素内で引用元を示すと、引用部分をコピー/ペーストする、あるいはスクリプトで引用部分を抽出するといった操作を行う時に、出典が不明にならないというメリットがあります。逆にcite要素を外に置くと、引用部分（blockquote）と出典を直接結びつける方法はなく、プログラムはその関係を単純に理解することはできません。要素をどこにおくべきか判断に迷う時は、どうやって利用されるのかを想像してみると、答えが出てくることがあります。

引用元: The Web KANZAKI: 強調,引用,グループ化,画像などの要素

神崎氏は、この実例として、以下のような引用を例示しています。

<p>次に、文学作品を引用する。</p>
<blockquote>
<p>吾輩は猫である。名前はまだない。…</p>
<p><cite>夏目漱石『吾輩は猫である』</cite></p>
</blockquote>
<p>この引用文を読んで、次の設問に答えなさい etc...</p>

引用元: 強調,引用,グループ化,画像などの要素 -- ごく簡単なHTMLの説明

　確かに、この場合は BLOCKQUOTE要素の属性であるCITE属性は使えません。出典がWeb上のリソースではないからです。^[1]しかしながら、W3Cの定義によれば、BLOCKQUOTE要素は、（ブロックレベルの）引用のために準備されたもの であって、それ以上の解釈をしないという立場に立てば、BLOCKQUOTE要素の中に、引用への参照を表すCITE要素を含めるのは、何となく落ち着きません。この辺りは、もはや各人の好みの問題ですし、どちらでも良い気もしますが、個人的にはBLOCKQUOTE要素の外にCITE要素を置きたい派です。その際に、神崎氏が懸念しているような 引用部分（blockquote）と出典を直接結びつける方法 を考慮するならば、BLOCKQUOTE要素とCITE要素をひとつのまとまりと見立てるために、更に外側からブロックレベルの要素でラップするというアイデアは悪くないと考えます。正に、神崎氏が同じページで述べている「グループ化 」をする訳です。DIV要素を使えば、上記『吾輩は猫である』は以下のように書けるでしょう。

<p>次に、文学作品を引用する。</p>
<div class="quote"> /* 引用に関するセクションのグループ化 */
<blockquote>
 <p>吾輩は猫である。名前はまだない。</p>
</blockquote>
<p><cite>夏目漱石『吾輩は猫である』</cite></p>
</div>          /* グループ化の終わり */
<p>この引用文を読んで、次の設問に答えなさい etc...</p>

　このグループ化の概念をもう少し推し進めて、定義型リストのDL要素 を用いたグループ化を考えてみます。例えば、上の例は、以下のような感じになります。

/* DL要素を用いたグループ化 その１ */
<dl class="quote">
<dd>
 <blockquote>
  <p>吾輩は猫である。名前はまだない。</p>
 </blockquote>
</dd>
<dt><cite>夏目漱石『吾輩は猫である』</cite></dt>
</dl>

　引用文と、その参照元のセットを、一種の定義型リストと解釈するわけです。定義型リストは、通常は、項目と内容の2つの部分から成り立ち、DT要素に定義する語句を、DD要素にはその語句の説明を記述します。しかしながら、DL要素は、使い方が柔軟で、DD要素あるいはDT要素のいずれか１つ以上を含めばよく、DDとDTの順番は問いません。また、DD要素ひとつに対して、複数のDT要素を含めても良いです。DT要素はインラインレベルの要素のみを含むことが出来て、DD要素は子要素として、ブロックレベルの要素のみを許可します。なので、DD要素の中にBLOCKQUOTE要素が来るのは、何ら問題ありません。上の例では、DT要素がDD要素の後ろに来ていますが、勿論、よく見かけるような形式—DT先行型が好みであれば、以下のような記述になるでしょう。

/* DL要素を用いたグループ化 その２ */
<dl class="quote">
<dt><cite>夏目漱石『吾輩は猫である』</cite>より抜粋</dt>
<dd>
 <blockquote>
  <p>吾輩は猫である。名前はまだない。</p>
 </blockquote>
</dd>
</dl>

　上記例では、引用元は書籍ですが、web上のリソースからの引用であれば、例えば、最初の例を使うと以下のような感じです。読み手に分かりやすいように、DT要素を２箇所で使っています。

<dl class="quote">
<dt>「<cite>いのちの流れ</cite>」より抜粋</dt>
<dd><blockquote
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="生命潮流">
<p>日夜 私の血管を流れる 同じ命の流れが
　この世界を流れ 旋律に合わせて踊る</p>
</blockquote></dd>
<dt class="cite">
 引用元: <a href="http://martin.p2b.jp/200812-stream-of-life.html">
 PPBLOG: 生命潮流
 </a>
</dt>
</dl>

　後は、見栄えを良くするために、これらDL要素などの振る舞いをスタイルシートで指定すればOKです。実際のサンプルは以下。

「いのちの流れ」より抜粋

日夜 私の血管を流れる 同じ命の流れが
この世界を流れ 旋律に合わせて踊る

引用元: PPBLOG: 生命潮流

　グループ化している点でHTMLパーサーにも分かりやすく(多分)、また読み手にとっても分かりやすいと思います。また、グループ化のメリットとして、スタイルシートでのデザインが容易くなることが挙げられます。このサイトで使っているBLOCKQUOTEに対するスタイルシートは、以下のようになっています(テーマBasicの場合)。

dl.quote {
  width: 86%;
  background: #fffafa;
  border: solid 1px #aaa;
  margin: 2em auto; padding: 0;
}
dl.quote dt{ padding: 5px 0 0px 10px;}
dl.quote dt cite { font-weight: 600; color: #556b2f; }
blockquote {
  font: 103%/1.7 "メイリオ", "Trebuchet MS", sans-serif;
  color: #484a47;
  margin: 0px auto;
  padding: 15px 15px 15px 48px;
  background: url(Images/quote.png) -5px -5px no-repeat; /* 引用の画像を左上に */
}

　ここでは、BLOCKQUOTE要素の背景に、引用符の画像を固定させていますが、DL要素の背景に、左上の引用符の画像を指定して、BLOCKQUOTE要素の右下にも引用符画像を用意すると以下のような感じになります。

ロマ書 5章3-5節 より

[...] More than that, we rejoice in our sufferings, knowing that suffering produces endurance, and endurance produces character, and character produces hope, and hope does not disappoint us, [...]

　これに対するスタイルシートは、以下のような感じです。

dl.quote {
  width: 360px;
  background: #fff;
  border: double 4px #2e8b57;
  margin: 2em auto;
}
dl.quote dt {
  padding: 6px 0 0 9px;
}
dl.quote dd {
  background: url(Images/quote-left.png) left top no-repeat;
}
dl.quote blockquote {
  color: #484a47;
  font: italic 105% "Trebuchet MS", sans-serif;
  margin: .7em auto 1em auto;
  padding : 1em 20px 1em 50px;
  background: url(Images/quote-right.png) 97% bottom no-repeat;
}

　この指定では、右下の引用符画像が、BLOCKQUOTEのサイズに応じて、適切な位置に納まるのがポイントでしょうか。これを、グループ化せずに、BLOCKQUOTE要素のみで実現しようとすると、そう簡単には行かないのではないかと思います。^[2]

2. CSSによるCITE属性やTITLE属性抽出の問題点

　さて、これまで、BLOCKQUOTE要素とCITE要素のグループ化およびそのメリットについて述べてきました。中には、BLOCKQUOTE要素のCITE属性があるのに、わざわざCITE要素も持ち出して冗長だと感じる方もいるでしょう。しかしながら、前述したように、CITE要素とCITE属性は全く別物です。でも、時々、その中身がほぼ同じという時もあるでしょう。そういう場合は、後述するCSSの指定で、比較的簡単にCITE属性やTITLE属性を抜き出して、読み手に「見せる」ことが可能です。以下に実例を挙げます（IE6,7以外のブラウザでしか意図したように振る舞いません）。

日夜 私の血管を流れる 同じ命の流れが
この世界を流れ 旋律に合わせて踊る

　IE6,7ユーザーの方に、Firefox3.0.5でのスクリーンショットを載せておきます。

　引用符の画像があって若干見づらいですが、ポイントはそこではなくて、「生命潮流」やら引用元のURIが表示されていることです。IE6,7ユーザー以外の方は、表示されているURL文字列をマウスで選択してみて下さい。このHTMLソースは以下のようです。

<blockquote class="css2compat"
 cite="http://martin.p2b.jp/200812-stream-of-life.html"
 title="生命潮流">
<p>日夜 私の血管を流れる 同じ命の流れが<br />
この世界を流れ 旋律に合わせて踊る</p>
</blockquote>

　BLOCKQUOTE要素のみです。これ以上ないぐらいシンプルですね。これに対するスタイルシートは以下。

blockquote.css2compat {
  background: #f8f8ff;
  border: solid 1px #aaa;
  width: 420px; margin: 2em auto;
  padding: 0 1em 0em 1em;
  font: normal 100%/1.7 'メイリオ';
}
blockquote.css2compat[title]:before {
  content: "¥300C" attr(title) "¥300D¥3088¥308A¥629C¥7C8B";
  display: block;
  padding: 5px;
  margin-left: -1em;
  color: #556b2f;
}
blockquote.css2compat[cite]:after {
  content: "¥5F15¥7528¥5143¥3A¥20" attr(cite);
  display: block;
  font-size: 80%;
  text-align: right;
  color: #777;
  margin-top: 1em;
}

　CSS2.1での:before、:after疑似要素を使って、CITE属性やTITLE属性を抜き出しています。CSS3ならコロン（:）が２つ連続します。モダンなブラウザならダブルコロン(::)でも問題なく作動しますが、IE8βが対応していません（コロン1個なら対応）。なかなか簡単に実装できて便利そうです。しかしながら、問題点が２つあって、ひとつは、ブラウザ最大シェアのIE6,7が未対応なこと。もうひとつは、Operaユーザー以外はそうでしょうが、折角、引用元のURIが表示されているのに、マウスでクリックすることも文字列を選択することも出来ないのです！^[3]　contentの文字列は、文字化けを避けるため、16進数の数値文字参照にしています。多分、日本語のままでも大丈夫でしょうけど。CSSの数値文字変換については、「参考リンク」のセクションにあるサイト（使えない文字）で行いました。

　URIが表示されているのに、それをクリックしてリンクすることも出来ず、それならばと文字列を選択しようにもそれすら出来ない現状では、読み手にやさしい実装とは言えません。何より、IE6,7では全く役に立ちませんし。これならば、JavaScriptで、BLOCKQUOTE要素のCITE属性やTITLE属性を読み出して、リンク表示させた方が読み手には都合が良いでしょう。そういうスクリプトは沢山見つかるでしょうし、ppBlogでも簡単に実装はできます。

　というわけで、この手法はネタとしては魅力的ですが、個人的には、あまりオススメできないかなと思います。

3. 引用ブックマークレットの活用

　そろそろ疲れてきたので、まとめようと思います。読み手にも、(おそらく)解析マシンにも優しい手法として、BLOCKQUOTE要素(+CITE属性)とCITE要素のグループ化が、個人的には、現時点での最適解かなと思います。ただ、このアプローチの弱点は、記述量が増えることです。只のテキストなので、データ量としては大したことはありませんが、ブログなど文章の書き手にとっては、なかなか見過ごせない問題です。そこで、こういうときの引用ブックマークレット。この手の引用ブックマークレットは探せば、いくらでもあると思いますが、自分なりに作成してみました。Firefoxでしか確認してません。他のブラウザ向けに調整が必要かも。

　使い方は、簡単で引用したいwebページの引用箇所を、マウスで選択した状態で、このブックマークレットを発動させると、DL要素でグループ化した状態で、テキストエリアが表示されるので、それをCtrl+Cなどでコピーして「Close」ボタンを押せばOKです。後は、それをブログ作成のテキストエリアなどに貼り付ければ良いわけです。

[quoteIt]

Firefoxなどでは、上記リンクを、ブラウザのリンクバーまでドラッグ＆ドロップすれば、そのままブックマークとして登録されます。また、登録しなくても、この記事の適当な部分を選択して上記リンクをクリックすれば、実際にどんな感じか試すことが出来ます。タグを含んだソースなどもコピペ出来るように考慮しています。リンクとかもそのまま有効になるようにしようかなと思いましたが、実際問題としてそこまでの機能は不要かなと思い、それは実装していません。JavaScriptの勉強としては面白そうですが。

4. 参考リンク

　以下、参考になるリンクを挙げておきます。

PC Tips > 引用に關する覺書/HTMLの定義のための覺書

よくまとまっています

永井俊哉ドットコム > XHTMLでの引用方法

とても参考になります

夢幻の棺 > HTMLにおける引用

よくまとまっています

sitepoint > Blockquote: Then and Now

Microformat^Gのcite-relなどの言及あり、興味深いです。コメントでのやりとりも参考になる。

使えない文字

記事で紹介したCSSのcontent文字列のCSS数値参照で使いました。ほかにも、HTML実体参照だとか、JavaScriptで日本語文字列をUnicode展開出来たり何かと便利なサイト。

---

　こんにちは。日本では、そろそろ年越しソバの準備でしょうか。こちらは、先ほど、お昼を済ませたところです（ラボに来ている面子で近くのビストロに行きました）。前回の書き庫(1.7.7リリース)で今年を締めくくるつもりでしたが、ちょっと修正があるので。仕様変更に伴うものです 2ファイルですが、ひとつは、JSスクリプト。前エントリーのコメントを読むと分かりますが、「続きを読む」が機能しなくなってました。これは、js/lib.jsの26行目を以下のように修正しています。

var s, ob; self = o(self); ob = self.sib(1);

後、バグではないですが、最新版には、ページ内リンク用のスクリプト処理も入れてます。

if(tar.klass('intralink')){ // A要素のクラス名がintralinkなら
  tar.cancelEvent(); // デフォルトのイベントをキャンセル
  o(tar.$.href.split('/').pop()).view(1); // そのID名を持つ要素にフォーカス
}

　これの使い道については、来年に。

これと、もう一つは、utils.php。コメント投稿先をindex.phpに変更したんですが、その影響で、コメント内容にタグが含まれていると、Bad Requestを食らって、投稿不能になります。これは、utils.phpの14行目を以下のように修正してます。

 if($mode != 'search' && $mode != 'comment'){

後、アマゾンアソシエイトプログラムで、商品画像がないときの画像へのパスに余計にスラッシュが入っていたので省いてます。1770行目。

$noImg = ROOT_PATH.'Images/notfound-amazon.png';

　以上の2点を添付しておきます。では、ちょっと早いですが、瑞祥新春(ずいしょうしんしゅん)。

　こんにちは。クリスマスの昨日、ppBlog1.7.7をリリースしました。一度クリスマス・リリース というのをしてみたかったんです。

　前のバージョン1.7.6の最終リリースが、11月10日でそれから結構色んなところをちょこちょこ弄(いじ)りました。ppBlogも少しずつバージョンを重ねてきて、そんなに弄るところもないだろうと思ったりもしてたんですが、決してそんなことはないですね。まぁ、やり尽くした感が来ても、それはそれで悲しいことなので、どこか弄る部分があるのは良いことでしょう。今回、新たな機能としては、以前のエントリーにも挙げてるものがありますが、以下のような感じです。

1. 不正ログイン試行を監視する機能を追加
2. コメントの通知メールに、ダイレクトに返信画面にアクセス出来るリンクを追加

　ありゃ、２つだけか。1番目のやつは、基本的にこのエントリー にあるものですが、特定のIPは不正チェックから除外する、いわゆるホワイトリストも考慮したものにしています。単に、admin.phpの最初の方に、$white_list = array(); という変数を設けただけです。ここには、チェックをして欲しくないIPアドレス（例えば、127.0.0.1とか）を配列形式で入れていけば良いのですが、注意しないといけないのは、IPアドレスなんて外から簡単に分かってしまうということです。なので、原則、このホワイトリストの活用はオススメしません。開発のデバグ用だと思って下さい。

　2番目のやつは、従来は「コメントが付きましたよ！」という通知メールを受け取って、その記事リンク先にアクセスしても、ログインしていない状態であれば、ログインという手順を踏んで、さらに返信のアイコンをクリックして･･･、というふうにスムーズに返信という訳にはいきませんでしたが、ダイレクト認証をつけたので、気軽に返信が可能です。ただし、セキュリティーを考慮して、メール送信時刻から24時間以内だけ有効なリンクとしています。

　後は、挙動が気になるところやらバグやら、見栄えの修正など、多岐に渡って弄ってます。主なものは以下の通り。

1. コメント投稿のaction送信先をadmin.phpからindex.phpに移した。
2. 更新pingサーバーリストを一新。かつ、管理画面にて、更新サーバーの重複をチェックするように。
3. アクセス解析の「リンク元」で、グーグルのイメージ検索のリンクがうまく動いていなかったのを修正。
4. JavaScriptソースの殆どは、圧縮した状態でリリースしていたのを、圧縮前の状態に戻した。
5. エディタ画面で、テーブルタグ挿入の際、行と列の指定が逆だったのを修正。
6. ブログ名（TITLE属性のやつ）にアポストロフィー（'）が含まれていると、お知らせメールのときなどに表示される送信者エンコードがうまく行ってないのを修正。

ってところです。具体的に、1番目から。

　従来は、コメント投稿の送信先がadmin.phpを介したものになっていました。でも考えてみれば、こうする必要性は全然ないし、admin.phpは管理者用に特化したものであるのが理に適っていると思いますので、送信先をindex.phpにしました。この影響で index.phpに修正が入っています。index.phpの253行目は、従来だと、

 case 'comment' : include_once('modules/comment.inc.php'); comment_form($UID); break;

のようになっていますが、最新版ではこの部分が、

 case 'comment' : include_once('modules/comment.inc.php'); catch_comment($mode); break;

となっています。

　2番目の更新ping関連は、以前のエントリー を参照。

　3番目は、グーグルの画像検索からp2b.jpにアクセスしてくることがあるのですが、そのリンクURLが正しくなかったので、Bad Requestが返ってました。それを修正して、以下のショットのようにきちんとリンクが有効なようにしました。

　４番目ですが、これまでは、複数のJavaScript（以下JS）圧縮プログラムを一度に走らせてくれる便利なサイトThe JavaScript CompressorRater を利用して、JSソースを圧縮していました。なぜ、圧縮していたかですが、少しでもサーバーからの転送量を減らそうと思ってです。でも、ppBlogで使っているJS群はもともとそんなに重量級ではないですし、このブロードバンドが当たり前のご時世、２０KB前後のファイルが16-17KBになったところで、そう大した差はないだろうし、確かにgzip圧縮までかませば3分の１ぐらいになりますが、これは汎用性に問題があります。何より、圧縮するとメンテナンスが大変ですし、JSソースに興味があって読みたいと思う人がいても、圧縮されて1行になってしまったJSソースなんぞ読む気にもなりません（この手の1行圧縮されたJSファイルを展開してくれる Js Decoder みたいなサービスもありますが）。というわけで、基本的にJSソースは圧縮前に戻しました。圧縮してみたいという方は、上記に挙げたサイトを利用すると良いかと思います。ただし、JSソース中にIE用の条件コンパイル(@cc_onとか)を含んでいるoParts.jsなどは注意しないと、この記述を単なるコメントとして削除してしまうものもあるので、動作検証は慎重に。

　例によって、前回バージョン（11月10日版）からの差分を添付しておきます。ちょっと数が多い気もしますが、基本的に、すべてそのまま既存のものの上書きで良いです。view.phpは、statディレクトリにあるview.phpとの入れ替えになります。notfound-amazon.pngは、トップディレクトリのImagesディレクトリにある既存のやつと入れ替えです。気分転換にアイコンを変えました。

　最後になりましたが、ppBlogをお使いの皆さん、いつも貴重なフィードバックありがとうございます。良いお年をお迎え下さい

---