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') {
        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 追記
記事を全面修正しました。

Comments [5] | 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 [0]

新着コメントに 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 [27] | Trackbacks [8]

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

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

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

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

Comments [75] | Trackbacks [17]

メモリ増設

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.プラグイ