[JS]チョー簡単にサイトをAJAX対応にするスクリプト -com.bydust.ajax

com.bydust.ajaxは、スタティックなサイトでもWordPressのようなサイトでも、ページ全体のロードをせずに必要な箇所のみロードして表示するAJAX対応にするスクリプトです。

デモサイトでは、右のナビゲーションや各記事のタイトルをクリックすると、通常のページ遷移とは異なり必要な箇所のみ非同期通信を行い表示します。
※外部リンクなどは自動認識して、別ウインドウで表示します。

サイトをAJAX対応にする方法

サイトをAJAX対応にする基本的なスクリプトの設置方法は、下記の通りです。
下記は、対象となる全ページに適用します。

ダウンロードした２つのスクリプト（com.bydust.ajax.js, com.bydust.array.js）を外部スクリプトとして記述します。
HTMLの基本構造は、「id="page"」を親要素として、「id="content"」「id="sidebar"」のコンテンツとサイドバーを並列に配置します。
※コメント（begin, end）は必須です。

<div id="page">
<div id="content">
<!-- begin content -->
*your primary content*
<!-- end content -->
</div>
<div id="sidebar">
<!-- begin sidebar -->
*your secondary content*
<!-- end sidebar -->
</div>
</div>

下記のスクリプトを記述します。

<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// you need to mark your primary area with a "!".
// you can add as many secondary area's as you like, for example
// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
bda.start(refreshed_content); // initiate the script
}
</script>

以上で、完了です。

WordPressをAJAX対応にする方法

com.bydust.ajaxは、WordPressのテーマファイルにも簡単にAJAX対応に変更できます。

以下、「WordPress Classic」への設置方法です。

ダウンロードした２つのスクリプト（com.bydust.ajax.js, com.bydust.array.js）を外部スクリプトとして「header.php」に記述します。
下記のスクリプトを「header.php」に記述します。

<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// you need to mark your primary area with a "!".
// you can add as many secondary area's as you like, for example
// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
bda.start(refreshed_content); // initiate the script
}
</script>

次に、親要素「id="page"」を設置します。
「header.php」の「<div id="content">」の前に、「<div id="page"><!–– begin content ––>」を記述します。
「footer.php」の「<!–– end content ––><p class="credit">」の前に、「</div>」を記述します。
最後に「sidebar」を修正します。
「sidebar.php」の「<div id="menu">」を<div id="sidebar">に変更し、「<!–– begin sidebar ––>」を記述します。
一番下にある「</div>」の前に「<!–– end sidebar ––>」を記述します。
「style.css」内の「menu」の箇所を全て、「sidebar」に変更します。

以上で、完了です。

WordPressに設置する際の補足

contentやsidebarの前後に記述するコメントは、スペースを含め正確に記述する必要があります。
「WordPress Classic」のように「index.php」でアーカイブやシングルやページを表示する以外のテーマファイルに設置する場合は、「archive.php, page.php, single.php」など全てのファイルに記述をします。
「WordPress Classic」の「 id="menu"」を変更しない場合は、「header.php」のスクリプトに「var refreshed_content = Array('!content','menu');」と記述し、コメントの「sidebar」を「menu」にして記述します。
WorsPress Classicの差分ファイルです。
Classicの差分ファイル
スクリプト（com.bydust.ajax.js, com.bydust.array.js）は本家からダウンロードしてください。
3カラムでテストした「Writer's Quill」の差分ファイルです。
Writer's Quillの差分ファイル
スクリプト（com.bydust.ajax.js, com.bydust.array.js）は本家からダウンロードしてください。

Post on:2008年11月10日

top of page

Trackback

leave your Comments

Comments

KRUZ-GRAPHIX

on 2008年11月11日

WordPressをAJAX化したいのです

WordPressをAJAX化したいのです。しかも、カンタンに！
そんなユーザーにピッタリのスクリプトを、コリスさんに見つけましたのでメモメモ…
…

メシウマ状態　飯の旨いおかずがてんこ盛り

on 2008年11月12日

ゆるキャラ粗製濫造ブームに彗星の如く登場した病みキャラ

あとで新聞 – 2008年11月12日(水)から

昔の広末涼子はすごかった:アルファルファモザイク
広末画像スレ。昔ロダで拾った制服姿の広末がスカートをめくって見せる動画をYouTubeにアップした…

shota

on 2008年11月13日

WordPress2.6に組み込んでみたが内部リンクがすべて絶対パスのせいか外部リンクとして扱われてしまう？
断念ｗ

コリス

on 2008年11月13日

> shota さん

それがそうなのか分かりませんが、外部リンク扱いになってしまうのは、パス設定が原因ではないことがありました。
複数のサイト・テーマファイルで試しましたが、僕の場合は外部リンク扱いになってしまったものは、設置方法が間違っていただけでした。

shota

on 2008年11月13日

> コリスさん
ご返信いただきありがとうございます。

現在使っているテンプレートは
“content”"navi”"others”の3カラム構成ですので
勘で”var refreshed_content = Array(‘!content’,'navi’,'others’); “と変更を加えました。
ゆえにテンプレート自体はヘッダーのみの修正だけです。

そもそもこの勘の部分が間違っていたのでしょうか？＾＾；

コリス

on 2008年11月13日

> shota さん

3カラムでは試してないので、合間をみてやってみます。

コリス

on 2008年11月13日

> shota さん

たぶん、コメントがポイントになっていると思います。
他にも、はまりそうな箇所を上のエントリーに追記しました。

僕の場合はあまり考えずにコピペしていたので、コメントが重要ということに気がつきませんでした。

shota

on 2008年11月15日

> コリスさん
早速の更新ありがとうございます。

さっそく試してみましたがダメでした・・・
もう何がなんだかｗｗ

Alice

on 2008年11月15日

私も外部リンクになってしまいましたが、コリスさんのタグをまるごとコピペするとなぜか文字化けやのように、–が多く表示されてしまい、それが原因で外部リンクになっていました。ひとまずご報告まで。
しかし、外部リンクにならないにしても、AJAX適応後の転送先が、http://xxx.jp/ディレクトリ名/#/ディレクトリ名/?cat=1などのように、ディレクトリ名が重複してうまく飛んでくれません。
因みに試したのは同じwordpress classicテーマで、インストールしたばかりのwordpressに試してみました。

コリス

on 2008年11月15日

> shota さん

うーん、なんでしょうね。
コメントが当たりと思ったのですが。

他にも試してみたことを追記しときます。
「Array」内の順番は関係がない。
「Array」内に５つ記述しても大丈夫だった。
「Array」内に実体やコメントが無いものを記述するとエラー。
「content」に空の親要素で入れ子にしても大丈夫。
各エレメントは、異なるノードでも大丈夫。

あとは、一番シンプルなテーマで動作確認をしてみる、というところでしょうか。
3カラムのテストしたテーマ（Writer's Quill）の差分をアップしたので、よかったら試してみてください。

コリス

on 2008年11月15日

> Alice さん

再度、コードを確認してみましたが、コピペでのハイフンやスペースは間違いが無い状態でした。

カテゴリがURLに重複していても、僕のテストしたものは問題無く表示されています。
トップからアクセスするとhttp://xxx.jp/#以下で展開していきますが、配下ページだとhttp://xxx.jp/ディレクトリ名/#以下で展開します。#以下は絶対パスで表示されています。

classicの差分ファイルを上記エントリーに追記したので、よかったら試してみてください。

Alice

on 2008年11月16日

わー！ありがとうございます！
コリスさんの差分ファイルと私の差分ファイルを比べてみたのですが、やはりコメント部分を完全に間違えていて、header.phpの
div id=”content”
の後に
begin content
のコメントを入れなくてはいけないところを、
div id=”page”
の後にコメントを入れていた事と、footer.phpのend contentが無かったことの二つに起因していました。完全に読み間違えていましたね・・・わざわざ差分ファイルまで用意していただいて、本当にありがとうございました。ずっとサイトをAJAX化したいと思っていたのでとても嬉しいです。
ちゃんとAJAX化できたらご報告にまいりますね。

コリス

on 2008年11月16日

> Alice さん

うまくいくといいですね、
楽しみにしています。

Alice

on 2009年3月3日

こんにちは。
すっかり時間が経ってしまいましたが、頂いたテンプレートでサイトを作ることができました。wordpressのプラグインも色々探してみて、こういうjavascriptが欲しいと日頃から思っていたので嬉しかったです。記事にしてくださってありがとうございました！
なぜか、lightboxなど他のライブラリとは共存できなくてうなっている最中ですが、いいサイト作れるように頑張ります。

コリス

on 2009年3月3日

> Alice さん

お役に立てて、よかったです。
他のものと共存する際は、一つずつ確認しながらやると意外と簡単に問題が解決する時がありますよ。

よしだ

on 2009年3月19日

いつも拝読させて頂いています。
この記事のajaxは、ナビゲーションを横に置く形しか無理でしょうか…？
横並びのメニューがページ上部にあって、
その下にコンテンツがある、というページレイアウトでは
使えない感じでしょうか…？

コリス

on 2009年3月19日

> よしださん

いつもご訪問、ありがとうございます。

ナビゲーションが上部にある場合でも、問題無く設置できると思います。
まずは、シンプルな状態で設置して、動作確認してから最終版で実装することをお勧めします。
「補足」などにもあるように、設置時は正確に記述してください。

よしだ

on 2009年3月19日

コメントありがとうございました！
書き込みの後これまで制作したサイトのいくつかに適用してみたのですが
なにかしらの理由でcssに影響があるような感じがしました。
最初に書き込んだときの理由は、
floatしてないはずの部分がfloatしたり、
その次に適用したサイトでは一部のcssが反映されてなかったり。
そんな現象が起きていたので書き込みさせて頂いた次第でした。

ただ、基本的な動作は一応出来た様子ですので
おっしゃって頂いたように簡単なソースから一度作成してみようと思います。
ありがとうございました。

コリス

on 2009年3月19日

> よしださん

基本的な動作が確認できて、よかったです。
「いくつかに」ってことは、複数のサイトに設置するのですね、
がんばってください :-)

top of page