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個追加し、名前を"日本語入力ボタン"、"外国語入力ボタン"、テキスト を"日本語入力"、"外国語入力"にそれぞれ設定します。

非可視コンポーネント

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

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

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

クラウドDB,チュートリアル,初級

簡単なチャットアプリを作ります

このチュートリアルでは、複数人でチャットのできる簡易チャットアプリを作ります。この機能を実現するため、リアルタイムで動作するクラウドDBを利用します。ただし、日本語化プロジェクトのApp InventorサーバーではクラウドDBが使えないため、MIT本家のApp Inventorサーバー(https://ai2.appinventor.mit.edu/)を使用します。MITのサーバーでも日本語表示は可能ですが、翻訳の品質に難があるため、このチュートリアルは英語環境で作成しています。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

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

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

  • クラウドDBの使い方
  • リストの使い方
  • ローカル変数の使い方
  • リストビューの使い方

使用コンポーネント

ボタン、テキストボックス、リストビュー、タイマー、クラウドDB

使用ブロック

グローバル変数、リスト

デザイン編集

Screen1のタイトルを"チャットアプリ"にします。

User Interface パレットからTextBox(TextBox1TextBox2) を2個、Button(Button1)を1個、ListView(ListView1)を1個Viewerに追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

  • TextBox1: Hint=名前を入力
  • TextBox2: Width=Fill parent、Hint=送信メッセージ、Multiline=チェック
  • Button1: Text=送信
  • ListView1: BackgroundColor=Light Gray、FontSize=14.0、Height=Fill parent、Width=Fill parent、TextColor=Black

次に Storage パレットから CloudDB(CloudDB1) を、Sensors パレットから Clock(Clock1) を Viewer に追加します。これらはすべて non-visible components です。

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

グローバル変数

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

クラウドDB,ゲーム,チュートリアル,中級

もぐらたたきゲームにランキングできる機能を付け加えます

このチュートリアルでは、もぐらたたきゲームにリアルタイムでランキングを登録、表示する機能を付け加えます。複数のスマホでプレイしてランキングに参加できるようになります。この機能を実現するため、リアルタイムで動作するクラウドDBを利用します。ただし、日本語化プロジェクトのApp InventorサーバーではクラウドDBが使えないため、MIT本家のApp Inventorサーバー(https://ai2.appinventor.mit.edu/)を使用します。MITのサーバーでも日本語表示は可能ですが、翻訳の品質に難があるため、このチュートリアルは英語環境で作成しています。

ページの最後にあるダウンロードセクションから画像、音源とソースコードをダウンロードできます。

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

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

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

  • クラウドDBの使い方
  • リストの使い方
  • プロシージャの書き方
  • ローカル変数の使い方
  • for each item in list do“ブロックを使ったループ処理の仕方

使用コンポーネント

キャンバス、画像スプライト、水平配置、ラベル、ボタン、テキストボックス、リストビュー、タイマー、サウンド、クラウドDB

使用ブロック

グローバル変数、ローカル変数、リスト、プロシージャ、もしならば、それぞれのリスト内の実行、それぞれのはじめ終わり間隔実行

デザイン編集

Screen1のタイトルを"もぐらたたきランキング"にします。

Drawing and Animation パレットから Canvas をViewerにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。ImageSpriteViewerにドラッグアンドドロップし名前をsprMoleに、PictureをMole.pngに設定します。 Mole.pngはダウンロードセクションからダウンロードしてください

Layout パレットから HorizontalArrangement を2個 Viewer に追加し、Widthはすべて"Fill parent"に設定します。名前はHorizontalArrangement1HorizontalArrangement2になります。HorizontalArrangement1にはUser Interface パレットからLabelを4個、HorizontalArrangement2にはTextBoxButtonを追加します。コンポーネントの名前とプロパティーを次のように設定します。

HorizontalArrangement1

  • Label1: Text=得点
  • lblScore: Text=0
  • Label2: Text=残り時間
  • lblTime: Text=空白

HorizontalArrangement2

  • txtName: Hint=ランキング登録名
  • btnRegister: Text=登録

HorizontalArrangement2の下にUser Interface パレットからLabel(lblMessage)、Button(btnRestart)、Label(Label3) 、ListView(ListView1)をViewer に追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

  • lblMessage: Text=空白
  • btnRestart: Text=リスタート
  • Label3: Text=トップ5
  • ListView1: BackgroundColor=Cyan、Width=Fill parent、TextColor=Black

次に Sensors パレットから Clock(Clock1Clock2) を2個 、 Media パレットから Sound(Sound1Sound2) を2個 、Storage パレットから CloudDB(CloudDB1) を Viewer に追加します。これらはすべて non-visible components です。

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

グローバル変数

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

クラウドDB,チュートリアル,中級

二人で対戦する三目並べアプリを作ります

このチュートリアルでは、オンラインで2人対戦ができる三目並べ(Tic-Tac-Toe)アプリを作成します。対戦を実現するために、リアルタイムで動作するクラウドDBを利用します。ただし、日本語化プロジェクトのApp InventorサーバーではクラウドDBが使えないため、MIT本家のApp Inventorサーバー(https://ai2.appinventor.mit.edu/)を使用します。MITのサーバーでも日本語表示は可能ですが、翻訳の品質に難があるため、このチュートリアルは英語環境で作成しています。

同じブロックで2台のスマホ上での動作を制御するので少し複雑です。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

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

デザイン編集

Screen1のタイトルを"対戦型三目並べ"にします。

Layout パレットから HorizontalArrangement を3個 Viewer に追加し、AlignHorizontalはすべて"Center"に、Widthはすべて"Fill parent"に設定します。名前はHorizontalArrangement1からHorizontalArrangement3になります。それぞれのHorizontalArrangementUser Interface パレットからButtonを3個ずつ追加します。すべてのボタンのFontSizeは24、HeightとWidth は80 pixels、テキストは空白にします。Buttonの名前は次のようになっているはずです。

HorizontalArrangement1

  • Button1
  • Button2
  • Button3

HorizontalArrangement2

  • Button4
  • Button5
  • Button6

HorizontalArrangement3

  • Button7
  • Button8
  • Button9

HorizontalArrangement3 の下にUser Interface パレットからLabel(lblStatus)、Button(btnReset)、TextBox(txtRoom) 、Button(btnCreate)、Button(btnJoin)、Label(lblRoom)をViewer に追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

  • lblStatus: FontSize=20、Text=空白
  • btnReset: Text=リセット
  • txtRoom: Width=Fill parent、Hint=Room番号を入力して参加をクリック
  • btnCreate: Text=Room作成
  • btnJoin: Text=参加
  • lblRoom: Text=空白

最後に Storage パレットから CloudDB(CloudDB1) を Viewer に追加します。CloudDB はnon-visible components です。

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

グローバル変数

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

チュートリアル,ユーティリティ,初級

カラフルお絵かきアプリを作りましょう

このチュートリアルでは、画面上で指を使っていろいろな色と太さで自由に絵を描ける お絵かきアプリ を作成します。お絵かきアプリにペンの色と太さ、消しゴムを加えています。もちろんクリアボタンで画面を消去することもできます。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

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

  • キャンバスコンポーネントの使い方
  • リストの使い方
  • プロシージャの書き方
  • すべてのコンポーネント“ブロックを使ったループ処理の仕方

使用コンポーネント

キャンバス、水平配置、ボタン

使用ブロック

グローバル変数、リスト、ロジック、プロシージャ、もしならば、もしならばでなくてもしならば、それぞれの項目リスト内の実行、すべてのコンポーネントブロック

デザイン編集

Screen1のタイトルを"お絵かきアプリ+"にします。

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。これにより、画面全体に描画スペースが広がり、どのサイズの画面でも対応できるようになります。

レイアウト パレットから 水平配置コンポーネント を3個ビューアーに追加し、横幅はすべて"親要素に合わせる"に、水平に整列するは"中央揃え"に設定します。名前は水平配置1から水平配置3になります。

水平配置1ボタンを4個、水平配置2水平配置3ボタンを2個ずつ追加します。ボタンの名前とプロパティーは次のようにします。

  • 水平配置1

    • 名前=黒、背景の色=黒、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=青、背景の色=青、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=グリーン、背景の色=グリーン、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=赤、背景の色=赤、フォントサイズ=10、横幅=25パーセント、テキスト=空白

  • 水平配置2

    • 名前=細、テキスト=細
    • 名前=中、テキスト=中

  • 水平配置3

    • 名前=画面消去、テキスト=画面消去
    • 名前=消しゴム、テキスト=消しゴム

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

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

JavaScript,チュートリアル,ユーティリティ,中級

四則演算のできる電卓アプリを作ります

このチュートリアルでは、四則演算のできる電卓アプリを作ります。ネットを調べてみると二項演算しかできないApp Inventor 2 電卓アプリばかりだったので、Google Gemini 2.0 Flash Thinking Experimentalに相談してJavaScriptで多項演算できるように作りました。もちろん多項式内の掛け算、割り算は優先して計算します。

平方根、三角関数、対数関数、累乗、階乗のできる高機能な関数電卓アプリはこちらです。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

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

  • ウェブビューでJavaScriptを実行する方法
  • ウェブビューとの値の受け渡し方法
  • プロシージャの書き方
  • すべてのコンポーネント“ブロックを使ったループ処理の仕方

使用コンポーネント

テキストボックス、ラベル、ウェブビュー、水平配置、ボタン

使用ブロック

グローバル変数、リスト、ロジック、テキスト、プロシージャ、もしならば、もしならばでなくてもしならば、それぞれの項目リスト内の実行、すべてのコンポーネントブロック

デザイン編集

Screen1のタイトルを"四則演算電卓"にします。

ページの最後にあるダウンロードセクションからダウンロードしたcalculator.htmlをファイルをアップロードボタンをクリックしてアップロードします。

ユーザーインターフェース パレットからテキストボックスラベルウェブビューを追加します。名前はそれぞれ計算式結果ウェブビュー1にします。

  • 計算式: 横幅="親要素に合わせる"、マルチラインプロパティー=チェック
  • 結果: テキスト=結果、横幅="親要素に合わせる"
  • ウェブビュー1: 目に見える=チェックを外す

レイアウト パレットから 水平配置コンポーネント を5個ビューアーに追加し、横幅はすべて"親要素に合わせる"に設定します。名前は水平配置1から水平配置5になります。それぞれの水平配置ユーザーインターフェース パレットからボタンを4個ずつ追加します。すべてのボタンのフォントサイズは20、横幅は25%にします。名前とテキストは次のようにします。

  • 水平配置1

    • 名前=AC、テキスト=AC
    • 名前=符号、テキスト=±
    • 名前=パーセント、テキスト=%
    • 名前=除、テキスト=÷

  • 水平配置2

    • 名前=n7、テキスト=7
    • 名前=n8、テキスト=8
    • 名前=n9、テキスト=9
    • 名前=乗、テキスト=乗

  • 水平配置3

    • 名前=n4、テキスト=4
    • 名前=n5、テキスト=5
    • 名前=n6、テキスト=6
    • 名前=減、テキスト=−

  • 水平配置4

    • 名前=n1、テキスト=1
    • 名前=n2、テキスト=2
    • 名前=n3、テキスト=3
    • 名前=加、テキスト=+

  • 水平配置5

    • 名前=n0、テキスト=0
    • 名前=小数点、テキスト=.
    • 名前=削除、テキスト=◀︎
    • 名前=イコール、テキスト==

下図のようになります。携帯電話サイズだとすべてのボタンが見えないのでタブレットサイズで表示しています。

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

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

JavaScript,チュートリアル,ユーティリティ

QRコードを生成するアプリを作ります

このチュートリアルでは、QRコードを生成するアプリを作ります。App Inventoir 2 のバーコードスキャナーコンポーネントを使うとQRコードを読むアプリは作れますが、QRコードを生成するアプリは作れません。ここではウェブビューでJavaScriptでQRCode.jsを使ってQRコードを生成します。ChatGPTに相談して作り方を教えてもらいました

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"QRコード生成"にします。

ページの最後にあるダウンロードセクションからダウンロードした qrgenerator.html をファイルをアップロードボタンをクリックしてアップロードします。

ユーザーインターフェース パレットからウェブビューをビューアーに追加します。名前はウェブビュー1になります。

レイアウト パレットから 水平配置コンポーネント をビューアーに追加します。名前は水平配置1になります。水平配置1ユーザーインターフェース パレットからキャンバスを追加します。名前はキャンバス1になります。

ユーザーインターフェース パレットからテキストボックスをビューアーに追加します。名前はテキストボックス1になります。

レイアウト パレットから 水平配置コンポーネント をビューアーに追加します。名前は水平配置2になります。水平配置2ユーザーインターフェース パレットからボタンを2個追加します。名前はボタン1ボタン2になります。

最後にセンサーパレットから タイマーコンポーネント をビューアーに追加します。名前はタイマー1になります。

プロパティーは以下の通り設定します。

  • ウェブビュー1: 目に目える=チェックを外す
  • 水平配置1: 水平に整列する=中央揃え、垂直(縦)=中央揃え、高さ="親要素に合わせる"、横幅="親要素に合わせる"
  • キャンバス1: 高さ=128ピクセル、横幅=128ピクセル
  • テキストボックス1: 横幅="親要素に合わせる"、ヒント="QRコードに埋め込むテキスト"、マルチライン=チェック
  • 水平配置2: 水平に整列する=中央揃え、横幅="親要素に合わせる"
  • ボタン1: テキスト="QRコード生成"
  • ボタン2: テキスト="リセット"
  • タイマー1: タイマー有効=チェックを外す

下図のようになります。

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

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

JavaScript,チュートリアル,ユーティリティ

画像の文字を認識して文字列を作るアプリを作ります

このチュートリアルでは、JavaScriptを使って光学文字認識を行うアプリを作ります。JavaScriptライブラリの一つであるTesseract.jsを使うとブラウザで光学文字認識ができます。ここではウェブビューでJavaScriptでTesseract.jsを使って光学文字認識を行います。ただ、ウェブビューと受け渡しできるのは文字列だけで、画像を渡すのにBase64エンコード、デコードをして文字列化する必要があるので、そこは uk.co.metricrat.imagebase64v2.aix というエクステンションを使っています。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"光学文字認識"にします。

ページの最後にあるダウンロードセクションからダウンロードした ocr.html をファイルをアップロードボタンをクリックしてアップロードします。

uk.co.metricrat.imagebase64v2.aixエクステンションを https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix からダウンロードし、エクステンションパレットにアップロード後、ビューアーに追加します。

ユーザーインターフェース パレットからラベル画像ラベルテキストボックスウェブビューをこの順番でビューアーに追加します。名前はそれぞれラベル1画像1ラベル2テキストボックス1ウェブビュー1になります。次にメディア パレットから画像ピッカーを追加します。名前は画像ピッカー1になります。プロパティーは以下の通り設定します。

  • ラベル1: 太字フォント=チェック、フォントサイズ=20、テキスト=画像
  • 画像1: 画像に合わせて拡大縮小する=チェック
  • ラベル2: 太字フォント=チェック、フォントサイズ=20、テキスト=認識結果
  • テキストボックス1: 背景の色=グレー、横幅="親要素に合わせる"、テキストカラー=白、マルチライン=チェック
  • ウェブビュー1: 目に目える=チェックを外す
  • 画像ピッカー1: テキスト="画像選択"

下図のようになります。

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

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

JavaScript,チュートリアル,ユーティリティ

画像にフィルターをかけてレトロ、ホスタライズ、漫画風フィルターをかけて表示するアプリを作ります

このチュートリアルでは、写真などの画像にフィルターをかけて表示するアプリを作ります。App Inventoir 2 本来の機能には画像にフィルターをかける機能はありません。エクステンションの中にはこうした機能を持つものもありますが、ここではウェブビューでJavaScriptを使ってフィルターをかけます。ウェブビューでJavaScriptを使うのは、エクステンションを書くよりもはるかに簡単です。ただ、ウェブビューと受け渡しできるのは文字列だけで、画像を渡すのにBase64エンコード、デコードをして文字列化する必要があるので、そこは uk.co.metricrat.imagebase64v2.aix というエクステンションを使っています。

画像フィルターアプリでは単純なフィルターをかけるアプリでしたがここではChatGPTに教えてもらったもうちょっと複雑で面白いフィルターのレトロ、ホスタライズ、漫画風フィルターを採用しています。ほとんどの変更はJavaScript内だけです。

  • レトロ:「古いポスターのような、色あせたノスタルジックな雰囲気」を再現するフィルター
  • ホスタライズ:「色の段階を減らし、ポップアートやアニメのようなカラフルな仕上がり」にするフィルター
  • 漫画風:「写真を白黒の漫画やスケッチのように変換する」フィルター

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"画像フィルター"にします。

ページの最後にあるダウンロードセクションからダウンロードした imagefilter2.html をファイルをアップロードボタンをクリックしてアップロードします。

uk.co.metricrat.imagebase64v2.aixエクステンションを https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix からダウンロードし、エクステンションパレットにアップロード後、ビューアーに追加します。

ユーザーインターフェース パレットからウェブビュー画像をビューアーに追加します。名前はそれぞれウェブビュー1、画像1になります。次にメディア パレットから画像ピッカーを追加します。名前は画像ピッカー1になります。

  • ウェブビュー1: 目に目える=チェックを外す
  • 画像1: 横幅="親要素に合わせる"
  • 画像ピッカー1: 横幅="親要素に合わせる"、テキスト="画像選択"

レイアウト パレットから 水平配置コンポーネント をビューアーに追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。名前は水平配置1になります。水平配置1ユーザーインターフェース パレットからボタンを3個追加します。名前とテキストは次のようにします。

  • 水平配置1

    • 名前=レトロ、テキスト=レトロ
    • 名前=ポスタライズ、テキスト=ポスタライズ
    • 名前=漫画風、テキスト=漫画風

水平配置1の下にユーザーインターフェース パレットからボタンを1個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

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

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