Chrome拡張機能でGoogle URL Shortener APIを利用する方法

Chromeの拡張機能では各種APIを利用する際、OAuth認証を使用することができます。GoogleのURL Shortener APIを使って、表示中のWebページの短縮URLを取得する拡張機能を作ってみました。

Contents

1 Googleアカウントを取得
2 Google Developer Consoleにログイン
3 プロジェクトの作成
4 APIの有効化
5 認証情報を作成
- 5.1 APIキーの発行
- 5.2 Client IDの発行

Googleアカウントを取得

GoogleのAPIを利用するためには、Googleアカウントが必要です。使用可能なアカウントを持っていない場合は、Google アカウントの作成からアカウントを取得しておきます。

Google Developer Consoleにログイン

Googleアカウントを使って、Google Developer Consoleにログインします。

プロジェクトの作成

作成する拡張機能のためのプロジェクトを作成します。

「プロジェクトを作成」ボタンを押す。

プロジェクト作成画面に進み、任意のプロジェクト名を付けてプロジェクトを作成します。

(1) 任意のプロジェクト名を入力する。
(2) 「作成」ボタンを押す。

APIの有効化

次に、利用するAPIの有効化を行います。今回は「URL Shortener API」を利用します。

「APIとサービスの有効化」リンクを選択

検索欄からAPI名で検索するか、カテゴリからAPIを探します。URL Shortener APIは「その他」カテゴリにあります。

(1) 検索欄に「URL」と入力
(2) 「URL Shortener API」を選択

APIを選択肢、APIの詳細ページが開いたら、ボタンを押して有効化を実行します。

「有効にする」ボタンを押す。

ダッシュボードに戻り、有効化されたAPIの一覧に「URL Shortener API」が追加されていることを確認します。

「URL Shortener API」が追加されていることを確認する。

これで、APIを有効化することができました。

認証情報を作成

続いて、APIを利用するための認証情報（APIキーやClient ID）を作成します。

利用するAPIやその機能によって、どちらの認証情報が必要となるかは異なりますが、URL Shortener APIでURLを短縮する場合は、APIキーとClient IDのどちらでもOKです。

ただし、APIキーを利用した場合は、ユーザーと短縮URLの関連付けが行われないため、Google URL Shortenerのダッシュボードに短縮したURLが掲載されません。Client IDを使ってOAuth認証を行った場合は、ダッシュボードに短縮したURLが表示され、クリック数などを確認することができます。

APIキーの発行

ダッシュボードから認証情報の画面に移動し、APIキーを作成します。

「認証情報」リンクに(1)、「認証情報を作成」ボタンに(2)、「APIキー」に(3)と記されている

(1) 左のサイドバーから「認証情報」を選択する。
(2) 「認証情報を作成」ボタンを押す。
(3) 「APIキー」を選択する。

その場でAPIキーが発行されます。認証情報のページでいつでも確認できるので、メモを取っておく必要はありません。

APIキーが発行された。

APIキーを使った拡張機能は、この記事の3ページ目で作成します。

Client IDの発行

OAuth同意画面の設定

最初に、OAuth同意画面の設定を行います。

認証情報画面のスクリーンショット。「OAuth同意画面」タブに(1)、「ユーザーに表示するサービス名」欄に(2)、「保存」ボタンに(3)と記されている

(1) 「OAuth同意画面」タブを選択する。
(2) 任意のサービス名を入力する。
(3) 「保存」ボタンを押す。

拡張機能のIDを確認

Client IDの発行に必要な、拡張機能のIDを確認します。

拡張機能を仮でChromeにインストールする必要があるため、デスクトップなどに任意の名前のフォルダ（ここでは「extension」フォルダとします）を作成し、その中にmanifest.jsonを作成します。

{
  "manifest_version": 2,
  "name": "URL Shortener",
  "version": "0.0.1"
}

manifest.jsonには、とりあえず必須項目だけ入れておきます。

次に、アドレスバーに「chrome://extensions」と入力するか、メニューの「その他のツール」「拡張機能」を選択して拡張機能のウィンドウを開き、「デベロッパーモード」にチェックを入れ、作成したフォルダをドラッグ＆ドロップして、拡張機能をインストールします。

Chromeの拡張機能管理画面のスクリーンショット。アドレスバーに(1)、「デベロッパーモード」チェックボッスに(2)、拡張機能のフォルダのドラッグ＆ドロップに(3)、インストールした拡張機能のIDに(4)と記されている

(1) アドレスバーに「chrome://extensions」と入力するなどして、拡張機能の画面に移動する。
(2) 「デベロッパーモード」にチェックを入れておく。
(3) 作成した拡張機能のフォルダをドラッグ＆ドロップしてインストールする。
(4) インストールした拡張機能のIDを確認する。

ここで表示されたIDを、Client IDの発行に使用します。

なお、本来はChromeストアに仮の拡張機能をアップロードして、ストアのURLの末尾にあるアプリケーションIDを使ってClient IDを発行しますが、ここでは省略してChromeのデベロッパーモードを使ってIDを確認しています。この場合、後々IDが変わり、Client IDの設定変更が必要になる場合があります。

Client IDの発行

Google Developer Consoleへ戻り、Client IDを発行します。

認証情報のスクリーンショット。「認証情報を作成」ボタンに(1)、「OAuth クライアントID」に(2)が記されている。

(1) 「認証情報を作成」ボタンを押す。
(2) 「OAuth クライアントID」を選択する。

1つ前の手順で確認した拡張機能のIDは、ここで使用します。

OAuth クライアントID作成画面のスクリーンショット。「Chrome アプリ」ラジオボタンに(1)、「アプリケーションID」欄に(2)、「作成」ボタンに(3)が記されている

(1) 「Chrome アプリ」を選択する。
(2) 「アプリケーション」欄に拡張機能のIDを貼り付ける。
(3) 「作成」ボタンを押す。

Client IDが発行されます。

次のページでは、OAuth認証でAPIを利用する拡張機能を作成します。