小粋空間: 2006年11月アーカイブ

Top ＞ November 2006 [全て開く]

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

November 30,2006 2:20 AM
Category：[CSS]
Tag：[CSS, Photoshop]
Permalink

「CSSでブログに影をつける（ドロップシャドウ）」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる（かもしれない）方のために、Photoshop 6（CSは持ってません）を利用した作成方法を紹介します。

[ファイル]-[新規]で（固定レイアウトの場合は）ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。

作成した新規ウィンドウ新規作成のウィンドウはこんな感じになります。

[レイヤー]パレットに表示されている[背景]をダブルクリック。

開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。

これで[レイヤー]パレットに表示されているレイヤー名が「レイヤー0」に変更されました。

[イメージ]-[画像サイズ]（CSの場合はカンバスサイズ）を選択。

ドロップシャドウ分の横幅を追加します。サンプルでは左右 25px ずつ追加した合計サイズ 300px に設定しています。変更前のサイズはこのウィンドウの上部に表示されています。
アンカーはどの方向に広げるかを決めるものです。デフォルトは中央から上下左右に広げる設定になっていますので操作しないでください。

設定後のウィンドウこれで最初の画像の左右に余白が出来上がります。この状態では余白は透明ですが、背景色を設定したい場合は以降の背景色の設定を行ってください。必要でない方は、5つ下にあるドロップシャドウ設定に進んでください。

[レイヤー]パレットの下にあるレイヤーの新規作成をクリックして「レイヤー1」を作成。

その状態で[レイヤー]-[新規]-[レイヤーから背景へ]を選択。

これで「レイヤー1」が「背景」に変更されました。

設定後のウィンドウまた画像の左右余白の部分に背景色（ここでは白）が設定されます。背景色は予め設定している背景色が適用されます。

次にドロップシャドウを設定します。[レイヤー]パレットの「レイヤー0」をダブルクリック。

[レイヤースタイル]ウィンドウが開きますので、光彩（外側）を選択し、[構造]-[描画モード]を「通常」、[構造]の左下のラジオボタンを選択して右側のパレットをクリックしてお好きな色を設定（これがドロップシャドウ色になります）。その他、[エレメント]や[画質]でドロップシャドウを微調整します。
ドロップシャドウの具合は、先程のウィンドウ右側にある[プレビュー]をチェックしておけばリアルタイムで表示を確認できます。
決まったら[OK]をクリック。

ドロップシャドウ完成これでドロップシャドウが出来上がりました。あとは画像の高さを短くするだけです。

[イメージ]-[画像サイズ]（CSの場合はカンバスサイズ）を選択。

開いたウィンドウで高さを変更します。ここでは 3px にしてみました。これで[OK}をクリック。

「画像の一部が切り抜かれます」という警告のダイアログが表示されますが、そのまま[OK]をクリック。

完成画面これでドロップシャドウ画像の完成です。

2006.12.02
記事を全面変更しました。

続きを読む ≫

Comments [9] | Trackbacks [1]

CSSでブログに影をつける（ドロップシャドウ）

November 29,2006 1:55 AM
Category：[CSS]
Tag：[CSS, Dropshadow, Template]
Permalink

CSSでブログに影をつける（ドロップシャドウ）ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。

ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。
最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。

このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。

2008.09.11 追記
Movable Type 4.x 配布テンプレートご利用の方は「CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）」をご覧ください。

１．ドロップシャドウの仕組み

１．１固定レイアウト

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

背景画像

基本的には、body 要素の背景画像（CSS で言えば body 要素セレクタの background プロパティ）に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。*2

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記にHTMLマークアップのイメージを記します。*3

<body>
  <div>　← ブログの幅を指定
    <div>　← 背景画像を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズ（２項）をご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

１．２リキッドレイアウト

基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。

<body>
  <div>　← 背景画像（左用）を指定
    <div>　← 背景画像（右用）を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

こちらもサンプルを用意していますのでご覧ください。

サンプル3：リキッドレイアウト

２．公開テンプレートによるカスタマイズ

２．１共通事項 - テンプレートの修正

固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

２．２固定レイアウトの場合

２．２．１画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

ドロップシャドウ用背景画像

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。

２．２．２スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    width: 870px;
    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;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}

これでドロップシャドウが表示されればOKです。なお上記のサンプルは、背景画像（back_fixed.gif）がスタイルシートと同じディレクトリにあることを想定しています。

#inner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

２．３リキッドレイアウトの場合

２．３．１画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

２．３．２スタイルシート修正

スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。（略）と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。

/* タイトルバナー */
#banner {
    margin:0 15px;
    _height: 100%;
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
*:first-child+html #banner {
    height: 100%;
}
　　　　　　：
　　　　　（略）
　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    margin: 0 200px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    left: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    right: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #inner {
    background: url("back_liquid_left.gif") repeat-y top left;
}
.layout-three-column-liquid #box {
    background: url("back_liquid_right.gif") repeat-y top right;
    width:100%;
}

#banner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2007.05.09 追記
CSS に IE7 対応のセレクタを追加しました。

*1：これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2：背景画像の高さは、他のサイトを拝見すると、3px?5pxと、非常に薄いものが多いです。CSS によって繰り返し表示するということはブラウザのレンダリング性能に依存する訳ですが、どの程度の高さが妥当であるかは不明です。個人的にはサンプルで示している高さでも特に問題ないと思ってます。言い換えると、繰り返し表示することでブラウザ下の部分が「はみだす」とか「帳尻が合わない」ということにはならないようです。

*3：div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません（本来はブログ全体を括る要素に与えるのが妥当）が、クロスブラウザ対応のためのテクニックとして記しています。

Comments [46] | Trackbacks [1]

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Category：[サイドメニュー, 最近のエントリー, 最近のコメント, 最近のトラックバック, 月別アーカイブ]
Tag：[Customize, MovableType]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

１．Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

２．スクリプトの追加

「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。

お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト 2.1　追記文章の折りたたみ用スクリプト

３．部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。

３．１最近のエントリー

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.1　「最近のエントリー」用MTタグ

３．２最近のコメント

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.2　「最近のコメント」用MTタグ

３．３最近のトラックバック

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.3　「最近のトラックバック」用MTタグ

３．４月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>

リスト 3.4　「月別アーカイブリスト」用MTタグ

４．CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

.list_more {
   margin:5px 0;
}

リスト 4.1　CSS

５．表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

　　　　　　：
<MTCounterIfEqual value="6">
　　　　　　：
　　　　　（略）
　　　　　　：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
　　　　　　：

リスト 5.1　表示数を変更する場合の変更箇所

「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [12] | Trackbacks [1]

天才クラシックギタリスト・山下和仁の超絶技巧「展覧会の絵」

November 27,2006 12:08 AM
Category：[音楽]
Tag：[Guitar, YouTube]
Permalink

YouTube に山下和仁「展覧会の絵」の演奏がありました。とりあえず聴いてみたい、という方は読み飛ばして、後方ある動画をご覧ください。

山下和仁は20年ほど前に「天才ギタリスト」としてデビュー、若くして世界3大クラシックギターコンクールを制覇し、現在の日本人トップクラシックギタリストの一人です。クラシックギター界はもちろん、他のジャンルのギタリストを含めても、彼の超絶技巧は他に類をみない素晴らしさがあります。

この「展覧会の絵」は20年ほど前の彼自身の編曲によるもので、ギター一本でクラシック音楽に真正面から向き合った作品。最近は演奏されていないので、YouTube で公開されている演奏はその当時のものと推測されます。

この曲は元々ピアノ独奏曲で、ロシアの作曲家・M.ムソルグスキーの代表的作品。「亡き王女のためのパヴァーヌ」等で有名な M.ラヴェルによる管弦楽編曲版の方が有名かもしれません。
クラシックに馴染みがない方でも、冒頭のフレーズ等、どこかで聴いたことがあるでしょう。

彼の演奏の特徴には下記のようなものがあります。

動きが激しい
演奏中に立ち上がりそうになる（普通は立ち上がらない）
演奏中に頻繁にチューニングをする（最近は当たり前になってきました）
この曲に関しては小指を使っている（クラシックギターでは小指は使わない）

「展覧会の絵」は40分ほどの大曲ですので、動画は4つに分割されています。うち3つは冒頭の40秒ほどナレーションが入りますが演奏には関係ありません。
原曲のピアノ版、または管弦楽編曲版を聴いてからこの動画を見るとさらに面白いでしょう。

なお、YouTube のビットレートでは速弾きの音が残念ながらきちんと入ってません。「ちゃんと聴いてみたい」という方は下記の1枚が超お勧めです（というかこの1枚しかありません）。

展覧会の絵&火の鳥

山下和仁ムソルグスキーストラヴィンスキー

おすすめ平均
stars 信じられないくらい凄い演奏
stars 大好きなあなたへ
stars クラッシックギタリスト
stars 「火の鳥」白熱の名演
stars 野性味あふれるギター版「展覧会の絵」

Amazonで詳しく見る by G-Tools

楽譜も販売されてます。腕試しに弾いてみたい、という方は下記のサイトからどうぞ。

現代ギター：ムソルグスキー：展覧会の絵／山下和仁・編

プロムナード - 小人 - プロムナード

古城 - プロムナード - テュイルリーの庭 - ビドロ

プロムナード - 卵の殻をつけた雛の踊り - サムエル・ゴールデンベルクとシュミュイレ - リモージュの市場 - カタコンブ

バーバ・ヤーガの小屋 - キエフの大門

Comments [4] | Trackbacks [0]

バシッと

November 26,2006 1:50 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [6] | Trackbacks [0]

キューステア（Qステア/Q-STEER）・購入レポート

November 25,2006 1:30 AM
Category：[mono]
Tag：[Amazon, Hobby]
Permalink

キューステアワゴンR RR 「ラジコンのような操作ができるチョロQ」として発売された「キューステア（Qステア/Q-STEER）」の記事をエントリーしてから１ヶ月以上経ちまして、ようやく購入しました。
購入した機種は左スクリーンショットの「ワゴンR RR スターターセット」。渋めなワインレッドのボディカラーに精悍な顔つき。なかなか気に入っています。

ということで、以下、キューステアの購入レポートです。職業病からか、ブログカスタマイズのような書き方になってしまっていますが（笑）、付属の説明書が分かりにくかったので、とりあえず「買ってすぐ動かしたい！」という方のために、説明書を読まなくても操作できる内容にしてみました。

まずパッケージはご覧の通り。これは以前の「デジQ-R」をはるかに下回る 100mm（高さ）×140mm（幅）という小さなサイズでした。理由はデジQ-Rのコントローラー（プロポ）が本格的であったのに対し、「ビットチャージー」と同じ（というかさらに）コンパクトなものに変わったためです。

そのコントローラーの大きさは 50mm×35mm。購入時は電池部分に絶縁テープが仕込まれてますので、まずはこれを引き抜きましょう。
コントローラーの左側にスロットル（前進・後進）、右側にハンドルが配置されています。
私が一番気になっていたのは「スピードやハンドルの微調整が可能か？」という点でしたが、スロットル・ハンドルともにカチッという感触で操作するようになっており、要するに ON/OFF のみしかなく、急発進・急停止、回転角度も一定です。
その代わり、右上に見える「ダッシュボタン」を押すと、ボタンを押している間、加速します。

上部中央に見えるのがセンサーで、スロットル下にバンド切り替えスイッチがあります。バンド切り替えは、1台で遊ぶのであればこれを修正する必要はないと思います。

コントローラー＆アジャスタースティックコントローラーの下にある棒状のものは「アジャスタースティック」というもので、これを引っ張り出して（引っ張り出すのがちょっと面倒）、車体の電源 ON/OFF・バンド（周波数）切り替え・直進性の調整・電池交換に用います。
車体の電源を入れる必要がありますので、とりあえず引っ張り出しておきましょう。

車体の電源 ON/OFF は、赤色で囲った位置にあるスイッチを切り替えることで行ないます。スクリーンショットのように進行方向と垂直になっている状態が「OFF」です。先程引っ張り出した「アジャスタースティック」の先端の凹んでいる部分を電源スイッチの凸部にあてて、90度回転させます（これは説明書の図を見た方が良いでしょう）。

スイッチを進行方向と水平にすると「ON」になり、これでコントローラーから操作可能になります。
コントローラー・車体ともボタン電池を使っているので、走行時間が数分という制限があった前世代のものよりもたっぷり楽しめるようになりました。ただし1回の交換で何時間動作するかは不明です。

3分間操作しないと、車体の電源が ON の状態でも自動的に OFF になるようです。その際は一旦 OFF に戻し、再び ON にしてください。コントローラーの電源の ON/OFF はありません。

複数台で遊ぶ時は、それぞれ異なるバンドを使用します。車体のバンドを切り替えて、コントローラー全面下部にあるバンドを車体のバンドに合わせます。

コントローラーにはA?Dの計4バンドが用意されていますが、車体自体は「A・Bバンド用」と「C・Dバンド用」の2種類しかありませんのでご注意ください。ちなみに私の購入した車種は「C・Dバンド用」で、スクリーンショットは「Dバンド」を指しています（上のスクリーンショットは「Cバンド」の状態）。バンドは「アジャスタースティック」を用いて切り替えます。

直進性は前評判通り、結構いい感じす。が、バックに関してはあまり期待しない方がいいでしょう（笑）。
前進の直進性を修正する場合は左の赤枠部分にある「トリムスイッチ」で調整します。私の場合、特に調整する必要はありませんでした。

総合的には、約1000円という値段で充分楽しめる内容ではないでしょうか。金額の細かい話をすると、使用されているボタン電池（LR44）4つで、すでに350円位します。

キューステアの現在の（多分）フルラインナップは下記のページにまとめてます。

キューステア（Q-STEER）

今回購入したのは次の商品です。

Qステア QSS10 ワゴンR RR スターターセット　（C/D）

タカラトミー 2006-11-23
売り上げランキング : 1214

Amazonで詳しく見る by G-Tools

Comments [7] | Trackbacks [0]

JavaScript 不要なサイドメニューのツリー化 for Serene Bach

November 24,2006 1:30 AM
Category：[ツリー化]
Tag：[Customize, SereneBach, Tree]
Permalink

ブログツールのひとつとして有名な Serene Bach は現在 2.08D（開発途上版）がリリース中ですが、プラグインを用いて JavaScript 不要なコメント・トラックバックのツリー化を行うカスタマイズを紹介します。

Serene Bach on the Prairie：コメント・トラックバック指定ジャンプ

具体的には、「最近のコメント」「最近のトラックバック」ともに、コメントまたはトラックバック単位に表示されていたものが、記事単位およびコメント投稿日順・トラックバック受信順にまとめて表示されるようになります。

またHTMLマークアップは下記のように class 属性が追加されるようになります。また href 属性に "#"+部分識別子が付与されますので、個別記事ページの該当コメントまたは該当トラックバックの表示位置にジャンプできるようになります。

<ul class="tree">
<li><a href="http://～/eidx.html">記事タイトル1</a></li>
<li class="lst"><a href="http://～/eidx.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://～/eidx.html#com1">投稿者2 (mm/dd)</a></li>
<li class="end"><a href="http://～/eidx.html#com2">投稿者3 (mm/dd)</a></li>
<li><a href="http://～/eidy.html">記事タイトル2</a></li>
<li class="lst"><a href="http://～/eidy.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://～/eidy.html#com1">投稿者2 (mm/dd)</a></li>
　　　　　：
</ul>

青色部分の class 属性が追加されるので、これに対応するCSSを与えるだけでツリー表示が可能になります。

以下、カスタマイズ方法です。プラグインは配布サイトより入手し、利用可能状態にしてください。プラグインを利用可能にした後、管理画面左の「追加機能」に「コメント・トラックバック指定ジャンプ」が表示されますので、そのリンクをクリックして、表示された画面で「ツリー表示を使う」にチェックをして「変更する」をクリックしてください。

注：本カスタマイズと「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

１．ツリー画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
なおファイル名は３項の CSS で設定している tree_lst.gif および tree_end.gif に修正してください。

２．ツリー画像のアップロード

ダウンロードした画像をサーバの任意のディレクトリ（例えば img 配下）にアップロードしてください。

３．CSS設定

リスト3.1 のCSSをスタイルシートに追加します。

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree li.lst {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_lst.gif);
}
ul.tree li.end {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_end.gif);
}

リスト 3.1　CSS

上記はスクリーンショットのように当サイトのテンプレートに合わせたものですが、他のテンプレートでも適用可能と思います。レイアウトについては適宜修正してください。

なお、background-image プロパティの画像ファイルは、img ディレクトリに画像をアップロードしている場合を想定しています。例えば hogehoge というディレクトリの配下にツリー画像をアップロードした場合は、

background-image: url(hogehoge/tree_lst.gif);

という風に修正してください。

４．テンプレート修正

リストに付与された href 属性の"#"＋部分識別子を有効にしたい場合、個別記事のコメントリスト（リスト 4.1）・トラックバックリスト（リスト 4.2）に id 属性（青色）を追加します。

<!-- BEGIN comment -->
<div class="comment" id="{comment_id}">
<div class="comment-content">{comment_description}</div>
<p class="comment-footer">Posted by {comment_name} at {comment_time}</p>
</div>
<!-- END comment -->

リスト 4.1　コメントリストへ id 属性を追加

<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback" id="{trackback_id}">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
<!-- END trackback -->

リスト 4.2　トラックバックリストへ id 属性を追加

2007.02.06 追記
「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合の注意書きを追加しました。

Comments [10] | Trackbacks [1]

BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）

November 23,2006 3:33 AM
Category：[Ajax, BlogPeople]
Tag：[Ajax, BlogPeople, Customize]
Permalink

BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。

しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。

例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。

したがって、リンクリストを表示する位置についてはページの（少なくとも本文より）後方やリンクリスト専用のページに配置したり、あるいは「中継君（関連記事）」を利用されているのではないでしょうか。

このエントリーは、その解消策として、以前公開した「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」の第2弾で、Ajax と CGI の組み合わせでリンクリスト表示のタイムラグを解消する方法です（下記のスクリーンショットは表示イメージ）。

BlogPeople リンクリストの Ajax 化

仕組みは、リンクリストの表示用タグ（リスト 3.1）はお好きな位置に埋め込み、そこから Ajax（bp.js）を起動し、さらに CGI（bp.cgi）を起動し、CGI 経由で BlogPeople のリンクリストを取得します。Ajax 起動なので、HTMLページ表示と BlogPeople のリンクリスト取得は並列に処理され、リンクリストが取得できた時点で HTMLに反映されます。

上記の基本的な動作に加え、ここでは下記の動作も加えた、少し凝った作りにしています。

リンクリストが表示されるまではローディング画像を表示（IE6では初回しか表示されないようです）
リンクリスト取得に失敗した場合は、ローディング画像を消去して、リスト表示位置に "Server Error" または非表示

下記にサンプルを用意してますので、動作をご確認ください。なお Ajax の特徴を分かりやすくするよう、リンクリスト表示までに1秒かかるよう、スクリプトを改変しています。Firefox で閲覧されると良く分かります。

BlogPeole の Ajax 化サンプル

このカスタマイズは設定がやや複雑ですので、自信がない方は前述した下記の方法をお勧めします。

BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）

それでは以下、設定方法です。CGI および外部ファイルが扱えるブログやホームページであれば利用可能と思われます。また特定のブログに依存する記述ではありませんので、予めご了承ください。

１．スクリプトのダウンロード

下記のファイルをダウンロードしてください（右クリックして「対象を保存」を選択してください）。

bp.zip/ bp.lzh （リンクリスト取得スクリプト）
bp.js （Ajax起動スクリプト）
ajax-loader.gif （ローディング画像）

bp.zip（または bp.lzh）は解凍した中にある bp.cgi を使用します。

また、上記の他、Ajax ライブラリの prototype.js をダウンロードしてください。

Prototype JavaScript Framework

上記のサイトの Download the latest version のリンクをクリックし、アーカイブをダウンロード。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。

また、ajax-loader.gif はお好きな画像に変更して構いません。配布しているローディング画像は下記のサイトで作成したものです。

Ajaxload

２．bp.js の修正

ダウンロードした bp.js を任意のエディタで開き、1行目・2行目（リスト 2.1）を修正します。

var script = 'bp.cgi';
var image = 'ajax-loader.gif';

リスト 2.1　bp.js 変更箇所

bp.cgi の部分は URL 記述に変更してください。当サイトを例にすると、メインページと同じディレクトリに bp.cgi をアップロードしたのであれば、

var script = 'http://www.koikikukan.com/bp.cgi';

リスト 2.2　bp.js 変更例

という風に書き換えます。

ajax-loader.gif の部分も同じ要領で変更しますが、bp.js と異なるパスにアップロードする場合のみ、URL 記述に変更してください。bp.js と同じディレクトリであればこのままで問題ありません。

３．スクリプトのアップロード

１項でダウンロードしたファイルをサーバにアップロードします。bp.cgi はアップロード後、パーミッションを 755 または 777 に変更します（パーミッションの値はレンタルサーバによって異なる場合がありますので適宜確認してください）。

各ファイルのアップロードディレクトリは任意ですが、例えば Movable Type であれば、メインページと同じディレクトリが良いでしょう。CGI スクリプト（bp.cgi）はレンタルサーバによって実行可能ディレクトリの制限があるので、例えば cgi-bin ディレクトリ等になる場合があります。

４．リンクリスト表示用タグの追加

リスト 4.1 の内容を、リンクリストを表示したい位置へ設定します。

<div id="linklist"></div>
<script type="text/javascript">
getLinkList('[BlogPeopleリンクリストのURL]');
</script>

リスト 4.1　リンクリスト表示用タグ

[BlogPeopleリンクリストのURL] には、リンクリストのコード生成で出力された script 要素の src 属性の内容（リスト 4.2 の青色部分）を設定します。

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxxxxxxxxxxxx.js"></script>

リスト 4.2　BlogPeopleリンクリスト表示コード

５．スクリプトのインクルード

リスト 5.1 の script 要素を、リスト 4.1 を設定したテンプレート（またはHTML）の <head>～</head> 部分に設定します。

<script type="text/javascript" src="http://domain/path/prototype.js"></script>
<script type="text/javascript" src="http://domain/path/bp.js"></script>

リスト 5.1　script 要素

赤色の src 属性値は環境に合わせて適宜変更してください。

６．スタイルシート設定

リスト 6.1 をスタイルシートに追加します。

#linklist {
    margin: 5px 1px 15px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}
.bp_loading {
    border: 1px solid #999999;
    padding: 83px 0;
    text-align: center;
}
.bp_loaded {
}
.blogpeople-main {
    height:162px;
    overflow: auto;
}
.blogpeople-powered-by {
    text-align: left;
}
.bp_error {
    padding: 83px 0 84px;
    text-align: center;
}

リスト 6.1　CSS

以下、CSS の各セレクタの説明です。

#linklist はリンクリスト全体のスタイルを設定しています。

.bp_loading はローディング画像を表示中のスタイルです。padding プロパティは、ローディング画像表示中の高さと、実際にリンクリストが表示されたときの高さを一致させるためのものです。ローディング画像のサイズによって高さが微妙に変わりますので、気になる場合は padding の値を適宜変更してください（Firefox で閲覧して高さが一致するようにしています）。

.bp_loaded はリンクリストが表示された時のリンクリスト全体のスタイルです。お好みに応じてプロパティを追加してください。

.blogpeople-main と .blogpeople-powered-by は「BlogPeople のリンクリストにスクロールバーをつける」のCSSと重複しています。すでにリンクリストのスクロール設定をされている場合はご注意ください。

.bp_error はリンクリスト取得失敗時のスタイルです。

７．リンクリストが表示されない場合

このカスタマイズのキモは「リンクリストが取得できるかどうか」ですが、それを確認するために、bp.cgi の下記の部分を変更して、bp.cgi をブラウザから直接実行してみると良いでしょう。

my $url = $query->param('url');
　　　　　　↓
my $url = '[BlogPeopleリンクリストのURL]';

リスト 7.1　bp.cgi 変更箇所

[BlogPeopleリンクリストのURL]は３項と同じものです。成功すればブラウザ上にリンクリストが表示されます。

上記でリンクリストが表示された後、bp.cgi の内容を元に戻します。それで表示できない場合は、

bp.js および prototype.js のパス誤り
bp.js に記述した bp.cgi のパスが誤り

等が考えられます。

*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。

Comments [6] | Trackbacks [2]

Ignore プラグイン

November 22,2006 12:03 AM
Category：[拡張テンプレートタグ]
Tag：[Ignore, MovableType, Plugin]
Permalink

先日エントリーした「MTIgnore タグ」を Movable Type 3.2 で利用するためのプラグインです。

「タグで括られた部分を処理しない」というものですので、「プラグイン」というのはおこがましいのですが、テンプレートに色々なカスタマイズ、特に MTタグをそのまま残せるのがかなり便利と感じました。

実は、不要なMTタグにHTMLコメントアウト（）を施ししても、再構築時点ではそのMTタグは処理対象となってしまいます（Movable Type はHTMLコメントアウトを認識しないため）。つまりその分パフォーマンスに影響し、さらにHTMLソースに展開されたMTタグが残ってしまいますのでファイルサイズにも影響します。

このプラグインを用いることで、再構築対象にならず、HTMLソースにも残らないため、これらの欠点を一気に解消することができます。まだ 3.2 をお使いの方で興味のある方はお試しになってください。

なお、3.3 では MTIgnore タグがデフォルト機能としてサポートされますので、アップグレード後、本プラグインを無効にすればテンプレートに記述した MTIgnore をそのまま使うことができます。

１．プラグインのダウンロード

下記のリンクよりプラグインアーカイブをダウンロードしてください。

Ignore.zip
Ignore.lzh

２．プラグインのアップロード

プラグインアーカイブを解凍して、中にある Ignore.pl を plugins ディレクトリにアップロードしてください。
管理画面の

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

で使用中のプラグイン一覧が表示されますので、その中に「Ignore バージョンx.xx」と表示されていればOKです。

３．タグ

このプラグインが提供するMTタグは

<MTIgnore>

です。

例えば、リスト1.1のように、一部分を MTIgnore で括ります。

コメント１
<MTIgnore>コメント２</MTIgnore>
コメント３

リスト1.1　MTIgnore タグの使用例1

この場合、MTIgnore で括られた部分は HTML に現われず、リスト1.2 のように

コメント１
コメント３

リスト1.2　リスト1.1 のHTMLソース

という表示になります。

コメント文字列だけでなく、MTタグを MTIgnore で括ることも可能です。リスト1.3 のように括れば、生成された HTML ページに MTEntries タグの内容は何も表示されません。

<MTIgnore>
  <MTEntries> 
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTIgnore>

リスト1.3　MTIgnore タグの使用例2

４．エントリーの中で使いたい場合

「書いた記事をエントリーに残しておきたいけれども見られたくない」という場合は、エントリーの中で MTIgnore を利用することで、生成されたHTMLに表示されなくなります。この技を実現するには「エントリーの中でMTタグを使う」をご覧ください。*1

*1：記事の概要にあたる部分で用いた場合、MTEntryTrackbackData が展開された内容に記述が残る場合があります。

Comments [2] | Trackbacks [0]

Movable Typeでつくる！最強のブログサイトプラグイン＆カスタマイズ編

November 21,2006 12:05 AM
Category：[書籍]
Tag：[Amazon, Book, MovableType]
Permalink

ブログ界では Movable Type カスタマイズ本の著者として有名な The blog of H.Fujimoto の壱さんが、また新たに執筆されました。

Movable Typeでつくる！最強のブログサイトプラグイン＆カスタマイズ編
藤本壱

ソーテック社 2006-11
売り上げランキング : 68073

Amazonで詳しく見る by G-Tools

今回はカスタマイズ、特にプラグインを利用した Movable Type のメジャーなカスタマイズを中心とした内容です。以下、主な内容です。

ブログのデザインを簡単操作で変える: Style Catcher でブログデザインを変える; Widget Manager でサイドバーのパーツを入れ替える

定番のカスタマイズ: カテゴリーを並べ替える; リストをのツリー表示にする; サイドバーの各項目の折りたたみ

ブログを強化するカスタマイズ: mt4i による携帯からの投稿・閲覧; エントリー内の写真をアルバムのように表示する; ポッドキャスティングを行う; メールフォームを設置する; コメントに返信した時にメールで通知する

ブログに出力する内容をカスタマイズする: トラックバック先のエントリー表示; 最近のコメント／トラックバックをエントリーごとにまとめて表示; エントリー内に地図を表示; QRコードを表示; 2ちゃんねる風のコメント; 同一カテゴリー内の前後の記事のリンク表示; エントリーアーカイブに同一カテゴリーのエントリー一覧表示; 正規表現による検索・置換; 複数ブログをまとめて表示; 特定カテゴリーを除外して表示; タグの値で処理を変える

管理ページのカスタマイズ: リンク挿入機能の改善; ファイルのアップロード先ディレクトリを追加; エントリーに絵文字を入れる; エントリープレビューの改善; エントリーフィールドを追加する; エントリー入力」画面に書式設定機能をつける

PHP化と再構築の軽量化: モジュール化; ページ分割; Perl版ダイナミック・パブリッシング; Perl版ダイナミック・パブリッシングのページ分割

スパムへの対策: 日本語を含まないコメント／トラックバックをスパムとみなす; 言及リンクのないトラックバックをスパムとみなす; コメントスパマーにブログを見せない; コメント投稿時に画像認証する

便利な機能を追加する: エントリー日時を公開日時・現在日時に変更; 指定日投稿・ほぼ指定日投稿; トラックバック重複を防ぐ; 秘密のコメント機能; コメント入力で絵文字を使う; アクセス解析を行う; 改行の自動変換を改良する; Wiki のような記法でエントリーを書けるようにする

この中の8割近くがプラグインによるカスタマイズになっています。Movable Type をある程度つかいこなして、さらにパワーユーザを目指す方にとって非常に役に立つ内容です。

なお、「Style Catcher」「Widget Manager」および「定番カスタマイズ」の「ツリー化／サイドメニューの折りたたみ」で、当サイトを取り上げてくださっています。この場をお借りしてお礼申し上げます。ありがとうございました。

Comments [2] | Trackbacks [3]

MTIgnore タグ

November 20,2006 2:10 AM
Category：[テンプレートタグ]
Tag：[MovableType, MTIgnore, Tag]
Permalink

Movable Type 3.3 では、MTIgnore というコンテナタグが追加されました。このタグで括られた部分は再構築で何も処理されません。HTML のコメントアウト（）ではコメントアウトした部分が HTML ソースに残りますが、このタグを使用すれば HTML ソースにも表示されなくなります。

例えば下記のようなタグ、

コメント１
<MTIgnore>コメント２</MTIgnore>
コメント３

リスト1.1　MTIgnore タグの使用例1

とすれば、HTML には

コメント１
コメント３

リスト1.2　リスト1.1 のHTMLソース

という表示になります。

<MTIgnore>
  <MTEntries> 
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTIgnore>

リスト1.3　MTIgnore タグの使用例2

HTMLコメントアウトの代わりにこのタグを用いれば、再構築対象にならず、HTMLソースにも残らないため、これらの欠点を一気に解消することができます。

カスタマイズ等で不要なタグを非表示にしたい場合に便利です。

Comments [0] | Trackbacks [2]

この紫蘇（しそ）は

November 19,2006 12:11 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

注：最近このサイトに訪問くださる方が増えたので、改めて申し上げておきます。

このサイトは「このサイトについて」にも記しているように、ダジャレの記録が開設の発端です。以前は結構なペースでダジャレをエントリーしていたのですが、Movable Type を中心としたテンプレート・ブログカスタマイズ記事の比率が高くなっていくにしたがって、そっち系のブログとして認知されるようになりました。

それはそれで大変有難いのですが、ブログカスタマイズネタを期待して訪問された方が、時々投稿するダジャレに運悪く遭遇すると「このサイトは一体何だ？」ということになり、アクセス増加を妨げる一因ではないかと懸念しています（笑）。

ブログ関連記事はコンスタントにエントリーしたいと思っていますが、毎日書けるほどネタもなく、またダジャレもこのサイトの主たるカテゴリーのひとつです。
という訳で、突然意味不明なタイトルのエントリーが週1ペースで発生します。予めご容赦ください。

このエントリーもその一つで、トップページから訪問された方は、この下にある「続きを読む ≫」をクリックするとタイトルのオチを読むことができます（RSSリーダー経由の方は直接個別記事のぺージにジャンプすることでオチが読めます）。

過去のダジャレ ← 注：250エントリー近くあるのでかなり重いです。

続きを読む ≫

Comments [3] | Trackbacks [0]

234万5678アクセス特別企画

November 18,2006 12:20 AM
Category：[お知らせ]
Tag：[Information]
Permalink

恒例のキリ番企画で、このサイトの右下に表示しているカウンタがまもなく 2345678 に到達します。現在のアクセスからするとあと3日ほどで超えそうです。

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

ということで、2345678 をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、貴サイトを当サイトのエントリーにて紹介させて頂きます。*1

*1：サイト内容によってはお断りする場合があります。予めご了承ください。

Comments [0] | Trackbacks [0]

IE7 の CSS ハック

November 17,2006 1:50 AM
Category：[CSS]
Tag：[CSS, Hack]
Permalink

「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に

*:first-child+html

を付与します。例えば、IDセレクタ #banner に適用させる場合、

*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

となります。

なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。

#banner {
　　　　　　：
　　[IE7以外のスタイルを記述]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

以下で紹介する CSS ハックは、以前、Lucke bag::blog さんが CSS hacks から引用された記事（下記）から内容が変更されているようですので、下手な訳をつけて再掲しておきます。
IE7 およびモダンブラウザ、Opera9 に対応しています。

Lucky bag::blog：IE7 を含むモダンブラウザ向けの CSS ハックまとめ

以下、CSS hacks より抜粋・和訳

ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。

IE 6 and below （IE6以下）

* html {}

IE 7 and below （IE7以下）

*:first-child+html {} * html {}

IE 7 only （IE7のみ）

*:first-child+html {}

IE 7 and modern browsers only （IE7 とモダンブラウザ）

html>body {}

Modern browsers only (not IE 7) （IE7 以外のモダンブラウザ）

html>/**/body {}

Recent Opera versions 9 and below （最近の Opera9 以下）

html:first-child {}

「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。

上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。

例えば、あなたが必要とするセレクタが

#foo .bar

であり、それをIE7だけに適用したいのであれば、セレクタは

*:first-child+html #foo .bar

になるでしょう。

以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。

Comments [3] | Trackbacks [10]

Counter プラグイン

November 16,2006 1:35 AM
Category：[拡張テンプレートタグ]
Tag：[Counter, MovableType, Plugin]
Permalink

Movable Type のエントリーリストやコメントリスト、あるいはアーカイブリスト等で、例えば「リストの 3 番目からスタイルを変更したい」とか「偶数・奇数で色を変更したい」ということがあると思いますが、Movable Type で用意されているタグには残念ながらそのような機能はありません。*1

この「カウントする」という機能が必要な質問をひとつ頂いており、思案していたところ、有難いことにエムロジック株式会社様より下記のプラグインが公開されました。

エムロジック放課後プロジェクト：MovableType用Counter Plugin

これを使えば、リストでカウンタを必要とするカスタマイズ類はほぼ全て満足できるのではないかと思います。

2009.05.28 追記
Movable Type 4.1 以降であれば、標準テンプレートタグで実現できます（関連記事「Movable Type 4.1 / MTOS における変数での算術演算子の利用方法」）。

配布サイトのドキュメントで利用方法が説明されていますが、ここでもタグの基本的な設定方法とサンプルをいくつか紹介しておきます。ドキュメントに掲載されている、エントリータイトルだけを表示するというシンプルなリストを例にアレンジしていきます。
プラグインの導入方法は配布サイトをご覧ください。

基本は、カウントしたいリスト全体を MTCounter タグで括ります。

<MTCounter>
  <MTEntries> 
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTCounter>

リスト1.1　MTCounter タグ

このプラグインは自律的にカウントアップする訳ではないので、リスト1.2 のように、カウンタ値を +1 更新したい場所に MTCounterPlus タグを挿入します。なおこのリストではまだ何も表示されません。

<MTCounter>
  <MTEntries> 
    <$MTCounterPlus$>
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTCounter>

リスト1.2　MTCounterPlus タグ

カウンタ値を -1 更新したい場合は MTCounterMinus タグを挿入します。この場合は初期値を MTCounterSetValue タグで設定すると良いでしょう。
リスト1.3 はカウンタの初期値10でエントリータイトルを表示する毎にカウンタを -1 します（これもまだ何も表示されません）。

<MTCounter>
  <$MTCounterSetValue value="10"$>
  <MTEntries> 
    <$MTCounterMinus$>
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTCounter>

リスト1.3　MTCounterMinus / MTCounterSetValue タグ

カウンタ値を表示する場合は MTCounterValue タグを用います。MTCounterSetValue タグを使わない場合のカウンタ初期値は 0 です。
リスト1.4 はエントリータイトルの後にカウンタ値を表示します。

<MTCounter>
  <MTEntries> 
    <$MTCounterPlus$>
    <$MTEntryTitle$>[<$MTCounterValue$>]<br />
  </MTEntries> 
</MTCounter>

リスト1.4　MTCounterValue タグ

リスト1.4 を実行（再構築）すると、MTCounterValue の部分に "1,2,3,4,5 ..." と表示されます。MTCounterValue の後方に MTCounterPlus が置かれていれば、"0,1,2,3,4 ..." と表示されます。

現在のカウンタ値と比較する場合は、MTCounterIfEqual タグで判定します。このタグに記述した value 属性の値とカウンタ値を比較します。
リスト1.5 は5番目のリスト表示の後に hr 要素を挿入します。

<MTCounter>
  <MTEntries> 
    <$MTCounterPlus$>
    <$MTEntryTitle$><br />
    <MTCounterIfEqual value="5"><hr /></MTCounterIfEqual>
  </MTEntries> 
</MTCounter>

リスト1.5　MTCounterIfEqual タグ

さらにカウンタ値との大小を比較する場合は MTCounterIfLess タグおよび MTCounterIfMore タグを用います。
リスト1.6 は、1-4番目のリスト、5番目のリスト、5番目以降のリストに、それぞれ異なる class 属性を与えています（分かりやすくするために span 要素全体を括っていますが class 属性あるいは class 属性値部分のみを括るという方法もあります）。

<MTCounter>
  <MTEntries>
    <$MTCounterPlus$>
    <MTCounterIfLess value="5"><span class="a"></MTCounterIfLess>
    <MTCounterIfEqual value="5"><span class="b"></MTCounterIfEqual>
    <MTCounterIfMore value="5"><span class="c"></MTCounterIfMore>
    <$MTEntryTitle$></span><br />
  </MTEntries>
</MTCounter>

リスト1.6　MTCounterIfLess / MTCounterIfMore タグ

カウンタ値の偶数・奇数によって表示を変える方法、およびカウンタを n で割った余りが value 属性値と等しい時に表示する場合は、MTCounterIfOdd / MTCounterIfEven / MTCounterIfMod タグを利用します。サンプルは Counter プラグインドキュメントを参照してください。

*1：これに近い機能として、MTEntries タグの lastn 属性と offset 属性の組み合わせによる実現があります。

Comments [4] | Trackbacks [7]

Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その2：設定方法）

November 15,2006 1:30 AM
Category：[ダイナミックパブリッシング]
Tag：[DynamicPublishing, MovableType]
Permalink

その2ではダイナミック・パブリッシングの具体的な設定方法を記します。前提条件を満たしていれば、さほど難しい設定はありません。

１．ダイナミック・パブリッシングの条件

１．１データベース

まず、使用データベースに

MySQL
PostgreSQL
SQLiteバージョン2

が利用されていることが必要です。
もし BerkeleyDB や SQLite を利用されているのであればデータベースの移行が必要になります。データベース移行については下記の記事が参考になるでしょう。

１．２ HTTPサーバ

.htaccess が利用できる必要があります。レンタルサーバであれば大体利用できる設定になっていると思いますが、自宅サーバで Apache をご利用であれば httpd.conf に以下のような記述を追加します。ディレクトリはご自身の環境にあわせてください。

<Directory /usr/local/apache/htdocs/mt>
  AllowOverride All
</Directory>

リスト1　httpd.conf

IISをお使いの場合は、403と404のエラーに対して、mtview.phpへのURLを設定してください（とマニュアルに記載されています）。

２．ダイナミック・パブリッシングの設定方法

２．１再構築オプションの変更

Movable Type の管理画面から[設定]-[公開]の「公開」欄にある「再構築オプション」から下記のいずれかを選択し、「変更を保存」をクリックします。

「アーカイブのみダイナミック・パブリッシングで出力します」を選択

「テンプレート別に、スタティックHTMLもしくはダイナミック・パブリッシングを選択します」を選択

なお、１．２項で説明した .htaccess は、上記を選択し「変更を保存」をクリックした時点で生成されます。

後者を選択した場合は、さらに各テンプレートの編集ページで「このテンプレートをダイナミック・ページにする」のチェックボックスをチェックします。チェックして保存すると、そのテンプレートがダイナミック・パブリッシングの対象になり、再構築ボタンが非表示になります。

インデックス・テンプレートはスクリーンショットのような選択画面が表示されますので、「このテンプレートをダイナミック・ページにする」にチェックをして保存すれば、下の「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」のチェックボックスは非表示になります。

２．２テンプレート・キャッシュ・ディレクトリの作成

ブログのルート・ディレクトリに templates_c という名前で新しいディレクトリを作成し、パーミッションを777に設定します。ディレクトリを作成しないとページが正常に表示されません。

３．ダイナミック・パブリッシングの最適化

以下の設定を行うことでダイナミック・パブリッシングを最適化します。

３．１ページ・レベルのキャッシング

その1で説明した通り、Movable Type ではページのキャッシュ機能があります。この機能を利用すれば、あるページに対するリクエストで、そのページがファイルとしてキャッシュされます（ファイル名は外部から認識できない文字列）。

キャッシングを有効にするには、ブログのルート・ディレクトリに cache という名前のディレクトリを作成し、パーミッションを777に設定します。
次に、Dynamic Site Bootstrapperテンプレート（mtview.php）に青色の行を加えます。

<?php
    include('<$MTCGIServerPath$>/php/mt.php');
    $mt = new MT(<$MTBlogID$>, '<$MTConfigFile$>');
    $mt->caching =true;
    $mt->view();
?>

リスト2　Dynamic Site Bootstrapperテンプレート

設定後、保存・再構築します。

これを利用すれば、（多分）テンプレートの内容が変更されるまでこのキャッシュが利用されるので、スタティック・パブリッシングに近いスピードでページにアクセスすることができます。
キャッシュを利用することでディスクは消費しますが、パフォーマンスは向上します。キャッシュはサーバの環境にあわせて利用を検討してください。個人的にはディスクの余裕があれば利用されることを推奨します。

３．２条件付きリクエスト

ページ・レベルのキャッシングと排他的に利用すると思われるのが、この「条件付きリクエスト」です。機能としては、ページに変更がない状態でリクエストを受け付けた場合、304 Not Modified（サーバ上のファイルの変更がないためブラウザのキャッシュを用いることを示す）を返却します。

この設定を行うには、Dynamic Site Bootstrapperテンプレート（mtview.php）に青色の行を加えます。

<?php
    include('<$MTCGIServerPath$>/php/mt.php');
    $mt = new MT(<$MTBlogID$>, '<$MTConfigFile$>');
    $mt->conditional =true;
    $mt->view();
?>

リスト3　Dynamic Site Bootstrapperテンプレート

設定後、保存・再構築します。

ダイナミック・パブリッシングを行うか、304 を返却するかの元情報は、ブログのコメント・トラックバック・テンプレート等のタイムスタンプを利用しているようです。

参考：Movable Type 3.3 マニュアル - ダイナミック・パブリッシング

Comments [6] | Trackbacks [4]

Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その1：概要）

November 14,2006 1:30 AM
Category：[ダイナミックパブリッシング]
Tag：[DynamicPublishing, MovableType]
Permalink

「Movable Type で再構築ができません」「500エラーが多発します」という記事をよくみかけますが、Movable Type には WordPress のようなページの動的生成、いわゆる「ダイナミック・パブリッシング」がバージョン 3.1 から標準搭載されており、これを利用することで再構築不要な環境にすることができます。

「ダイナミック・パブリッシング」とは、リクエストが発生するたびにHTMLページを動的に生成する機能です。ちなみに「再構築」は、エントリー本文やコメント・トラックバック等のデータをデータベースから読み出して、スタティックなHTMLページを生成することです。

当サイトではこれまで「ダイナミック・パブリッシング」について全く取り上げていなかったのですが、今後は少しずつ記事として取り上げていきたいと考えています。
というのは、現在発売されている某雑誌で「Movable Type はスタティックなHTMLページ生成しかできません」ということが書かれており、Movable Type のブログツールとしての著名度に比べ「ダイナミック・パブリッシング」についての認知度が低いのではないかと懸念した次第です（私もその一人だったかもしれませんが）。

※スタティックページ生成を、ここでは便宜上「スタティック・パブリッシング」と称します。

１．スタティック・パブリッシングとダイナミック・パブリッシングの比較

まずは概要ということで、スタティック・パブリッシングとダイナミック・パブリッシングの各評価項目について、表で比較してみました。

表1　スタティック・パブリッシングとダイナミック・パブリッシングの比較
項目	スタティック	ダイナミック	ダイナミック・パブリッシングを設定したページおよび管理画面
再構築	要	不要	「ページを再構築する」という作業がなくなります（「保存」ボタンはデータベースに変更を反映させるだけ）。
再構築による500エラー	あり	なし *1	再構築がなくなりますので、500エラーが発生しなくなります。
ページ表示	早い	やや遅い	アクセス毎にPHPを実行してページを生成するため、その分時間を要します。*2
ディスク容量	エントリー数に比例して増加	少	スタティックページを生成しないため、ディスクの消費が少なくなります。*3
エントリー削除後のHTMLファイル	残らない *4	残らない	スタティックなファイルを生成しないので、誤って公開してしまったエントリーもアクセスされなくなります。
コメント・トラックバック処理	やや遅い	早い	コメント・トラックバック受信によるスタティックページ生成処理がなくなる分、処理が早くなります。
テンプレートタグ関連のプラグイン	利用できる	利用できない	PHPで動作するため、当サイトで公開している「Movable Type プラグイン一覧」で掲載しているテンプレートタグ（<MTxxx> みたいなもの）が使えない場合があります。5 6

どちらを選択するかについては、ご利用のサーバ環境等に依存します。

２．Movable Type でのメリット

１項に記していない、Movable Type を利用する際における大きなアドバンテージは、ダイナミック・パブリッシングとスタティック・パブリッシングをテンプレート単位に選択できることです。したがって、リクエストの多いメインページやRSSフィードはスタティック・パブリッシング、比較的アクセスが落ち着いている（と思われる）アーカイブページはダイナミック・パブリッシングで運用することが望ましいでしょう。

*1：単純に「ダイナミック・パブリッシング」にすれば、再構築のストレスから解消できるという訳でもないようです。例えば、ロリポップではサーバ+DBのパフォーマンスの問題か、「ダイナミック・パブリッシング」が快適に動作しないケースがあるようですので、導入する前にレンタルサーバのサポートやネット上で情報を入手されることをお勧めします。

*2：キャッシュ機能を利用することで改善されます。

*3：キャッシュ機能を利用するとディスクはその分必要になります。

*4：オプション設定が必要。詳細は「Movable Type のエントリー削除でHTMLファイルも自動的に削除する」参照。

*5：プラグインを利用したい場合は、The blog of H.Fujimoto さんの「再構築不要化カスタマイズ（MT3.3専用版）」をお勧めします。

*6：テンプレートタグ関連のプラグインはPHPで作成すれば対応可能（通常のプラグインはPerl）です。ダイナミック・パブリッシング用プラグインはほとんど出回っていない状況ですが、中には対応しているものもあります。

Comments [0] | Trackbacks [2]

JavaScript 不要なサイドメニューのツリー化 for Movable Type（MTCollate編）

November 13,2006 1:20 AM
Category：[ツリー化]
Tag：[Customize, MovableType, MTCollate, Tree]
Permalink

Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズで、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」で公開していなかった、MTCollate プラグイン *1 を利用して「最近のコメント」「最近のトラックバック」を表示している場合の方法です（関連記事：MTCollate を使って「最近のコメント」を表示する）。

JavaScript 不要なサイドメニューのツリー化の記事より概要部分を再掲しておきます。

以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *2 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
JavaScript 起動による表示遅延がなし
JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

１．最近のコメント

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTComments lastn="20">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></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 encode_html="1"$></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"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="entry_link"$>#c<$MTCollateField name="comment_id"$>"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト1　最近のコメント表示用リスト

２．最近のトラックバック

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTPings lastn="20">
<MTCollateRecord>
<MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
<MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
<MTCollateSetField name="ping_blog_name"><$MTPingBlogName encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="ping_date"><$MTPingDate format="%m/%d"$></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"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="ping_url"$>"><$MTCollateField name="ping_blog_name"$></a> <$MTCollateField name="ping_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト2　最近のトラックバック表示用リスト

３．CSS

下記をスタイルシートに追加してください。すでに他のリストのツリー化で設定されている場合は不要です。

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

リスト3　ツリー化用CSS

JavaScript を用いる場合のCSSとほぼ同じですが、一番最後のセレクタ名（tree_end）だけが異なっています。

４．ツリー画像のダウンロード

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
実線につきましては我楽さんより提供いただきました。ありがとうございました。

５．画像の配置

ダウンロードした画像を、スタイルシートと同じディレクトリにアップロードしてください。リスト3の赤色部分がアップロードしたファイル名と一致するように修正してください。
これでブラウザを更新して、ツリーが表示されればOKです。

６．参考：ツリー表示の仕組み

ツリー化を行うために、「順序無しリスト（ul - li）」を利用します。通常の順序無しリストは左側にリストマークが表示されますが、ツリー化ではリストマークを非表示にし、その代わりにツリー画像（"├" または "└"）を、CSS の background-image プロパティを利用して表示します。

全てのリストに同じ画像を表示するのであれば簡単なのですが、ツリーの最後に "└" を表示するため、下記のように最後の li 要素に class 属性の指定が必要になります。

<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>

リスト6　サンプルHTML

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。なお本カスタマイズでは、途中の li 要素に class="tree"、最後の li 要素に class="tree_end" を与えています。

JavaScript を利用したツリー化のカスタマイズでは、JavaScript 実行により class 属性を付与しています（したがってブラウザの「ソースの表示」では class 属性が設定されていないようにみえます）。

*1：本カスタマイズは MTCollate プラグインを利用されていることが前提です。
*2：MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

Comments [6] | Trackbacks [6]

パソコンとプリンターと部長

November 12,2006 1:20 AM
Category：[PC]
Tag：[Joke]
Permalink

ブログを始めるずっと前にネット上でみつけた小ネタ「パソコンとプリンターと部長」。ご存知の方も結構いらっしゃるのではないでしょうか。

同じ内容があちこちで転載されていますが、オリジナルサイトは下記のようです。

腹藝春秋：別冊二人の会話

各ネタの冒頭に毎回登場する、

当編集部と提携関係にある（有）橿原工務店がこの度、電熱を用いて無機物同士の会話を録音する、珍なる機器を発明した。その内容の一部をここに掲載する。

が印象的です。（笑）

Comments [0] | Trackbacks [0]

Ctrl キーと Caps Lock キーを入れ替える

November 11,2006 1:38 AM
Category：[PC]
Tag：[CapsLock, Ctrl, PC]
Permalink

Windows で使われる日本語キーボードは、Ctrl キーが一番左下、Caps Lock キー（大文字と小文字を切り替えるためのキー）が "A" の左にあるのが普通ですが、タイピングする際にブラインドタッチであれば "A" に小指が置かれているのがニュートラルな状態で、この位置から Ctrl キーに小指を持っていくのは個人的にやや困難です。

私はコピー＆ペースト、テキスト全選択やファイル保存等、Ctrl キー+英文字キーとペアで用いることが多いため、Ctrl キーと、Caps Lock キーを入れ替えて使っています。

ということで、Windows XP で Ctrl キーと、Caps Lock キーを入れ替える方法をご紹介します。長年、左下の位置で Ctrl を利用されている方は使い慣れないかも知れませんし、個人差もありますが、小指の移動距離が少なくなるのでお勧めです。

[スタート]-[ファイル名を指定して実行]をクリック。

開いた画面に "regedit" と入力して[OK]をクリック。

開いたレジストリエディタ画面の左ペインのツリーを[HKEY_LOCAL_MACHINE]-[SYSTEM]-[CurrentControlSet]-[Control]-[Keyboard Layout]と展開し[Keyboard Layout]を選択状態にする。

メニューバーより[編集]-[新規]-[バイナリ値]をクリック。これで右ペインに "新しい値 #1" ができます。

"新しい値 #1" の名前が変更できる状態にして（作成直後は変更可能な状態になってますが、そうでない場合は "新しい値 #1" を右クリックして[名前の変更]を選択）、半角英文字で "Scancode Map" に変更。大文字・小文字を間違えないように気をつけてください。

名前を変更した状態です。

"Scancode Map" を右クリックして[バイナリデータの修正]をクリック。

このように新しく画面が開きます。

開いた画面に、左スクリーンショットを参考に、同じ値を入れてください（画面をクリックすると大きくなります）。テキストでも示しておきます。

00 00 00 00 00 00 00 00
03 00 00 00 1D 00 3A 00
3A 00 1D 00 00 00 00 00

英文字は自動的に大文字入力されます。また左側の4桁の数字も自動的に表示されます。
入力が終わったら[OK]をクリック。

入力が終わるとレジストリエディタ画面の右[データ]欄に入力した値が表示されます。

メニューバーの[ファイル]-[レジストリエディタの終了]をクリック。

これでPCを再起動させれば Ctrl キーと Caps Lock キーが入れ替わります。

Comments [0] | Trackbacks [0]

エントリーのない親カテゴリーに子カテゴリーを表示する

November 10,2006 12:50 AM
Category：[カテゴリー]
Tag：[Category, Customize, MovableType, MTEntriesWithSubCategories, MTIfCategory]
Permalink

Movable Type 3.3 でエントリーのない親カテゴリーをアーカイブとして生成し、そこに子カテゴリーを表示するためのカスタマイズです。

Movable Type のカテゴリーアーカイブでは、自カテゴリーでエントリーがひとつも公開されていない場合、そのカテゴリーに子カテゴリーがある場合でも、自カテゴリーのアーカイブを生成することができません。言い換えると、エントリーのない親カテゴリーでの MTEntriesWithSubCategories タグは有効にならない、ということです。

本エントリーでは、下記の方法で親カテゴリーに子カテゴリーを表示する解決案を示してみたいと思います。

親カテゴリーにダミーのエントリーを作る
メインページ、各アーカイブページで親カテゴリーのエントリーを表示しない設定をする
サイドバーのエントリーリストがある場合も親カテゴリーのエントリーを表示しない設定をする

ただし、エントリーアーカイブの前後のエントリーへのリンクについては親カテゴリーが表示されてしまいますので、ここではそのリンクがないページ構造であることを前提にします。
また実験では親-子カテゴリーまでの動作しか確認しておりません（子カテゴリーに対しさらに子カテゴリーがある場合の動作は未確認です）ので、予めご了承ください。

１．MTEntries タグの変更（カテゴリーアーカイブ）

カテゴリーアーカイブの MTEntries タグ（リスト1.1）をリスト1.2 のタグに変更します。

<MTEntries>
　　　：
[通常のMTタグ]
　　　：
</MTEntries>

リスト1.1　カテゴリーアーカイブ（変更前）

<MTEntriesWithSubCategories>
<MTIfCategory name="[除外したいカテゴリー]">
<MTElse>
　　　：
[通常のMTタグ]
　　　：
</MTElse>
</MTIfCategory>
</MTEntriesWithSubCategories>

リスト1.2　カテゴリーアーカイブ（変更後）

変更後の設定は、MTEntriesWithSubCategories タグでサブカテゴリーのエントリーも表示し、MTIfCategory タグで name 属性に記述されたカテゴリー、つまり親カテゴリーであれば何もしない（その他のカテゴリーであれば通常通り表示）という意味です。

たとえば、foo という親カテゴリーを除外したい場合は MTIfCategory タグの name 属性を

<MTIfCategory name="foo">

リスト1.3　name 属性設定例

とします。カテゴリー名は日本語でも大丈夫です。

除外したいカテゴリーが複数存在する場合、たとえば "foo" と "bar" という二つのカテゴリーを除外したい場合は、MTIfCategory タグを追加（リスト1.4の青色部分）して、

<MTEntriesWithSubCategories>
<MTIfCategory name="foo">
<MTElse>
<MTIfCategory name="bar">
<MTElse>
　　　：
[通常のMTタグ]
　　　：
</MTElse>
</MTIfCategory>
</MTElse>
</MTIfCategory>
</MTEntriesWithSubCategories>

リスト1.4　複数のカテゴリーを除外する方法

としてください。

２．MTEntries タグの変更（メインページ・日付アーカイブ・サイドバーの「最近のエントリー」等）

メインページ（アーカイブページも利用していれば含む）・日付アーカイブ・サイドバー等の MTEntries タグをリスト3.1 からリスト3.2 の内容に変更します。

<MTEntries>
　　　：
[通常のMTタグ]
　　　：
</MTEntries>

リスト3.1　メインページ・日付アーカイブ・サイドバー（変更前）

<MTEntries category_name="NOT [除外したいカテゴリー]">
　　　：
[通常のMTタグ]
　　　：
</MTEntries>

リスト3.2　メインページ・日付アーカイブ・サイドバー（変更後）

たとえば、foo という親カテゴリーを除外したい場合は MTEntries タグの category_name 属性を

<MTEntries category="NOT foo">

リスト3.3　category 属性設定例1

とします。カテゴリー名は日本語でも大丈夫です。

除外したいカテゴリーが複数存在する場合、たとえば "foo" と "bar" という二つのカテゴリーを除外したい場合は OR で区切り、さらにカッコで括って、

<MTEntries category="NOT (foo OR bar)">

リスト3.4　category 属性設定例2

としてください。

３．親カテゴリーにダミーエントリーをひとつ作る

カスタマイズは３項までで完了です。あとは子カテゴリーを表示したい親カテゴリーにエントリーをひとつ作成して「公開」で保存してください。

これで子カテゴリーのエントリーを書いて再構築を実行し、各ページでの表示を確認してください。

2006.11.10 追記
Ogawa::memoranda さんのアドバイスを受けて、カスタマイズ内容を修正しました（パッチの削除＆MTIfCategory タグの記述変更）。

Comments [9] | Trackbacks [1]

はてなブックマークカウンターとブログリンク数カウンターAPI

November 9,2006 1:30 AM
Category：[サイト変更履歴]
Tag：[Blog, Counter]
Permalink

先日より、サイドバー右下に二つのカウンターを設置しています。すでにご存知の方も多いと思いますがご紹介まで。

はてなブックマークカウンター

「はてなブックマークカウンター」は指定したブログに対する「はてなブックマーク」の全被ブックマーク数をカウンター画像として表示する機能です。

Movable Type の場合は、任意のテンプレートに下記のように設定します。

<a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"></a>

15色のカラーバリエーションからお好きな色を選ぶことができます。

また今更ですが、ブログでよくみかける、特定の記事に対する被ブックマーク数はてな被ブックマーク数を表示する方法は「自分のブログに被ブックマーク数を表示する」で解説されています。

ブログリンク数カウンターAPI

こちらはテクノラティのブログリンク数を表示するカウンターです（現在はテクノラティのみですが、今後は他のサービスにも対応するようです）。

Bambino Labs Counter

でカウンタ用表示HTMLタグを作成し、生成されたHTMLタグをサイトのお好きな位置に貼り付けるだけです。

なお、当サイトのリンク数カウンタは本日時点で 5725 となっており、本来であればテクノラティの「ブログランキング」に載る勢いですが、テンプレートご利用者に設置頂いているクレジットバナーが多数を占めており、「テンプレート配布サイトは除外させて頂いてます（テクノラティジャパン様談）」ということでした。

Comments [0] | Trackbacks [1]

Internet Explorer 6 と Internet Explorer 7 を共存させる

November 8,2006 12:50 AM
Category：[PC]
Tag：[PC]
Permalink

はてなブックマーク経由で「IE6 と IE7 の共存はできませんか？」という類の質問をいくつか頂きまして、ネットを検索してみたところ、簡単に共存できる方法が書かれたサイト（下記）をみつけましたので、本エントリーにて IE6 と IE7 を共存する方法をご紹介します。

Tredosoft：Internet Explorer 7 running side by side with IE6. (standalone)

「共存」というのはやや誇張した表現ですが、IE7 Standalone 版を本来の IE のインストールフォルダとは異なるフォルダにインストールするというものです。またインストーラを利用するので簡単にインストールできます。アンインストールも可能です。当然ながら対応 OS は Windows XPのみです。

上記のページには2つの方法が紹介されていて、このエントリーでは「インストーラを利用する」という、簡単な方について説明しています。もうひとつの方法は、Microsoft のサイトから IE7 をダウンロードし、その中の一部の実行ファイルを起動し、それとは別にダウンロードした IE7S を起動するというもので、こちらについては下記のサイトで詳しく紹介されています（インストーラ版はこの手順を自動実行しているものと思われます）。

覚え書き@kazuhi.to：続・スタンドアローン版IE7

それでは以下、IE7 Standalone のインストール手順です。インストールにあたってはご自身の責任で行ってください。

関連記事：Firefox 1.5 と Firefox 2 を共存させる

「Internet Explorer 7 running side by side with IE6. (standalone)」の後方にある、「Download Internet Explorer 7 standalone Installer」のリンクをクリック

ダウンロードした IE7S-setup（拡張子を表示している場合は IE7S-setup.exe）をダブルクリックしてインストール開始。

「Next」をクリック。

「I accept the agreement」を選択して「Next」をクリック。

IE7 Standalone をインストールするフォルダを入力して「Next」をクリック。デフォルトでは「C:¥Program Files¥IE7」が設定されているので、そのままでも大丈夫だと思います（IE6というか、本物のIEは「C:¥Program Files¥Internet Explorer」にあります）。

「スタートメニューに IE7 Standalone を加えますか？」という選択画面です。スタートメニューに追加するとアンインストールのサブメニューも作られるので、このまま「Next」をクリックすることをお勧めします。追加したくない場合は左下の「Don't?」をチェック。

「デスクトップアイコンおよびクイック起動に IE7 Standalone を加えますか？」という選択画面です。私はとりあえずデスクトップアイコンのみ作成しました。選択後、「Next」をクリック。

「Install」をクリック。

インストールが開始します。

インストール中、画面がいくつか開きますが、慌てず静観しましょう。

インストール完了です。「Finish」をクリックしてください。「Launch IE7 Standalone」にチェックをつけていれば IE7 Standalone が起動します。IE6 が起動されていても大丈夫です。

起動すると、 IE7 が開きます（下の画面は起動直後）。ツールバー等のレイアウトがかなり変更されていますので、IE6 との見分けはすぐにつくでしょう。

なお起動時に「http://runonce.msn.com/runonce2.aspx」にアクセスにいき、ブラウザ左下にエラーが表示されますが、他のサイトは問題なくアクセスできます。起動時のエラーを回避するには、「So-net blog:教えてクン、まかり通る！:IE7の起動時にエラー画面が出て･･･」に情報が載っています（ページトップにウルトラマンの画像がどーんと表示されるので職場の方は気をつけましょう）。*1

ひとつ気になったのは、アンインストール後にレジストリ「HKEY_LOCAL_MACHINE¥SOFTWARE¥Microsoft¥Internet Explorer¥Version Vector」のキー名が「xIE」となったままになっていることです（もう一方のインストール方法で「IE」を「xIE」にするという逆の操作が行われていないようにみえる）。
これは後から手動で修正できるので大勢に影響はないと思います（勘違いでしたらすいません）が、とりあえず覚え書きまで。

上記の方法ではメニューは英語です。日本語にしたい場合は、「覚え書き@kazuhi.to：続・スタンドアローン版IE7」の手動インストールで、WindowsXP-x86-enu.exeをダウンロードする代わりに、Microsoft IE7日本語版のサイトから IE7-WindowsXP-x86-jpn.exeをダウンロードしてください。*1

2006.11.13 追記
本文を若干修正しました。

2006.11.22 追記
日本語化およびエラー画面回避について追記しました。

*1：「ソフトウェアのメモ：IE6とIE7の共存試してみた」より引用

Comments [13] | Trackbacks [20]

CSS再び変更

November 7,2006 1:55 AM
Category：[サイト変更履歴]
Tag：[CSS]
Permalink

1ヶ月ほど前に、サイトのCSSおよびHTMLを変更しました（関連記事）が、変更当初より IE6 での閲覧があまり快適でないという懸念事項がありました。特にファイルサイズの大きいページのスクロールがままならないという状態で、再びサイトの CSS を変更致しました。

ネガティブマージンによるレイアウトは（レイアウトの）配布サイトでのサンプルでは問題ないのですが、実際の運用ではファイルサイズに比例してページが重くなるという結果になってしまい、考慮不足でした。これが IE6 のパフォーマンスの問題なのか、あるいは CSS で改善が可能であるかについては、暇をみて検証したいと思います。IE7 では問題なく閲覧できますので、IE7 が浸透した時点でまた改めて戻すかもしれません。

HTMLには手を加えず、CSSのみを変更しました。また今回の変更でカラムレイアウトはリキッドレイアウトから固定レイアウトになります。固定レイアウトはできるだけ避けようと思ったのですが、HTMLの変更を行いたくなかったことと、「ページが重い」という状態を速やかに脱出することを優先しました。
コメント確認・コメントエラーページは手が回っていませんのでリキッドレイアウトのままです。

表示は Windows 2000/XP + IE6/IE7/Firefox2/Opera9 で確認しています。ただし一部のブラウザできちんと表示できていない部分もあります（閲覧に支障はきたさないという判断で見切り発車しました）。

なお、前回のHTML/CSS変更で、本来の目的であった YST の検索結果順位アップについては、結局のところ、4% をうろうろしています。

下は昨日の Google Analytics データです。

Google Analytics

61.94%：google
8.15%：(direct)
4.67%：yahoo
1.77%：msn
1.46%：yujiro.dyndns.org
22.00%：(other)

Google からのアクセスがさらに増えました。

Comments [6] | Trackbacks [0]

Firefox 1.5 と Firefox 2.0 を共存させる

November 6,2006 12:28 AM
Category：[PC]
Tag：[Firefox, PC]
Permalink

Firefox 1.5 と Firefox 2.0 を共存させる Firefox 2.0 がリリースされまして、当サイトを Firefox で閲覧されている方の約 50% がすでに 2.0 をお使いのようです。

私もリリースと同時に Firefox 2 をインストールしまして、直感的ですが閲覧機能に限っては（というか他は深く試してません）1.5 よりかなりいい感じです。

ただし拡張機能の差分や、CSSの表示の違いも若干あるようで、個人的には 1.5 と併用したいと思いました。ということで、ここでは Firefox 1.5 と Firefox 2 をひとつのPCで共存させる方法をご紹介します。
今後のバージョンアップでも同様の方法で共存させることができるかもしれません。

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

Firefox 1.5と2.0を共存させる方法
Firefox 2.0 RC 1とFirefox 1.5を共存させる方法

なお、Firefox 1.5 および Firefox 2 の動作を完全に保証するかどうかは定かではありません。予めご了承ください。

１．Firefox 1.5 のプロファイルのバックアップ

本作業中にうっかり Firefox 2 を起動してしまうと、Firefox 1.5 のプロファイル（=ブラウザの色々な設定が保存されているところ）が Firefox2 のプロファイルで上書きされてしまいます。こうなると Firefox 1.5 のプロファイルを復元することができません。→追記：「Download Firefox 1.5」で 1.5 を再ダウンロードすれば復活することができます（設定は最初からやり直しですが）。

とうことで、Firefox 2.0 をインストールする前に、Firefox 1.5 のプロファイルをフォルダごとバックアップしておきます。

Firefox 1.5 のプロファイルのフォルダは「C:¥Documents and Settings¥[ユーザ名]¥Application Data¥Mozilla¥Firefox¥Profiles¥xxxxxxxx.default」です。[ユーザ名]はご自身のログインユーザ名、最後の「xxxxxxxx」は Firefox がつけた任意の半角英数文字です。

この「xxxxxxx.default」フォルダを右クリックして「コピー」を選択し、選択状態を一旦解除して、同じフォルダ上の何もないところで右クリックして「貼り付け」を選択すると「コピー ? xxxxxxxx.default」というフォルダができますので、これでOKです。

もし誤って 1.5 のプロファイルを 2.0 のプロファイルで上書きしてしまった場合は、Firefox 1.5 のプロファイルのフォルダ（xxxxxx.default の配下）を削除し、バックアップした内容を元のフォルダにコピーすれば復活できます（実験中に失敗してこれで助かりました）。

２．Firefox 2 のインストール

Firefox 2 の日本語版を Mozilla Japan - Firefox のサイトからダウンロードして実行します。ここでの重要な注意点は

Firefox 1.5 と異なるフォルダにインストールする
インストール完了後（というか、このカスタマイズが終わるまで）Firefox は絶対に起動しない

です。

以下、重要ポイントを赤色で示しながら説明します。

[次へ]をクリック

使用許諾書に目を通し、問題なければ[使用許諾書に同意する]を選択して[次へ]をクリック

[カスタムインストール]を選択して[次へ]をクリック

何もせず[次へ]をクリック

インストール先フォルダの内容が「C:¥Program Files¥Mozilla Firefox」になっているので「C:¥Program Files¥Mozilla Firefox2」等、Firefox 1.5 がインストールされているフォルダと異なるフォルダ名に変更して[次へ]をクリック

すべてのチェックを外した状態で[次へ]をクリック（これでインストールが開始します）

[今すぐ Mozilla Firefox を起動]のチェックを外して[完了]をクリック

３．プロファイルの作成

ここでは　Firefox 2 用のプロファイルを作成します（1.5 のプロファイルは「default」としてすでに存在しています）。

タスクバーの[スタート]-[ファイル名を指定して実行]を選択し、"firefox -p" を入力して[OK]をクリック

表示されたダイアログの左上にある[新しいプロファイルを作成]をクリック

[次へ]をクリック

「新しいプロファイルの名前」に "Firefox2.0" を入力して[完了]をクリック。ここで設定する名前は何でも構いませんが、ここではこの名称で説明を進めます。

先程の「ユーザプロファイル選択」画面に作成したプロファイル名が追加されていることを確認します。そして[今後このプロファイルを使用する]のチェックを外して[終了]をクリック

４．Firefox 2 のショートカット作成

注：誤って Firefox 2 を起動させないでください。

エクスプローラを開き、Firefox 2 をインストールしたフォルダ（ここでは「C:¥Program Files¥Mozilla Firefox2」）に進みます。

firefox.exe（拡張子を表示しない設定になっている場合は単に「firefox」）を右クリックして[ショートカットの作成]を選択します。

これで同じフォルダの中に「firefox.exe へのショートカット（または「firefox へのショートカット」）」というファイルができます。

作成したショートカットを右クリックして[名前の変更]を選択。

名前の部分が反転されている状態になるので、古い名前を消して「Mozilla Firefox2」と入力します。

あとは名前を変更した「Mozilla Firefox2」というショートカットをデスクトップ上の何もないところにドラッグ＆ドロップします。これでデスクトップに Firefox 2 用のショートカットができました。

なおインストール時にショートカットを作成すると、Firefox 1.5 のショートカットが上書きされていまいます（インストール時にショートカットを作成しない設定にしているのはこのため）。

５．Firefox 1.5 および 2.0 のショートカット修正

これでデスクトップの上に、Firefox 1.5 を起動するショートカットと、Firefox 2 を起動するショートカットができましたが、この状態でも Firefox 2 は起動しないでください（Firefox 1.5 のプロファイルが上書きされてしまいます）。

次に、両方のショートカットに手を加え、Firefox 1.5 を起動した時は Firefox 1.5 のプロファイルを参照し、Firefox 2 を起動した時は Firefox 2 のプロファイルを利用するようにします。

なお、Firefox 2 は２項で新たに作成したプロファイルを利用するため、1.5 の設定（ブックマーク等）は全く引き継がれません。

５．１ Firefox 1.5 のショートカットを修正

デスクトップの Firefox 1.5 のショートカットを右クリックして、[プロパティ]を選択

[リンク先]の最後に「-p default」を追加（-p の前には半角空白を入れてください）して[OK]をクリック。

５．２ Firefox 2 のショートカットを修正

デスクトップの Firefox 2 のショートカットを右クリックして、[プロパティ]を選択

[リンク先]の最後に「-p Firefox2.0」を追加（-p の前には半角空白を入れてください）して[OK]をクリック。

６．Firefox 各バージョンの起動確認

以上で全ての設定は完了です。各 Firefox のショートカットをダブルクリックして、Firefox 1.5 および Firefox 2 が起動することを確認しましょう。~~両者を同時に起動することはできません。~~→起動できるようです。とりあえずリンク貼っておきます。

どちらのバージョンなのかよく分からない場合は、起動した Firefox の[ヘルプ]-[Mozilla Firefox について]を選択するとバージョンが表示されます。スクリーンショットは Firefox 2.0 の表示例です。

2006.11.06 追記
「同時起動できません」の記述削除しました。

Comments [8] | Trackbacks [3]

市場動向は

November 5,2006 12:38 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [0] | Trackbacks [0]

Windows XP エクスプローラの検索機能でファイルが検索されない問題（その2:対処方法）

November 4,2006 12:39 AM
Category：[PC]
Tag：[Windows, XP]
Permalink

Windows XP のデフォルト状態では、エクスプローラの検索機能ですべてファイルが検索対象にならないという問題がありますが、これを検索可能にする方法です。

その顛末を紹介した昨日の「Windows XP エクスプローラの検索機能でファイルが検索されない問題」は執筆開始が夜遅かったため途中で力尽きてしまいましたが、その中で引用している、

Microsoft サポートオンライン："ファイルに含まれる単語または句" 検索条件が機能しない

の「方法2」に記載された対処方法を本エントリーにてご紹介したいと思います。
なお、前エントリーのコメントでも情報を頂きまして、下記のサイトで対処方法が紹介されています。ありがとうございました。

DanceNeko's Weblog：WinXPでのファイル検索

以下、設定方法です。

[スタート] - [検索] - [ファイルやフォルダ] をクリック。

開いたウィンドウの左ペインにある[設定を変更する] をクリック。

次の画面で[インデックスサービスを使う (ローカル検索を速くする)] をクリック。

次の画面で[インデックスサービスの設定を変更する (詳細)] をクリック。インデックスサービスを有効にする必要はありません。

インデックスサービスコンソールが開くので、ツールバーにある[コンソールツリーの表示/非表示] アイコンをクリック。

左ペインが開くので、最上位の[インデックスサービス - ローカルコンピュータ] を右クリックし、[プロパティ] をクリック。

開いたプロパティ画面の[生成] タブの[未登録の拡張子のファイルにインデックスを付ける] チェックボックスをチェックし、[OK] をクリック。

インデックスサービスコンソールおよび最初の検索結果画面を閉じます。

これですべてのファイルが検索できるようになります。

Comments [11] | Trackbacks [0]

Windows XP エクスプローラの検索機能でファイルが検索されない問題

November 3,2006 3:38 AM
Category：[PC]
Tag：[Windows, XP]
Permalink

Windows XP のエクスプローラにある検索機能では、Windows 2000 で可能だった「全ファイル検索」ができなくなってしまっており、以前からこれに関する原因と対処方法が分からず、悶々としていました。

注：本内容の対処方法については「Windows XP エクスプローラの検索機能でファイルが検索されない問題（その2:対処方法）」をご覧ください。

具体的には、「特定の拡張子のファイルが検索対象にならない」という問題です。例えばスクリーンショットのように、Movable Type のプログラム（Perl モジュール）から「use strict;」という文字列（おそらくすべての Perl モジュールに記述されています）を検索をした場合、Windows 2000 では指定した MT フォルダに含まれる Perl モジュールがずらずらと検索結果に表示されるのですが、XP では文字列を含むファイルの拡張子が「.pm」のファイルが検索対象とならないため、「検索が完了しましたが、何も見つかりませんでした」と表示されるだけです。
試しに、Perl モジュールの拡張子を ".txt" に変更して検索を再実行すると、変更したファイルだけはきちんと検索結果に表示されます。

原因は、検索機能にある「詳細設定オプション」の中の「ファイルの種類」がデフォルトで「ファイルとフォルダのすべて」になっているのですが、その下にあるプルダウンメニュー、つまり全てのファイル一覧の中に Perl モジュールが関連付けされていないため、と推測しています。

ということで、エクスプローラの[ツール]-[フォルダオプション]-[ファイルの種類]タブで「登録されているファイルの種類」の一覧が表示され、ここの画面から新たに拡張子を登録できるので、".pm" を「PerlScript Language」や「テキストファイル」として登録してみました。これでプルダウンメニューには表示されるようになりましたが、やはり検索対象にはなりませんでした。

ネットを調べたところ、同様の問題で困っている方がいらっしゃらないようで、私の利用方法が特殊なのかと思ってましたが、灯台下暗し、Microsoft のサイトにありました。

"ファイルに含まれる単語または句" 検索条件が機能しない
[ファイルに含まれる単語または句] の検索で、指定した文字列が一部のファイルの種類に対して検索されない

上記のページに掲載されている対処および結果については別エントリーに委ねるとし、とりあえずエクスプローラ検索の代替手段として、Windows XP 対応のフリーの文字列検索ツールを、下記の条件でいくつか探してみました。

エクスプローラで検索できないファイルを検索対象にできる
サブフォルダの検索ができる
インデックスを作成不要（検索範囲が狭いので）
検索結果のファイルをすぐに開くことができる

Vector と窓の杜で検索したところ、すべてを見切れてはいませんが、以下の2つがかなり希望に近いものでしたので、この場をお借りしてご紹介致します。

FileFinder
探せにぅ。

Comments [6] | Trackbacks [0]

BlogPeople 1200 被リンク達成＆2004年の BlogPeople トップページ

November 2,2006 1:12 AM
Category：[BlogPeople]
Tag：[BlogPeople]
Permalink

本日、おかげさまをもちまして BlogPeople の被リンク数が1200被リンクに到達しました。以前投稿した「BlogPeople 1000被リンク達成」から6ヶ月弱で辿り着くことができました。
ということで、この場をお借りして被リンクくださった皆様にお礼申し上げます。ありがとうございました。

「1200 被リンク」というのは個人的にひとつの節目でした。というのは、ブログピープルのクレジットバナーは、被リンク数が 100 - 300 - 600 という区切りで新しいバナーが管理画面に追加されることになってまして、最高ランクのバナーは 600 被リンクです。下記にノーマルおよび各被リンク数によるクレジットバナーを掲載します。

ノーマル1
ノーマル2
100被リンク被リンク数100以上の方限定
300被リンク被リンク数300以上の方限定
600被リンク被リンク数600以上の方限定

が、以前出版された「ブログのもと」のバナー変遷の話で、たしか「もうひとつバナーを作るかもしれない」というようなことが書かれており、「じゃ、1200 被リンクを目指そう！」と思った次第です。

ということで、新たなバナーが出ることを密かに期待しています。
また、ソーシャルブックマークや RSS といった Web2.0 系サービスの台頭でリンクリストの影が薄くなっている気がしなくてもないですが、リンクリストは今後もマイペースで増やし続ける予定です。

話は変わって、私が BlogPeople に登録した当時（2004年6月）の BlogPeople トップページは現在のような華やかなページではなく、スクリーンショットのようなシンプルなページでした。
スクリーンショットをクリックすると、世界中の Webサイトが保存されていることで有名な「インターネット・アーカイブ」で保存されている BlogPeople のページ（2004年3月）を見ることができます。懐かしく思われる方も結構いらっしゃるのではないでしょうか。

あと、当ブログで過去にエントリーした BlogPeople 関連記事を下記に再掲しておきます。

Comments [4] | Trackbacks [0]

改訂新版 Movable Type 標準ハンドブック

November 1,2006 1:20 AM
Category：[書籍]
Tag：[Amazon, Book, MovableType]
Permalink

Movable Type 3.3 対応の書籍が11月2日に発売されます。

改訂新版 Movable Type 標準ハンドブック
平田大治関根元和

インプレスジャパン 2006-11-01
売り上げランキング : 10852

Amazonで詳しく見る by G-Tools

以前 3.1日本語版対応として発売されていた「Movable Type 標準ハンドブック」の 3.3 改訂版です。

内容は「インストールから設定、カスタマイズ、活用までを徹底解説。Style Catcherの利用や、Widgetの作成など *1」ということで、基礎的な知識から最新機能を用いたカスタマイズまで、幅広い内容が網羅されているようです。

執筆は、Movable Type に親しんでいる方にはお馴染みの、平田大治さん（現在シックス・アパート顧問）、そして関根元和さん（エムロジック株式会社取締役で Movable Type 3日本語版も開発）のお二人。旧版「Movable Type 標準ハンドブック」の Amazon のレビューも好評のようでしたので、期待できる1冊と言えるでしょう。

*1：インプレス「改訂新版 Movable Type標準ハンドブック」より引用

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

CSSでブログに影をつける（ドロップシャドウ）

１．ドロップシャドウの仕組み

１．１ 固定レイアウト

１．２ リキッドレイアウト

２．公開テンプレートによるカスタマイズ

２．１ 共通事項 - テンプレートの修正

２．２ 固定レイアウトの場合

２．２．１ 画像のダウンロード

２．２．２ スタイルシート修正

２．３ リキッドレイアウトの場合

２．３．１ 画像のダウンロード

２．３．２ スタイルシート修正

サイドメニューの一部を折りたたむ

１．Counter プラグインの設定

２．スクリプトの追加

３．部分折りたたみ用メニューを設定する

３．１ 最近のエントリー

３．２ 最近のコメント

３．３ 最近のトラックバック

３．４ 月別アーカイブリスト

４．CSS設定

５．表示数を変更する

天才クラシックギタリスト・山下和仁の超絶技巧「展覧会の絵」

バシッと

キューステア（Qステア/Q-STEER）・購入レポート

JavaScript 不要なサイドメニューのツリー化 for Serene Bach

１．ツリー画像のダウンロード

２．ツリー画像のアップロード

３．CSS設定

４．テンプレート修正

BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）

１．スクリプトのダウンロード

２．bp.js の修正

３．スクリプトのアップロード

４．リンクリスト表示用タグの追加

５．スクリプトのインクルード

６．スタイルシート設定

７．リンクリストが表示されない場合

Ignore プラグイン

１．プラグインのダウンロード

２．プラグインのアップロード

３．タグ

４．エントリーの中で使いたい場合

Movable Typeでつくる！最強のブログサイト プラグイン＆カスタマイズ編

MTIgnore タグ

この紫蘇（しそ）は

234万5678アクセス特別企画

IE7 の CSS ハック

Counter プラグイン

Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その2：設定方法）

１．ダイナミック・パブリッシングの条件

１．１ データベース

１．２ HTTPサーバ

２．ダイナミック・パブリッシングの設定方法

２．１ 再構築オプションの変更

２．２ テンプレート・キャッシュ・ディレクトリの作成

３．ダイナミック・パブリッシングの最適化

３．１ ページ・レベルのキャッシング

３．２ 条件付きリクエスト

Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その1：概要）

１．スタティック・パブリッシングとダイナミック・パブリッシングの比較

２．Movable Type でのメリット

JavaScript 不要なサイドメニューのツリー化 for Movable Type（MTCollate編）

１．最近のコメント

２．最近のトラックバック

３．CSS

４．ツリー画像のダウンロード

５．画像の配置

６．参考：ツリー表示の仕組み

パソコンとプリンターと部長

Ctrl キーと Caps Lock キーを入れ替える

エントリーのない親カテゴリーに子カテゴリーを表示する

１．MTEntries タグの変更（カテゴリーアーカイブ）

２．MTEntries タグの変更（メインページ・日付アーカイブ・サイドバーの「最近のエントリー」等）

３．親カテゴリーにダミーエントリーをひとつ作る

はてなブックマークカウンターとブログリンク数カウンターAPI

はてなブックマークカウンター

ブログリンク数カウンターAPI

１．１固定レイアウト

１．２リキッドレイアウト

２．１共通事項 - テンプレートの修正

２．２固定レイアウトの場合

２．２．１画像のダウンロード

２．２．２スタイルシート修正

２．３リキッドレイアウトの場合

２．３．１画像のダウンロード

２．３．２スタイルシート修正

３．１最近のエントリー

３．２最近のコメント

３．３最近のトラックバック

３．４月別アーカイブリスト

Movable Typeでつくる！最強のブログサイトプラグイン＆カスタマイズ編

１．１データベース

２．１再構築オプションの変更

２．２テンプレート・キャッシュ・ディレクトリの作成

３．１ページ・レベルのキャッシング

３．２条件付きリクエスト