LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)in株式会社プロドウガ

🔧 GASからRetoolへデータを一括送信する方法【コード例付き】

Posted at

GASからRetoolへデータを一括送信.png

はじめに

Google Apps Script（以下、GAS）は、Googleの各種サービス―スプレッドシートやドキュメント、フォームなど―を自動化・カスタマイズできる軽量なJavaScript環境です。今回の記事では、ローコードツールとして注目されるRetoolとGASを組み合わせ、Webアプリや業務用ツールのデータ連携を自動化する方法にフォーカスします。

💡 ポイント

  • GASを使うことで、Googleサービス内に自作のAPIエンドポイントを用意可能
  • Retoolは多彩なデータソース接続ができるため、既存業務の自動化やダッシュボード作成に最適

GASとRetool連携の全体像

以下のフローチャートは、GASからRetool連携を自動化する大まかな流れを表しています。

[開始]
   │
   ▼
[Google スプレッドシートを作成]
   │
   ▼
[スクリプトエディタでGASプロジェクト作成]
   │
   ▼
[RetoolのAPIエンドポイント設計]
   │
   ▼
[GASでUrlFetchApp.fetch()を利用しリクエスト送信]
   │
   ▼
[Retoolがデータ加工・表示を実行]
   │
   ▼
[自動更新・通知]
   │
   ▼
[終了]

ステップ 1: 必要な準備

まずは以下の環境を準備しましょう。

  • Googleアカウント
    ※スプレッドシートやGASを利用するために必要です

  • Google スプレッドシート
    ※操作対象のシート。自動連携の結果はここに出力

  • GASプロジェクトの作成
    ※スプレッドシートの「拡張機能」→「Apps Script」から新規プロジェクトを開始

  • Retoolアカウント
    ※ローコードツールRetool上にAPI連携用のリソース（エンドポイント）を作成しておきます

  • APIトークンや必要な認証情報
    ※連携先のAPI仕様に合わせて設定する情報

🚀 この準備段階ができれば、実際に自動化処理を行う準備はほぼ完了です。

ステップ 2: GASでの基本操作

GASプロジェクト作成と基本コード

  1. Google スプレッドシートを開き、上部メニューから「拡張機能」→「Apps Script」を選択。
  2. 以下のようなサンプルコードを書いてみましょう。
// GASプロジェクトのエントリーポイント：Retool連携関数
function triggerRetoolIntegration() {
  // Retool APIのエンドポイントURL（例）
  var retoolUrl = "https://api.retool.com/your-endpoint";
  
  // APIキーなどの認証情報（必要に応じて設定）
  var apiKey = "YOUR_API_KEY_HERE";
  
  // リクエストヘッダーの設定
  var headers = {
    "Authorization": "Bearer " + apiKey,
    "Content-Type": "application/json"
  };
  
  // 送信するデータ（例：スプレッドシート内の最新のデータを送る）
  var payload = {
    sheetData: getSheetData()  // 下記のgetSheetData()関数でシートのデータを取得
  };
  
  // リクエストオプションの作成
  var options = {
    "method": "post",
    "headers": headers,
    "payload": JSON.stringify(payload)
  };
  
  // Retool APIへリクエスト送信
  try {
    var response = UrlFetchApp.fetch(retoolUrl, options);
    Logger.log("Retoolからのレスポンス：" + response.getContentText());
  } catch (e) {
    Logger.log("エラー発生：" + e);
  }
}

// シンプルなサンプル：スプレッドシートのデータを取得する関数
function getSheetData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("データシート"); // 対象のシート名
  var dataRange = sheet.getDataRange();
  var values = dataRange.getValues();
  return values;
}

🔍 ポイント解説

  • UrlFetchApp.fetch()
    GASの組み込み関数で、HTTPリクエストを容易に実行できます。ここでは、POSTメソッドでRetool APIにデータを送信しています。
  • JSON.stringify()
    送信するデータをJSON形式に変換。Retool側でデータを受け取って適切に処理するために必須です。

ステップ 3: Retool側の設定

Retoolでは、取得したデータを使ってダッシュボードを作成したり、加工処理を実施できます。

Retoolで行う設定例：

  • APIエンドポイントの設定
    → GASからのリクエストを受け付けるエンドポイントを構築
  • データソースの接続
    → 受信データを内部データベースや既存のクラウドサービスと連携
  • コンポーネントの配置とデータ表示
    → テーブル、グラフ、チャートなどを用いてデータを可視化

💡 Tip: RetoolではJavaScriptによるデータトランスフォームが可能なため、受信したデータを自由に整形でき、グラフ描画ライブラリ（Plotlyなど）ともスムーズに連携できます。

ステップ 4: 自動化と定期実行の設定

GASでは、トリガー機能を利用して定期的にRetool連携処理を実行することが可能です。例えば、毎朝9時に最新データ連携を走らせる設定は以下のように行います。

  1. GASエディタの左側メニュー「時計」アイコンをクリック。
  2. 「トリガーを追加」を選択し、関数名に「triggerRetoolIntegration」、イベントの種類を「時間主導」、実行間隔を「毎日9:00～10:00」などに設定します。

これにより、手動操作なしで自動連携処理が実現できます。

⏰ 自動化例:

  • 毎朝のデータ更新
  • リアルタイムダッシュボードの更新通知
  • 定期レポートの生成・送信

まとめ

この記事では、GASとRetoolを組み合わせた自動化連携の基本的な流れをご紹介しました。

振り返り：

  • ステップ 1: 必要な環境（Googleアカウント・スプレッドシート・Retoolアカウント）の準備
  • ステップ 2: GASプロジェクト作成と基本操作、コードサンプルによるデータ取得・送信
  • ステップ 3: Retool側のAPIエンドポイントとデータ連携設定
  • ステップ 4: 定期実行トリガーの設定で自動化を実現

ぜひこのガイドを参考に、あなたの業務自動化プロジェクトに活用してください。質問や不明点があれば、コメント欄や各コミュニティで気軽にシェアしてくださいね。

Happy Coding! ✨🖥️

【参考リンク】

以上、GASとRetoolで実現する業務自動化の魅力を体感していただけると幸いです。

💖 ご支援いただけませんか？

スクリーンショット 2025-01-31 7.51.39.png

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

Ethereum Logo

Ethereum (ETH) （ネットワーク: ERC-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
BNB Logo

BNB Chain (BNB) （ネットワーク: BEP-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Polygon Logo

Polygon (MATIC) （ネットワーク: Polygon）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Avalanche Logo

Avalanche (AVAX) （ネットワーク: Avalanche C-Chain）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Solana Logo

Solana (SOL)

EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
Stellar Logo

Stellar (XLM) メモ: 必要に応じて入力してください。

GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
Ripple Logo

Ripple (XRP) タグ: 必要に応じて入力してください。

r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
Cardano Logo

Cardano (ADA)

addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
Dogecoin Logo

Dogecoin (DOGE)

DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H

資金用途

寄付金は以下の目的で活用させていただきます：

  1. サーバー維持費やデザインツール購入
  2. 学習活動（オンラインコース受講・書籍購入）
  3. 読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

補足情報

  • Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
    上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。

  • 初回送金時には少額でテスト送金することをおすすめします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?