jlamp.netPHPerで何が悪い！
Ajax+pushStateでページ遷移したときにFacebookプラグインを更新する方法
jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法という記事を書きましたが、じつはAjaxでページを切り替えると、いろんな不都合が生じることが多いです。 とくに外部サービスのプラグインに多くて、ページを全部更新すれば正常なのに、Ajaxで更新したときだけエラーになることがよくあります。本当によくあります(^_^;) 原因としては、外部サービスのプラグインはだいたい、ページ読み込み後に独自のJavaScriptを実行するのですが、Ajaxでページの一部を変えてもプラグインが気づかないため、独自のJavaScriptが実行されずにエラーとなってしまいます。 ただ、気の利いたサービスならAjaxで読み込まれたときの対応方法が用意されています。例えば、Facebook。 ここSensebahnでも実装しているFacebookの「いいねボタン」をAjax対応にする方法をまと
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
AJAXの無効化 - jQuery Mobile メモ - オレスタ
jQuery Mobileに待ちに待ったベータ版が登場しました。ここでは自分でも後から使えるjQuery Mobileの設定・構築メモをエントリしていこうと思っています。 最初はAJAXの無効化について。あちこちのサイトでjQeury MobileではじめにやることにAJAXの無効化が挙げられています。デフォルトで有効になっているjQuery MobileのAJAX機能は、リンクやフォームサブミットのアクションで対象のページを現在のページ内に読み込みます。一見便利そうでスマートフォンらしく見えますが、読み込んだページのURLは#で繋がれ実際にはページ遷移しないため、画像パスの設計やPHPなどの動的サイト作成時は煩雑になりがちです。 <script language="JavaScript"> // ajax の無効化 $.mobile.ajaxEnabled = false; </scri
Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法
[対象: 上級] Ajax利用したコンテンツをGoogleにクロール可能・インデックス可能にさせるための設定方法を今日は取り上げます。 すでにAjaxを理解している人向けなのと自分へのメモを兼ねているのでAjaxに対する細かな説明や用語解説は省きます。 「#」（ハッシュ）がURLに含まれている場合、#以下のURLをGoogleを含む検索エンジンはインデックスしません。 A. http://www.suzukikenichi.com/ajax.html#abc B. http://www.suzukikenichi.com/ajax.html#xyz 上のAとBはどちらも、http://www.suzukikenichi.com/ajax.html というURLをクロールしてインデックスするだけです。 #付きのURLをインデックスすることはありません（終わりに補足説明あり）。 Ajaxでは、
jQuery Form Plugin
Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easie
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
jQuery POSTメソッドでAjax通信を行う(JSONレスポンス版) | Ajaxの覚え書き＠じゅえ
Ajaxの覚え書き＠じゅえ Ajaxを使って一味違ったホームページを作ってみませんか？ このサイトでは、Yahoo! User Interface Library、Ext JS、Dojo Toolkitなどの Ajaxライブラリを使ったAjaxのサンプル集を掲載しています。 POSTメソッドでAjax通信を行うには、$.ajax()メソッドを使用します。 $.ajax()メソッドのurlオプションにアクセス先のURLを、typeオプションに"POST"を、dataオプションに送信するデータオブジェクトを、dataTypeオプションに"json"を記述します。 また、successオプションに通信成功時の処理(メソッド)を、errorオプションに通信失敗時の処理(メソッド)を記述します。 サンプルでは、通信終了時にも処理を行うためにcompleteオプションに通信終了時の処理(メソッド
Google App Engine で動く Full Ajax なタスク管理アプリケーションを作ってみた - present
これまで、タスク管理に check*pad や Remember The Milk を使ってきたんですが、どれもしっくりきませんでした。check*pad はシンプル過ぎるし、RTM は UI が使いにくい。 Mac の Things や OmniFocus は良さそうなんですが、あいにく私のマシンは Windows。あ、Things や OmniFocus は有料でしたね。貧乏な私には手が出ません。Mac 持っていたとしてもダメでした。Windows で良いタスク管理アプリってありますか？しかも無料で。 仕方ないので、自分にあったものを自作することにしました。隙間時間にコツコツと、3か月近くかけて作成したのがこちら*1。 http://task-accelerator.appspot.com/ Web ブラウザ上で動く Full Ajax なタスク管理アプリです。レンタルサーバーを借りた
通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
SEOにも強いクローラブルなAJAXコンテンツを作成するために :: 5509
AJAXコンテンツが増えるにつれて問題になるのは、SEOというか、検索エンジンにどうクローリング、インデックスさせるのか、という点ですよね。 この前JavaScriptの実装を担当した松本クリニックは、AJAXでほぼ全てのページを切り替えるっていうのが最大のポイントなんですけど、これの良いところはWordPressで全てのページを生成してて、JSオンでもオフでも見られるんですね。つまり、クローラはオフのコンテンツを見るような作りにしてあります。 で、こういうのって小規模～中規模なサイトならまだいいと思いますけど、大規模なサイトになってきたりするとページは存在しないでデータだけが存在したりする（ハンドラにリクエストをかけてJSONだけを返してもらって内容を入れ替える、など・・・）わけで、実現が難しくなるんですね。 この問題に対してGoogleが現在公表している方法は、HTML snapsho
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 ::SEM R (#SEMR)
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 AJAXアプリ（サイト）をクローラブル（crawlable）にするための技術的アプローチ。Googleが公開した最新ドキュメントを基に解説します。 公開日時：2010年03月05日 19:53 米Googleが、AJAXベースのウェブサイトをコンテンツを検索エンジンに登録する方法についての、最新ドキュメントを公開しました。昨年10月に検討段階の実装方法が公式サイトで紹介されましたが、それのアップデート版になります。 最初におさらいをします。AJAX（エイジャックス）は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能です。しかし、いまブラウザで表示している内容と対になるURLが存在しないために、クローラが個々のコンテンツをクロールできないこと、また、仮にステートフルU
Aptana Jaxerで解決するAjaxのSEO対策とは？（1/4） ─ ＠IT
Aptana Jaxerで解決するAjaxのSEO対策とは？：パターンとライブラリで作るAjaxおいしいレシピ（6）（1/4 ページ） 今回はAjaxの問題点であるSMO、SEOへの対応 今回はAjaxの「SMO」対応、「SEO」（Search Engine Optimization、検索エンジン最適化）対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。 「SMO」とは、ソーシャルメディア最適化（Social Media Optimization）のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。 ■ Ajaxの“問題点”とは？ Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スム
GAE, Slim3, Scenic3 環境下でAjaxなBlobstore利用
検証コード書いてちゃんと動作したので備忘録的な感じで。 後日丁寧に書く予定。とりあえず箇条書き 前提 ・jQuery.upload利用 ・コントローラ側は「アップロードURL返す」「Blobstoreアップロードからの戻り直後」「戻り直後からリダイレクトされJSON生成」の３段階用意 １，アップロードボタン押す ２，UploadUrlリクエスト、Jsonで取得しそのままアップロード ３，戻りURLをコントローラを指定しておいて、そこに戻す。そのタイミングではRedirectでなければ戻せない約束事なので一旦別のコントローラにリダイレクト（画像URLを一緒に渡す） ４，別のコントローラは画像URLをJSON化してクライアントに戻す ５，クライアントはAJAXな動きでBLOBSTOREを利用することができる リクエスト用HTML＆JavaScript <!-- BlobStore直接アップロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign in - Google Accounts