AI,API,Google Apps Script,クラウド

このチュートリアルでは、Google Apps Script (GAS) とApp Inventorを連携させた翻訳アプリを作成します。

このアプリは、入力した英語のテキストをGASのLanguageAppを利用して複数の言語(スペイン語、フランス語、ドイツ語、日本語、中国語)に翻訳します。さらに、その翻訳結果をApp Inventor標準の翻訳コンポーネントによる結果と共に表示し、精度を比較することができます。

GASのスクリプトはGoogle Gemini 2.5 Proで書いています。

GASによる翻訳は基本無料ですが、一般のGoogleアカウント(@gmail.comなど)の場合、APIの呼び出し回数に1日5,000回という上限が設けられています。個人での利用や開発のテストには十分な回数と言えるでしょう。

Google Apps Scriptの設定

翻訳処理を行うサーバー側のプログラムをGoogleの環境に設定します。

Gemini 2.5 Pro を使って Google Apps Script を書く

プロンプト

ソース言語からターゲット言語へテキストを翻訳するAPIとして機能するGoogle Apps Scriptのウェブアプリを作成してください。

このウェブアプリは、以下の要件を満たす必要があります。

名前: 「Translation API」とします。
翻訳サービス: LanguageAppサービスを使用します。
リクエスト処理: doPost(e)関数を介してHTTP POSTリクエストを処理します。
パラメータ: 以下の3つのパラメータを受け付けます。
text: 翻訳するテキスト。
source: ソース言語の言語コード(例: 英語の場合は 'en')。
target: ターゲット言語の言語コード(例: スペイン語の場合は 'es')。
エラー処理: 必須パラメータが欠けている場合のエラー処理を実装します。いずれかのパラメータが不足している場合は、JSON形式のエラーメッセージを返します。
レスポンス: 翻訳されたテキストを、キーが「translatedText」のJSONオブジェクトとして返します。
コンテンツタイプ: レスポンスはContentService.MimeType.JSONとして提供します。

返答

/**
 * HTTP POSTリクエストを処理してテキストを翻訳するウェブアプリ
 * @param {Object} e - Apps Scriptのイベントオブジェクト
 * @return {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  let response;
  try {
    // POSTされたリクエストボディをJSONとしてパース
    const params = JSON.parse(e.postData.contents);
    const text = params.text;
    const sourceLang = params.source;
    const targetLang = params.target;

    // 必須パラメータ(text, source, target)が存在するかチェック
    if (!text || !sourceLang || !targetLang) {
      // パラメータが不足している場合のエラーレスポンス
      response = {
        'error': "リクエストに必須パラメータ(text, source, target)がありません。"
      };
      // エラーレスポンスをJSON形式で返す
      return ContentService.createTextOutput(JSON.stringify(response))
                         .setMimeType(ContentService.MimeType.JSON);
    }

    // LanguageAppサービスを使用して翻訳を実行
    const translatedText = LanguageApp.translate(text, sourceLang, targetLang);

    // 成功レスポンスを作成
    response = {
      'translatedText': translatedText
    };

  } catch (err) {
    // JSONのパースエラーやその他の予期せぬエラーを処理
    response = {
      'error': 'リクエストの処理中にエラーが発生しました: ' + err.message
    };
  }

  // 最終的なレスポンスをJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
                     .setMimeType(ContentService.MimeType.JSON);
}

Google スクリプトを開く

https://script.google.com/ にアクセスし、Googleアカウントでログインします。「+ 新しいプロジェクト」をクリックしてください。

スクリプトの貼り付け

エディタに表示されている初期コード (function myFunction() { ... }) をすべて削除し、上記コードを貼り付けます。

プロジェクトの保存

上部のフロッピーディスクアイコンをクリックし保存します。プロジェクトに名前(例:「Translation API)を付けてください。

ウェブアプリとしてデプロイ

このスクリプトをApp Inventorから呼び出せるように、ウェブ上に公開します。

  • 右上の青い「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。
  • 「種類の選択」の横にある歯車アイコン⚙をクリックし、「ウェブアプリ」を選択します。
  • 以下の通りに設定します。

    • 説明: (任意)翻訳アプリAPIなど
    • 次のユーザーとして実行: 自分 (あなたのGoogleアカウント)
    • アクセスできるユーザー:全員 この設定を「全員」にしないと、App Inventorからアクセスできずエラーになります。
    • デプロイ」をクリックします。

新しいデプロイが下のように表示されます。

ウェブアプリのURLはApp Inventorで使いますので、必ず「コピー」ボタンを押して控えておいてください。

App Inventorアプリ

日本語化プロジェクトのApp Inventorサーバーでは翻訳コンポーネントが使えないため、MIT本家のApp Inventorサーバー(https://ai2.appinventor.mit.edu/)を使用します。MITのサーバーでも日本語表示は可能ですが、翻訳の品質に難があるため、このチュートリアルは英語環境で作成しています。

MIT本家のApp Inventorサーバー(https://ai2.appinventor.mit.edu/)にアクセスしてGoogleカウントでログインします。言語はEnglishです。

[Projects]メニューから[Start new project]を選択し、"TranslateBenchmark"と名前を付けます。

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

Google Apps Script,クラウド,チュートリアル,教育

リアルタイム通訳が可能なアプリを作成します

このチュートリアルでは、リアルタイムで日本語から外国語、外国語から日本語に、話した言葉を翻訳して話してくれる通訳アプリを作ります。外国語は英語、スペイン語、フランス語、ドイツ語から選べます。普通の会話スピードで動くので、外国語話者との会話に使えます。

音声認識・翻訳API・音声合成の機能を組み合わせたアプリです。言語の切り替え、日本語と外国語の入力対応、翻訳APIとの通信など、多機能なアプリになります。

App Inventor 2日本語化プロジェクトでは翻訳コンポーネントが動作しないのと翻訳コンポーネントは精度があまり良くないため、Google Apps Scriptで作成した無料のウェブアプリを呼び出して翻訳処理を行います。このウェブアプリは自由に利用可能です。ページの最後にあるダウンロードセクションからソースコード(aiaファイル)をダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Interpreter“と名前を付けます。

このチュートリアルで学べること

  • 音声認識コンポーネントの使い方
  • Google Apps Script を使った翻訳APIとの通信
  • ウェブ コンポーネントでJSONデータを外部APIに送受信する方法
  • 翻訳されたテキストをテキスト読み上げ コンポーネントで音声再生する方法
  • ディクショナリで選択肢を管理する方法

使用コンポーネント

ラベル、テキストボックス、スピナー、ボタン、ウェブ、水平配置、テキスト読み上げ、音声認識

使用ブロック

グローバル変数、ディクショナリ、プロシージャ、もしならば else

デザイン編集

Screen1のタイトルを"通訳アプリ"にします。

コンポーネントの追加

レイアウト パレットから 水平配置コンポーネント を4個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に水平配置1, 2, 3, 4という名前になっているはずです。

“水平配置1

  • ユーザーインターフェース パレットから ラベルスピナー を追加し、それぞれ"外国語ラベル"、"外国語"に名前を変更します。
  • “外国語ラベル"の テキスト を"外国語"に設定します。
  • “外国語"スピナーの文字列から要素プロパティーは"英語,スペイン語,フランス語,ドイツ語"、選択要素は"英語"にします。

水平配置2″

  • ユーザーインターフェース パレットから ラベルテキストボックス を追加し、それぞれ"入力ラベル"、"入力"に名前を変更します。
  • “入力ラベル"の テキスト を"入力結果"に設定します。
  • “入力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。

“水平配置3

  • ユーザーインターフェース パレットから ラベルテキストボックス を追加し、それぞれ"出力ラベル"、"出力"に名前を変更します。
  • “出力ラベル"の テキスト を"翻訳結果"に設定します。
  • “出力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。

“水平配置4

  • ユーザーインターフェース パレットから ボタン を2個追加し、名前を"日本語入力ボタン"、"外国語入力ボタン"、テキスト を"日本語入力"、"外国語入力"にそれぞれ設定します。

非可視コンポーネント

  • メディア パレットから テキスト読み上げ コンポーネントと音声認識コンポーネントを、接続 パレットから ウェブ コンポーネントを追加します。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

Google Apps Script,クラウド,チュートリアル,教育

入力した言葉を多言語に翻訳して結果を読み上げるアプリを作ります

このチュートリアルでは、入力したテキストを多言語に翻訳し、結果を音声で読み上げるアプリを作成します。App Inventor 2日本語化プロジェクトでは翻訳コンポーネントが動作しないため、Google Apps Scriptで作成した無料のウェブアプリを呼び出して翻訳処理を行います。このウェブアプリは自由に利用可能です。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Translator“と名前を付けます。

デザイン編集

Screen1のタイトルを"翻訳"にします。

コンポーネントの追加

レイアウト パレットから 水平配置コンポーネント を4個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に水平配置1, 2, 3, 4という名前になっているはずです。

“水平配置1

  • ユーザーインターフェース パレットから ラベルスピナー を追加し、それぞれ"入力言語ラベル"、"入力言語"に名前を変更します。
  • “入力言語ラベル"の テキスト を"入力言語"に設定します。
  • “入力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"英語"にします。

水平配置2″

  • ユーザーインターフェース パレットから ラベルスピナー を追加し、それぞれ"出力言語ラベル"、"出力言語"に名前を変更します。
  • “出力言語ラベル"の テキスト を"出力言語に設定します。
  • “出力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"日本語"にします。

“水平配置3

  • ユーザーインターフェース パレットから ラベルテキストボックスボタン を追加し、それぞれ"入力ラベル"、"入力"、"入力消去"に名前を変更します。
  • “入力ラベル"の テキスト を"入力"に設定します。
  • “入力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。
  • “入力消去"の テキスト を"X"、横幅を32ピクセルに設定します。

“水平配置4

  • ユーザーインターフェース パレットから ラベルテキストボックスを追加し、それぞれ"出力ラベル"、"出力"に名前を変更します。
  • “出力ラベル"の テキスト を"翻訳結果出力"に設定します。
  • “出力"の 横幅は親要素に合わせるにしマルチラインをチェックしてヒントは空白にします。

翻訳ボタン

  • “水平配置4″の下にユーザーインターフェース パレットからボタン を追加し、名前を"翻訳ボタン"、テキスト を"翻訳実行"に設定します。

非可視コンポーネント

  • メディア パレットから テキスト読み上げ コンポーネントを1つ、接続 パレットから ウェブ コンポーネントを1つ追加します。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内