未分類

GAS Form.addTextItemで実現するWebアプリ開発：API連携ダッシュボードの作成

GAS Form.addTextItemで実現するWebアプリ開発：API連携ダッシュボードの作成

本記事では、Google Apps Script（GAS）のForm.addTextItem関数を用いて、Webアプリ開発におけるAPI連携ダッシュボードの作成方法を解説します。特に、フォームを利用したデータ収集と、そのデータをAPI連携によって外部データと統合し、ダッシュボードで可視化する具体的な手順とコード例を紹介します。

Webアプリ開発におけるAPI連携ダッシュボードの課題

Webアプリ開発において、API連携は不可欠な要素です。特に、複数のAPIからデータを収集し、それをダッシュボードで分かりやすく表示するニーズは高まっています。しかし、API連携にはデータの取得、整形、表示といった複雑な処理が必要であり、開発の難易度が高くなる傾向があります。また、ユーザーインターフェースの設計や、データのリアルタイム更新といった課題も存在します。

Form.addTextItemとは？

Form.addTextItemは、Googleフォームにテキスト入力項目を追加するためのGASの関数です。この関数を使うことで、ユーザーからの自由記述形式のデータを簡単に収集できます。収集したデータは、スプレッドシートに自動的に保存され、他のGASの関数と連携することで、API連携ダッシュボードの作成に役立てることができます。

利用シチュエーション別の実装方法

1. フォームの作成

まず、GASを用いてGoogleフォームを作成します。Form.addTextItemを使って、必要な入力項目（APIキー、検索キーワードなど）を追加します。

// フォームを作成
function createForm() {
  const form = FormApp.create('API連携ダッシュボード');
  form.setTitle('API連携ダッシュボード');

  // APIキーの入力項目を追加
  const apiKeyItem = form.addTextItem('APIキー');
  apiKeyItem.setTitle('APIキーを入力してください');
  // 検索キーワードの入力項目を追加
  const keywordItem = form.addTextItem('検索キーワード');
  keywordItem.setTitle('検索キーワードを入力してください');
  // フォームのURLをログに出力
  Logger.log(form.getPublishedUrl());
}

2. API連携処理

フォームから送信されたデータを取得し、APIにリクエストを送信します。取得したデータを整形し、スプレッドシートに保存します。

// フォーム送信時の処理
function onFormSubmit(e) {
  // フォームの回答を取得
  const responses = e.response.getItemResponses();
  // APIキーと検索キーワードを取得
  const apiKey = responses[0].getResponse();
  const keyword = responses[1].getResponse();
  // APIリクエストのURLを作成（例：OpenWeatherMap）
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${keyword}&appid=${apiKey}`;
  // APIリクエストを送信
  const response = UrlFetchApp.fetch(apiUrl);
  // レスポンスをJSON形式で解析
  const data = JSON.parse(response.getContentText());
  // スプレッドシートにデータを書き込む
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([new Date(), apiKey, keyword, data.name, data.main.temp]);
}

3. ダッシュボードの作成

スプレッドシートに保存されたデータを元に、Google Chartなどのツールを使ってダッシュボードを作成します。データの更新をトリガーで自動化することで、リアルタイムに近いダッシュボードを実現できます。

// スプレッドシートのデータをグラフ化する（例：気温のグラフ）
function createChart() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange();
  const chart = sheet.newChart()
      .setChartType(Charts.ChartType.LINE)
      .addRange(data)
      .setPosition(5, 5, 0, 0)
      .setTitle('気温の変化')
      .build();
  sheet.insertChart(chart);
}

実用的なコード例

例1：OpenWeatherMap APIと連携した天気情報ダッシュボード

OpenWeatherMap APIから天気情報を取得し、ダッシュボードに表示します。フォームから都市名を入力し、その都市の天気、気温、湿度などを表示します。

// OpenWeatherMap APIと連携
function getWeather(apiKey, city) {
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
  const response = UrlFetchApp.fetch(apiUrl);
  const data = JSON.parse(response.getContentText());

  if (data.cod == 200) {
    return `都市名：${data.name}
天気：${data.weather[0].description}
気温：${data.main.temp}℃
湿度：${data.main.humidity}%`;
  } else {
    return '該当する都市が見つかりませんでした。';
  }
}

例2：Google Analytics APIと連携したアクセス解析ダッシュボード

Google Analytics APIからアクセスデータを取得し、ダッシュボードに表示します。フォームから期間を指定し、その期間のPV数、セッション数、ユーザー数などを表示します。

// Google Analytics APIと連携（簡易版）
function getAnalyticsData(viewId, startDate, endDate) {
  // より詳細な実装は、Google Analytics APIのドキュメントを参照してください。
  return 'Google Analyticsのデータ';
}

よくある問題とトラブルシューティング

  • APIキーが正しくない：APIキーが正しいか確認してください。

  • APIリクエストの制限：APIにはリクエスト制限がある場合があります。制限を超えないように注意してください。

  • データの形式が正しくない：APIから返されるデータの形式を確認し、適切に処理してください。

カスタマイズ方法と応用例

  • UIの改善：HTML Serviceを使って、より洗練されたUIを作成できます。

  • データの可視化：Google Charts APIを使って、様々な種類のグラフを作成できます。

  • リアルタイム更新：トリガーを使って、定期的にデータを更新できます。

まとめ

Form.addTextItemとAPI連携を組み合わせることで、Webアプリ開発における様々な業務課題を解決できます。本記事で紹介したコード例を参考に、ぜひ独自のAPI連携ダッシュボードを作成してみてください。

PR

CodeCampは、現役エンジニアからマンツーマンで学べるオンラインプログラミングスクールです。WebデザインやWebサービス開発、転職支援など、目的に合わせた多様なコースが選べます。
朝7時〜夜23時40分まで、365日レッスンが受けられるため、忙しい方でも自分のペースで学習を進めることが可能です。通過率8%の厳しい選考を通過した質の高い講師陣が、あなたのキャリアチェンジを強力にサポートします。
さらに、未経験者向けのカリキュラムや、学習開始から20日以内の全額返金保証制度もあるため、プログラミング学習に不安を感じている方でも安心して始めることができます。

CodeCampで理想の働き方を実現しよう