XDate

XDate – A Modern JavaScript Date Library

Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。

XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。

var d = new XDate(1977, 10, 25); // 1977/11/25のXDateオブジェクトを生成
d.addDays(14); // 14日足してみる
d.diffYears(new XDate()); // 今日との差分を取得する
d.toString("yyyy年M月d日 HH:mm"); // フォーマットした文字列を取得

Dateにないけど欲しかった機能が一通り手に入り、 且つDateの実装からあまり離れていないので使いやすいです。 大抵の物はこれでカバーできそうですね。

また、あまり世話を焼かないタイプのライブラリなので、サイズも小さくまとまっています。

Moment.js

Moment.js | Parse, validate, manipulate, and display dates

こちらもDateオブジェクトのラッパーのMomentオブジェクトを実装するライブラリですが、 メソッド群はXDateと違ってDateオブジェクトを模した形にはなっていません。

Momentオブジェクトの初期化は new を使わずに moment() に引数を渡しておこないます。

var m = moment(); // 現在の日付時刻のMomentオブジェクト

多彩なパーサー

そして注目すべきはその多彩なパーサーです。 引数に値を渡して日付・時刻を指定したMomentオブジェクトを生成出来るのはDateと同じですが、 moment() は様々な形式に対応する事ができます。

これもまだ一部ですが、例を挙げます。

moment("1977/11/25"); // 文字列
moment([1977, 10, 25]); // 配列
moment("1977-11-25", "YYYY-MM-DD"); // フォーマットを指定した文字列
moment("25-11-1977", ["YYYY-MM-DD", "DD-MM-YYYY"]); // フォーマットを複数指定した文字列

フォーマットの指定はすごく便利ですね。しかも配列で渡せば複数のフォーマットでチェックを行なってくれます。

その他機能

var now = moment();
now.add("days", 30); // 30日足す
now.subtract("days", 90); // 90日引く
now.format("YYYY/MM/DD"); // フォーマット
now.fromNow()); // "2 months ago"

fromNow() はTwitter等のWebサービスでよく使われる 「〜時間前」 といった表現を簡単に実装してくれます。 デフォルトは英語ですが、同梱された言語ファイルで簡単に日本語化できます。親切。

その他にも、ここではとても紹介しきれない程に機能満載なライブラリです。 また、その分少しファイルサイズがかさんでしまう側面も。

Humane-Dates

zachleat/Humane-Dates

「〜時間前」 のような表現を実装してくれる為だけの、非常にショートでシンプルなライブラリ。 “human” ではなく “humane” なので間違えぬよう。

cf) humaneの意味 – 英和辞典 Weblio辞書

humaneDate("1977/11/25"); // "36 years ago" （執筆時点）
humaneDate("1977/11/25", new Date()); // 第二引数と比較ができる

jQueryを読み込んでいれば、jQueryプラグインとしても機能するようです。

残念なのは、Moment.jsのように多言語化していないのと、 その為のインターフェイスを持ちあわせていない事。 日本語化する為には、コード内の “lang” オブジェクトを直接編集する必要があります。

単機能なのでコンパクトさが売りです。 コレだけが欲しい、という時には選択肢に入るかもしれません。

node-date-utils

JerrySievert/node-date-utils

node-data-utilsは、Dateオブジェクトを拡張するPolyfillです。 下の例はほんの一部ですが、Dateに追加される機能はシンプルで基本的な物です。

// スタティックなメソッド
Date.yesterday(); // 昨日のDateオブジェクトを返す
Date.tomorrow(); // 明日のDateオブジェクトを返す

// インスタンスのメソッド
var format = "YYYY年MM月DD日";
var d = new Date(1977, 10, 25);
d.toFormat(format); // 1977年11月25日
// 1年と2ヶ月と3日を足す
d.add({
    years: 1,
    months: 2,
    days: 3
});
d.toFormat(format); // 1979年1月28日

add に負の数を渡せば引き算にもなります。

node-date-utilsはDateのprototypeを拡張する事になるので、 あなたの環境・主義がそれを許すならば使ってみても良いのではないでしょうか。

まとめ

本当は datejs の実装が面白かったので紹介したかったのですが、 数年アップデートされておらず、試してみたもののうまく動かない物が多かったので、残念ながら諦めました。

日付の出力はWebサービス等で頻繁に行うと思いますので、 開発者の皆さんに感謝しつつ、できるだけ楽をしましょう。

Bower とは

BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

---

BowerはWeb開発向けのパッケージマネージャーです。画像・CSS・JavaScriptといったリソースを簡単にインストールする事ができ、依存関係を管理してくれます。

新しいプロジェクトをスタートする度に毎回jQuery等のリソースを複製して設置するのは面倒です。 そこでBowerを利用する事で、コマンドラインから簡単に最新のパッケージを、依存リソースと一緒にインストールする事ができます。

また、プロジェクトの設定ファイル（bower.json）を作成して依存リソースを記しておけば、 コマンド一発で全てダウンロード、あるいはアップデートする事ができます。 プロジェクトに必要なライブラリがチームメンバーにとって一目瞭然になるのもメリットですね。

見ての通り、Twitter開発陣プレゼンツのリソースです。 リリース当初小耳には挟んでいたのですが、実用するまでには至らず。実際使ってみたら大変便利でした。

インストール

まずは Bower をインストールします。必要に応じて、sudoなどしましょう。 （node.jsを先にインストールしておく必要があります）

$ npm install -g bower

Windowsユーザーの場合は、Gitがコマンドプロンプトから呼べないと上手く動作しないそうです。 公式にあるように、msysgitインストール時に “Run Git from the Windows Command Prompt”のチェックを入れるか、 あるいは Git CUIの環境でnode.jsへのパスを通しておけば使えます。

cf) 公式ドキュメント参照 (“Windows users”の項)

簡単な使い方

パッケージをインストールする

まずはコマンドラインからパッケージ単体をインストールしてみます。”install” コマンドでパッケージ名を指定します。

$ bower install jquery

すると、カレントディレクトリに「bower_components」ディレクトリが作成され、その中にパッケージがインストールされます。 こんなかんじに。

ProjectRoot/
└ bower_components/
    └ jquery/
         ├ jquery.js
         ├ jquery.min.js
         ├ component.json
         └ composer.json

デフォルトの名前が”components”から変更になっています – 2013/09/05

パッケージ名を連記する事で複数のパッケージを一度にインストールする事もできます。

$ bower install jquery modernizr mustache

バージョンを決め打ちしてインストールするにはシャープ記号で区切って指定することができます。

$ bower install jquery#1.8.2
$ bower install jquery#1.8.x
$ bower install jquery#1.8
...

パッケージをアップデートする

インストールしたパッケージは “update” コマンドでアップデートできます。

$ bower update

欲しいパッケージを探す

欲しいパッケージがBowerに登録されているかどうかは “search” コマンドで探すことができます。

$ bower search mustache

    - mustache git://github.com/janl/mustache.js
    - grunt-mustache git://github.com/jonschlinkert/grunt-mustache.git

欲しいパッケージが見つからないんだけど？

Bowerに登録されていないパッケージをインストールするにはいくつかの方法があります。 例えば、headjsをインストールしたい場合。

$ bower install https://github.com/headjs/headjs
$ bower install headjs/headjs
$ bower install https://raw.github.com/headjs/headjs/master/dist/head.js
$ bower install ../../the/path/to/head.js

それぞれ次の物を指定してインストールしています。2番目が楽でいいですね。

1. GitHubのリポジトリURL
2. GitHubのショートハンド
3. リソースの直接URL
4. リソースのローカルパス

“register” コマンドでパッケージを新規登録する事も出来ますが、特定の条件が必要になる為、ここでは詳しく触れないでおきます。

プロジェクトを作成する

プロジェクトの設定ファイル “bower.json” を作っておく事で、 必要なパッケージを一括してインストール・アップデートする事ができます。

プロジェクトのルートディレクトリに”bower.json”を作成し、次のような要領で入力します。

設定ファイル名が”component.json”から変更になっています – 2013/09/05

{
    "name" : "My Awersome Project",
    "version" : "1.0.0",
    "dependencies" : {
        "jquery" : "1.8",
        "modernizr" : null,
        "mustache" : null
    }
}

基本的に “dependencies” に必要なリソースを追加していく形になります。 見ての通り、キーにパッケージ名、値にバージョンを記載するオブジェクトリテラルになっており、 バージョンが “null” になっている場合は最新版をインストールします。

後は、引数なしで “install” コマンドを実行するだけで、依存リソースが一括してダウンロードされます。便利。

$ bower install

また、「見つからないパッケージ」をインストールするためには、バージョンの代わりに前述の例のようなURLあるいはパス等を入力します。

"dependencies" : {
    ...
    "headjs" : "headjs/headjs"
}

インストール先ディレクトリをカスタマイズする

Bowerは “.bowerrc” というファイルでカスタマイズする事ができます。

例えば、パッケージのインストール先を “bower_components” ディレクトリから他の場所に移したい場合、 プロジェクトルートに “.bowerrc” ファイルを作成して次のように入力しておきます。

{
        "directory" : "assets/vendors"
}

また、 “.bowerrc” を自分のホームディレクトリに置いておく事で、自分が作る全てのプロジェクトにカスタマイズを適用する事ができますが、 そのプロジェクトを誰かと共有する際に問題が生じそうなので、基本的にはプロジェクトに同梱しておいた方が良いと思います。

Nettuts+ のチュートリアル動画

A RequireJS, Backbone, and Bower Starter Template

Nettuts+ によるチュートリアル動画です。 Bowerの基本的な使い方に加えて、RequireJSとBackboneによるスタートアップについて解説しています。 参考に、是非。

まとめ

node.js が出てから、JSベースの便利ツールが沢山出て来ましたね。 有り難りつつも、しっかり楽をさせてもらいましょう。

2013/09/05

bowerバージョンアップによる設定ファイルとディレクトリ名の変更について記載

TumblrPostsとは

• Js-tumblrposts.js by mach3

TumblrPostsは、「Tumblrでタグリスト/新規投稿リストを出力してみる」で紹介したjQueryプラグインです。

TumblrのAPIでは、最新のポストのリストを取得する事ができますが、 タグの一覧を取得する方法が無かった為、それを可能にする為のライブラリです。

新しいTumblr APIについて

今現在、Tumblrからは新しいAPIが提供されています。

• API | Tumblr : 新しいAPI
• Tumblr API v1 | Tumblr : 古いAPI

（投稿リストを取得する上で）大きく変わったのはAPI Keyを必要とするようになった点、 それから最大取得件数が50件から20件に減った点です。タグ自体のリストの取得機能は今見る限りではなさそうです。

TumblrPostsはAPIへのリクエストを繰り返して投稿リストをまとめていくタイプのライブラリなので、 最大取得件数が半分未満に減る事で、リクエスト回数が倍以上に膨れ上がる事になります。 投稿数が多いブログではパフォーマンスに大きな影響を与えるので、ちょっとまずそうですね。

そういったわけで、今回のTumblrPostsでも引き続き旧バージョンのAPIを使用します。 旧バージョンの提供がなくなったり、新バージョンでの機能強化があったらその時にまた考えます。

新しいTumblrPostsの主な変更点

基本的な使い方はそのままに、下記の点を修正しています。

1. 依存ライブラリをjQueryのみに（jquery.class.jsから切り離しました）
2. jQuery.on/off に対応（bind/unbindも引き続き使えます）
3. 取得件数の設定を詳細に
4. getTags()のソートの初期設定を変更

4について、旧バージョンでは投稿数での降順にソートされていましたが、 デフォルトではソートなしで、引数でソートの方向を指定出来るようにしました。

使い方

基本的な使い方

旧バージョンから大きな変更はありません。

// インスタンスを生成
var myTumblrPosts = new TumblrPosts();

// 読み込み完了時のイベントハンドラを設定
myTumblrPosts.on("complete", function(){
    var $ul, tags;

    // getTags() : タグリストを取得
    tags = this.getTags();
    $ul = $("<ul>");
    $.each(tags, function(i, tag){
        $ul.append(
            $("<li>").text(tag.name + " (" + tag.count + ")")
        );
    });

    $ul.appendTo( $("#your-own-container") );
});

// 読み込みを開始
myTumblrPosts.run();

タグリストのソート

getTags() の引数に “asc” または “desc” を渡すと、投稿数でソートを行います。
引数がない場合は、ソートを行いません。

myTumblrPosts.getTags("asc"); // <= 投稿数の少ない順にソート
myTumblrPosts.getTags("desc"); // <= 投稿数の多い順にソート

まとめ

TumblrPosts.js のダウンロードはこちらから。

» Js-tumblrposts.js by mach3

昔書いた物の粗が見えるようになるのは、成長の証でしょうか。

作ってみたもの

まずはデモから。当たり前ですが、box-shadowに対応していないブラウザでは動きません。

• DEMO on JS Bin

JS Bin

感想

作って動かしてみた率直な感想を申し上げると…そもそもこういう用途を想定していないと思うので、当然あまり捗りませんでした。 が、描かれる物の雰囲気は、これはこれで嫌いではないです。水墨画的な物が描けそう。

重さが加速する

Webkitはかなり軽快に動くのですが、Firefoxだとかなりもっさりした動きになります。IE9だとまだマシです。 そして、書けば書くほど重くなっていきます。 box-shadowを一点ずつどんどん重ねていっているわけですから、そりゃ当然重くなりますよね。

線を引きにくい

基本的にブラシで点描を繰り返している様な物なので、あまりはやく描こうとすると途切れて線になりません。 そういうブラシだと思うしかないでしょう。 間を補完するような感じに描画しようかとも思いましたが、むしろ味が損なわれる感じがしたので途中でやめました。

ライブラリ

書いてみたライブラリがこちら。別にやってる事はどうということはないです。 使い道は多分ないと思うのですが、使ってみたい方はお好きにお使いください。

ShadowCanvas : Drawing illustration with css box-shadow — Gist

/**
 * ShadowCanvas
 *
 * Drawing illustration with css box-shadow
 *
 * @version 0.9
 * @author mach3ss
 * @require jQuery
 */
var ShadowCanvas = function(selector, option){

    // config
    this.option = $.extend({}, this.option, option);
    this.node = $.extend({}, this.node);

    // nodes
    this.node.container = $(selector);
    this.node.canvas = $("<div>")
    .css({position:"absolute"})
    .appendTo(this.node.container);

    // events
    this.node.container
    .on("mousemove", $.proxy(this._onMouseMove, this))
    .on("mousedown", $.proxy(this.start, this))
    .on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){

    fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
    fn.drawing = false;

    fn.node = {
        container : null,
        canvas : null
    };

    fn.option = {
        color: "black",
        blur : 5,
        size : 5
    };

    /**
     * Configure option or get the option value
     *
     * @param String key
     * @param Mixed value (optional)
     * @return Mixed
     */
    fn.config = function(key, value){
        if(this.option.hasOwnProperty(key)){
            if(typeof(value) !== "undefined"){
                this.option[key] = value;
                return this;
            } else {
                return this.option[key];
            }
        }
    };

    /**
     * Get css text for box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return String
     */
    fn._getBoxShadowText = function(x, y){
        var o, callback;
        o = this.option;
        o.x = x;
        o.y = y;
        callback = function(a, b){
            return o[b];
        };
        return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
    };

    /**
     * Draw the point with box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return self
     */
    fn.draw = function(x, y){
        var shadow = this.node.canvas.css("boxShadow");
        shadow = shadow === "none" ? "" : "," + shadow ;
        shadow = this._getBoxShadowText(x, y) + shadow;
        this.node.canvas.css("boxShadow", shadow);
        return this;
    };


    /**
     * Start drawing
     *
     * @return self
     */
    fn.start = function(){
        this.drawing = true;
        return this;
    };

    /**
     * Stop drawing
     *
     * @return self
     */
    fn.stop = function(){
        this.drawing = false;
        return this;
    };

    fn._onMouseMove = function(e){
        var offset, x, y;

        if(! this.drawing){
            return;
        }

        offset = this.node.container.offset();
        x = e.clientX - offset.left + document.body.scrollLeft;
        y = e.clientY - offset.top + document.body.scrollTop;
        if(x < this.node.container.width() && y < this.node.container.height()){
            this.draw(x, y);
        }
    };

    /**
     * Clear all on canvas
     *
     * @return self
     */
    fn.clear = function(){
        this.node.canvas.css("boxShadow", "none");
        return this;
    };

    /**
     * Get css text of the illustration on canvas now
     *
     * @return String
     */
    fn.getCSS = function(){
        return this.node.canvas.css("boxShadow");
    };

}(ShadowCanvas.prototype));

使い方は、キャンバスにしたいボックス要素のセレクターを引数にしてnewするだけです。 各設定はconfigで。

var myCanvas = new ShadowCanvas("#my-canvas");
myCanvas.config("color", "black");
myCanvas.config("size", 8);
myCanvas.config("blur", 10);

まとめ

表現力は結構ありそうですが、実用的なアプリかと問われると…

cf) CSS3のbox-shadowだけで作られたモナリザ・・・ – かちびと.net

HybridAuthとは

HybridAuth, Open Source Social Sign On PHP Library

HybridAuth enable developers to easily build social applications to engage websites vistors and customers on a social level by implementing social signin, social sharing, users profiles, friends list, activities stream, status updates and more.

WebサイトにOAuth認証を簡単に設置する為のPHPライブラリです。 Twitter、Facebook等をはじめとした様々なサービスに対応しています。 サポートされているサービスは、現時点で32。

また、CodeIgniterやCake、Zend等のFWはもちろん、 WordPressやJoomula等のCMSのプラグインとしても利用できます。

• II. Third-party Plugins | Download HybridAuth

HybridAuth と Opauth の違い

HybridAuthはOpauthと似たタイプのライブラリですが、 この2者で大きく異る点、というよりはHybridAuthのメリットを2つご紹介します。

1. 自由にカスタマイズ可能なURL
2. APIにアクセスするメソッド

自由にカスタマイズ可能なURL

Opauthは、ログインURLの一部にサービス名を含んでいないと正常に動きません。 URLの文字列から認証するサービスを判別する為です。 （ここらへん、前回の記事では説明不足でしたね。すみません。）

例えば、「http://www.example.com/login/twitter」ならtwitterの認証画面へ、 「http://www.example.com/login/facebook」ならFacebookの認証画面へ飛ぶわけですね。

一方HybridAuthには、そういった縛りはありません。 そのかわり、認証メソッドの引数にサービス名を渡す事になります。

APIにアクセスするメソッド

Opauthは認証するだけでしたが、HybridAuthは認証した後にAPIにアクセスしてgetしたりpostしたりできます。 これ一本で全部面倒見切れそうですね。

簡単な使い方

HybridAuthを hybirdauth/ ディレクトリに保存したと想定して、 次のようなファイル構成にしてみます。

login.php (ユーザーがアクセスするページ)
config.php (設定ファイル)
hybridauth/ (ダウンロードしたHybridAuthの構成ファイル)
├ config.php
├ index.php
├ install.php
└ Hybrid/

設定ファイルを作る

hybridauth/config.php を参考にして、config.phpを作って必要事項を明記しましょう。 ここでは、Twitterのログインに必要な物だけを記載しておきます。

<?php

return array(
    "base_url" => "http://localhost:8080/hybridauth/",
    "providers" => array(
        "Twitter" => array(
            "enabled" => true,
            "keys" => array(
                "key" => "[your app's consumer key]",
                "secret" => "[your app's consumer secret]"
            )
        )
    )
);

base_url

実際にOAuthのやり取りをしてくれるスクリプトを指します。 多くの場合HybridAuthをインストールしたディレクトリになります。

providers

認証したいサービスの設定を列挙していきます。 Twitterの場合は、作成したアプリケーションのconsumer keyとconsumer secretを記載します。

ログイン処理を書く

./login.php を用意して、ログイン処理を書いてみます。

<?php

// 設定ファイルを引数にして初期化する（配列でもOK）
$auth = new Hybrid_Auth( "./config.php" );

// 認証の実行（未認証の場合はここでリダイレクトされ、認証済みの場合はスルーされます）
$twitter = $auth->authenticate("Twitter");

// ↓ ここから認証済みの場合の処理
echo "<h1>認証されています！</h1>";

// ユーザー情報をまとめてくれる getUserProfile() メソッド
var_dump(
    $twitter->getUserProfile()
);

// APIにアクセスしてみる
var_dump(
    $twitter->api()->get("account/verify_credentials.json")
);

コメントの通りです。authenticateメソッドだけでほとんど余計な処理は省かれて、スッキリしていますね。

実際の動作としては、こんな感じみたいです。

1. ユーザーがlogin.phpにアクセス
2. hybridauth/index.php に移動、そこからサービスの認証画面へリダイレクト
3. 認証が済んだらトークンをセッションに保存して、再びユーザーが元いたlogin.phpに移動

base_url について

config.php で出て来た base_url ですが、少し補足しておきます。

要するにこの項目は、全ての認証処理を代理で行なってくれるイケてるしヤバい hybridauth/index.php にアクセスさせる為の物です。 もっと言えば、そこにアクセスしたユーザーに対して hybridauth/index.php に記述されている処理が走りさえすれば良いです。

ですので、上の例示では hybridauth/ ディレクトリが公開ディレクトリにある前提になっていますが、 そうでない場合（非公開ディレクトリになっていたり、フレームワークの都合上アクセス出来なくなっていたりする場合）、 アクセスさせるファイル内で hybridauth/index.php をインクルードしさえすれば動くはずです。

例えば、”base_url” を /auth.php 等として、該当ファイルを設置し、

require_once("/the/path/to/hybridauth/index.php");

等としておけば良いですね。

気になった事柄

公式の例示では、APIアクセスも、認証済みである事を前提としていました。

認証を使わず、アプリに割り振られたのアクセストークンを使ったAPIアクセスは可能なのか、が気になりました。
それをするならそういうライブラリを使えば良いのですが、一つで済むならそれが一番ですよね。
気が向いたら調べてみます。

認証はOpauthで

• Opauth – Multi-provider authentication framework for PHP

Opauthは、様々なOAuth認証を一手に引き受けてくれる認証フレームワークです。

執筆時に公式に紹介されていた利用可能なサービスは、Twitter・Facebookなどを含め11件。 これらのサービスへの認証機能は「ストラテジー」という形で外部モジュールとして提供されます。 所謂ストラテジーパターンと呼ばれる物ですね。

その使い方は、認証のみにフォーカスしているライブラリなだけあって恐ろしくシンプルで簡単。 早速試してみます。

インストール

公式のダウンロードページからダウンロードするか、 Githubにリポジトリが公開されているのでそこからcloneします。

• ダウンロードページ
• GitHubリポジトリ

公式の「Opauth bundled with examples」からなら、Twitter、Google、Facebookのストラテジーも同梱されているので 最初に試す際にはこれがおすすめです。 （それ以外ではストラテジーが空っぽの状態なので、別途ダウンロードしてくる必要があります）

設定

ダウンロードして解凍・設置したら、設定ファイルを用意します。 opauth.config.php などとしておきましょう。

$opauth_config = array(
    /**
     * アプリケーションへのパス
     */
    "path" => "/the/path/to/",

    /**
     * Twitterで認証した後に戻るコールバックURL。
     * {path} は前述のpathを展開してくれる。
     */
    "callback_url" => "{path}callback.php",

    /**
     * ハッシュの生成に使われる文字列。任意の文字列を入れておく。
     */
    "security_salt" => md5("foobar"),

    /**
     * ここからがストラテジーの設定
     */
    "Strategy" => array(
        /**
          * Twitterストラテジーの設定
          * key, secret はTwitterの公式から取得。
          */
        "Twitter" => array(
            "key" => "[consumer_key]",
            "secret" => "[consumer_secret]"
        )
    )
);

consumer_key と consumer_secret は、 事前にTwitterでアプリケーションを登録して、自前の物を取得しておきましょう。

• Create an application | Twitter Developers

試してみる

Twitterの認証画面へリダイレクト

まず、Twitterの認証画面へリダイレクトするスクリプトを書きます。 ユーザはログイン時はこのページにアクセスする事になります。

<?php

require "/the/path/to/Opauth.php";
require "/the/path/to/opauth.config.php";

new Opauth($opauth_config);

ライブラリと設定を読み込んでインスタンスを初期化するだけです。
認証画面のURLの取得やらリクエストトークンの取得やらリダイレクト処理やら、
面倒な部分は全て代行してくれます。素晴らしい。

アクセストークンを取得

今度は、Twitterの認証画面から返ってきたユーザのアクセストークンを取得します。

デフォルトの設定では、認証情報は全て$_SESSIONに入るので
事前に*session_start()* しておきましょう。

<?php

session_start();

require "/the/path/to/Opauth.php";
require "/the/path/to/opauth.config.php";


/**
 * コールバック時には第二引数にfalseを入れて初期化する。
 */
$opauth = new Opauth($opauth_config, false);

/**
 * 認証情報を取得します。
 */
if(isset($_SESSION["opauth"]) && isset($_SESSION["credentials"])){

    $uid = $_SESSION["opauth"]["auth"]["id_str"]; // Twitterの数字のID
    $access_token = $_SESSION["credentials"]["token"]; // アクセストークン
    $access_token_secret = $_SESSION["credentials"]["secret"]; // 秘密のアクセストークン

}

コールバック時も、インスタンスを初期化してセッションから情報を取得するだけです。

ここで取得したアクセストークンを使ってTwitterAPIにアクセスするわけですが、
Opauthは認証を代行するライブラリなので、その為の機能は備えていません。
ここから先は、他のライブラリに代行してもらうことにします。

APIの利用はtmhOAuthで

• 
  themattharris/tmhOAuth
  

tmhOAuthは、PEARのServices_TwitterのようにTwitterAPIへのアクセスを代行してくれるライブラリです。
勿論認証機能も備えていますが、あまりにもOpauthが楽すぎたので作業分担をしてもらいます。

その特徴としては、（ほぼ）単ファイルで構成されていること。
tmhOAuth.phpをとってきて読み込むだけでその機能を利用する事ができるので、導入が容易いですね。
（正確には、tmhUtilities.php というユーティリティ用のファイルが同梱されていますが、
依存しているわけではありません）

試してみる

基本的には、前項で取得した4つのトークンを引数にして初期化して、
あとはTwitterAPIへのリクエストを行うだけです。

<?php

require "/the/path/to/tmhOAuth.php";

/**
 * tmhOAuthを初期化。
 * コンストラクタの引数はトークンをまとめた連想配列。
 */
$twitter = new tmhOAuth(
    array(
        "consumer_key" => "[consumer_key_for_your_application]",
        "consumer_secret" => "[consumer_secret_for_your_application]",
        "user_token" => "[access_token_of_the_user]",
        "user_secret" => "[access_token_secret_of_the_user]"
    )
);

/**
 * requestメソッドでTwitterAPIにリクエストを送る。
 * ここではユーザーのホームタイムラインを取得してみる。
 */
$status = $twitter->request(
    "GET", // リクエストメソッド
    $twitter->url("1/statuses/home_timeline"), // エンドポイントを指定
    array( "count" => 8 ) // パラメータ
);

/**
 * requestの返り値はHTTPのステータスコード
 */
if($status == 200){
    /**
     * データはメンバのresponseの中に、
     * さらに生のデータはその中の"response"の中にJSONで格納されている。
     */
    $response = $twitter->response;
    $data = json_decode($response["response"]);
    var_dump($data); // あとは煮たり焼いたりする
}

無事タイムラインを取得出来ましたでしょうか。
requestの返り値に注意しましょう。

こちらのライブラリもまた、かなりシンプルな使い勝手になっていますね。

まとめ

PEARのServices_Twitterには、個人的にいくつかの不安がありました。

• 
  ながらくβ版のままで、あまりメンテナンスされていない
  
• 
  ローカルコピーでプロジェクトに同梱しづらい
  

そこで他の選択肢を探していましたところ、
これらの2つのライブラリが候補として挙がって来ました。

お手軽さも上々なので、今後是非試していきたいリソースです。

MovieCrop.jsについて

• MovieCrop.js via Github

MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。

再生/逆再生/停止/巻き戻しが出来ます。

簡単な使い方

まず使用する画像を作成し、ブロック要素の背景にします。

要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなので、そのような画像を用意します。

アニメーションの再生方法は、jQueryオブジェクトのmoviePlay()メソッドをコールするだけです。

$(".loading").moviePlay();

逆再生・停止・巻き戻しも同じ要領で。

$(".loading").movieReverse(); // 逆再生
$(".loading").movieStop(); // アニメーションをストップ
$(".loading").movieRewind(); // 最初のコマに巻き戻す

動きをカスタマイズする

動きをカスタマイズするには、moviePlay/movieReverseメソッドにオプションを渡します。

$(".loading").moviePlay({
    fps : 20, // fps（1秒毎のフレーム数）
    frames : 20, // 合計フレーム数
    repeat : true, // リピート再生をするか否か
    direction : "vertical" // アニメーションの方向
});

完了時のコールバックを設定する

アニメーション完了時のコールバックを、moviePlay/movieReverseの第二引数で設定できます。 このコールバックは、アニメーションが「完了」しないと呼ばれません。 つまり、オプションのrepeatをfalseに設定し、最後のコマまで進んだ時初めて呼ばれます。

$(".loading").moviePlay({
    repeat : false
}, function(){
    console.log("アニメーションが完了しました");
});

MovieCropクラス

MovieCropクラスのインスタンスを生成して使う事もできます。 この場合は、第一引数にはjQueryオブジェクトではなく、HTMLElementを渡して下さい。

var ele, mc;
ele = $(".loading")[0];
mc = new MovieCrop( ele, {
    fps : 20,
    frames : 20
});
mc.play();

MovieCropクラスは次のメソッドを持ちます。

• play(callback) : 再生する
• reverse(callback) : 逆再生する
• stop() : 止める
• rewind() : 最初のコマに戻る
• nextFrame() : 次のコマに進む
• prevFrame() : 前のコマに戻す
• setFrame(frame) : 指定されたコマに移動する

デモ

• MovieCrop.js DEMO via jsfiddle

まとめ

冒頭で申し上げた通り、この手のソリューションは他にも優秀な選択肢があります。 特にもうじき発表されるAdobeFlashCS6は、FlashIDEで制作したアニメーションからCSSスプライトシートを書き出す事ができ、そこからそのままアニメーションさせる事が出来るスグレモノです。 スプライトアニメーションは素材の画像を作るのが恐らく一番面倒なので、こうしたアプリケーションは大変助かりますね。

ならばこのライブラリをいつ使うのかと言うと…。シンプルさ故にライブラリ間の競合の不安が少し減る程度の存在意義は…あるかな。

yepnope.jsとは

yepnope.js | A Conditional Loader For Your Polyfills!

手書き風のロゴがかわいい。

yepはyes、nopeはnoの口語体で、固く言えば「yesno.js」。
与えた条件がtrueの場合とfalseの場合で読むJS/CSSを切り替えるのが得意な
リソースローダーです。

最も簡単なサンプル

yepnope("hoge.js");
yepnope("style.css");

単一ファイルをロードするだけの簡単なサンプルです。
内部的には、ドキュメント内で一番最初のScript要素を探して、
その前にinsertBeforeしているみたい。

ちなみに、スクリプトローダーではなく「リソースローダー」なので
JavaScriptだけではなくCSSもロード出来ます。

複数ファイルを読んでみる

yepnope({
    load : [ "hoge.js", "fuga.js" ]
});

load

後述するtestの結果に関わらず、とにかく読み込む。

条件分岐で読むJSを分ける

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ], /* testの結果がtrueの場合こっちを読む */
    nope : [ "foo.js", "bar.js" ] /* testの結果がfalseの場合こっちを読む */
});

test

基準となる条件文等

yep

testがtrueの時に読み込むファイル。単一ファイルの場合は文字列でも可。

nope

testがfalseの時に読み込むファイル。単一ファイルの場合は文字列でも可。

上の例は、localStorageが使用可能である場合はyepに設定したhoge.js,fuga.jsがロードされ、
そうでない場合はnopeに設定したfoo.js,bar.jsがロードされます。

コールバックを設定する

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ],
    nope : [ "foo.js", "bar.js" ]
    callback : function( url, result, key ){
        console.log( url ); /* ロードされたリソースのURL */
        console.log( result ); /* testの結果（true|false） */
        console.log( key ); /* yep|nope におけるインデックス（またはキー） */
    },
    complete : function(){
        console.log( "全部読み込み終わりました！" );
    }
});

ロード完了時の処理をcallback/completeで設定出来ます。
ファイルのロードは非同期に行われる為、
読むリソースを元に何かを処理したい場合はこれらのコールバックを使用します。

callback

リソースが読み込まれる度に呼ばれる。

complete

全リソースがロードし終えた時に一度だけ呼ばれる。

「無ければ読めばいいじゃない」を実装する

var Init = function(){
    if( !window.MyClass ){ return; }
    new MyClass();
};

yepnope({
    test : window.MyClass,
    nope : "myclass.js",
    complete : Init
});

myclass.js

var MyClass = function(){
    console.log( "Hello, MyClass" );
};

MyClassが無い場合はjsファイルをロードしてから、
既にある場合はスルーしてcompleteが呼ばれるのでそのまま初期化。

コールバックで再度条件分岐をしているのは、myclass.jsが読み込めたかどうかの保証が無い為。
myclass.jsが404でも、タイムアウト後にcompleteは呼ばれてしまいます。

まとめ

以前、ローダーもくっついている器用な「head.js」を記事にしましたが、
やはり特化したローダーともなると、さすがに色々と気が効いています。
基本的にJavaScriptファイルはパックしてしまう事が多いのですが、
新要素のフォールバック等にはかなり活用出来るかもしれませんね！

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

@anywhereはTwitter公式から提供されている、
どのサイトでもTwitterの機能が使えるようになる便利なライブラリです。
cf) ブログで@anywhereを試してみた！ ～ どこでもTwitter

今回はこの@anywhereでユーザー認証をしてみましょう。
※アプリケーションの登録等は割愛致します。
※jQueryを使用しています。

• @anywhereの基本
• 認証に必要な機能
• デモ
• コード抜粋
• めんどくせーな、と思ったら
• まとめ

@anywhereの基本

ライブラリのロード

公式で登録したアプリケーションのAPIkeyを付加したURLで、ライブラリをロードします。

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=<ここにAPIkeyを記述>&v=1"></script>

twttr.anywhere

@anywhereはtwttr.anywhereというメソッドが全ての基本です。

twttr.anywhere(function(tw){
    // ここでtwを使ってなんやかんやする
});

twttr.anywhereに渡したfunctionは、
anywhereを使用する準備が整った時にコールされます。
ここでfunctionに渡されているtwに様々な便利な機能が備えられているので、
それらを使ってなんやかんやするわけですね。

認証に必要な機能

cf) @anywhere公式ドキュメント（英語）

tw.isConnected()

ユーザー認証が済んでいるかどうかをbool値で返すメソッド。
認証済みかそうでないかで処理を切り分けたい時に使います。

if( tw.isConnected() ){
    // 認証済みの場合の処理
} else {
    // 未認証の場合の処理
}

tw.signIn()

Twitterにサインインする為のメソッドです。
これをコールすると、別ウィンドウでTwitterに接続するページが開き、
そのページでログインして戻ってくると認証が完了する仕組みです。

$("#Signin").live("click", function(e){
    tw.signin();
});

twttr.anywhere.signOut()

Twitterからサインアウトする為のメソッドです。
※signIn()とは親が異なる点に注意。

$("#Signout").live("click", function(e){
    twttr.anywhere.signOut();
});

authCompleteイベント

認証が完了すると、twの”authComplete”イベントがトリガーされます。
認証完了時に処理を行いたい時にbindして使います。
「おや？bindってjQueryじゃねーの？」とか思われるかもしれませんが、
実際anywhere自体がjQueryを使用して書かれているみたいです。

tw.bind("authComplete", function(e){
    alert("認証完了！");
});

tw.currentUser.data()

tw.currentUserには現在接続中のユーザーの情報が格納されています。
ユーザーの情報を引き出すには、data()メソッドを用います。
console.log()してみると分かりますが、プロパティアクセスでも取得出来ます。
※公式ドキュメントでは言及されていないので、念のためdata()を経由した方がよいかもしれません

// data()で取得
alert( tw.currentUser.data("screen_name") + "でログイン中です" );
// プロパティアクセスで取得
alert( tw.currentUser.screenName + "でログイン中です" );

取得できるユーザー情報のリストは、APIドキュメントを参照
…するよりもconsole.log()してプロパティ見たほうが多分はやい。

デモ

デモページは閉鎖致しました。

• 「Signin」ボタンをクリックすると認証用のページが開きます
• 認証が完了すると表示が切り替わってユーザー情報が表示されます
• テンプレートにjquery.render.jsを使ってみました
  
  cf) シンプルなjQueryテンプレートプラグインを書いてみる

コード抜粋

twttr.anywhere( function(tw){
    var refresh = function(){
        $("#LoginStatus").html("");
        if( !tw.isConnected() ){
            $("#template-loginstatus-normal")
            .render()
            .appendTo("#LoginStatus");
        }else{
            var cu = tw.currentUser;
            $("#template-loginstatus-connected")
            .render({
                "screen_name": cu.data("screen_name"),
                "profile_image_url": cu.data("profile_image_url"),
                "name": cu.data("name"),
                "description" : cu.data("description"),
                "location": cu.data("location"),
                "followers_count" : cu.data("followers_count"),
                "friends_count" : cu.data("friends_count"),
                "listed_count" : cu.data("listed_count")
            })
            .appendTo("#LoginStatus");
        }
    };
    $("#LoginStatus .signin").live( "click", function(e){
        tw.signIn();
        return false;
    });
    $("#LoginStatus .signout").live( "click", function(e){
        twttr.anywhere.signOut();
        refresh();
        return false;
    });
    tw.bind("authComplete", refresh);
    refresh();
});

めんどくせーな、と思ったら

簡単に認証ボタンが実装できる、connectButton()というメソッドが提供されています。
特にカスタマイズする必要がなかったり、面倒な時はこれを使っちゃえばいいですね。

twttr.anywhere( function(tw){
    tw("#MyConnectButton").connectButton();
});

サインアウトボタンにトグルしてくれたりはしないので、
欲しい場合は自分で実装する必要があります。

まとめ

フロントエンドだけで済んでしまうようなWebアプリケーションならば、
お手軽に使えて良いですね。
Webベースのクライアントなんかを作りたい時にも良いかもしれません。
さ、次はPHPのOAuthだ。