Turns out it is possible to have your AngularJS application indexed AngularJS and just about all JavaScript MVC frameworks modify the contents of your HTML structure which make the pre-rendered HTML invalid for search engines. Luckily there is a way to get around this and to have full SEO support for your AngularJS application by using some special URL routing and a headless browser to retrieve th
Ajaxページの問題と、StaticなHTMLの生成 Ajaxでズンドコやってるページだと、検索エンジンからのアクセス時に空ページでSEOがアウアウァ！！って話はよく耳にします。 GooglebotがAjax的なアレコレについて賢くなってきているとは申します。AJAX クロール: ウェブマスターおよびデベロッパー向けガイドのような情報ドも公開されているので、それに従えばきっと....という所ではありますが、より確実にStaticなHTMLを！という声も少なくありません。 ということで、今回は、AjaxでDynamicなページを元に、StaticなHTMLを自動生成しておいて、検索クローラからのアクセスにはStatic HTMLを返却する、ということを考えてみます。ここではStatic HTMLの生成まで試していて、URL設計とかサーバサイドのアレは割愛。Phantomしたいだけなので。 サ
2013年10月10日14:48 JavaScript Ruby turbolinksを使うときに気をつけるべきたった一つのこと さて、今更ですが、turbolinks とは pjax（Ajaxで要素を動的に変えつつ、pushStateでURLも変更しちゃう）をRailsで簡単に利用出来るようにしたものです。 pjaxを使えば、Ajaxと違ってURLもちゃんと変わるし、ブラウザの戻るだって普通に使えるからとても便利です。毎回ページ全部を評価してまるっと書き換えるんじゃなくて、必要と部分だけを入れ替えるので、レスポンスだって高速になります。 このturbolinksに関してはいろんな人が記事を書いてくれているので詳細はそちらを見ていただくとして、 Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc Rails4でturbolinksを謳歌するためのまと
[対象: 上級] Ajaxを利用する場合のURLの生成にはpushStateを使ってもいいとGoogleのMatt Cutts（マット・カッツ）氏は勧めていました。 またこれとは別にGoogleのJohn Mueller（ジョン・ミューラー）氏に、AjaxのURLにはpushStateを使うことができると僕はGoogle+でコメントをもらったことがあります。 さてこれはGoogleにおいての話なのですが、BingもAjaxを利用したURLのベストプラクティスとしてpushStateを推奨することを公式に表明しました。 Search Engine Optimization Best Practices for AJAX URLs BingもAjaxコンテンツのURLにはpushStateを推奨 BingがpushStateを推奨する理由はGoogleと同じです。 Ajaxの処理で作られたコン
[対象: 上級] Ajaxを利用しているページでは、Googleのクロールやインデックスを考えた場合、pushStateを使ったほうが“#”（ハッシュ）を使うよりも労力が少なくなりそうです。 下の質問にGoogleのMatt Cutts（マット・カッツ）が回答しました。 Ajaxのナビゲーションを管理するために“#!”から“pushState”に更新すべきだろうか？ Googleは両方ともサポートしている。だけどpushStateは特別な設定が不要だしGoogleも余分な処理をしなくて済む。 Matt Cutts氏の答えを一言でまとめると上のようになります。 ここからは僕からの補足です。 #を使ったAjaxページをSEO対応にするのは面倒 一般的に、Ajaxを使ったページではURLに“#”が含まれます。 検索エンジンは#以下をユニークなURL（の一部）として処理しません。 そこでGoogl
まず、”#!”の呼び方から。 「シャープエクスクラメーション」とか呼ぶのかと思ってたら、 「hash=#」「bang=!」の略で、「shebang=シバン」っつーらしいんです。 シバンがURLに付いてるサイトで、最も有名どころで言うと、Twitter。 Gmailなんかもそうですかね。 https://twitter.com/#!/i/connect 然り、https://twitter.com/#!/i/discover も然り。 lifehackerやfacebookも、今は違うけど昔はどうやら付いていたらしい。 ”#”と”！”をわけて考えると、 ・”#”は、Ajaxアプリケーションとして、画面遷移ではなくページ内遷移をするため。 ・”!”は、”#”とセットにして、Googleクローラーにクロール可能なAjaxアプリと認識させるため。(※注1) Ajaxアプリケーションなので、 ・Ja
HeartRails Tech Blog ハートレイルズのエンジニア、デザイナーによるブログです。 ウェブサービス、スマホアプリ、IoT デバイスの開発に関連する技術的な情報を発信していきます。 Rails4 で Turbolinks という仕組みが導入されることは比較的広く知られつつあります。 これは画面遷移の高速化を目的としたもので、 リンクのクリックを全部乗っ取る 同一ドメイン内での遷移だったら Ajax リクエストをして body 内をまるっと書き換える history.pushState して状態を保存 という （少々いかがわしい） 動作をするものです。なお history.pushState が使えない環境では普通のリンクとして動作します。 Rails 3.2 環境などでも Gemfile に gem 'turbolinks' などと書いておけば使うことができます。気軽に画面遷
jQuery UI API 1.8.6 の日本語リファレンスです。 ソースコードを読み、jQuery UI(公式サイト)のドキュメントを参考に解説しました。 また、全ての解説に、実際に実行できるサンプルを付けました。 jQuery UIとは jQuery UIとは、jQueryライブラリ上に構築された強力なユーザインターフェースライブラリです。 jQuery UIの構成 jQuery UI 1.8.6 は、大きく分けて「インタラクション」「ウィジェット」「ユーティリティ」「ビジュアル効果」3つのカテゴリに分けることができます。 それぞれ、次の機能が提供されています。 インタラクション 対話型ユーザインターフェースを構築するためのライブラリ ライブラリ説明対応ファイル
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
What is the AJAX Libraries API? The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including: jQuery jQuery UI prototype scri
clone したときは、init メソッドが呼ばれて、そこで必ず初期化しないとダメだということ 以下のコードだと、オブジェクトの値が clone されるんだね Hoge := Object clone do( values := List clone with := method(name, c := self clone c values append(name) c ) ) a := Hoge with("a") b := Hoge with("b") a values println ==> list(a, b) これってつまり js だと、以下のコードと同じってことか。 var Hoge = function (){}; Hoge.prototype = { values: [], with: function(name){ var c =
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
