Rails
GoogleAppsScript
JSON
SLOGANDay 15

RailsのデータをSpreadsheetに出す

やりたいこと

Railsで作ったデータをGoogle Spreadsheetに吐き出させたい

結論

直で連携させるのは厳しい
google-drive-apiとかgoogle-api-clientとかあるけど、gemで入れても
uninitialized constant
ってなる。
gemのバージョン指定してやらなきゃいけないとか、google-api-clientがバージョン9だとgoogle-deive-api動かないとかいろいろあってメンテナンス死にそうなのでrailsのほうでjsonではきだしてgasでspreadsheetに出す。

流れ

データを作成(Rails)

Json形式で出力(Rails)

データを受信(Google App Script)

Spreadsheetに書き込む(Google App Script)

まずRailsの準備

1.viewの作成
touch app/views/company.json.jbuilder

2.conterollerの作成
touch app/views/api/company/index.json.jbuilder

3.ルートの設定

config/routes.rb
Rails.application.routes.draw do
  namespace :api do
    namespace :company do
      get '/', action: 'index'
    end
  end
end

controllerでデータ整形

app/controllers/api/company_controller.rb
class Api::OneController < ApplicationController
  def index
    @comcom = Company.all
    render 'index', formats: 'json', handlers: 'jbuilder'
  end
end

今回は簡単にallで取得してるが、けっこう柔軟にデータを入れられる

viewで吐き出す

app/views/api/company/index.json.jbuilder
 json.companies @comcom

コントローラから渡されたデータをかく

サイトにアクセスすると、こんな感じでブラウザに表示される
ローカルだとhttp://localhost:3000/api/company かな

{"companies":
   [{"id":1,
     "name":"A会社",
     "created_at":"2017-12-02T02:29:46.000Z",
     "updated_at":"2017-12-02T02:29:46.000Z"
    },
    {"id":2,
     "name":"B会社",
     "created_at":"2017-12-02T02:29:46.000Z",
     "updated_at":"2017-12-02T02:29:46.000Z"
    },

gasで受信する

json吐き出してるurlから引っ張ってくる

code.gs
var json_url = "http://xxx.xxx.xx/api/one"

function JSON() {
  var json = UrlFetchApp.fetch(json_url).getContentText();
  var jsonData = JSON.parse(json);
  Logger.log(jsonData["companies"]);
}

ログ見たら、ちゃんとデータがきてることがわかる

書き出す

シートを取得してくる
スプレッドシートのurlをコピる

code.gs
var sp_url = "https://docs.google.com/spreadsheets/d/xxx/";
var spreadsheet = SpreadsheetApp.openByUrl(sp_url);

一行目はラベルをつけたいので二行目からデータを書き込む
getRangeで書き込む場所を指定し、setValueでデータをいれている

 var i=0;
  var k=1;
  for (var idx in jsonData["companies"]) {
    sheet.getRange(i+2, k).setValue(jsonData['companies'][j]['name']); 
    sheet.getRange(i+2, k+1).setValue(jsonData['companies'][j]['created_at']);  
    sheet.getRange(i*2, k+2).setValue(jsonData['companies'][j]['updated_at']);  
    i++;
  }

コードの全貌はこちら

code.gs
var sp_url = "https://docs.google.com/spreadsheets/d/xxx/";
var spreadsheet = SpreadsheetApp.openByUrl(sp_url);
var json_url = "http://xxx.xxx.xx/api/one"

function JSON() {
  var sheet = spreadsheet.getSheetByName("hogehoge");
  var json = UrlFetchApp.fetch(json_url).getContentText();
  var jsonData = JSON.parse(json);
    var i=0;
    var k=1;
  for (var idx in jsonData["companies"]) {
    sheet.getRange(i+2, k).setValue(jsonData['companies'][j]['name']); 
    sheet.getRange(i+2, k+1).setValue(jsonData['companies'][j]['created_at']);  
    sheet.getRange(i*2, k+2).setValue(jsonData['companies'][j]['updated_at']);  
    i++;
  }
}

実行結果はこちら

image.png

ちゃんと出たやったね

その他やったこと

mysqlから直にスプレッドシートつなげばよくない!?→ポート開けるのにチキった
でも一応できるようです