Movable Type 備忘録

 Flashカレンダーを設置してみる

  • Mar202006
  • Vote:
    http://bizcaz.com/archives/2006/03/20-000230.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

- 2007.03.10 追記 -

先日横型のフラッシュ・カレンダーを設置しようとしたら、ここで紹介している設置方法が変更になっていたので、横型のカレンダーの場合にはこちらの横型フラッシュ・カレンダーを設置してみるを参考にしてください。

先日、通常版と横長版のカレンダーを紹介しました。
以前のバージョンのカレンダーだと、月移動ができませんでしたね。 今回紹介するカレンダーは、

  • 通常版、横長版が選択可能です。
  • 月移動ができます。
  • エントリが投稿された日を強調表示します。
  • 今日の日付が枠表示されます。
  • エントリのあった日にカーソルを合わせると、その日の記事タイトルが表示されます。
  • Flashを利用したカレンダーです。見栄えがとってもいいです。

今回お世話になったサイトは、Kinarie&May様です。

動作環境として、Flash Player 6以上のプラグインがインストールされていることが前提となります。

今回紹介するFlashカレンダーは、事前に用意したXMLファイルから情報を読み出すことで、エントリが投稿された日の記事タイトルを読み出して表示されます。

カスタマイズ方法

まず、配布されているFlash素材をダウンロードします。
公開中のFlash素材からダウンロードします。

通常版、横長版とありますので、お好みでダウンロードしてください。
とりあえず、ここでは通常版使用で説明していきます。

Flash素材をサーバにアップロードします。
ダウンロードした圧縮ファイルを解凍すると、n_calendar200.swf( 横長版は w_calendar200.swf ) というファイルができます。
そのファイルを自分の環境に合わせてアップロードします。アップロード先はどこでも構いません。
ここでは、例として http://bizcaz.com/image/ の中に置くものとして説明します。

次に、カレンダー用のXMLファイルを作成します。
MovableType(ムーバブルタイプ)管理画面の左サイドバーから「テンプレート」をクリックして、右上にある「テンプレートを新規作成」というリンクをクリックします。
ここでは http://bizcaz.com/calendar.xml に作成するものとして説明します。
各入力項目は以下の通りです。

  1. テンプレート名：
  2. 例えば Flash Calendar と入力します。
  3.  
  4. 出力ファイル名：
  5. calendar.xml と入力します。
  6.  
  7. このテンプレートにリンクするファイル：
  8. 未記入でいいです。
  9.  
  10. テンプレートの内容：
  11. 以下の通常版、横長版のいずれかのコードをコピペします。

通常版の場合

  1. <?xml version="1.0" encoding="<$MTPublishCharset$>"?>
  2. <feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="<$MTDefaultLanguage$>">
  3. <MTEntries lastn="999">
  4. <entry>
  5. <link><$MTEntryLink archive_type="Daily" encode_xml="1"$></link>
  6. <created><$MTEntryDate format="%Y-%m-%dT%H:%M:%SZ"$></created>
  7. <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
  8. </entry>
  9. </MTEntries>
  10. </feed>

横長版の場合

  1. <?xml version="1.0" encoding="<$MTPublishCharset$>"?>
  2. <feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="<$MTDefaultLanguage$>">
  3. <MTEntries lastn="9999">
  4. <entry>
  5. <link><$MTEntryLink archive_type="Daily" encode_xml="1"$></link>
  6. <created><$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></created>
  7. </entry>
  8. </MTEntries>
  9. </feed>

自分が使用するタイプ(通常版、横長版)でコードが異なりますので、注意してください。

また、日付アーカイブを作成していない人は、上記青い字の箇所を以下の赤い字のように修正してください。
日付アーカイブを作成しているか分からない人は、MovableType(ムーバブルタイプ)管理画面から「設定」をクリックして、画面上部にある「公開」というリンクをクリックします。

画面下の方に「アーカイブ・マッピング」とありますので、日別にチェックがついていないようなら作成されていません。
その場合は、以下のように変更します。

  1. 変更前
  2. <$MTEntryLink archive_type="Daily" encode_xml="1"$>
  3.  
  4. 変更後
  5. <$MTEntryPermalink encode_xml="1"$>

一通り入力したら保存して再構築します。

Flashカレンダー表示のコードを作成します。
通常版、横長版に合ったページからコードを入手します。

必ず通常版使用なら通常版用のコードを、横長版使用なら横長版用のコードを入手するようにしてください。
通常版カレンダーのコードを入手する。
横長版カレンダーのコードを入手する。

以下は通常版、横長版で共通の入力項目です。

  1. swfアドレス(フルパスで)：
  2. http://lala.com/image/n_calendar200.swf と入力します。
  3.  
  4. XMLファイルアドレス(フルパスで)：
  5. http://lala.com/calendar.xml と入力します。

通常用、日別アーカイブ用、個別アーカイブ用とありますが、基本的には 通常用 を選択してくださいとのことです。

以下、MT用通常版フラッシュカレンダー2.00／Kinarie&Mayさんより引用します。

"個別アーカイブ用"はその名の通り、個別アーカイブで利用します。 個別アーカイブ用を利用すると個別エントリーを表示したときに、そのエントリーの月を表示することができます。

注意事項として、個別または日別アーカイブ用を利用するには、カレンダーを表示させたいアーカイブページのアドレスの中に、"archives/yyyy/mm"という部分が必要となります。(yyyy=年、mm=月)

一通り設定したら、「ソース表示」ボタンをクリックして、作成されたコードをコピーします。

最後に、Flashカレンダーを表示させたいテンプレートに追加します。
先ほどコピーしたFlashカレンダー表示のコードを、表示させたいテンプレートに追加します。

以上で、Flashカレンダーが表示されました。
表示されない人は、XMLファイルの作成および、Flashカレンダー表示のコード作成をもう1度見直してください。
横長版を表示させたいのに、通常版用を使用したりしてませんか!?

- 2006.06.03 追記 -

こちらのFlashカレンダーを使用すると、XHTMLがValidされませんでした。しょうがなくValidは諦めていたのですが、小粋空間さんのところで、フラッシュ素材をJAVAスクリプト化することで、XHTML validにする方法が紹介されてましたので試してみました。

以下のようなコードになります。

  1. 変更前
  2. <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0'
  3. width='650' height='25' id='calender' align=''> <param name=movie
  4. value='http://bizcaz.com/image/w_calendar210.swf?xmlURL=http://bizcaz.com/gear/calendar.xml&katachi=3&monthMoveColor=fcc150&entryDayColor=fcc150&todayColor=99cc33&title_d=1'>
  5. <param name=quality value=high><param name=wmode value=transparent><param
  6. name=bgcolor value=#FFFFFF><embed src='http://bizcaz.com/image/w_calendar210.swf?xmlURL=http://bizcaz.com/gear/calendar.xml&katachi=3&monthMoveColor=fcc150&entryDayColor=fcc150&todayColor=99cc33&title_d=1'
  7. quality=high wmode=transparent bgcolor=#FFFFFF width='650' height='25'
  8. name='calender' align='' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>
  9.  
  10. 変更後
  11. <script type="text/javascript">
  12. <!--
  13. document.write('<object classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' codebase=\'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0\' width=\'650\' height=\'25\' id=\'calender\' align=\'\'> <param name=movie value=\'http://bizcaz.com/image/w_calendar210.swf?xmlURL=http://bizcaz.com/gear/calendar.xml&katachi=3&monthMoveColor=fcc150&entryDayColor=fcc150&todayColor=99cc33&title_d=1\'> <param name=quality value=high><param name=wmode value=transparent><param name=bgcolor value=#FFFFFF><embed src=\'http://bizcaz.com/image/w_calendar210.swf?xmlURL=http://bizcaz.com/gear/calendar.xml&katachi=3&monthMoveColor=fcc150&entryDayColor=fcc150&todayColor=99cc33&title_d=1\' quality=high wmode=transparent bgcolor=#FFFFFF width=\'650\' height=\'25\' name=\'calender\' align=\'\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'></embed></object>');
  14. //-->
  15. </script>

元々のFlashカレンダーのコードをJAVAスクリプトの定義でくくります。 その際、「'」セミコロンの前に「\」エンマークを付けるのを忘れないでください。 これを忘れるとエラーします。

さらにわたしはJAVAスクリプト化したFlashカレンダーのコードをモジュール化して各テンプレートに組み込むようにしました。

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by Author Profile Page tomato @ October 24, 2006 [REPLY]
user-pic

bzbellさん、こんばんは！

可愛い犬の足跡のＦｌａｓｈ・カレンダーをなんとか頑張ってみたのですが、なぜか表示できませんでした。
bzbellさんの横型のカレンダーも可愛いので、今回はこのままにします。
また、機会をみて再トライしたいと思います。

大変ありがとうございました。
tomato

 
#2: Posted by bzbell @ October 24, 2006 [REPLY]
user-pic

>>1 tomato さん

こんにちわ^^

> 可愛い犬の足跡のＦｌａｓｈ・カレンダーをなんとか頑張ってみたのですが、なぜか表示できませんでした。

そうですか、残念です（つω-`｡）
機会をみてTRYしてみてください(￣∇￣)/
言って頂ければサンプル作りますので♪♪♪

 

 Post a Comment

 

コメント用フィード