このチュートリアルでは、地図の中心周辺の観光名所を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の地図コンポーネントの中心の緯度、経度から指定した半径内にある観光地の名前と住所(緯度、経度は不要)を最大５件取得し、地図上にマーカーで表示したい。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コードを書き直して。
返答
残りのコンテンツを表示するにはログインする必要がありますどうぞ
ログイン. 会員ではないですか ?
入会のご案内
