こんばんは、martinです。JavaScript単体で稼働するソースハイライト表示用のスクリプトpettieSyntax.jsですが、スタイルシートのクラス指定に対応したバージョン（pettieSyntax-class.js）も作成してみました。と、同時に正規表現の微調整をしています。一応、CSSソースのハイライトにも対応していますが、CSS3のセレクタ とかは何でもありの状態なので、まぁ抜けがあったりするかも知れませんが、そこまで完璧を求めていないので。ちなみに、CSS3のセレクタは、具体例で挙げると以下のような感じです。

a[rel="external"] { /* REL属性がexternalなら外部アイコンの背景を付ける */
  padding-right: 5px;
  background: url(Images/external-icon.png) no-repeat right center;
 }
p[class~="foo"] { /* クラス名にfooが含まれていれば */
  margin: 0;
  padding: 0;
}
a[href$=".pdf"] { /* リンク名が.pdfで終わっていれば */
  background: url(Images/pdf.png) no-repeat right center;
}
a[hreflang|="en"] { /* リンク要素のhreflang属性がenで始まっていれば（enとかen-USとか） */
  background: url(Images/english.png) no-repeat right top;
}
div p:nth-child(2n+1) { /* DIVの子孫P要素で奇数番目のもの */
  background: ivory;
}

　別件ですが、JavaScriptライブラリのoParts.jsは、このCSS3のセレクタにも対応していて、例えば、

o('div:nth-child(2n+1)')

とすれば、奇数番目にあるDIV要素を一気に取得することが出来ます。お遊びですが、

<button onclick="o('ul li:nth-child(2n+1)').css('background:red');">
CLICK ME!
</button>

というコードを記述してみます。期待するのは、「UL要素の子孫のLI要素で奇数番目のやつの背景を赤にする」という動作です。

CLICK ME!

　syntax.jsの最新版とクラス対応版、およびそのCSSファイルを添付しておきます。ハイライト用のCSSファイルは、テーマのCSSファイルに追加しても良いでしょうし、以下のようにCSSファイルの中で呼び出すことも出来ます。

@import 'syntax.css';

　メンテナンスしやすいのは、上記のように別ファイルで用意しておくインポート方式でしょうか。

添付ファイル： syntax.js  syntax-class.js  syntax.css 

JavaScript  

　ソースをJavaScriptでハイライト表示するpettieSyntax ですが、CSSの表記にも対応しました。このせいでファイルサイズが3キロ弱になりましたが、まぁこの辺で落ち着くでしょう。

　色の指定をソースの上の方で、指定できるようにしてます。ソースを見ると、CSSの表記に対応した色指定だけ3色ありますが、これは１．タグ、２．CSSプロパティー(fontなど)、３．その実際の指定値　に対応しています。

var cssprops = ['indigo', 'slategray', 'indianred', /((?:[-#a-z0-9.,_* +:¥r¥n[¥]=]{2,}|[abipq*]))¥s*¥{¥s*[^}=]+?¥}/ig];

　実際のデモとして、このサイトのベーシックテーマに適用しているPREタグのCSS指定をば。

pre {
  font: 500 1em/1.4 "Consolas","Bitstream Vera Sans Mono","Lucida Console","Courier New",Verdana,Meiryo,monospace;
  background: #f6f6f9;
  border: double 4px #808080;
  border-width: 0 0 0 4px;
  margin: 1em auto;
  padding: 20px;
  width: 89%;
  height: 3em;
  color: #333;
  clear: both;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0.1px;
}
body[id=weblog] pre { /* IE６以外のモダンなブラウザ用 */
  overflow: auto;
  height: auto;
}

　こんな感じです。仕様上、PHPやJavaScript用キーワードの中途半端な対応と違って、CSSのあらゆるプロパティーに対応してると思います。最新版を添付しておきます。

添付ファイル： syntax.js 

JavaScript  

　こんにちは。たまにはアップデート以外の記事も書きたいので。

　前々から思っていたのですが、このブログではPHPとかJavaScriptのソースを提示することがままあります。現状、モノクロの味気ないソースコードだったので、PHPマニュアルのユーザーノート にあるようなカラフルな色付けにしたいなと思っていたわけです。この手のことを実現するには大きく2通りのアプローチがあって、サーバー側でハイライト表示の処理をして読み込ませる方法と、もうひとつはクライアント側のJavaScriptに解析させてその場でハイライト表示させる方法です。前者の例だと、PHPライブラリではGeSHi - Generic Syntax Highlighter などがあり、後者だとグーグルのgoogle-code-prettify が有名でしょうか。

　でも、この手のやつって、これようのCSSファイルも用意しないといけないし、ファイルサイズはでかいし、設置が面倒そうだなと。なので書いてみました。基本的に、自分用なのでPHPとJavaScriptの一部の関数しかサポートしていませんが、まぁ、要は見栄えを良くすることが目的なので、すべてを網羅する必要はないと考えてます。PHPの組み込み関数なんて山ほどありますし。おかげで随分とサイズが小さいスクリプトになりましたが、それっぽく見えます。

　特徴としては、このスクリプト単体で動作可能ということです。他の見栄えのためのCSSファイルとかは必要ないです。記事の中のPREタグを見つけたら、その中身をハイライト表示します。初めは、PREタグに特定のクラス名を付けて、それを認識させようかと思っていましたが、そうすると過去の記事の書き換えをしないといけないし、どうせPREタグに書くのはソースコードぐらいだろうと割り切り、PREタグに絞りました。早速ですが、そのソースコードをこのスクリプトを使って表示してみます。

/*
 Lightweight syntax-analyzing script
 Copyright: modified BSD license 2008 martin
   version: 20080803.204553
*/

function pettieSyntax(){
 var cssprops = ['#c03', '#003366', '#636', /((?:[^{;_<]{2,}|[abipq*]))¥s*?¥{(¥s*[^}=_[¥]?<>]+?)¥}/ig];
 var etcetera = ['#c33', /( > | < )/g];
 var operants = ['green', /(¥/¥/¥-¥->|¥+¥+|¥-¥-|!?===?|<=|>=|=>|¥+=|¥-=|!=|&&|¥|¥|| = )/g];
 var variants = ['#669', /(¥$¥w+?¥b|var¥b¥w+¥b|@)/g];
 var htmltags = ['navy', /(<¥/¥w+?>|<¥w+|<¥?(?:xml|php)|(?:¥?|¥/)>|>)/g];
 var keywords = ['blue', /(¥b(?:alert|[Aa]rray|break|case|catch|class|charset|continue|Date|default|define|delete|do|else|false|FALSE|for|function|global|i[fn]|instanceof|new|null|Object|return|script|src|type|switch|this|throw|document¥S|TRUE|true|echo|try|typeof|var|void|while|window¥S|with|Location|version|encoding)¥b)/g];
 var decimals = ['#c69', /([¥s:¥/¥(,[+;."=>])(¥-?¥d+(?:¥.¥d+)?)(%|px|pt|em)?/g];
 var equipped = ['#036', /([¥.¥s(@>])([^'"¥(¥n=¥s<>¥/]+?)([¥( ])/g];
 var oneliner = ['#906', /('[^'¥r¥n]+?'|"[^"]*?"|<![^¥r¥n]+?¥-¥-.*?>)/g];
 var regulars = ['tomato', /([¥s(])(¥/[^¥r¥n]+?¥/)([igmy¥s¥);.])/g];
 var enoparts = ['indigo', /(¥b(?:o|oParts)¥b|¥.(?:away|moveTo|sizeTo|dimension|target)¥(¥)|¥.(?:loadScript|evt|metrics|start|css|view|each|sib))/g];
 var comments = ['#093', /([^:]|)((?:¥/¥/|#)¥s+[^'¥r¥n]+(?:¥r?¥n?|$)|¥/¥*[¥s¥S]+?¥*¥/)/g];
 var omitspan = function(m){ return m.replace(/<span[^>]*?>/ig, '').replace(/<¥/span>/ig, '');}
 var targets = document.getElementsByTagName('PRE');
 if(targets){
  for(var t, i = 0; t = targets[i++];){
   var c = t.innerHTML.replace(/<(?:span|code)[^>]*?>([^<]+?)<¥/(?:span|code)>/ig, '$1').replace(/¥t/g, '').replace(/'/g, ''').replace(/"/g, '"');
   if(/<(?:a |img )/i.test(c)) continue;
   c = c.replace(cssprops[3], function(A, B, C){ return /:/.test(C) ? '<span style=¥tcolor:'+cssprops[0]+'¥t>'+B+'</span>' + A.replace(B, '').replace(/([^:{]+?):([^;]+?);/g, '<span style=¥tcolor:'+cssprops[1]+'¥t>$1</span>:<span style=¥tcolor:'+cssprops[2]+'¥t>$2</span>;') : A;});
   c = c.replace(etcetera[1], '<span style=¥tcolor:'+etcetera[0]+'¥t>$1</span>');
   c = c.replace(operants[1], '<span style=¥tcolor:'+operants[0]+'¥t>$1</span>');
   c = c.replace(variants[1], '<span style=¥tcolor:'+variants[0]+'¥t>$1</span>');
   c = c.replace(htmltags[1], '<span style=¥tcolor:'+htmltags[0]+'¥t>$1</span>');
   c = c.replace(keywords[1], '<span style=¥tcolor:'+keywords[0]+';font-weight:bold¥t>$1</span>');
   c = c.replace(equipped[1], function (A, B, C, D){return B + '<span style=¥tcolor:'+equipped[0]+'¥t>' + C + '</span>' + D;});
   c = c.replace(enoparts[1], '<span style=¥tcolor:'+enoparts[0]+';font-weight:bold;¥t>$1</span>');
   c = c.replace(decimals[1], '$1<span style=¥tcolor:'+decimals[0]+'¥t>$2$3</span>');
   c = c.replace(regulars[1], function (A, B, C, D){return B + '<span style=¥tcolor:'+regulars[0]+'¥t>' + omitspan(C) + '</span>' + D;});
   c = c.replace(oneliner[1], function (A, B){return '<span style=¥tcolor:'+oneliner[0]+'¥t>' + omitspan(B) + '</span>';});
   c = c.replace(comments[1], function (A, B, C){return B + '<span style="color:'+comments[0]+'">' + omitspan(C) + '</span>';});
   c = c.replace(/¥t/g, '"');
   if(/*@cc_on!@*/false){
    t.outerHTML = '¥n<pre>' + c + '</pre>¥n'; /* IEの改行対策です */
   } else t.innerHTML = c;
  };
 }
};

　ファイルサイズは2キロ前後と小さいです。ppBlogで使うのであれば、とりあえずこのファイルをjsディレクトリにアップロードして、後は、lib.jsの最初の方で、このスクリプトを以下のように呼び出します。

oParts.loadScript('js/syntax.js');

次に同じlib.jsの下の方にある、oParts.start関数内で、このpettieSyntax()を呼び出せばOKです。

if(typeof pettieSyntax != UD) pettieSyntax();

　コードを見れば分かりますが、ハイライトの色はSPANタグ内でスタイルシート指定してますので、この部分を好きな色に変えれば良いです。あと、強調したいキーワードを追加したいときも、ソース内の該当箇所に追加していけばよいです。

　ppBlog使用前提なら、上のような設置になりますが、純粋に単体で動かしたい場合は、外部スクリプトとして、

<script type="text/javascript" src="path/to/syntax.js"></script>

みたく読み込ませて、ページ読み込み完了後にpettieSyntax()を呼べば良いです。

　まだろくに動作検証していないのですが、興味がある方はどうぞ。syntax.jsと、あと、ppBlogの設置例としてlib.jsを添付しておきます。

添付ファイル： syntax.js  lib.js 

JavaScript  

　こんばんは。こっちに来て体重が数キロ減りちょっと吃驚したので最近心がけてよく食べるようにしているmartinです。このところ、やたら忙しくppBlogの開発にまるで時間が割けませんでしたが、ちょいと一息おけたので、一気に進めるところまで進めてみました。何とか頭に思い描いていた感じに仕上がってますが、静的リンクの出力を取り入れようとしてからこんなに時間が経つとは。。

　結果的に、かなりの部分で静的リンク出力に見合ったナビゲーションにすることが出来ましたが、あとちょっと残ってます。まぁ、拘らなければ良いのですが、どうも統一感がないと落ち着かないので。

　従来の動的なリンク出力と静的リンク出力は、管理画面で簡単に切り替えることが出来ます。この動作を実現させたいがために、utils.phpは大幅な書き換えを余儀なくされたんですが、苦心した甲斐があったと思ってます。

　あとは、ブログのページングをデフォルトで付けてみました。これがあると古い記事にも簡単にアクセス出来るので、従来のものにあった「古い順にソート」するという機能はオプション扱いになります（各テーマテンプレートで指定）。

　現状、日本語で指定したカテゴリーは、独自のエンコード処理をしてリンク表示(英数字指定のカテゴリーはそのまま)していますが、これが任意のアルファベットを指定できるようになれば、だいたいやりたいことは済むかなぁ。

　1.7.1ベータ版をお使いの方は、記事やコメント・トラックバックなどのログファイルなどを除いて、ほぼ全てのPHPファイルを上書きすれば良いと思います。index.phpもかなり書き換えてます。あ、一番の方法は、新規にアップして、そこに従来のログファイルを流し込むというやり方ですね。

　まだナビが変な部分がありますが、ちょっとお腹が空いたので、とりあえず。

ppBlog  

　こんばんは。これは、数年前にppBlogを開発し始めて、そう経たないうちに要望として出ていたことなんですが、ppBlogが出力するページの静的化を検討中です。静的化と言っても、実際にHTMLとして生成したファイルをサーバーに置いておくわけではなく、「見かけ上」静的ファイルがあるように見せるというものです。具体的には、Apacheサーバーで使用可能なmod_rewrite^Gを使用します。mod_rewriteの設定を.htaccessファイルとして記述し、サーバー上に置いときます。このやり方では、.htaccessファイルが有効である必要がありますが、多くのレンタルサーバーでは、Apacheの設定をいじれない代わりに、この.htaccessファイルを使用可にしていると思います。

　そもそも、どうして静的化が必要なのか？という話ですが、これは動的ページと静的ページ(1) 一般論 あたりによく纏まっています。要はSEO絡みの問題なのですが、少なくともグーグルに関しては、「動的URLも静的URLと同様に扱う」 ということらしいので、数年前ならいざ知らず、SEO対策として是非とも静的リンクにしたい、というのはちょっぴりout-of-dateなことかもしれません。実は、個人的には検索エンジン対策のための静的化というのはあまり興味がありませんで、じゃなぜ静的化かというと、勿論、そういう要望があるという理由と、あと、個人的にはこっちにウェイトがあるんですが、見た目がすっきりするというのがあります。昨日から本格的にいじりだしたんで、まだどうするか流動的なんですが、一応、個人のブログサイト の方に反映させています。静的化というと何となく拡張子htmlで終わってるというイメージがありますが、SEO的には拡張子のあるなしは関係ないはずです。なので拡張子なしにしていますが(すっきりするので)、これだと何だか落ち着かないという意見もあるでしょうから、その辺は管理画面で指定できるようにします。

　で、静的リンクの指定ですが、現状、2パターン用意してます。ひとつは、記事のタイトルとは別に、予め英数字からなるタイトルを別に指定しておいて、その指定があれば(例えばemmenagementという指定)、

http://martin.p2b.jp/200802-emmenagement 

みたいになるパターン（頭の200802-は自動的に付加されます）と、あとはそういう指定がない場合のパターンで、これは単にUIDがリンクになります。以下のような感じです。

http://martin.p2b.jp/1201100476 

　最初のパターンでは日付が勝手に付加されますが、これはサーバーへの負荷を減らすのが目的です。これがないと、リクエストの度に、すべてのログを走査して合致するタイトルを探し出す必要がありますが、予め日付が分かればログを決め打ち出来るので。これに関しては、UIDとリンク用記事タイトルの対応表を別に作っておくという手もありますが。まぁ、何となく日付が分かるのも良いかなと、ない方がもっとスッキリしますが。。このあたりは如何様にも出来ます。まだ途中なんで、記事リンクにちゃんと反映されていないとかありますが、まぁそのうち改善されるでしょう。何か要望とかありましたらどうぞ。