1. 必要なもの
2. 短縮してみよう
3. 展開してみよう
4. めんどくさいのでクラスにしてみる
5. (おまけ) JavaScriptで展開する

必要なもの

APIのURLを控えておく

https://www.googleapis.com/urlshortener/v1/url

APIキーを取得しておく

Google APIs Consoleで
「URL Shortener API」をアクティブにしてAPIキーを控えて来る

今回は、PHP+cURLでやってみることに。
とりあえず持っている情報を変数につっこむ。

$api_url = "https://www.googleapis.com/urlshortener/v1/url";
$api_key = "[あなたのAPIキーを入れてください]";

短縮してみよう

URLの短縮は、APIに次のようなJSONをPOSTで送りつけます。

{“longUrl”: “http://www.google.com/”}

$longUrl = "https://blog.mach3.jp/";

$curl = curl_init();
$curl_params = array(
    // APIのURLに ?key=[your-key]を足してやります
    CURLOPT_URL => $api_url . "?" .
        http_build_query( array( "key" => $api_key ) ),
    // ヘッダをapplication/jsonに
    CURLOPT_HTTPHEADER => array( "Content-Type: application/json" ),
    // POSTで送ります
    CURLOPT_POST => true,
    // ロングURLの情報をJSONに加工して渡します
    CURLOPT_POSTFIELDS => json_encode( array( "longUrl" => $longUrl ) ),
    CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array( $curl, $curl_params );
$result = json_decode( curl_exec( $curl ) ); // 返り値はJSONなのでデコード
var_dump( $result );

レスポンスはJSONで返って来るので、json_decodeでオブジェクトにしてやります。
最終的に格納されている情報はこんな感じ。

object(stdClass)#1 (3) {
  ["kind"]=>
  string(16) "urlshortener#url"
  ["id"]=>
  string(19) "http://goo.gl/ZZKde"
  ["longUrl"]=>
  string(21) "https://blog.mach3.jp/"
}

展開してみよう

展開は簡単。パラメータくっつけてGETでとってくるだけです。
先ほど作った「http://goo.gl/ZZKde」を展開してみます。
こんなリクエストをおくって返事をもらってるだけ。
労力惜しむならfile_get_contents()でもよし。

https://www.googleapis.com/urlshortener/v1/url?key=[your_api_key]&shortUrl=[展開したいURL]

$shortUrl = "http://goo.gl/ZZKde";

$curl = curl_init();
$curl_params = array(
    CURLOPT_URL => $api_url . "?" .
        http_build_query( array(
            "key" => $api_key,
            "shortUrl" => $shortUrl
        )),
    CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array( $curl, $curl_params );
$result = json_decode( curl_exec( $curl ) );

こんな感じに帰ってきました。

object(stdClass)#2 (4) {
  ["kind"]=>
  string(16) "urlshortener#url"
  ["id"]=>
  string(19) "http://goo.gl/ZZKde"
  ["longUrl"]=>
  string(21) "https://blog.mach3.jp/"
  ["status"]=>
  string(2) "OK"
}

めんどくさいのでクラスにしてみた

GoogleUrl

gist: 69e4a0c19e4776924a21 – Shorten and expand urls using Google URL Shortener API- GitHub

使い方

// createメソッドで初期化。
// new GoogleUrl( $api_key ) でもいいです。
$gu = GoogleUrl::create( "[your-api-key]" );

try {
    // shortenメソッドで短縮
    $shorten = $gu->shorten( "http://www.mach3.jp" );
    var_dump( $shorten );

    // expandメソッドで展開
    $expand = $gu->expand( $shorten->id );
    var_dump( $expand );

} catch( Exception $e ){ die( $e->getMessage() ); }

(おまけ) JavaScriptで展開する

gist: d98215a9cae6ef22e741 – expand url using goo.gl shortener api- GitHub

jQuery使って展開してみました。
「callback」パラメータでJSONP出来るので、大変簡単。
つまりこんなリクエストをすることになります。

https://www.googleapis.com/urlshortener/v1/url?key=[your_api_key]&shortUrl=[展開するURL]&callbck=[コールバック関数名]

var expandGoogleUrl = function( url, key, callback ){
    $.ajax({
        url : "https://www.googleapis.com/urlshortener/v1/url",
        dataType : "jsonp",
        data : { shortUrl : url, key : key },
        success : function( data ){
            callback( data.error  ? false : data.longUrl );
        }
    });
};

// example
expandGoogleUrl (
    "http://goo.gl/fbsS",
    "[your api key]",
    function( url ){
        console.log( url );
    }
);

QRコードがそのまま作れたり（ http://goo.gl/pvqxy.qr ）、
アクセス解析出来たり（ http://goo.gl/info/pvqxy ）と結構便利なサービスです。
短縮したい際には使ってみようかな！

cf) ie7-js – Project Hosting on Google Code

シンプルになったclearfix

念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
（これも内部で条件分岐して頂けると大変幸せだなぁ）

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

そしてこちらがシンプルになったclearfixのコード。

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。

その他のIE9.jsの恩恵

ボックスサイズの計算法の統一化

ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。

first-child, last-childの実現

IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。

HTML5の新要素にも対応してくれる

header/nav/article/section等、HTML5で追加された新要素は、
IE～8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。

ie7-squish.js

別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->

まとめ

IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。