crocos-js を GitHub で公開しました
みなさんこんにちは！御無沙汰しております！
@riaf、またの名を佐藤と言います！
社内ライブラリを OSS 化するとモテると聞いた(誤解)ので、そのご紹介です！
Crocos 社内で使用している JavaScript ライブラリを GitHub で公開しました。
https://github.com/crocos/crocos-js
以前は CoffeeScript で開発していたため、その名残りが少し残っています。
一部、汎用的ではない部分を除いています。Crocos 社内用のライブラリは、今回公開したコードに一部機能を追加して build しています。
本日は、このライブラリの簡単な使い方とかを紹介します。 crocos-js で出来ることはざっくりと以下のようなものです。
ライブラリの読み込み待ち
キャッシュ機能 (localStorage ベース)
xfbml の拡張機能 (fbx)
[for CSS] ログイン状態の判定
[for CSS] iframe 内かどうかの判定 (Facebook の Canvas ではありがちなやつ)
雑多な奴 (nl2br、truncate、redirect)
全てカバーできてませんが qunit を使ったテストもあります。こちらもサンプルとして参考になるかもしれません。
https://github.com/crocos/crocos-js/tree/master/test/unit
簡単な例を挙げながら以下、使い方です。
読み込む
どの機能を使うにもとりあえず html で読み込まなきゃ行けないのですが、jQuery に依存しているので、jQuery の後に読み込んでください。
たとえば:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="crocos.min.js"></script>
xfbml の拡張 (fbx) を使う
Graph API にリクエストした結果を自動的に HTML に展開する機能があります。
<span class="fbx-graph" data-fbx-id="1276368138" data-fbx-field="name"></span>さん、ようこそ！
これだけだと xfbml でも出来るんですが、 xfbml だとあまり大量のタグを利用できなかったり、他のプロパティが使いたい時があったりするのでこの機能を追加してあります。
class に fbx-graph が指定されているタグは Graph API リクエストを行うタグです。data-fbx-id にオブジェクトの ID を、data-fbx-field には表示したい要素名 (name とか email とか picture とかの文字列) を指定します。
また、URL に対する Like の数を表示したい場合に使える fbx-like-count もあります。
♥ <span class="fbx-like-count" data-fbx-url="http://crocos.co.jp"></span>
キャッシュ機能
まだテスト中ですが、localStorage を利用したキャッシュ機能も実装してあります。 localStorage が無いと動作しないので、今は beta 扱いです。
crocos.cache.set、crocos.cache.get、crocos.cache.hasの他に crocos.cache.with というメソッドがあり、以下のようにキャッシュがある場合とない場合を並べて書けるので便利です。
// `cache_key` という名前でキャッシュを探す crocos.cache.with('cache_key', function(dfd) { // キャッシュがない場合の処理 FB.api('/me', function(response) { dfd.resolve(response); }); return dfd.promise(); }, { expire: 3600 }).done(function(response){ // キャッシュがあっても無くてもここで受け取れる console.log(response); });
自動的に html に class をつけます
iframe 内で表示されるものと、外部の URL で表示するものを同じリソースで管理したいことがありました。 crocos-js では、<html>に iframe 内の場合は in-frame、外の場合は self-frame というクラスを付与します。あとは CSS で .in-frame .anyelements { .. } のように記述するだけで、iframe 内の時だけ指定したいスタイルなどが適用できます。
また、Facebook のコネクト状態によって fbstatus-connected のようなクラスも付与します。fbstatus- の後に FB.getLoginStatus(function(response){}) したときの response.status を結合した文字列になります。
Facebook JS SDK の読み込み待ちをする
Facebook アプリを開発していると、FB.initされたかどうか分かんないタイミングがあったりとか、共通化したいところで「そもそもこのタイミングで FB がある保証なくね？」とか悩むことがあったので、変数が存在するかどうかを判定して、定義されたら実行する関数を登録できるようにしてあります。
Facebook のみ、FB.init されているかどうかを判定したいので、FB.initを記述する際に window.crocos_facebook_initialized = true; と書く必要があります。
つまり、以下の様にします。
window.fbAsyncInit = function() { FB.init({...}); // Additional initialization code here window.crocos_facebook_initialized = true; }
そうすると、あとは crocos さえ定義されていれば以下のように記述できます。
crocos.wait("FB").done(function(){ // ここでは FB 初期化済み FB.api("/Crocos.Inc", function(response){ console.log(response); }); });
以上、ざっくりと解説でした。 まだまだ追加したい機能があるので、これからも開発続けていきます！
ただ、開発者は僕一人で、そもそもゆるふわ PHP プログラマなので、いろいろとアレなところがありそうですが、ぜひぜひツッコミとか Pull Request とかお待ちしておりますので、よろしくおねがいします！