Top > November 2007 [全て開く]

Movable Type 4 でポッドキャスト/ポッドキャスティング(その2:MT-Enclosures プラグイン)

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)」ではブログ上で MP3 を簡単に再生できる環境を構築しましたが、動画や音声などのコンテンツを RSS 配信し、iTunes で取り込むことが本来のポッドキャスティングです。

ここでは、Podcasting プラグインMT-Enclosures プラグインを組み合わせて、RSS 配信する仕組みを構築します。

1.ポッドキャスト/ポッドキャスティングの仕組み

MP3 等の音声ファイルを RSS 配信する(ポッドキャスト/ポッドキャスティング)仕組みですが、具体的には RSS 2.0 のフィードに enclosure 要素を付加することを指します。
enclosure 要素にはコンテンツの URL、ファイルサイズ、MIME タイプの3つの属性が記述されます。

音声ファイルのリンクをブログ記事の本文に記述し、それを RSS フィードとして配信するだけでは enclosure 要素は付与されませんのでお間違えなく。

2.プラグインのダウンロード・インストール

MT-Enclosures のページより Enclosures.zip または Enclosures.tar.gz をクリックして、アーカイブをダウンロード。

MT-Enclosures のページ

ダウンロードしたアーカイブを解凍し、中にある Enclosures.pl をアプリケーション・ディレクトリの plugins ディレクトリ配下にアップロード。

「システムメニュー」→「プラグイン」で Enclosures.pl が表示されていればインストール完了です。

MT-Enclosures のページ

なお、他のブログの過去記事では、Enclosures.pl を編集する説明がありますが、現在のバージョン(1.4.5.0)では処理が改善され、下記の MIME タイプに対応しています(厳密には「検出する処理」が追加されています)。

拡張子MIME タイプ
.mp3audio/mpeg
.wmaaudio/wma
.m4aaudio/mp4
.midiaudio/midi
.wavaudio/wav
.aaaudio/aa
.mp4/.m4vvideo/mp4
.mpegvideo/mpeg
.avivideo/msvideo
.movvideo/quicktime
.wmvvideo/x-ms-wmv
.oggapplication/ogg
.torrentapplication/x-bittorrent
.exeapplication/octet-stream
.bmpimage/bmp
.jpeg/.jpgimage/jpeg
.gifimage/gif
.tiff/.tifimage/tiff
.pngimage/png

3.RSS 2.0 用テンプレート修正

「デザイン」→「テンプレート」→「RSS」で RSS 2.0 のテンプレート編集画面を開き、下記に示す、青色の1行(MTEntryEnclosures タグ)を追加します。

<$MTHTTPContentType type="application/rss+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0">
    <channel>
        <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
     :
        <item>
            <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
         :
            <pubDate><$MTEntryDate format_name="rfc822"$></pubDate>
            <$MTEntryEnclosures mime_include="audio"$>
        </item>
        </MTEntries>
    </channel>
</rss>

MTEntryEnclosures タグの mime_include 属性には、enclosure 要素に適用したい MIME タイプを正規表現で記述します。ここでは "audio" と書いてますので、前述の表より、

拡張子MIME タイプ
.mp3audio/mpeg
.wmaaudio/wma
.m4aaudio/mp4
.midiaudio/midi
.wavaudio/wav
.aaaudio/aa

が対象になります。MP3 のみを対象にしたい場合は、

<$MTEntryEnclosures mime_include="audio/mpeg"$>

と記述します。

FeedBurner 等、外部のフィードサービスを利用している場合は、ポッドキャスト配信用の独立したフィードを作成するか、外部サービスで RSS 2.0 で配信する設定が必要になります(enclosure 要素をサポートしているかどうかはご利用のサービスを確認してください)。

3.ブログ記事への MP3 ファイルの投稿

ブログ記事に、MP3 ファイルへのリンク、例えば

<a href="http://www.koikikukan.com/music/sample.mp3">sample.mp3<a>

を記述して投稿すれば(他の文章と混ぜても問題ありません)、MT-Enclosures プラグインが記事内の MP3 ファイルを探して、RSS 2.0 フィードに enclosure 要素を付与してくれます。

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)」で導入した、Podcasting プラグインを使って MP3 ファイルを投稿する場合は、「Embed a flash player for this podcast?」のチェックを外しして投稿してください。

Podcasting プラグインでの投稿

MP3 ファイルの URL がブログ記事内にある場合、下記のような RSS が生成されます。青色部分が追加された enclosure 要素で、MP3 の URL とファイルタイプ、サイズが記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>小粋空間</title>
        <link>http://www.koikikukan.com/</link>
        <description></description>
        <language>ja</language>
        <copyright>Copyright 2007</copyright>
        <lastBuildDate>Thu, 30 Nov 2007 00:36:36 +0900</lastBuildDate>
        <generator>http://www.sixapart.com/movabletype/</generator>
        <docs>http://www.rssboard.org/rss-specification</docs>
        <item>
            <title>サンプル音源</title>
            <description><![CDATA[<p>サンプル音源の投稿テスト</p><p><a href="http://www.koikikukan.com/music/sample.mp3">sample.mp3</a></p>]]></description>
            <link>http://www.koikikukan.com/2007/11/post.html</link>
            <guid>http://www.koikikukan.com/2007/11/post.html</guid>
            <pubDate>Thu, 29 Nov 2007 02:36:46 +0900</pubDate>
            <enclosure url="http://www.koikikukan.com/music/sample.mp3" length="4510616" type="audio/mpeg" />
        </item>
      :
    </channel>
</rss>

4.RSS リーダーでの購読

iTunes の画面が間に合わなかったので、上の RSS フィードを RSS リーダー(ここでは livedoor リーダーを使用)で購読した場合の表示を示します。

livedoor リーダーでの表示

「DL: audio/mpeg」と表示された部分が enclosure 要素に対応しています。

5.参考サイト

iTunes でポッドキャスティングを利用する場合は、下記のサイトが参考になるでしょう。

Comments [3] | Trackbacks [1]

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)

Movable Type 4 でのポッドキャスト/ポッドキャスティングのカスタマイズを2回に分けて紹介します。

「ポッドキャスト(Podcast)」とは、iPod と放送(broadcast)を組み合わせた造語で、Web 上で音声データファイルを RSS 配信する仕組みを指します。「ポッドキャスティング」は、この仕組みを利用して実際に配信を行うという行為を指すのに使われます。*1

本エントリーでは、MP3 の URL を指定することで音声ファイルを取り込み、ブログ記事として公開することができる Podcasting プラグインを紹介します。

Podcasting プラグイン

このプラグインを利用することで、ブログ記事に Flash プレイヤーを表示し、取り込んだ MP3 を簡単に聴くことができます(下)。

ブログ記事

Movable Type でのポッドキャストとしては、「EasyPodcasting Plugin」が有名ですが、このプラグインを使うことにより、ファイルを Movable Type の管理対象にすることが可能になります(ただし仮想的な管理)。
2007.12.03 追記:EasyPodcasting Pluginもアイテムとしてファイルの実体を管理することが可能です。

1.プラグインのインストール

Podcasting のページよりダウンロードをクリック。

ダウンロード

ダウンロードしたプラグインを解凍し、plugins 配下にある Podcast フォルダをアプリケーションディレクトリの plugins ディレクトリに丸ごとアップロード。

また、mt-static/plugins 配下にある Podcast フォルダをアプリケーションディレクトリの mt-static/plugins ディレクトリに丸ごとアップロード。

それぞれのアップロード先が下記の構成になっていれば OK です。

/mt-static
 /plugins
  /Podcast
   mp3player.swf
/plugins
 /Podcast
  /lib
   /MT
    /Asset
     Podcast.pm
   /Podcast
    CMS.pm
  /tmpl
   /dialog
    find_results.tmpl
    find.tmpl
    podcast_options.tmpl
  Podcast.pl

この状態でブログ管理画面にアクセス。アップグレード画面が表示されるので、「アップグレード開始」をクリック。

アップグレード開始

管理画面にサインインします。これでアップグレードが開始されます。

サインイン

アップグレードが完了したら「Movable Type に戻る」をクリック。

アップグレード完了

2.ポッドキャスト用ブログ記事作成

新規作成メニューに「Podcast Asset」が追加されるので選択。

Test Data

設定画面が表示されるので、再生したいファイルのURLを設定。自サイト以外のファイルを指定することも可能です。自サイトのファイルを読み込む場合は予めアップロードしておきましょう。

設定画面

設定後、「次へ」をクリック。

指定したURLにファイルの存在が確認できる(正常に取得できる)と、次画面に遷移します。
次の画面は、ファイルのアップロード画面とほぼ同じですが、ブログ記事作成と同時にファイル再生用の Flash プレイヤーを表示させたい場合は、「Embed a flash player for this podcast?」をチェックします。

設定完了

設定後、「完了」をクリック。

「Embed a flash player for this podcast?」をチェックすると、(リッチテキストでは)テキストエリアに下記のような Flash プレイヤーが表示されます。

ブログ記事投稿画面

Flash プレイヤーを表示させない場合は、ファイルへのリンクが設定されます。

ブログ記事投稿画面

ブログ記事を公開すると、冒頭のスクリーンショット(下)のようになります。

ブログ記事

読み込んだファイルはアイテムとして管理することができます(ただし実体はありません)。

アイテム一覧

アイテム一覧の「クイックフィルタ」にも「Podcasts」が追加されます。

アイテム一覧の「クイックフィルタ」

次の記事:Movable Type 4 でポッドキャスト/ポッドキャスティング(その2:MT-Enclosures プラグイン)

2007.12.03
EasyPodcasting Plugin の記述を修正しました。


*1:Wikipedia 「ポッドキャスト」より引用

Comments [8] | Trackbacks [1]

テストデータを大量に作成する MTBooter プラグイン

November 28,2007 2:03 AM
Category:[プラグイン]
Tag:[, , , ]
Permalink

ブログの試験でブログ記事データ等を大量に作成したい場合がありますが、ひとつずつ手作業で入力するのは結構面倒です。かといって少量のデータでは全てのテストケースを網羅できない場合もあります。

本エントリーでは、テストデータを大量に作成することができる MTBooter プラグインを紹介します。

MTBooter

1.プラグインのインストール

MTBooter のページよりダウンロードをクリック。

ダウンロード

ダウンロードしたプラグインを解凍し、plugins 配下にある MTBooter フォルダをアプリケーションディレクトリの plugins ディレクトリに丸ごとアップロード。

下記の構成になれば OK です(各フォルダにある "._.DS_Store" は無視)。

/plugins
 /MTBooter
  /lib
   /MTBooter
    /App
     CMS.pm
  /tmpl
   booter.tmpl
  MTBooter.pl

この状態でブログ管理画面にアクセス。アップグレード画面が表示されるので、「アップグレード開始」をクリック。

アップグレード開始

管理画面にサインインします。これでアップグレードが開始されます。

サインイン

アップグレードが完了したら「Movable Type に戻る」をクリック。

アップグレード完了

2.データ作成

新規作成メニューに「Test Data」が追加されるので選択。

Test Data

設定画面が表示されます。

設定画面

下記の説明にしたがって必要な項目を設定。

How many entries would you like to create?
生成するブログ記事数を設定。生成しない場合は0を設定。
How many Pages would you like to create?
生成するウェブページ数を設定。生成しない場合は0を設定。
How many years back should the entries go?
遡る投稿年。5を設定すれば最大5年前の日付に遡って投稿。
Max number of tags for entry?
ブログ記事の最大タグ数。タグを付与しない場合は0を設定。
Add comments
生成したブログ記事にコメントも自動投稿させる場合にチェック。 Will add a random number of comments and comment replies to some of the entries that are created.
Rate entries
ブログ記事に評価をつける場合にチェック。 Will assign random scores to some of the entries that are created.

設定後、「新規作成」をクリック。

生成すると、「… created successfully!」と表示されるので、キャンセルをクリック。続けて生成する場合は、上記を繰り返してください。

設定完了

このように「Entry #n」というタイトルのブログ記事が一括投稿されます。#の後ろの数字はブログ記事のID番号(MTEntryID)です。

ブログ記事一覧

生成されたブログ記事の本文には「Booter biddle」という文字列が設定されます。

ブログ記事

コメントも大量に生成されます。

コメント

タグはこのような感じで生成されます。

タグ

なお、本文・追記のテキストフォーマットのセレクトボックスに「Booter Text Transform」が追加されます。

テキストフォーマット

これは下記の変換をするように予めプログラミングされていますが用途は不明です。

DSW→The Deep & Savage Way
HSZ→Helen of Santa Zita
Comments [0] | Trackbacks [0]

ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)

Movable Type 4 で、ブログ記事アーカイブ(エントリーアーカイブ)に同一カテゴリーのブログ記事リスト(エントリーリスト)を表示するためのカスタマイズです。
質問を頂きましたので本エントリーにて解説致します。

Movable Type 3 までは、MTTagInvoke を使ったカスタマイズ「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」が可能でしたが、Movable Type 4 ではこのプラグインが利用できなくなっています。

MT3 と同等のカスタマイズを行うには MTEntryCategoryEntries というプラグインがお勧めですが、ここでは、MTIf タグを使った方法を、順を追ってカスタマイズする形で紹介したいと思います。

読むのが面倒な方は、2項~4項のいずれかのサンプルを、そのままサイドバーに貼り付けてお使いください。

1.基本設定

ブログ記事に同一カテゴリーのブログ記事リストを表示する場合の基本形です。

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>

1行目にある、

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>

で、<$MTEntryCategory$> の評価内容を取得し、entrycategory という MT の変数に設定します。
そして、

<MTEntries category="$entrycategory">

で、先に設定した変数 entrycategory の値を用いてブログ記事リストを特定のカテゴリーでフィルタリングしています。MTGetVar の name 属性で変数を使用する場合は $ を付与しませんが(下)、

<MTGetVar name="entrycategory">

MTEntries タグの category 属性に用いる場合は、$ を付与して、MT の変数であることを明示します。

2.特定のアーカイブのみで表示させる

1項の状態では、サイドバーをインクルードする全てのページで表示されてしまうため、ブログ記事アーカイブのみにも適用されてしまいます。

このリストをブログ記事アーカイブだけに表示させるには、リスト全体 MTIf タグで括ります。

<MTIf name="entry_template">
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>
</MTIf>

1行目の MTIf タグの name 属性には、ブログ記事のみで有効になる "entry_template" という値を設定します。

<MTIf name="entry_template">

これでブログ記事アーカイブ以外では、このリストは表示されなくなります。

アーカイブで使える変数値については、「予約変数一覧 for Movable Type 4(その1)」にまとめてありますので、参考になれば幸いです。

3.現在のブログ記事タイトルをリストから除外する

2項までの設定では、現在表示されているブログ記事のタイトルも表示されてしまうので、次にこれを非表示にする制御を行います。

非表示にするには、現在表示されているブログ記事ページのID番号と、リスティングされているブログ記事のID番号を比較・判定する処理(青色部分)を追加します。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTIf>

現在表示されているブログ記事ページのID番号は、2行目の

<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>

で取得し、リスティングされているブログ記事ページのID番号は、MTEntries タグブロック内の

<MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>

で取得しています。これで、

entryid:現在表示されているブログ記事ページのID番号
currententryid:リスティングされているブログ記事ページのID番号

となり、あとはこれを MTIf タグで判定します。

<MTIf name="currententryid" ne="$entryid">

ne 属性で判定しているので、判定結果が「真」、つまりお互いのブログ記事IDが等しくなければ、MTIf ブロック内の行を実行します。

4.リストが1件の場合はリストを非表示にする

前項の設定を行った場合、あるカテゴリーに属するブログ記事が1件の場合、リストに何も表示されなくなってしまいます。
これを回避するため、カテゴリーに属するブログ記事が1件の場合は、リスト全体を非表示にする制御を行います。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<MTEntries category="$entrycategory">
  <MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>
</MTEntries>
 
<MTUnless name="entrycount" eq="1">
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTUnless>
</MTIf>

該当カテゴリーのブログ記事数のカウントには、MTEntries タグ内で __counter__ を利用することで取得しています。
ところが、__counter__ という変数は、

<$MTGetVar name="entrycount" value="__counter__"$>

では正常に値を取得できない(変数値がそのまま変数名に設定されてしまう)ので、MTSetVarBlock と MTGetVar を組み合わせて、

<MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>

としています。

そして、MTUnless タグを用いて、カウント値が "1" でない場合にブロック内を実行するように制御します。

<MTUnless name="entrycount" eq="1">
Comments [6] | Trackbacks [1]

iPod がフリーズした時のリセット方法

November 26,2007 12:20 AM
Category:[mono]
Tag:[]
Permalink

iPod + iTalk Pro を使って録音した音源を聴こうと思って操作をしていると、時々 iPod がフリーズしてしまうことがあります。一旦フリーズすると何も操作できなくなり、電源を切ることすらできません。

で、これまでは充電が切れるまで放置していたのですが、友人にリセット方法があることを教えてもらいました。他の操作でフリーズした時もこの方法で解消できるようです。

公式サイトにリセット方法が掲載されていますので、以下、タイプ別に引用します。

iPod / iPod nano / iPod mini

  1. ホールドスイッチをオンにしてからオフにします(「Hold」にスライドしてから、オフにします)。
  2. メニューボタンとセンター(選択)ボタン(iPod の場合は再生/一時停止ボタン)を同時に 6~10 秒間押したままにして、アップルロゴを表示させます。この手順を繰り返す必要がある場合もあります。
上記の手順でうまくいかなかった場合は、iPod を電源アダプタに接続し、その電源アダプタをコンセントに差し込むか、または iPod をお使いのコンピュータに接続します。コンピュータの電源が入っていることと、スリープ設定にしていないことを確かめてください。
参考:iPod のリセット方法

iPod touch

  1. 「スリープ/解除」ボタンと「ホーム」ボタンを同時に押し、Apple ロゴが表示されるまでそのまま待ちます。
参考:iPod touch トラブルシューティングアシスタント

iPod shuffle

  1. iPod shuffle とコンピュータとの接続を解除します(接続されている場合)。
  2. iPod shuffle 背面のスイッチを「オフ」の位置に動かします。
    ヒント:iPod shuffle がオフのときは、緑の帯がスイッチで見えなくなります。
  3. 5 秒ほど待ちます。
  4. 背面のスイッチを「順番に再生」または「曲をシャッフル」の位置に戻します。緑の帯はいずれの位置でも見えます。
参考:iPod shuffle をリセットする

その他

すべての iPod(touch を除く)について、「iPod トラブル5つの『R』」というタイトルでトラブルシューティングを確認することができます。

5つの「R」とは、

  • リセット(Reset)
  • リトライ(Retry)
  • 再起動(Restart)
  • 再インストール(Reinstall)
  • リストア(Restore)

を指しています。

2007.11.27
リセットがうまくできなかった時の手順を引用で追加しました。

Comments [0] | Trackbacks [2]

概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)

November 25,2007 1:07 AM
Category:[エントリー]
Tag:[, , , ]
Permalink

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズで、以前紹介した「概要と本文を切り替える(デフォルトテンプレート版)」のMovable Type 4・デフォルトテンプレート版です。

概要に本文の先頭から指定文字数を表示する設定になっている(=概要フィールドに何も書いていない)場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ/日付アーカイブに適用する例を紹介します(ブログ記事リストを使用したアーカイブにも適用されます)。

1.スクリプトのダウンロード・アップロード

下記のリンクより menufolder.js をダウンロード(本カスタマイズ用に機能追加しています)

download

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

2.script 要素の追加

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、head 終了タグの前に下記の script 要素を追加。

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

3.エントリータイトルに折りたたみのリンクを与える

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ブログ記事の概要」を開き、エントリータイトルのタグ

<h2 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

を下記のように変更します。a 要素を削除して h2 に id 属性を追加しています。

<h2 class="asset-name" id="content<$MTEntryID$>name"><$MTEntryTitle$></h2>

4.概要を追加する

エントリーを表示するタグ

    <div class="asset-content">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>

に対し、青色のタグを追加します。

    <div class="asset-content">
    <div id="content<$MTEntryID$>list2">
       <p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
    </div>
    <div id="content<$MTEntryID$>list">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>
    </div>

また、同じ「ブログ記事の概要」テンプレートの一番最後(このテンプレートでは表示されていませんが、MTEntries の終了タグ直前)にスクリプト起動用の script 要素(下記)を追加します。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>

これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。

5.折りたたみ状態を保持しないようにする

このカスタマイズでは折りたたみ状態がクッキーを利用して保持されます。つまり、ブラウザをリロードした時等、直前の折りたたみ状態でページが表示されます。

折りたたみ状態を保持したくない場合は、ダウンロードした menufolder.js の中間辺りに下記の設定(赤色)

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = true;

を下のように変更してください。

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = false;

6.注意事項

概要の表示文字数より本文の文字数が少ないと効果ありません。

Comments [12] | Trackbacks [1]

部下の服が

November 24,2007 2:36 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

livedoor テンプレート不具合のお知らせ(前後ページへのリンク追加)

November 23,2007 12:30 AM
Category:[テンプレート]
Tag:[, ]
Permalink

配布中の「livedoor ブログテンプレート」で、下記の不具合がありましたのでお知らせ致します。
ご利用中の皆様にはご迷惑をおかけして申し訳ございません。

1.問題点

  • 1ページに表示するアーカイブの件数が、そのアーカイブ全体の件数より少ない場合、前後ページへのリンクが表示されない
  • 個別記事ページの前後記事のリンクが表示されない

2.対処方法

カテゴリーアーカイブ、月別アーカイブ、個別記事ページの各テンプレートに、下記の前後ページへのリンク(青色)、および CSS を追加してください。

カテゴリーアーカイブ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$CategoryName$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
    :

月別アーカイブ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$MonthLabel$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
    :

個別記事ページ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="page-nav">
<IfPrevArticle><a href="<$PrevArticle$>">&lt; 前の記事</a></IfPrevArticle>&nbsp;<IfNextArticle><a href="<$NextArticle$>">次の記事 &gt;</a></IfNextArticle>
</div>
 
<$TrackBackAutoDiscovery$>
    :

CSS

/* ページナビゲーション */
.page-nav {
    margin: 5px 0;
    text-align: center;
    font-size: 12px;
}

以上です。

Comments [2] | Trackbacks [0]

コメント投稿フォームの「情報を保存する」のチェックを外した時の振る舞いを変更する

November 22,2007 12:15 AM
Category:[JavaScript, コメント]
Tag:[, , ]
Permalink

Movable Type 4 のコメント投稿画面にある、「ログイン情報を記憶」というチェックボックス(下のスクリーンショット一番下のチェックボックス)は、投稿者情報(名前・電子メール・URL)をクッキーを利用して保存し、次回の投稿時に投稿者情報の入力を不要にするためのものです。

チェックボックスにチェックをしておけば、コメント投稿時に投稿者情報がクッキーに保存されます。

ログイン情報を記憶

逆に、このチェックを外すと、チェックを外した瞬間にクッキーから投稿者情報を消去する動作が実行されるのですが、同時に、入力フィールドに記入された投稿者情報まで消去されてしまいます(下)。

「ログイン情報を記憶」のチェックを外した後

チェックを外す操作によるフォーム情報のクリアは、ユーザが意図しない動作のように思われます。

ということで、このエントリーでは、チェックを外しても投稿者情報を消去せず、クッキー情報のみ削除するカスタマイズを紹介します。

1.設定方法

ブログ管理画面より、「デザイン」→「テンプレート」を開き、一覧に表示された「JavaScript」のリンクをクリック。これは mt.js というコメントフォーム制御用の JavaScript です。

「JavaScript」のリンクをクリック

「テンプレートの内容」にある赤色の部分

    :
function forgetMe (f) {
    deleteCookie('mtcmtmail', '/', '');
    deleteCookie('mtcmthome', '/', '');
    deleteCookie('mtcmtauth', '/', '');
    f.email.value = '';
    f.author.value = '';
    f.url.value = '';
}
    :

を削除するか、赤色行の先頭に "//" をつけてコメントアウトします。

    :
function forgetMe (f) {
    deleteCookie('mtcmtmail', '/', '');
    deleteCookie('mtcmthome', '/', '');
    deleteCookie('mtcmtauth', '/', '');
//    f.email.value = '';
//    f.author.value = '';
//    f.url.value = '';
}
    :

編集後、「保存と再構築」をクリックしてください。

Comments [0] | Trackbacks [0]

CSS の画像置換で画像にリンクを設定する

November 21,2007 1:01 AM
Category:[CSS]
Tag:[]
Permalink

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。

このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1

1.サンプル1

h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。

画像置換サンプル1

(X)HTML

<div id="header">
<h1>タイトル</h1>
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
</div>

CSS

#header h1 {
    font-size: 100%;
}
#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: -19px;
    _top: -18px; /* IE6 */
    left: 0;
}
*:first-child+html #header div p {
    top: -18px; /* IE7 */
}
/* opera9 \*/
html:\66irst-child #header div p {
    top: -18px;
}

ここでは適用していませんが、Windows XP + Safari3 の CSS ハックは下記で有効になります。

body:first-of-type #header div p {
    top: -18px;
}

2.サンプル2

img 要素を h1 要素より前に記述すれば CSS ハックが不要になります。ただし文書構造的にはサンプル1の方がいいかもしれません。

画像置換サンプル2

(X)HTML

<div id="header">
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
<h1>タイトル</h1>
</div>

CSS

#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: 0;
    left: 0;
}

3.その他

上記の設定は、画像サイズが表示領域を超えないことを前提にしています(overflow: hidden を設定して試したところ、IE7 では適用されませんでした)。
上記の他、何か良いアドバイスがあればお待ちしています。

4.参考・関連サイト


*1:このテクニックは「XREA のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。

Comments [7] | Trackbacks [0]

予約変数一覧 for Movable Type 4(その2)

November 20,2007 1:27 AM
Category:[その他]
Tag:[, ]
Permalink

MTIf タグ等でアーカイブ種別を判定するための、Movable Type 4 で予め用意された予約変数一覧です。「予約変数一覧 for Movable Type 4(その1)」でまとめたものは変数に"1"が設定されているものですが、今回は、

archive_class

という変数に設定されている文字列をまとめました。
大体お分かりと思いますが、この変数はアーカイブ種別を判定するためのものです。

前回同様、lib/MT/WeblogPublisher.pm に記載されています(使用方法は後述)。

アーカイブ種別変数名
年別datebased-yearly-archive
月別datebased-monthly-archive
週別datebased-weekly-archive
日別datebased-daily-archive
ブログ記事entry-archive
ウェブページpage-archive
カテゴリcategory-archive
年別カテゴリcategory-yearly-archive
月別カテゴリcategory-monthly-archive
週別カテゴリcategory-weekly-archive
日別カテゴリcategory-daily-archiv
ユーザーauthor-archive
年別ユーザーauthor-yearly-archive
月別ユーザーauthor-monthly-archive
週別ユーザーauthor-weekly-archive
日別ユーザーauthor-daily-archive

例えば、アーカイブ種別が「月別カテゴリ」であることを判定したい場合は、

<MTIf name="archive_class" eq="category-monthly-archive">
  :
</MTIf>

とテンプレート(またはテンプレートモジュール)に書きます。

このタグが書かれたテンプレートやテンプレートモジュールが「月別カテゴリ」として実行される場合、MTIf タグのブロック内部が実行されます。

アーカイブ種別が「ブログ記事」であることを判定したい場合は

<MTIf name="archive_class" eq="entry-archive">
  :
</MTIf>

と書きます。このタグが書かれたテンプレートやテンプレートモジュールが「ブログ記事」として実行される場合、MTIf タグのブロック内部が実行されます。

これらを利用すれば、独自の変数を用意する必要はありません。

MTArchiveType との違い

Movable Type では MTArchiveType タグが用意されているので、これを使って判定することも可能ですが、実装がやや面倒です。
例えば、アーカイブ種別が「ブログ記事」であることを判定したい場合は、

<MTSetVarBlock name="archive_type"><$MTArchiveType$></MTSetVarBlock>
<MTIf name="archive_type" eq="Individual">
  :
</MTIf>

となります。MTSetVarBlock タグで値を任意の変数 archive_type に設定する分が余分に必要です。

変則的な判定方法

like 属性を用いて、各アーカイブ(日付・カテゴリ・ユーザー)の月別アーカイブだけを取得するには次のように記述します。

<MTIf name="archive_class" like="monthly">
  :
</MTIf>
Comments [3] | Trackbacks [0]

予約変数一覧 for Movable Type 4(その1)

November 19,2007 2:30 AM
Category:[その他]
Tag:[, ]
Permalink

MTIf タグ等でアーカイブ種別を判定するための、Movable Type 4 で予め用意された予約変数一覧です。

これらは lib/MT/WeblogPublisher.pm に記載されているもので、抜粋したものを下記の表にまとめました(使用方法は後述)。

 YMWDCCAAIP
YMWDYMWD
archive_template
main_template
datebased_archive    
datebased_only_archive            
category_archive           
author_archive           
entry_archive
feedback_template
              
module_category_archives
module_category-monthly_archives
              
module_author_archives
module_author-monthly_archives
              
datebased_yearly_archive
module_yearly_archives
               
datebased_monthly_archive
module_monthly_archives
               
datebased_weekly_archive               
datebased_daily_archive               
category_yearly_archive               
category_monthly_archive               
category_weekly_archive               
category_daily_archive               
author_yearly_archive               
author_monthly_archive               
author_weekly_archive               
author_daily_archive               
entry_template               
page_archive
page_template
               

一番上にある略号の意味は次の通りです。

  • Y:年別アーカイブ
  • M:月別アーカイブ
  • W:週別アーカイブ
  • D:日別アーカイブ
  • C:カテゴリーアーカイブ
  • A:ユーザーアーカイブ
  • I:ブログ記事アーカイブ
  • P:ウェブページアーカイブ

カテゴリーアーカイブとユーザーアーカイブは、年別・月別・週別・日別との組み合わせもあります。

○印がついているのが、そのアーカイブを表示する時に、変数に "1" が設定されていることを示しています。●はデフォルトテンプレートで、テンプレート上に MTSetVar タグで設定されているものを示しています。

例えば、アーカイブ種別が「年別・月別・週別・日別」であることを判定したい場合は、

<MTIf name="datebased_only_archive">
  :
</MTIf>

とテンプレート(またはテンプレートモジュール)に書きます。

このタグが書かれたテンプレートやテンプレートモジュールが「年別・月別・週別・日別」として実行される場合、MTIf タグのブロック内部が実行されます。

アーカイブ種別が「ブログ記事・ウェブページ」であることを判定したい場合は

<MTIf name="entry_archive">
  :
</MTIf>

または

<MTIf name="feedback_template">
  :
</MTIf>

と書きます。このタグが書かれたテンプレートやテンプレートモジュールが「ブログ記事・ウェブページ」として実行される場合、MTIf タグのブロック内部が実行されます。

これらを利用すれば、独自の変数を用意する必要はありません。

Comments [3] | Trackbacks [0]

「Movable Type WEBデザインの新しいルール」重版決定

November 18,2007 12:55 AM
Category:[書籍]
Tag:[, , ]
Permalink

10月中旬に発売された「Movable Type WEBデザインの新しいルール」の重版が決定致しました。

Movable Type WEBデザインの新しいルールMovable Type WEBデザインの新しいルール
荒木 勇次郎 松永 英明

翔泳社 2007-10-17
売り上げランキング : 205

Amazonで詳しく見る
by G-Tools

Amazon の売り上げランキングをチェックしていますが、「 販売状況と紹介リンク等」でお知らせした後もわりと上位をうろうろしているようです。
大変多くの方にお買い上げいただいているようで、本当にありがとうございます。

内容は、第1版との違いはほとんどありませんが、若干の校正、それから頂いたご質問を多少反映させています。

なおサンプルデータのダウンロードサイトのURLの掲載位置(各章扉の右下)が分かりにくいようで、当サイト(や翔泳社)に質問を頂いています。ダウンロードサイトでは、サンプルデータ以外に、書籍に掲載されているリンク一覧やカスタマイズ情報等、色々公開しているので、「サポートサイト」として格上げし、目次の下に掲載してもらうことになっています。

Comments [0] | Trackbacks [0]

今週まで

November 17,2007 2:20 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

CORESERVER(CORE-A)移行後の感想とコメント投稿エラーについて

November 16,2007 8:30 AM
Category:[お知らせ, サイト変更履歴]
Tag:[]
Permalink

CORESERVER(CORE-A)移行から約1ヶ月が経ちましたので、いくつか感想を。

1.ページ表示

サーバ移行後に頂いたコメントより、以前よりページの表示速度が早くなったようです。PHP を CGI 版からモジュール版に変更した恩恵なのかどうかは不明ですが、サーバ移転をして正解でした(さくらインターネットは良いレンタルサーバですので、その点は誤解なきよう)。

2.503 エラー

さくらインターネット(スタンダードプラン)で目標0件を達成できなかった、ページアクセス時の503エラーは0になりました。

クロール結果

上記は Google ウェブマスターツールのクロール結果です。503エラーとなったページ数は「URL にアクセスできません」に計上されますが、今のところ0件です。

なお、「HTTP エラー」や「見つかりませんでした」に計上されているのは、外部サイトからのリンク(で存在しないもの)がクロールされているようです。

3.コメント投稿エラー

上記の2点は改善されたのですが、その代わり、コメント投稿で 500 エラー、あるいは下のようなエラーが発生するケースが新たに浮上しました。

エラー画面

原因はアカウントの負荷が高いことによるものと推測されます。
サーバ負荷を考慮して、CORE-A ではなく、CORE-B に移行するつもりでしたが、なかなかサービスが開始されないので、見切り発車で CORE-A を選択したのが根本的な原因です。
CORE-B がサービス開始された暁には(可能であれば)速やかに移転したいと思います。

なお、この問題に遭遇すると、コメント自体はデータベースに書き込まれるのですが、ページに反映されない(=再構築されない)ため、投稿失敗にみえてしまい、重複して投稿されるようです。

上記のエラーが表示された場合は、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。
私もエラーに何回か遭遇していますが、リロードすることでほぼ全て投稿が反映されています。

4.その他

移転後、旧サーバからファイルの転送もれがいくつかあり、ファイルが参照できませんというご指摘を頂きました。最近は落ち着いてきたのですが、内部リンクでデッドリンクに遭遇した場合、ご一報頂ければ幸いです。

Comments [7] | Trackbacks [0]

Parallax Backgrounds で背景画像のスクロール速度を変える

November 15,2007 12:33 AM
Category:[JavaScript]
Tag:[]
Permalink

背景画像のスクロール速度を変えることで、コンテンツと背景画像で遠近感を演出することができるスクリプト「Parallax Backgrounds」を紹介します。

Parallax Backgrounds

公式サイトのサンプルでは、スピードが異なる2つの背景画像を組み合わせているので、やや奇抜な印象を受けますが、背景を遠方として捉えたイメージで作り直したサンプル(単に雲を除いただけ)をご覧頂ければ、シンプルな遠近感の動きを楽しめます。

サンプル

サンプル途中にある引用(blockquote)部分は、横スクロールで背景画像のスクロール速度が変わります。

以下、サンプルを例に、

  • ひとつの背景画像を縦スクロール
  • 複数の背景画像を縦スクロール
  • ひとつの背景画像を横スクロール(blockquote内)

の3通りについて設定方法を説明します。

1.ひとつの背景画像を縦スクロール

ひとつの背景画像をスクロールする場合は次のように設定します。

1.1 (X)HTML

背景を表示する要素に ground という id 属性値を付与。属性値の名称は何でも構いませんが、後で設定する CSS と JavaScript で同じ名称にする必要があります。

<body id="ground">
  :
</body>

1.2 CSS

1.1で設定した id 属性に下記のスタイルを与えます。

#ground {
    background-image: url(bg-green.gif);
    background-repeat: repeat;
    background-attachment: fixed;
}

1.3 JavaScript

下記