5509

jQueryでWordPressにAjax検索を実装する

ナビゲーション改善のために検索をAjaxにしてリアルタイムにできるようにしました。WordPressなら楽々実装できます。本当は誰でも簡単に使えるようにコピペできるような内容にしようと思ったりもしたんですけど、残念ながら面倒くさくなったので、僕がこのブログに実装したコードを貼るだけにします。そうです、これが手抜きです。

Read more

JSファイルを含むページをAjaxロードしたときにJSを実行しないさせないしたくない

この前ちょっと聞かれたので、メモっときます。

AjaxでJS含んだページをそのままロードするとDOMに追加した時点で実行しよるんで、それを回避するためのやつです。Autopagerizeを参考にしたと思います。

ついでに取得したHTMLの走査方法ですが、そのまま$(html)とかにすると、一番上のwrapperとかそういうdivだったりする要素が取得できないので、一旦divをかませておきます。

Ajax部分のソースコード

$.ajax({
  url: "hoge.html",
  type: "GET",
  success: function(html) {
    // 文字列で取得したデータを整理する
    html = html.replace(/]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");
    var _div = $("
" + html + "
");     // 取得したHTMLの走査は_div.find("a")のようにする     // hogehoge   } });

コピペ用

html = html.replace(/]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");

AjaxコンテンツとGooglebot、インデックスの話

最近しつこいAjaxシリーズですが、今日は実際にAjaxをほぼ全てのコンテンツで実装した際にGoogleにインデックスされるかどうかの話を。

結論から言うと、されるようです(結論のくせに曖昧ですけど!)。

今回は結局のところ、制作者の人たちはフルAjaxサイト(ってこの言葉使うの嫌なんですけど)をどうやって実装してるのかなーっていう、実例とか意見くださいエントリーです。意見ください!

Read more

SEOやJSオフ環境にも配慮したAjaxコンテンツを制作するためにできること

Ajaxを利用したコンテンツは、ユーザビリティを向上したりリッチなサイトを制作するために一役かってくれたりします。その反面Ajaxだけの視点で実装するとページ内を動的に書き換えていくため、SEOができなかったり、JSオフ環境だと閲覧できないというジレンマがあります。

解決方法を少しあげてみましょう。(以下主に全ページAjaxで構成されているようなサイトを前提にしています)

Read more

Author

nori
nori
- UI Engineer
Location
- ,