JavascriptでGoogleの短縮URLサービスを利用してみる

JavascriptでGoogleの短縮URLサービスを利用してみる。

【参考】
JavaScriptだけでGoogle URL Shortener APIを使う - せかいろぐ
http://sekai.hatenablog.jp/entry/2013/02/17/182500

Google APIs Client Library for JavaScriptからGoogle URL Shortener APIを使ってみる - Qiita
http://qiita.com/katabamisan/items/5e7ce84ff1754edf85b4

APIキーの取得

URLを短縮させる場合はAPIのキーが必要になる。
まずはAPIのキーを取得する。

下記のURLにアクセスする。
https://code.google.com/apis/console/

[APIと認証]-[API]をクリックして、[URL Shortener API]のボタンをクリックする。

同意する。

URL Shortener APIが有効になる。

[認証情報]をクリックして、新しいキーを作成する。

[ブラウザキー]を選択する。

とりあえず空で作成する。

[APIキー]をメモっておく。

Apacheのインストール・起動

ローカルのHTMLをブラウザで開いて試そうとすると、なぜか下記のエラーが出るので、
今回はVirtualBoxの環境にHTMLを置いて試す。

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

そのため、VirtualBoxのCentOSにログインして、Apacheをインストール・起動する。

$ sudo yum -y install httpd
$ sudo service httpd start

URLを短縮する

$ sudo vi /var/www/html/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
// 短縮するURL（今回ははてなのURLを短縮してみる）
var LONG_URL = "http://www.hatena.ne.jp";

function load() {
  gapi.client.setApiKey("（取得したAPIのキー）");
  gapi.client.load("urlshortener", "v1",　function(){
    var request = gapi.client.urlshortener.url.insert({
      resource: {'longUrl': LONG_URL}
    });
    request.execute(function(response){
      alert(response.id);
    });
  });
}
</script>
<script src="https://apis.google.com/js/client.js?onload=load"></script>
</head>
<body>
</body>
</html>

ブラウザからHTMLにアクセスすると、
短縮されたURLが表示される。

短縮されたURLを展開する

$ sudo vi /var/www/html/index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
// 展開するURL（上記で取得したはてなの短縮URLを展開してみる）
var SHORT_URL = "http://goo.gl/O0dg";

function load() {
  gapi.client.load("urlshortener", "v1",　function(){
    var request = gapi.client.urlshortener.url.get({
      shortUrl: SHORT_URL
    });
    request.execute(function(response){
      alert(response.longUrl);
    });
  });
}
</script>
<script src="https://apis.google.com/js/client.js?onload=load"></script>
</head>
<body>
</body>
</html>

ブラウザからHTMLにアクセスすると、
展開されたURLが表示される。