生成AI観光名所地図アプリ
このチュートリアルでは、地図の中心周辺の観光名所をGoogle Gemini APIに問い合わせて地図上に表示するアプリを作ります。観光名所地図アプリではGoogle Sheets APIを使ってGoogleスプレッドシートに入力された東京の観光名所を地図上に表示したので、あらかじめ入力した観光名所しか表示できませんでしたが、このアプリでは原理的にどの場所の観光名所でも表示できます。
Google Gemini APIの呼び出しにはGoogle Apps Script(GAS)を使います。GASのスクリプトはGoogle Gemini 2.5 Proで書いています。バイブコーディングです。
Google AI Studio で作るGemini APIは課金方法を登録しなくても以下の範囲ならば無料で使えます。
- 1 分あたりのリクエスト数: 5
- 1 日あたりのリクエスト数: 250,000
- 1 分あたりのトークン数(入力): 100
Google Apps Scriptの設定
API呼び出し処理を行うサーバー側のプログラムをGoogle Apps Scriptに設定します。
Gemini 2.5 Pro を使って Google Apps Script を書く
無料のアカウントでもこちらからGemini 2.5 Proが使えます。
プロンプト
観光名所を地図上に表示するには緯度、経度が必要ですが、Geminiは緯度、経度を知っているとは限らないので、代わりに知っているはずの住所を返してもらい、位置センサーコンポーネントを使って緯度、経度に変換します。
App inventorの地図コンポーネントの中心の緯度、経度から指定した半径内にある観光地の名前と住所(緯度、経度は不要)を最大5件取得し、地図上にマーカーで表示したい。Google apps script とGoogle ai studio で取得するGemini APIキーでGemini 2.5 Flashを使う。他のAPIは使わない。結果はJSONで戻す。APIキーはスクリプトプロパティから読む。App inventor部分は自分でやるから、それ以外の部分を教えて。
返答
Google Apps Scriptだけではなく、Gemini APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。
はい、承知いたしました。App Inventorから呼び出すためのGoogle Apps Scriptを作成します。
このスクリプトは、指定された緯度・経度・半径を基に、Gemini 2.5 Flashモデルを使用して周辺の観光地情報を最大5件取得し、JSON形式で返します。
以下に、Google Apps Scriptのコードと、その設定方法を説明します。
1. Google Apps Scriptの準備
まず、Google Apps Scriptプロジェクトを準備する手順を説明します。
Google Apps Script プロジェクトの作成と設定ガイド
- Google Driveを開く: Google Driveにアクセスします。
- 新規プロジェクト作成:
- 左上の「+ 新規」ボタンをクリックします。
- 「その他」 > 「Google Apps Script」を選択します。
- もし表示されない場合は、「アプリを追加」から「Google Apps Script」を検索して接続してください。
- プロジェクトに名前を付ける:
- 左上の「無題のプロジェクト」をクリックし、「観光地検索API」などの分かりやすい名前に変更します。
- スクリプトの貼り付け:
- エディタに最初から書かれている
function myFunction() { ... }
をすべて削除します。 - 後述するコードをすべてコピーして、エディタに貼り付けます。
- エディタに最初から書かれている
- APIキーの設定:
- 左側のメニューから歯車アイコンの「プロジェクトの設定」をクリックします。
- 「スクリプト プロパティ」のセクションにある「スクリプト プロパティを追加」ボタンをクリックします。
- プロパティに
GEMINI_API_KEY
と入力します。 - 値に、Google AI Studioで取得したご自身のAPIキーを貼り付けます。
- 「スクリプト プロパティを保存」をクリックします。
- プロジェクトのデプロイ:
- 右上の青い「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。
- 種類の選択(歯車アイコンの隣)で「ウェブアプリ」を選択します。
- 次の設定を行います。
- 説明: 「観光地検索API for App Inventor」など、分かりやすい説明を入力します。
- 次のユーザーとして実行: 自分
- アクセスできるユーザー: 全員
- 「デプロイ」ボタンをクリックします。
- 初回は「アクセスを承認」を求められます。ご自身のアカウントを選択し、詳細設定から安全でないページへの移動を許可して、スクリプトの実行を許可してください。
- デプロイが完了すると、「ウェブアプリのURL」が表示されます。このURLをコピーしてください。App InventorからAPIを呼び出す際にこのURLが必要になります。
以上で、Google Apps Script側の準備は完了です。
2. Google Apps Script コード
こちらのコードを、先ほど作成したGoogle Apps Scriptプロジェクトのエディタに貼り付けてください。
観光地検索API (Google Apps Script)
/**
* App InventorからのGETリクエストを処理するメイン関数
* @param {object} e - App Inventorから渡されるイベントオブジェクト
* @returns {ContentService.TextOutput} - 観光地情報のJSONまたはエラーメッセージ
*/
function doGet(e) {
// レスポンスのMIMEタイプをJSONに設定
const response = ContentService.createTextOutput();
response.setMimeType(ContentService.MimeType.JSON);
try {
// クエリパラメータから緯度、経度、半径を取得
const lat = e.parameter.latitude;
const lon = e.parameter.longitude;
const radius = e.parameter.radius;
// パラメータが不足している場合はエラーを返す
if (!lat || !lon || !radius) {
response.setContent(JSON.stringify({
error: "パラメータが不足しています。'latitude', 'longitude', 'radius'が必要です。"
}));
return response;
}
// Gemini APIを呼び出して観光地情報を取得
const touristSpots = getTouristSpots(lat, lon, radius);
// 取得した情報をJSON形式で返す
response.setContent(JSON.stringify(touristSpots));
} catch (error) {
// エラーが発生した場合、エラーメッセージをJSONで返す
response.setContent(JSON.stringify({
error: "データの取得中にエラーが発生しました。",
details: error.message
}));
}
return response;
}
/**
* Gemini APIを呼び出して、指定された座標周辺の観光地情報を取得する
* @param {number} latitude - 中心の緯度
* @param {number} longitude - 中心の経度
* @param {number} radius - 検索半径(メートル)
* @returns {Array<Object>} - 観光地のリスト
*/
function getTouristSpots(latitude, longitude, radius) {
// スクリプトプロパティからAPIキーを読み込む
const API_KEY = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
if (!API_KEY) {
throw new Error("APIキーがスクリプトプロパティに設定されていません。");
}
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${API_KEY}`;
// Geminiに渡すプロンプト(指示文)
const prompt = `
あなたは優秀なローカルツアーガイドです。
以下の中心座標と半径の範囲内にある観光地を最大5件まで探してください。
結果は必ず指定されたJSON形式で、名前、住所、緯度、経度を含めてください。
中心緯度: ${latitude}
中心経度: ${longitude}
半径: ${radius}メートル
`;
// Gemini APIに送信するデータ(ペイロード)
const payload = {
"contents": [{
"parts": [{
"text": prompt
}]
}],
"generationConfig": {
"responseMimeType": "application/json",
"responseSchema": {
"type": "ARRAY",
"items": {
"type": "OBJECT",
"properties": {
"name": { "type": "STRING", "description": "観光地の名前" },
"address": { "type": "STRING", "description": "観光地の住所" },
"latitude": { "type": "NUMBER", "description": "観光地の緯度" },
"longitude": { "type": "NUMBER", "description": "観光地の経度" }
},
"required": ["name", "address", "latitude", "longitude"]
}
}
}
};
// APIリクエストのオプション
const options = {
'method': 'post',
'contentType': 'application/json',
'payload': JSON.stringify(payload),
'muteHttpExceptions': true // HTTPエラー時もレスポンスを返す
};
// APIを呼び出す
const response = UrlFetchApp.fetch(API_URL, options);
const responseCode = response.getResponseCode();
const responseBody = response.getContentText();
if (responseCode !== 200) {
throw new Error(`APIリクエストに失敗しました。ステータスコード: ${responseCode}, レスポンス: ${responseBody}`);
}
// レスポンスからJSON部分を抽出してパースする
const result = JSON.parse(responseBody);
const jsonText = result.candidates[0].content.parts[0].text;
return JSON.parse(jsonText);
}
3. App Inventorでの使い方
App Inventor側では、「Web」コンポーネントを使って、デプロイ時に取得したウェブアプリのURLにGETリクエストを送信します。
URLの末尾に、以下のようにパラメータを追加してください。
<あなたのウェブアプリのURL>?latitude=35.681236&longitude=139.767125&radius=1000
latitude: 地図の中心の緯度
longitude: 地図の中心の経度
radius: 検索したい半径(メートル単位)
Webコンポーネントが GotText イベントで結果を受け取ったら、返ってきたJSON文字列を解析して、リストとして処理します。その後、各観光地の名前、住所、緯度、経度を使って地図上にマーカーを配置してください。
これで、App InventorアプリからGoogle Apps ScriptとGemini APIを連携させて、周辺の観光地情報を地図に表示する機能が実装できます。もし何かご不明な点があれば、お気軽にご質問ください。
プロンプト
結果に緯度、経度が含まれているので、緯度、経度を除いてコードを書き直してもらいます。
Geminiの結果から観光地の緯度、観光地の経度を除いて観光地検索APIコードを書き直して。