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

最近バージョンが新しくなったようですが、日本生命CM・BGMのアコースティックな音色はいつ聴いても心が癒されます。

日本生命：CM情報より

• 愛する人のために ?セーフ篇?
• 愛する人のために ?改札篇?
• 愛する人のために ?柱篇?

BGMはエンニオ・モリコーネ作曲「ニュー・シネマ・パラダイスのテーマ」。

この演奏者がどなたなのかネットで調べてみたところ、ほとんど情報ありませんでしたが、山崎ハコさんのサイトでようやく発見。

山崎ハコの世界：お知らせ

ギター奏者は安田裕美さん（山崎ハコさんのご主人）という方でした。ウィキペディア「スタジオ・ミュージシャン」の項目によると「アコースティックギター中心で、主として井上陽水のアルバム製作をサポート」。その他、多方面で活躍されているようです。
編曲はアニメ作曲家の岩崎琢さん。

が、残念ながらCMのためだけに作られた曲らしいので、ここではアコースティックな音色が似ているということで、古澤巌＆アサド兄弟のCDを掲載しておきます。

出会い~from“New Cinema Paradise”to“Pink Floyd/The Wal 古澤巌 アサド兄弟 モリコーネ ソニーミュージックエンタテインメント 1999-07-01 売り上げランキング : Amazonで詳しく見る by G-Tools

いずれも音楽界では著名な方で、アサド兄弟は「スーパー・ギター・デュオ」と呼ばれており、絶妙なアンサンブルを楽しませてくれます。

フォントサイズ切り替えツールの紹介です。

50ism.com：ブログ文字拡大ツールα版

これは提供されているスクリプトをサイトに貼り付けるだけで、フォントサイズ切り替え用のアイコン（左）が表示されるというもので、フォントサイズを大・中・小の三段階に切り替えらることができます。 このサービスでは2種類のスクリプトが用意されていますが、片方のスクリプト（ページ上）はフレーム表示に切り替わるため、個人的にはもう一方（ページ下）の

<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>

がお勧めです。

ただしスタイルが予め設定されているため、若干手を加え、公開テンプレートのサイドバーにぴったり収めるためのカスタマイズを紹介します。

注：公開テンプレートに設置したところ、中央カラム本文のみがフォントサイズ切り替え対象となるようです（全体のフォントサイズを切り替えられるようにするにはCSSの修正が必要と思われますが、そこまで手が回っていません）。

１．スクリプトの設定

提供されているスクリプトを表示したい部分に貼り付けると同時に、青色のタグを追加します。

<div id="blogsize">
<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>
</div>
<script type="text/javascript">
div = document.getElementById('blogsize').getElementsByTagName('div')[0];
div.style.margin = '0';
</script>

追加したタグとスクリプトは予め設定されているマージンをクリアするためのものです。

２．CSS 修正

フォントサイズ切り替え用のアイコンは幅 170px なので、公開テンプレートのサイドバー（幅 155px）に設定するとレイアウトが崩れます。
ということで、スタイルシートのサイドバー幅を修正します。

ここでは3カラム固定レイアウトの場合を例に示します。赤色を削除して青色を追加してください。

変更前

.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;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

変更後

.layout-three-column #box {
    width: 867px;
    _width: 865px;
    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 #links-left-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-right-box {
    float: left;
    width: 202px;
    _width: 200px;
}

ここでは右サイドバーに設置することを想定して、#links-right-box の幅を 202px（または200px）にしていますが、左サイドバーに設置する場合は #links-left-box の設定と #links-right-box の設定を入れ替えてください。

Movable Type の公開テンプレートおよびデフォルトテンプレートを利用したサンプルを作成しましたので、動作をご確認ください。

• サンプル１：Movable Type 公開テンプレート
• サンプル２：Movable Type デフォルトテンプレート

以下、カスタマイズ方法です。あわてて書いたため考慮もれ等あるかもしれません。説明通りに設定して正常に動作しない場合は適宜ご質問ください。

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

「ドラッグ＆ドロップできるサイドメニューの折りたたみ」の１項を参照ください。
なお dbx.css / dbx-key.js は本記事の４項および５項で指定したものをお使いください。

ダウンロードしたファイルは、Movabe Type の場合はメインページと同じディレクトリに、FC2ブログの場合は何も考えずにアップロードしてください（dbx.css は後述の画像ファイルをインクルードする関係で内容の修正が必要な場合があります）。

２．link 要素と script 要素の設定

アップロードした dbx.css / dbx.js / dbx-key.js をインクルードするための設定です。以下、各ブログでの設定内容を示します。

２．１ Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>dbx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dbx-key.js"></script>

２．２ FC2 ブログの場合

<link rel="stylesheet" href="<%url>file/dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<%url>file/dbx.js"></script>
<script type="text/javascript" src="<%url>file/dbx-key.js"></script>

３．HTML の設定

ここでは公開テンプレート（Movable Type / FC2 ブログ）および Movable Type デフォルトテンプレートを用いたサンプル（「最近のエントリー」と「最近のコメント」に Docking boxes を適用）を紹介します。
dbx-content 部分のタグ構造は ul - li を利用していますが、CSS（dbx.css）の設定で他のタグも利用可能と思います。ご自身で色々試してみてください。

３．１ 公開テンプレートの場合

３．１．１ Movable Type

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
    <MTEntries lastn="10">
      <li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
    </MTEntries>
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
    <MTEntries lastn="5" recently_commented_on="5">
      <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>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．１．２ FC2 ブログ

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
<!--recent-->
    <li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="new"><%recent_year>:<%recent_month>:<%recent_day>:<%recent_hour>:<%recent_minute>:<%recent_second></span></li>
<!--/recent-->
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
<!--rcomment-->
    <li><%rcomment_etitle><br />└<a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li>
<!--/rcomment-->
  </ul>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．２ Movable Type デフォルトテンプレートの場合

デフォルトの2カラムレイアウトの適用部分をまとめて示します。

　　　：
<div id="beta">
   <div id="beta-inner" class="pkg">
      <div class="module-search module">
         <h2 class="module-header">検索</h2>
         <div class="module-content">
            <form method="get" action="http://10.133.83.54/blog/MT-3.32-ja/mt-search.cgi">
               <input type="hidden" name="IncludeBlogs" value="1" />
               <label for="search" accesskey="4">ブログを検索: </label><br />
               <input id="search" name="search" size="20" />
               <input type="submit" value="検索" />
            </form>
         </div>
      </div>
      
   <div id="right" class="dbx-group">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header">最近のエントリー</h2></div>
            <ul class="dbx-content">
            <MTEntries lastn="10">
               <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTEntries>
            <li style="margin-left:-17px;list-style-type:none;"><a href="http://10.133.83.54/blog/MT-3.32-ja/atom.xml">このブログのフィードを取得</a><br />
            [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]</li>
            </ul>
         </div>
      </div><!-- /dbx-box -->
 
      <MTIfArchiveTypeEnabled archive_type="Category">
      <div class="dbx-box">
         <div class="module-categories module">
            <div class="dbx-handle"><h2 class="module-header">カテゴリー</h2></div>
            <MTTopLevelCategories>
            <MTSubCatIsFirst><ul class="dbx-content"></MTSubCatIsFirst>
               <MTIfNonZero tag="MTCategoryCount">
               <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
               <MTElse>
               <li class="module-list-item"><MTCategoryLabel>
               </MTElse>
               </MTIfNonZero>
                  <MTSubCatsRecurse>
               </li>
            <MTSubCatIsLast></ul></MTSubCatIsLast>
            </MTTopLevelCategories>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
 
      <MTIfArchiveTypeEnabled archive_type="Monthly">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header"><a href="http://10.133.83.54/blog/MT-3.32-ja/archives.html">アーカイブ</a></h2></div>
               <MTArchiveList archive_type="Monthly">
                  <MTArchiveListHeader><ul class="dbx-content"></MTArchiveListHeader>
                     <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
                  <MTArchiveListFooter></ul></MTArchiveListFooter>
               </MTArchiveList>
            </div>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
   </div><!-- /dbx-group -->
　　　：

４．CSS の設定

下記のリンクよりそれぞれの dbx.css をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

公開テンプレートは styles-site.css の下記の部分を変更しています（赤色を削除・青色を追加）。

/* 順序なしリスト */
ul, ol {
    padding-left: 16px;
}
ul li {
    list-style-type: none;
    padding-left: 10px;
    background: url(images/lmark.gif) no-repeat 1px 0.5em;
}

５．JavaScript の設定

下記のリンクよりそれぞれの dbx-key.js をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

基本的に配布サイトの dbx-key.js でも構いませんが、コンテナIDの部分が３項で設定したHTMLタグの id 属性値と一致するようにしてください（詳細は「その1」の５項参照）。

６．折りたたみマークの設定

サンプルで使っているものを配布しますので、よければご利用ください。
下記の折りたたみマーク画像を右クリックして「名前をつけて画像を保存」を選択するとダウンロードできます。

デフォルトテンプレート用

公開テンプレート用

ダウンロードした画像ファイルは適宜アップロードしてください。サンプルでは Movable Type のディレクトリを想定して、mt-static/images 配下にアップロードしています。FC2はファイルのアップロード機能を利用してください。

アップロードしたパスは、 dbx.css の a.dbx-toggle セレクタの background 属性（青色）

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
    display:block;
    width:20px;
    height:20px;
    overflow:hidden;
    background:url(mt-static/images/toggle.gif) no-repeat;
    position:absolute;
    top:0px;
    right:0;
    text-indent:-50px;
    text-decoration:none;
    }

に反映する必要があります。

パスはアップロードするディレクトリによって適宜変更してください。また上記の設定例では dbx.css と異なるディレクトリに配置されているページからは画像を表示することができませんので、パスは URL で指定してください。
FC2ブログの場合も同様です。

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

Docking boxes(dbx) のページの「Get the Script」からアーカイブをダウンロードします。アーカイブを解凍した中から下記のファイルのみを使用します。

• dbx.css（または dbx-allrules.css）
• dbx.js
• dbx-key.js

他のファイルおよび画像はサンプルのためのものです。全てをアップロードして各HTMLにアクセスすればサンプルを確認できます。

２．link 要素と script 要素の設定

Docking boxes を使用したいテンプレートの <head> ? </head> の間に下記を追加します。

<link rel="stylesheet" href="dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="dbx.js"></script>
<script type="text/javascript" src="dbx-key.js"></script>

dbx.css / dbx.js./ dbx-key.js とパスが異なるページで利用する場合は dbx.css / dbx.js./ dbx-key.js に URL を指定します。

３．HTML の設定

Docking boxes の HTML マークアップは下記の構造になります。

<div id="menu1" class="dbx-group">
    <div class="dbx-box">
        <div class="dbx-handle">サイドメニュー1</div>
        <ul class="dbx-content">
            <li>リスト1-1</li>
            <li>リスト1-2</li>
              ：
              <li>リスト1-n</li>
        </ul>
    </div>
    <div class="dbx-box">
        <div class="dbx-handle">サイドメニュー2</div>
        <ul class="dbx-content">
            <li>リスト2-1</li>
            <li>リスト2-2</li>
              ：
              <li>リスト2-n</li>
        </ul>
    </div>
　　　：
</div>

Docking boxes は各要素に設定した class 属性（青色）によって動作します。それぞれの class 属性値は次の役割をもっています。

• dbx-group：Docking boxes を使用したい箇所に指定
• dbx-box：サイドメニュー（最近のエントリー・最近のコメント等）単位に指定
• dbx-handle：サイドメニュータイトルに指定
• dbx-content：サイドメニューのリストに指定

ポイント

• dbx-group は赤色で示した id 属性と対応し（後述）、複数指定できます
• サンプルの dbx-content は ul 要素ですが、div 要素と p 要素の組み合わせ等でも大丈夫です

４．CSSの設定

サイドメニューのスタイルは dbx.css で設定します。dbx-allrules.css がデフォルトで利用するための（空の）CSS ですが、ここではサンプル用で設定されている dbx.css を用いて説明します。
以下、ファイルを上から順に見ていく形で説明します（CSSハック等、一部省略しています）。

以下のコードは変更や上書きをしてはいけません。

/****************************************************************
  docking boxes core CSS: YOU MUST NOT CHANGE OR OVERRIDE THESE 
*****************************************************************/
.dbx-clone {
    position:absolute;
    visibility:hidden;
}
.dbx-clone, .dbx-clone .dbx-handle-cursor {
    cursor:move !important;
}
.dbx-dummy {
    display:block;
    width:0;
    height:0;
    overflow:hidden;
}
.dbx-group, .dbx-box, .dbx-handle {
    position:relative;
    display:block;
}

dbx-box と clone（=ドラッグ中のサイドメニュー）の間の視覚違いをなくすために、dbx-box への padding、marginまたはborderの設定は避けてください。視覚的に、dbx-box はスタイルを設定しない方が良いでしょう。

/****************************************************************
  avoid padding, margins or borders on dbx-box, 
  to reduce visual discrepancies between it and the clone.  
  overall, dbx-box is best left as visually unstyled as possible 
*****************************************************************/
.dbx-box {
    margin:0;
    padding:0;
    border:none;
}

その他（以下）は自由に設定してください。

/****************************************************************
  otherwise, do what you like :) 
*****************************************************************/
　　　　　　　　　　　　　：

#purple-outer はサンプルの dbx.html 用なので削除します。
dbx-group は width / background / padding プロパティでサイドバー全体の幅・背景・パディングを調整しています。

/* group container(s) */
#purple-outer {
    border:1px solid #a382c0;
    margin:0 10px 0 0;
    float:left;
    position:relative;/* additional outer containers must also have position:relative */
    }
.dbx-group {
    clear:both;
    width:150px;
    background:#c5a4e0;
    padding:0 10px 10px 10px;
    }

dbx-handle でサイドメニューのタイトル部分のスタイルを指定します。cursor プロパティはドラッグ位置にマウスオーバーした時に表示するカーソル（move は十字矢印）を指定します。

/* handles */
.dbx-handle {
    font:normal normal bold 1em tahoma,sans-serif;
    text-align:center;
    position:relative;
    margin:0;
    padding:16px 0 6px 0;
    background:url(images/purple-handle.gif) no-repeat 0 0; 
    color:#fff;
    }
 
/* handle cursors are in a class of their own
   so they only get applied if the script is supported */
.dbx-handle-cursor {
    cursor:move;
    }

a.dbx-toggle は折りたたみマークのスタイルを指定します。サンプルの折りたたみマークは次のようなもので、4種類の状態を表せるようになっています。

• 左上：開いている時
• 右上：開いている時にフォーカス
• 左下：閉じている時
• 右下：閉じている時にフォーカス

CSS に精通されている方は有名なテクニックとですが、ひとつの画像フィイルに複数の画像をまとめておくことで、ページ表示に全ての画像がロードされるので、画像の表示切り替え時にタイムラグが発生しません。
画像の切り替えは、次の5つのセレクタのうち、下の4つがそれぞれの状態に対応しており、画像の表示位置をずらすことで表示する画像を切り替えます。

「クロスブラウザを保つために、デフォルトと visited 疑似クラスを一緒に定義すべきです」という説明がされています。

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
    display:block;
    width:20px;
    height:20px;
    overflow:hidden;
    background:url(images/purple-toggle.gif) no-repeat;
    position:absolute;
    top:14px;
    right:3px;
    text-indent:-50px;
    text-decoration:none;
    }
     
     
a.dbx-toggle-open, a.dbx-toggle-open:visited {
    background-position:0 0;
    }
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
    background-position:0 -20px;
    }
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
    background-position:-20px 0;
    }
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
    background-position:-20px -20px;
    }

dbx-tooltip はツールチップのスタイルです。

/* keyboard navigation tooltip */
.dbx-tooltip {
    display:block;
    position:absolute;
    margin:36px 0 0 125px;
    width:185px;
    border:1px solid #000;
    background:#ffd;
    color:#000;
    font:normal normal normal 0.85em tahoma, arial, sans-serif;
    padding:2px 4px 3px 5px;
    text-align:left;
    }

dbx-content はメニューリストのスタイルを設定します。

.dbx-content li {
    width:130px;
    margin:0;
    padding:0 10px 1px 10px;
    list-style-type:none;
    font:normal normal normal 0.85em verdana,sans-serif;
    background:url(images/purple-content.gif) #bca2cf repeat-y;
    }
 
.dbx-content a, .dbx-content a:visited {
    color:#000;
    text-decoration:none;
    }
 
.dbx-content a:hover, .dbx-content a:focus, .dbx-content a:active {
    color:#306;
    text-decoration:underline;
    }

下はメニューリストが閉じている時のリストスタイルです。

/* toggle state of inner content area */
.dbx-box-closed .dbx-content {
    display:block;
    height:10px;
    padding:0;
    overflow:hidden;
    }

dbx-clone クローンはドラッグしている時のリストです。サンプルでは透過するようにしています。この設定を削除するとドラッグしている時に、下に隠れるオブジェクトが見えなくなります。

/* additional clone styles */
.dbx-clone {
    opacity:0.8;
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    filter:alpha(opacity=80);
    }

５．JavaScript の設定

dbx-key.js に、３項で設定した id 属性（赤色）に対応するオブジェクトを作成します。それらしき役割を日本語で示しておきます。青色の hogehoge は任意の名称でいいみたいです。コンテナIDが id 属性になります。

//create new docking boxes group
var hogehoge = new dbxGroup(
    'menu1',     // コンテナID [/-_a-zA-Z0-9/]
    'vertical', // ドラッグ方向 ['vertical':縦|'horizontal':横]
    '7',        // ドラッグ開始する移動ピクセル（マウスが指定px移動するとドラッグ開始）['n' pixels]
    'no',       // コンテナのドラッグ範囲外への移動許可 ['yes'|'no']
    '10',       // ドラッグ時, 他のサイドバーが移動するアニメーション効果（フレーム数指定, '0'は効果なし）
    'yes',      // 開閉ボタン表示（非表示の場合、開閉不可） ['yes'|'no']
    'open',     // 開閉のデフォルト状態 ['open'|'closed']
    'open',     // 閉じている時に下の %toggle% に挿入するメッセージ
    'close',    // 開いている時に下の %toggle% に挿入するメッセージ
    'click-down and drag to move this box',    // ドラッグエリアにマウスオーバーした時のツールチップ
    'click to %toggle% this box',              // 開閉エリアにマウスオーバー時のツールチップ
    'use the arrow keys to move this box',     // ドラッグエリアのキーボード操作時のツールチップ
    ', or press the enter key to %toggle% it', // 開閉エリアにキーボード操作時のツールチップ
    '%mytitle%  [%dbxtitle%]'                  // title属性が競合した場合（？）
    );

サイドバーを左右に配して、どちらもドラッグ＆ドロップできるようにするには、上と同じオブジェクト（hogehoge）をもうひとつ作ります（'hogehoge2' 等）。コンテナID（menu1）は必ず変えて、変えたコンテナIDが id 属性となるようにHTMLマークアップを行ってください。

６．注意事項

リストマークはクリックを契機に大きくなってしまう現象が起きるので、list-style-type で指定したマークが大きくなるので background 指定すると良いでしょう。

現在リリース中の Movable Type 3.32 および 3.2 でクロスサイトスクリプティングによる脆弱性がみつかったため、Movable Type 3.33 および 3.2 用のパッチがリリースされました。

【重要】 Movable Type 新バージョンとパッチの提供について

Movable Typeのプログラムにおいてクロスサイトスクリプティングによる脆弱性が確認されました。対策を施した新バージョンをリリースいたします。

なお　3.32 と 3.33 の差分は下記の通りです（上記記事より抜粋）。

lib/MT.pm
lib/MT/App.pm
lib/MT/Log.pm
lib/MT/Sanitize.pm
lib/MT/App/CMS.pm
lib/MT/App/Search.pm
php/mt.php
php/lib/sanitize_lib.php
plugins/nofollow/nofollow.pl

記事では「脆弱性回避のために、速やかにMovable Type 3.33へアップグレードしてください」ということです。
なお 3.33 についてはセキュリティ脆弱性修正以外に、数多くの修正が施されて「機能と信頼性が向上している」と記されています。

Movable Type のスタイルライブラリ一覧です。この一覧は「StyleCatcher」というキーワードでヒットしたサイトから探して掲載しております（ウェブ上の全てのサイトを網羅できている訳ではありません）。

Six Apart

The Style Contest for Movable Type, Typepad and LiveJournal

*表示に時間がかかります

ロフトワーク

beta.HINAGATA

flopover.com::blog

MovableType幼稚園

MovableType備忘録

tokyobuddha

アットスタイル

釈迦マインドblog

小粋空間

ライブラリの利用方法は以下の通りです（3.3以降の場合）。

1. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「設定を表示」をクリック
2. テーマを保存するための「テーマのルートURL」「テーマのルートパス」が表示されているので問題なければそのまま「変更を保存」をクリック
3. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「StyleCatcherを起動」をクリック。または管理メニューの[テンプレート]で下に表示されている「StyleCatcherでデザインを選ぶ」をクリック
4. 「テーマ/リポジトリへのURL」に上記のURLを入力して「スタイル検索」をクリック（デフォルトで設定されているURLは Movable Type 英語サイトのライブラリです）
5. 接続OKであれば下のスクリーンショットのようにテーマが表示されますので、お好みのテーマをクリックして右下の「デザインを適用」をクリック

先程乗車していた総武線各駅停車千葉行が、小岩駅に到着したところで、

「先程『異臭がする』という通報を受けましたので、この列車は回送になります」

というアナウンスをしながら乗務員さんが車内を回ってきて、乗っていた電車を強制的に降ろされました。このような事件めいたケースに出くわしたのは初めてです。

というか、実は異臭騒ぎの一部始終を間近で目撃していました。

JR総武線車両で異臭騒ぎ＝乗客800人が途中下車?千葉県警

電車を降ろされた小岩駅から数駅手前、私が乗っていた車両で突然、数名の乗客が「ゴホッゴホッ」とひどいせきを始め、列車を突然降りるか、他の車両に移る・座っていた席から遠ざかるという事態が発生しました。
せきが出た人は、扉と扉の間の、あるブロックの席に座っていた人達。そしてあっと言う間にそのブロックの席だけ誰もいなくなったのです。

私はそのひとつ隣のブロックの席に座っていたためか、幸いにも異臭は全く感じず、「横で何が起きたのだろう？」と思いながら、せきをしながら立ち去る人たちを目で追っていました。ただ、私が座っていたブロックの人も何人か席を立ったので、私が座っていた席だけたまたま異臭が流れてこなかったのかもしれません（私は扉の真横の席に座っていて、扉と席の間には仕切りがあり、それで救われたかも）。

異臭の原因ですが、ふと誰もいなくなった席の方に目をやると、一人だけ平然と座っている浮浪者っぽいおじさんがおりまして、どうもその人が異臭を放っていたのではないかと推測します。その後何駅か進んだ後、おじさんはいつの間にかいなくなっており、空いた席には後から乗ってきたお客さんが何事もなかったかのように座っていたからです。

乗務員さんがアナウンスに来たのはそれからまた少し後。私が乗っていた車両の誰かが通報したのか、あるいはおじさんが別の車両に移動して、その車両の誰かが通報したのかは定かではありません。

満員とか大声で騒いでいるのは我慢できますが、異臭は耐えられませんね。

歩道が安全

発売されて1ヶ月ほど経ちましたが「グーグル Google」の著者・佐々木俊尚氏がHotwired Japan：ITジャーナルで1年半の連載をまとめた「ウェブ2.0は夢か現実か？」の紹介です。

ウェブ2.0は夢か現実か?―テレビ・新聞を呑み込むネットの破壊力 佐々木 俊尚 宝島社 2006-08 売り上げランキング : 18622 おすすめ平均 Amazonで詳しく見る by G-Tools

インターネットの普及、そしてウェブ2.0の出現で世の中の色々なところで変化が起きている、そういうことが実感できる一冊です。ライブドア事件・カカクコム・Winny等についても専門的・中立的な立場で言及されており、改めて事件を振り返り、物事の本質を見極めるための一助となるでしょう。

以下、印象に残った文や感想等（見出しは主に目次より引用）。

最も素晴らしいセキュリティは何もしないこと？

コスト優先のサイバーノーガード戦法。

ブログの信頼度は計れるか

日本でのニッチな検索マーケットを目指すマーズフラッグ・アスクジーブス・gooラボ

グーグルニュースをめぐる水面下の戦い

ダブルスタンダードな新聞社。

いま起きつつあるネットとテレビの融合モデル

シームレス（地上波・衛星・ブロードバンド等を意識せず）に様々な番組を見ることができる Tivo と iPod へのビデオ機能の実装。

日本の新聞がなぜウェブ2.0に打ち倒されるのか

販売収入への依存度が高い日本の新聞業界（全米では広告収入が高い）→広告モデルへの移行が困難

「プッシュ」が復活してきた

RSSによって情報の流れが変わってきて、情報収集術にも変化が。「サイト更新を頻繁に行わないとアクセスが減少する」というのが一般的な考え方ですが、RSSリーダーに購読サイトを登録しておけば、更新周期が不定であってもある程度のアクセスは獲得できるようになる気がしてきました（未読RSS恐怖症という現象もあるようですが）。

TVとインターネットの融合

いわゆる「融合」が遠い先の話としても、少なからずネット側への「連携」は緩やかに進んでいる気がします。放映中のURL表示は当たり前になり、最近のCMでは検索文字列とフォームを表示してインターネットへのアクセスを促しています。

情報システム部門のブラックホール

すべての企業がIT化を推し進める必要はない（TCO/ROI）

IT文化の中にどっぷりと浸ることによる知識欲の満足と、現実からの離脱という現象

佐々木俊尚氏は現在、CNET Japan：ジャーナリストの視点というブログを運営されています。
非常に興味深く読ませて頂きましたので、このシリーズの次回作を期待しています。

月別アーカイブページに表示された横型カレンダーに月送り用のリンクをつけるカスタマイズです。 このカスタマイズは「月送りカレンダー（簡易版・休日表示付き）」を横型用にアレンジしたものです。ご利用に際しては「月送りカレンダー（簡易版）」も併せてご覧ください。

注：本カスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

日付アーカイブテンプレート編集画面を開き、横型カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

<div id="calendar" title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y" language="en"$><MTArchiveNext> <a href="<$MTArchiveLink$>">&#65310;</a></MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 
 
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendar");
    var title = element.getAttribute("title");
    var year = title.split("/")[0];
    var month = title.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (!(spans[i].getAttribute('class') == 'calendarHead' ||
            spans[i].getAttribute('className') == 'calendarHead')) {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

参考までに、タイトルバナー下に上記リストを挿入する場合の設定位置を示します。

デフォルトテンプレートの場合

　　　　　　：
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>
 
---- ここに設定 -----
 
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
　　　　　　：

公開テンプレートの場合

　　　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
---- ここに設定 -----
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　：

５．CSS修正

下記のCSSを styles-site.css に追加してください。
ここでは公開テンプレートに設定する場合のスタイルを示しますが、デフォルトテンプレートでも適用可能です。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    display: inline;
    padding: 0 1px;
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

デフォルトテンプレートの場合は赤色部分を削除するといい具合になります。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
　　　　　　：

公開テンプレートご利用の方は、styles-site.css に設定されている下記の設定を削除してください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

先日公開した「Flash カレンダープラグイン for Serene Bach」に不具合がありましたのでバージョンアップしました。

１．不具合

EUC-JP 版の Serene Bach で Ver1.00 の Flash カレンダープラグインを使用した場合、カレンダーの日付をマウスポイントした時に表示される記事タイトルが文字化けします。

２．原因

Flash カレンダー自体が UTF-8 にしか対応していないため、プラグインで生成する calendar.xml の文字コードがUTF-8 である必要がありますが、当方の認識不足でブログに依存した文字コードの calendar.xml を出力していました。
つまり、EUC-JP版の Serene Bach の場合、文字コード EUC-JP の calendar.xml を出力するため、前述の不具合が発生します。

これは neige essai さんの記事で気がつきました。ありがとうございました。

３．対処内容

文字コード UTF-8 の calendar.xml を出力するように変更しましたので、EUC-JP版 Serene Bach にも対応可能です。

ということで、現在 1.01 のプラグインを公開しています。EUC-JP版でブログを運用されている方はこちらをご利用ください。

Six Apart のサイトで、Movable Type の新しいスタイル・ライブラリが公開されたとのニュースが出ていました。

シックス・アパート、ロフトワークと共同で国内初のスタイル・ライブラリを公開

6000人が登録するクリエイター・コミュニティを運営する制作代理店の株式会社ロフトワーク（代表取締役社長：諏訪光洋、東京都渋谷区、以下ロフトワーク）とブログ・ソフトウェア大手のシックス・アパート株式会社（代表取締役：関 信浩、東京都港区、以下シックス･アパート）は、共同で「Movable Type」のプラグイン「StyleCatcher（スタイルキャッチャー）」に対応した、スタイル・ライブラリを公開いたします。

ライブラリのURLは下記です。

ライブラリのURL:

ライブラリの利用方法は以下の通りです（3.3以降の場合）。

1. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「設定を表示」をクリック
2. テーマを保存するための「テーマのルートURL」「テーマのルートパス」が表示されているので問題なければそのまま「変更を保存」をクリック
3. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「StyleCatcherを起動」をクリック。または管理メニューの[テンプレート]で下に表示されている「StyleCatcherでデザインを選ぶ」をクリック
4. 「テーマ/リポジトリへのURL」に上記の「ライブラリのURL」を入力して「スタイル検索」をクリック（デフォルトで設定されているURLは Movable Type 英語サイトのライブラリです）
5. 接続OKであれば下のスクリーンショットのようにテーマが表示されますので、お好みのテーマをクリックして右下の「デザインを適用」をクリック

同一エントリーへの重複トラックバックを抑止するプラグインです。

Movable Type は、バージョン 3.2 まで重複トラックバックに対する制御は行われていませんでしたが、3.3 以降、 重複トラックバック（送信元URL・タイトル・概要が同一のトラックバック）を受信した場合、その内容を過去に受信したトラックバックに上書きするよう、処理が変更されました。

追加された処理は、トラックバック送信後に送信元記事のタイトルあるいはトラックバックの概要を変更してトラックバックを再送信するようなケースを考えた場合、非常に有効です。

現在「重複トラックバック防止プラグイン」を公開しておりますが、上記の理由で 3.3 では重複トラックバック防止プラグインが不要となりました。

ただし、全く同一の内容が再送信された場合ー例えば初回のトラックバック送信がタイムアウトになり（送信が完結しないと Movable Type では「トラックバック送信先のURL」にデータが残ります）、エントリーを再保存（つまり再送信）してしまったケース等ーでも上書き処理が行われ、再構築が発生します。

本プラグインは、内容が全く同一のトラックバックのみをフィルタリングし、再構築を発生させないことを目的としたものです。 *1

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

下記の duplicateTBPingThrottlefilter.zip または duplicateTBPingThrottlefilter.lzh をダウンロードしてください。

duplicateTBPingThrottlefilter.zip
duplicateTBPingThrottlefilter.lzh

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

ダウンロードしたアーカイブを解凍してください。解凍すると中に duplicateTBPingThrottlefilter フォルダがありますので、Movable Type の plugins ディレクトリにフォルダごとアップロードしてください。

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

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

の画面に利用中のプラグイン一覧が表示されますので、その中に「Duplicate Trackback Ping Throttle Filter Plugin ?」が表示されていればOKです。

３．設定

特にありません。２項でプラグインが表示されていれば有効です。

４．ログ

トラックバックがフィルタリングされた場合、ログに

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

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

*1：というのは建前で、「過去に作った重複トラック防止バックプラグインを無駄にしたくない」というのが本音。

先日、SONYのHi-MDウォークマン「MZ-RH1」を購入しました。

MZ-RH1 S Hi-MD ウォークマン ソニー 2006-04-21 売り上げランキング : 7560 おすすめ平均 Amazonで詳しく見る by G-Tools

この機種の主な特徴は下記の通りです。

• 音源を圧縮せずに録音できる音声形式・リニアPCM(44.1kHz/16bit)に対応
• 本体録音コンテンツをデジタルでパソコン(Windows＆Macintosh)に保存
• 本体録音で最長約34時間(約503曲)。パソコン接続で最長約45時間(約675曲)の長時間録音が可能
• 従来のMDの曲を、デジタル＆高速でパソコンにアップロード可能
• 従来のミニディスクも再生可能
• パソコンデータの外部記録メディアとして活用
• 従来のMDの大容量化

セールスポイントは何といっても「リニアPCM録音」です。
「リニア（非圧縮）PCM（Pulse Code Modulation）」という方式は、アナログ音源をデジタル化する際にデータを圧縮しないため、高音質な録音が可能です（サンプリングビット数・サンプリングレートは製品によって異なります）。

ネットで調べたところ、今回購入した MZ-RH1 の他に「リニアPCMレコーダー」は下記がありました。

R-09 24bit WAVE/MP3 RECORDER ローランド 2006-04-28 売り上げランキング : 8656 おすすめ平均 Amazonで詳しく見る by G-Tools

R-09 はSDカード（最大2GB）を記録媒体とした、ローランド（エディロール）の人気機種です。本体上部横に高性能ステレオ・マイクを内蔵しているので手軽にレコーディングが行えます。本体価格は MZ-RH1 とほぼ同じ。

PCM-D1 リニアPCMレコーダー ソニー 2005-11-21 売り上げランキング : おすすめ平均 Amazonで詳しく見る by G-Tools

PCM-D1 は4GBのフラッシュメモリを内蔵した、携帯型リニアPCM録音機です。個人的にはメカニカルな外観にかなり食指をそそられるのですが、残念ながら実勢価格16?17万という高級機です。

ローランド R-09 も候補のひとつで、MZ-RH1 のどちらにするかかなり悩みましたが、MZ-RH1の

• 既存のMDを扱える
• メディア実勢価格が安い（SDカード：2?5,000円/1GBに対し、Hi-MD：約600円/1GB）

という点が購入する決め手になりました。

今回の購入目的ですが、演奏の練習等の音源を WAV 形式または MP3 形式でPCにアップロードするまでの作業時間の短縮です。

これまで録音した音源をPCにアップロードするまでの作業として、

1. ポータブルMDで録音
2. MDプレーヤーからUSBオーディオインタフェースを介してPC（Windows98）のハードディスクに録音
3. Windows98 から Windows XP にファイル転送

と、かなり手間のかかる方法をとっていました。

Windows 98で録音している理由は、所有しているUSBオーディオインタフェース（YAMAHA・UW500）がかなり古いもので、バンドルされている「XGworks Lite」が Windows 98 しか対応していないためです。
UW500本体のドライバをアップデートして、XP対応のXGworksを購入するという手もありますが、その場合3番目の手間が改善されるだけで、MDからの再録音時間を短縮するという抜本的な解決にはなりません。

MZ-RH1 から音源をアップロードするにはバンドルされている、音楽統合ソフトウェア「SonicStage」なるものを使用します。

早速録音した音源をアップロードしてみました。数分の録音データであれば数十秒で転送できます。これを WAV 形式で保存してMP3に変換すれば完了です。
ということで、これまで数十分?数時間かかっていた転送作業がものの数分?十数分で完了できるようになりました。

関連記事

• MZ-RH1体験レポート「新しい音楽の楽しみを発見」
• 「MZ-RH1開発者インタビュー」小寺信良がMZ-RH1の魅力を探る
• MYCOMジャーナル：音楽をはじめよう! - 第10回バンド活動にリニアPCMレコーダを活用してみよう(1)
• MYCOMジャーナル：音楽をはじめよう! - 第10回バンド活動にリニアPCMレコーダを活用してみよう(2)
• インプレスウォッチ：ソニー、24bit/96kHz対応のリニアPCMレコーダ
• デジタルARENA：本体を“バラして”驚いた！　ソニー“デジタルデンスケ”「PCM-D1」のこだわり

Serene Bach で、Kinarie&May さんが配布されている Movable Type 用の Flash カレンダー（通常版／横型）を使えるようにするためのプラグインです。

注：このプラグインは 2.0x までの対応です。フラッシュカレンダー 3.00 をご利用の場合は「Flash カレンダープラグイン（3.00 対応版） for Serene Bach」をご覧ください。