Bitly APIとJavaScriptでAJAXな短縮URL生成ツールを作成

BitlyのAPIを使って短縮URLを生成するツールを作る機会がありました。Google Analytics計測用のパラメータをつけたURLをメルマガ用に短縮させるツールとなります。意外と扱いやすいAPIであり、かなりの高機能なAPIでした。今回はその中でも最も使うであろうURL短縮機能に絞って実装の方法でも紹介したいと思います。

BitlyとBitly API

bitly

Bitlyとは言わずもがな、「URL短縮サービス」です。Twitterのタイムラインなどでよく見かけるやつですね。短縮URLのドメイン「bit.ly」は「.ly」というリビアの国別コードトップレベルドメイン(ccTLD)が使われています。そして、このBitlyのサービスを手軽に使えるようにしたのがBitly APIとなります。

デモ – 短縮URL作成ツール

今回のブログ記事の投稿に当たり、Bitly API v3.0とJavaScriptを使って以下のような簡単なURL短縮ツールを作ってみました。まずはお試しください。

URL短縮ツール

さっそくAPIの使い方から実装方法までまとめてみたいと思います。

Bitly APIの使い方(短縮URL取得編)

基本スタイル

基本は以下のURLを叩くだけで、短縮URLを取得することができます。

https://api-ssl.bitly.com/v3/shorten?access_token=[取得したアクセストークン]&longUrl=[短縮したいURL]

上記のURLを叩くと(ブラウザのアドレスバーでもOK)、json形式で以下のような結果が返されます。

{ "status_code": 200,
  "status_txt": "OK",
  "data": { "long_url": "http://mae.chab.in/",
            "url": "http://bit.ly/1v8Tgmw",
            "hash": "1v8Tgmw",
            "global_hash": "9WyNqT",
            "new_hash": 0
  }
}

それから注意点として[短縮したいURL]は必ずエンコードした状態でAPIに送る必要があります。(すでにエスケープされたものでも)

例えば以下のようなURLは

http://example.com/page?parameter=value#anchor

以下のようにエスケープされている必要があるということです。

http%3A%2F%2Fexample.com%2Fpage%3Fparameter%3Dvalue%23anchor

Bitly APIのアクセストークンを取得する

Bitly APIを使うには、Oauth 2.0認証用のアクセストークンの取得が必須となります。以下のステップに沿って取得してみてください。

1. Bitlyのアカウントを作る

まずは以下よりBitlyのアカウントを作ります。

2. アクセストークンの取得ページにアクセス

以下にアクセスします。

3. アクセストークンを取得ページにアクセス

ステップ1で作ったアカウトのパスワードを入力します。アカウントが認証されていないとパスワードが入力できないので、設定ページにてEmail Verificationを事前に済ませてください。

Bitlyアカウントのパスワードを入力

4. 表示されたアクセストークンをコピーして使う

表示されたアクセストークンは、ここでコピーしておかないと後から確認できないようなので必ずメモっておくようにします。(アクセストークンを忘れた場合でも、再度取得し直すことは可能です。)

Biltyアクセストークンをコピーする

認証に関しての詳細は、以下のBitly APIのドキュメントを参照してください。

オプション

上記の基本スタイルに以下のパラメータをつけることもできます。

・domain

domainに設定できる値は、[bit.ly][j.mp][bitly.com][カスタム短縮ドメイン]となります。こちらに設定したドメインを使用して短縮ドメインが生成されるようになります。

ちなみに、以下から短縮URLに使いたい自分の好きなドメイン(カスタム短縮ドメイン)を設定することができます。

・format
formatに設定できる値は、[json][xml][txt]となります。APIから返されるデータの形式を選択します。デフォルトではjsonが設定されています。

API制限

  • 同時接続は5つまで
  • IPアドレス、接続した時間などによる制限あり
  • 1時間で制限はリセットされる
  • 制限を超える使用をしたい場合は別途相談

参考サイト

Bitly API、特に認証関係の話は以下のサイトを参考にしました。

JavaScriptでURL短縮ツールを作る

Bitly APIを使う準備が完了したら、さっそくBitly APIを使って短縮URLを生成する機能を実装してみましょう。

URL取得用フォーム

まずは短縮する前のURLを取得するためのフォームを作成します。HTMLは以下のようになります。

<div class="form">
<form>
  <!-- URL入力用フォーム -->
  <input type="text" class="url" value="" placeholder="短縮させたいurl">
  <!-- ボタン -->
  <input type="button" value="URL短縮" class="button">

  <!-- 短縮URL用のドメイン選択オプション -->
  <div>
    <label><input type="radio" name="domain" value="bit.ly" checked> bit.ly</label>
    <label><input type="radio" name="domain" value="j.mp"> j.mp</label>
    <label><input type="radio" name="domain" value="bitly.com"> bitly.com</label>
  </div>
</form>
</div>

<-- 結果表示エリア -->
<div class="result"></div>
</div>

フォームから値を取得する

上記で作成したフォームに入力/選択された値を取得するための処理を書きます。

$(function () {
  var url = $(".url");
  var button = $(".button");

  // ボタンを押した時に、function ()内の処理を実行
  button.on("click", function () {
    // URLを取得し、url_val変数に代入
    var url_val = url.val();
    // 短縮URL用ドメインを取得し、domain_val変数に代入
    var domain_val = $("input[name='domain']:checked").val();
  });
});

取得した値を使ってBitly APIにリクエストする

上記で取得した値を使ってBitly APIにリクエストするためのconvertBitly()関数を作成します。Ajaxを使って値を取得しますが、今回はjQuery.Deferred()を使います。

jQuery.Deferred()の詳細は以下をご参照ください。

実際にコードを書いてみると以下のようになります。

// 関数の引数には取得したURLとドメインの値を指定
function convertBitly(url, domain) {
  // 取得したURLをencodeURIComponent()関数を使ってエンコード
  var encUrl = encodeURIComponent(url);
  // Bitly APIへのリクエスト用URLを作成
  var bitly = "https://api-ssl.bitly.com/v3/shorten?access_token=[アクセストークン]&longUrl=" + encUrl + "&domain=" + domain;

  // インスタンスを生成
  var d = new $.Deferred();

  // jQuery.ajax()を使って、Bitly APIにリクエスト送信
  $.ajax({
    type: "get",
    url: bitly,
    dataType: "jsonp", // 別ドメイン間の通信なのでjsonp
    processData: false,
    contentType: false,
    success: d.resolve,
    error: d.reject
  });
  // Deferred()を監視し成功、失敗などの結果を返す
  return d.promise();
}

Bitly APIからの結果を取得し、表示する

上記のconvertBitly()関数を実行し、Bitly APIから受け取った値を表示させます。

// 結果を表示させる要素を取得
var result = $(".result");

// convertBitly関数を実行し、.done()でAjaxの結果を取得し、コールバック処理を行う
convertBitly(url_val, domain_val).done(function (d) {
  // 結果表示エリアを一旦空にする
  result.html("");
  // 短縮URLが取得できていた場合
  if (d.data.url) {
    // 結果表示エリアに取得した短縮URLを表示
    result.html("<p class='link_url'><a href='" + d.data.url + "' target='_blank'>" + d.data.url + "</p>");
  }
});

まとめると

上記のJavaScriptの処理をまとめると以下のようになります。

var generateUrl = (function () {
  var url = $(".url");
  var button = $(".button");
  var result = $(".result");

  // フォームから値を取得
  function getUrl() {
    button.on("click", function () {
      var url_val = url.val();
      var domain_val = $("input[name='domain']:checked").val();

      // 結果を表示
      convertBitly(url_val, domain_val).done(function (d) {
        result.html("");
        if (d.data.url) {
          result.html("<p class='link_url'><a href='" + d.data.url +"' target='_blank'>" + d.data.url + "</p>");
        }
      });
    });
  }

  // Bitly APIにリクエスト
  function convertBitly(url, domain) {
    var encUrl = encodeURIComponent(url);
    var bitly = "https://api-ssl.bitly.com/v3/shorten?access_token=[アクセストークン]&longUrl=" + encUrl + "&domain=" + domain;

    var d = new $.Deferred();

    $.ajax({
      type: "get",
      url: bitly,
      dataType: "jsonp",
      processData: false,
      contentType: false,
      success: d.resolve,
      error: d.reject
    });
    return d.promise();
  }

  return {
    init: function () {
      getUrl();
    }
  };
} ());

$(document).ready(function () {
  generateUrl.init();
});

以上、Bitly APIを使って、短縮URLを取得する方法の説明でした。短縮URLを作成すると、Bitlyのサイト内で確認できるようになります。クリック状況なども詳しくわかるようになっているので、様々な分析にも使えるようになります。

bitlyで短縮URLを確認

ちなみに、生成した短縮URLの後ろに「+(プラス)」をつけても、その短縮URLの各種データを確認することができます。

https://bitly.com/1v8Tgmw+

Bilty APIは短縮URLを作るだけでなく、APIのドキュメントを見てもらえたらわかると思います、他にもさまざまな機能が備わっています。その辺りも今後当ブログで紹介できたらと思っています。

コメント一覧

  • 必須

コメント