AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 投稿日2011年06月20日 更新日2011年06月20日 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
Google AJAX Feed APIではてなブックマークの人気エントリーを表示
この度若干リニューアルして、フッターにはてなブックマークの人気エントリーを10件表示しました。今回はその表示方法を1つ紹介します。ブログパーツもあるけどデザインがちょっと、、という方はぜひご活用ください。 このRSSフィードを表示させると人気エントリー一覧となります。表示の方法はphpやJavaScriptになると思いますが、このブログはFC2ブログを使ってるので今回はGoogle AJAX Feed APIを使ってみます。 <script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI-key"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed =
【レビュー】Googleからの贈り物 - Google AJAX Language APIでカンタンに翻訳サイトを (1) 超シンプルなAPIながらスゴイ実力 | エンタープライズ | マイコミジャーナル
20日に発表されたGoogleの新しいWeb API、Google AJAX Language APIは、誰でも簡単に言語の翻訳を行えるようにするJavaScript APIだ。同APIを使うと、JavaScript文字列に対して「日本語←→英語」や「中国語←→英語」と言った変換を簡単に行えるのみならず、文字列が何語で書かれているかを自動判別することもできる。 同APIのパワーがどれほどのものかというと、以下のような翻訳サイトを10分足らずで作れてしまったほどだ(ソースコードは次ページで解説)。 非常にシンプルなAPI(メソッド2つしかない!)にも関わらず、そのパワーがあまりに凄まじすぎる。この興奮をぜひ皆さんにもお伝えしたいと思う。 ということで、さっそくLanguage APIの使い方を学んでいこう。
Google AJAX Language APIで、ページ丸ごと多言語対応 | 主にWeb技術ネタ ブログ
Javascriptだけで、既存のページを丸ごと翻訳して多言語対応できるようにしてみました。 翻訳精度はAPI次第なので、実用に耐えるかどうかは分かりませんが・・・^^; Google AJAX Language APIについては、 http://code.google.com/intl/ja/apis/ajaxlanguage/ ■ 動作サンプル 記事部分を翻訳します。 画面右上の「翻訳する(Translate)」を操作してみてください。 ※翻訳後、元に戻す場合はリロードしてください。 ■ 設置方法 1. <head>タグ内に以下のスクリプトをコピーします。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"
Google AJAX Feed API入門
他のサイトが配信しているATOMやRSSフィードをJavaScriptを使って取得しようとした場合、同一生成元ポリシー(Same-Origin Policy)の制限によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要でした。 Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。 ここではGoogle AJAX Feed APIを使ってATOMやRSSフィードを取得する方法などを解説していきます。 Google AJAX Feed APIとは ドキュメント
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
Ajaxを使うためにはページ内リンク (hash fragment=URLの#以降) を使うのが一般的*1 hash fragmentはサーバに送信されないから、JavaScript非対応のブラウザだと動作しない 特にサーチエンジンのクローラ等で問題になる*2 そこで Google は、#! が含まれる URL を hash を含まないものに読み替える仕組みを提唱している。例えば「www.example.com/ajax.html#!key=value」のサーチエンジン用URLは「www.example.com/ajax.html?_escaped_fragment_=key=value」になる。 TwitterやFacebookはこの仕様に従うことで、Ajax な UI と SEO を同時に実現している、というわけ。ということを調べたなう。 参照: Getting Started |
Google Chrome でAjaxを利用しローカルファイルにアクセスする
Google Chrome でAjaxを利用しローカルファイルにアクセスする Google Chrome5.0.335以降でどうやらローカルファイへのアクセスポリシーが変更されており、AjaxのXMLHttpRequest でローカルのHTMLなどからローカルファイルにアクセスが出来なくなってしまったようです。[5.0.335 Update] ローカルサーバーなどを立てて開発している場合は問題ないんですが、たんなるローカルファイルとして開発しているとやっかいですね。 解決方法としては、Google Chromeの起動オプションに次のコードを追加します。 -allow-file-access-from-files 起動オプションはWindowsですと、アプリのショートカットアイコンを右クリックしてプロパティを選択、リンク先を次のように変更することで付加できます。 C:\Users\...(中
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
タイムテーブルを実装するための便利なJavaScriptライブラリ『today's timetable』 | IDEA*IDEA
Ajaxの学習ならAjaxTower