Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

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

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

スクリーンショット 2014-11-12 0.32.29.png

スクリーンショット 2014-11-12 0.32.54.png

認証する

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')

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

スクリーンショット 2014-11-12 2.46.47.png

ちなみに,権限を認可したアプリケーションは,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

簡単ですね.

スクリーンショット 2014-11-12 3.14.36.png

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

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

ckazu
aiming
オンラインゲームの企画・プロデュース・開発・運営を行う会社。Web+Game+リアルタイム通信技術に力を入れています!
http://aiming-inc.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした