BigQuery へブラウザからクエリを投げて結果をテーブルで表示する #BigQuery

まあ，BigQuery の Web console から叩けば良いのですが，別途ブラウザで処理したいという需要もありますよね．

OAuth 認証のためのクライアントIDを取得する

https://console.developers.google.com/ の任意のプロジェクトで，[API と認証] -> [認証情報] -> [新しいクライアント ID を作成]と進むとクライアントIDを発行できます．
今回はブラウザから認証を行ったユーザ自身の認可情報を使用するので，ウェブアプリケーションのクライアントIDを発行します．

この項目は後から変更できるので，とりあえず localhost で試すようにしています．適宜変更してください．

認証する

Google API を利用するためのクライアントライブラリを読みこんでおきます．

<script src='//apis.google.com/js/client.js'></script>

JS 側では先ほど発行したclient_idと，BigQuery へのアクセス認可のための scope を指定します．
readonly にしておくのが良いでしょう．

gapi.auth.authorize
  client_id: '1234567890-abcdefg.apps.developer.gserviceaccount.com'
  scope: 'https://www.googleapis.com/auth/bigquery.readonly'
  ->
    gapi.client.load('bigquery', 'v2')

おなじみの権限認可の画面に遷移して戻ってきます．

ちなみに，権限を認可したアプリケーションは，https://security.google.com/settings/security/permissions で管理できますね．

クエリを投げる

クエリを投げて結果を取得します．
projectId, query を指定して，リクエストを構築します．

request =
  gapi.client.bigquery.jobs.query
    projectId: 'twitter2bigquery'
    query: 'SELECT user_screen_name, COUNT(*) AS cnt FROM [twitter.timeline] GROUP BY user_screen_name LIMIT 1000'

実際に API リクエストするには，これをexecuteします．
callback でレスポンスが取得できます．

request.execute (response) ->
  console.log response

table に表示する

> response.schema.fields
[{"mode":"NULLABLE","name":"user_id","type":"INTEGER"},{"mode":"NULLABLE","name":"user_name","type":"STRING"}, ...]
> response.rows
[{"f":[{"v":"123"},{"v":"alice"}]},{"f":[{"v":"456"},{"v":"Bob"}]},...]

このように返ってきたレスポンスはちょっと扱いにくい形になっているので，整形します．

columns =
  response.schema.fields.map (field) ->
    { title: field.name }
data =
  _.map response.rows, (row) ->
    _.map row.f, (values) ->
      values.v

これをさらに，整形して <tr><td>... としても良いですが，ここでは DataTables という jQuery プラグインに渡してしまうことにします．

$('#result').dataTable
  data: data
  columns: columns

簡単ですね．

これらの全体のコードは， https://github.com/ckazu/bigquery-viewer-example にあります．

さらに， HighchartsJS なんかだと HTML の <table> 要素をそのままグラフにできるので，ちょっと手を加えたら簡易ダッシュボードがすぐに作れちゃいますね．