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

Movable Type 4.3 ではブログ記事やウェブページでのスライドショーが簡単に実現できるようになりました。

下記の画像をクリックすればサンプルページに移動します。移動先のページの画像のすぐ下にある「Previous」または「Next」のリンクをクリックすれば、画像が切り替わります。

以下、「MovableType.org - Features of 4.3: Entry Asset Manager」にもとづいた設定方法を紹介します。日本語化していない場合は管理画面の項目を適宜読み替えてください。

１．テンプレートの設定

ブログ管理画面の「デザイン」→「テンプレート」→「ブログ記事」をクリックして、 body の終了タグの直前に下記の内容を追加します。

<script type="text/javascript">
//<![CDATA[
var entryAssets = new Array(<mt:EntryAssets>'<mt:AssetThumbnailURL width="500">'<mt:Unless name="__last__">,</mt:Unless></mt:EntryAssets>);
 
if ( entryAssets.length != 0) {
    var entrySlideshow = document.getElementById('entry-gallery');
    var imgIndex = 0
 
    function viewImage(direc) {
        if (direc == 'next') imgIndex++;
        if (direc == 'prev') imgIndex--;
        if (imgIndex >= entryAssets.length) imgIndex = 0;
        if (imgIndex < 0 ) imgIndex = (entryAssets.length - 1);
        slideshowImage.setAttribute('src',entryAssets[imgIndex]);
        return false;
    }
 
    var slideshowImage = document.createElement('img');
    slideshowImage.setAttribute('src',entryAssets[imgIndex]);
    slideshowImage.setAttribute('alt','Slideshow Image');
    entrySlideshow.appendChild(slideshowImage);
 
    var slideshowNav = document.createElement('p');
 
    var slideshowPrev = document.createElement('a');
    slideshowPrev.setAttribute('id','slideshow-prev');
    slideshowPrev.innerHTML = '&laquo; Previous';
    slideshowPrev.setAttribute('href','#');
    slideshowPrev.setAttribute('onclick','viewImage("prev")');
    slideshowNav.appendChild(slideshowPrev);
 
    var slideshowNext = document.createElement('a');
    slideshowNext.setAttribute('id','slideshow-next');
    slideshowNext.setAttribute('href','#');
    slideshowNext.innerHTML = 'Next &raquo;';
    slideshowNext.setAttribute('onclick','viewImage("next")');
    slideshowNav.appendChild(slideshowNext);
 
    entrySlideshow.appendChild(slideshowNav);
}       
//]]>
</script>

この JavaScript にあるアイテム関連のテンプレートタグで、ブログ記事に関連付けられた画像を読み込み、配列に設定しています。

２．ブログ記事の投稿

ブログ記事本文に下記のマークアップを追加します。追加前に、フォーマットは「なし」または「改行を変換」を選択しておきます。

<div id="entry-gallery"></div>

設定後はこんな感じになります。

そして、ブログ編集画面右下のアイテム管理フィールドの「Add New 」をクリックして、好みの画像をアップロード（またはアップロード済の画像をブログ記事に関連付け）します。

設定後はこのようになります。

関連付けた画像をブログ記事本文フィールドに挿入する必要がないのが、このカスタマイズのキモです。サンプルのブログ記事編集画面の設定完了後の状態は次のようになります。

これで元記事のカスタマイズは設定完了ですが、メインページやアーカイブページでは id 属性が重複するので、その点を踏まえたカスタマイズについては別途エントリーしたいと思います。

Movable Type 4.3 がリリースされました。

MovableType.org - MT 4.3: Faster Performance, Powerful Search, More Page Views

本リリースに日本語版は含まれていませんが、日本語化を行えば、一部の管理画面が英語表記されるのみで利用可能です。

１．ページ分割機能

メインページやアーカイブページ（ユーザー・カテゴリー）にページ分割機能が追加されました。

• MovableType.org - Pagination for Static Templates
• Movable Type 4.3 の新機能（スタティックページのページ分割）

また、コメントのページ分割機能も追加されました。この機能追加により、システムテンプレートに「コメント一覧」というテンプレートが追加されています。

• MovableType.org - Comment Pagination
• Movable Type 4.3 α版レポート

２．ブログ記事のアイテム管理

アイテム管理をブログ記事編集画面上で行えるようになりました。これにより、4.2 まで付与されていた、アイテムとブログ記事を関連付けるキー（form 要素）をブログ記事本文に挿入する必要がなくなりました。

• MovableType.org - Features of 4.3: Entry Asset Manager
• Movable Type 4.3 α版レポート

３．Summary Object Framework

性能向上の新しいフレームワークが導入されるようです。

（以下、適当な訳なので間違ってたらすいません）このフレームワークは、MTのコアコードベースとプラグインがデータベースに任意の概要情報を保持することを許可し、高価な計算クエリーを概要テーブルに対する主キーによるルックアップに入れ替えます。フレームワークは、概要オブジェクトに依存する情報が変更されたときに概要オブジェクトを無効にし、キューイングされたワーカークラスが無効となった概要を非同期に作り直すといった、フレキシブルなメカニズムを含んでいます。

４．ドキュメントの改良

英語版のみですが、ドキュメンテーションを書き直しています。

• MovableType.org - Documentation Update

５．コンテンツなしのブログ複製

ブログの複製機能で、ブログ記事・ウェブページ・コメント・トラックバック・カテゴリーの除外をすることができるようになりました。これにより、デザインだけを他のブログに流用することができます。

• MovableType.org - Features of 4.3: Smarter Blog Cloning
• Movable Type 4.3 の新機能（コンテンツなしのブログ複製）

６．アプリケーションのパフォーマンスと開発者向けツール

アプリケーション内でのブログ・エントリー・ユーザーの検索性能が向上しました。また、システム管理画面の「設定」→「全般」にパフォーマンスログとデバグモードの設定項目を追加しました。

• Movable Type 4.3 α版レポート

Movable Type 4.3b より、コンテンツなしのブログ複製機能が追加されました。これにより、あるブログのデザイン（テンプレート）だけを他のブログに利用することができるようになります。

と、このエントリーを書きためていたところ、下記の記事が出ました。

MovableType.org - Features of 4.3: Smarter Blog Cloning

１．使用方法

システム管理画面の「新規作成」→「ブログ」をクリックし、ブログ一覧画面から複製したいブログを選択して、さらにプルダウンメニューから「ブログの複製」を選択して「Go」をクリック。

Movable Type 4.3 では、「複製の設定」で除外する項目を選択できるようになっています。ここでは表示されているすべての項目を除外します。「ブログ記事/ウェブページ」をチェックすると、「コメント」「トラックバック」は自動的にチェックが入ります。

選択した除外項目を表示します。設定に問題がなければ右下の「複製」をクリック。

複製しました。

複製したブログには、ブログ記事やコメントは引き継がれていないことがわかります。

２．プラグイン

4.0～4.2 をご利用の方は、小川宏高さん作成の「BlogSkeletonCloner」を利用すれば、この機能とほぼ同じことが実現できます。

BlogSkeletonClonerプラグイン

Movable Type 4.3b より、スタティックページのページ分割機能が追加されました。

具体的には、メインページやカテゴリアーカイブページの1ページ目はスタティックパブリッシングで出力するとともに、下の画像のようにページナビゲーションを表示し、2ページ目以降については、mt-search.cgi を使って表示します。

以下、下記の記事を元に、メインページとカテゴリアーカイブページのページ分割の設定方法について紹介します。

MovableType.org - Pagination for Static Templates

Movable Type 4.3b は以下のリンクからダウンロードできます。

MovableType.org - Movable Type 4.3 Beta

以下の説明は、インストール時に言語から「日本語」を選択した状態で解説しています。英語版のまま使っている場合、画面の項目名は適宜読み直してください。

１．テンプレートモジュール「Search Pagination」の追加

ブログ記事の「デザイン」→「テンプレート」→「テンプレートモジュールを作成」をクリックして、「Search Pagination」という新しいテンプレートモジュールを作成します。テンプレートには以下の内容をペーストしてください。

<mt:If name="search_results">
<div class="content-nav">
    <mt:IfPreviousResults><a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; Previous</a>&nbsp;&nbsp;</mt:IfPreviousResults><mt:PagerBlock><mt:IfCurrentPage><$mt:Var name="__value__"$><mt:Else><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></mt:IfCurrentPage><mt:Unless name="__last__">&nbsp;</mt:Unless></mt:PagerBlock><mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">Next &gt;</a></mt:IfMoreResults>
</div>
<mt:Else>
    <mt:If name="main_index">
        <mt:BlogEntryCount setvar="total_entries">
    <mt:Else>
        <mt:ArchiveCount setvar="total_entries">
    </mt:If>
    <mt:If name="total_entries" gt="$entries_per_page">
        <mt:Ignore>Set the total number of entries to iterate through the pages</mt:Ignore>
        <mt:If name="total_entries" op="%" value="$entries_per_page" eq="0">
            <mt:Var name="total_entries" op="/" value="$entries_per_page" setvar="total_pages">
        <mt:Else>
            <mt:Var name="total_entries" op="%" value="$entries_per_page" setvar="remainder">
            <mt:Var name="total_entries" op="-" value="$remainder" setvar="total_pages">
            <mt:SetVar name="total_pages" op="/" value="$entries_per_page">
            <mt:SetVar name="total_pages" op="++">
        </mt:If>
 
        <div class="content-nav">
            <mt:For from="1" to="$total_pages" step="1">
            <mt:If name="__first__">
                <$mt:Var name="__index__"$>
            <mt:Else>
                <a href="<mt:Var name="search_link" strip_linefeeds="1" trim="1"><$mt:Var name="__index__"$>"><$mt:Var name="__index__"$></a>
            </mt:If> 
            </mt:For>
            <a href="<mt:Var name="search_link" strip_linefeeds="1" trim="1">2" rel="next">Next &raquo;</a>
        </div>
    </mt:If>
</mt:If>

２．テンプレートモジュール「Search Header Data」の追加

１項と同様の手順で「Search Header Data」という新しいテンプレートモジュールを作成します。テンプレートには以下の内容をペーストしてください。

<mt:Ignore>Use the entries_per_page variable to set the number of entries per page</mt:Ignore>
<mt:Var name="entries_per_page" value="10">
<mt:SetVarBlock name="search_link">
    <mt:If name="main_index">
        <mt:SetVarBlock name="index_string">&archive_type=Index</mt:SetVarBlock>
    </mt:If>
    <mt:If name="archive_template">
        <mt:SetVarBlock name="archive_string">&archive_type=<mt:ArchiveType></mt:SetVarBlock>
        <mt:If name="datebased_archive">
            <mt:SetVarBlock name="date_string">&year=<mt:ArchiveDate format='%Y'>&month=<mt:ArchiveDate format='%m'>&day=<mt:ArchiveDate format='%d'></mt:SetVarBlock>
        </mt:If>
        <mt:If name="category_archive">
            <mt:SetVarBlock name="category_string">&category=<mt:CategoryID></mt:SetVarBlock>
        </mt:If>
        <mt:If name="author_archive">
            <mt:SetVarBlock name="author_string">&author=<mt:AuthorID></mt:SetVarBlock>
        </mt:If>
    </mt:If>
    <mt:CGIPath><mt:SearchScript>?IncludeBlogs=<mt:BlogID>&template_id=<mt:Var name="template_id">&limit=<mt:Var name="entries_per_page"><mt:Var name="index_string"><mt:Var name="date_string"><mt:Var name="category_string"><mt:Var name="author_string"><mt:Var name="archive_string">&page=
</mt:SetVarBlock>

赤色の「10」が、1ページに表示する記事数になります。表示記事数を変更したい場合はこの値を書き換えてください。

３．メインページの修正

ブログ記事管理画面の「デザイン」→「テンプレート」→「Main Index（メインページ）」をクリックし、まず、

<$mt:Include module="HTML Head"$>

のすぐ下に、下記のサブテンプレートを追加します。

<mt:BuildTemplateID setvar="template_id">
<$mt:Include module="Search Header Data"$>

また、

<mt:Entries>
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>

を、次のサブテンプレートに書き換えてください。

<mt:Entries limit="$entries_per_page">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>
<$mt:Include module="Search Pagination"$>

注：元記事は「Search Pagination」が「Search Navigation」になってますが、テンプレートモジュール名と不一致なため、修正しています。

４．カテゴリーアーカイブの修正

変更内容はメインページと同じです。

ブログ記事管理画面の「デザイン」→「テンプレート」→「Category Entry Listing（カテゴリ別ブログ記事リスト）」をクリックし、まず、

<$mt:Include module="HTML Head"$>

のすぐ下に、下記のサブテンプレートを追加します。

<mt:BuildTemplateID setvar="template_id">
<$mt:Include module="Search Header Data"$>

また、

<mt:Ignore><!-- Limit number of entries to the number set in Blog Entry Settings --></mt:Ignore>
<mt:Unless name="datebased_archive"><$mt:Var name="limit" value="auto"$></mt:Unless>
<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>

を、次のサブテンプレートに書き換えてください。

<mt:Entries limit="$entries_per_page">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>
<$mt:Include module="Search Navigation"$>

５．表示件数について

分割したページも含めた件数の設定は、これまで同様、ブログ記事管理画面の「設定」→「ブログ記事」の「ブログ記事の表示数」で行ないます。

ブログ記事のない親カテゴリーに子カテゴリーを表示する方法です。

下の画像は、ブログ記事が1件も投稿されていない「日記」カテゴリーのアーカイブページの状態です。ブログ記事は何も表示されておらず、メインページとアーカイブのリンクのみが表示されています。

カテゴリーアーカイブ一覧は次のようになっています。

この「日記」カテゴリーには子カテゴリーとして「お知らせ」「イベント」があり、テンプレートをカスタマイズすることで、次のように子カテゴリーのブログ記事を表示できるようになります。

カテゴリーアーカイブ一覧も次のようにリンクを表示し、親カテゴリー名の横に、子カテゴリーのブログ記事数を表示します。

これを初めてご覧になった方は特段たいした機能ではないように思われますが、Movable Type ではこれまで、この「ブログ記事のない親カテゴリーに子カテゴリーのブログ記事を表示する」という機能がありませんでした（厳密には一時期ありました）。

以下、これまでの経緯とカスタマイズについて紹介します。

１．概要とこれまでのバージョンでの動作

親カテゴリーのアーカイブページに子カテゴリーのブログ記事を表示するには、MTEntries タグの代わりに MTEntriesWithSubCategories タグを利用します。

しかし、Movable Type 3 の時代には、ブログ記事のない親カテゴリーのアーカイブページに MTEntriesWithSubCategories タグを利用しても子カテゴリーを表示することができず、「エントリーのない親カテゴリーに子カテゴリーを表示する」という記事を書きました。記事は、親カテゴリーにダミーのブログ記事を作り、その記事は MTIfCategory タグで表示しないようにカスタマイズするといった内容です。

その後、バージョン 4.1 で、ブログ記事のない親カテゴリーのアーカイブページに子カテゴリーを表示することができるようになりました（関連記事：MTEntriesWithSubCategories タグの不具合などについて）。

しかし、バージョン 4.2 になってから再び表示することができなくなったのですが、4.25 から動作するようになりました。確認したところ、4.2 以降では、MTEntriesWithSubCategories タグの有無にかかわらず、ブログ記事のない親カテゴリーについては、冒頭の画像のように空のアーカイブページが生成されます。

ということで、Movable Type 4.25 以降では、MTEntriesWithSubCategories タグを利用することで、ブログ記事のない親カテゴリーのアーカイブページでも、自然体で子カテゴリーのブログ記事を表示できるようになりました。

２．ブログ記事リストの変更

デフォルトテンプレートの場合、ブログ管理画面の「デザイン」→「テンプレート」→「カテゴリ別ブログ記事リスト」をクリックし、テンプレートにある MTEntries タグを MTEntriesWithSubCategories タグに書き換えます。

変更前

...前略...
<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
...後略...

変更後

...前略...
<mt:EntriesWithSubCategories limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="ブログ記事の概要"$>
</mt:EntriesWithSubCategories>
...後略...

当ブログの配布テンプレートをご利用の場合は、ブログ管理画面の「デザイン」→「テンプレート」→「ブログ記事リスト」をクリックし、テンプレートにある MTEntries タグを MTEntriesWithSubCategories タグに書き換えます。

変更前

...前略...
<mt:if name="datebased_archive">
   <mt:entries>
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
<mt:else>
   <mt:entries limit="auto">
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
</mt:if>
...後略...

変更後

...前略...
<mt:if name="datebased_archive">
   <mt:entries>
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
<mt:else>
   <mt:entriesWithSubCategories limit="auto">
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entriesWithSubCategories>
</mt:if>
...後略...

３．カテゴリアーカイブウィジェットの変更

２項の変更だけではカテゴリーリストに親カテゴリアーカイブページへのリンクが表示されません。理由は、デフォルトのサブテンプレートは MTCategoryCount タグを判定し、処理中のカテゴリーにブログ記事がない場合はリンクを表示しない制御を行なっているためです。

ここでは、制御タグを利用して、子カテゴリーのブログ記事がある場合はリンクを表示するようにします。また、カテゴリ名の横に子カテゴリのブログ記事も含めたブログ記事数を表示する変更も行います。

デフォルトテンプレートの場合、ブログ記事の「デザイン」→「ウィジェット」→「カテゴリアーカイブ」をクリックし、テンプレートの内容を次のように変更します（青色部分は追加、赤色部分は変更）。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:EntriesWithSubCategories>
            <mt:EntriesFooter>
                <mt:GetVar name="__counter__" setvar="entry_count" />
            </mt:EntriesFooter>
        </mt:EntriesWithSubCategories>
        <mt:If name="entry_count">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<mt:If tag="CategoryCount"><$mt:CategoryCount$><mt:Else><mt:GetVar name="entry_count" /></mt:If>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:IfArchiveTypeEnabled>

当ブログの配布テンプレートをご利用の場合は、ブログ記事の「デザイン」→「ウィジェット」→「カテゴリアーカイブ」をクリックし、テンプレートの内容を次のように変更します（青色部分は追加、赤色部分は変更）。

<mt:ifArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side" id="categories">
<mt:topLevelCategories>
  <mt:subCatIsFirst>
  <ul>
  </mt:subCatIsFirst>
    <mt:entriesWithSubCategories>
      <mt:entriesFooter>
        <mt:getVar name="__counter__" setvar="entry_count" />
      </mt:entriesFooter>
    </mt:entriesWithSubCategories>
    <mt:if name="entry_count">
    <li><a href="<mt:categoryArchiveLink />" title="<mt:categoryDescription />"><mt:categoryLabel /></a> [<mt:if tag="CategoryCount"><mt:categoryCount /><mt:else><mt:getVar name="entry_count" /></mt:If>]
    <mt:else>
    <li><mt:categoryLabel />
  </mt:if>
    <mt:subCatsRecurse />
    </li>
    <mt:subCatIsLast>
  </ul>
    </mt:subCatIsLast>
  </mt:topLevelCategories>
</dd>
</mt:ifArchiveTypeEnabled>

４．子カテゴリーのブログ記事投稿時に親カテゴリーアーカイブを再構築する

バージョン 4.261 で確認したところ、子カテゴリーのブログ記事投稿時に親カテゴリーアーカイブは再構築されません。したがって、下記のプラグインを併用されることをおすすめします。

Junnama Online (Mirror) - サブカテゴリーのエントリー投稿時に親カテゴリーアーカイブを再構築するプラグイン

Movable Type を使ってアンカーやアフィリエイトリンクなどを付けたブログ記事を書いたときに、リンクに含まれる&を&に自動的に変換する方法を紹介します。

１．基本

(X)HTML では、テキストやURLに含まれる & は & と、実体参照で記述する必要があります。

例１：テキスト

【誤】
ドラッグ&ドロップ

【正】
ドラッグ&ドロップ

例２：URL（Google の「Movable Type」の検索結果のリンク）

【誤】
<a href="http://www.google.co.jp/search?hl=ja&q=movable+type&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=">「Movable Type」の検索結果</a>

【正】
<a href="http://www.google.co.jp/search?hl=ja&amp;q=movable+type&amp;btnG=Google+%E6%A4%9C%E7%B4%A2&amp;lr=&amp;aq=f&amp;oq=">「Movable Type」の検索結果</a>

２．Movable Type のブログ記事内にある & を &amp; に変換する

各テンプレートにある MTEntryBody タグに、次の regex_replace タグ（青色部分）を追加すれば、ブログ記事内にある & をすべて &amp; に自動変換して、ページを出力します。

<$mt:EntryBody regex_replace="/&/g","&amp;"$>

次のようにしておけば、元からある &amp; は変換対象になりません。

<$mt:EntryBody regex_replace="/&(?!amp;)/g","&amp;"$>

ただし、他の実体参照（&lt;など）がブログ記事に含まれている場合もすべて変換対象になってしまうので、プライベートタグを使って記事ごとに振り分けるのも手かもしれません（というか、もっとエレガントな正規表現があるかもしれません）。

<mt:EntryIfTagged tag="@ref">
  <$mt:EntryBody regex_replace="/&/g","&amp;"$>
<mt:Else>
  <$mt:EntryBody$>
</mt:If>

実体参照したいブログ記事のタグに「@ref」を付与しておきます。

また、自動ではありませんが、下記のプラグインで実体参照化する方法もあります。

エムロジック放課後プロジェクト - EntryRefButton アーカイブ

３．参考サイト

以下です。ありがとうございました。

Wikibooks - Perl/正規表現

少し前に発売された WordPress 本の紹介です。

WordPress 2.7対応「導入&カスタマイズ」実践ガイド―個人ブログも企業サイトも簡単&無料で構築できる! 吉村 正春 秀和システム 2009-02 売り上げランキング : 2401 Amazonで詳しく見る by G-Tools

Amazon をチェックしていると、WordPress では現在この本が一番人気があるようです。導入から基本的な操作はもちろんですが、プラグインに多くのページを割いているのがこの本の特徴です。

400余りのページに、WordPress のノウハウが凝縮されています。

第1章 WordPressの基礎知識とインストール

1-1 WordPressについて

1-1-1 世界でもトップシェアを誇るブログソフトウェア「WordPress」

1-1-2 効率的にWordPressを習得するなら「テーマ」を活用しよう

1-1-3 WordPressの5つの特徴

1-2 レンタルサーバーを借りよう

1-2-1 レンタルサーバーの選び方

1-2-2 ドメインの取得Column ドメインを取得しないでオリジナルサイトを持つ

1-3 ロリポップにWordPressを設置する

1-3-1 ムームードメインでドメインを取得する

1-3-2 ロリポップでレンタルサーバーを借りる

1-3-3 MySQLの設定

1-3-4 WordPressのダウンロード

1-3-5 「wp-config.php」の編集

1-3-6 WordPressのアップロード

1-3-7 WordPressのインストール

1-4 XREA+にWordPressを設置する

1-4-1 VALUE-DOMAINのユーザー登録

1-4-2 ドメインの取得

1-4-3 VALUE-DOMAINの設定

1-4-4 XREA+の設定

1-4-5 MySQLの設定

1-4-6 WordPressのダウンロードと「wp-config.php」の編集

1-4-7 WordPressのアップロード

1-4-8 WordPressのインストール

第2章 WordPressの設定を極める

2-1 WordPress 2.7で進化したユーザーインタフェース

2-1-1 ドラッグ＆ドロップ

2-1-2 アコーディオンメニュー

2-1-3 サイドメニューのアイコン化

2-1-4 表示オプション

2-2 ダッシュボードの使い方をマスターしよう

2-2-1 ダッシュボードへのログイン

2-2-2 ダッシュボードの見方（左サイドメニュー）

2-2-3 ダッシュボードの見方（中央カラム・右カラム）

2-3 「ユーザー」の設定を極める

2-3-1 ユーザー（ユーザー→投稿者とユーザー）

2-3-2 新規ユーザー（ユーザー→新規追加）

2-3-3 プロフィール（ユーザー→あなたのプロフィール）

2-4 「ツール」の設定を極める

2-4-1 ツール（ツール→ツール）

2-4-2 「ターボ」の使い方

2-4-3 「WordPressに投稿」（Press This）の使い方

2-4-4 インポート（ツール→インポート）

2-4-5 エクスポート（ツール→エクスポート）

2-4-6 アップグレード

2-5 「設定」の設定を極める

2-5-1 一般設定（設定→一般）

2-5-2 投稿設定（設定→投稿設定）

2-5-3 表示設定（設定→表示設定）

2-5-4 ディスカッション設定（設定→ディスカッション）

2-5-5 メディア設定（設定→メディア）

2-5-6 プライバシー設定（設定→プライバシー）

2-5-7 パーマリンク設定（設定→パーマリンク設定）

2-5-8 その他の設定

第3章 記事を投稿してみよう

3-1 記事を投稿しよう

3-1-1 新規「投稿」ページの開き方・見方

3-1-2 記事タイトルと投稿スラッグ

3-1-3 投稿編集エリア

3-2 ビジュアルエディタの使い方

3-2-1 ビジュアルエディタの基本的な使い方

3-2-2 文字装飾

3-2-3 リスト・引用

3-2-4 配置

3-2-5 リンクの挿入・解除

3-2-6 の挿入

3-2-7 スペルチェック

3-2-8 フルスクリーン

3-2-9 フォーマット

3-2-10 下線

3-2-11 均等割付（両端揃え）

3-2-12 文字色

3-2-13 テキストとして貼り付け

3-2-14 Wordから貼り付け

3-2-15 フォーマット解除

3-2-16 埋め込みメディアの挿入・編集

3-2-17 特殊文字

3-2-18 インデント/インデント解除

3-2-19 取り消し/やり直し

3-3 htmlエディタの使い方

3-3-1 htmlエディタの使い方

3-4 画像を挿入する

3-4-1 画像挿入の基本

3-4-2 自分のPC内にある画像を挿入する

3-4-3 ネット上の画像を挿入する

3-4-4 既にアップロードした画像を再挿入する

3-4-5 画像の再設定

3-5 記事の抜粋

3-5-1 記事の抜粋

3-6 タグとカテゴリーの追加

3-6-1 タグの追加

3-6-2 よく使うタグから選択

3-6-3 カテゴリーの追加

3-7 トラックバック

3-7-1 トラックバック送信

3-8 コメントとトラックバック・ピンバックの受付設定

3-8-1 コメントとトラックバック・ピンバック

3-9 カスタムフィールド

3-9-1 カスタムフィールドの基本的な使い方

3-10 保存・公開

3-10-1 保存・公開

3-10-2 レビュー待ちの解除

3-11 投稿リビジョン

3-11-1 投稿リビジョン

3-11-2 記事同士の比較

3-12 クイック投稿 144

3-12-1 クイック投稿

3-12-2 クイック投稿をTwitter的に使う

3-13 投稿・タグ・カテゴリーを一括管理する

3-13-1 クイック編集の使い方

3-13-2 投稿編集（投稿→編集）

3-13-3 タグ（投稿→タグ）

3-13-4 カテゴリーの管理

3-14 「ページ」を書いてみよう 151

3-14-1 新規「ページ」投稿ページの見方

3-14-2 「ページ」の編集

3-15 コメント、メディア、リンク

3-15-1 コメント編集（コメント）

3-15-2 メディアライブラリ（メディア→ライブラリ）

3-15-3 リンクの編集（リンク→編集）

3-15-4 リンクカテゴリーの追加（リンク→リンクカテゴリー）

3-15-5 新規リンクの追加（リンク→新規追加）

第4章 プラグインとJavaScriptでWordPressをパワーアップ

4-1 プラグインを探してみよう

4-1-1 プラグインの探し方

4-1-2 「WordPress.org Plugins Directory 専用検索エンジン」を使う

4-1-3 Google翻訳で探していく

4-1-4 日本語のプラグイン紹介サイト

4-2 プラグイン管理

4-2-1 プラグイン管理（プラグイン→インストール済み）

4-2-2 プラグインの有効化・無効化

4-2-3 プラグインの自動アップグレード

4-2-4 「Akismet」と「WP Multibyte Patch」を有効化する

4-2-5 Akismetの設定

4-2-6 Akismetの使い方

4-3 プラグインのインストール

4-3-1 プラグインのインストール（プラグイン→新規追加）

4-3-2 プラグインの全自動インストール

4-3-3 プラグインの半自動インストール

4-3-4 プラグインの手動インストール

4-4 プラグインのトラブルシューティング

4-4-1 プラグインが動かない3つの理由

4-4-2 WordPressのバージョンがプラグインの動作条件を満たしていない

4-4-3 サーバー環境がプラグインの動作条件を満たしていない

4-4-4 プラグイン同士がバッティングしている

4-4-5 プラグインが動かないときの対処法

4-5 プラグインの日本語化

4-5-1 プラグインの多言語化、日本語化

4-5-2 日本語ファイルがあるのに日本語化されない？

4-6 JavaScriptを知っておこう

4-6-1 JavaScriptとは何か？

4-6-2 画像の拡大表示

4-6-3 スライドショー

4-6-4 タブによるナビゲーション

4-6-5 ソート（並び替え）可能な表

4-6-6 ページ内リンクをスクロール移動

4-6-7 横スクロールでページ遷移

4-6-8 クロスブラウザー対応

4-6-9 画像を徐々に読み込む

4-6-10 JavaScriptを使うメリット・デメリット

4-7 WordPressでJavaScriptを使う

4-7-1 Table SorterをWordPressに組み込む

4-8 WordPressでjQueryを使う

4-8-1 jQueryとは？

4-8-2 WordPressでjQuery（＋プラグイン）を使う

第5章 プラグイン紹介

5-1 ダッシュボード強化

5-1-1 pageMash > pageManagement（ドラッグ＆ドロップで「ページ」並び替え）

5-1-2 WP-AddQuicktag（定型文の挿入ボタン）

5-1-3 My Category Order（カテゴリーの順番をドラッグ＆ドロップで変更）

5-1-4 Custom Query String Reloaded（各ページの表示件数や並び順のルールを変更）

5-1-5 Simple Tags（サイト内導線確保もできる高機能タグ管理プラグイン）

5-1-6 headspace2（高機能なSEO対応プラグイン）

5-1-7 Custom Field Template（カスタムフィールドにテンプレート機能を加える）

5-1-8 WPlite（ダッシュボード項目の表示・非表示設定）

5-1-9 brBrbr（記事中の改行をそのまま反映）

5-1-10 WP Character Count（投稿欄の文字数を表示）

5-1-11 Revision Control（リビジョン機能の設定）

5-2 サイトコンテンツ強化 232

5-2-1 Advanced Random Posts（記事タイトルをランダム表示）

5-2-2 Similar Posts（関連記事を表示）

5-2-3 Popularity contest（人気の記事を表示）

5-2-4 WP-PostViews（記事の参照数ランキングを表示）

5-2-5 Get Recent Comments（直近のコメントを表示）

5-2-6 Contact Form 7（問い合わせフォームを簡単設置）

5-2-7 Global Translator（サイト自動翻訳）

5-3 ナビゲーション強化

5-3-1 WP Page Numbers（ページナビゲーション）

5-3-2 Paginator（スタイリッシュなページナビゲーション）

5-3-3 Yoast Breadcrumbs（パンくずリスト）

5-3-4 Dagon Design Sitemap Generator（サイトマップ生成）

5-3-5 Simple Yearly Archive（年別アーカイブ）

5-3-6 Smooth Scroll Links（ページ内リンクをスムーススクロール）

5-3-7 Tabbed Widgets（ウィジェットをタブ・アコーディオン表示）

5-3-8 Fun with Sidebar Tabs（ウィジェットをタブ表示）

5-3-9 Automatic SEO Links（指定キーワードへの自動リンク）

5-3-10 WP-Footnotes（本文中に脚注を入れる）

5-4 ビジュアル強化

5-4-1 Lightbox 2（お手軽Lightbox）

5-4-2 WP-Cumulus（タグクラウドを3D表示）

5-4-3 wp-tegaki（テキストを好きなフォントに変換）

5-4-4 WP-Note（ショートコードで簡単付箋紙）

5-4-5 Page Peel（ページがチラッとめくれる効果）

5-5 外部サービス連携

5-5-1 Wikipedia Autolink（Wikipediaへのリンクを簡単設定）

5-5-2 wp-hatena拡張版（ソーシャルブックマーク登録ボタン）

5-5-3 SBM Popular Entry（被ブックマーク数表示＋ランキング生成）

5-5-4 mmyYouTubeHQ（YouTubeの高画質動画を投稿に埋め込む）

5-5-5 WordPress Flickr Manager（Flickrの画像を記事に挿入する）

5-5-6 Flickr RSS（Flickrに登録した直近の画像を表示）

5-5-7 Picasa Image Express（Picasaウェブアルバムの画像をサイトに表示）

5-5-8 Google Maps Anywhere（ストリートビューにも対応したGoogleマップ用プラグイン）

5-5-9 Twitter Tools（Twitterと連携する）

5-5-10 Ultimate Google Analytics（Google Analyticsのトラッキングコードを簡単登録）

5-5-11 Google XML Sitemaps（Googleサイトマップ作成）

5-5-12 FeedBurner FeedSmith（FeedBurnerとの連携性を高める）

5-6 セキュリティ対策

5-6-1 WP Security Scan（サーバー環境のセキュリティチェック）

5-6-2 Secure WordPress（WordPressのセキュリティ向上）

5-6-3 WP-Ban（IPやホスト名でアクセス拒否）

5-6-4 Login LockDown（一定回数以上のログイン失敗をチェックする）

5-6-5 Theme Authenticity Checker（テーマのセキュリティチェック）

5-6-6 Email Spam Protection（メールアドレスをエンティティ化）

5-6-7 Nonce! Please（スパム軽減プラグイン）

5-7 その他

5-7-1 Custom Permalinks（パーマリンクを自由にカスタマイズ）

5-7-2 Broken Link Checker（リンク切れをチェック＆修正）

5-7-3 Redirection（リンクの転送設定）

5-7-4 WP-DB-Backup（データのバックアップ）

5-7-5 WP Super Cache（ページをキャッシュして表示時間を短縮）

5-7-6 Search Everything（サイト内全てを検索対象にする）

5-7-7 Ktai Style（ケータイサイト構築）

5-7-8 WPtouch iPhone Theme（iPod touch・iPhone閲覧用にページを最適化）

5-7-9 WP-Print（印刷用ページ生成）

第6章 デザインを変更してみよう

6-1 テーマを変更してみよう

6-1-1 テーマ変更の手順

6-1-2 テーマを変更してみよう

6-2 テーマを入手しよう

6-2-1 テーマを探す

6-2-2 テーマに付けられたタグの意味

6-2-3 テーマをダウンロードして使う

6-3 テーマを編集しよう

6-3-1 テーマを直接編集する

6-3-2 テーマをテキストエディタで効率的に編集する（Firefox）

6-3-3 テーマをテキストエディタで効率的に編集する（Internet Explorer）

6-4 実際に動いているサイトのテーマを差し替えるテクニック

6-4-1 Theme Testerを使う

6-4-2 Theme Test Driveを使う

6-4-3 Maintenance Modeを使う

6-5 ウィジェットを使いこなそう

6-5-1 ウィジェットとは

6-5-2 ウィジェット管理ページの見方

6-5-3 ウィジェットを使ってみよう

6-5-4 デフォルトのウィジェット紹介

6-5-5 代替ウィジェットでパワーアップ

6-5-6 サイドバーにブログパーツを追加してみよう

6-6 wp.Vicuna Ext（完成度の高いデザインがすぐ使えるテーマ）

6-6-1 wp.Vicuna Extのインストール

6-6-2 Vicuna Config

6-6-3 Layout

6-6-4 スキンの登録

6-6-5 Vicuna Adaptorのインストール

6-7 iNove（上下左右にウィジェットを配置できるテーマ）

6-7-1 日本語化の手順

6-7-2 設定ページ（外観aテーマの設定）

6-7-3 ウィジェットの設定

6-7-4 フォントの再設定

6-8 Snapshot（ギャラリーサイトやフォトログに最適なテーマ）

6-8-1 Snapshotのインストール

6-8-2 Snapshotの設定

6-8-3 フォトログとしてSnapshotを使う

6-8-4 ギャラリーサイトとしてSnapshotを使う

6-8-5 ウィジェットを使う

6-8-6 日本語化してみよう

6-8-7 さらにカスタマイズしてみよう

巻末付録

A-1 Movable TypeからWordPressに完璧に移行する

A-1-1 Movable TypeからWordPressへの移行を阻む壁

A-1-2 Movable TypeでWXR形式のエクポートデータを生成する

A-1-3 WordPressにインポートする

A-1-4 移行後にすべきこと

A-2 WordPressのインストール直後にやっておくべき16のこと

A-2-1 基本設定の変更

A-2-2 プラグインのインストール

A-2-3 基本コンテンツの作成

前のエントリーで紹介した WP-DBManager プラグイン ですが、PHP がセーフモードで動作するサーバで利用する際には、以下のような表示になってしまい、DBバックアップが行なえません。

正常に動作させるには追加の設定が必要です。

以下、XREA を例に設定方法を紹介します。WordPress 2.8.2 で動作を確認しています。

なお、ここで紹介する前提として、WordPress は PHP モジュール版のままインストール（=インストールディレクトリのパーミッションを 707 に変更）しています。また、バックアップフォルダ（wp-content/backup-db）は作成済の状態で、フォルダのパーミッションは755になっています。

１．.htaccess の設定

wp-admin 配下に、以下の内容を記述した .htaccess をアップロードします。

<files admin.php>
AddHandler application/x-httpd-phpcgi .php
</files>

これは、WP-DBManager を利用するときに起動する admin.php を、CGI として動作させるための設定です。

なお、AddHandler だけの行の追加（files ディレクティブなし）では、下記のように管理画面が崩れてしまうようです。

２．mysqldump・mysqlのパスの設定

管理画面の「データベース」→「DBオプション」をクリック。

画面上に「which: no mysql in ～」と表示されているのは無視してください（認識誤りでしたらご指摘ください）。

mysqldumpのパス・mysqlのパスに、それぞれ以下の内容を設定し、一番下の「Save Changes」をクリックします。すでに設定されているようであれば、この作業はスキップしてください。

• mysqldumpのパス:/usr/local/mysql/bin/mysqldump
• mysqlのパス:/usr/local/mysql/bin/mysql

次のように「DB オプションを更新しました。」が表示されればOKです。

ちなみに、１項の作業を行なわずに設定すると、mysqldumpとmysqlのパスが正しくても、次のように「DB オプションを更新できません。」と表示されます。

３．DB のバックアップ

管理画面の「データベース」→「DBバックアップ」をクリック。

次のような表示になっていればバックアップ実行可能ですので、バックアップを試してみてください。wp-content/backup-db のパーミッションも冒頭に記した通り、755 のままで保存されることを確認しています。

ちなみに、１項の作業を行なわずにDBバックアップ画面に移動すると、次のように「MYSQLパスは存在しません。DBオプション画面でMYSQLのパスを確認してください。わからない場合はサーバー管理者に問い合わせてください。」という警告が表示されます。この状態ではバックアップは行なえません。

WordPress のバックアップや復元を行なう WP-DBManager プラグインの使い方を紹介します。動作は WordPress 2.8.2 で確認しています。

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

lesterchan.net のサイトにアクセスします。

ページの少し下に、WP-DBManager があるので、

その右側にある「Download」をクリックして、プラグインアーカイブをダウンロードします（2009年7月現在のバージョンは2.50）。

２．プラグインのアップロード・インストール

アーカイブを展開し、wp-dbmanager フォルダを、wp-content/plugins ディレクトリにアップロードします。

そして、WordPress 管理画面の「プラグイン」より、「WP-DBManager」の「使用する」のリンクをクリックします。

設定後、次のように「Your backup folder MIGHT be visible to the public」が表示された場合があります。これは、バックアップディレクトリが外部からアクセスされる危険性があることの警告です。

警告を解消するには、さきほど展開した wp-dbmanager 配下にある、htaccess.txt を wp-content/backup-db 配下にアップロードし、ファイル名を .htaccess の変更してください。Windows のエクスプローラーでは、先頭にピリオドがつくファイル名に変更できないので、サーバにアップロードしてから変更するとよいでしょう。Windows で WordPress を利用している場合は、任意のエディタで開いて、別名で保存する際に .htaccess を指定しましょう。

ちなみに、.htaccess の内容は次の通りです。

<Files ~ ".*\..*">
order allow,deny
deny from all
</Files>

配置後、管理画面をリロードすれば警告は消えます。

３．プラグインの日本語化

WP-DBManager の管理画面を日本語対応にします。

「MMRT daily life - WP-DBManager 日本語版」のページより、「WP-DBManager[v2.20] 日本語版」をクリックして、アーカイブをダウンロードします。ここで提供されているのはプラグインではなく、言語ファイルのみです。

ダウンロードしたアーカイブを展開し、dbmanagerフォルダ配下にある wp-dbmanager.pot および wp-dbmanager-ja.mo を wp-content/plugins/wp-dbmanager にアップロードします。元の wp-dbmanager.pot は上書きされるので、残しておきたい場合は、アップロード前に別の名前にリネームしておくと良いでしょう。

４．バックアップを取得する

とりあえずバックアップを取得してみます。管理画面左下の「データベース」をクリックしてメニューを開き、「DBバックアップ」をクリックします。なお、実験したサイトでは、バックアップ取得のための情報が自動で設定されていました。

注：XREAなど、PHPをセーフモードで動作させている場合は「WP-DBManager プラグインを XREA （PHP セーフモード）で利用する際の注意事項」をご覧ください。

表示されている情報を確認し、一番下の「バックアップ」をクリック。

「～のDBバックアップに成功しました」が表示されればバックアップ完了です。バックアップは wp-content/backup-db ディレクトリ配下に、拡張子が .sql（圧縮している場合は .gz など）のファイルができあがります。

５．バックアップファイルの操作

取得したバックアップファイルは、管理画面左下の「データベース」→「ファイル操作」で開いた画面で扱え、ファイルのダウンロード・復元・削除・メールによる送信が行なえます。

６．オプション

管理画面左下の「データベース」→「DBオプション」で、バックアップファイルのパスやファイル数、自動バックアップのスケジューリング、自動最適化なども設定できます。

その他、テーブル別の復元／DB最適化／テーブル・データ削除／SQLクエリ操作が行なえます。

2009.07.23
３項の日本語化手順に誤りがありましたので修正しました。

Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。
特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。

動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。

１．基本：(X)HTML マークアップと CSS を表示する

確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。

これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、body 要素が選択状態になっていると思います。

注意したいのは、ここでの(X)HTMLやCSSは原本の表示そのままではなく、最適化された状態で表示されることです。最適化されているのは、(X)HTML の各属性の順番やCSSのプロパティの表示順序などです。

２．別のウィンドウで表示する

メニューバーの「ツール」→「Firebug」→「Firebugを新しいウィンドウで開く」を選択します。または Ctrl+F12 を押下します。

これで新しいウィンドウで Firebug が開きます。新しいウィンドウで Firebug を開いておけば、閲覧の邪魔にならず、またタブ切り替えにも連動してくれます。

３．ページの特定の部分の(X)HTMLマークアップやCSSを確認する

１項または2項で表示された(X)HTML のツリーを展開していけば、目的のマークアップにたどり着けますが、そのようなまどろっこしいことは行なわず、ページ上の確認したい部分にマウスをポイントし、右クリックして「要素を表示」を選択します。下の例は、カレンダーの17日の部分を右クリックしています。

これで、Firebug の画面左の(X)HTMLマークアップが該当位置まで自動的に展開され、ポイントした部分が反転された状態で開き、画面右には選択した箇所のマークアップに関連する CSS がすべて表示されます。

特に CSS はセレクタのカスケード（継承）や、プロパティの有効・無効がすべて表示されるので、CSS を設定したのに反映されてない場合の確認に非常に重宝します。下の図ではプロパティに消し線があるのは無効なプロパティです。

該当箇所を右クリックして「要素を表示」を選択する代わりに、Firebug 画面左上のアイコン（赤枠部分）をクリックしてから、該当箇所をクリックしても同じ効果があります。

また、左下の(X)HTMLマークアップの要素部分にマウスをポイントすれば、元ページの該当箇所が反転表示され、要素に与えられたレイアウト（magin、padding）が分かります。

ポイント前

ポイント後

水色が要素の内容、青い部分が margin、黄色の部分が padding です。

そして、Firebug の右側ウィンドウ上にある「レイアウト」をクリックすれば、選択した要素のレイアウトが表示されます。

さらに、「レイアウト」の三角をクリックして、「定規と罫線を表示」にチェックを入れた状態にして、

レイアウトの図をポイントすれば、元のページに定規と（ポイントした箇所に対応する）罫線が表示されます。

４．CSSを修正する

テンプレートのカスタマイズやレイアウトの不具合の質問を頂いたときに一番重宝するのはこの機能で、CSSをダイナミックに修正することができます。ここではサンプルとして、コメント欄の入力フィールドの長さを変更してみます。

選択している要素（ここではinput）のセレクタで、値を変更したいプロパティの、値の部分をクリックすれば、編集可能な状態になります。中止したい場合は、別の場所をクリックすれば編集状態が解除されます。

200px から 400px に変更すると、瞬時に現在の表示に反映されます。ページをリロードすれば、変更はすべてクリアされます。

既存のプロパティを変更するだけでなく、新しいプロパティの追加も可能です。プロパティを追加したいセレクタの辺りで右クリックして、「新しいプロパティ」を選択します。

入力状態になるので、プロパティ名を入力します。

プロパティ名の入力には補完機能があります。図は「ma」と入力した時点で「rgin」が補完され、「margin」と表示されたところです。

プロパティ名を入力後、Tab を押下すれば値の入力に移動します。プロパティ名と値の間の「:」の入力は必要ありません。値に適当な数値などを入力すれば、元のページに即時に反映されます。行末の「;」の入力も必要ありません。

無効にしたいプロパティがあれば、そのプロパティの辺りを右クリックして、「xxxを削除」か「xxxを無効」を選択します。

以上です。

ここでは省略しましたが、Firebug 左側の画面を使えば、(X)HTMLマークアップの修正（属性の追加や要素の編集・削除など）も行えます。

2009.07.23
１項の記述を一部修正しました。

久しぶりに鰻を食べたついでに、これまであまりよく知らなかった「土用の丑の日」について調べました。

１．「土用」について

土用（どよう）とは、暦における雑節の一つです。「雑節」とは、二十四節気（*1）以外の、季節の移り変わりの目安となる日の総称で、土用の他に「節分／彼岸／社日／八十八夜／入梅／半夏生／二百十日／二百二十日」があります。

土用の期間は、二十四節気を配置する方法（平気法・定気法）によって、次のように若干異なります。

• 平気法：立夏・立秋・立冬・立春の前18日
• 定気法：太陽黄経がそれぞれ27度、117度、207度、297度に達した日を「土用の入りの日」とし、立夏、立秋、立冬、立春の前日まで。

定気法では、土用の日数は19日になることもあります。よって「夏の土用」とは、

7月20日頃～立秋（8月7日頃）の前日まで

となります。

「土用」が立夏・立秋・立冬・立春の前になった由来は、陰陽五行説（*2）で、四季に対応する五行は、春が木、夏が火、秋が金、冬が水となり、余った土（土用）を各季節の最後の月にあてたことによります。

「土用」は本来「土旺用事（どおうようじ）」と書き、「土の気が旺（さかん）になった状態で、物事を処理する」ことを意味し、省略されて「土用」と呼ばれるようになったようです（*3）。

２．「土用の丑の日」について

生まれ年の干支に用いる「十二支（子／丑／寅／卯／辰／巳／午／未／申／酉／戌／亥）」は、日付にも適用され、12日に1度は「丑の日」になります。つまり、「土用の丑の日」とは、土用の期間中（18～19日間）に、日の干支で「丑」になる日を指します。

さらに土用の期間は、十二支で繰り返される日数（12日間）より6～7日長いため、「丑の日」が2回出現する場合もあります。1回目に出現した「丑の日」を「一の丑」、2回目に出現した「丑の日」を「二の丑」と呼びます。2回出現する場合、「土用の丑の日」は暗黙的に「一の丑」を指すようです。

３．「土用の丑の日」に鰻を食べる習慣について

夏の土用の丑の日には、暑い時期を乗り切る栄養をつけるために鰻を食べる習慣があります。

その習慣となったきっかけは、幕末の万能学者として有名な平賀源内が、近所の鰻屋から「夏場に鰻が売れないので何とかしたい」と相談され、源内は、「丑の日に『う』の字がつく物を食べると夏負けしない」という民間伝承からヒントを得て、

「本日丑の日」

と書いた張り紙を張り出すように勧めました。

そうしたところ、その店は大繁盛し、他の鰻屋もそれを真似るようになり、以後、土用の丑の日に鰻を食べる風習が定着したそうです。

４．まとめ

以下、個人的に「土用の丑の日」を調べて分かった新たな発見です。

• 「土用」は各季節にある
• 「土用」は1日ではなく結構長い
• 「土用の丑の日の鰻」は、「節分の恵方巻き」や「バレンタインデーのチョコレート」と同じ

５．参考サイト

以下です。ありがとうございました。

• Wikipedia - 陰陽五行思想
• Wikipedia - 土用
• Wikipedia - 土用の丑の日
• 土旺用事の意味を教えてください。 - Yahoo!知恵袋
• うつわ日和店主の京のできごと: 土旺用事
• 土用丑の日（ウナギの日？）

*1：「二十四節気（にじゅうしせっき）」とは、太陰太陽暦で季節を正しく示すために設けた暦上の点、「小寒／大寒／立春／雨水／啓蟄／春分／清明／穀雨／立夏／小満／芒種／夏至／小暑／大暑／立秋／処暑／白露／秋分／寒露／霜降／立冬／小雪／大雪／冬至」です。

*2：陰陽思想と五行思想が結び付いて生まれた思想で、木・火・土・金・水の五行に陰・陽を配することで様々な事象を説明する。

*3：辞典によっては異なる説もあります。

Twitter の返信で教えていただき、購入しました。

「勝負強い人間」になる52ヶ条―20年間勝ち続けた雀鬼がつかんだ、勝つための哲学 (知的生きかた文庫) 桜井 章一 三笠書房 2006-12 売り上げランキング : 4414 Amazonで詳しく見る by G-Tools

著書の桜井章一さんは「雀鬼（じゃんき）」の異名をとる、プロの雀士です。

読み始めたところなので、とりあえず目次だけ掲載しておきます。

プロローグ―私が20年間無敗だった理由

第1章 真に強くなるために、やらなければならないこと―むだな動作や思考は必要ない

瞬時につかみとる力

目に見えないものを耳で見ろ

"変化"に対して敏感になれるか?

「感じる力」を大切にする

イチローには「強い人間」の要素が詰まっている！

型にこだわる人は変化に弱い

よい流れに乗るために何より必要なこと

勝負の流れは常に形を変えてやってくる

「どうぞ勝ってください」と敵にすすめる心を持つ

人間は「ここが自分の限界」と思ったところで止まる！

不純物の入らない心が強さを生む

「修正力」のある人は負けない

ビギナーズラックはなぜ起こるか

「逆転する人」と「逆転できない人」との違い

強い相手と戦うとき　弱い相手と戦うとき

迷ったら、本来の場所に立ち戻れ

1億円の勝負に勝ってラーメンを食う

第2章 勝ち続ける人は"ここ"が違う―スランプ、プレッシャーを味方につけよ

不調のときこそ、自分の実力がわかる

肩の力を抜くと本当の力が出る

「今はダメでもなんとかしのげば...」と考えられる強さ

考えすぎてダメになる男

集中力を持続させるコツ

情報を捨てないと負けてしまう

「100%出しきる！」は、案外モロい！

プレッシャーに勝つには「80%」の気持ちを忘れないこと

最後には、粘り強い人間が勝つ

敵の運を気づかえる人が勝つ

「闘志のある人」と「能力のある人」、どちらが強い？

流れを見抜くためのトレーニング

苦労を忘れられる人が強くなる

「読み」と「計算」は違う

自分より強い相手に勝つ方法

イカサマを見抜くためにイカサマを知る

第3章 究極の「勝負強さ」をめざして―ホンモノの強さはこうして生まれる

自分の意志で瞬時に物事を決める習慣をつくる

私が60過ぎても格闘技で若者に勝てる理由

心に思ったことを即行動に移すのが強さ

常識にとらわれない本物の勝負師・ビートたけし

信念を曲げない人間は、弱い

人間、金を借りたらダメになる

ホンモノの強さを持つ男の共通点

プロよりもアマチュアの方が強いのはなぜ？

敵がいるから、強くなれる！

「イヤだな」という気持ちになったとき、どうするか

「自分で選んだもの」は死守しなければならない

自立した人は、他人に目を向ける余裕がある

自信なんか持たなくていい！

根性を否定すると弱くなる

「運がある人」と「ない人」の違い

お金をもとめるとなぜ弱くなるのか

花ばかり求めていては強くなれない！

長嶋茂雄は「花」ヒクソン・グレイシーは「実」のある男

「勝負強さ」への答えは身近なところにある

WADA-blog の管理人、和田 亜希子さんが「ネットで儲ける!ブログでアフィリエイト」の改訂版を出されました。

ネットで儲ける!ブログでアフィリエイト 改訂版 和田 亜希子 翔泳社 2009-07-16 売り上げランキング : 33201 Amazonで詳しく見る by G-Tools

タイトルの通り、ブログでアフィリエイトを行なうためのハウツー本で、初心者向けの内容になっています。

先輩アフィリエイターの「ワザあり！ブログ」大集合

オレンジスカイの興味津々

石川遼もやってる教材体験レビュー

なんちゃって節約生活

外付けハードディスク 使用体験レポート

chapter 1 アフィリエイトとブログのきほん

簡単＆無料！まずはブログ作りから！

アフィリエイトのしくみを理解しよう！

ASPに、自分のブログを登録しよう！

さっそく企業に提携申請しよう！

リンクを作成して商品やサービスを紹介しよう！

初心者に大人気！楽天アフィリエイトに挑戦！

本や音楽をレビュー！Amazonアソシエイト

COLUMN イベントに参加しよう！

chapter 2 はじめてのアフィリエイト

どんなブログで、どんなアフィリエイトをする？

サイドバーにバナーを貼り付けてみよう！

記事に関連する商品を見つけて紹介しよう！

購入・利用した商品のレビューを書こう！

読みたい！と思わせる文章作成のコツ

小さな工夫でグンと良くなる写真のコツ

COLUMN 「成果対象」のナゾに迫る

chapter 3 お気に入り発見！ECサイト大図鑑

身の周りのものは何でもアフィリエイト！

お取り寄せ「グルメ」でアフィリエイト

健康・美容関連でアフィリエイト！

本・映画・音楽でアフィリエイト！

マネー・金融でアフィリエイト！

旅行・ホテル＆チケット予約でアフィリエイト！

家電・PC＆インテリアでアフィリエイト！

COLUMN やってはいけない！NG集

chapter 4 目指せ売上アップ！集客と運営のコツ

訪問者の「数」と「質」で成果アップを目指そう！

検索エンジンから来る新規訪問者を増やそう！

オンラインレポートをバリバリ活用しよう！

COLUMN のんびり気長に＆楽しく続けよう

chapter 5 お客を逃さない！デザインのコツ

楽しく稼げるブログ・デザインのコツ

ブログに合ったテンプレートを選ぼう！

写真を挿入して記事に「味」をつけよう！

文章のデザインを工夫しよう！

カテゴリを設定しよう！

アフィリエイトで商品を紹介しよう！

サイドバーをカスタマイズして動きやすいブログにする！

Google Adsenseを使ってみよう！

COLUMN 動画レビューが面白い！

chapter 6 携帯アフィリエイトを攻略しよう！

急成長中の携帯アフィリエイトに挑戦！

携帯サイト作りのポイントは？

携帯アフィリエイトでガンガン稼ごう！

COLUMN 達人レベルを目指そう！

chapter 7 達人目指し本格ブログに挑戦！

テーマを絞り込んで本格派アフィリエイト！

アフィリエイトのサポートツールに挑戦！

独自ドメインの取得で本格派アフィリエイト！

ブログサービス一覧

ASP一覧

この本を紹介させて頂いている理由は、書籍内でブログ構築ツールとしてMovable Type が紹介されているのですが、関連サイトということで当ブログも一緒に紹介頂いてます。

ということで、この場をお借りしてお礼申し上げます。ありがとうございました！

偉大さを

インデックステンプレートを用いて、「最近のブログ記事」や「カテゴリーリスト」などのサイドバーのリスト類について、SSI（PHP）によるモジュール化を行なう方法を紹介します。

このエントリーは、Movable Type 3 の記事「Movable Type の PHP モジュール化の仕組みについて（その3：変更方法）」を Movable Type 4 向けに全面的に書き直したものです。Movable Type 4 では、サイドバーのリスト類がテンプレートからウィジェットに移動されているので、その辺りも考慮した内容にしています。

モジュール化のメリットについては、下記のエントリーを参照してください。

• Movable Type 4 の再構築負荷を軽減する8つのTips
• Movable Type の PHP モジュール化の仕組みについて（その1：概要）

なお、各ページは事前に PHP 化を行っていることを前提としています。PHP化の方法については下記の記事を参照願います。

• Movable Type 4の PHP化

１．ウィジェットテンプレートの変更

Movable Type 4 では、サイドバーのリスト類はウィジェットに登録されているので、まずウィジェットテンプレートを変更します。以下、「最近のブログ記事」の場合を例に説明します。

ブログ管理画面の「デザイン」→「ウィジェット」をクリック。

「最近のブログ記事」をクリック。

テンプレートの内容を全選択してコピーします。コピーした内容はメモ帳などにペーストしておいてください。

テンプレートの内容を次の内容に書き換えます。

<?php readfile("<$mt:BlogSitePath$>recent_entries.html"); ?>

青色の部分がモジュールとして呼び出すファイル名になります。ファイル名は何でもかまいませんが、ここでは recent_entries.html で作業を進めます。

書き換えた後の画面は次のようになります。

書き換えたら「保存」をクリックします。

２．モジュールの作成

次に、モジュールとなる方のテンプレートを作成します。

ブログ管理画面の「デザイン」→「テンプレート」をクリック。

インデックステンプレートの「新しいインデックス・テンプレートを作る」をクリック。

インデックステンプレート作成画面で下記の項目を設定します。

• テンプレートの名前：最近のブログ記事
• 出力ファイル名：recent_entries.html
• テンプレートの内容：１項の作業でウィジェットからコピーテンプレートの内容をペースト

「出力ファイル名」は、このテンプレートを再構築した時のファイル名となります。このファイル名は、１項で設定した青色部分、

<?php readfile("<$mt:BlogSitePath$>recent_entries.html"); ?>

と必ず一致するようにしてください。

各項目を設定した後の画面は次のようになります。

あとは「保存」をクリックして、「このテンプレートを再構築する」のリンクをクリックし、作成したテンプレートを再構築してください。

あとは、全体を再構築して、リストが正常に表示されることを確認してください。

３．「最近のブログ記事」以外のリストをモジュールで利用する場合

モジュール化したいリストについて、１～２項の手順を繰り返します。その際、出力するファイル名を次のように変更してください。

• 最近のコメント：recent_comments.html
• 最近のコメント：recent_trackbacks.html
• カテゴリーリスト：categories.html
• 月別アーカイブリスト：monthly.html

必ずこの名称にしないといけないわけではなく、１項で設定した青色部分のファイル名と、２項で設定した出力ファイル名が一致していればOKです。

また、リスト類以外の検索フォームなど、テンプレートタグを使っているものについても、モジュール化しておけば再構築の負荷を減らすことができます。

４．システムテンプレートでもモジュールを利用する場合

「コメントプレビュー」や「検索結果」などのシステムテンプレートから、作成したモジュールを呼び出すときは、「最近のブログ記事」の場合、１項のウィジェットの内容を次のように修正します。

<mt:If name="system_template">
<$mt:Include file="recent_entries.html"$>
<mt:Else>
<?php readfile("<$mt:BlogSitePath$>recent_entries.html"); ?>
</mt:If>

青色部分のファイル名が一致するようにしてください。

以上です。

Movable Type 4 で出力するページをPHP化する（=拡張子を .php にする）カスタマイズを紹介します。

Movable Type には何種類かのテンプレートがあり、PHP化の対象は「インデックステンプレート」と「アーカイブテンプレート」の2つです。

このエントリーは、Movable Type 3 の記事「Movable Type の PHP化（その1）」をMovable Type 4 向けに修正したものです。

１．インデックステンプレートの拡張子を変更する

デフォルトテンプレートの場合、インデックステンプレートでPHP化を行なうのは「メインページ」と「アーカイブインデックス」の2つです。ここではメインページをサンプルに説明します。

ブログ管理画面の「デザイン」→「テンプレート」をクリック。

「メインページ」をクリック。

「テンプレートの設定」をクリック。

「出力ファイル」を index.html から index.php に変更します。変更後は「保存」をクリックします。

アーカイブページもメインページと同様の手順で archives.html から archives.php に変更します。

２．アーカイブテンプレートの拡張子を変更する

ブログ管理画面の「設定」→「公開」をクリックします。

「アーカイブオプション」の「ファイルの拡張子」の内容を html から php に書き換え（ピリオドは不要）、下にある「変更を保存」をクリックします。

この設定を行なうことで、MovableType の全てのアーカイブページの拡張子は .php に変更されます。

※「カスタム」設定を行なっていない場合、以下の内容はスキップして３項の作業に進んでください。

なお、アーカイブテンプレートのパスを「カスタム」設定で拡張子に .html を設定している場合、本項の設定が反映されません。

「カスタム」以外を選択している場合（２項の設定で拡張子が自動的にphpに変更）

「カスタム」を選択して、拡張子を直接設定している場合

上記のように直接設定している場合は、パスに記述した拡張子 .html を %x に書き換えます。２項の設定により、%x は自動的に .php に読み替えられてページを出力します（このフィールドの %x が .php に書き変わるわけではありません）。

３．XML宣言の修正

※デフォルトテンプレートではこの作業は不要です。

ページの先頭に、

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

がある場合、拡張子を .php にして表示すると、ページが真っ白になるか

Parse error: parse error, unexpected T_STRING in [...] on line 1

というようなエラーが表示されます。これはXML宣言がPHPとして誤解釈されてしまうための事象です。

これを回避するには、ご利用のテンプレートに記述されている XML宣言を削除するか、

<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

とPHPが解釈可能なフォーマットに変更してください。どのテンプレートに書かれているか分からない場合は、管理画面の「デザイン」→「テンプレート」でテンプレート一覧画面を開いたときに右上にある検索フィールドで「xml version」で検索するとよいでしょう。

なお、XML 宣言を各ページで利用している場合、システムテンプレートで不具合が発生する可能性があります。不具合の内容や対処の詳細については下記の記事をご覧ください。

Movable Type 4 で PHP 化する時の注意事項

４．ファイル・ディレクトリのパーミッション変更

※本設定の要否や設定内容はサーバによって異なります。

PHPファイルが実行ファイルとして動作するように、再構築で生成されるディレクトリおよびファイルのパーミッションを変更する必要があります。パーミッションを変更するには Movable Type をインストールしたディレクトリにある mt-config.cgi をダウンロードし、任意のエディタで編集します。

「さくらのインターネット」の場合、mt-config.cgi の最後に、下記の3行を追加します。

HTMLUmask 0022
DirUmask 0022
HTMLPerms 0777

編集後、mt-config.cgi を元のディレクトリに上書きアップロードします。

なお、この設定項目は一意に決まるものではなく、レンタルサーバによって設定値が異なる可能性があります。あるいは、本項の変更自体が不要な場合もあります。

HTMLPerms は、perl の sysopen の第4パラメータ、つまり PHP ファイル作成時のファイルパーミッションを設定する環境変数です。

XXUmask は、Movable Type 内部から Linux の umask コマンドを実行する時の引数となります。HTMLUmask はファイル作成時のマスク、DirUmask はディレクトリ作成時のマスクです。umask の機能については下記を参照ください。

• ファイル新規作成時のパーミッションを変更するには
• ホームディレクトリのデフォルトパーミッションを変更するには

５．再構築とページ確認

全体を再構築します。再構築が完了したら PHP化されたページが正常に表示されることを確認してください。この時点では .html のページが残っているので、メインページであればURLの末尾に index.php を付与して、PHPのファイルに直接アクセスしてください。

６．ファイルのリダイレクト

※リダイレクトが不要な場合はこの作業をスキップしてください。

各アーカイブページについて、.htaccess を用いて旧ファイル（html）から新ファイル（php）へのリダイレクトを行います。リダイレクトを利用すれば、外部からリンクされてしまっている旧ファイルへのリンクを、新ファイルへ転送することができます。

設定の詳細は「.htaccess によるリダイレクト」を参照ください。

７．不要ファイルの削除

ブログディレクトリ（メインページがあるディレクトリ）およびその配下にある .html のファイルを削除します。Movable Type には拡張子の変更により .html のファイルを削除する機能はありませんので、FTPツールあるいは TeraTerm 等を利用し、ファイルを手動で削除します。

.html のファイルを削除する理由は次の通りです。

HTTPサーバの設定にもよりますが、一般的にURLが "/" で終わる場合、サーバは最初に、そのディレクトリの index.html を探すようになっています。当サイトの場合、

http://www.koikikukan.com/

をブラウザに指定して実行した場合、HTTPサーバは

http://www.koikikukan.com/index.html

を一番最初に検索します。index.html が存在しない場合は次候補の index.htm や index.php 等を検索する、という仕組みになっています。
したがって、拡張子を変更しただけでは新しく作った index.php にアクセスされない可能性があります。「可能性がある」と書いたのは、URLに index.php まで指定すれば当然アクセスできるからです。

archives.html については、実際にはURLに archives.php まで設定するためアクセス上は問題ありませんが、削除することを推奨します。*1

参考までに、この「ファイルを検索する」という設定は Apache HTTP サーバの「DirectoryIndex ディレクティブ」で行います。

DirectoryIndex ディレクティブ

このディレクティブに記述されたファイルがひとつもみつからない場合はそのディレクトリのファイルリストが表示される、という仕組みになっています。

アーカイブページの .html ファイルの削除については、「アーカイブの設定」の有無によって、アーカイブディレクトリの位置が異なります。

７．１ 「アーカイブをサイトパスとは別のパスで公開する」を行っている場合

ブログ管理画面の「設定」→「公開」にある「アーカイブをサイトパスとは別のパスで公開する」をチェックしていれば、アーカイブディレクトリを丸ごと削除しても構いません（ただしPHPファイルも消えてしまうので、すぐに再構築してください）。

ただし画像ファイルなどをこのでぃれっクトリにアップロードしている場合はこの作業を行なわず、手作業で .html ファイルを削除してください。

７．２ 「アーカイブをサイトパスとは別のパスで公開する」を行っていない場合

「アーカイブをサイトパスとは別のパスで公開する」をチェックしていない場合は、ブログ管理画面の「設定」→「公開」にある「サイトパス」配下にアーカイブ用のディレクトリ（下記）が作成されているので、そのディレクトリを丸ごと削除しても構いません（ただしPHPファイルも消えてしまうので、すぐに再構築してください）。

アーカイブごとにディレクトリ名は概ね次のようになります。なお、「アーカイブマッピング」の設定によってディレクトリ名は異なるので参考程度にしてください。

• 年別/月別/週別/日別アーカイブ：「年（「2009」等）」ディレクトリ
• カテゴリ（+日付含む）アーカイブ：「catX」ディレクトリ
• ユーザー（+日付含む）アーカイブ：「author」ディレクトリ

ディレクトリを丸ごと削除する場合、削除するディレクトリ配下に手動でアップロードしているようなファイルがないことを確認してから行なってください。

*1：旧ファイルを削除する理由は、もし削除しなければ同じ内容のファイルが2つ存在することになります。内部リンクから旧ファイルへのアクセスがなくても、外部からのリンク等が残っている場合、検索エンジンのクロール対象となり、ペナルティを受ける可能性があるためです。

Movable Type 4 の再構築負荷を軽減する方法をまとめました。Movable Type を運用していて、「再構築に時間がかかるな」と思い始めたときに参考になれば幸いです。

１．SSIによるモジュール化

サイドバーの「最近のブログ記事」「最近のコメント」「カテゴリーリスト」「月別アーカイブリスト」「タグクラウド」などは、メインページや各アーカイブページ・ブログ記事ページの各テンプレートから呼び出され、必要なページ分再構築を繰り返します。

例えば、あるブログに100のブログ記事が投稿されていると仮定すると、ブログ記事ページは100ページあり、ブログ記事ページの再構築を行なった場合、サイドバーの情報も（同じ内容を出力する場合でも）100回再構築を繰り返すことになります。テンプレートタグを使っているリスト類が多いほど、再構築の負荷が大きくなります。

サイドバーのリスト類の再構築の負荷を軽減するには「モジュール化」がよく行なわれる手法です。モジュール化とは、サイドバーのリスト類をSSI（サーバーサイドインクルード）で呼び出すことです。

具体的には、各リストをテンプレートモジュールやウィジェットではなく、インデックステンプレートとして登録し、メインページや各アーカイブページ・ブログ記事ページから、そのインデックステンプレートをSSIで読み込みます。当ブログではPHPによるSSIを行なっています（下図）。

こうすることで、リスト類はインデックステンプレートの再構築1回だけで済み、負荷が大きく軽減されます。

関連記事：
Movable Type の PHP モジュール化の仕組みについて（その3：変更方法）

なお、SSI の設定はMovable Type 4 のデフォルト機能で行なうことも可能です。

ブログ管理画面の「設定」→「公開」

テンプレートモジュール／ウィジェット編集画面の「テンプレートの設定」

ただし、リスト類はテンプレートモジュールまたはウィジェットのまま、最初に再構築したテンプレートと一緒に出力（その後は出力しない）するのですが、リスト類の表示内容は最初に再構築したテンプレートに依存する可能性があるため、期待しない内容が表示される可能性があります（参考：アーカイブページのリストの表示内容が異なる理由）。

そのため、単純に「どのページもメインページと同じ表示内容にしたい」という場合は、本項のモジュール化の方がよいでしょう。

２．CSIによるモジュール化

考え方や、リスト類をインデックステンプレートにする方法は１項と同じですが、Ajax によるCSI（クライアントサイドインクルード）を行なうことで再構築の負荷を軽減します。

この方法であれば、SSI のように、ページをPHPなどに変更する必要はありません。当ブログはこの方法でリスト類の再構築負荷の軽減を図っています。

関連記事：
Ajax によるモジュール化

３．モジュールキャッシングする

Movable Type 4 にはモジュールキャッシング機能があります。これは再構築時にテンプレートモジュールやウィジェットの内容をDBにキャッシュし、以降の再構築はキャッシュを利用することで再構築の負荷を軽減します。

ブログ管理画面の「設定」→「公開」

テンプレートモジュール／ウィジェット編集画面の「テンプレートの設定」

１項で解説したデフォルト機能のSSIと同様、期待しない内容が表示されるケースがありますが、モジュールキャッシングは設定により適正に表示させる方法があります。

関連記事：
The blog of H.Fujimoto - テンプレートモジュールのキャッシュとその効果
The blog of H.Fujimoto - 複雑なキャッシュとその効果

４．インデックステンプレートの再構築トリガを制限する

Movable Type のインデックステンプレートを再構築するトリガは、再構築画面からの再構築以外に、ブログ記事の投稿やコメント投稿・トラックバック受信があります。

例えば、インデックステンプレートに、Google サイトマップや全ブログ記事タイトルを表示するアーカイブインデックスなどの再構築に時間のかかるページに加え、１項のモジュール化したリスト類がある状態でブログ記事の投稿やコメント投稿を行なうと、ブログ記事やコメントとは関係のないインデックステンプレートすべてが再構築されてしまいます（内容に変化がなければファイルとしては出力されません）。

図にすると下のようなイメージになります。

つまり、インデックステンプレートによって再構築するイベントを決めておくことで、イベントと関係のないインデックステンプレートの再構築を避け、ブログ記事投稿やコメント投稿、トラックバック受信処理時の再構築負荷を軽減することができます。

当サイトでは、以前、コメント投稿から完了までに30秒ほどかかり、500エラーが多発していましたが、再構築イベントを絞り込んだところ、コメント投稿時間が10秒前後で完了するようになり、劇的に改善しました。

この対策を行なうには、RebuildIndexFilterプラグインを利用します。

関連記事：
RebuildIndexFilter プラグイン

５．バックグラウンドで再構築する

スタティックパブリッシングで、リアルタイムに再構築する必要がない場合、バックグラウンドパブリッシングをお勧めします。

ブログ管理画面の「デザイン」→「テンプレート」→「公開プロファイルを設定」

なお、バックグラウンドで再構築するにはスケジュールタスクの設定が必要です。

６．ページのアクセスがあったときに再構築する

動的生成のページに対して、最初にそのページへのアクセスがあった時に再構築（静的HTMLファイルを生成）を行います。

この対策を行なうには、RebuildAt1stView プラグインを利用します。詳細はプラグインのページをごらんください。

関連記事：
Junnama Online (Mirror) - RebuildAt1stView(Beta)
Junnama Online (Mirror) - Greg Packer's Publishingその後。

７．ダイナミックパブリッシングに移行する

再構築はスタティックパブリッシングで必要な作業であるため、ダイナミックパブリッシングに移行することで再構築の手間から開放されます。MT3ではディレクトリを手動で作成するなどの設定がやや面倒でしたが、MT4では管理画面の設定のみでダイナミックパブリッシングに移行できます。

ブログ管理画面の「デザイン」→「テンプレート」→「公開プロファイルを設定」

また、ダイナミックパブリッシングは、上記の公開プロファイルによる一律設定の他、テンプレート別に設定することも可能です。

ブログ管理画面の「デザイン」→「テンプレート」→「任意のインデックステンプレート／アーカイブテンプレート」→「テンプレートの設定」

さらに、「キャッシュ」や「条件付き取得」の設定も可能です。

ブログ管理画面の「設定」→「公開」（ダイナミックパブリッシングの設定を行なうと表示されます）

８．定期的に再構築する

記事の主旨からやや外れますが、バックグラウンドで定期的に再構築するには mt-rebuild プラグインを利用します。

関連記事：
mt-rebuild

プラグインの利用にはスケジュールタスクの設定が必要です。

現在配布中の Serene Bach テンプレートを修正しました。

主な修正内容は次の通りです。

• CSS変更（フォントサイズを大きくするなど）
• 各カラムレイアウトにフッタを追加。またリキッドレイアウトにもフッタを追加
• 右側にサイドバーを2列に並べる3カラムレイアウトを追加

ダウンロード

テンプレートは下記のページよりダウンロードしてください。

Serene Bach テンプレート

3カラムレイアウト（右サイドバー）の設定方法

右側にサイドバーを2列に並べる3カラムレイアウトは次のようなレイアウトです。

レイアウトを変更するには、body 要素の class 属性に次の内容を記述してください。

<body class="layout-three-column-right">

また、

<div id="links-left-box">
...中略...
</div><!-- /links-left-box -->

を

<div id="links-right-box">

の直前に移動してください。

Serene Bach の「最近のコメントリスト」の新着コメントの右側に「New!!」というテキストや画像を表示するプラグインを作成しました。下のスクリーンショットは当サイトの配布テンプレートに適用した完成イメージですが、他のテンプレートでも利用可能です。

動作の仕組みは、プラグインを用いて、最近のコメントリストの各コメントの右側にコメント投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。

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

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

下記の RecentCommentWithTime.zip をクリックして、プラグインのアーカイブをダウンロードしてください。

RecentCommentWithTime.zip

ダウンロードしたアーカイブを解凍し、中にある RecentCommentWithTime.pm を plugins ディレクトリ直下に、resource/ja/recentcommentwithtime.txt を、同じディレクトリの構成があると思いますので、recentcommentwithtime.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RecentCommentWithTime.pm が表示されていることを確認し、一番右のチェックボックスをチェックして、画面右下の「利用する」をクリックしてください。

２．テンプレートの修正

ベースHTMLテンプレートに対し、下記の新着表示用「最近のコメントリスト」の独自ブロック・独自タグとスクリプトを追加してください。

<!-- BEGIN recent_comment_with_time -->
<div class="sidetitle">Recent Comments</div>
<div class="side">{recent_comment_list_with_time}</div>
<!-- END recent_comment_with_time -->
 
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

当サイトで配布中の、他の新着表示プラグインをすでにご利用の場合は、スクリプト部分の

<script type="text/javascript">
　　　　　　：
　　　　　（略）
　　　　　　：
</script>

は設定しなくても大丈夫です。ただし、設定しているスクリプトは、追加した独自タグより後方にないるように配置してください。

３．スタイルシートの設定

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

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

プロパティは適宜変更して、お好みのデザインに仕上げてください。

４．表示期間を変更する

新着表示の表示期間を変更する場合、

// passage time
var pass = 24;

の赤色部分を変更します。数値の単位は「時間」で、デフォルトは24時間になっています。

５．表示内容を変更する

新着表示の内容を変更する場合、

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

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

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

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

以上です。不具合等ございましたらご連絡ください。

3年半ぶりの車ネタです。

ここ1年ほど、まったく自分の車に乗ることができず、久しぶりに乗ろうと思ったら案の定、バッテリーが完全にあがってしまいました。

JAFを呼んで充電してもらっても良かったのですが、バッテリーを購入してから数年以上経過していたので、潔く交換することにしました。ちなみに私の愛車は「VW TYPE1（ビートル）」です。

バッテリーは、以前ネットで探した「バスケス」というところで購入しています。外車のバッテリーは結構高いので、数年前に探していた当時はここが最安だったように記憶しています。

バスケスコーポレーション

午後3時までに注文すると、即日発送してくれるので、次の日には到着します。バッテリーは自分で交換します。このバッテリーには軍手がついてくるので、手が汚れず助かります。

バスケスはネット販売だけでなく、工場での取替えも行なっています。来店されるときは予約してください。

• 〒125-0031 東京都葛飾区西水元 5-6-8
• Tel：0120-86-8494（ハローバスケス）
• 営業時間 AM10:00～PM6:00（日､祝祭日､第2土曜定休）

大きな地図で見る

以下、備忘録です。

• バッテリーを外すときは、マイナスターミナル→プラスターミナルの順に外す（短絡防止）
• バッテリーをつけるときは、プラスターミナル→マイナスターミナルの順につける（短絡防止）

Movable Type 4.3（MTOS 4.3）と思われるリポジトリを TortoiseSVN でチェックアウトして、ローカルPCにインストールしてみました。

ということでややフライング気味ですが、Movable Type 4.261 との差分を、気がついた部分についてレポートします。

１．コメントのページ分割

ダウンロードしたバージョンではまだ動作しませんでしたが、コメントのページ分割が行なえるようです。

コメントのページ分割はテンプレートタグではなく、JavaScript で制御するようで、「コメント」テンプレートモジュールの赤枠の部分が該当します。

これに伴い、JavaScript（mt.js）にも大幅な追加が行なわれています。

２．画像挿入時のXHTML変更

ブログ記事・ウェブページの画像挿入時に付与される form 要素が外されました。

Movable Type 4.261 の画像挿入時

Movable Type 4.3 の画像挿入時

３．ブログ記事編集画面でのアイテム管理

ブログ記事編集画面の右下にアイテム管理の項目が追加されました。リンクをポイントすると図のようにサムネイルも表示されます。

４．システム管理画面変更

システム管理画面の「全般設定」が、ご覧のように変わりました。デバグモードの設定パフォーマンスロギングの設定、テストメール送信フィールドが追加されています。

５．ファイル差分

最後に、Movable Type 4.261 と Movable Type 4.3 の差分を掲載します（2009年7月10日時点：Revision 4001 なので、まだまだ変更になると思います）。

• default_templates/comments.mtml
• default_templates/entry.mtml
• default_templates/javascript.mtml
• extlib/SOAP/Transport/HTTP.pm
• lib/MT/App/Comments.pm
• lib/MT/App/CMS.pm
• lib/MT/App/Search.pm
• lib/MT/App/Wizard.pm
• lib/MT/Asset.pm
• lib/MT/CMS/Asset.pm
• lib/MT/CMS/Comment.pm
• lib/MT/CMS/Dashboard.pm
• lib/MT/CMS/Entry.pm
• lib/MT/CMS/Search.pm
• lib/MT/CMS/Template.pm
• lib/MT/CMS/Tools.pm
• lib/MT/Core.pm
• lib/MT/DefaultTemplates.pm
• lib/MT/Entry.pm
• lib/MT/ObjectDriver/DDL/Pg.pm
• lib/MT/ObjectDriver/Driver/DBI.pm
• lib/MT/ObjectDriverFactory.pm
• lib/MT/Template/ContextHandlers.pm
• lib/MT/Util/ReqTimer.pm
• lib/MT.pm
• mt-check.cgi
• mt-static/css/main.css
• mt-static/css/simple.css
• mt-static/css/structure.css
• mt-static/js/mt_core_compact.js
• mt-static/mt.js
• mt-static/mt_de.js
• mt-static/mt_es.js
• mt-static/mt_fr.js
• mt-static/mt_ja.js
• mt-static/mt_nl.js
• mt-static/themes-base/blog.css
• php/lib/mtdb_base.php
• php/lib/mtdb_mysql.php
• php/mt.php
• tmpl/cms/cfg_system_general.tmpl
• tmpl/cms/dialog/asset_insert.tmpl
• tmpl/cms/dialog/asset_list.tmpl
• tmpl/cms/dialog/asset_replace.tmpl
• tmpl/cms/include/asset_upload.tmpl

巷の MT ファンは Movable Type 5 で盛り上がってますが、以下の記事によると、Movable Type 4.3 が 7月29日にリリースされます。α版は明日公開されるようです。

MovableType.org - Looking ahead to MT5

Movable Type 4.3 では、さまざまなバグフィックス、パフォーマンスおよびスケーラビリティに関する改修が行なわれるようです。

Movable Type 5 の発表、おめでとうございます。

当サイトでも以下のエントリーでこっそりアナウンスしてましたが、分かりにく過ぎましたね（画像をクリックすれば答えが出ますが、クリックする前にみつけてください）。

ということで、関連記事でした（笑）。

本日、Movable Type のメジャーバージョンアップであるMovable Type 5（MT5）が発表されました。

ウェブサイト管理の新標準、「Movable Type 5 」を発表しました

2009年7月8日、Movable Type のメジャーバージョンアップであるMovable Type 5 が発表されました。 Movable Type 5 のベータ版は8月上旬、正式出荷は10月を予定しています。 本日よりMovable Type 5 の発表に伴い新しい価格体系に変更されると同時に、Movable Type 5 発表記念キャンペーンを実施します。 Movable Type 5 はユーザー数無制限のライセンスが設定されるなど、大変お得でご利用いただきやすい製品体系となっております。お得なキャンペーン価格は10月（予定）の正式出荷までの特別価格となりますので、是非この機会をご検討ください。

１．Movable Type 5の主な新機能

Movable Type 5の主な新機能は次の通りです。

ウェブサイト

• 新たに「ウェブサイト」という機構を導入し、ウェブページやフォルダを、「ウェブサイト」のデータとして作成可能（ブログはウェブサイトの一部あるいは独立）
• ウェブサイト配下の複数ブログの一括管理が可能
• テンプレートの共有が可能

カスタムフィールドの強化

• コンテンツに応じた投稿画面のデザインが可能
• カテゴリーに連動して、カスタムフィールドの各項目の表示をオン・オフ可能
• ウェブサイト・ブログ・コメントにもカスタムフィールド入力が可能

「テーマ（テンプレートセット）」の機能拡充

• テンプレートに加え、カスタムフィールドやカテゴリーをテーマとして保存可能
• 新規ウェブサイト・ブログを作成する際、テーマを選択するだけで、カスタマイズが完了

更新履歴の管理

• ブログ記事・ウェブページ・テンプレートの履歴を管理
• 過去のバージョンから内容を復帰
• 公開済みの記事の下書き（未来投稿分の保存）が可能

２．提供開始

Movable Type 5 の提供開始予定は次の通りです。

• ベータ版： 2009年8月上旬（予定）
• 製品出荷： 2009年10月（予定）

３．ライセンスと価格

価格を表に示します（記載は税込み）。また、ライセンスはMT5からかなり簡略化されました。

表中の *1～*8 については、下記のページを参照してください。

Movable type 5 新価格表[税別](PDF)

2011.07.14
現状と異なる記載について削除しました。

現在配布中の WordPress テーマを修正しました。修正内容は次の2点です。

• 投稿・編集画面で画像の回り込み設定を行なった際に、本文が画像の横に回り込まない不具合を修正
• 回り込み解除のスタイルを追加

修正されたテーマを利用する場合は、下記のサイトからダウンロードしてください。

WordPress テーマ

以下、修正前の問題点および、手動で対処する場合の方法をおしらせします。

１．問題点

投稿・編集画面で、次のように画像を左寄せ（または右寄せ）で挿入し、本文を回り込ませることができます。

ただし、サイトを表示すると、本文の1行目が画像の右下から開始し、2行目以降が画像の下にずれてしまいます。

２．対処方法

手動で対処する場合は下記の修正を行なってください。

まず、スタイルシートに下記の内容を追加します。

p img {
    padding: 0;
    max-width: 100%;
}
img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}

さらに、

• メインインデックス
• アーカイブ
• ページテンプレート
• 単一記事の投稿

のテンプレートにある、

<div class="entry-body">

の部分を、

<div class="entry-body clearfix">

に修正します。

これで次のように適正に本文を回り込ませることができます。

Highslide JS の新しいバージョンではスライドショー機能がいくつか組み込まれており、その中のサンプルにある「With Gallery - Gallery in the parent page without Highlslide popping up at all」に関して設定方法のご質問を頂いたので、分かる範囲で解説します。

サンプルの具体的な動作については、下のリンク先でお試しください。

Gallery in the parent page without Highlslide popping up at all のサンプル

以下、設定方法を紹介します。なお、本記事の設定を行なう前に、Highslide JS 本体のダウンロードとインストールについて、「Highslide JS でサムネイル画像を拡大表示する」の２項までの作業を事前に行なってください。

また、このカスタマイズが有効な Highslide JS のバージョンは、4.1 以降です。4.0.x にはこのエントリーで紹介する機能はありません。

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

head 要素の終了タグの前に、Highslide のJavaScript ライブラリと CSS をインクルードするための、下記の内容を追加します。

<script type="text/javascript" src="[highslideディレクトリまでのURL]/highslide/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide/highslide-ie6.css" />
<![endif]-->

Movable Type の場合であれば、次のように設定すると良いでしょう。

<script type="text/javascript" src="<$mt:BlogURL$>highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide-ie6.css" />
<![endif]-->

２．オプションの設定

スライドショーの設定のために、下記の内容を１項で追加した内容の直後に追加します。

<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: true,
    useControls: true,
    overlayOptions: {
        position: 'bottom right',
        offsetY: 50
    },
    thumbstrip: {
        position: 'above',
        mode: 'horizontal',
        relativeTo: 'expander'
    }
});
 
// Options for the in-page items
var inPageOptions = {
    //slideshowGroup: 'group1',
    outlineType: null,
    allowSizeReduction: false,
    wrapperClassName: 'in-page controls-in-heading',
    useBox: true,
    width: 600,
    height: 400,
    targetX: 'gallery-area 10px',
    targetY: 'gallery-area',
    captionEval: 'this.thumb.alt',
    numberPosition: 'caption'
}
 
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
    document.getElementById('thumb1').onclick();
});
 
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
    if (/in-page/.test(this.wrapper.className))    return hs.next();
}
 
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
    if (/in-page/.test(this.wrapper.className))    return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
    if (/in-page/.test(this.wrapper.className))    return false;
}
 
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
    var i, exp;
    hs.page = hs.getPageSize();
 
    for (i = 0; i < hs.expanders.length; i++) {
        exp = hs.expanders[i];
        if (exp) {
            var x = exp.x,
                y = exp.y;
 
            // get new thumb positions
            exp.tpos = hs.getPosition(exp.el);
            x.calcThumb();
            y.calcThumb();
 
            // calculate new popup position
             x.pos = x.tpos - x.cb + x.tb;
            x.scroll = hs.page.scrollLeft;
            x.clientSize = hs.page.width;
            y.pos = y.tpos - y.cb + y.tb;
            y.scroll = hs.page.scrollTop;
            y.clientSize = hs.page.height;
            exp.justify(x, true);
            exp.justify(y, true);
 
            // set new left and top to wrapper and outline
            exp.moveTo(x.pos, y.pos);
        }
    }
});
//]]>
</script>

hs.addSlideshow の主なオプションの意味は次の通りです。

• interval：自動切換え時のインターバルです。単位はmsで、1000より小さいと正常に動作しない可能性があります。
• repeat：自動切換え時に繰り返す場合は true、繰り返さない場合は false を設定します。
• useControls：「再生・進む・戻る」のコントローラーを表示する場合は ture、表示しない場合は false を設定します。
• overlayOptions：useControls が true の場合、コントローラーの表示位置を設定します。position は水平方向・垂直方向の位置を top/bottom および left/right で設定します。offsetY は垂直方向のオフセット、offsetX は水平方向のオフセットを数値で設定します。マイナス値も利用可能です。
• thumbstrip：サムネイル画像の表示位置を設定します。position は上下の表示位置を above/below で設定します。mode は水平・垂直を horizontal/vertical で設定します。

inPageOptions の主なオプションの意味は次の通りです。

• allowSizeReduction：全体の表示サイズを変更する場合は true、変更しない場合は false を設定します。false を設定すると、元画像のサイズは最適化されず、原寸で表示します。
• width：表示領域の幅を指定します（=表示する画像の最大幅）。
• height：表示領域の高さを指定します（=表示する画像の最大の高さ）。
• targetX：表示領域の id 属性を指定します。
• targetY：表示領域の id 属性を指定します。
• captionEval：キャプションとして使用する属性を指定します。

注意点は、

３．スライドショー表示用のXHTML設定

ブログ記事やテンプレートに、下記のXHTMLを設定します。1つめの div 要素の中に、４項に示す画像リンクを記述し、それらが、2つめの div 要素の位置に表示されます。

<div class="hidden-container">
（４項の内容を記述）
</div>
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>

2つめの div 要素の id 属性 gallery-area は、２項で設定した、下記の赤色部分と一致している必要があります。

...前略...
// Options for the in-page items
var inPageOptions = {
    //slideshowGroup: 'group1',
    outlineType: null,
    allowSizeReduction: false,
    wrapperClassName: 'in-page controls-in-heading',
    useBox: true,
    width: 600,
    height: 400,
    targetX: 'gallery-area 10px',
    targetY: 'gallery-area',
    captionEval: 'this.thumb.alt',
    numberPosition: 'caption'
}
...後略...

style 属性は特に記述する必要はありません（サンプルの内容を流用しているだけです）。そのまま利用してサイズを変更したい場合、width の値は、上に示した inPageOptions の中にある width より 20px、height の値は 120px 増やした値であれば揃うと思います。

４．画像リンクの設定

1番目の画像リンクは次のように記述します。

<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>

id 属性の thumb1 は、２項で設定した次の赤色部分と一致している必要があります。

...前略...
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
    document.getElementById('thumb1').onclick();
});
...後略...

2番目以降の画像リンク（青色）は、1番目の画像リンクに続けて記述してください。2番目以降には id 属性は不要です。

<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
<a class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
...以下同様...

画像ファイル名に制約はありません。

５．注意事項

サムネイルをクリックして元の画像ファイルが見つからない場合、ローディング画像が表示され続け、クリック等が効かなくなります。その場合、リロードして、元画像のURLが間違ってないことを確認してください。

先日エントリーした「大倉山ジャンプ競技場」の続きです。

大倉山ジャンプ競技場へは、JR札幌駅から「ぶらりサッポロ観光バス」を利用しました。このバスは、ジェイ・アール北海道バスが運行しているもので、札幌市内の観光スポットをレトロなボンネットバスで巡廻します。

下はそのパンフレットで、クリックすればPDFを表示します。

バスに乗車すると、運転席の後ろにあるテレビを使って、各観光スポットの簡単な観光案内もしてくれます。マイクロバスの広さしかないのが唯一の欠点ですが、予約不要で普通の市バスに乗る感覚で乗車でき、料金は大人200円・小人100円というリーズナブルな値段です。一日乗り放題チケットもあり、こちらは大人700円・小人350円です。

ぶらりサッポロ観光バスは、札幌駅・ESTA1階のバスターミナル6番のりばから出発します。なお、このバスの運行期間は、2009年は4月29日～11月3日で、毎日運行しています。1日12便（約40分おき）です。

運行経路

ＪＲ札幌駅
　　　↓
北海道大学前
　　　↓
北海道庁前
　　　↓
北1条西7丁目
　　　↓
道立近代美術館
　　　↓
円山公園駅前
　　　↓
動物園正門前
　　　↓
大倉山競技場前
　　　↓
動物園正門前
　　　↓
円山公園駅前
　　　↓
道立近代美術館
　　　↓
大通西8丁目
　　　↓
大通西4丁目
　　　↓
時計台前
　　　↓
JR札幌駅

関連リンク

• ぶらりサッポロ観光バスのパンフレット（PDF）
• 時刻表（PDF）
• ジェイ・アール北海道バス
• Wikipedia - 札幌駅バスターミナル

Movable Type のブログ記事タイトルとパーマリンクのTinyURLを、最近流行の
Twitter にポストする、PostToTwitter プラグインを紹介します。
5日ほど前から Twitter を本格的に始め、Twitterfeed を使ってポストしてます
が、PostToTwitter プラグインを使ってポストすれば、ポストまでの動作が減るの
でおすすめです。プラグインは v1.2.0 から Movable Type 4.0 以上で動作す
るよう変更されています。なお、ブログ記事を編集・保存すると、Twitter には次の
ように表示されます。

以下、設定方法です。

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

エムロジック放課後プロジェクト - PostToTwitter のページに進み、最新バージョンの「ダウンロード」にある、zip形式または tar.gz 形式をクリックします。

２．PostToTwitter プラグインのアップロード・インストール

プラグインアーカイブを展開し、PostToTwitter/plugins 配下にある PostToTwitterフォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロード。

システム管理画面のプラグイン一覧で、「PostToTwitter～」が表示されればインストール完了です。

３．プラグインの設定

ブログ管理画面（注：システム管理画面ではありません）の「ツール」→「プラグイン」→「PostToTwitter」→「設定」をクリックして、下記の項目を設定します。

• ユーザ名：Twitter で利用しているユーザー名
• パスワード：Twitter で利用しているユーザーのパスワード
• エントリーの投稿：ブログ記事を未公開(下書き)から公開に変更した場合に投稿する場合にチェック
• 実験的なオプション：XML-RPC newPostメソッドを無視する場合にチェック（注：ectoから投稿した際に、異なるURLが連続投稿されるのを回避するための設定です）
• URL短縮サービス：TinyURLまたはbit.ly を選択

仕事の関係で現在札幌に滞在しています。

運よく空き時間ができたので、北海道に勤務している方から「大倉山ジャンプ競技場が見晴らしがよくて、スタート地点の恐怖感も味わえていいですよ（笑）」と言われたので、とりあえずそこに行くことにしました。

「大倉山ジャンプ競技場」は、札幌オリンピック（1972年）の９０ｍ級ジャンプの舞台となったところです。以降、K点が徐々に長くなり、現在は120mになっています。

下は大倉山ジャンプ競技場の公式サイトです。

現地に到着すると、思った以上に綺麗な施設で、競技場の斜面が壮観でした。

一番驚いたのは、斜面の角度です。スタート地点までリフトで上ることができ、その間、コースを真横に見ることができます。

テレビで見ていると選手はきれいにジャンプしているイメージだったのですが、斜面の角度は予想以上に急勾配で、一番角度のきついところは45度以上あるのではないかと感じました。それを見て、選手は「落ちているんだ」と。

以下のページにその斜面の画像が掲載されています。

頂上には展望ラウンジがあり、そこから札幌市内を一望することができます。展望ラウンジは2階+屋上で、1階の選手控え室（中には入れまえせん）の前に立つと、一番ジャンプ台に近い目線で景色と斜面を眺めることができます。

また麓には、「札幌ウインタースポーツミュージアム」があり、「展示ゾーン」「体感・体験ゾーン」「競技情報ゾーン」と、ウインタースポーツに関するさまざまなコーナーが設けられていて、大人から子供まで楽しめるようになっています。

リフトは大人500円（往復）、子供300円（往復）。札幌ウインタースポーツミュージアムは大人600円、中学生以下は無料です。大人はリフトとセットにすると少し割引になります。

アクセスは、札幌駅から大倉山ジャンプ競技場行きのバスが出ているので、約30分で到着します。本当はそのバスのことを書く予定だったのですが、別にエントリーします。

ということで、札幌に行く機会があればおすすめしたいスポットです。

2009 年 6 月の Amazon 注文ランキングです。

今月は拙著「Movable Type逆引きデザイン事典[4.2/4.1対応]」に加え、「DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン」と「MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!」のMovable Type 本が3冊、1位に並びました。

1位：DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン

DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン 森 和恵 技術評論社 2009-03-27 売り上げランキング : 70456 Amazonで詳しく見る by G-Tools

1位：MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!

MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! 藤本 壱 ラトルズ 2009-02 売り上げランキング : 8891 Amazonで詳しく見る by G-Tools

1位：Movable Type逆引きデザイン事典[4.2/4.1対応]

Movable Type逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎 翔泳社 2009-04-21 売り上げランキング : 2457 Amazonで詳しく見る by G-Tools

4位：これからはじめる MovableTypeの本 <MovableType4.2対応版> (自分で選べるパソコン到達点)

これからはじめる MovableTypeの本 <MovableType4.2対応版> (自分で選べるパソコン到達点) やまもと いずみ 技術評論社 2009-01-07 売り上げランキング : 7896 Amazonで詳しく見る by G-Tools

4位：即戦プロ技 Movable Typeデザインテンプレートコレクション

即戦プロ技 Movable Typeデザインテンプレートコレクション エクストラコミュニケーションズ 毎日コミュニケーションズ 2009-05-13 売り上げランキング : 37226 Amazonで詳しく見る by G-Tools

4位：魔法使いの台所―まとめづくりと手早い料理で夕食用意が30分

魔法使いの台所―まとめづくりと手早い料理で夕食用意が30分 婦人之友社編集部 婦人之友社 1990-05 売り上げランキング : 1479 Amazonで詳しく見る by G-Tools

7位：Movable Typeデザインカスタマイズブック MT4.2対応 クリエイターのためのValue Design

Movable Typeデザインカスタマイズブック MT4.2対応 クリエイターのためのValue Design 下野 宏 ソフトバンククリエイティブ 2008-09-27 売り上げランキング : 57232 Amazonで詳しく見る by G-Tools

7位：基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books）

基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books） 大藤 幹 毎日コミュニケーションズ 2008-09-20 売り上げランキング : 6281 Amazonで詳しく見る by G-Tools

9位：GriffinTechnology iTalk Pro GRI-IP-000063

GriffinTechnology iTalk Pro GRI-IP-000063 Griffin Technology 2006-11-10 売り上げランキング : 314 Amazonで詳しく見る by G-Tools

Twitter を始めました。

といっても、Twitter がローンチされたときにアカウントだけ取得して、書籍のテスト用などに使ってました。ということで、フォローお待ちしています。

とりあえず、Twitterfeed を使って、当ブログのエントリーを投稿する設定を行ってみました（下）。

Twitterfeed は、ブログ等のフィードを取得して、Twitterに更新情報をポストしてくれるサービスです。

Twitter は初心者なのでよく知りませんが、Twitterfeed は最近リニューアルされたようで、リニューアル後から動作が不安定になっているようです。また、OpenID よりメールアドレスでのサインアップの方が安定しているという記事もあったので、以下、メールアドレスを使った設定方法を紹介します。

Twitterfeed のページにある「Register Now」をクリック。

メールアドレスとパスワードを入力して「Create Account」をクリック。

次の画面でフィードのURLを設定します。Step1の「Create new feed to」で「twitter」を選択して、「Connect your feed to your Twitter Account」をクリックします（この段階ではStep2のテキストフィールドには文字を入力できません）。

Twitterの画面に移動するので「Allow」をクリック（Twitter にログインしていない場合はログイン画面が表示されると思います）。

次の画面が表示されるのでしばらく待ちます。

元の画面に戻って「You have successfully linked the twitter account 'xxx' to this feed.」が表示されれば、Twitter へのポスト設定の事前準備はOKです。

Step2で「Feed Name」と「RSS Feed URL」を入力します。

テキストフィールド右にある「test rss feed」をクリックすればフィードの正常性をテストでき、OKであれば「Feed parsed OK」が表示されます。

「Advanced Settings」をクリックすれば詳細設定が行なえるようです。設定は後で変更することができます。設定が完了したら「Create Feed」をクリックします。

これで登録されました。右側の「Edit Feed」をクリックすれば詳細設定を変更できます。