MovableTypeのススメ

MovableTypeのススメで“Ajax”タグの付いているブログ記事

2007年11月 2日

Ajaxでアクセスランキングを表示

MovableType備忘録さんで公開されているAjaxを用いたアクセスランキングの表示を試してみました。（当サイトではアクセスが多い上位５件を表示しています。）

これは、自サイトのページ毎のアクセスをカウントしてランキング表示してくれるというものです。（ログはテキストファイルに記録されます。）

prototype版とjQuery版が公開されています。

設置方法は下記を参照下さい。
Ajaxでアクセス・ランキングを表示する３

思った以上に設置にてこずりましたが、なんとか動くようになりました。

設置のポイントは解説中の４番のこの部分だと思います。おそらく（汗

また、MT の管理画面からインデックステンプレートを新規作成して、prototype.pagerank.js( or jquery.pagerank.js )をコピー & ペーストして再構築すると、ブログIDやURLなどが自動的に割り当てられます。

それと、MovableType4の場合、ブラウザに依存するのかタイトル部分が改行されてログ出力されてしまうケースがあるそうでヘッダー部分の変更が必要です。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

2007年9月12日

jquery.jsとprototype.jsの干渉について

実はThickBox3を導入してからAjaxカレンダーが表示されなくなってました。

で、いろいろと調べたところThickBox3で使っているjquery.jsとAjaxカレンダーで使っているprototype.jsが干渉している様子。

あまり詳しいことはわかりませんが、jquery.jsとprototype.js共に$()という書式を持っていてそれぞれの戻り値が異なるためおきているようです。

以下はその対策です。

１．ヘッダー部分を下記のように変更（赤字部分を追加）

<head>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>jquery.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
</script>

</head>

２．thickbox.jsを開き $() function を jQuery() function に置換
具体的にはテキストエディタの一括置換で$(をjQuery(に置き換えました。

３．修正したthickbox.jsをアップロード

以上でThickBox・Ajaxカレンダー共に機能するようになりました。

参考にしたサイト
ウノウラボ
夜の Discovery

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

2007年9月 4日

Ajaxで画像表示（ThickBox3）

~~ThickBox3で利用しているjquery.jsが原因でAjaxカレンダーが表示できなくなったため現在、ThickBox3の使用を止めています。なのでサンプルは動きません。~~
調べたところprototype.jsがjQuery.jsに干渉しているようです。
上記の問題を修正しました。詳しくはコチラ

ThickBox3はAjaxを利用して画像を表示するライブラリです。
同じようなものにLightboxもありますが、今回はThickBoxを使ってみることに。

設置するとこんな感じで表示されます。（サンプル）

それでは設置方法です。

１．下記サイトより必要なファイルをダウンロード

ThickBox 3.1

「Download」の箇所に各ファイルへのリンクがあるので、右クリックし対象をファイルへ保存。必要なファイルは下記の通りです。

・thickbox.js
・jquery.js
・thickbox.css
・loadingAnimation.gif

２．ダウンロードしたファイルを自身のサーバにあわせてアップロード

３．テンプレートの<head>～</head> に下記を追加・再構築

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

<link rel="stylesheet" href="<$MTBlogURL$>thickbox.css" type="text/css" media="screen" />

パス部分は自身のサーバにあわせて書き換えてください。

４．<a>タグのclass属性にthickboxを指定する。

<a href="http://mt.nosusume.com/img/sample_l.gif" title="サンプル" class="thickbox">サンプル</a>

左下のキャプションはtittle属性で指定できます。

以上です。

他にもいろいろと機能があるようです。
詳しくは本家サイトを参照して下さい。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

2007年8月22日

リンク先のプレビュー表示｜WebSnapr2.0

最近、いろいろなところで見かけるリンク先のプレビュー表示を試してみました。
探してみると、いろんなのがありますね。

で、今回試したのはWebSnapr2.0

他のものに比べると表示がシンプルで余計なリンクがないところがいいです。

導入手順は下記のとおりです。

１．WebSnapr2.0のサイトよりpreviewbubble.zipをダウンロードし解凍
２．previewbubble.jsの10行目の画像パスの設定を変更（赤字部分）

var bubbleImagePath = '/images/bg.png';

３．previewbubble.js、bg.pngをアップロード

４．テンプレートのヘッダー部分に下記を挿入

<script type="text/javascript" src="previewbubble.js"></script>

５．プレビュー表示したいリンクに対してclass="previewlink"を設定

<a class="previewlink" href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>

以上です。

プレビューを表示したい部分にだけ設定できるところもGOOD！

気になる点としてはプレビューが表示されるまで時間がかかるところですが、
しばらく様子を見てみようと思います。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

2007年8月21日

Ajax 月送りカレンダー

MovableType4になりアーカイブマッピングの方法が変更になったため設置に手間取っていたのですが小粋空間さんで詳しい方法が公開されていました。

実はアーカイブマッピングの場所を見つけるだけで苦労してました(^ ^;
以前（MT3）の方がわかりやすかったような・・・

こちらで詳しく設置方法が解説されています。
Ajax 月送りカレンダー（MT4版）

この手順通りにやればOKです。

再構築時に下記のエラーが表示される場合は
アーカイブマッピングの設定を見直しましょう。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [2] | Trackbacks [0]