風が吹けばIE爆発しろ
-> 風が吹く
-> 砂が目に入る
-> 家に戻る
-> インターネットをする
-> 「#!」について考える
-> history.pushStateを使った実装が今のところベスト
-> IEが対応していない
-> IE爆発しろ
色々考えて、IEを爆発させれば丸くおさまるメソッドを使わせてもらいました。
参考記事：「#!」を含むURLについて
-> 風が吹く
-> 砂が目に入る
-> 家に戻る
-> インターネットをする
-> 「#!」について考える
-> history.pushStateを使った実装が今のところベスト
-> IEが対応していない
-> IE爆発しろ
色々考えて、IEを爆発させれば丸くおさまるメソッドを使わせてもらいました。
参考記事：「#!」を含むURLについて
「#!」を含むURLについて。
TwitterやLifehacker(先日リニューアルした)やちょっと前のFacebookなどで使われている技術なんだけど、最近少し反感をかっているらしい。
http://d.hatena.ne.jp/karasuyamatengu/20110212/1297465199
http://d.hatena.ne.jp/karasuyamatengu/20110210/1297363019
このあたりかな。（※ ブログ主は原文を訳したりまとめているだけ。）
正直ボクはこの手法がとても好きである。
理由は簡単で
・軽い、速い
コレに尽きる。
・やり取りする情報が少ない -> 転送量が少ない。
・サーバー負荷が少ない -> レスポンスのスピードが速い。
・Ajaxなので画面が真っ白になることなく遷移する -> 体感速度的にも速い。
・CPUパワーについては細かくわからないけど、ネットワークによるCPU負荷も減る。
こんだけユーザー体験を考えてやっているのにね。
前述のブログ記事の引用。
最後に:「コンテンツがcurlでロードできなければそのサイトは壊れている」-Ben Ward
つまり、「ロボットが見れなきゃいけねっす」的な。
誰がこんな事決めたんだろうね。
なんのためのWebサイトなのか。
誰のためのWebサイトなのか。
百歩譲って壊れているとしても、それはダメなんかね？
ルールがユーザー体験を止めてはいけない。
言わんとしていることは分かっている訳で、この技術の弱点を上げるのであれば、上記の引用はもちろん独自の仕様で突き進む気持ち悪さや、「#」自体の機能が損なわれる等、所謂Hackによる犠牲がある。
それを解消する方法として「history.pushState」があることを覚えておいて欲しい。
facebookやgithubで採用されているが、これを使えばURLハック無しで「#!」を使ったようなことができる。
ただ、全ての環境で「history.pushState」が使えるわけではない。
モダンブラウザの一部だけ。早く広まって欲しいな。
でも実際にURLを書き換えられることがセキュリティ上で問題視されるかもしれない。
どんな時代になっても、どんなことをしても、やっかむ人はいるしケチは付けられると思う。
せっかく新しいことを切り開いていく人たちがいるのに糞くだらない理由で文句付ける人にはなりたくない。
真面目か！くそ真面目か！
もう少し考えてみた：http://hokypoky.info/blog/2011/02/14/sigh-to-ie.html
Facebookが実名主義なのは言われていたことだけど、どうやら実名でない人のアカウントが削除されたようです。
個人的な雑感としては、テスト用紙に偽名書いて×くらってワーワーいってんじゃねぇってとこです。
ちなみにボクは歴史がおもいっきり苦手で、わからないところに全部「織田信長」って書いて真剣に怒られました。
あと、ファンページは通り名で作れるから、そこを窓口としてみてもいいかと思ったよ。
ルールを外れた人は、そうなることも覚悟して楽しんだらいいんじゃないかな。
というかここまで書いて気づいたのだけど、きっとワーワーいって楽しんでたんだろうな。
くそっ、ボクもBANされてひと盛り上がりしたかった！
Facebookはじめました。
「Facebookが流行っている理由がわからない」「Facebookは流行るのか！？」などなど言われてるけど、結局はSNSは流行りものであり、mixiが何故面白かったのか、Twitterが何故面白いのかというのも「人がいるから」という理由に他ならないと思っています。
実は、こっそりTwitterのアカウントを別で作ってみたりしたのだけど、誰もフォローしていない、誰にもフォローされていないとそりゃーもうつまらないつまらない。つまり「人がいれば面白い、人がいなければつまらない」。それだけのことです。
流行るか流行らないかはディティールこそ異なれ「話題になったかどうか」なので映画とか大事ね。
で、最近Facebookで友達を積極的にフォローしてそこそこに楽しくなってきました。
色々いじってみて分かったのが「Facebookの技術力がすごい」ということです。
バックエンドでは色々と話題にもなっていますが、フロントエンドもすごかった。
いくつか気がついた点をピックアップしてみます。
バックエンドについて色々は以下などが参考になるかと。
PHPをC++に変換して高速化する「HipHop for PHP」をFacebookが公開
タグ “Facebook” の記事一覧 － Publickey
FBML(FacebookMarkupLanguage)
http://developers.facebook.com/docs/reference/fbml/
要はFacebookのHTML API(実際はXMLとJavaScriptの実装)。
ファンページやアプリではこれを使ってサイトを作らないといけないのだけど、これはFacebook外のページでも使うこともできます。
例えば、こんなページを作ることができます。
http://www.hsiet.com/winery/storybar.html
さすがにこれは「デザインしょっぺぇ！！」って突っ込みたくなりますね。
ただ、実際にソースをみると
Facebook連携をクライアントサイドだけでできてしまうのは、とても便利。
以下をhead内に入れてあげればFBMLをサイトで使うことができます。
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
手始めに、このブログでもFBMLを使いウィジェットを設置。
あとはファンページも作成。
実際は簡単なアプリも作ってみたのだけど、これはいつか記事にするかも。
※ 余談ですが、ファンページのURLを固定化するには25人以上のファン（「いいね！」）がいないといけないらしい。
ぜひ「HOKYPOKY.info ファンページ」から「いいね！」して下さい！！
実はココが一番良いたいこと。
タイトルを「Facebookに学ぶ、HTML5時代のAjax」とかにすればよかったかもしれない。
まずはこの記事をみてください。
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係)
要はGoogleが「http://〇〇.com/xxx/#!hoge」となっているページを「http://〇〇.com/xxx/?_escaped_fragment_=hoge」として解釈してクロールするという話。
実際にバックエンドでhttp://〇〇.com/xxx/?_escaped_fragment_=hogeを用意してあげればAjaxを使ってもSEO的にOKなのです。
しかしこの方法は、すこし古いことが判明。
というのも実は、最近のfacebookでは「#!」がつかない。(ブラウザはChromeとSafari)
URLかわってるのにFacebookって爆速だなーと思って調べていたら、HTML5の「History API」を使っていて、実際は全てAjaxだったのでした。
Histroy APIはブラウザの「戻る/進む」をJavaScriptから操作できるもの。
地味っすなー。
だけどコレを使えばAjaxとSEOを両立できるのです。鍵は「history.pushState()」
// using jQuery
(function($){
$(function(){
$("a").click(function(){
// history.pushStateを使うことで擬似的にURLのパス、ブラウザの履歴を変更する
// ドメインをまたぐことはできないので安全。
history.pushState({path: this.pathname}, (this.title ? this.title : document.title), this.href);
$.ajax({
url: this.href,
success: function(data){
// do something
}
});
return false; // これで本来のaタグのリンクの挙動がキャンセルされる。
});
})
})(jQuery);
とても簡単にURL変更と履歴を残しつつ「ページを遷移させない」ことができました。
ページが遷移しないのでAjaxなどで情報を更新すればいいわけです。
レガシーブラウザやロボットに対してはAjaxをオフにして、モダンブラウザではAjaxを使って軽量化、高速化、エフェクティブにするなどの実装が望ましいですね。
バックエンドの実装もビューはスタティックなHTMLとAPIの連携となっていき、負荷軽減やクロスプラットフォーム化が進みますね！
紹介したのは恐らくFacebookからすればほんの一部ですが、FacebookやTwitterなど流行りのWebサービスはたしかな技術力というのが付いてきているなーというのを実感しました。また気がついたらこのブログでも紹介していきたいと思います。
映画「ソーシャル・ネットワーク」は来週観に行こうと思います。
下の「いいね！」宜しくです！
寒い。寒すぎる。コーヒーのプルタブが悴んだオレを拒絶する。
昔はこんな一文でブログを更新してたりもしたね。
今ではTwitterにとって変わられた。
——
最近、インターネットが気持ち悪くなくなって気持ち悪い。
もっと昔は気持ち悪さが際立っていた。でも、それが心地良かったりもしたんだよな。
皆知らないだろうけど、オレ、ホームページ持ってるんだぜ。とか
ここには、皆の知らない自分がいるぜ。とか
普段言えないことを、ここではいえる。とか
会ったこともない人、どんな人かもわからない人と何故か気が合う。とか
オレだけが知っている世界。とか
そんなリアルとネットの二面性がインターネットの面白さだったりもしたわけだ。
インターネットに公開しておきながらブックマークするなとかリンク貼るなって人の気持ちが分からないでもない。
インターネットはオープンな場所ではなく、閉じられた場所でもあったわけだ。
—–
「ログイン」してください。
「パスワード」を入力してください。
「ようこそ」
—–
いつから安っぽくなってしまったんだ。
そんなに笑顔で迎えてくれるなよ。
まだオレを拒絶したプルタブの方が愛想がいい。