Replitで Rails × GAS のAPIは動くのか？ 実際に試してみた

## 概要

Replit上でRailsサーバーを構築し、Google Apps Script（GAS）を用いてRailsのデータをGoogleスプレッドシートに連携する方法を試しました。

## 使用ツール・サービス
#### [Replit](https://replit.com/)（クラウド開発環境）
クラウド上でさまざまなプログラミング言語を実行・開発できるオンラインIDEです。ブラウザだけでコードの編集・実行ができ、環境構築の手間を大幅に省けるため、学習用や簡単なプロトタイピングに適しています。無料でも使えます。

#### Ruby on Rails（APIサーバー）
#### Google Apps Script（GAS）


## さっそく実装
#### 1.ReplitでRailsを立ち上げる
まず、[Replit](https://replit.com/)でRailsを立ち上げます。リンクからReplitのサインアップを済ませたら、Appsの *+New Repl*をクリックします。
![imsssage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/c47eeaf2-3043-494b-b355-3d0a01158fb3.png)

次に、*Choose a Template* タブから Rails を選択・タイトルを入力して、*+Create App* をクリックしたら立ち上げ完了です。環境構築が要らないので非常に便利です。![imagfe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/cb4ee311-4a8c-4475-9f51-7cf44daf5b09.png)

#### 2.APIサーバーの構築
実際にRails側の設定を進めていきます。

左側のバーにある![ssss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/bc21fd4f-6fd4-427a-823a-1992e98946b1.png)をクリックして *Shell* を起動し、以下のコードでこのReplitの環境にrailsをインストールします。
```:Shell
gem install rails
```
今回のGASと連携するために使用するデータモデルを作成します。今回スプレッドシートに書き込むのは製品情報にしようと思うので、以下のコマンドで Product モデルを生成しましょう。
```:Shell
rails generate scaffold Product name:string price:integer description:text
```
マイグレーションを実行します。
```:Shell
rails db:migrate
```
初期データを入れておきます。以下のコードを*db/seeds.rb*に入力し、rails db:seedを実行しましょう。
```Ruby:seeds.rb
Product.create([
                 { name: 'Computer', price: 300000, description: 'High-performance computer' },
                 { name: 'Smartphone', price: 180000, description: 'Latest model smartphone' },
                 { name: 'Headphones', price: 30000, description: 'Noise-canceling headphones' }
               ])
```

```:Shell
rails db:seed
```


データをJSON形式で返すために、*controllers/products_controller.rb*のindexの部分に、下記のコードを追記します。
```Ruby:products_controller.rb
#def indexの既存コード
    render json: @products
#end
```

画面上部の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/269cc522-8507-4cde-8917-4267666f491d.png)をクリックして、サーバーを起動しましょう。
Webviewタブが立ち上がって、以下の画面が出ていれば正常です。
**Webviewタブの「{...}replit.div」をクリックして、Dev URLをコピーしておいてください。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/75484a79-2c90-4945-af6a-839f1aa57bb0.png)<br>



#### 3.Google Apps Script (GAS)の設定

スプレッドシートを立ち上げて、「拡張機能」→「Apps Script」を選択し、Googleスプレッドシートにデータを書き込むスクリプトを作成します。

三行目のendpointUrlに代入するURLは、さっきコピーしたReplitのDevURLのあとに"products"を追加したエンドポイントを設定してください。

```JavaScript
function fetchAndInsertData() {
  var activeSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var endpointUrl = "https://xxxxx.replit.dev/products";  // ReplitのAPIエンドポイントを指定

  try {
    var apiResponse = UrlFetchApp.fetch(endpointUrl, {
      method: "get",
      muteHttpExceptions: true
    });
    
    if (apiResponse.getResponseCode() !== 200) {
      Logger.log("API呼び出しの失敗: " + apiResponse.getResponseCode());
      return;
    }

    var parsedData = JSON.parse(apiResponse.getContentText());
    
    // 取得したデータを適切にフォーマット
    var dataToInsert = [];
    dataToInsert.push(Object.keys(parsedData[0]));  // ヘッダーを挿入
    parsedData.forEach(function(item) {
      dataToInsert.push(Object.values(item));  // データ行を挿入
    });

    // スプレッドシートにデータを書き込み
    activeSheet.getRange(1, 1, dataToInsert.length, dataToInsert[0].length).setValues(dataToInsert);
    Logger.log("データをスプレッドシートに正常に書き込みました。");

  } catch (error) {
    Logger.log("エラーが発生しました: " + error.toString());
  }
}

```

入力できたら、右上にある「デプロイ」→「新しいデプロイ」をクリックします。


次に、「種類の選択」→「ウェブアプリ」を選択 ↓
- 「次のユーザーとして実行」に自分のアカウントを設定
- 「アクセスできるユーザー」を「自分のみ」に設定
- 「デプロイ」をクリック
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/f31271b8-003e-4fa1-b3d8-7a0e11a0e3b1.png)
<br>「アクセスを承認」をクリックして画面が進み、以下の警告が出たら左下の **Advanced**をクリックして、**Go to スプレッドシート名 unsafe**をクリックしてください。
![無s題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/012b6b71-ff82-42f6-a36a-3c38375ba7f9.png)

Googleの画面に沿ってAllow（許可する）をクリックしたら完了です。実行ボタンで、GASをクリックして動かしてみて、スプレッドシートを確認してみましょう。以下のようにデータがスプレッドシートに書き込まれていたら無事成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011083/2e68e260-1939-4669-81ec-bdbd585efb92.png)

## まとめ
今回、Replit上でRailsサーバーを構築し、Google Apps Script（GAS）を使ってRailsのデータをスプレッドシートに連携する方法を実装しました。環境構築なしで素早く試せるのが魅力的です。
#### 今回のポイント
- Replitを使えば、ブラウザ上で簡単にRails環境を構築できる
- RailsのAPIエンドポイントを作成し、JSONレスポンスをGASで取得可能
-  GASのスクリプトをデプロイして、スプレッドシートにデータを自動取得できる
#### 応用例
この方法を応用すれば、Railsのデータを定期的にGASで取得することで、Googleスプレッドシートをデータ管理のダッシュボードとして活用できますね。
<br>
ReplitとGASを組み合わせることで、WebアプリとGoogleスプレッドシートの連携が簡単にできるので、ぜひ試してみてください。