Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

AjaxでIFRAME的な表示をやってみる

Nov132006
Vote:
http://bizcaz.com/archives/2006/11/13-000253.php
Categories: Customize
Tags: Ajax
Social Bookmark

Prev Page: MT3.3標準タグ機能とtagwireプラグインを併用する
Next Page: tagwireプラグインでカラフルなタグクラウドを作る

今まで見てきたAjaxによる非同期表示は、どれもJSからCGIやPHPスクリプトなどを呼び出して、その結果を表示するものでした。

前々から<iframe>のように、ページをただ表示するだけってできないのかなぁ…とずっと考えてたんです。
<iframe>みたく表示できたら、もしかしたらテンプレート差し替えってメイン・インデックスのみでもいいかも…なんてヌルいこと考えてました。

ネットでいろいろ徘徊してたら、思いのほかカンタンにできちゃったのでご紹介します。
Ajaxを理解している人にとっては次元の低い話なんでしょうけど (;￣∇￣A

まずはサンプルですね。

わたしのサイトでは、コメントフォームをここで紹介するカスタマイズで表示させています。
メリットとしては、mt-comments.cgiのパスはもちろんのこと、コメントフォームがエントリ・ページ内に記述されなくなるので、コメント・スパム対策としても有効かな、と思ってます。

デメリットとしては、Ajaxがそもそも動的なものなので、SEOとしてはマイナスだと思ってます。
なので、このカスタマイズを使用する場合には、コンテンツを充実させる上で付加価値的なものをAjaxでロードするようにした方がいいかも、です。

前準備

まずは、以下のコードをコピペして適当なファイル名で保存してください。
とりえあず、ここではajaxcontents.jsとして説明します。
1. var outputDivId = 'content_posted';
2. var outputProgress = 'progress';
4. function ajax_content_onload_get(url, pars, divId, divProgress)
5. {
6. outputDivId = divId;
7. outputProgress = divProgress;
9. document.getElementById(outputDivId).innerHTML = '';
10. document.getElementById(outputProgress).style.display = '';
11. var myAjax = new Ajax.Request(url, {
12. method: 'get',
13. parameters: pars,
14. onComplete: ajax_content_complete
15. });
16. return false;
17. }
19. function ajax_content_complete(RequestText)
20. {
21. document.getElementById(outputProgress).style.display = 'none';
22. document.getElementById(outputDivId).innerHTML = RequestText.responseText;
23. }
25. function ajax_content_clear()
26. {
27. // 表示してるデータをクリア
28. document.getElementById(outputDivId).innerHTML = '';
29. }
保存したらサーバにアップロードします。
アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

ここでは、メインページと同じ場所にアップロードするものとして説明していきます。

以上で前準備は完了です。
今度は上記JavaScriptを使ってAjaxで外部ファイルをロードしてみます。

カスタマイズ

ここではとりあえず、適当なファイルをAjaxでロードしてみます。

Ajaxで読み込むための、適当なテキストファイルまたは、結果を出力するようなCGIを用意します。
たとえば、こちらのブラウザの機能を取得するget_browserを使えるようにするで紹介した、スクリプトを以下に記します。
1. <?php
2. echo $_SERVER['HTTP_USER_AGENT'].'<br /><br />';
3. ?>
上記コードを適当なファイルに保存(たとえば、get_browser.php)します。
次に、外部ファイルをロードしたいページのテンプレート中の、<head>～</head>の間に以下を追加します。
1. <script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
2. <script type="text/javascript" src="<$MTBlogURL$>ajaxcontents.js"></script>
青い字の部分を各自の環境に合わせて変更します。
prototype.jsがない人はこちらのDownload Prototypeからダウンロードできます。
外部ファイルをロードする箇所に以下のコードを追加します。
1. <img id="ajax_content_progress" style="display:none;" src="http://●●●/ajax-loader.gif" alt="Loading..." />
2. <div id="ajax_content_block"></div>
青い字の部分を各自の環境に合わせて変更します。
Ajax Loader(ajax-loader.gif)はこちらのAjaxload - Ajax loading gif generatorからお好みで作成できます。
ページが表示されたら外部ファイルをロードするようにします。
</body>タグの直上あたりに以下のコードを追加します。
1. <script type="text/javascript">
2. 
5. </script>
青い字の部分で、ロードする外部ファイルのURLを指定します。
赤い字の部分では先ほど追加した<div id="ajax_content_block">タグIDを指定します。ロードされたデータはここに表示されます。
緑の字の部分は、同じく先ほど追加した、Ajax Loader(ajax-loader.gif)のタグIDを指定します。

以上で完了です。
再構築して、ブラウザから表示してみてください。

正しく外部ファイルの内容が表示できればOKです。
何らかのエラーが出た場合には、外部ファイルのURLや各タグIDの指定にミスがないか確認してください。

前にも言ったように、わたしのサイトではこのカスタマイズを応用して、コメント・フォームを外部に取り出して、Ajaxでロードしています。それ以外でも、タグクラウドの検索結果なども、このカスタマイズの応用して表示しています。

アイデア次第で、いろんなことに使えそうです。
いつものごとく、文字コードにUTF-8以外をお使いの人はこちらのAjaxの出力結果を文字コード変換すると併用するといいかも、です。

Edit
Permalink
4 Comments
1 TrackBack

Trackback Pings(1)

TrackBack URL for this entry:

from MovableType備忘録: こんにちわ^^ こちらのK's Laboさんのところでmoo.fxを使用したタブ表示を紹介してたので、わたしもmoo.fx+Ajaxを使ってカレンダーを作...
Tracked on September 29, 2007

Comments(4)

#1: Posted by mr_moo @ March 8, 2007 [REPLY]

bzbellさん、はじめまして！
トラックバックとコメント一覧表示をajaxで見せるのをやりたくて、
ひとまずこちらのエントリーにチャレンジしています。
「Ajaxで<iframe>のようにページを表示する」以降をそのままやってみても本文表示がされません。

そこで質問です。
・setdataという関数はどこにあるものを呼んでいるのでしょうか？
・ajaxcontent.js内にある関数はいつ使っているんでしょうか？

すごく初心者な質問で申し訳ないのですが、よろしくお願いします。

#2: Posted by bzbell @ March 8, 2007 [REPLY]

>>1 mr_moo さん

はじめまして^^

お返事が遅くなってすいません。
ご質問の件ですが、

setdataという関数はどこにあるものを呼んでいるのでしょうか？
setdataという関数はありません。わたしの記述ミスです。ごめんなさい (m;_ _)mペコ
正しくは、ajax_content_onload_getです。この関数はajaxcontents.js内にあります。
ajaxcontent.js内にある関数はいつ使っているんでしょうか？
はい。ページ表示時に上記関数ajax_content_onload_getが実行されます。そうすると、第１パラメータで指定されたURLのスクリプトを実行してくれます。
そして、その応答がajaxcontent.js内のajax_content_completeに戻ってきて、ajax_content_onload_getで指定した第２パラメータで指定したブロックに表示してくれています。

こんなかんじでよかったですか（;￣∇￣A

#3: Posted by mr_moo @ March 9, 2007 [REPLY]

>>2 bzbell さん

ご回答ありがとうございました！

関数ajax_content_onload_getのparsとdivProgressをどう使うものやら、と思いまして
結果、その二つのパラメータを削って、以下のようにして動かしました！

コメントとトラックバック一覧のほうも、この流れで実装できる感じです！
どうもありがとうございました！

ajaxcontent.js
------------------------------------------------------------------------
var outputDivId = 'content_posted'

function ajax_content_onload_get(url, divId)
{
outputDivId = divId;
document.getElementById(outputDivId).innerHTML = '';
var myAjax = new Ajax.Request(url, {
method: 'get',
onComplete: ajax_content_complete
});
return false;
}

function ajax_content_complete(RequestText)
{
document.getElementById(outputDivId).innerHTML = RequestText.responseText;
}

function ajax_content_clear()
{
// 表示してるデータをクリア
document.getElementById(outputDivId).innerHTML='';
}
------------------------------------------------------------------------

html
------------------------------------------------------------------------
<ul>
<MTEntries>
<li>
<a href="javascript:void(0)" title="<$MTEntryTitle$>" onclick="ajax_content_onload_get('<$MTEntryPermalink$>','ajax_content')"><$MTEntryTitle$> <$MTEntryDate language="en" format="%m/%d"$></a>
</li>
</MTEntries>
</ul>

<div id="ajax_content"></div>
------------------------------------------------------------------------

#4: Posted by bzbell @ March 10, 2007 [REPLY]