Ajaxクロールの推奨構成のサポートをGoogleがついに終了
[レベル: 上級] Googleは、今からさかのぼること2009年に公開した、Ajaxクロールの推奨構成を終了することを公式にアナウンスしました。 以前の推奨構成を保持したままでもインデックスされ続けますが、現状に即した技術を利用するように促しています。 ごく限られたJavaScriptしか実行できなかった当時、GoogleはAjaxによって生成されるコンテンツを確実にクロール、インデックスするために特殊な構成をウェブマスターに提唱しました。 この構成を、ざっと簡単に説明すると次のようになります。 ウェブページのレンダリングをすませた、いわゆる“スナップショット”を事前に作成しておき、AjaxページにGooglebotがアクセスしたときには準備済みのスナップショットを返す。 Googlebotにスナップショットを取得させるために、AjaxページのURLに含まれる「#」（ハッシュ、フラグメン
まだ DOM 操作で消耗してるの？
This document discusses RxSwift, a library for reactive programming with Swift. It provides 3 key points: 1) RxSwift uses Observables to handle asynchronous data streams and events. Operators like map, filter, and merge allow transforming and combining Observable sequences. 2) Observables can be either "hot" or "cold"- hot Observables constantly update subscribers while cold Observables only updat
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」は： サイト内のロケーション情
胃袋ダイエットとは？ | 松本クリニック
松本クリニック院長松本浩彦は地域のかかりつけ医として、芦屋で暮らしていらっしゃる方の健康に貢献できるよう尽くしております。総合診療科として患者様を迎え入れており、疾患や年齢などに関係なくどんな患者様も診察いたします。診察の結果、より高度な専門医療が必要と判断した場合は専門医療機関を紹介いたしますので、ご安心ください。 診療科目は内科や外科をはじめ整形外科や皮膚科など多岐にわたり、さらに泌尿器科・ペインクリニックの保険診療と美容医療まで幅広くございます。患者様第一で治療方針を提案いたしますので、どなた様もお気軽にご相談ください。明るく気さくなスタッフが、丁寧に話をお伺いいたします。 また、再生医療にも力を入れており、皮膚の改善から関節の治療などあらゆる幹細胞治療をご提供可能です。 以下の症状のある方は、来院前にお電話ください。 ご来院いただく時刻を指定いたします。マスク着用の上、ご来院くださ
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
cssやプログラミングScrolling Dynamic IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コードコードです。
jQuery でCSVデータを簡単に取り扱える「jQuery CSV」
jQuery でCSVデータを簡単に取り扱える「jQuery CSV」 Check Tweet 配布元：Plugins | jQuery Plugins | CSV ライセンス：Apache License, Version 2.0 jQuery CSVはjQuery でCSVデータを簡単に取り扱うことができるjQueryプラグインです。 利用方法 次にようにCSVデータに対して$.csv()(CSVデータ)を実行することでcsvデータを配列に変換することが出来ます。 var csv = $.csv()(CSVデータ) CSVデータは$.get()などのjQueryのAjaxメソッドを利用して取得します。 $.get('data.csv',function(data){ //Ajax後の処理 }) つまり、次のようなJavaScriptを実行することでCSVファイル（data.csv）のデ
ajaxファイルアップロードに使えるjQueryプラグインいろいろ:phpspot開発日誌
7 trusted ajax file upload plugins using jquery | Web Developer Juice ajaxファイルアップロードに使えるjQueryプラグインがいろいろとまとまっていましたのでご紹介。 AJAX Upload カスタムボタンを押すとファイルを選択して選択したら即座にアップするもの Ajax file Upload 画面遷移なしにアップロードが出来るアップローダー実装 jQuery Multiple File Upload Plugin など。画面遷移なしにファイルをアップロードしたい際の簡単ソリューションとして覚えておいてもよいかもしれませんね。
プロトタイプ：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·jQuery CrossDomain MOONGIFT
JavaScriptを使えば画面遷移の少ない、スムーズな操作性を提供できる。いわゆるAjaxなどがそれに相当するが、ドメインを越えて通信できないのが問題だった。幾つかの打開案はあるが、例えばJSONPを使う方法やサーバサイドで取得する方法などがメインになっていた。 検索結果のXMLを並べるテスト これではどちらかのサーバで対応が必要になってしまう。そんな中、殆どをクライアントサイドだけで解決してしまうのがjQuery CrossDomainだ。 今回紹介するオープンソース・ソフトウェアはjQuery CrossDomain、jQueryによるクロスドメインAjaxライブラリだ。 jQuery CrossDomainが使うのはFlashだ。Flashを使って外部ドメインにあるXMLを取得し、それをJavaScriptに返すようになっている。その仕組みをjQueryプラグイン化することで容易に
ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」:phpspot開発日誌
(smt) simple mouse tracking // home ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」がなかなか興味深いです。 次のように、マウスを移動した軌跡を描画してくれ、利用者のマウスの動きを元にユーザビリティ向上に貢献できそう。 smtを使ったデモムービー集ページ mousemove イベントを使って座標をトラッキングさせてデータをサーバに保存、あとはデータを元にタイマーを使って描画するという仕組みのようで、なかなか面白いですね。 アクセスが多いとデータ量も結構なものになってきそうなので、自前でやるしかこうしたデータをちゃんと見ることは難しいのかもしれません。 このsmt は、ダウンロードしてサーバ設置型なので、遠慮なく使えますね。 関連エントリ Yahoo!のアクセス解析ツール「Yahoo! Web Analytics」 ケータイ用高機
フリーのAjax / DHTMLスクリプト配布サイト9選
Google Mapの登場以降、ハード面での品質向上と相まって爆発的に浸透して行ったJavaScript×XML＝Ajax。 一時期は完全に「枯れた技術」とまで言われたJavaScriptは、世界を変えたバズワード「web2.0」を生み出し、いまやWEB業界では必須スキルの一つにまでなりました。 Ajaxがここまで流行った背景は、ユーザーエクスペリエンスやユーザビリティの観点はもとより、PrototypeやjQueryなどといった簡単にAjaxを実装できるJavaScriptライブラリの発達と、それを実現させる多くのプログラムが「無料配布」された事によるトコロが大きいのではないでしょうか。 そんなワケで、今回は「無料で使えるAjaxスクリプトの無料配布サイト」を、国の内外を問わずまとめてみました。 jQueryプラグインや単品スクリプトといった機能追加的なモノから、チャット構築スクリプトの
ユニークなAjax読み込みアイコンが作れる「Chimply」:phpspot開発日誌
Chimply generates your images ユニークなAjax読み込みアイコンが作れる「Chimply」。 チンパンジー風のキャラアイコンが可愛いアイコン作成サイト。 作れるアイコンは、ユニークで、ほかでは作れないようなものがズラリ。 色なんかのパラメータも当然調節できるようです。 個人的に、以下の物が気に入ったので作ってみました。 これは、便利ですね。 関連エントリ Ajax読み込み画像を作成するサービス++
Ajaxは取り扱い注意 | Accessible & Usable
公開日 : 2009年4月19日 (2011年1月11日 更新) カテゴリー : ユーザビリティ Ajax（エイジャックス）とは、簡単に言うと、画面遷移（ページの切り替え）を伴わずに、ページの情報内容を変更させることができる技術です（詳しくは、Wikipediaの解説などをご参照ください）。 ユーザーの操作（クリックなど）のたびにサーバー側からのレスポンスを待つ（新しくページを切り替えて表示する）必要がないことから、使い勝手の向上が期待できます。また最近では、気軽にAjaxを実装できる「ライブラリー」と呼ばれるプログラムモジュールが多数出回っており、これを使うことでクールな（かっこいい）ユーザーインターフェースをWebサイト（ホームページ）に容易に実装できることも、Ajaxの特長と言えるでしょう。 ちなみにAjaxという概念は、「Asynchronous JavaScript + XML」
【海外事例に学ぶ】インタラクティブなUIでコンテンツを見せる際の注意点 (ユーザビリティ実践メモ)
Jones氏は、Ajaxを使ったタブ切り替えなどインタラクティブにコンテンツを提示するUIを用いた際の、ユーザビリティやビジネス効果(ユーザの説得)といった観点での注意点を紹介しています。以下では、その中から2つの事例をご紹介いたします。 ユーザビリティへの配慮 コンテンツを参照しにくくしていないか？ Ajaxにより、ページ遷移をしないコンテンツの見せ方が普及しつつあります。よく見られるケースとしてタブ形式のインタフェースがあります(図1)。このタイプのUIでは、素早いコンテンツの切り替えができる反面、切り替えたコンテンツはページとして存在しないため、後からユーザが参照しづらいデメリットが生じることをJones氏は指摘しています。例えば、ユーザがあるタブのコンテンツを友達と共有したいと思っても、そのコンテンツはページとして存在しないため、リンクを送っただけでは友達は別のコンテンツを見てしま
IE8、Ajaxページナビゲーション機能採用 | エンタープライズ | マイコミジャーナル
Microsoft, Internet Explorer Developer, Sharath Udupa氏は14日(米国時間)、IEBlogにおいてIE8の機能としてAjaxページナビゲーション機能を取り入れたことを発表した。同氏はIE8におけるAjax機能に関連した開発を実施しており、HTML5から同機能を取り込むことを決定したと伝えている。 Internet Explorer 8 これによりIE8モードにおいてトラベルログコンポーネントのアップデートが可能になり、進む/戻るボタンやアドレスバーに対してクライアント側で実施された更新を反映できるようになる。Ajaxアプリケーションではしばしば操作が進む/戻るボタンに反映されないため、Webブラウザにおける一貫した操作性を損ねていると指摘されるが、IE8からはこれを反映した操作が可能となる。
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
