Movable Type 備忘録

MovableType用占いランキングを表示してみる

Apr162006
Author: bzbell
Categories: Customize
Tags: Fortune Telling, JavaScript

Next Page: MovableTypeで天気予報を表示してみる
Prev Page: 最近のトラックバックにエントリ名とリンクを表示する

ちょっとおもしろいプラグイン見つけちゃいました女性の人はもちろん、男性の人も占いを気にする人はいると思います。

ちなみに、わたしの家電占いでは携帯電話、山手線占いでは田町、六星占術では火星人の陽(+)です

今日はMovableType(ムーバブルタイプ)で「本日の占いランキング」を表示させてみました

今回参考にしたサイトはdark7.jp様です。

占いランキングを自分のブログに表示させるには、dark7.jpさんオリジナルのMTUranaiRankingプラグインを使用します。このMTUranaiRankingプラグインは、livedoor RSSからデイリーな占い情報を取得しているのだそうです。

▼MTUranaiRankingプラグインの入手はこちらから▼
http://www.drk7.jp/MT/archives/000447.html

カスタマイズ方法

MTUranaiRankingプラグインを編集します。
まず、上記リンク先から MTUranaiRanking.zip という圧縮ファイルをダウンロードしてください。圧縮ファイルを展開して、任意の文字コードで保存可能なテキストエディタで開いてください。わたしはフリーのテキストエディタEmEditorを使用しています。

イメージファイルの保存先を編集しますが、例えば http://lala.com/image/fortune/ の中にアップロードする場合には、以下のように修正します。

77行目
my $imgdir = $args->{dir} || "images/MTUranaiRanking/";
　　　　　　　　　　　　　　　　　　　　　↓
my $imgdir = $args->{dir} || "image/fortune/";

青い字の部分を赤い字のように http://lala.com/ からの相対パスで変更します。これは http://lala.com/images/ の中に MTUranaiRanking/ というディレクトリを作れるのであれば、特に変更する必要ありません。変更した場合は必ず EUC で保存してください。

修正したらサーバーにアップロードします。
いつものように、mt/plugins/ の中にアップロードしてください。また、img/ の中味すべてを各自の環境に合わせてアップロードします。ここでは、http:/lala.com/image/ の中に fortune/ ディレクトリを作成してアップロードしました。

次に、XML ディレクトリをアップロードします。
XMLの中には Simple.pm と Parse/Lite.pm というファイルがあります。これらのファイルを extlib/XML/ の中にそれぞれ同じ位置にアップロードします。

これらのファイルが既にアップロード済でしたら、あらためてアップロードする必要はありません。

わたしの場合は、既にアップロード済でしたのでアップロードしませんでした。

次に、LWP の中味を extlib/LWP/ の中にそれぞれ同じ位置にアップロードします。先ほどと同様に、既にアップロード済でしたらあらためてアップロードする必要はありません。

最後に、Jcode も extlib/Jcode/ の中に今までと同様にアップロードします。これで MTUranaiRankingプラグインのインストールは完了です。

占いランキングを表示するテンプレートを編集します。
以下のコードを表示させたい箇所に追加します。

<MTUranaiRanking oe="utf8">
    1位<img src="<$MTimg1$>" width="32" height="32" alt="<$MTtitle1$>：<$MTdescription1$>"> /
    2位<img src="<$MTimg2$>" width="32" height="32" alt="<$MTtitle2$>：<$MTdescription2$>"> /
    3位<img src="<$MTimg3$>" width="32" height="32" alt="<$MTtitle3$>：<$MTdescription3$>">
</MTUranaiRanking><br />
<div class="posted">
素材：<a href="http://www.livedoor.com/rss/" target=_blank>livedoor(RSS)</a> / <a href="http://wing.zero.ad.jp/mopet/" target=_blank>snowflake(icon)</a>
</div>

紫の字の部分を各自のMovableType(ムーバブルタイプ)の文字コードに合わせて変更します。デフォルトでは euc ですが、sjis または utf8 を環境に合わせて変更してください。ちなみにわたしのMovableType(ムーバブルタイプ)では utf8 と変更しました。

青い字が先ほどアップロードしたイメージファイルのURLとなります。ここでは http:/lala.com/image/fortune/xxxx.gif と表示されます。ランキング1位～3位まで表示されます。緑の字に1位～3位の星座名がそれぞれ表示されます。ピンクの字には運勢が表示されます。

赤い字の部分は削除しないよう注意してください。

後は、いつもの保存して再構築です。
正しくイメージが表示されない人は、MTUranaiRankingプラグインを保存した際の文字コードが間違っていたり、イメージファイルのパスが間違っていたりしますので確認してください。

以上で、本日の占いランキングを表示させることができました。わたしはプラグインをインストールしたはいいけど、イメージが表示されず、ちょっと戸惑ってしまいましたが、上記説明にもあるように、イメージファイルのパスを自分の環境に合わせることで無事表示させることができました

- 2006.04.24 追記 -

占いランキングが更新されていませんが、これはlivedoor側でランキングRSSが2005年2月で終了していたようです。現在、dark7.jpさんの方で新しいものを試験運用中だそうなので、しばらくお待ちください。

- 2006.04.24 追記 -

dark7.jpさんのところで、新しい占いプラグインが紹介されました。今度のはJAVAスクリプトで対応されていて、MovableType(ムーバブルタイプ)以外の人でも使えるようになりました。

まず、こちらのdark7.jpさんのところから占いプラグインをダウンロードします。

ダウンロードした圧縮ファイルを適当なフォルダに展開して、以下のファイルをサーバーにアップロードします。アップロード先はどこでも構いません。

・prototype.js
・xml2json.js
・Drk7jpUranai.js

次に、以下のコードを<head>～</head>の間に追加します。

<script language="javascript" type="text/javascript" src="/script/prototype.js"></script>
<script language="javascript" type="text/javascript" src="/script/xml2json.js"></script>
<script language="javascript" type="text/javascript" src="/script/Drk7jpUranai.js"></script>

青い字の部分を各自の環境に合わせて変更します。

そして、占いを表示させたい場所に以下のコードを追加します。

<div id="lurss_menu"></div>
<div id="lurss"></div>

以上で、本日の占いを表示させることができました。また、自分の星座の占いをデフォルト表示させたい場合には、Drk7jpUranai.jsの以下の行を修正します。

13行目
var LURSS_DEFAULT_ID  =
7;
var LURSS_ID          = 0;
var LURSS_COOKIE_NAME = 'lurss_id';
                ：
                ：
                ：
                ：
var LURSS_IDS         = [
    {'id':0
,'title':'牡羊座'},
    {'id':1
,'title':'牡牛座'},
    {'id':2
,'title':'双子座'},
    {'id':3
,'title':'蟹座'  },
    {'id':4
,'title':'獅子座'},
    {'id':5
,'title':'乙女座'},
    {'id':6
,'title':'天秤座'},
    {'id':7
,'title':'蠍座'  },
    {'id':8
,'title':'射手座'},
    {'id':9
,'title':'山羊座'},
    {'id':10
,'title':'水瓶座'},
    {'id':11
,'title':'魚座'  }
];