Top > February 2006 [全て開く]

新着エントリーの New マークを親カテゴリーに表示する

February 28,2006 2:22 AM
Category:[新着表示]
Tag:[, , , , ]
Permalink

新着エントリーの New マークを親カテゴリーに表示する先日エントリーした「新着エントリーに New マークをつける」で「サブカテゴリーリストを折りたたんだ状態で親カテゴリーにもNewマークを表示させたい」というご要望をいただきましたので、本エントリーにてご紹介します。
このカスタマイズを行うことで、スクリーンショットのように子カテゴリー [Linux] を新規エントリーした際、最上位の親カテゴリー [趣味] にも New マークを表示します(折りたたみマークは割愛)。

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

1.サブカテゴリー構成が2階層の場合

サブカテゴリー構成が2階層の場合、親カテゴリーに子カテゴリーの新着エントリーの日付を反映させることで、New マークを表示させます。ただし New マークは全ての親カテゴリーに反映されるので、3階層以上のカテゴリー構成の場合は2項をご利用ください。

1.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加します。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span>
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

1.2 スクリプトの設定・CSSの設定

スクリプトの設定・CSSの設定については新着エントリーに New マークをつけるを参照ください。

2.サブカテゴリー構成が3階層以上の場合

サブカテゴリー構成が3階層以上の場合は、途中の親カテゴリーに New マークを表示させないようにするため、1項とは設定内容が異なります。

2.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加してください。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>:</MTEntries><MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new">00:00:00:00:00:00:<MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

2.2 スクリプトの追加

下記のスクリプトを2.1項のタグの下に追加してください。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementById('categories').getElementsByTagName('span');
var list = new Array();
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            list.push(time[6]);
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
                for(j = 0; j < list.length; j++){
                    if(list[j] == time[6]){
                        spans[j].innerHTML = content;
                        spans[j].style.display = 'inline';
                        break;
                    }
                }
            }
        }
    }
}
//-->
</script>

このスクリプトの動作ですが、各カテゴリーの日付の最後に最上位の親カテゴリーIDを予め付与しておき、新着エントリーがあった場合にその親カテゴリーIDのカテゴリーを再検索して、New マークを与えています。

2.3 CSSの設定

CSSの設定については新着エントリーに New マークをつけるを参照ください。

2006.02.28 追記
2.2項、3項でエントリーが存在しない親カテゴリーの考慮がもれていましたのでタグを修正しました。

2006.08.19
記事を全面修正しました。

2009.01.06
スクリプトを修正しました。

Comments [16] | Trackbacks [0]

テンプレート修正

現在公開中のMovable Type 3.2 テンプレートSerene Bach テンプレートFC2ブログテンプレートについて、下記の部分を修正致しました(sbテンプレートは対象外にしました)。

  1. スタイルシートの全称セレクタから font-weight プロパティを削除
  2. 見出し用のタイプセレクタを追加
  3. エントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタを集約

1 と 2 については、「太字が反映されません」というコメントを何回か頂いたものの修正です。反映されない原因は全称セレクタに font-weight プロパティを設定していたためで、これを 見出し(h1?h6)の font-weight プロパティに変更しました。
具体的には下記の変更を行っています(赤色を削除して青色を追加)。

変更前

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
}

変更後

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
 
/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

3 についても「コメント・トラックバックタイトルの配色はどこで変更すればよいでしょうか?」という質問を何回か頂いていたものの修正です。エントリー日付の配色を変更された際、コメント・トラックバックタイトルの配色も変更されると思いますが、どこを変更して良いか分かりにい状態になっておりました。
これについては1ヶ所の変更でエントリー日付・コメントタイトル・トラックバックタイトルに反映されるよう、配色に関するセレクタをまとめました。
具体的には下記の変更を行っています(赤色を削除して青色を追加)。

変更前

/* エントリー日付 */
.date { 
    margin: 6px 5px 0;
    padding: 2px 0 2px 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 11px;
    font-weight: bold;
}
 
.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding: 2px 0 2px 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 11px;
}

変更後

/* エントリー日付 */
.date { 
    margin: 6px 5px 0;
    padding: 2px 0 2px 5px;
    font-size: 11px;
    font-weight: bold;
}
 
/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.date, 
.trackbacks-header,
.comments-header,
.comments-open-header {
    color: #ffffff;
    background: #8fabbe;
}
 
.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding: 2px 0 2px 5px;
    font-size: 11px;
}

その他、軽微な誤りも併せて修正しています。Movable Type で動作確認したものを他のテンプレートに反映させておりますので、不具合等ございましたらご連絡ください。

Comments [2] | Trackbacks [1]

院長室

February 26,2006 1:32 AM
Category:[ご利用サイト]
Tag:[, ]
Permalink

院長室このエントリーはの先日エントリーした「100万アクセス特別企画」で見事999999をゲットされた方のサイト紹介です。

サイト名は院長室。当サイトのテンプレートユーザさんです。管理者は oyaji さんで、福岡県の片田舎で細々と医業を営んでいらっしゃるそうです。お医者さんなのでさぞ堅い内容のサイトかと思いきや、見事に裏切ってくれました。About のページをご覧になれば oyaji さんのお人柄がお分かりになると思います。

医学系・科学系・社会系・生活系等のカテゴリーに約1000近くのエントリーが掲載されています。
最近の記事で目についたのは「バイ菌」です。意外なところが汚れているようで、キレイ好きな方は注意された方がいいでしょう。音楽関係の記事で「習い事」もありました。音楽の習い事をするとIQが上がるそうです。あと「オペラ座の怪人」など、とにかく読み応え十分。

また当サイトのダジャレカテゴリーに負けず劣らずのダジャレフリークです。違うのは、私のように突然何の脈絡もなく追記のくだらない数文字で1エントリーを終えるという、ネタ切れ時のコストパフォーマンスを狙ったものではなく、各エントリーにそれぞれしっかりとしたコンテンツがあり、その内容に絡めたジョークで締めくくられているという知的なものです。スタッフと院長の会話もナイスです。

2002年から開設されたホームページの内容を最近 blog に移されたようで、タメになる記事とジョークのバランスが絶妙な、お勧めサイトと言えるでしょう。

Comments [2] | Trackbacks [0]

女子フィギュア

February 25,2006 1:51 AM
Category:[ダジャレ]
Tag:[]
Permalink

荒川静香、サーシャ・コーエンを

Comments [5] | Trackbacks [0]

Open Directory Project と Google Directory へ登録

February 24,2006 11:53 PM
Category:[blog]
Tag:[]
Permalink

Google DirectoryOgawa::memoranda さんの Google Directory を拝見して、1ヶ月ほど前に Open Directory Project へこっそり申請しておりました。で数週間前にめでたく登録され、先日 Google Directory にも反映されました。

Open Directory Project への申請方法は、サイトの該当すると思われるカテゴリーへ進み、上に表示された「URLを推薦」をクリックして、次ページで必要事項を記入して申請します(Open Directoryへのサイト申請方法)。ただし申請=登録ではないようですのでご注意ください。

Google Directory 等の掲載については、申請方法の最後の方に

申請したサイトがOpen Directoryに掲載された場合、Open Directoryのデータを利用している AOL Search, DirectHit, HotBot, Google, Lycos, Netscape Search, などパートナーサイトへの反映は大体2週間以上何ヶ月もかかるかもしれません。ODPのデータは毎週更新されますが、パートナーサイトはそれぞれ違った更新スケジュールになっています。

と記されています。
Google Directory へ掲載されると掲載内容が Google への検索結果等へ反映されます(というページをみつけたのですがURL失念)。

Google Directoryさて、元の Open Directory は、掲載当初は Google Directory と同一カテゴリーでしたが、さらにカテゴライズされて「テンプレート」というカテゴリーに掲載されてました。
当サイトはともかく、他のカテゴリーが相応しいサイトもあるような気がするのは私だけでしょうか。
Comments [0] | Trackbacks [0]

100万アクセス特別企画

February 23,2006 10:00 AM
Category:[お知らせ]
Tag:[]
Permalink

このサイトの右下に表示しているカウンタがまもなく 1000000 に到達します。現在のアクセスからすると明日の午後辺りではないかと推測します。

このカウンタはほぼサイト開設当初の2004年5月から設置しているもので、「ページビュー」と隣りに設置している「ビジット」カウンタの中間くらいの粒度で更新されているようです(IPチェックは行っている筈なのでやや閾値が低いビジットと言えるでしょう)。

ということで、999999 または 1000000 のキリ番をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、粗品進呈またはサイト紹介 *1 のいずれかをプレゼントとしてご用意させて頂きます。
ご希望のコースをメールまたは本エントリーのコメントでお知らせください。*2


*1:サイト内容によってはお断りする場合があります
*2:お一人様でいずれもゲットされた場合はいずれか一方のみとさせてください

Comments [5] | Trackbacks [1]

新着コメントに New マークをつける

新着コメントに New マークをつける新着エントリーに New マークをつけるの「最近のコメント」版で、「最近のコメント」の新着コメントに「New!!」というテキストや画像を表示するカスタマイズです。

「コメント投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はコメントの投稿時間をコメントタグで予め表示させておき、後から JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示するという仕組みです。

1.テンプレートの修正

1.1 公開テンプレートの場合

「最近のコメント」タグに下記のように青色部分を追加します。

<!-- 最近のコメント開始 -->
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$> <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTComments>
</MTEntries>
</div>
<!-- 最近のコメント終了 -->

1.2 Recents プラグインの場合

The blog of H.Fujimotoさんの最近のコメント/トラックバックをエントリーとともに表示するプラグインのサンプルリストを元に修正したものです。

<ul>
<MTCommentsRecent lastn="10" comment_sort_order="ascend">
<MTCommentsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(<$MTEntryDate$>)</MTCommentsRecentIfEntry>
<MTCommentsRecentIfComment>
<MTCommentsRecentHeader><ul></MTCommentsRecentHeader>
<li><$MTCommentAuthorLink$>(<$MTCommentDate$>) <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTCommentsRecentFooter></ul></li></MTCommentsRecentFooter>
</MTCommentsRecentIfComment>
</MTCommentsRecent>
</ul>

1.3 MTCollate プラグインの場合

以下は当サイトで公開しているMTCollate を使って「最近のコメント」を表示するのサンプルを元に修正したものです。

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_newdate"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$> <span class="new"><$MTCollateField name="comment_newdate"$></span><br />
</MTCollateList>
</div>

2.スクリプトの追加

上記を設定したテンプレートの最後の方に下記のスクリプトを追加します。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です(例は24時間)。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

3.CSS設定

表示するテキストは new という class 属性つきの span タグで括られていますので、

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

2006.08.15 追記
HTMLタグおよびスクリプトにコメントアウトする方式の設定が残っていましたので修正しました。

2006.08.18 追記
CSS に display プロパティがもれていたので追加しました。

Comments [30] | Trackbacks [9]

「最近のコメント」が表示されない不具合について

最近、公開テンプレートをご利用くださっている方から「『最近のコメント』が表示されません」というコメントを何件か頂きました。どうやら MTEntries タグに recently_commented_on 属性を付与しているとダメみたいです。
ネットで色々と調べたところ、MySQL のシステム権限付与が影響している(らしい)ことが判明しました。MuySQLのユーザが一時テーブルを作成する権限を持っていない場合に起こる不具合のようです。

以下、phpMyAdmin を利用した権限の変更方法を記しておきます(権限を変更するには root でログインすることが条件です)。変更できない場合はエントリーの最後をご覧ください。

ログイン画面phpMyAdmin であればログイン画面の[特権]をクリック
ユーザー概略 次ページの「ユーザー概略」で表示されたユーザ一覧より 該当ユーザの一番右にあるアイコン(「特権を修正」というツールチップが表示されます)をクリック。
CREATE TEMPORARY TABLES 次ページの「CREATE TEMPORARY TABLES」のチェックボックスをチェックして「実行」をクリック。
「グローバル特権」欄に「ALL PRIVILEGES」が表示 正常に終了すれば「グローバル特権」欄に「ALL PRIVILEGES」が表示されます。

なお自サイトでMySQLの特権を外して試してみたのですが同様の事象は発生しませんでした。上記の手順については参考程度という位置づけでお願い致します。
この問題についての参考サイトは下記です。ありがとうございました(下記のサイトにはコマンドラインからの実行方法も掲載されています)。

レンタルサーバ等で権限の修正が不可能な場合は、下記のエントリーで紹介しているプラグインを利用すれば「最近のコメント」と同等以上の機能を実現できますので、そちらをご利用ください。2つめは(多分)本問題に対する実績ありです。

Comments [4] | Trackbacks [3]

新着エントリーのあるカテゴリーに New マークをつける

February 20,2006 11:51 PM
Category:[新着表示]
Tag:[, , , ]
Permalink

新着エントリーに New マークをつける「最近のエントリー」の新着エントリーやカテゴリーリスト・サブカテゴリーリストで新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するカスタマイズです(スクリーンショットはサブカテゴリーリストの完成イメージ)。

「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はエントリー(カテゴリーリストは最新1件)の投稿時間をコメントタグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。

1.テンプレートの修正

Newマークを表示したいテンプレートに下記の青色部分を追加します。例は公開テンプレートです。

1.1 「最近のエントリー」の場合

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTEntries>
</div>
<!-- エントリーリスト終了 -->

1.2 カテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side" id="test">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->

1.3 サブカテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

2.スクリプトの追加

上記タグを設定した各テンプレートの最後の方に下記のスクリプトを追加します(上記タグの中に埋め込まないでください)。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
            }
        }
    }
}
//-->
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です(例は24時間)。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

3.CSS設定

スタイルシートに下記の設定を追加します。最初の display プロパティで1項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

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

JavaScript で遊ぼう指定した日までカウントダウンする

2006.02.21
3項を追加しました。

2006.04.18
HTMLコメントの設定からCSSで非表示にする方式に変更しました。

2006.07.02
説明文を修正しました。

2009.01.04
エントリーのないカテゴリーを処理すると正常に動作しないという不具合があるため、スクリプトを修正しました。

Comments [79] | Trackbacks [19]

メモリ増設

February 19,2006 11:58 PM
Category:[自宅サーバ]
Tag:[, ]
Permalink

メモリ増設現在運用中の自宅サーバのメモリを増設しました。デフォルトの 512MB(256MB×2) にバルクメモリを 1GB(512MB×2)追加し、1.5GB にしました。

自宅サーバは24時間稼動させているので、ブラウジングやメール・エントリー投稿・カスタマイズの確認や画像作成等、他の作業をついつい行ってしまう訳です。が、Apache を起動しているところにいくつかのアプリケーションを立ち上げるとあっと言う間に 512MB を超え、メモリのスワッピングが発生してしまい、精神衛生上良くない状態が続いていました(他のマシンがあるのでそちらを使えばいいのですが)。
で、「いつかメモリを増設しよう」と以前から考えていたのですが、ようやく秋葉原のソフマップでまあ許せる値段で売っていたのを購入しました。

メモリ購入後は標準構成のメモリを外す予定でしたが、メモリ・スロットが4DIMMソケットあるので、元のメモリは外さずに購入したメモリ・モジュールを2枚追加し、計4枚組み込みました。マザーボードは865Gでデュアル・チャネル・モードに対応しており、デュアル対応させるためには標準構成と同一のメモリ・モジュールを増設する必要があったようですが、BIOSで確認したところ

1536MB DDR/333MHz デュアルチャネル

と表示されています。

ということで、アプリケーションを複数起動しても全くストレスなく動作するようになりました。また増設して初めて知ったのですが、今まで表示に結構時間がかかっていたエクスプローラーまでサクサク動くようになりました。
ある程度のCPUを搭載していながら動作が遅いと感じている方はメモリ増設を検討されてはいかがでしょうか。

Comments [0] | Trackbacks [1]

Movable Typeでつくる!最強のブログサイト―Movable Type3.2対応

February 18,2006 11:55 PM
Category:[書籍]
Tag:[, ]
Permalink

タイトルの通り、Movable Type の本「Movable Typeでつくる!最強のブログサイト―Movable Type3.2対応」が発売されました。著書の南大沢ブロードバンド研究所さんのサイトでも紹介記事がアップされています。

Movable Typeでつくる!最強のブログサイト―Movable Type3.2対応
小川 晃夫 南大沢ブロードバンド研究会
ソーテック社 (2006/02)

Movable Type のカスタマイズを中心とした内容的ですが、インストールや管理メニューからの操作方法、テンプレートとスタイルシート等の基本的な内容が前半に、全体の1/3にわたってきめ細かく書かれています。メインのカスタマイズについては基本編と応用編に分かれており、基本編はデフォルトから3カラムレイアウトへの変更を元にしたカレンダー、ナビゲーションメニュー、各種サイト情報(コメント・トラックバック・バナー・RSS等)の表示方法、応用編はプラグインも登場し、検索機能追加・静止画表示、動画配信・フォトアルバム・アフィリエイト導入・携帯からのアクセス・ポッドキャスティング等々です。さらに管理画面のカスタマイズやバックアップ・アップグレードまで網羅されており、Movable Type を初めて利用される方もこれ1冊でかなりのことができるようになると思います。

本書では当サイトのテンプレートと横型カレンダーについて掲載くださってます。記事の掲載にあたっては著書の南大沢ブロードバンドの方から昨年の6月にご連絡を頂き、以後何回かやりとりをさせて頂きました。執筆途中で3.2がリリースされるなど、色々とご苦労があったようですが無事に出版できたこと、本当におめでとうございます。

今回の出版については見本誌をお送り頂けるということでご連絡を頂いており、本日到着致しましたので早速紹介させて頂きました。興味のある方は是非お求めくださいますよう、よろしくお願い申し上げます。

Comments [8] | Trackbacks [0]

パッチをあてる(その3:patchコマンドの-pオプションについて)

February 17,2006 11:51 PM
Category:[パッチ]
Tag:[, ]
Permalink

パッチをあてる」シリーズの第3回です。
サイトを検索すると、patch コマンド実行時に

C:¥work>patch -p0 < patch.txt

と青色の "-p0" を付与しているサンプルが一般的のようですが、この -pnumber というオプションの意味を調査・実験してみました。

このオプションはパッチファイルに記述されたディレクトリを無視する階層を示すものです。例えばパッチファイルの1?2行目の青色部分が

--- lib/MT/Util.pm.bak Fri Jan 06 14:19:44 2006
+++ lib/MT/Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
-        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {
+        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

と、ディレクトリが記述されており、パッチをあてる対象のファイル(ここでは Util.pm)がカレントディレクトリに配置されている場合、パッチをあてるコマンドは

C:¥work>patch -p2 < patch.txt

と "-p2" を設定します。
解説すると、上記の例は「パッチファイルに記述されたディレクトリを2階層分無視して、カレントディレクトリ(の Util.pm)にパッチをあてよ」という指定をしている訳です。

つまり、最初の "-p0" というオプションは「ディレクトリを無視しない」という意味になります。上記のパッチファイルを Movable Type のいわゆる CGIPath に配置し、"-p0" を付与して patch コマンドを実行すると正常に行われる、という訳です。

逆にパッチで記述されたディレクトリに該当ファイルが存在しない状態で "-p0" オプションを付与してコマンドを実行すると、

C:¥work>patch -p0 < patch.txt
can't find file to patch at input line 3
Perhaps you should have used the -p or --strip option?
The text leading up to this was:
--------------------------
|--- lib/MT/Util.pm.bak Fri Feb 17 23:19:44 2006
|+++ lib/MT/Util.pm     Fri Feb 17 23:20:48 2006
--------------------------
File to patch:

というメッセージが表示されますのでご注意ください。

また、-p オプションを付与しない場合、パッチファイルに記述されているディレクトリが全て無視されてファイル名だけが対象となりました。したがってカレントディレクトリにファイルを置いている場合は -p オプションを付与する必要がないということになります。

パッチファイルにディレクトリの指定がないのに、"-p2" とかつけて実行すると下記のようなメッセージが出力されます。

C:¥work>patch -p2 < patch.txt
missing header for unified diff at line 3 of patch
can't find file to patch at input line 3
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|--- Util.pm.bak Fri Feb 17 23:19:44 2006
|+++ Util.pm     Fri Feb 17 23:20:48 2006
--------------------------
File to patch:

上記の内容を整理すると、patch コマンドにおける -p オプションの適用方法は下記のようになります。

 パッチをあてるファイル
カレントディレクトリにあるパッチファイルに記述された
ディレクトリにある
パッチファイルディレクトリ
記述あり
-pnumber または不要
numberは無視する階層数)
-p0
ディレクトリ
記述なし
不要
(-p0をつけても問題なし)

-pnumber オプションの代わりに --strip=number でも同じ効果があります。

C:¥work>patch --strip=0 < patch.txt

こちらの方が直感的に分かりやすそうです。

その1:適用方法
その2:パッチを作る
その3:patchコマンドの-pオプションについて
Comments [0] | Trackbacks [0]

ガストを

February 16,2006 11:50 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [5] | Trackbacks [0]

Google・Yahoo等の検索エンジンのキャッシュを利用する

February 15,2006 11:53 PM
Category:[PC]
Tag:[]
Permalink

Google や Yahoo の検索エンジンのキャッシュを利用されている方は少なくないと思います。サイトのレスポンスが遅い場合、あるいはサーバがダウンしている場合に、検索結果の右下にある「キャッシュ」というリンクをクリックすると、元サイトへジャンプする代わりに検索エンジンで保存されているページ(キャッシュ)が表示されます。また検索文字列がハイライト表示されるので、目的の情報を探しやすいという視覚的な利点もあります。

キャッシュは、そのページが検索エンジンにクロールされた時点のものが一定期間(数週間)保存されます。本来の役割は、

該当のページのサーバーがダウンした場合でも、ページの内容が見られるように多数のウェブページをクロールの時点で保存しています。(Googleの「キャッシュ」より引用)

ですが、その目的とは別に、デッドリンクになっている場合のページ検索や消失したデータのバックアップにも利用することが可能です。
よくある(?)のが「Movable Type のバックアップがなくなった!」というケースです。もしサイトURLを検索エンジンに登録されているのであれば、このキャッシュをひたすら追いかけていけば、ある程度のリカバリーは可能と思われます。

元記事がみつからない場合の検索さて、検索結果が表示される場合は表示された検索結果一覧から「キャッシュ」をクリックすればよいのですが、元記事が存在しない場合は検索結果さえ表示されなくなります。
このような場合は、URL(http://~/)をキーワード入力欄に入力します。Google の場合、もし該当サイトのキャッシュが残っていれば、左のようなページが表示されますので、その中の「キャッシュ」をクリックすれば表示されます(スクリーンショットは当サイトの旧URLを入力してみたものです)。
URLが分からない場合は関連記事から検索を始めましょう。目的のURLに対するリンクが貼られているかもしれません。

キャッシュは閲覧側からすると便利な機能ですが、サイト運営側からすると誤って公開してしまった情報が残ったり、すぐに削除できない等、好ましくないケースもあるようです。キャッシュ残存の妥当性は別として、検索エンジンにキャッシュを表示させたくない場合・削除したい場合等は、運営側から積極的にキャッシュを検索エンジンから削除する措置が必要なようです。

以下、関連記事です。

Comments [0] | Trackbacks [0]

バレンタインデー

February 14,2006 6:30 PM
Category:[ダジャレ]
Tag:[]
Permalink

チョコレートを贈った人に

Comments [8] | Trackbacks [0]

アップロード方法を指定するプラグイン

February 13,2006 11:56 PM
Category:[管理画面]
Tag:[, , , ]
Permalink

Movable Type のファイルのアップロード先等の指定は手入力で行っていたのですが、Better File Uploader というプラグインを導入しました。BigPAPI を利用したプラグインですので、バージョンアップによる修正は(多分)不要です。

以下設定方法です。

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

Plugin: Better File Uploader のサイトより Installation の1項にある BetterFileUploader.zip のリンクをクリックして、アーカイブをダウンロードします(2/12付で Photo Gallery 関連のバグが改修されています)。

2.プラグインのアップロード

アーカイブを解凍して、中にある BetterFileUploader というフォルダを丸ごと plugins ディレクトリ配下にアップロードします。

plugins/BetterFileUploader/BetterFileUploader.cgi
plugins/BetterFileUploader/BetterFileUploader.pl
plugins/BetterFileUploader/BetterFileUploader.pm

となればOKです。BigPAPI.pl が plugins ディレクトリにない場合、つまり BigPAPI を使ったことがない場合は、このファイルを plugins ディレクトリにアップロードします。

plugins/BigPAPI.pl

また、BetterFileUploader.cgi のファイル属性を 755 等に変更します。

3.設定

アップロード先を指定するプラグイン管理画面の「メイン・メニュー」→「プラグイン」(またはブログ別の「設定」→「プラグイン」)をクリックして、次ページのBetter File Uploader の右側にある「設定を表示」をクリックするとスクリーンショットの画面が表示されます。
  • Override weblog-specific settings with the settings below:チェックすることでここでの設定がデフォルトの設定に上書きします。
  • Default upload directory:アップロード先のディレクトリを指定します(アップロード画面の「アップロード先」に対応)。
  • Append:チェックボックスにチェックすると、現在の年月のディレクトリが追加されます。
  • By default, upload to:でアップロード先をアーカイブ・パス/サイト・パスのいずれかを選択します(アップロード画面の「アップロード先を指定」に対応します)。
  • By default, publish as:のCreate a new entry using this uploaded file.がアップロード後画面の「エントリーを投稿」、Show me the HTML.が「HTMLを表示」に対応します。
  • After uploading an image, a thumbnail can be built. How should the thumbnail size be calculated? はアップロード画像のサムネイルサイズを指定します(アップロード後画面の「サムネイル」部分に対応します)。The longest side should be pixels long:はピクセル指定した値が画像の長い方に適用されます。The thumbnail should be a fixed size:は画像の高さ・幅いずれかのサイズを指定します。
  • Photo Gallery Creation Options:については同サイトで公開されている Basic Photo Gallery Templates との連携のための設定です。利用する場合は Enable easier photo gallery creation mode. にチェックします。Place the photo path in the Entry Body field. はエントリーフィールドに画像パスを設定、Place the photo path in the Extended Entry field. は追記フィールドに画像パスを設定します。

全て設定したら「変更を保存」をクリックします。ファイルのアップロード画面で設定が反映されていればOKです。

このプラグインや Photo Gallery Templates についての詳細は Movable Type 4989Photo Gallery Templates で詳しく解説されていますのでそちらを参照されると良いでしょう。

Comments [9] | Trackbacks [2]

Serene Bach カテゴリーのプルダウン化プラグイン不具合修正

February 12,2006 11:50 PM
Category:[プルダウン]
Tag:[, , , ]
Permalink

Serene Bach カテゴリーのプルダウン化プラグイン修正以前公開したカテゴリーのプルダウン化プラグイン for Serene Bachで、「個別エントリーで表示されるカテゴリーリストの各カテゴリー件数が全て0になる」というご連絡を頂きましたので、プラグインを修正致しました。
具体的には、管理画面の「環境設定」→「環境設定」で保存形式を「個別エントリーをHTML保存」を選択している場合の個別エントリーで発生します。この問題は個別エントリーHTMLテンプレートの有無に依存しません。

原因は、既存のプラグインで個別エントリーHTMLを生成する際、各カテゴリー件数のみが取得できていなかったためです。修正内容は、個別エントリーの場合のみカテゴリー件数を再取得する処理を追加致しました。
確認不足であったこと、この場をお借りしてお詫び申し上げます。なお10日にリリースされたver 2.04Rでは動作未確認ですので予めご容赦ください。ver 2.04Rで動作確認済です。

修正したプラグインは下記のリンクからダウンロードできます(元エントリーからもダウンロードできます)。

FoldCategory.zip / FoldCategory.lzh

なお、カテゴリー件数を一律表示させたくない場合は、FoldCategory.pm の110行目付近にある、

$list .= ' (' . int($param{'num'}->{$cat->id}) . ')' if (!$param{'no_num'});

の先頭に # をつけて

# $list .= ' (' . int($param{'num'}->{$cat->id}) . ')' if (!$param{'no_num'});

とコメントアウトするか、行自体を削除してください。

以下余談です。
他のリスト関連ブロック(最新記事リスト・アーカイブリスト・カテゴリーリスト等)は、個別エントリーでは JavaScript で表示される仕組みになっております。
例えば、トップページのアーカイブリストのHTMLは

<div class="sidetitle">Archives</div>
<div class="side"><ul>
<li><a href="http://.../sb.cgi?month=200512">December 2005</a> (15)</li>
<li><a href="http://.../sb.cgi?month=200511">November 2005</a> (3)</li>
<li><a href="http://.../sb.cgi?month=200510">October 2005</a> (1)</li>
</ul></div>

となっていますが、個別エントリーでのアーカイブリストのHTMLは

<div class="sidetitle">Archives</div>
<div class="side"><script type="text/javascript" charset="UTF-8" src="http://.../log/arc.js"></script></div>

と JavaScript になっており、ここから読み込まれるスクリプトは log ディレクトリの下に

document.write('<ul>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200512">December 2005</a> (15)</li>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200511">November 2005</a> (3)</li>¥n');
document.write('<li><a href="http://.../sb.cgi?month=200510">October 2005</a> (1)</li>¥n');
document.write('</ul>¥n');

という内容のファイルが生成されています。つまり個別エントリーでは JavaScript を読み込むだけで済むため、再構築のパフォーマンス向上および再構築の簡略化を実現しているようです。

現在公開しているプラグインでは個別エントリーもトップページと同じHTMLが生成されるため、カテゴリーの変更が生じた場合、再構築によってしか個別エントリーに反映させることができません。件数表示も含め、カテゴリーの増減や構造を変更した場合も同様と思われます。

ということで、プラグインで JavaScript による表示が実現できないか現在調査中です。

Comments [3] | Trackbacks [0]

カテゴリー・アーカイブに前後カテゴリーのリンクを表示する

February 11,2006 11:57 PM
Category:[カテゴリー]
Tag:[, , , ]
Permalink

カテゴリー・アーカイブに前後カテゴリーのリンクを表示するエントリー・アーカイブで前後のエントリーのリンク、月別アーカイブで前後月のアーカイブリンクを表示するのと同じように、カテゴリー・アーカイブで前後のカテゴリーリンクを表示する(スクリーンショット)というオーソドックスなカスタマイズです。

リンクの表示には Supplemental Category Tags プラグインの MTCategoryPrevious/MTCategoryNext タグを利用します。参考サイトは下記です。ありがとうございました。

絵文録ことのはMT:前/次のカテゴリーへリンク

上記で配布元サイトの和訳が掲載されていますので、ここでは基本的な設定方法のみ記しておきます。

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

配布元サイトの Supplemental Category Tags(下記)へジャンプし、Availability の項にある mtcatx-1_5.zip のリンクをクリックしてアーカイブをダウンロードします。

Brad ChoateSupplemental Category Tags

2.プラグインのアップロード

アーカイブを解凍した中にある、catx.pl および catx.pm を、下記の配置になるようにアップロードします。

(mt home)/plugins/catx.pl
(mt home)/extlib/bradchoate/catx.pm

bradchoate というディレクトリが存在しない場合は新しく作ってください。

3.テンプレートの修正

カテゴリー・アーカイブテンプレートに下記のリストを追加します。挿入箇所は <MTEntries> というタグより上の辺り(あるいは </MTEntries> より下)になります。エントリー・アーカイブの前後リンクを参考にされると良いでしょう。

<div id="menu">
<MTCategoryPrevious>
<a href="<$MTCategoryArchiveLink$>"> &laquo;
<$MTCategoryLabel$></a> |
</MTCategoryPrevious>
<a href="<$MTBlogURL$>">Main</a>
<MTCategoryNext> |
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
&raquo;</a>
</MTCategoryNext>
</div>

リストは配布元で公開されているものですので、赤色で示した div 要素 や id 属性はご自身のサイトに合わせ、リンクマーク(&laquo; または &raquo;)はお好きなものに適宜変更してください。

設定が完了したらカテゴリー・アーカイブを再構築してください。前後リンクが表示されれば完成です。

Comments [0] | Trackbacks [3]

測定

February 10,2006 11:56 PM
Category:[ダジャレ]
Tag:[]
Permalink

している人を

Comments [5] | Trackbacks [0]

パッチをあてる(その2:パッチを作る)

February 9,2006 11:58 PM
Category:[パッチ]
Tag:[, ]
Permalink

パッチをあてる(その1:適用方法)の続きで(随分間があきましたが)、今回はパッチを作る方法をご紹介します。

パッチとはプログラムを修正するための差分、あるいは差分が記述されたファイルを指します。パッチを作るためには変更前のファイルと変更後のファイルを比較して、その差分を抽出します。比較するためには diff コマンドを利用します。

ここではその1の3.1項と同じ、下記のパッチを作ってみることにします。

--- Util.pm.bak Fri Jan 06 14:19:44 2006
+++ Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
-        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {
+        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

作業ディレクトリは前回と同様、C:¥work とします。その1で作ったファイル類は全て削除しておいてください。

1.diff コマンドの準備

パッチの作成にあたっては diff コマンドを使用します。Linux ではデフォルトで用意されているようですが、Windows では用意されていません。
ということで、diff コマンドをソフトウェア工房αから入手します。

プログラミング・ツール(移植ソフト)に表示されている、

diff272w.zip
をクリックし、解凍した中にある
diff.exe

をPCの任意のディレクトリに配置します(他にファイルが色々入ってますが今回は使いません)。C:¥WINDOWS 配下または C:¥WINDOWS¥system32 配下に配置できれば、後述するMS-DOSコマンドプロンプトからの起動でパスを指定せずに実行することができます。
配置できない場合はとりあえず C:¥ 配下においてください。

2.ファイルのバックアップ

修正するファイルとなる、lib/MT/Util.pm をコピーして Util.pm.bak というファイル名で保存してください。なお修正前のファイル名が Util.pm.bak、修正後のファイル名が Util.pm となります。これは修正後のファイルを正規のファイルとして使用するためです。いずれも C:¥work 配下に配置してください。

3.ファイルの修正

任意のエディタで work 配下に配置した Util.pm を開き、404 行目の

if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {

if ($p !~ m@^>/?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {

に修正します。

4.diff 実行

次に MS-DOS コマンドプロンプトを開き、

C:¥>cd work

で、work ディレクトリへ移動し、diffコマンド

C:¥work>diff -u Util.pm.bak Util.pm

を実行します。Cドライブ直下に diff.exe を置いている場合は、

C:¥work>C:¥diff -u Util.pm.bak Util.pm

とします。
2つのファイルには、先程修正した差分がありますので、画面に

--- Util.pm.bak Fri Jan 06 14:19:44 2006
+++ Util.pm     Fri Jan 06 14:20:48 2006
@@ -401,7 +401,7 @@
     $str ||= '';
     my @paras = split /\r?\n\r?\n/, $str;
     for my $p (@paras) {
-        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr)@) {
+        if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|menu|dir|p|pre|center|form|fieldset|select|address|div|hr)@) {
             $p =~ s!\r?\n!<br />\n!g;
             $p = "<p>$p</p>";
         }

が表示されます。これがパッチとなります。diff コマンドの後の "-u" を省略すると差分の行だけが表示されます。

これをマウスコピーして任意のエディタで新しいファイルを開き、ペースト&保存しても良いのですが、

C:¥work>diff -u Util.pm.bak Util.pm > patch.txt

を実行すれば work 配下に patch.txt というファイル名で直接保存することができます。これがパッチファイルとなり、その1の3.1項で作ったパッチファイルと同じものになります。

他のファイルでも同様に差分を表示することができますので、色々とお試しください。

Comments [0] | Trackbacks [0]

Movable Typeで構築するWebサイト入門

February 8,2006 11:51 PM
Category:[書籍]
Tag:[, ]
Permalink

月刊アスキーエントリーしようと思ってすっかり忘れてました。
現在、月刊アスキーでタイトルの「HTMLが面倒なあなたでもできるMovable Typeで構築するWebサイト入門」が連載中です。第1回は「サーバにMovable Typeをインストールする」。発売中の2月号は第2回「テンプレートをカスタマイズする」です。執筆は「Movable Type標準ハンドブック Movable Typeで今すぐできるウェブログ入門 改訂版」の著書等でお馴染みの関根元和さんです。

また、この記事と連動したブログも1月より開始しています。Movable Type の基本的な動作から、記事に掲載されていないカスタマイズについても色々紹介されており、なにかと参考になるのではないかと思います。

月刊アスキーは毎月18日頃発売です。2月号はまだ書店に並んでいると思いますので、まだ読まれていない方は是非ご覧ください。

Comments [2] | Trackbacks [0]

中央カラムとサイドバーで異なる背景画像を表示する

February 7,2006 11:54 PM
Category:[CSS]
Tag:[, , ]
Permalink

先日、リキッドレイアウトの背景色を変更するというカスタマイズを紹介しましたが、本エントリーは中央カラムとサイドバーで異なる背景画像を表示するカスタマイズです。

便宜上、公開テンプレートを例に説明しますが、同様の構造であれば他のテンプレートでも適用可能です。なお背景画像を固定するで使用した象を背景に用いています。大きい象は中央カラム、小さい象はサイドバーに表示するためのものです。

1.中央カラム・サイドバーともにスクロールする

1.1 リキッドレイアウト

[サンプル]
背景色を変更するに従って考えると、下記のように青色の部分をスタイルシートに追加すればOKです。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

1.2 固定レイアウト

[サンプル]
固定レイアウトの場合は、body 要素ではなく、box セレクタにサイドバー用の背景画像を設定します。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

2.サイドバーの背景画像を固定する

2.1 リキッドレイアウト

[サンプル]
サイドバーの画像を固定する場合は、1.1項の設定にbackground-attachment プロパティを追加します。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

2.2 固定レイアウト

[サンプル]
固定レイアウトも先と同様、1.2項の設定にbackground-attachment プロパティを追加します。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

3.中央カラムの背景画像を固定する

この方法はIEの場合、画像が固定されないようですので予めご容赦ください。

1項・2項の設定では、中央カラムで固定した画像以外の背景(ブラウザを画像の上下左右)に、 body 要素に指定した背景画像が重なってしまいます。[リキッドレイアウトの失敗サンプル]

アプローチはいくつかあると思いますが、ここでは

  • content セレクタに背景で白を指定して、サイドバーの背景が中央カラムに表示されないようにする
  • blog セレクタに中央カラムの画像を指定

という手法を使いました。

3.1 リキッドレイアウト

[サンプル]
#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します(大きい値が上に表示されます)。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    z-index:1;
    background-color: #ffffff;
}

3.2 固定レイアウト

[サンプル]
リキッドレイアウト同様、#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します(大きい値が上に表示されます)。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    z-index:1;
    background: #ffffff;
}
Comments [5] | Trackbacks [0]

Linux magazine the DVD Complete

February 6,2006 11:55 PM
Category:[書籍]
Tag:[, , ]
Permalink

先週末、秋葉原に行ってきまして、1月26日に発売された Linux magazine the DVD Complete を買ってきました。

Linux magazine the DVD Complete

アスキー (2006/01)

Linux magazine the DVD Completeは 2005年3月号で休刊となった Linux magazine の全て(月刊化前のNo.1?3と創刊号(1999年10月)?2004年12月号までの66冊分の全記事)がPDFとして付属のDVDに収録されています。定価2310円ですが1冊あたり35円という、お手頃な値段になっています。

DVDは各月号別ファイルのほかに、特集記事、連載記事ごとのファイルも収録されており、Adobe Acrobat Reader を使えば、複数ファイルからの一括検索も可能になっています。

Comments [0] | Trackbacks [0]

FeedBurner Japan 登録

February 5,2006 11:58 PM
Category:[FeedBurner]
Tag:[, , ]
Permalink

FeedBurner Japan 登録FeedBurner Japan が開始されたことを我楽FeedBurner Japan 開始されましたなぁ。で知りまして、とりあえず登録しておりましたが、この度正式にURLを公開します。

現在RSSリーダー等で当サイトのRSSフィードを登録くださっている方は、下記URLへ変更頂ければ幸いです。

http://www.koikikukan.com/atom.xml

FeedBurnerの主な特徴として、

  • 1つのRSSを複数RSSリーダーに対応できるように自動変換(スマート・フィード)
  • 個別記事単位でのRSS広告配信が可能(広告管理)
  • ブログ記事単位での詳細なトラッキング分析レポート

等が挙げられます。

スマート・フィードは、Movable Type で言えば、RSS1.0/RSS2.0/Atom形式で生成しているRSSフィードをどれかひとつ作っておくだけで、全てのRSS形式に自動変換してくれるというものです。広告配信は文字通りRSSフィードに広告を埋め込みます。管理ページには「Google AdSense for feeds が日本国内で使用可能になり次第、提供を開始する」と書かれています。トラッキング分析レポートはRSSフィードの購読数・トラフィックの測定が可能になります。
要するに、単にRSSフィードを配信するよりもかなり利便性が高くなるサービスみたいです。

ご自身のサイトを FeedBurner に登録する方法は、FeedBurner Japan のサイトでRSSフィードのアドレス(http://~/index.xml 等)を入力して「次へ」をクリックします。
次ページでフィード名(ブログのサイト名で良いと思います)と、お好きなアドレス(FeedBurnerを利用する場合のRSSフィードのアドレスになります)を設定します。
登録時に設定したタイトル・出力元フィード・アドレスは管理画面の「フィード編集」というリンクから変更できるようですが、後で出力元フィードを変更すると「FeedBurner のアドレスが利用できなくなります」と書いていますので、これだけは最初にきちんと決めておくのが良いでしょう。

登録した FeedBurner のブログへの設定方法については、Ogawa::MemorandaFeedBurnerに移行した件について。で詳しく解説されていますのでそちらを参照ください。当サイトでは .htaccess ファイルを使ったリダイレクトはまだ行っておりませんが随時移行していく予定です。

Comments [7] | Trackbacks [11]

FC2ブログテンプレート修正

February 4,2006 11:50 PM
Category:[最近のコメント]
Tag:[, , ]
Permalink

現在公開中のFC2ブログ用テンプレートに不具合がありましたので修正しました。テンプレートのエントリーは修正済ですが、部分的に修正される方は下記の内容をご覧ください。

1.コメント編集タグの追加

FC2ブログでは投稿したコメントを、投稿時に設定したパスワードを用いることで該当のコメントを(投稿した人が)ブラウザから編集することが可能です。これまでコメント投稿画面でパスワード入力の設定ができるようにしておりましたが、コメント編集画面へのリンクと編集画面自体がごっそり欠落しておりました。すいません。

これまでのテンプレートに変更を加える場合は、 /comment_area ? trackback_area の間に下記の青色部分を挿入してください。

     :
<!--/comment_area-->
 
<!-- コメント編集 -->
<!--edit_area-->
 
<div id="comments" class="comments">
 
   <!-- コメント編集 -->
   <form method="post" action="./" name="comment_form">
   <input type="hidden" name="mode" value="edit">
   <input type="hidden" name="mode2" value="edited">
   <input type="hidden" name="edit[rno]" value="<%eno>">
 
   <!-- コメント投稿フォームタイトル -->
   <div class="comments-open" id="comments-open">
      <h2 class="comments-open-header">コメントの編集</h2>
 
      <div class="comments-open-content">
 
         <!-- コメント投稿フォーム開始 -->
         <div id="comments-open-data">
            <dl>
               <dt><label for="comment-author">名前:</label></dt>
               <dd><input id="comment-author" name="edit[name]" tabindex="6" accesskey="n" size="20" value="<%edit_name>" /></dd>
               <dt><label for="comment-title">タイトル:</label></dt>
               <dd><input id="comment-title" name="edit[title]" tabindex="7" accesskey="t" size="30" value="<%edit_title>" /></dd>
               <dt><label for="comment-email">メールアドレス:</label></dt>
               <dd><input id="comment-email" name="edit[mail]" tabindex="8" accesskey="m" size="30" value="<%edit_mail>" /></dd>
               <dt><label for="comment-url">URL:</label></dt>
               <dd><input id="comment-url" name="edit[url]" tabindex="9" accesskey="u" size="30" value="<%edit_url>" /></dd>
               <dt></dt><dd><script type="text/javascript" src="http://blog8.fc2.com/load.js"></script></dd>
               <dt><label for="comment">コメント:</label></dt>
               <dd><textarea id="comment" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>
               <dt><label for="pass">パスワード:</label></dt>
               <dd><input id="pass" type="password" name="edit[pass]" tabindex="10" size="20"></dd>
               <dt><label for="secret">Secret:</label></dt>
               <dd><input id="secret" type="checkbox" name="edit[himitu]" tabindex="11">サイト管理者にのみ通知する</dd>
            </dl>
         </div>
         <div id="comments-open-footer" class="comments-open-footer">
            <input type="submit" tabindex="13" accesskey="s" id="comment-post" value="変更" />
            <input type="submit" tabindex="13" accesskey="s" name="edit[delete]" id="comment-post" value="削除" />
            <input type="reset" tabindex="14" value="クリア" />
         </div>
         <!-- コメント編集フォーム終了 -->
 
      </div><!-- /comments-open-content -->
   </div><!-- /comments-open -->
   </form>
 
</div>
<!--/edit_area-->
 
<!--trackback_area-->
     :

また、コメント編集へのリンクが必要ですので、コメント投稿者情報の部分に青色部分を追加してください。

<!-- コメント投稿者情報 -->
<p class="comment-footer">
   Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
</p>

さらに、絵文字を挿入した場合の位置補正のため、スタイルシートに下記を追加してください。

.comment-content img {
    vertical-align: middle;
    padding:0 2px;
}

2.コメント投稿で絵文字が使えない不具合の修正

絵文字の表示は行っていたのですが、絵文字挿入用の JavaScript が正常に動作しておりませんでした。
これまでのテンプレートに変更を加える場合は、コメント投稿タグの comment-text という文字列を検索し、赤色の

<dt><label for="comment-text">コメント:</label></dt>
<dd><textarea id="comment-text" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>

を青色の

<dt><label for="comment">コメント:</label></dt>
<dd><textarea id="comment" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>

に変更してください。

またスタイルシートの赤色部分

#comment-text {
    width: 266px;
}

を青色の

#comment {
    width: 266px;
}

に変更してください。

3.コメントに絵文字を挿入するためのタグ設定

備忘録です。コメントに絵文字が挿入できる設定は、コメント投稿用 form 要素で

<form method="post" action="./" name="comment_form">

という青色の name 属性を設定し、textarea 要素の前等に

<script type="text/javascript" src="http://blogx.fc2.com/load.js"></script>

を設定し、textarea に

<textarea id="comment" name="comment[body]" cols="xx" rows="x"></textarea>

という青色部分の名称が comment となるように設定します。これでFC2ブログから提供されている JavaScript が、comment_form というフォームの中にある comment という id 属性名を検索し、絵文字用タグを埋め込みます)。
で、textarea タグの id 属性が comment-text となっていたため、正常に動作しておりませんでした。すいません。

設定方法の詳細は下記にありました。

ブログ管理者用お知らせブログ管理者用お知らせ
Comments [0] | Trackbacks [0]

コメント・トラックバックを非表示にする方法(その2)

February 3,2006 11:56 PM
Category:[テンプレート]
Tag:[, , , ]
Permalink
コメント・トラックバックを非表示にする方法2コメント・トラックバックを非表示にする方法の続きで、管理画面の設定変更でこれまでに受けたコメント・トラックバックもスクリーンショットのように同時に非表示にするカスタマイズです。必要性の有無は別として、テクニックのひとつとして紹介致します。

1.コメント情報を非表示にする

デフォルトテンプレートや公開テンプレートのメインページやアーカイブページにあるコメントへのリンクやコメント数、およびエントリー・アーカイブの投稿コメント・コメントフォーム(以下「コメント情報」とします)の表示制御には MTIfCommentsActive タグが使われています。このタグは「コメント投稿が可能またはエントリーにコメントが存在する場合」にタグに括られた部分を有効となるため、「コメントを受け付けない」設定にしても、既に受け付けたコメントがある場合、コメント数や投稿コメントは表示されることになります。

これらをまとめて非表示にするには MTIfCommentsAccepted タグを利用します。MTIfCommentsAccepted タグは「コメント投稿が可能な場合」のみ、タグに括られた部分を有効としますので、このタグに置き換えることでコメントの有無にかかわらず、コメント情報を非表示にすることができます。
以下変更方法です。

1.1 テンプレートの修正

デフォルトテンプレートのメインページ場合、下記の赤色部分

<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>

を青色の

<MTIfCommentsAccepted>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsAccepted>

に変更します。他のアーカイブでも MTIfCommentsActive を探して MTIfCommentsAccepted に置き換えればOKです。

1.2 設定の変更

管理画面の「設定」→「コメント/トラックバック」の「投稿を受け付ける条件」で「なし」を選択し、再構築することでコメント情報が非表示になります(「すべて」または「認証サービスで認証されたコメント投稿者のみ」を選択するとコメント情報が表示されます)。

2.トラックバック情報を非表示にする

1項とほぼ同じで、メインページやアーカイブページにあるトラックバックへのリンクやトラックバック数、およびエントリー・アーカイブのトラックバックURL・トラックバック(以下「トラックバック情報」)には MTIfPingsActive タグが使われています(部分的に MTIfPingsAccepted も使われています)が、これを MTIfPingsAccepted タグに置き換えることでトラックバック情報をまとめて非表示にすることができます。

2.1 テンプレートの修正

デフォルトテンプレートの場合、下記の赤色部分

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>

を青色の

<MTIfPingsAccepted>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsAccepted>

に変更します。に変更します。他のアーカイブでも MTIfPingsActive を探して MTIfPingsAccepted に置き換えればOKです。

2.2 設定の変更

管理画面の「設定」→「コメント/トラックバック」の「トラックバックを受信」でチェックをはずし、再構築することでトラックバック情報が非表示になります(チェックをするとトラックバック情報が表示されます)。

3.その他

色々と組み合わせて動作は確認しておりますが、表示が設定通りにいかない場合は一旦全体を再構築してみてください。

Comments [2] | Trackbacks [0]

フラダンス

February 2,2006 11:56 PM
Category:[ダジャレ]
Tag:[, ]
Permalink
Comments [4] | Trackbacks [0]

コメント・トラックバックを非表示にする方法

February 1,2006 11:58 PM
Category:[テンプレート]
Tag:[, , , ]
Permalink

Movable Type のデフォルトテンプレートや公開テンプレートでコメントまたはトラックバックを非表示にする方法です。ご質問を頂いたので本エントリーにて紹介致します。

基本的にはテンプレートの修正は不要で、管理画面の設定のみでこれらを制御することができます。

1.コメントを受け付けない設定にする

コメントを受け付けない設定にする管理画面の「設定」→「コメント/トラックバック」のコメント設定欄の一番上にある「投稿を受け付ける条件」の「なし」を選択して設定を保存します。あるエントリーに対し、コメントが1件もない場合、インデックステンプレートを再構築することでメインページやアーカイブページのコメント数表示やエントリー・アーカイブのコメント欄が非表示になります。

2.トラックバックを受け付けない設定にする

トラックバックを受け付けない設定にする管理画面の「設定」→「コメント/トラックバック」のトラックバック設定欄の一番上にある「トラックバックを受信」のチェックボックスのチェックを外して設定を保存します。あるエントリーに対し、トラックバックが1件もない場合、全体を再構築することでメインページやアーカイブページのトラックバック数表示やエントリー・アーカイブのトラックバック欄が非表示になります。

3.注意事項

上記までの設定は受付に関する設定であり、一旦コメントまたはトラックバックを受け付けてしまうとそれらの情報については1・2項の設定とは無関係に表示されることになります(デフォルトテンプレート・公開テンプレートとも)。
コメント・トラックバック受付の設定と表示・非表示も同時に連動させる方法については、別途エントリーしたいと思います。

とりあえず開設当初からコメント・トラックバックを受け付けない設定にしておけば1・2項の設定で目的は達成できます。

4.お詫び

現在公開中の Movable Type 3.2 テンプレートですが、エントリー・アーカイブにおいてトラックバック受信後にトラックバックを受け付けない設定にした場合、トラックバックURLのタイトルのみが表示されるという不具合が発見されましたので、先ほど修正致しました。

Comments [0] | Trackbacks [0]
Now loading...
Introduction
List of "February 2006"
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
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12