トラックバックピープルにスクロールバーをつける

May 31,2005 8:50 PM
Category:[BlogPeople]
Tag:[, , , ]
Permalink

トラックバックピープルのリンクリストにスクロールバーをつけるカスタマイズです。リンクリストにスクロールバーをつけるシリーズ

BlogPeopleのリンクリストにスクロールバーをつける MyBlogList にスクロールバーをつける(改)

に続く第3弾です。

カスタマイズの前に、トラックバックピープルのリンクリストのデフォルトのタグは下記のようになっています。

<div class="blogpeople-tbp">
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル1</a></div>
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル2</a></div>
         :
    (最大10トラックバック)
         :
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトルn</a></div>
<div class="blogpeople-tbp-credit">(クレジットバナー)<br />(クレジット「Powered by BlogPeople」)</div>
</div>

BlogPeople 本来のリンクリストはリンク部分とクレジットバナーが div タグで分割されているので、CSSの設定のみでスクロールとクレジットバナーを分割できたのですが、トラックバックピープルは新着記事を最大10件まで表示するという仕様であるため、タグの構成が異なっているようです。言い換えるとCSSに、

リスト全体: blogpeople-tbp
各記事: blogpeople-tbp-link
クレジットバナー・クレジット: blogpeople-tbp-credit

というクラスセレクタを設定することで、きめ細かいスタイルを指定することができます。これはトラックバックピープルの「スクリプトの作成」ページの下の方に「上級者向け情報」として説明されています。

他のリンクリストと同様にスクロールバーを与える場合、本来のタグ構成では実現できないため、クレジットバナーおよびクレジットをスクロールバーの外に完全に追い出すスクリプトを作りました。
動作的には最初のリストに対し、青色の div タグを挿入して記事側の blogpeople-tbp-link 全体を blogpeople-tbp で括っているようにみせかけ、余った </div> に対応する <div blogpeople-tbp-box> を付与することでタグの帳尻を合わせています。

<div class="blogpeople-tbp-box">
<div class="blogpeople-tbp">
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル1</a></div>
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル2</a></div>
         :
    (最大10トラックバック)
         :
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトルn</a></div>
</div>
<div class="blogpeople-tbp-credit">(クレジットバナー)<br />(クレジット「Powered by BlogPeople」)</div>
</div>

以下カスタマイズ方法です。

1.トラックバックピープル表示用タグの修正

各テンプレートに設定している、トラックバックピープルのリストを表示するタグ

<script type="text/javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>

を div タグ等で括って

<div class="side" id="hogehoge">
<script language="javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>
</div>

としてください。括られていない場合は、サンプルのようにタグを追加してください(タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です)。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください(=他の id 属性名と重複しないこと)。
追加が終わったら保存・再構築してください。

2.テンプレートにJavaScript追加

1項のトラックバックピープル表示用タグの下に、下記のスクリプト(青色)を追加します。

<div class="side" id="hogehoge">
<script language="javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>
</div>
 
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
tag1 = '<div';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="blogpeople-tbp-box">';
list = nodes.split(tag1);
flg = 0;
for (i = 0; i < list.length; i++) {
    if(list.length == i + 1) {
        data += '</div><div ' + list[i];
        break;
    } else {
        if (i != 0){
            data += '<div ' + list[i];
        } else {
            data += list[i];
        }
        continue;
    }
}
document.getElementById(id).innerHTML = data;
//-->
</script>

スクリプトの3行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。
追加が終わったら保存・再構築してください。

3.CSS設定

下記のクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。場所はどこでも大丈夫です。

.blogpeople-tbp-box {
    /* 必要に応じて設定 */
}
 
.blogpeople-tbp {
    overflow: auto;
    height: 60px;
}
 
.blogpeople-tbp-credit {
    margin-top: 10px;
    margin-bottom: 0px;
}

上から順番に、全体・リンクリスト用・クレジットバナーおよびクレジット用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.07.25 追記
2項のHTMLタグに誤りがありましたので修正しました。

Comments [27] | Trackbacks [16]

メジャーも

May 30,2005 8:50 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [7] | Trackbacks [1]

マイナーも

May 29,2005 11:59 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [7] | Trackbacks [1]

重複トラックバック防止プラグイン

May 28,2005 11:59 PM
Category:[コールバック]
Tag:[, , , ]
Permalink

同一エントリーへの重複トラックバックを抑止するプラグインです。このプラグインは Movable Type 3.1/3.2 で有効です。3.3 以降は「重複トラックバック防止プラグイン(3.3版)」をご利用ください

duplicateTBPingfilter.zip (3.2x版)
duplicateTBPingfilter.zip (3.1x版) *1
2005.05.28 Ver 1.00
2005.05.30 Ver 1.01 ロジック修正(1.00と機能的な差分はありません)
2005.05.30 Ver 1.02 プラグイン名変更(〃) ←すいません…
2005.10.05 Ver 2.00 3.2x版対応(ブログ別設定機能追加)

本プラグインは下記の機能を有します。

  • 同一エントリーに対する、同一URLからのトラックバックを受け付けないようにすることができます。
  • チェック方法は、トラックバック受信時、同一エントリー内のトラックバック(の source_url )を新着順に取り出し、受信したトラックバックの source_url と比較、同一URLであればフィルタ対象とします。
  • 受信したトラックバックに含まれるタイトルまたは概要を含めたフィルタリングが可能です。デフォルトではタイトル・概要が全く同じトラックバックのみをフィルタリングしています(カスタマイズ方法は後述)。
  • チェックするトラックバック数を指定できます(カスタマイズ方法は後述)。
  • トラックバックがフィルタリングされた場合、ログを出力します。

1.使用方法

duplicateTBPingfilter.zipをダウンロードし、アーカイブを解凍してください。解凍すると中に duplicateTBPingfilter.pl がありますので Movable Type の plugins ディレクトリにアップロードしてください。3.2x の場合は duplicateTBPingfilter ディレクトリを含めてplugins ディレクトリにアップロードしてください。管理画面のメイン・メニューの「利用可能なプラグインの設定」に「Duplicate Trackback Ping Filter Plugin ?」が表示されればOKです。3.2xの場合は、管理メニューの[設定]→[プラグイン]→[Duplicate Trackback Ping Filter Plugin]の右側にある「設定を表示」をクリックして、左に表示されたチェックボックスをチェックし、「変更を保存」をクリックすることで有効になります。

フィルタされたURLについてはログに

Filter duplicate trackback ping from the following URL:http://?

というメッセージを出力します。

2.カスタマイズ

2.1 トラックバックのタイトルをフィルタ対象にする

エントリー内に同一URLからのトラックバックが検出された場合、新着トラックバックのタイトルと登録済トラックバックのタイトルを比較する/しないを設定します。比較する場合、タイトルの文字列が異なっていれば新たなトラックバックとして受け付けます。比較する場合は "1"、しない場合は "0" を赤色部分に設定します。デフォルトは "1" を設定しています。

our $title = 1;

2.2 トラックバックの概要をフィルタ対象にする

エントリー内に同一URLからのトラックバックが検出された場合、新着トラックバックの概要と登録済トラックバックの概要を比較する/しないを設定します。比較する場合、概要の文字列が異なっていれば新たなトラックバックとして受け付けます。比較する場合は "1"、しない場合は "0" を赤色部分に設定します。デフォルトは "1" を設定しています。

our $excerpt = 1;

2.3 チェックするトラックバック数を指定する

エントリーに登録されたトラックバックと最大いくつまでチェックするかを指定します。例えば3つまでチェックしたい場合は "3" を赤色部分に設定します。デフォルトは "0" で、これはエントリー内の全てのトラックバックがチェック対象であることを意味します(同一URLのトラックバックが見つかった時点で処理を終了します)。

our $counter = 0;

3.その他

このプラグインは TBPingFilter という Application Level Callback を使用しています。フィルタされた場合はトラックバックを登録しませんが相手サイトには 403 Forbidden が返却されます。これを正常に終了したかのようにするには、lib/MT/App/Trackback.pm の 280行目辺りを

$ping->blog_name($blog_name);
if (!MT->run_callbacks('TBPingFilter', $app, $ping)) {
    return $app->_response(Error => "", Code => 403);
    return 1;
}
 
$ping->save;

と変更します。この変更により、相手サイトにはトラックバックが正常終了したかのようにみえますので、さらに重複トラックバックが送信される可能性が低くなります。ただし他のプラグインと競合している場合はご注意ください。

なお、送信時間が極端に近いトラックバックについては重複してしまいます。また離れていても同一トラックバックとみなせないケースがあるようですので予めご容赦ください。

2005.05.30 変更
本文をプラグインの説明と入れ替えました。以前の内容は下記の追記に移動しました。

2005.07.06 変更
本文の最後に重複する可能性のあるケースを追加しました。

2005.10.05 追記
3.2x版をリリースしました。また本文に3.2x版の設定方法を追記しました。


*1:3.2xでも使用可能ですが、ブログ別の設定はできません。

Comments [31] | Trackbacks [48]

TB企画御礼

May 27,2005 11:59 PM
Category:[blog]
Tag:[, , ]
Permalink

先日の「ブログ開設1周年記念・【TB企画】あなたのサイトのお気に入りカスタマイズ」に大変多くのトラックバックをお送りくださり、ありがとうございました。当初20サイトくらい頂ければ上出来、と思っていたら現時点で535455サイト。嬉しい悲鳴です。この場をお借りして改めてお礼申し上げます。

ということで予告通り、本エントリーにてトラックバックをくださったサイトをキャプチャ画像で紹介させて頂きます。画像リンクより各サイトのトップページにジャンプします。気の利いたコメントが書ければいいのですが、ご勘弁ください。キャプチャ環境は Windows XP + IE6.0 です。
また画像・タイトル・リンクの組み合わせはプログラムで行っているので、不具合ございましたらお許しください。ダイナミックに並べ替えとかできるといいのですが、とりあえず受信順です。

ぼくたびBLOGぼくたび BLOG
fuul’s Diaryfuul’s Diary
我楽我楽
TOY COZY MUSEUM 別館TOY COZY MUSEUM 別館
kazunoblogkazunoblog
.Daily-note.o●.Daily-note.o●
WhiteжButterflyWhiteжButterfly
やむやむやむやむ
本日のおすすめ !!本日のおすすめ !!
Stupid excuse!!Stupid excuse!!
PHAT∴LOVESICKPHAT∴LOVESICK
[N?]Nonsense?[N?]Nonsense?
体験手記レポート部体験手記レポート部
eizo slash blogeizo slash blog
SWEET WATER Web ServerSWEET WATER Web Server
深い雪深い雪
Four SeasonsFour Seasons
Sans-SouciSans-Souci
Magic WhiteMagic White
CU*Chu!CU*Chu!
チームニゴイでございます。チームニゴイでございます。
existence Uhheri Editionexistence Uhheri Edition
from NaOHの迷宮from NaOHの迷宮
猫派の読書空間猫派の読書空間
The blog of H.FujimotoThe blog of H.Fujimoto
WAY TO GOWAY TO GO
えてぽんの部屋えてぽんの部屋
nancha-teinancha-tei
KSMT :: HR/HM BlogKSMT :: HR/HM Blog
日々一歩-裏-日々一歩-裏-
Mojo Walkin’+Mojo Walkin'+
caramel*vanillacaramel*vanilla
う・わ・き・も・のう・わ・き・も・の
新妻blog(もう新妻じゃないけど)新妻blog(もう新妻じゃないけど)
帰宅部大学生のblog帰宅部大学生のblog
Monochrome Recollections・blogMonochrome Recollections・blog
ハルニレの木の下でハルニレの木の下で
CEFA::BlogCEFA::Blog
今日の覚え書き今日の覚え書き
和道楽日記 - Kazulog -和道楽日記 - Kazulog -
あそびあそび
ぷちぷちつづりぷちぷちつづり
Luna's*PaPaLuna's*PaPa
ひびのつぶやきひびのつぶやき
gawgaw
blog::made in SAGAblog::made in SAGA
GF*daysGF*days
人間万事塞翁が馬で行こう人間万事塞翁が馬 で行こう
M*C?B Version?M*C?B Version?
langsamlangsam
MIND DIARYMIND DIARY
ブログ別!作成・カスタマイズ講座ブログ別!作成・カスタマイズ講座
Blog@PeacemanBlog@Peaceman
東京西郊日誌東京西郊日誌
THE TRENDYLINETHE TRENDYLINE
Comments [19] | Trackbacks [1]

PSPは

May 26,2005 8:55 PM
Category:[ダジャレ]
Tag:[]
Permalink

DS2に

Comments [4] | Trackbacks [0]

Movable Type 上級カスタマイズ術

May 25,2005 11:59 PM
Category:[書籍]
Tag:[, , , ]
Permalink

皆さんすでにご存知と思われますが、最近お世話になっている壱さんの著書「Movable Type 上級カスタマイズ術」が発売されました。この本は名前の通り、Movable Type に対してさらに高度なカスタマイズを目指す方向けのもので、ブログ関連の書籍が増える中、Movable Type でこの手の内容のものはおそらく初めてではないでしょうか。

ブログ自由自在 Movable Type 上級カスタマイズ術
藤本 壱
技術評論社 (2005/05/18)
売り上げランキング: 6,985
通常4日間以内に発送
おすすめ度の平均: 5
5 こんな本を待っていた

他で見かける Movable Type の基本的操作や 簡単な Tips 集といった著書と異なり、Perl による制御やプラグインの作成方法、また PHP によるモジュール化やダイナミックパブリッシングの導入とそれに伴う PHPプラグインの作成方法等、これまでになかった情報が満載です。Movable Type 特有のデータ構造も分かりやすく書かれているので、プログラミングに関する一定の基礎知識があればブログの制御やプラグインも作成も可能です。
もちろんテンプレートの作成方法やCSSによるデザイン変更といった基本的な内容も書かれてまして、こちらは必要最低限の内容で最大の効果があげられることを考慮して書かれているのが嬉しいところです。

まとめると「痒いところに手が届く1冊」です。ということで早速購入致しまして、念願のプラグイン作成・公開に向けて勉強したいと思います。

Comments [6] | Trackbacks [1]

MT-SCode プラグインによるコメントスパム対策(その2:Typekeyサイン・インとの競合制御)

前回の記事では原文にもとづいたカスタマイズ(+公開テンプレートに合わせた修正)を行いましたが、そのままの状態では Typekey 認証を設定している場合、サイン・イン後もセキュリティコードの設定が要求されます。サイン・インを行った後は他の認証手段と併用しない方がコメンターにとってはありがたいと思われますので、今回はその部分の修正について紹介したいと思います。
カスタマイズの前に、前回の記事で MT-SCode プラグインの設定が全て完了していることが前提となります。

1.テンプレートの修正

管理メニューより個別エントリーアーカイブテンプレートを開き、前回の6項(または9項)で追加したセキュリティコード表示部分に対して、div タグおよび JavaScript を追加します。この追加によりサイン・イン状態を判定して、サイン・イン状態であればセキュリティコード入力エリアを表示しないようになります。
リストのように、セキュリティコード表示用タグに対して青色部分を追加してください。9項に追加するイメージで書いてますが、挿入箇所は6項も同様です。

<!-- Security Code Check -->
<div id="securitycode">
<p><label for="securityCode"> Security Code:</label><br />
<input type="hidden" id="code" name="code" value="<$MTSecurityCode$>" />
<input tabindex=3 id="scode" name="scode" />
<img border="0" src="<$MTCGIPath$><$MTSecurityImage$>?code=<$MTSecurityCode$>" style="vertical-align: middle; margin-top:-6px;" /><br />
手動で送信されたコメントであることを示すために、上のボックスに表示されている通りに数字を入力してください</p>
</div>
<!-- end of Security Code Check -->
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.getElementById('securitycode').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>

なお前回の6項では、セキュリティコード表示の設定箇所が「TypeKey サイン・インを常に要求する場合」と「TypeKey サイン・インをしなくてもコメント可能な場合」の計2ヶ所あり、今回の修正は下方、つまり「TypeKey サイン・インをしなくてもコメント可能な場合」のコメント用フォームに対して実施します。文章ではわかりづらいので下に個別エントリーアーカイブテンプレートのタグの抜粋を示します。

<MTIfRegistrationRequired>
    <MTIfNonEmpty tag="MTTypeKeyToken">
            :
        TypeKey サイン・インを常に要求し、
        TypeKeyが設定されている場合の処理
        コメント用フォーム表示<MTElse>
            :
        TypeKey サイン・インを常に要求し、
        TypeKeyが設定されていない場合の処理(=環境設定誤り)
            :
    </MTElse>
    </MTIfNonEmpty>
<MTElse>
            :
    TypeKey サイン・インをしなくてもコメント可能な場合の処理
    コメント用フォーム表示</MTElse>
</MTIfRegistrationRequired>

ご覧の通り、赤色部分にコメントフォームが計2ヶ所あります。下にある方が今回の修正対象です。
どちらのコメント用フォームが使われるかは、管理メニューの「ウェブログの設定」→「設定」の「コメントの設定」欄にある「未登録の読者からのコメントを受けつける」のチェックボックスへのチェック有無で決まります。チェックされていなければ上のフォーム、チェックされていれば下のフォームが適用されます。
また、上のフォームは「未登録の読者からのコメントを受けつける」にチェックがついていない場合にしか使われないため、前回の説明で既にセキュリティコード表示が設定されている場合は Typekey 認証と競合するため削除してください(厳密に言うと、「未登録の読者からのコメントを受けつける」にチェックをされているのであれば、放っておいても構いません)。

2.Comments.pm の修正

ここでの修正は、cookie に保持されているサイン・イン状態を取得・判定して、サイン・インされていればセキュリティコードチェックを実施しない処理の追加です(1項で非表示にしてもセキュリティチェック自体は実施されるため)。
lib/MT/App/Comments.pm をダウンロードし、任意のエディタで開いて、前回の5項の設定に対して下記の青色部分を追加してください(8行ほど挿入した数行下に "}" の挿入がありますのでご注意ください)。

# SecurityCode hack start 
#
require MT::SCode;
my $code = $q->param('code');
my $scode = $q->param('scode');
my $sscode = MT::SCode::scode_get($code);
 
my $class = $ENV{MOD_PERL} ? 'Apache::Cookie' : 'CGI::Cookie';
eval "use $class;";
my $cookies = $class->fetch;
my $commenter_name = "";
if ($cookies && $cookies->{commenter_name} && $cookies->{commenter_name}->value()) {
    $commenter_name = MT::I18N::encode_text($cookies->{commenter_name}->value(),'utf-8',undef);
}
if (!$commenter_name) {
 
if ($scode ne $sscode) {
    return $app->handle_error($app->translate(
       "Wrong or missing Security Code."));
}
 
}
 
MT::SCode::scode_delete($code);
MT::SCode::scode_create($code);
#
# Security hack ends

3.Context.pm の修正

この項では、コメント・プレビュー/コメント・エラーページに対して、Typekey サイン・イン状態を判定して、サイン・イン状態であればセキュリティコード入力エリアを表示しないための修正です。
lib/MT/Template/Context.pm をダウンロードし、任意のエディタで開いて、前回の8項または10項で行った設定に対して青色部分を追加してください。

<!-- Security Code Check -->
<div id="securitycode">
<p><label for="securityCode">Security Code:</label><br />
<input type="hidden" id="code" name="code" value="$securitycode" />
<input tabindex=3 id="scode" name="scode" />
<img border="0" alt="Please enter the security code you see here" src="$path/mt-scode.cgi?code=$securitycode" style="vertical-align: middle; margin-top:-6px;" /><br />
<MT_TRANS phrase="Please enter the security code you see here."></p>
</div>
<!-- end of Security Code Check -->
HTML
        if ($rem_auth_token && $registration_allowed) {
        $result .= MT->translate_templatized(<<HTML);
<script language="javascript" type="text/javascript">
<!--
if (getCookie("commenter_name")) {
    document.getElementById('securitycode').style.display = 'none';
}
// -->
</script>
HTML
        }
        $result .= MT->translate_templatized(<<HTML);
Comments [2] | Trackbacks [3]

房総半島

May 23,2005 11:38 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [6] | Trackbacks [1]

TB企画のコメント状況について

May 22,2005 3:30 AM
Category:[blog]
Tag:[, , ]
Permalink

TB企画に参加くださったサイトの皆様、ありがとうございました(まだ継続受付中です)。大変多くのトラックバックを頂いて嬉しい限りです(涙)。
ということで、只今トラックバックを頂いた順に各エントリーへご返事を書かせて頂いておりますが、時間の関係で本日は一旦締めさせてください。また本日の夜辺りから順にご返事させて頂きます。全てのサイトへのコメントが完了するまで若干かなりタイムラグが生じますが、予めご了承ください。

なおTB企画に乗って頂いた全サイトにつきまして、トップページのキャプチャ画像つきで別途エントリーさせて頂く予定です(中身は多分ほとんどありませんが)ので、併せてよろしくお願い致します。

Comments [0] | Trackbacks [0]

白黒は

May 21,2005 11:55 PM
Category:[ダジャレ]
Tag:[]
Permalink

カラーを

Comments [4] | Trackbacks [0]

ブログ開設1周年記念・【TB企画】あなたのサイトのお気に入りカスタマイズ

May 20,2005 11:35 AM
Category:[blog]
Tag:[, , ]
Permalink

1周年本サイト開設より丁度1年が経過致しました。おかげさまをもちまして1年間無事にブログを運営することができました。ありがとうございます。
ということで、簡単にこの1年を振り返ってみたいと思います。

開設当初は「ブログ?って何」って感じで、よくわからないまま Movable Type 3.0D をインストール。当時は 2.6x の情報で溢れてましたが公式サイトでは既に配布が終わっており、出だしから情報不足の状態でした。
過去の記事を読み直すと2日目ですでに3カラムテンプレートに変更しておりまして、それを含めて現在のデザインに落ち着くまで、他のサイトより計3回テンプレートを頂いて入れ替えました。

その後、6月28日より公開テンプレートとして配布開始。さらにコメント用テンプレートや検索テンプレート、また Movable Type で提供している Typekey やポップアップ機能にも対応させることができました。現在400近いユーザにご利用頂いており、大変感謝している次第です。今年1月にはテンプレートユーザ有志で mixi の「小粋なユーザコミュニティ」も立ち上げてくださいました。ありがとうございます。
HTMLタグは何年も書いてきましたが valid という意味ではこの1年が一番進歩した気がします。CSS や XHTML も多少分かってきました。今後は公開テンプレートのCSSを整理して、クロスブラウザを考慮したものを目指したいと思います。

折りたたみやツリー化、カレンダー等をはじめとした他のカスタマイズも多岐にわたり、色々なものを含めると枚挙に暇がありません。またカスタマイズについてのご質問を多数頂くことで、より信頼性のある記事となり、サイトも賑やかになっていきました。
カスタマイズでは JavaScript のスキルが向上し、全く書いたことのなかった PHP も利用方法が少し理解できました(Perl は相変わらず)。カスタマイズはサイトの機能や利便性を向上させるための手段であり、ブログ本来の目的からするとコンテンツに注力すべきですが、私の場合は手段が目的となってしまいました。まあ日常ネタもさほどありませんので。

そんなこんなであっという間に駆け抜けた1年でした。ブログを始めてから色々なサイトの方とお付き合いをさせて頂いており、そのことも大変嬉しいのですが、ネット上でのいわゆるゴタゴタがなく続けられたことが本当に良かったと感じています。

さて1周年記念ということで、このサイトに似合わないTB企画です。
ここに訪れてくださった方とは、(ダジャレを除いて)テンプレートやカスタマイズでつながっている方がほとんどですので、お題は

あなたのサイトのお気に入りカスタマイズ

にしてみました。
内容はカスタマイズ・テンプレート含め、簡単なものから高度なものまで、どんなものでも結構です。例えば「ここに配置している画像がお気に入り」等でもOK(それも立派なカスタマイズ)。テンプレートやカスタマイズはこのサイトで取り上げていないものでも結構です。紹介する数に制限はありません。関連のエントリーや参照記事があればそちらへのリンクも是非設定してやってください。
要はご自身のサイトの自慢トラックバックです。他のサイトで気になるカスタマイズがあれば、そちらを紹介くださっても構いません。

それでは今後も引き続きどうぞよろしくお願い致します。

Comments [31] | Trackbacks [58]

MyBlogList にスクロールバーをつける(改)

May 19,2005 8:15 PM
Category:[サイドバー]
Tag:[, , , , ]
Permalink

MyBlogListのリンクリストにスクロールバーをつけるカスタマイズです。(改)マークはJavaScriptによってクレジットバナーおよび「ListMe」をスクロールバーの外に追い出すことを指しています。

BlogPeopleのリンクリストにスクロールバーをつける場合は、div タグを付与する設定でリンクリスト表示用コードを生成すれば、div タグに予め指定されたクラス属性に対するスタイルを与えることでバナーをスクロールバーから外に追い出せたのですが、MyBlogListの場合は表示用コード生成でそのようなオプションが用意されていないため分割ができません。リストはバナーや「ListMe」を含め、単純に a タグが並んでいるだけのようです。

ということで、バナーおよび「ListMe」をスクロールバーの外に完全に追い出すためのスクリプトを作りました。スクロールバーの一番最後にも「by MyblogList」を表示しません。
具体的には BlogPeople と同様、リンクリストとバナーおよび「ListMe」をそれぞれ <div>~</div> タグで括り、個別にスタイルを与えることができるようにしました。リストの一番最初と最後に "<div>" および "</div>" をつけるのは簡単ですが、単純に並んだ a タグの途中でどのようにして div タグを挿入するかで悩みました。結局、a タグ("<a")で分割して検索していき、クレジットバナーの img タグが出現した時点で "</div><div>" を付与、「ListMe」については「MyblogList」という文字を検索して同様に "</div><div>" を追加という方法に落ち着きました。クレジットバナーに画像を使っていない場合も考慮しています。
2005.05.20 追記:リストへの日付や時刻の付与、および画像を用いたNEW装飾にも対応できるように改良しました。
以下カスタマイズ方法です。

1.MyBlogList 表示用タグの修正

各テンプレートに設定している、MyBlogList のリンクリストを表示するタグ

<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>

を div タグ等で括って

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>

としてください。括られていない場合は、サンプルのようにタグを追加してください(タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です)。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください(=他の id 属性名と重複しないこと)。
追加が終わったら保存・再構築してください。

2.テンプレートにJavaScript追加

1項の MyBlogList 表示用タグの下に、下記のスクリプト(青色)を追加します。

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>
 
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
image = 1;
 
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
if (!image) {
    tag2 = '>by MyblogList<';
} else {
    tag2 = 'myblog_list_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="mybloglist-main">';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('window.open') != -1) {
        data += '</div><div class="mybloglist-listMe">' + tag1 + list[i];
        break;
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="mybloglist-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

スクリプトの3行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を

image = 0;

に変更してください。
追加が終わったら保存・再構築してください。

3.CSS設定

下記のクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。場所はどこでも大丈夫です。

.mybloglist-main {
    overflow: auto;
    height: 300px;
}
 
.mybloglist-powered-by {
    margin-top: 10px;
    margin-bottom: 0px;
}
 
.mybloglist-listMe {
    margin-top: 0px;
}

上から順番に、リンクリスト用・クレジットバナー用・「ListMe」用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.05.19 追記
スクリプトに誤りがありましたので修正しました。

2005.05.20 追記
先頭に日付・時刻が表示されている場合に不具合がありましたので修正しました。これに伴い2項のスクリプトおよび説明を修正しました。またNEW装飾に画像を用いることができるように改良しました。

Comments [13] | Trackbacks [4]

ブログ利用者 延べ335万人

May 18,2005 2:00 PM
Category:[blog]
Tag:[, ]
Permalink

総務省は17日、ブログの利用者が「04年度末で延べ約335万人、閲覧者は約1651万人にのぼった」という推計を発表したそうです。また「06年度末には利用者が約782万人、閲覧者が約3455万人と、ともに倍以上に増えると予測」しているようで、まだまだ発展途上の技術であることをうかがわせます。

個人的には、個人レベルで既存のHTMLによるWebサイトから移行する人に加え、HTMLを知らなくても手軽に始められるという利便性から、これまでWebサイトを持っていなかった方の参加も見込まれるので、しばらくは継続的な増加が見込まれると予想しています。
なお、「延べ335万人の利用者のうち約95万人が月に1度以上更新」ということで、約3割は継続しているようです。ちょっと前の他の調査では2/3が三日坊主でしたが。

上記は、

鮫山ネギのブログ3ブログ利用者、延べ335万人 総務省推計
asahi.comブログ利用者、延べ335万人 総務省推計(元記事)

からの引用です。ちなみに上記の鮫山ネギのブログ3さんはブログを14持っていらっしゃるようで、すごいです。

Comments [5] | Trackbacks [2]

コメントにHTMLタグ挿入ボタンをつける(改)

May 17,2005 8:10 PM
Category:[コメント]
Tag:[, , , ]
Permalink
コメントに編集ボタンをつけた状態個別エントリーアーカイブ等のコメント欄にエントリー画面と同じ編集ボタンを表示するカスタマイズです。カスタマイズの完成イメージは左の画像のようになります。
このカスタマイズのオリジナルはcaramel*vanillaさんのようですが、該当のエントリーが見当たりませんでした(見落としてたらすいません)。なおそこから参照されたご近所さんでは
やむやむコメント欄に編集ボタン装備
Magic Whiteコメントに編集ボタン

がありました(もれがありましたらお許しを)。

久しぶりの(改)マークですが、オリジナルからはアイデアのみ頂いて、中身は自力で作りました。機能的な差異は

  • Mozilla系ブラウザでも表示(Opera7/8もOK)
  • コメント・プレビュー/コメント・エラー画面にも表示

です。「自力で作った」というのは言い過ぎで、Movable Type の管理画面の設定を一部拝借したものです。
以下、カスタマイズ方法です。

1.コメント欄でのHTMLタグの使用を有効にする

管理メニューの「ウェブログの設定」→「設定」にある「除去機能」の「カスタマイズ」を選択してテキストボックスに下記を設定します。

a href,a href target,strong,br/,p,em,u,ul,li,blockquote,img src,font color,s

参考までに、「標準の設定」で許可されているHTMLタグは、

a href、b、br、p、strong、em、ul、li、およびblockquote

です。
また同じページの下の方にある「コメントでのHTMLの利用を許可する」をチェックして保存・再構築してください。

2.編集ボタン用画像のコピー

ローカル・サイト・パス(index.html があるディレクトリ)の直下に images ディレクトリを作り、Movable Type の images ディレクトリに存在する下記の画像を images 配下にコピーしてください。

html-bold.gif
html-italic.gif
html-underline.gif
html-link.gif
html-quote.gif

ローカル・サイト・パス配下のどこか(ディレクトリも含む)に Movable Type の images ディレクトリがすでに存在していれば本項目はスキップしてください(images ディレクトリがローカル・サイト・パス直下でない場合は後の設定を若干変更する必要があります)。

3.JavaScriptファイルの作成

編集ボタンをクリックした時に動作させるためのJavaScriptを作ります。Movable Type の mt.js を ローカル・サイト・パスにコピーするか、mt.js より下記を部分を抜粋してJavaScriptの外部ファイル(ここでは commentButton.js)を作ってローカル・サイト・パスにアップロード(または配置)してください。mt.js がすでにローカル・サイト・パスにある場合は本項目をスキップして結構ですが、以降は commentButton.js を配置した前提で説明を進めますのでご注意ください。

var canFormat = 0;
if (document.selection)
    canFormat = 1;
var ua = navigator.userAgent;
if (ua.indexOf('Gecko') >= 0 && ua.indexOf('Safari') < 0)
    canFormat = 1;
 
function getSelection (e) {
    if (document.selection)
        return document.selection.createRange().text;
    else {
        var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
        return e.value.substring(start, end);
    }
}
 
function setSelection (e, v) {
    if (document.selection)
        document.selection.createRange().text = v;
    else {
        var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
        e.value = e.value.substring(0, start) + v + e.value.substr(end, length);
    }
}
 
function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}
 
function insertLink (e, isMail) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    var my_link = isMail ? prompt('Enter email address:') : prompt('Enter URL:', 'http://');
    if (isMail) my_link = 'mailto:' + my_link;
    if (my_link != null)
        setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
    return false;
}

4.編集ボタン表示スタイルの追加

スタイルシート(styles-site.css)に下記を追加してください。場所はどこでもOKです。

.field-header {
    width: 270px; /* ボタンを配置するエリアの幅 */
    height: 30px; /* ボタンを配置するエリアの高さ */
    position: relative;
}
 
.field-label {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
 
.field-buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
 
.field-buttons img {
    border: 0;
    margin: 0px 0px 0px 3px;
}

コメント部分の値(赤色)はコメントエリアの幅によって適宜変更してください。編集用ボタンは width で設定した幅の一番右側に配置されるようになっています。IEでボタンの右端が 2px ほどテキストエリアの内側になるようにしておけば、Firefoxで丁度揃って表示されるようです。

5.テンプレートの修正(JavaScriptファイルのインクルード追加)

個別エントリーアーカイブ/コメント・プレビュー/コメント・エラーテンプレートの <head>~</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script>

コメント・プレビュー/コメント・エラーでボタンを表示する必要がない場合は個別エントリーアーカイブのみ設定してください。

6.テンプレートの修正(個別エントリーアーカイブへ編集用ボタン設定)

個別エントリーアーカイブテンプレートを開き、下記のリストの通り、赤色部分を青色のものに入れ替えてください。

<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br />
<div class="field-header">
<div class="field-label"><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML></div>
<div class="field-buttons">
<a title="太字" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="<$MTBlogURL$>images/html-bold.gif" alt="太字" width="22" height="16" /></a>
<a title="イタリック" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="<$MTBlogURL$>images/html-italic.gif" alt="イタリック" width="22" height="16" /></a>
<a title="アンダーライン" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="<$MTBlogURL$>images/html-underline.gif" alt="アンダーライン" width="22" height="16" /></a>
<a title="ハイパーリンク" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="<$MTBlogURL$>images/html-link.gif" alt="ハイパーリンク" width="22" height="16" /></a>
<a title="引用" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="<$MTBlogURL$>images/html-quote.gif" alt="引用" width="22" height="16" /></a>
</div>
</div>

同じ場所が2ヶ所ありますので両方変更します。厳密に言うと「コメント:」で検索して先にみつかった方には MTIfAllowCommentHTML タグがありませんので、

<MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML>

の部分は削除してください。それと関連して、コメントでHTMLタグが使える場合には

(書式を変更するような一部のHTMLタグを使うことができます)

というメッセージが表示されますが、本カスタマイズではそれが表示されないことを前提にスタイルを設定していますので、2ヶ所とも削除した方が見栄えはいいです(HTMLタグを挿入するカスタマイズでHTMLタグが使えるメッセージを削除するのは矛盾してますが)。

7.ContextHandlers.pm の修正

注:MT3.3x の時点の内容を記述していますが、コメント・プレビュー/コメント・エラーに <$MTCommentPreviewBody$> タグが使われていない場合は6項の内容を実施してください。

これはコメント・プレビュー/コメント・エラー画面で編集ボタンを表示するための設定です。4項と関連してコメント・プレビュー/コメント・エラーへの表示が不要な場合は本項目をスキップしてください。
5項までの作業で個別エントリーアーカイブに編集用ボタンが表示されるようになりますので、そちらが正常に動作することを確認した後に本項目の設定を行うことをお勧めします。

lib/MT/Template/ContextHandlers.pm

をダウンロードし、任意のエディタで開いて下記の修正を行います。
まず2050行目辺りに青色の行を追加します。

my $comment_author = "";
my $comment_email = "";
my $comment_text = "";
my $comment_url = "";
my $blog_url = $blog->site_url;

次に、2108行目辺りにある赤色の行を青色のものに置きかえます。

<p><label for="text"><MT_TRANS phrase="Comments:"></label><br />
<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label></div>
<div class="field-buttons">
<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="${blog_url}images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="${blog_url}images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="${blog_url}images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="${blog_url}images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="${blog_url}images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>
</div>
</div>

最後に2193行目辺り(上を挿入した後であればもう少し下)にある赤色の行を青色のものに置きかえます。

<p><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note<br />
<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note</div>
<div class="field-buttons">
<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="${blog_url}images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="${blog_url}images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="${blog_url}images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="${blog_url}images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>
<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="${blog_url}images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>
</div>
</div>

編集が終わったら保存・アップロードします。
なお、コメント・プレビュー/コメント・エラー画面で、「HTMLタグが使えます云々...」というメッセージを表示したくない場合は、上のリスト

<div class="field-header">
<div class="field-label"><label for="text"><MT_TRANS phrase="Comments:"></label> $allow_comment_html_note</div>
<div class="field-buttons">
          :

の3行目にある赤色部分を削除してください。

以上です。

2005.05.17 追記
1項を追加しました。

2007.04.05 追記
7項を 3.3x の内容に修正しました。

Comments [13] | Trackbacks [8]

OCN

May 16,2005 11:31 PM
Category:[ダジャレ]
Tag:[]
Permalink

光withフレッツ新登場!!

Comments [5] | Trackbacks [0]

AdminCGIPath による mt.cgi の利用方法(その2)

May 15,2005 11:58 PM
Category:[Movable Type]
Tag:[, , , , ]
Permalink

本エントリーは3.17以降での動作確認はできておりません。
前回のエントリーで、

AdminCGIPath を利用する場合、移動した mt.cgi のディレクトリに、移動前のディレクトリ配下の他のディレクトリやファイルをコピーする必要があります

とまとめ、具体的な設定方法を記しました。ですが、mt.cgi 起動時に設定される lib や extliib、および mt.cfg のパスに、移動前のディレクトリを設定することで他のディレクトリやファイルのコピーは不要となり、mt.cgi も正常に動作することを確認しました。

ということで、AdminCGIPath による mt.cgi の利用方法について、改めてカスタマイズ方法を記します。
例で示すURLとパスの対応は下記の通りです。

URL:http://domain/to/mt/
URLのパス:/path/to/mt/

1.ディレクトリ作成

mt.cgi を配置するディレクトリを作成します。

2.mt.cgi 移動

現在の mt.cgi を新しく作ったディレクトリ配下へ移動します。

3.mt.cfg に AdminCGIPath 追加

mt.cfg を任意のエディタで開き、青色部分を追加してください。AdminCGIPath の URLは新しく作ったディレクトリ(この例では "admin")までを指定します。

# Movable Type uses the CGIPath setting to construct links back to
# CGI scripts; for example, the MT tag <$MTCGIPath$> is substituted
# with the value of the CGIPath setting. You will need to change this
# value when you first install MT; instructions for doing so are in
# the Installation Instructions, in INSTALLING THE MOVABLE TYPE
# APPLICATION CODE, Step 3.
 
CGIPath http://domain/to/mt/
AdminCGIPath https://domain/to/mt/admin/

https が利用できない場合は

AdminCGIPath http://domain/to/mt/admin/

とします。

4.mt.cfg に StaticWebPath 追加

既に StaticWebPath を設定している場合はスキップしてください。
StaticWebPath は「ドキュメントルートを起点としたパス」です。「ドキュメントルート」は、例えばこのサイトでは、

http://www.koikikukan.com/

でアクセスされるパスがドキュメントルートとなります。Movable Type 3.x 導入手順mt.cfgの編集 その1 (CGIPath)mt.cfgの編集 その2 (StaticWebPath)に具体的な設定例がありますので参考になれば幸いです。

mt.cfg に StaticWebPath が設定されていない場合、管理ページ用のスタイルや画像データである

images/
mt.js
styles.css

のパスとして AdminCGIPath の値を使ってしまうようですので、index.html があるディレクトリ配下に新しいディレクトリ(例えば mt-static)をつくり、そこへ images/ mt.js styles.css をコピーまたは移動します。mt.cfg は下記の青色部分を追加します。

# If you place all of your MT files in a cgi-bin directory, you
# will need to situate the static files (docs, images, styles.css)
# elsewhere, so that the webserver will not try to execute them. The
# TROUBLESHOOTING section of the manual has more information.
#
StaticWebPath /mt-static/

移動したくない場合は、3項にある CGIPath と全く同じ設定

StaticWebPath http://domain/to/mt/

としてもOKになるようです(ただし cgi-bin 配下にこれらのディレクトリやファイルが存在するのは本来適正な配置ではないようです)。

5.mt.cfg の DataSource 変更

Berkeley DB を使用している場合、データベース・ディレクトリへのパスを相対パスから絶対パスに変更する必要があります。

# The filesystem path to the 'db' directory, where your MT database
# files are stored. You will probably need to change this when you
# first install MT; instructions for doing so are in the Installation
# Instructions, in INSTALLING THE MOVABLE TYPE APPLICATION CODE, Step 8.
# Consider using the MySQL configuration, below.
 
DataSource ./db /path/to/db

6.mt.cgi のパス設定処理変更

移動した mt.cgi をダウンロードして任意のエディタで開き、下記の変更を実施します。6.1または6.2のいずれか一方を行ってください。

注:6.1は動作NGのため適用しないでください。

6.1 mt.cgi のディレクトリを起点とした相対パスで指定

赤色部分を青色部分に置き換えます。

my($MT_DIR);
BEGIN {
    if ($0 =~ m!(.*[/\\])!) {
        $MT_DIR = $1;
    } else {
        $MT_DIR = './';
    }
    $MT_DIR = 'path';
    unshift @INC, $MT_DIR . 'lib';
    unshift @INC, $MT_DIR . 'extlib';
}

変更後の path は下記のように設定します。まず、以前のディレクトリ配下に新しくディレクトリを作成した場合です。例えば、

以前 mt.cgi があったディレクトリ:/path/to/mt/
新しく mt.cgi を置くディレクトリ:/path/to/mt/dir/

というディレクトリ構成であれば、mt.cgi は

$MT_DIR = '../';

とします。つまりひとつ上のディレクトリを指すように記述します。
次に以前のディレクトリと同じならびに新しくディレクトリを作成した場合です。例えば、

以前 mt.cgi があったディレクトリ:/path/to/mt/ 新しく mt.cgi を置くディレクトリ:/path/to/mt2/

というディレクトリ構成であれば、mt.cgi は

$MT_DIR = '../mt/';

とします。
いずれも最後は必ず "/" で終わるようにしてください。またディレクトリは 「'」で括ってください。

6.2 絶対パスで指定

my($MT_DIR);
BEGIN {
    if ($0 =~ m!(.*[/\\])!) {
        $MT_DIR = $1;
    } else {
        $MT_DIR = './';
    }
    $MT_DIR = 'path';
    unshift @INC, $MT_DIR . 'lib';
    unshift @INC, $MT_DIR . 'extlib';
}

変更後の path は下記の例のように設定します。

以前 mt.cgi があったディレクトリ:/path/to/mt/
新しく mt.cgi を置くディレクトリ:/path/to/mt/admin/
$MT_DIR = '/path/to/mt/';

こちらはシステムのルートディレクトリからの設定です。言い換えると CGIPath のパスです。Windows の場合、ドライブの指定は不要ですが、"C:/path/to/mt/"と設定しても大丈夫です。1項と同様、最後は必ず "/" で終わるようにしてください。またディレクトリは 「'」で括ってください。

7.mt.cfg の保護

Movable Type を cgi-bin ディレクトリから実行していない場合は、CGIPath で設定されたディレクトリ(mt.cfg のあるディレクトリ)に .htaccess ファイルを作成し、以下の内容を挿入します(すでに存在する場合は追加)。これを設定していないと mt.cfg にアクセスされるおそれがあります。

<Files mt.cfg>
<Limit GET>
deny from all
</Limit>
</Files>

この内容は、Movable Typeのインストール手順mt.cfgの保護からの引用です。

以上です。
本カスタマイズがセキュリティ上問題あるようでしたらご指摘ください。

2005.05.16 追記
7項のタグを修正しました。"Limit" と書かれたタグを削除しています。

2005.05.16 追記
5項(StaticWebPath 設定)および6項を追加しました。それに伴って項番を振り直しました。

2005.05.24 追記
6.1項の相対パス指定では plugins ディレクトリが正常に参照できないことが判明したため、手順より削除致しました。

2005.05.26 追記
6.2項の絶対パスに誤りがありましたので修正致しました。また説明用のパス名を若干変更しました。

Comments [23] | Trackbacks [5]

AdminCGIPath による mt.cgi の利用方法

May 14,2005 3:00 AM
Category:[Movable Type]
Tag:[, , , , ]
Permalink

先日、Movable Type ニュースにあった【重要】 第三者による不正アクセスを許す危険性の対策についてを受けて、盗聴によるパスワードやCookieの漏洩からの不正アクセスを防止する(1)、つまり AdminCGIPath の設定による mt.cgi の隠蔽を実際にやってみました。

上記のページに簡単な変更例は書かれていますが全体の作業の流れがいまひとつ分からず、とりあえず下記の手順を実施してみました。

  • 新しいディレクトリの作成
  • 新しいディレクトリに mt.cgi を移動
  • mt.cfg に AdminCGIPath を追加(注:CGIPath は削除せずそのまま)

そのあと、新しいディレクトリ名を含めて mt.cgi を指定、つまり管理ページのURLをブラウザに設定して起動してみたところ、

Got an error: Can't locate MT/App/CMS.pm in @INC (@INC contains: …/extlib …/lib … .) at …/mt.cgi line 21.

というエラーが発生しました。mt.cgi の21行目は

require MT::App::CMS;

という、モジュール取得処理ですが、取得に失敗しています。これは mt.cgi を起動した時に決定する lib や extlib のパスを、mt.cgi と同じパスに設定しているためです。具体的には、次のリストは mt.cgi にあるパス決定処理ですが、

    :
my($MT_DIR);
BEGIN {
    if ($0 =~ m!(.*[/\\])!) {
        $MT_DIR = $1;
    } else {
        $MT_DIR = './';
    }
    unshift @INC, $MT_DIR . 'lib';
    unshift @INC, $MT_DIR . 'extlib';
}
    :

と、lib および extlib のパスとなる $MT_DIR を $0(Perl の実行スクリプト名)とのパターンマッチで求めているので、赤色で示すパスは結果的に起動した mt.cgi と同じパスになります。パターンにマッチしない場合もカレントディレクトリを設定しています。

つまり mt.cgi の移動に伴って他のディレクトリやファイルもコピーする必要があります。コメントやトラックバック等のCGIは従来のパスに必要なので、端的に言うと新しく作ったディレクトリにも以前と同じデータ構成が必要ということになります。全てコピーすれば間違いないと思いますが、とりあえず

extlib/
lib/
plugins/
tmpl/
mt.cfg
mt.cgi
mt-db-pass.cgi(MySQL利用時)

を配置したところ、管理画面表示や各メニューの表示、およびエントリー関連の作業は正常に動作しました。images/ や mt.js および style.css は StaticWebPath との関連で、場合によってコピーが必要かもしれません。
2005.05.14追記:The blog of H.Fujimoto「第三者による不正アクセスの危険性」への対策より、ダイナミックパブリッシングを行っている場合は php ディレクトリのコピーも必要です。

最初のエラーでつまづいている方が少なくないのではないかと思い、急いでエントリーしました。ご参考になれば幸いです。なお全ての動作について確認できておりませんので予めご了承ください(確認でき次第追記します)。
2005.05.14追記:ほぼ全ての動作について確認しました。

2005.05.15 追記
AdminCGIPath による mt.cgi の利用方法(その2)もエントリーしました。

Comments [2] | Trackbacks [5]

MT-SCode プラグインによるコメントスパム対策(その1)

本エントリーは 3.1x までの内容です。3.2x についてはSCode プラグインでコメントスパムを制限するを参照ください。

MT-SCode プラグインMT-SCode プラグインを利用したコメントスパム対策を紹介します。

このプラグインはサンプル画像で示している通り、ランダムな数字を画像で表示し、それをセキュリティコード用のテキストエリアに設定・認証することで手動で送信されたコメントとスパムロボットが送信したコメントを区別します。実際にはもう少し歪んだ画像にすると完全なものになると思いますが、ある程度の効果は期待できそうです。google のサイト登録画面等で用いられている技術です。

以下、READMEに書かれていた英文の翻訳(適当)を交えてカスタマイズ手順を紹介します。文章内のカッコの数字はREADMEで記されている番号を表わしています。最初にマニュアル通りの説明を行い、その後サンプル画像の表示になるよう、少し手を加えたカスタマイズについて説明します。最初からサンプル画像のようにする場合、6項と8項はスキップしてください。
また Typekey 認証と競合させたくない場合、つまりサイン・イン後のセキュリティコードチェックを行いたくない場合は、本エントリーのカスタマイズを行った後、MT-SCode プラグインによるコメントスパム対策(その2:Typekeyサイン・インとの競合制御)を参照してください。

なお参考サイトは下記です。ありがとうございました。

krbys.netMT-SCodeプラグインでスパム対策
James Seng's BlogSolution for comments spams(プラグイン配布元)

1.GDライブラリのインストール

レンタルサーバの方は本項目をスキップしてください。ただし Perl ライブラリの GD モジュールがインストールされていることが条件です。GDライブラリがインストールされていない場合は画像が表示されません。(1)
自宅サーバ(Windows)におけるGDライブラリのインストールは、MS-DOS画面(コマンドプロンプト)より、下記のコマンド(青色)を実行してください。

C:\>ppm
PPM interactive shell (2.2.0) - type 'help' for available commands.
PPM> install GD
Install package 'GD?' (y/N): y
Installing package 'GD'...
Downloading http://ppm.ActiveState.com/PPMPackages/5.6plus/MSWin32-x86-multi-thread/GD.tar.gz ...
Installing C:\usr\site\lib\auto\GD\GD.bs
Installing C:\usr\site\lib\auto\GD\GD.dll
Installing C:\usr\site\lib\auto\GD\GD.exp
Installing C:\usr\site\lib\auto\GD\GD.lib
Installing C:\usr\html\site\lib\GD.html
Installing C:\usr\site\lib\GD.pm
Installing C:\usr\site\lib\qd.pl
Installing C:\usr\site\lib\auto\GD\autosplit.ix
PPM> quit
Quit!

2.プラグインのダウンロード

下記のサイトより MT-SCode プラグインをダウンロードします。

James Seng's BlogSolution for comments spams

アーカイブへのダウンロードは本文内に「Download latest mt-scode」というリンクがあります.他にも何ヶ所かあるようです。
ダウンロードしたアーカイブを解凍すると下記のファイルがあります。

mt-scode.cgi
README
scode.pl
SCode.pm
scodetest.cgi

太字は今回利用するファイルです。アップロードは後で行います。

3.SCode.pm の編集

ここでは tmp ディレクトリの設定と、SCode.pm にセキュリティコード桁長の設定を行います(2)。
まずディレクトリ tmp を作成します。その後 SCode.pm を任意のエディタで開き、さきほど作成したディレクトリを設定します(青色部分)。

# tmp directory
# Notice the '/' at the end . You need to have that '/'
# ie, my $tmpdir = "/tmp/captcha' wont work. You need '/tmp/captcha/'
my $tmpdir = "/tmp/"; 

tmp ディレクトリにはセキュリティコードが保存されます。このディレクトリは ドキュメントルート(public_html) より上位に設定します。そうでなければスパムロボットは自動的にどのようなコードを入力すればよいか、フォルダの中を見られるおそれがあります。
tmp ディレクトリのパーミッションは 755 に設定します。うまくいかない場合は 775 または 777 にしますが、これらはセキュリティ上推奨できるパーミッションではありません。

セキュリティコード桁長を変更する場合は下記の青色部分を変更します。デフォルト値は6桁です。

# the length of the security code
my $scode_length = 6;

4.ファイルのアップロード

それぞれ次のディレクトリにアップロードします。(3)?(5)

SCode.pm - lib/MT/ ディレクトリ
mt-scode.cgi - mt.cgi と同じディレクトリ。パーミッションは 755
scode.pl - plugins ディレクトリ

5.Comments.pm の編集

(6)

現在の lib/MT/App/Comments.pm をダウンロードし、任意のエディタで開いて次の3行を検索します。

if (!$q->param('text')) {
        return $app->handle_error($app->translate("Comment text is required."));
}

見つかったら、そのすぐ下に下記を追加してください。

# SecurityCode hack start 
#
require MT::SCode;
my $code = $q->param('code');
my $scode = $q->param('scode');
my $sscode = MT::SCode::scode_get($code);
if ($scode ne $sscode) {
    return $app->handle_error($app->translate(
       "Wrong or missing Security Code."));
}
MT::SCode::scode_delete($code);
MT::SCode::scode_create($code);
#
# Security hack ends

参考:READMEに書かれている、上記コードを挿入した次のコードは 3.x では異なっているようですので無視。

6.テンプレートの編集

(7)

管理画面の「テンプレート」をクリックして、個別エントリーアーカイブテンプレートを編集します。
参考:READMEではコメント・リスト/コメント・プレビュー/コメント・エラーも編集対象になっていますが、3.x で実際に編集するのは個別エントリーアーカイブのみです。

<input type="submit" …(後略)…

を検索して、その上に下記のHTMLタグを追加します。

<!-- Security Code Check -->
<input type="hidden" id="code" name="code" value="<$MTSecurityCode$>" />
<img border="0" src="<$MTCGIPath$><$MTSecurityImage$>?code=<$MTSecurityCode$>"><br />
<input tabindex=3 id="scode" name="scode" /><br /><br />
<!-- end of Security Code Check -->

先の文字列検索では2ヶ所ヒットしますが、3.x の個別エントリーアーカイブのフォーム入力欄は、Typekey サイン・インなしでコメントを許容する場合と常にサイン・インを要求する場合のフォームが別々に用意されているためです。常にサイン・インを要求する設定にセキュリティコードを適用させない場合は、文字列検索で後に見つかった方のみに設定してください。
また、3.x の個別エントリーアーカイブのフォーム入力欄は Typekey サイン・イン時とそれ以外の場合の2ヶ所があります。Typekey サイン・イン時にセキュリティコードの入力を不要とするのであれば

<input type="submit"

の検索で後方で見つかったフォームのみに設定してください。

7.MTBlacklist プラグインとの競合について

(8)

Jay Allen's MTBlacklist プラグインを利用している場合、それを無効にしてください。そうでない場合は Comment.pm への追加と同じ作業を plugins/jayallen/MTBlPost.pm に行ってください。

8.Context.pm の編集

(10)?(17)

この項の追加でコメント・プレビュー/コメント・エラーページにセキュリティコードを表示できるようになります。現在の lib/MT/Template/Context.pm をダウンロードし、任意のエディタで次の部分を検索してください。

sub _hdlr_comment_fields {
    my ($ctx, $args, $cond) = @_;

見つかったら、そのすぐ下に下記を追加します。

# Security code validation
require MT::SCode;   # <-- new addition
srand int (time/10)+$$;
my $securitycode = int rand(MT::SCode::scode_tmp());
$securitycode++;
MT::SCode::scode_create($securitycode);
# End Security code hack

同じファイルで次のタグを探してください。(16)

<MT_TRANS phrase="Remember me?">
<input type="radio" id="remember" name="bakecookie" …

見つかったら、そのすぐ下に下記を追加します。(17)

<!-- Security Code Check -->
<input type="hidden" id="code" name="code" value="$securitycode" />
<label for="scode">Security Code:</label><br />
<img border="0" alt="Please enter the security code you see here" src="$path/mt-scode.cgi?code=$securitycode" /><br />
<input tabindex="3" id="scode" name="scode" /><br /><br />
<!-- end of Security Code Check -->

16?17をもう一度繰り返します。
6項の個別エントリーアーカイブと同様、コメント・プレビュー/コメント・エラーページにも Typekey サイン・インなしでコメントを許容する場合と常にサイン・インを要求する場合の2ヶ所があります(2回繰り返しているのはそのためです)。常にサイン・インを要求する設定にセキュリティコードを適用させない場合は、文字列検索で後に見つかった方のみに設定してください。
つまり編集対象が2ヶ所あるのですが、個別エントリーアーカイブテンプレートと同様、Typekey でサイン・インした場合はセキュリティコードの設定を不要とする場合は、先と同様、後方で見つかった場合のみに設定してください。

生成される画像の色は、mt-scode.cgi の

# define the color we going to use
$c_background = $im->colorAllocate(224,224,224); # 背景
$c_border = $im->colorAllocate(0,0,0); # 枠線
$c_line = $im->colorAllocate(192,192,192); # 格子
$c_code = $im->colorAllocate(128,128,128); # 文字

でそれぞれ変更することができます。変更する場合はカッコ内の赤色部分をRGBにしたがって変更します。それぞれの意味は右側にあるコメントの通りです。
また、生成される画像数はデフォルトで50ですが、変更する場合は
SCode.pm の

# max number of temp files
my $scode_maxtmp = 50;

を編集してください。

以上です。次にサンプル画像のようにするためのカスタマイズです。公開テンプレートを元にしていますので、デフォルトテンプレート等では若干の修正が必要になりますが大体同じ仕上がりになると思います。

9.テンプレートの編集

個別エントリーアーカイブテンプレートのセキュリティコードの表示位置をテキストエリアの右側に表示します。6項で行った個別エントリーアーカイブテンプレートの編集の代わりに、下記のものを挿入してください(6項とは挿入位置が異なっておりますのでご注意ください)。

<!-- Security Code Check -->
<p><label for="securityCode"> Security Code:</label><br />
<input type="hidden" id="code" name="code" value="<$MTSecurityCode$>" />
<input tabindex=3 id="scode" name="scode" />
<img border="0" src="<$MTCGIPath$><$MTSecurityImage$>?code=<$MTSecurityCode$>" style="vertical-align: middle; margin-top:-6px;" /><br />
手動で送信されたコメントであることを示すために、上のボックスに表示されている通りに数字を入力してください</p>
<!-- end of Security Code Check -->
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>

10.Context.pm の編集

コメント・プレビュー/コメント・エラーのセキュリティコードの表示位置をテキストエリアの右側に表示します。8項で説明した lib/MT/Template/Context.pm の編集の代わりに、下記のものを挿入します(こちらは8項と同じ挿入位置です)。

<!-- Security Code Check -->
<p><label for="securityCode">Security Code:</label><br />
<input type="hidden" id="code" name="code" value="$securitycode" />
<input tabindex=3 id="scode" name="scode" />
<img border="0" alt="Please enter the security code you see here" src="$path/mt-scode.cgi?code=$securitycode" style="vertical-align: middle; margin-top:-6px;" /><br />
<MT_TRANS phrase="Please enter the security code you see here."></p>
<!-- end of Security Code Check -->

11.画像サイズ変更

サンプル画像のようにするために mt-scode.cgi のソースを変更してセキュリティコード用画像のサイズを修正ます。赤色部分を青色部分にそれぞれ変更してください。

# lets define the image
$im_length = (MT::SCode::scode_len()+1)*10;
$im = new GD::Image($im_length,2520);
     :
# Draw the borders lines
for ($i=0;$i<$im_length;$i+=5) {
  $im->line($i,0,$i,2419,$c_line);
}
     :
$im->rectangle(0,0,$im_length-1,2419,$c_border);
 
# Write the code
$im->string(gdGiantFont,8,52,$scode,$c_code);

12.日本語メッセージの追加

コメント・プレビュー/コメント・エラー画面のセキュリティコード欄への日本語表示と、セキュリティコードが誤っている場合の日本語メッセージをコメント・エラー画面に表示するため、lib/MT/L10N/ja.pm に下記の日本語コメント(青色)を追加します。

'Comment text is required.' => 'コメントの本文を入力してください。',
'Wrong or missing Security Code.' => 'セキュリティコードが誤っています。',
     :
'Comments:' => 'コメント:',
'Please enter the security code you see here.' => '手動で送信されたコメントであることを示すために、上のボックスに表示されている通りに数字を入力してください',

英語部分は適当なので適宜修正してください。修正する場合は、10項で編集したContext.pm の

<MT_TRANS phrase="Please enter the security code you see here."></p>

もあわせて修正してください(この部分をキーに ja.pm から日本語を索引しています)。

以上です。なお紹介しておいてこういうのもなんですが、セキュリティコードの値はスタティックページ生成時にMT変数タグとして設定されるので、個別エントリーアーカイブではエントリー単位で常に同じ値になります。コメント・プレビュー/コメント・エラーでは値が変化します。

Comments [45] | Trackbacks [13]

Movable Type の第三者による不正アクセスを許す危険性の対策について

May 12,2005 11:28 PM
Category:[Movable Type]
Tag:[, , ]
Permalink

Movable Type のサイトで下記の内容が周知されています。

Movable Type(ムーバブル・タイプ)の脆弱性により、第三者による不正なアクセスが可能であることが確認されました。Movable Typeのセッション管理で使われるCookieの値に、ハッシュ化されたユーザーアカウント情報が含まれており、以下の条件を全て満たした場合に、第三者による不正なアクセスが可能になります。
  • 第三者が、Cookieの値を取得する。
  • 第三者が、Movable Type管理画面CGIスクリプトのパスを取得する。

対象となるバージョンは Movable Type 日本語版の全てのバージョン(英語版も)です。詳細は公式サイトの情報をご覧ください。

Comments [0] | Trackbacks [3]

BlogPeople のリンクリストにスクロールバーをつける

May 11,2005 11:58 PM
Category:[BlogPeople, サイドバー]
Tag:[, , , , ]
Permalink

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern SyntaxBlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

1.CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
     :
 (メニューリスト)
     :
</div>

とクラス属性 hogehoge(青色)を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ(ここでは200px)にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード(青色)を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています(上記の表示用コードの状態では目視できません)。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
      :
   (リンクリスト)
      :
</div>
<div class="blogpeople-powered-by">
      :
 (クレジットバナー)
      :
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性(青色)が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

2.出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成/更新」をクリックします。

3.作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

4.CSS設定

1項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
       :
 (クレジットバナー用のスタイル)
       :
}

この設定を行うことで3項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル(フォント等)を指定しています。クレジットバナーのスタイル(margin 等)を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

Comments [20] | Trackbacks [20]

BlogPeople 500 被リンク達成

May 10,2005 8:30 PM
Category:[BlogPeople]
Tag:[, ]
Permalink

BlogPeople実家から戻ってきたら BlogPeople の被リンクが500を超えてました。ブログを始めた当初、こんなに多くのリンクを頂けるとは全く予想もしておりませんでした。嬉しい限りです。
「こんなにリンクされているサイトは一体どんな人達だろう」と思っていたら、こんな人でした(笑)。

ということで記念エントリーです。当サイトへリンクくださっている皆様には本当に感謝しております。この場をお借りして改めましてお礼申し上げます。皆様の期待に応えられるよう、今後も努力していく所存(多分)ですので、より一層のご指導・ご支援を賜りますよう、どうぞよろしくお願い申し上げます。
左上のバナーは300被リンクから表示設定できるものですが、これを機に BlogPeople のリンクリスト下に表示してみます(気分で変えると思いますがとりあえず)。

上の話題とは関係ありませんが、BlogPeople会員ページの下の方に表示される「障害情報」、何気に面白いです(今日現在では普通のメッセージのようです)。

Comments [11] | Trackbacks [0]

全エントリーリスト・全コメントリスト・全トラックバックリストを表示

Movable Type で全てのエントリー・コメントおよびトラックバックを表示するカスタマイズです。全コメントリストについての参考記事は下記です。ありがとうございました。

我楽全コメントリスト、全トラックバックリスト表示。

まず全コメントリストを表示するためのカスタマイズです。これは「最近のコメント」のタグを修正して

<MTEntries recently_commented_on="<$MTBlogEntryCount$>">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments>
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>

と、最初の行の recently_commented_on に全エントリー数である <$MTBlogEntryCount$> を指定すれば全てのエントリーに対するコメントを表示できそうですが、この部分にMT変数タグを指定すると再構築でエラーとなります。そこで MTTagInvoke プラグインを利用して、

<MTEntries recently_commented_on="<$MTBlogEntryCount$>">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="recently_commented_on"><$MTBlogEntryCount$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments>
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTTagInvokeContent>
</MTTagInvoke>
</MTEntries>

とすることで表示できるようになります。MTTagInvoke プラグインについては個別エントリーアーカイブに同一カテゴリーのエントリーを表示を参照ください。

注:MTTagInvoke のタグ名をバージョン 1.0 の内容に変更しています。

次に、全トラックバックリストはTrackback元記事表示で紹介した MTPingedEntry プラグインを利用した場合、下記のようなタグになります。

<div class="side">
<MTPings sort_order="descend">
<a href="<$MTPingURL$>" target="_blank" title="<$MTPingExcerpt$>"><$MTPingTitle$></a><br />
└ →<MTPingedEntry><a href="<$MTPingedEntryLink$>"><$MTPingedEntryTitle$></a></MTPingedEntry><br/>
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$><br/>
</MTPings>
</div>

ここでは MTTagInvoke は使用しておりません。これは MTPings タグの仕様で、何も指定しない場合は「システム全体で受けたすべてのトラックバックのリストを表示」になります。

sort_order="descend"

は新着順に表示するための指定です。逆にする場合は

sort_order="ascend"

となります。

全エントリーリストは、Movable Type がデフォルトで用意している「アーカイブページ」のデフォルトで設定されているタグ

<MTArchiveList>
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>

で実現できますが、MTEntries を用いることでも可能ですので紹介しておきます。
次のリストはタイトル順にソートして一覧表示をする例です。

<MTEntries sort_by="title" sort_order="ascend">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries><br />

カテゴリー別にまとめるには下記のようにします。これはユーザー・マニュアルに掲載されているものです。

<MTCategories>
<$MTCategoryLabel$><br />
<MTEntries sort_by="title" sort_order="descend">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries><br />
</MTCategories>

MTEntries タグは sort_by を指定することで全てのエントリーを表示してくれるようです。ということで一番最初の全コメントリストは、

<MTEntries sort_by="modified_on">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments>
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>

とすれば同様の表示をすることができます(こちらはエントリー更新順の模様)。

以上です。いずれも再構築時間の問題がありますので、自動的に再構築しない設定にされることをお勧めします。

2006.10.02
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23
サンプルリストを MTTagInvoke 1.0 の内容に変更しました。

Comments [11] | Trackbacks [2]

戻ってきました

May 8,2005 11:59 PM
Category:[小品文]
Tag:[]
Permalink

約3日間の実家でPCのない生活。ブログを始める前の状態に戻った感じでした。(PCがなくて)不安という訳ではなかったので依存症ではないようです(笑)。

東京に戻ってきて画面を開いたら多くのコメントとトラックバックと被リンク。ありがとうございます。

Comments [2] | Trackbacks [0]

高校

May 7,2005 11:57 PM
Category:[小品文]
Tag:[]
Permalink

昨日と似たような出だしですが、実家から自転車で5分ほど走ったところにある、母校の高校の名前が変わっていました。新しい名前は「槻の木高等学校」です。
この高校は、高槻南高校と島上高校が再編して新しくできた高校です。いずれも事実上廃校ですが、敷地・校舎は島上高校のもの使われ、高槻南高校側はこの再編に対してかなりの反対があったようです。

母校である島上高校は実家から駅に向かう途中にあります。高校時代はテニス部に所属してまして、毎日先輩にしごかれた想い出が今も鮮明に残っています。テニスコート、そして野球部・サッカー部・陸上部が一緒になった、汗臭い古びた部室が道路沿いに面しており、そこを通る度に当時を懐かしんでいます。

残念ながら部室は今回の再編で撤去されてしまいましたが、テニスコートは今もそのまま残っており、「槻の木高校」のウインドブレーカーを羽織った学生達が元気にボールを追いかけていました。

Comments [0] | Trackbacks [0]

SATY

May 6,2005 9:48 PM
Category:[小品文]
Tag:[]
Permalink

実家から自転車で10分ほど走ったところにある、SATY南高槻店が今月いっぱいで閉店になるようです。

千葉の方では大型ショッピングセンターを次々とオープンしているAEONグループですが、こちらはやや古い店舗。今日、店に入った途端にいつもと違う荒んだ雰囲気がして、いやな予感がしたら店内放送で閉店の案内が。

以前はかなり賑わっていて、お正月も元旦から営業する盛況ぶりだったのですが、駅前の再開発で売り上げが落ちたのでしょうか。年に数回しか利用しないとはいえ、馴染みの店がなくなるのは残念です。

Comments [2] | Trackbacks [0]

帰省

May 5,2005 1:10 AM
Category:[小品文]
Tag:[]
Permalink

本日より7日まで大阪におります。PCがないのでコメントのご返事は戻ってからということでお許しください(エントリーは携帯より投稿予定)。

東京から新幹線に乗ったのですが、時期外れの帰省のおかげで自由席はガラガラ。列車が到着して乗車した時は私一人だけでした。
まさに自由(笑)。

Comments [0] | Trackbacks [0]

「最近のトラックバック」をエントリ別にまとめて表示する

サイドバーにある「最近のトラックバック(Recent Trackbacks)」の表示は、MTタグの仕様ではトラックバック元(送信サイト)の情報しか表示できません。これにTrackback元記事表示で書いたプラグインを利用することでトラックバック先(受信サイト)のエントリー名等を表示できるようになりますが、エントリーとトラックバックは1:1対応の表示しかできず、「最近のコメント」のようにエントリー別にまとめて表示することができません。

ということで、「最近のトラックバック」をエントリー別にまとめて表示するカスタマイズをご紹介します。ここでは3通りのカスタマイズについて時系列でご紹介します。
それぞれ使っているプラグインが異なりますが、いずれも同じ表示になるように整形しています。なお、ul -li のリスト形式で整形しています(ツリー化表示される場合はサイドメニューのツリー化スクリプト(改)を参考にしてください)ので、その他のタグを利用される場合は適宜修正ください。緑色部分は公開テンプレートを利用した場合に設定するタグです。
機能の詳細につきましては、文中に掲載している元記事を参照ください。

1.MTPingEntry & MTCollate プラグインを使った方法

Ogawa::Memoranda最近のトラックバックをエントリごとにまとめて表示

に基づいています。MTCollate は

MT ExtensionsMTCollate 1.1

の Download をクリックしてダウンロード。ダウンロードしたアーカイブを解凍し MTCollate.pl を plugins フォルダに配置(またはアップロード)します。MTPingEntry は

hirata's techknow MTつづきを書く前に...

の PingEntry.pl をクリックしてダウンロード。ダウンロードした PingEntry.pl を plugins フォルダに配置(またはアップロード)します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。

<MTCollateCollect>
<MTPings lastn="10">
<MTCollateRecord>
<MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
<MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
<MTCollateSetField name="ping_title"><$MTPingTitle$></MTCollateSetField>
<MTCollateSetField name="ping_blog_name"><$MTPingBlogName$></MTCollateSetField>
<MTCollateSetField name="ping_date"><$MTPingDate format="%m/%d %X"$></MTCollateSetField>
 
<MTPingEntry>
<MTCollateSetField name="entry_key"><MTPings lastn="1"><$MTPingDate format="%y%m%d%H%M%S"$></MTPings></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTPingEntry>
</MTCollateRecord>
</MTPings>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- ping_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a>
<ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="ping_url"$>" encode_html="1"><$MTCollateField name="ping_title"$></a><br />
[<$MTCollateField name="ping_blog_name"$>] <$MTCollateField name="ping_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

MTPings の lastn で表示するトラックバック数を指定します。

2.recently_pinged_on プラグインを使った方法

Ogawa::Memorandarecently_pinged_on Plugin

に基づいています。プラグインは、先のページにある recently-pinged-on.zip のリンクをクリックしてダウンロード。ダウンロードしたアーカイブを解凍し recently-pinged-on.pl を plugins フォルダに配置(またはアップロード)します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="3">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>

MTEntries の recently_pinged_on で表示するエントリー数、MTPings の lastn で表示するトラックバック数を指定します。

3.Recents プラグインを使った方法

The blog of H.Fujimoto最近のコメント/トラックバックをエントリーとともに表示するプラグイン

に基づいています。プラグインは、先のページにある「こちらをクリック」のリンクをクリックして表示された内容を全て選択し、メモ帳等に貼り付け、ファイル名を「Recents.pl」として保存(IEならリンクを右クリックして「対象をファイルに保存」でもOK)。保存した Recents.pl を plugins フォルダに配置(またはアップロード)します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTPingsRecent lastn="10" ping_sort_order="ascend">
<MTPingsRecentIfEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(<$MTEntryDate$>)</MTPingsRecentIfEntry>
<MTPingsRecentIfPing>
<MTPingsRecentHeader><ul></MTPingsRecentHeader>
<li><a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
<MTPingsRecentFooter></ul></MTPingsRecentFooter>
</MTPingsRecentIfPing>
</MTPingsRecent>
</div>

MTPingsRecent の lastn で表示するトラックバック数を指定します。なおこのプラグインは「最近のコメント」表示にも利用することができます。

以上です。このカスタマイズの足跡とご近所サイトの状況ですが、発端は1の

Ogawa::Memoranda最近のトラックバックをエントリごとにまとめて表示

ではないかと思います。この後

Magic Whiteトラックバックの表示変えました

とつながり、その後新たなプラグインとして2の

Ogawa::Memorandarecently_pinged_on Plugin

が登場しました。それに伴って

サイドメニューのツリー化スクリプト(改)コメント

となり、

喜怒哀楽続・リストのツリー化(改)をしよう!

でご近所サイトに広がっていきました(当サイトでプラグインを紹介するエントリーを書いていましたが先を越されました(笑))。さらにその後、3の

The blog of H.Fujimoto最近のコメント/トラックバックをエントリーとともに表示するプラグイン

が登場しました。

Comments [12] | Trackbacks [18]

ジロンカ・スメルキラー(消臭製品)購入

May 3,2005 12:35 AM
Category:[mono]
Tag:[, ]
Permalink

台所周りを消臭する必要に迫られて、先日、池袋の東急ハンズでいい消臭剤がないかと物色。最初、消臭のコーナーがみつからず(バカ)、脱臭・除湿のコーナーで消臭剤をみつけました。といってもスプレーが3種類ほど置かれていただけで、「(あのハンズで)これだけか?」と思ったのですが、もう少しうろうろしているとちょっと離れたところに消臭剤のコーナーがきちんとありました。

そこにはスーパーでみかけるタイプから怪しげなものまで消臭グッズがわんさかありました。さすがハンズ(おいおい)。とはいっても消臭にお金をかけるつもりもなく、当初「数百円のもので済ませよう」という目論見だったのですが、その想いを見事に打ち砕いてくれたのが今回紹介する「ジロンカ・スメルキラー」です。

ジロンカ スメルキラー クラシックセット (ブラック)
ジロンカ
売り上げランキング: 6
通常24時間以内に発送
おすすめ度の平均: 4.58
5 玄関などに
5 スグレモノ
5 本当に不思議

それはどうみても消臭できるとは思えない、直径5cmほどの円盤型のステンレス製で、付属しているトレイにその物体が半分ほど浸かる程度に水を入れておくだけでいいようです。
従来の消臭剤や芳香剤は化学物質または香りで「臭いを覆い隠す」という考えですが、これは水分と空気に接触することにより触媒作用を引き起こし、臭いの分子を連鎖的に分解して臭いを持たない原子の状態にするそうです。即効性はありませんが使い始めて5~6時間で効果が現れるとのこと。

後で調べてみたところ、スメルキラーを発売しているドイツのジロンカ(Zielonka)社は、メルセデス・ベンツやVW、アウディ社の金属製精密自動車部品の製造をしており、日本での輸入総発売元はコラムジャパン株式会社。こちらの公式サイトでスメルキラーの製品紹介も掲載されています(ブログもやってました)。

ということで一目でその製品が気に入ってしまった私は、手に持っていた、買うはずだった他の商品を元の棚に戻して、これを買いました。
家に帰って早速セットし、次の日には無事に消臭できておりまして大変重宝しております。効果はもちろんのこと、これまでの消臭剤のイメージを払拭する洗練されたデザインが気に入ってます。ちょっと高価なのがタマにキズですが、まあ半永久に使えるということで。

今回は8畳までの広さで使える「クラシック」というものを買いましたが他にも色々ありますのでご紹介まで。

ブログ関係ではペットを飼われている方も少なくないので、ご存知の方もいらっしゃるのでしょうか。なお「直接手肌の臭いをとる場合、金属アレルギーの方はご使用を控えてください」とのことです。

Comments [5] | Trackbacks [6]

個別エントリーアーカイブに同一カテゴリーのエントリーを表示

タイトルの通り、個別エントリーアーカイブで同一カテゴリーに属するエントリーの一覧を表示するカスタマイズです。公開テンプレートのカテゴリーアーカイブで同一カテゴリーのエントリー一覧を表示していますが、本カスタマイズを行うことで同じものを個別エントリーアーカイブに表示することができます。

一番最初にこのカスタマイズを発見したのは実はかなり昔で、下の記事です。

今日まで、そして明日から。-3rd spiral-個別記事のページにカテゴリのエントリ一覧を表示する
87designThis Category Entries (easy)(元記事)

ご近所サイトさんでは下記がありました(とりこぼしご容赦ください)。

ぐーたら on MT個別記事にその記事の属するカテゴリーの記事一覧を。
Magic White個別記事にカテゴリー内記事一覧表示
Stupid ExcuseThis Category Entries
やむやむThisCategoryEntriesですと!?

以下、カスタマイズ方法です。

1.MTTagInvoke プラグインをダウンロード

下記のサイトよりプラグインをダウンロード・解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置(またはアップロード)、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置(またはアップロード) します。

MT ExtensionsMTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

2.テンプレートの設定

個別エントリーアーカイブテンプレートのサイドバーに下記のタグを設定します。上記のサイトからの情報をまとめて3パターン用意してみました。緑色は公開テンプレート用の設定を示しています。

注:MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

MTTagInvoke プラグインMTタグ対応表
1.0(現在)0.9
MTTagInvokeNameMTTagName
MTTagInvokeAttributeMTTagAttribute
MTTagInvokeContentMTTagContent

2.1 同一カテゴリーに属するエントリー一覧を表示

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.2 表示するエントリー数を指定

2.1に青色部分を追加します。サンプルは最近の5件を表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">5</MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.3 エントリー毎にコメントを表示

2.1または2.2に青色字部分を追加します。サンプルは最近の5コメントを表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
<div class="side">

2.4 ツリー化&日別表示をつける

「最近のエントリー」の日別表示を適用させてみました。サンプルは最近の10件を表示する設定になっています。lastn 指定の行を外せば全エントリーが表示されます。タグは ul -li のリスト形式になっていますのでご注意ください。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">10</MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

MTTagInvoke プラグインはMTタグのタグアトリビュート(属性)に対してさらにMTタグを利用できるというものです。一番目のサンプルを例にすると、本来書きたいMTタグは

<MTEntries category="<$MTEntryCategory$>">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>

となります。これは「最近のエントリー」表示用タグで、これに赤色部分で「表示されているエントリーのカテゴリーと同じエントリーを表示」を指定しているのですが、タグアトリビュート category の指定にMT変数タグ <$MTEntryCategory$> は指定できません(再構築でエラーとなります)。そこで MTTagInvoke プラグインを用いて、MTEntries の代わりに MTタグ名の指定

<MTTagInvoke tag_name="MTEntries">

を行い、続いて「タグアトリビュート category に <$MTEntryCategory$> を使う」という指定、

<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>

を行うことで、

<MTEntries category="<$MTEntryCategory$>">

と同じ効果を得ることができる訳です。ここではタグアトリビュートをひとつだけ指定していますが、複数指定することも可能です。

2006.05.25 追記
2.3項のタグで、コメントがないエントリーが表示される不具合を修正しました。

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

Comments [29] | Trackbacks [21]

カスタマイズ予告

May 1,2005 7:57 AM
Category:[Movable Type]
Tag:[]
Permalink

諸々の事情で、周りの方が行っていてこのサイトで取り上げていなかったカスタマイズネタをここ20日ほど取り上げていく予定です。

2日程前から風邪をひいてしまって、夜寝ると咳き込んでしまって全然眠れません。ということでこんな朝早くから書いてます。いい処方ございましたら教えてください。

6本6本、じゃないゴホンゴホン。(笑)

Comments [6] | Trackbacks [0]
Now loading...
Introduction
List of "May 2005"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02