目次
以前からメモやらコードを集積するサイトがオンライン上に欲しくて色々WikiエンジンやWebサービスを漁ったりしたけどなかなかしっくりこなかった。
んで、Wordpressを最新版にしたらページのURLの設定やらなにやら痒いところに手が届くようにいつの間にかなっていたので、せっかくだからWordpressでやってみようかなと。
というわけで試験的に分割。プログラムやソフトウェア関係はそっちのほうに書いていきます。飽きたら戻す。
feedburnerにRSSを登録しようと思ったらいつの間にかGoogleに取り込まれてた。んで、アカウント情報を移行しようと思ったらまさかのパスワードロスト、というかド忘れ。さあどうしよう。
Info
2009
0430
細々と使ってきたけど、自分の環境では安定したようなので公開。
タイトルまんま。↑のような目次を表示するプラグイン。動作にはPHP Markdown Extraが必要。Wordpressのバージョンは低くても動くような気がしないでもない。
このサイトではWordpressのページ機能を利用した全てのページでは自動的に目次を生成しているのだが、個別ページではなく通常の投稿でもたまーに長い文章を書くときがあるので、そっちでも自動で目次生成してくれたら楽だな～、と思って作った。
テンプレートに埋め込んで全ての記事に目次をつけるか、特定の記事にのみ目次をつけるかのどちらかになる。
以下のコードをテンプレートの本文ループ内のどこかに挿入する。
<?php
$toc = new toc_for_markdown;
$toc->create_toc( $post->post_content );
echo $toc->tochtml;
?>
本文に見出しが存在する場合は目次を表示する。
特定の記事にのみ目次を表示させたい場合は、記事本文内に以下のコードを挿入する。
<!--TOC-->
or
<!--TOC min="2" max="3"-->
このコードは前後に文字を入れず、行の内容がこのコードだけになるようにすること。（そうしないとpre要素内に誤爆する）
minの値は取得する見出しの最低レベル、maxは最高レベル。省略した場合は予め設定された最低レベル・最高レベルで取得する。
テンプレートに埋め込んで常に目次を生成している場合に、特定の記事で目次を表示したくない場合は、以下のコードを記事本文に挿入する。挿入場所はどこでも構わないが、行の内容はこのコードだけにすること。
<!--disable TOC-->
例えば以下のような文章があったとする。見出しと見出しの間には適当な文章が存在すると思いねぇ。
# タクティクスオウガ
## Chapter1
### 僕にその手を汚せというのか
## Chapter2
### 誰も僕を責めることはできない
### 思い通りにいかないのが世の中なんて割り切りたくないから
この文章を最低1最高2で目次にすると
<ul>
<li><a href="">タクティクスオウガ</a>
<ul>
<li><a href="">Chapter1</a></li>
<li><a href="">Chapter2</a></li>
<ul>
</li>
</ul>
このように、h1とh2だけ取得して目次を作成する。作成されたリストには見出しまでのリンクが付き、見出しにも適当なidが振られる。既にidが指定されていたらそのidへリンクするようにする。
Wordpressなら大抵本文のタイトルがh1だと思うので、h2からh3まで取得するのが丁度いいはずだ。h4まで取得すると目次が冗長になってしまう可能性がある。そこら辺は本文によって変えるといいだろう。
このCSSを適用することでこの記事トップの見出しにようにそれっぽく見えるようになる。見出しのHTMLはMarkdownを利用して生成しているのでidやclassを振ることができない。プラグインデフォルトのようにdivあたりで囲んでやるとよい。
.index ol {
counter-reset : list;
}
.index ol li {
list-style-type : none;
}
.index ol li:before {
content : counters( list, "." ) ". ";
counter-increment : list;
}
Markdown使ってないけど目次が欲しい方はTable of Contents Generatorをどうぞ。
Info
SBM Comments
u1_1132008
0903
使っているプラグインが軒並みアップデートして2.5以降のメニューに対応したっぽいので、Wordpress本体も2.3から2.6にアッデートした。
パッケージダウンロードして上書きしてアップグレードのリンクを押すだけで完了。相変わらず楽だなぁ。
2.6での変更点はこなかじ。
ダッシュボードのメニューのところに、プラグインだとアップデートできる数、コメントだと承認できる数が表示されるようになった。これは地味に便利だ。
それと、2.5からの機能だけどプラグインのアップデート。クリックするだけでアップデートしてくれるのでわざわざアップロードする必要が無くなった。実に良い。
その他、編集履歴は一人で使ってると恩恵が少ない。ブックマークレットは、まぁ便利かも。Gearsは・・・必要か？ そもそもGearsってオフラインでの動作やマルチスレッドの提供がメインだと思っていたんだが。コンテンツのキャッシュはmod_expireでも設定してブラウザにまかせるべきでは？
Info
2008
0731
Wordpress 2.3を使用。2.5はプラグインの仕様が変わってしまったので、使用するプラグイン全てが対応するまで見送る方向。
便利だから。特にページ作成機能。普及しているのでプラグインも多い。
欠点はコードのカオスっぷり。統一感の無さが泣ける。ってか1.xの頃から全く変わってないのは呆れるわ。
などなどの理由により。
サイドバーを取り払い、エラスティックにしてAutoPagerizeにも対応。なるべくシンプルになるように心がけた。
Wordpressを素のままで扱うとSQLクエリの過多でサーバーが重くなってしまうので、積極的にキャッシュを利用するようにした。
具体的にはWordpressに標準で備わっているオブジェクトキャッシュ。さらにプラグインのWP Super cacheを導入。極力データベースへアクセスしないようにした。
この時点でトップページを開いた時に要する時間は初回2秒前後、キャッシュ後0.3秒前後。
サイトの構成が安定したら一部ファイルにmod_expireを設定して、クライアント側でのキャッシュも行ってもらうつもり。レイアウトに使っている画像なんかは特に。
縦と横のサイズが固定されている要素に繰り返さないで表示する画像は連結できるので、RPGツクールのマップチップの如く、ひたすら連結。
トータルサイズは微増するが、httpアクセスが激減するという効果があるので実に有効。ページのローディングを妨げないようになる。
サイズが固定されていなくても、条件次第ではチップに組み込むことが可能だったりする。要工夫。
この手法はCSS Spriteとか言うらしい。
自分が常にJavaScriptをオフにしていることもあるが、サイトに仕込まれているJavaScriptはよほどのことが無い限り必要ではない、もしくは、無くてもいいようにサイトを設計すべきだと判断した。
というわけで、現在入れているのはGoogle Analytics等のアクセス解析のみ。
あと、JavaScriptじゃないけど「なかのひと」も外した。たまにしか見なかったし、表示するスペースが無かったので。
表示にはプラグインのSimple Tagsを利用。
タグの設定が甘い上に少ないので微妙に関連していないようなエントリも表示されている気がするが、そのうち解決すると思うので放置中。
本文からH1～H6の見出しを取得して、それらへのアンカーをリストで表示するようにした。コードはこなかじ。
<?php
if( is_archive( ) && !$already_out ) {
$already_out = true;
$header_list = array( );
foreach( $posts as $p ) {
array_push( $header_list, "1. [" . preg_replace( '/\[(.*?)\]\(.*?\)/', "$1", $p->post_title ) . "](#p" . $p->ID . ")" );
}
}
if( is_page( ) ) {
$header_cnt = 1;
$header_list = array( );
function getHeader( $matches ) {
global $header_cnt, $header_list;
$title = preg_replace( '/^\s|\s$/', "", preg_replace( '/\[(.*?)\]\(.*?\)/', "$1", $matches[2] ) );
$tab = str_repeat( "\t", strlen( $matches[1] ) - 2 );
$anchor = $matches[3] ? $matches[3] : "h" . $header_cnt++;
array_push( $header_list, $tab . "1. [" . $title . "](#" . $anchor . ")" );
return $matches[1] . " " . $title . " {#" . $anchor . "}";
}
if( $page > count( $pages ) )
$page = count( $pages );
$pages[$page-1] = preg_replace( '/\r\n|\r|\n/', "\n", $pages[$page-1] );
preg_replace_callback('{
^(\#{2,6})
[ ]*
(.+?)
(?:[ ]+\{\#([-_:a-zA-Z0-9]+)\})?
$
}xm','getHeader', $pages[$page-1] );
}
?>
<?php if( count( $header_list ) > 0 ) : ?>
<div class="index">
<p>目次</p>
<?php
$header_html = Markdown( join( $header_list, "\n" ) );
echo $header_html;
?>
要はMarkdownテキストから見出し部分（行頭が#の連続）を取得して、それらの頭に数字を付けて無理やり順序付きリストにしてからMarkdownに放り込んでいる。idが指定されていないなら自動で付加。
ワードプレス標準の動的URL設定が融通がきかないので結局mod_rewriteでゴリゴリ書いた。
最初はJSONとか考えたが、HTMLにしてしまうのが最もシンプル且つ効率的（どうせ再利用しないし）だと判断した。
スクリプトの中身はPraggerのRSS::loadで読み込んで適当に数を絞ってるだけ。
JavaScriptを使わずにブックマークコメントを表示を参照。
Pager、いわゆるカテゴリ等のページで現在のページ番号と前後及び始端終端の番号を表示するやつ、といえば分かるだろうか。Google検索の最下部のアレとか。
スタイルは以下のページから拝借した。
Some styles for your pagination
スパム対策として広く使われているプラグイン。要登録。
こちらもスパム対策。投稿者の投稿頻度、ページを開いてから投稿するまでの時間、内容に含まれるURLの数などなど、様々な手法で評価してスパムかどうかを判断することができる。
Wordpress標準のタグ機能を拡張するプラグイン。タグクラウドの表示や一括編集、関連したエントリの表示等ができる。
一度出力したページをキャッシュすることで、次回以降のDBアクセス時間を無くし、表示までの時間を大幅に短縮することができるプラグイン。何かとDBアクセスを行うWordpressには必須のプラグイン。
Markdown記法でエントリを記述できるようになる。可読性が高く、DBも微妙にスリム化できる。このプラグインを通さないようなテキストまでMarkdown記法を使ってしまうほど愛用している。
パンくずリストを表示するプラグイン。サイトURL設計が微妙にアレなので結局このプラグインからコードを拝借してパンくずリストを生成するようにした。
投稿時にAmazonから商品を検索して記事の中に商品の画像とリンクをD&Dでサクっと入れることができるようになるプラグイン。Operaで動かなかったので見送り。
自分の好きなフォントで表示できるというのは非常に魅力的だったが、画像だらけになるのは嫌なので結局使わなかった。
Info
2008
0714
ブックマークコメントを各エントリに表示したかったが、世に出回っているもののほとんどがJavaScript製。リニューアル後の方針の一つとして、できるだけJavaScriptは導入しないと決めていたので使いたくない。
だが、ご丁寧に各サービスともAPIを用意しているので、いっちょRubyで取得するか、と思ったら既に作っている人がいた。
これを自サイト用に改造しよう。
今までのエントリを上記スクリプトにかけると途方も無い時間がかかってしまう。「ブックマークされたエントリ」だけを処理にかけるというのが理想的だが、それをどのようにして取得するか。
はてなブックマークの注目・人気・新着を次へ次へと漁るのもめんどいなーと思っていたら、Get URLsという、指定したURL配下のブックマークされたURL一覧を取得できる素晴らしいサービスが存在したので、ありがたく利用させてもらうことにした。
取得したコメントをただのHTMLで出力し、Wordpressのテンプレート側からincludeする。こうすれば負荷が少ない上にキャッシュされるのでサイトにやさしい。
if( file_exists( $post->ID . ".html" ) ) {
include( $post->ID . ".html" );
}
こんな感じで、出力されたコメントHTMLが存在する時だけ表示するようにした。
このサイト用に特化しているので、取得するURLと出力部分を弄れば他サイトでも使えるはず。
以前praggerもcronで動かそうと思っていたが、なぜか動かなかった。それは今回も同様で、rubygemsが無いというエラーが空しく返ってくる。
どうしたもんかと途方に暮れそうになった時に以下のページを発見。
なお、crontab で実行されるときには、ほとんどの環境変数が設定されていないので注意が必要。~/.cshrc・~/.login で設定している環境変数は設定されていないし、PATH も /bin:/usr/bin くらいにしか通っていない。そのため、command の部分に指定するのはシェルスクリプトにしておいて、シェルスクリプトの先頭で環境変数の設定を行い、その後いろいろなコマンドを実行するようにしておくのがよいだろう。
な、なんだってー！？ rubygemsをインストールした時に.bashrcというファイルに環境変数が記述がされていたので、てっきりcron実行時に自動的に読んでいるものだと思ったら、全く読んでいなかったってことか！
というわけで、.bashrcの内容をコピペする。
#!/bin/sh
export PATH=$HOME/packages/bin:$PATH
export RUBYLIB=$HOME/packages/lib/ruby/site_ruby/1.8:$HOME/lib/ruby
export GEM_HOME=$HOME/packages/lib/ruby/gem
/usr/local/bin/ruby sbmcomments/sbmcomments.rb
cd ~/pragger
/usr/local/bin/ruby pragger.rb -c nicovideo.yaml
/usr/local/bin/ruby pragger.rb -c radio.yaml
exit
そして実行を待つこと数十分。エラーを出すこともなく無事にスクリプトが動いた！ Praggerのプラグインも動くようになった！
あとは大体1日毎にコメントを取得するように設定して設置完了。頻繁にブックマークされるようなサイトじゃないので、これぐらいの周期で十分だろう。
Info
2008
0603
このサイトの日記部分はWordpressで運用している。しかしバージョンは1.x。相当古いのでアップデートしようと思った。どうせなら文字コードもUTF-8にして運用したいと思ったが、現在のサーバーではデータベースにEUC-JPしか使えない。
サーバーのレンタル期日を確認すると4月29日。そういえば静的ファイルしか運用していないのになんとなくサーバー重かったなぁ。じゃあ、これを機にWordpressの最新版へバージョンアップしつつサーバーの移転をしてしまおうか、と思い立ったのが去年の12月。
んで、2月までには完了するだろうと思ったら、1月中旬から多忙に見舞われて少しずつ作業が遅れ、気が付いたらこんな日になってしまっていた。（XBOX360買って予想以上にハマってしまったりとか。この時期にデッドラ買うんじゃなかった・・・）。
というわけで、不完全ながらもサイトリニューアルを強制的に実行したので、色々なところに不具合が発生しています。地味に直してはいますが、しばらくは404とか多発すると思います。申し訳ない。
Info
2008
0501
前回の続きというか続報。RSSを修正したところ、FeedBurnerのエラーは発生しなくなった。そしてFastladderが取りに来てくれるようになったが、LivedoorReaderがまだだ。
FeedBurnerのUAに「livedoor HttpClient/0.1」が残ってるということは、一応毎日確認しに来てるっぽいのだが、そのままお帰りに。なぜだ。
とりあえずFeedBurner側での最適化を全てキャンセルした上でオリジナルとFeedBurner側のRSSがValidになっていることを確認。これでもダメならどうしよう。
問い合わせたら深夜にもかかわらず1時間くらいで反映された。対応早っ。どうもありがとうございます。
Info
2007
1121
GoogleReaderで文字化けするという苦情を頂いたので原因を調査。
どうやらGoogleReaderはEUC-JPがダメっぽい？ ためしにそのままUTF-8にしたら化けなかった。
FeedBurnerを見てみたら、こちらから取得したRSSをそのまま返してた。以前はスタイルシートを挟みつついろいろ追加してくれてた記憶があるんだが、アレやめたのか。
それまではFeedBurder側でUTF-8にしてくれていたが、やめたおかげでEUC-JPのものがそのまま表示され、GoogleReaderでエラーで化けた、と。こういうこと？
ってゆーか、エンコードをちゃんと明記してそのとおりにエンコードしてりゃあなんでもいいと思ったんだが、Google的には違うのか。
というわけで、こちら側でUTF-8にしたものをFeedBurnerに渡すようにしたんで多分大丈夫なはず。どっかでエラーが出るようなら指摘してください。
FeebBurnerの購読数がエラい減ってる件。どうやらLivedoorReaderからのリファラが無いようだ。こちらの更新間隔が長くなったからRSS取りに来る間隔が長くなったんだな・・・
・・・って、なんかゴッソリ落ちてる。レポートを見てみると9月22日を最後に、23日以降は一切LivedoorReaderから来てないようだ。一体なぜ？
再びFeedBurnerのフィード・メディックを見てみると、エラーが列記されてた。こっちが直ればLDRも来てくれるような気がしないでもないのでとりあえず様子見。
Info
2007
1118
はてなブックマーク - http://bmky.net の新着エントリー
このページを見てもらうと、暴満館の後に続く»が?なり妙な四角で表示されているのがわかると思う。
»はSJISでは表現できない文字のため、そのままコピーして非Unicodeな環境を経由してブックマークされた結果、このような文字化けが発生したと思われる。
ブックマークされてる身としては、なんだか妙に気持ち悪いので、この際だからSJISで表現できない記号を使うのをやめた。
せっかくなんで、XML上では文字参照で表すことを推奨されてる文字や、コード上で怒られそうな文字を禁止。大なり（>）、小なり（<）、クオート（"）、アンパサンド（&）などなど。これを踏まえて・・・
暴満館 - 適当なタイトル
暴満館 | 適当なタイトル
暴満館 + 適当なタイトル
暴満館 @ 適当なタイトル
[暴満館] 適当なタイトル
{暴満館} 適当なタイトル
*暴満館* 適当なタイトル
暴満館☆適当なタイトル
☆暴満館 適当なタイトル
★暴満館(0d10) 適当なタイトル
・・・無難にパイプかブラケットでいいか。
今になって思えば、「暴」の字はダメ文字だわ波ダッシュは爆弾抱えてるわ、とんでもない名前だったんだな。
あー、全ページ再生成するのめんど。
非SJIS文字をコピーして、非Unicode環境に貼り付けた場合、文字によってはWindows側が自動的にUnicodeからSJISの適当な文字へ変換してくれる。試しに「»」をコピーしてTerapadに貼り付ければ「≫」に変換されるのがわかると思う。
だが、それは意図した動作ではないと思われるので、Unicodeに対応したソフトウェアを使うとよい。テキストエディタならAlphaや萌ディタが対応している。両者ともJavaScript等によるマクロの記述が可能。
俺の場合Alphaに以下のスクリプトを用いることで文字と数値文字参照を相互に変換できるようにしている。
//文字列を数値文字参照に
function main( args ) {
var sel = Ambient.activeBuffer.editor.selection;
if( !sel.Empty )
sel.replace(
sel.Text
.replace( /&#x([\da-f]{2,4});/gi,
function( $0, $1 ) { return String.fromCharCode( "0x" + $1 ) } )
.replace( /./g,
function( $0 ) { return "&#x" + $0.charCodeAt( ).toString( 16 ).toUpperCase( ) + ";" } )
);
return 0;
}
//数値文字参照を文字列に
function main( args ) {
var sel = Ambient.activeBuffer.editor.selection;
if( !sel.Empty )
sel.replace(
sel.Text.replace( /&#x([\da-f]{2,4});/gi,
function( $0, $1 ) { return String.fromCharCode( "0x" + $1 ) } )
);
return 0;
}
これなら実際にHTML上で表現したい場合も一発で数値文字参照に変換できるので非常に楽。スクリプトを少し弄れば萌ディタ等でも利用可能だろう。
書いといてなんだけど、そもそも数値文字参照自体あんま使わねーよなー。携帯用絵文字を外字登録してて、検索とかに不便だからって変換したり、Greasemonkey内で日本語を含む文字列使いたいけどインストール時に化けるから、しかたなく変換したりとか。パッと思いついたのはこれぐらい？
Info
2006
0930
今後RSSはhttp://feeds.feedburner.jp/bmkyを利用してください。
FeedBurnerとは、RSSまとめたり加工したりアクセスの統計を見たりすることができるようになるサービス。
前々から、あー使おうかなーどうしようかなーあーリダイレクトとかーめんどー、という状態だったけど、最近ちまちまサイトを再構築してるので、その一環として利用開始。
移行自体は簡単に完了。
Redirect permanent /wp-rss.php http://feeds.feedburner.jp/bmky
これだけだし。
あとは、善良なRSSリーダーが301を受け取ってURLを変更してくれるのを祈るばかり。
Info
2006
0909
