Ajaxクロールの推奨構成のサポートをGoogleがついに終了
[レベル: 上級] Googleは、今からさかのぼること2009年に公開した、Ajaxクロールの推奨構成を終了することを公式にアナウンスしました。 以前の推奨構成を保持したままでもインデックスされ続けますが、現状に即した技術を利用するように促しています。 ごく限られたJavaScriptしか実行できなかった当時、GoogleはAjaxによって生成されるコンテンツを確実にクロール、インデックスするために特殊な構成をウェブマスターに提唱しました。 この構成を、ざっと簡単に説明すると次のようになります。 ウェブページのレンダリングをすませた、いわゆる“スナップショット”を事前に作成しておき、AjaxページにGooglebotがアクセスしたときには準備済みのスナップショットを返す。 Googlebotにスナップショットを取得させるために、AjaxページのURLに含まれる「#」（ハッシュ、フラグメン
やさしい AJAX on Rails という資料を作りました - satococoa's blog
最近 SPA (Single Page Application) についての議論が盛んで、Angular とか React とか Flux とか Mithril とかの名前をよく聞くようになりました。 でも必ずしも全ての Web アプリにおいて SPA は必須ではありません。 むしろ枯れた jQuery と Rails の remote: true の仕組みを正しく使うだけで十分なケースも多数あると思います。 (特に iOS, Android のネイティブ開発者が身近にいる環境では SPA で開発するのとネイティブで実装するのとでは後者の方がコストが低いこともありますし。) ということで、「じゃあ Rails で Ajax ってどうやって実装するんだっけか？」というところをまとめた資料を公開します。 中級者以上の方にとっては特に目新しい情報は無いと思いますが、経験の浅い方の自己学習や研修な
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
さらなる「#!」URL批判 - karasuyamatenguの日記
このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。 http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/ 以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。 lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。 #!について 「#!」は何で呼ぶの？ shebangと綴られる。 Hash=# Bang=!の略 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係) 以下「#URL」は： サイト内のロケーション情
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
胃袋ダイエットとは？ | 松本クリニック
松本クリニック院長松本浩彦は地域のかかりつけ医として、芦屋で暮らしていらっしゃる方の健康に貢献できるよう尽くしております。総合診療科として患者様を迎え入れており、疾患や年齢などに関係なくどんな患者様も診察いたします。診察の結果、より高度な専門医療が必要と判断した場合は専門医療機関を紹介いたしますので、ご安心ください。 診療科目は内科や外科をはじめ整形外科や皮膚科など多岐にわたり、さらに泌尿器科・ペインクリニックの保険診療と美容医療まで幅広くございます。患者様第一で治療方針を提案いたしますので、どなた様もお気軽にご相談ください。明るく気さくなスタッフが、丁寧に話をお伺いいたします。 また、再生医療にも力を入れており、皮膚の改善から関節の治療などあらゆる幹細胞治療をご提供可能です。 以下の症状のある方は、来院前にお電話ください。 ご来院いただく時刻を指定いたします。マスク着用の上、ご来院くださ
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 |
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ update
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」:phpspot開発日誌
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 2010年04月12日- prettyLoader | Stphane Caron ? No Margin For Errors 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 通常、ローディング中というと、ボックス要素の中身にローディングするGIFアニメーションなんかがはいっていたりしますが、prettyLoaderはマウス追従型のローディング表示実装用ライブラリです。 Windowsでいう砂時計みたいな扱いですが、どんなページにも違和感ない実装が可能で、応用範囲が広そうです。 次のような、比較的古いブラウザにも対応しているようです。 Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explo
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 ::SEM R (#SEMR)
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 AJAXアプリ（サイト）をクローラブル（crawlable）にするための技術的アプローチ。Googleが公開した最新ドキュメントを基に解説します。 公開日時：2010年03月05日 19:53 米Googleが、AJAXベースのウェブサイトをコンテンツを検索エンジンに登録する方法についての、最新ドキュメントを公開しました。昨年10月に検討段階の実装方法が公式サイトで紹介されましたが、それのアップデート版になります。 最初におさらいをします。AJAX（エイジャックス）は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能です。しかし、いまブラウザで表示している内容と対になるURLが存在しないために、クローラが個々のコンテンツをクロールできないこと、また、仮にステートフルU
プロトタイプ：AJAXで改良するフォーム入力
ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、（１）オープンなものを元にシンプルなものを作り直す、（２）スクラ
サイト内リンクでページ遷移するAjaxサイトの作り方 – creamu
yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLとCSS、JavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ！12/8正午から申し込み開始と
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
はてなブログ | 無料ブログを作成しよう
2024年に買って良かったもの せっかく書いたのに下書きのまま放置していたので今更ながら公開。 水筒 アトラス 水筒 750ml 保冷 保温 真空断熱 ステンレス マグボトル スクリュー 直飲み 洗いやすい アウトドア WENS ウェンズ ブラック 白湯 AWPB-750BKAtlasAmazon朝起きたら電気ケトルいっぱいに…
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」:phpspot開発日誌
RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」 2009年08月10日- jCryption - JavaScript data encryption RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」。 2048bit のRSAで暗号可能。Ajaxでのサブミットもサポート。 暗号化は既にしてあり、SSLも不要。インストール簡単という特徴があります。 ちゃんとしたプロダクトに組み込む際は、きちんとした検証が必要だと思いますが、面白い仕組みですね。 デモページで各種デモが見れます。 データを送信すると、以下のように jCryption をキーとして暗号化が行われていることがわかります。 decrypted POST で元データが取れていますね。 これはすごいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ DOM 操作で消耗してるの？
YAPC::Asia 2009 / Asynchronous Programming for (A)synchronous Communication