Facebookのフロントエンド技術

Hello Facebook!!

Facebookはじめました。

「Facebookが流行っている理由がわからない」「Facebookは流行るのか！？」などなど言われてるけど、結局はSNSは流行りものであり、mixiが何故面白かったのか、Twitterが何故面白いのかというのも「人がいるから」という理由に他ならないと思っています。
実は、こっそりTwitterのアカウントを別で作ってみたりしたのだけど、誰もフォローしていない、誰にもフォローされていないとそりゃーもうつまらないつまらない。つまり「人がいれば面白い、人がいなければつまらない」。それだけのことです。
流行るか流行らないかはディティールこそ異なれ「話題になったかどうか」なので映画とか大事ね。

で、最近Facebookで友達を積極的にフォローしてそこそこに楽しくなってきました。
色々いじってみて分かったのが「Facebookの技術力がすごい」ということです。

バックエンドでは色々と話題にもなっていますが、フロントエンドもすごかった。
いくつか気がついた点をピックアップしてみます。

バックエンドについて色々は以下などが参考になるかと。
PHPをC++に変換して高速化する「HipHop for PHP」をFacebookが公開
 タグ “Facebook” の記事一覧－ Publickey

FBML

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 ファンページ」から「いいね！」して下さい！！

HTML5時代のAjax

実はココが一番良いたいこと。
タイトルを「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を使って軽量化、高速化、エフェクティブにするなどの実装が望ましいですね。

（（（【【【[[[HTML5]]]】】】）））

バックエンドの実装もビューはスタティックなHTMLとAPIの連携となっていき、負荷軽減やクロスプラットフォーム化が進みますね！

まとめ

紹介したのは恐らくFacebookからすればほんの一部ですが、FacebookやTwitterなど流行りのWebサービスはたしかな技術力というのが付いてきているなーというのを実感しました。また気がついたらこのブログでも紹介していきたいと思います。

映画「ソーシャル・ネットワーク」は来週観に行こうと思います。

下の「いいね！」宜しくです！

Share on Tumblr