【rails】お問い合わせをgoogle spreadsheetに書き込ももう!

rails + google spreadsheetでお問い合わせを作成したのでやり方をまとめました!

まずこの機能を実装するために必要なデータがあるのでそれを準備しましょう!

googleの

・クライアントID
・クライアントシークレット
・リフレッシュトークン
・google spread sheetのID

です。

これさえ揃えばあとはgemを入れて少しいじるだけで完成します!

上記データを取得するためには

・google consoleでアプリケーションの登録をする
・ターミナルでわちゃわちゃしてrefresh tokenをゲットする
・spreadsheet作成してIDを取得する

の手順が必要になります。

rails初心者の僕にもできたので難しくないと思います!

google consoleにアプリケーションを登録する

https://console.developers.google.com/start
「Use google Api」を選択

スクリーンショット 2015-10-19 19.26.13

プロジェクト名を入力(今回はcontactにしました)
すべてのサービスと関連 API について、適用される利用規約を遵守して利用することに同意します。に同意
「作成ボタン」押す

スクリーンショット 2015-10-19 19.27.45

右下ににょろっとでてcontactプロジェクトが作成されました。
そのままにしておくと勝手にcontactプロジェクトに移動します。
移動しない人はロゴの右にあるプルダウンからcontactを選択して下さい。

スクリーンショット 2015-10-19 19.28.03

左のメニューから
APIと認証 > 認証情報
「認証情報を追加」をクリック
「OAuth 2.0 クライアントID」をクリック

スクリーンショット 2015-10-19 19.32.19

「同意画面を設定」をクリック

スクリーンショット 2015-10-19 19.33.21

サービス名を入力(その他は任意なので入れる方は入れて下さい)
「保存」をクリック

スクリーンショット 2015-10-19 19.34.05

クライアントIDの作成画面
「その他」を選択
「名前」を入力
「作成」をクリック

スクリーンショット 2015-10-19 19.34.21

クライアントIDとクライアントシークレットが作成されました。
メモしましょう!
こんな感じで取得できると思います!
client ID: xxxxxxxxxxxxxxxx.apps.googleusercontent.com
client secret: yyyyyyyyyyyyy

スクリーンショット 2015-10-19 19.35.54

ここからは
client IDを[your client ID]、
client secretを[your client secret]と表現します。

あと1つ作業があります。

OKを押して

左のメニューの中から

APIと認証 > API

Google Apps API > drive APIを選択

スクリーンショット 2015-10-20 10.56.47

「APIを有効にする」をクリック

スクリーンショット 2015-10-20 10.56.51

これで一旦google consoleでの作業は終わりです!!

・refresh tokenを取得

先ほど取得した[your client ID]を使用して以下のアドレスにアクセスします。

https://accounts.google.com/o/oauth2/auth?client_id=[your client ID]&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/drive&response_type=code&approval_prompt=force&access_type=offline

(url中の[your client ID]は先程入手したクライアントIDに変更してください)

すると先ほど入力したサービス名で認証を求められます。
許可をクリック

スクリーンショット 2015-10-19 19.39.31

コードをゲットできます!

このコードを使用してrefresh tokenを取得します!

スクリーンショット 2015-10-19 19.40.33

次にターミナルを開きましょう!

スクリーンショット 2015-10-19 19.41.29

以下のコマンドを打ち込みましょう!([your client ID]、[your client secret]、[先ほど入手した4/から始まるコード] )

curl -d client_id=[your client ID] -d client_secret=[your client secret] -d redirect_uri=urn:ietf:wg:oauth:2.0:oob -d grant_type=authorization_code -d code=[先ほど入手した4/から始まるコード] https://accounts.google.com/o/oauth2/token

そうすると以下の様な形でデータが返ってきます。

スクリーンショット 2015-10-19 19.43.49

refresh tokenが取得できましたね!
これで
・client ID
・client secret
・refresh tokenが揃いました!

今度はgoogle spreadsheetの準備をしましょう!

・spreadsheetの準備

https://docs.google.com/spreadsheets/u/0/にアクセス!
テスト用のアカウントでやってるのでこんな画面が…

スクリーンショット 2015-10-19 19.48.24

右下の+ボタンをクリックして新しいシートを作成しましょう!
ここで作成したシートにお問い合わせを書き込んでいくことになります。

スクリーンショット 2015-10-19 19.49.11

シートの一番上の行がそのままお問い合わせの項目になります。
今回はrailsからnameとdetailという値でお問い合わせする人の名前と内容を受け取るようにしているので画像のように、左上からname,detailとしています。

スクリーンショット 2015-10-19 19.56.20

ここでspreadsheetのIDをめもしましょう!
urlのhttps://docs.google.com/spreadsheets/d/の後をメモです。(/edit…というのは必要ないです)
画像で選択している場所です!

スクリーンショット 2015-10-19 19.56.21

さぁここまでの手順で
・クライアントID
・クライアントシークレット
・リフレッシュトークン
・spreadsheetのIDが揃いました!

あとはrailsを修正するだけで終了です!

railsの設定

まず今回利用するgemを入れましょう!

その後は普通に投げ先と処理を書くだけです!

今回はajaxを使用して/contactsにpostで投げるとjsonを返すようにしたので修正したファイルと内容は以下になります。

test.js
・/postにフォームから取得した値(名前、詳細)を送る

config/routes.rb
・test.jsによって/postに投げられたデータをcontacts_controller.rbのspreadメソッドに処理を投げる

contacts_controller.rb
・クライアントID、クライアントシークレット、リフレッシュトークンを使用してgoogle spreadsheetアクセスし、名前と詳細を書き込む

こんな感じです。

test.js

routes.rb

contacts_controller.rb

うまく言っていれば/contactsにajaxで投げるとspreadsheetに書き込まれていると思います!

余談

いろんな記事を参考にさせていただいたんですが、client IDとclient secretの取得の際にredirect URLも取得できるらしいのですがgoogle の仕様が変わっていたのか出てきませんでした(´;ω;`)

いろいろ調べるとurlはurn:ietf:wg:oauth:2.0:oobで大丈夫らしいです!

refresh tokenとか何やってるかいまいちわかっていないのでご教授してくださる方がいらっしゃいましたらよろしくお願いいたします!

スポンサーリンク