PageButeプラグインで静的ページ分割

明けましておめでとうございます。
本年もこのサイトをどうぞよろしくお願いいたします。
遅ればせながら新年のご挨拶。2009年の初エントリーです。

昨年は転職という大きな転機を迎えましたが無事乗り越え、今に至っております。一昨年に引き続きスクールで講師を務めたり、雑誌に寄稿させてもらうという経験もでき、充実した一年となりました。

さて、年始の挨拶はここまでで・・・ここから本題です。
昨日MTの案件をやっていたのですが、アーカイブページ分割の作業をすることとなり、いろいろと調べていました。

MTが<MTEntries>で書き出すアーカイブ一覧は、lastnモディファイアなどで設定された値を上限に記事を順番に出力します。ただし、上限値を超える数の記事が登録されていた場合、超えた分の記事は表示されないという不親切な仕様となっています。
この上限値を超えた分を「次のページへ」などとして参照できるようにするのがページ分割です。ページ分割を実現するには、専用のプラグインを導入するのが一般的になっています。

MTPaginateプラグインが使えればこのサイトと同じやり方でできるのですが、PHP化はされていないし、商用利用は有料ということでボツに。そこで、PageButeプラグイン(現バージョン:3.2.2)を使うことにしました。

このPageButeプラグイン、PHP化していなくても使えるとあって、静的HTMLとしてページを書き出してくれます。例えば「index.html」を分割設定すると、「index_2.html」、「index_3.html」…というようにページを自動的に増やしてくれるという、素晴らしいプラグインです。

公式ページを見て導入はあっさりできたのですが、シンプルであるが故に任意に設定できる項目が少ない印象を受けました。

このプラグインで書き出す<$MTPageLists$>は、分割後の各ページへのリンク一覧を書き出すMTタグですが、リンクテキストとなるページ番号は必ず昇順(1、2、3…というように1から始まる)になります。今回の案件ではこの番号を降順(10、9、8…というように最後の番号から始まる)としなければならなかったので、プラグインを改変して解決しました。

この改変をすると、リンク一覧に並ぶリンクテキスト(ページ番号)が降順になります。順番が入れ替わるのはリンクテキストのみで、記事の並び順自体は変更されません。動作確認をしたのはMovableType 4.23に、改変したPageBute 3.2.2をインストールした環境です。

改変した点は以下の通りです。

  1. PageBute.pl の182行目?189行目のforループの部分を以下のように変更

    my $temp_page_count = $lists->{max_page};
    for (my $i = $lists->{min_page}; $i <= $lists->{max_page}; $i++) {
    $page_lists .= $i == $lists->{min_page} ? '' : $delim;
    $page_lists .= $pb->{link_start};
    $page_lists .= $i == $page_count
    ? "<span class=\"current_page\">$temp_page_count</span>"
    : &_create_link($i, $site_url . $filename, $file_ext, $temp_page_count, 'link_page');
    $page_lists .= $pb->{link_close};
    $temp_page_count--;
    }

    最大ページ数を格納する変数をもう1個作って、ループの度にデクリメントして、リンクの名前として代入してあげます。

  2. MTテンプレートの<MTPageContents>タグを以下のように変更。

    <MTPageContents count="10" navi_count="999">

    countモディファイアには1ページに表示したい数を書きます。navi_countモディファイアはリンク数の上限を表す値です。公式ページには掲載されていないモディファイアですが、改変後はこの値を与えてあげないと特定の条件でうまくいきません。

あとは改変後のプラグインをインストールしなおして、該当のアーカイブを再構築すれば完了。

仕事初めの日からperlを触ったので、これも何かの縁かと考えて今年はperlを学ぼうかと思います。

Dreamweaverコードビューを背景黒にして使ってみた(3ヶ月経過)

Dreamweaverの背景を黒にして使う方法(改訂版) – Rewishという記事を読み、これは私もやってみようと思い立ち、自分なりのコードカラーリングを作ってから約3ヶ月。

最初のうちは足りない設定が色々と目に付いたものですが、現在では日々の業務でほぼ問題なく使えているので、ここで公開しておこうと思います。

XMLファイル直ですが、ここからダウンロード → Colors.xml

この設定を導入すると、Dreamweaverのコードビューが以下のスクリーンショットみたいになります。

(X)HTML
Dreamweaverのオリジナルコードカラーリングのスクリーンショット((X)HTML)
CSS
Dreamweaverのオリジナルコードカラーリングのスクリーンショット(CSS)
JavaScript
Dreamweaverのオリジナルコードカラーリングのスクリーンショット(JavaScript)

背景色は #222222 として使っています。このくらいコントラスト低めが好みです。コントラストが強いと目が痛くなるので苦手です。。実際、この設定にしてからかなり目が楽になったような気がします。個人の好みだとは思うのですが、背景黒オススメとだけ言っておきます。

導入方法については、冒頭のRewishさんの記事を見るといいですよ。

対応しているファイル形式は (X)HTML、CSS、JavaScript、XML、テキストファイルくらい。他の形式の色は設定していません。なのでPHPファイルとか開くとヒドイことになります。もしお使いになる場合、その辺はご自分で設定してくださいませ。。

動作確認をできたのは Dreamweaver 8 と Dreamweaver CS3 の2つ。8で作ったんですけど、CS3でファイルを開いてもほぼ同じ見た目だったので、まず問題ないかと思います。

もし不具合があるようでしたらこっそり教えていただけると嬉しいです。

ユーザーの自発的な行動を促す言い回し

とあるブログサイトを見ていて思ったこと。

そのサイトはブログランキングに参加していて、ランキングに投票するためのバナーが張ってあり、その横に「クリックありがとうございます」という具合の文言が書いてありました。

この文言の役割は「クリックを促すこと」だと思うのですが、直接的にクリックを促してはいません。一見、クリックしてくれるユーザーに対して感謝しているかのような文言ですが、執筆者の意図としては「クリックしてほしい」ですよね。

これって、駅のトイレで便器の近くの壁に「いつもきれいにお使いいただき、ありがとうございます」っていう感じのプレートが張ってあるのと同じだな、と思いました。

仮に「きれいに使ってください」とか「汚さないでください」なんていう文言が書いてあったら、どうでしょうか。押し付けられた感が否めませんよね。命令されると反発を覚えてしまうのが我々人間ではないでしょうか(話がでかくなったなー)。

前者であれば、「皆きれいに使っているのか、だったら自分もきれいに使わなければ」という気持ちが働いて、利用者が自然と汚さないようにしてくれる(=効果があがる)のではないでしょうか。

ユーザーに行動を起こしてほしい場合、ユーザーが自発的にそうしたくなるように誘導することが大切なんだな、と思った次第です。

[Memo]:visitedクラスを利用した行動ターゲティング広告

とても興味深い内容だったのでメモ。

id:Hamachiya2さんのデモのソースを見るとCSSの:visited擬似クラスと、JavaScriptを併用した形で、動的にコンテンツを入れ替える方法が分かります。

まずCSSで:visited擬似クラスに別のスタイルを書いておいて

a {
display: block;
height: 22px;
overflow: hidden;
}
a:visited {
height: 16px;
}

JavaScriptの以下のようなコードで、訪問の有無を調べています。

var defHeight = 22;
var visHeight = 16;
...中略...
// 引数にはa要素ノードを入れる
// その高さがデフォルトでない(既訪問リンク)ならtrueを返す
// その高さがデフォルト(未訪問リンク)ならfalse返す
function checkVisited(elm) {
return (elm.offsetHeight != defHeight);
}

実行はwindow.onloadのイベントで。なるほど。

自らの意図しない情報が、このように簡単に取得されてしまうのかと思うと、気持ちが悪いな・・・と思うと同時に、簡単であるが故に防ぎようがないと思いました。