会員サイト

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

このチュートリアルでは、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: テキスト="画像選択"

下図のようになります。

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

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

このチュートリアルでは、写真などの画像にフィルターをかけて表示するアプリを作ります。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個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

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

画像にフィルターをかけてグレースケール、セピア、ネガで表示するアプリを作ります

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

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

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

デザイン編集

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

ページの最後にあるダウンロードセクションからダウンロードした imagefilter.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個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

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

関数計算のできる電卓アプリを作ります

このチュートリアルでは、関数計算のできる電卓アプリを作ります。使える関数は平方根、三角関数、対数関数、累乗、階乗です。普通に作ろうとするとすごく大変になるので、Google Gemini 2.0 Flash Thinking Experimentalに相談してJavaScriptで計算するように作りました。

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

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

デザイン編集

Screen1のタイトルを"関数電卓"にします。

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

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

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

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

• 水平配置1

  • 名前=PI、テキスト=π
  • 名前=E、テキスト=e
  • 名前=左かっこ、テキスト=(
  • 名前=右かっこ、テキスト=)

• 水平配置2

  • 名前=累乗、テキスト=^
  • 名前=階乗、テキスト=!
  • 名前=LOG、テキスト=log
  • 名前=LN、テキスト=ln

• 水平配置3

  • 名前=SQRT、テキスト=√
  • 名前=SIN、テキスト=sin
  • 名前=COS、テキスト=cos
  • 名前=TAN、テキスト=tan

• 水平配置4

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

• 水平配置5

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

• 水平配置6

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

• 水平配置7

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

• 水平配置8

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

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

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

買い物の追加、削除のできる買い物リストアプリを作ります

このチュートリアルでは、リストとリストビューを使って買い物リストアプリを作ります。アプリを再起動した後でもリストが消えないようにリストを小型DBに保存します。

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

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

デザイン編集

Screen1のタイトルを"買い物リスト"にします。

ユーザーインターフェース パレットからラベル(ラベル1)、リストビュー(リストビュー1)、テキストボックス(テキストボックス1)、ボタン(ボタン1)を１個ずつビューアーに追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

• ラベル1: 太字フォント=チェック、テキスト="リスト"、フォントサイズ=20
• リストビュー1: 背景の色=グレー、
• テキストボックス1: 横幅=親要素に合わせる、ヒント="買い物を入力"
• ボタン1: テキスト="追加"

非可視コンポーネントとしてユーザーインターフェース パレットから通知機能コンポーネント(通知機能1)を1つ、ストレージ パレットから小型DBコンポーネント(小型DB1)を1つ追加します。

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

QRコードを読み取ってその内容を表示するアプリを作ります

このチュートリアルでは、QRコードを読み取ってその内容を表示するアプリを作ります。このチュートリアルのほとんどはGemini 2.0 Flash Thinking Experimentalが書きました。詳細はこちらです。

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

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

コンポーネントの配置

画面左側の「パレット」からコンポーネントをドラッグ＆ドロップして、アプリの画面（Viewer）に配置します。最低限必要なコンポーネントは以下の通りです。

• バーコードスキャナー (BarcodeScanner): 「センサー」カテゴリの中にあります。これを画面上の見えない場所に配置します。画面には何も表示されません。プロパティ―の外部スキャナーの使用のチェックは外します。
• ボタン (Button): 「ユーザーインターフェース」カテゴリの中にあります。これを画面上の好きな場所に配置します。このボタンをタップしてQRコードの読み取りを開始します。ボタンのテキストは「QRコードを読み取る」など、分かりやすい名前に変更しておきましょう。
• ラベル (Label): 「ユーザーインターフェース」カテゴリの中にあります。これを画面上のボタンの下など、内容を表示したい場所に配置します。ラベルの初期テキストは空白にしておくと良いでしょう。

ブロックエディタでのプログラミング

地図の中心から指定した半径内にあるお店を検索する地図アプリを作成します

このチュートリアルでは、Google Sheets APIを使ってGoogleスプレッドシートに入力された東京のお店の情報をアプリに取り込み、地図の中心から指定した半径内にあるお店を地図上にマーカー表示、タップすると詳細を表示するアプリを作ります。アクティビティスターターを使って外部のブラウザを起動してお店のホームページを表示することもできます。ソースコードはページの最後にあるダウンロードセクションからダウンロードしてください。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

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

Googleスプレッドシートの作成

お店の情報としては名前、緯度、経度、住所、電話番号、営業時間、定休日、提供料理、お店のURLを入力します。いくつか東京のお店を入力しました。好きなお店の情報を使ってみてください。クリックするとGoogleスプレッドシートを見れます。シート名は"restaurants“です。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"お店検索地図"にします。

地図 パレットから 地図(地図1) をビューアーに追加し、高さと横幅は"親要素に合わせる"にします。使いやすくなるように文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。

地図 パレットから 円(円1)を地図上に追加し、プロパティーを次のように設定します。

• 塗りつぶし色：該当なし
• 半径：300
• ストロークカラー：赤
• ストローク幅：3

レイアウト パレットから 垂直配置コンポーネント(垂直配置1) を地図の下に追加し、横幅は"親要素に合わせる"にします。

レイアウト パレットから 水平配置コンポーネント を６個、垂直配置1の中に追加し、その下に１個ボタンを追加します。水平配置コンポーネントの横幅は"親要素に合わせる"にし、中にはユーザーインターフェース パレットからラベルを２個ずつ追加して、名前とテキストを以下のように設定してください。

• 水平配置1

  • 名前=ラベル1、テキスト=名前：
  • 名前=名前、テキスト=空白、横幅=親要素に合わせる

• 水平配置2

  • 名前=ラベル2、テキスト=料理：
  • 名前=料理、テキスト=空白、横幅=親要素に合わせる

• 水平配置3

  • 名前=ラベル3、テキスト=営業時間：
  • 名前=営業時間、テキスト=空白、横幅=親要素に合わせる

• 水平配置4

  • 名前=ラベル4、テキスト=定休日：
  • 名前=定休日、テキスト=空白、横幅=親要素に合わせる

• 水平配置5

  • 名前=ラベル5、テキスト=住所：
  • 名前=住所、テキスト=空白、横幅=親要素に合わせる

• 水平配置6

  • 名前=ラベル6、テキスト=電話番号：
  • 名前=電話番号、テキスト=空白、横幅=親要素に合わせる

• 名前=URLボタン、テキスト=ホームページ

レイアウト パレットから 水平配置コンポーネント(水平配置7) を１個、垂直配置1の下に追加し、その中にユーザーインターフェース パレットからボタンを2個、スピナーを1個、ラベルを1個並べ、プロパティーを以下のように設定してください。

• ボタン：名前=現在地へ移動、テキスト=現在地へ移動
• ボタン：名前=検索、テキスト=検索
• スピナー：名前=検索範囲、文字列から要素=300, 500, 1000,10000
• ラベル：名前=ラベル7、テキスト=m

非可視コンポーネントとしてストレージ パレットからスプレッドシート（スプレッドシート1）、センサー パレットから位置センサー（位置センサー1）、接続 パレットからアクティビティスターター(アクティビティスターター1)を追加します。プロパティーを以下のように設定してください。

• スプレッドシート1：スプレッドシートID=XXXXXXXX

  • スプレッドシートIDは以下の手順で取得できます：

    • スプレッドシートを開く。
    • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
    • よくわからない場合は 14dsULf1K4Evu2jv9JRlBJFG7rKlqsTdyevBP5nv2XJA を使ってください。このスプレッドシートのスプレッドシートIDです。

• 位置センサー1：デフォルトのまま
• アクティビティスターター1：アクション=android.intent.action.VIEW

ここまでで下図のようになります。

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

グルメサーチAPIを活用して、周辺のお店を検索できる地図アプリを作成します

このチュートリアルでは、ホットペッパー グルメサーチAPI を活用して、地図上で表示している場所の近辺にある指定ジャンルのお店を検索し、マーカーで表示するアプリを作成します。地図上のマーカーをクリックすると、住所などの詳細情報を表示します。また、地図を現在地や入力した地名に移動させる機能も備えています。

ページの最後にあるダウンロードセクションからソースコードと実行用のapkファイルをダウンロードできます。使ってみると結構便利な実用的なアプリです。好きな場所でお店を探してみてください！

グルメサーチAPIを使用するには、APIキーが必要です。こちらで取得したAPIキーを公開することはできないため、各自で取得してください。APIキーは、メールアドレスを入力するだけで簡単に取得でき、利用は無料です。

APIキーの取得方法

新規登録ページでメールアドレスを入力します。

“リクルート Webサービス – メールアドレスの確認"というメールが送られてくるので、メールにあるURLをクリックします。

“リクルート Webサービス – APIキー発行完了のお知らせ"というメールでAPIキーが送られてきます。

これだけです！

デザイン編集

Screen1のタイトルを"グルメ検索地図"にします。

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

“垂直配置1“

• 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。
• レイアウト パレットから 水平配置コンポーネント を2個追加します。水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置1と水平配置2になっているはずです。
• 水平配置1にユーザーインターフェース パレットから ラベル と スピナー  を追加します。

  • ラベル のテキストプロパティーを"ジャンル"にします。
  • スピナー の名前は"ジャンル"、文字列から要素プロパティーを"居酒屋,ダイニングバー・バル,創作料理,和食,洋食,イタリアン・フレンチ,中華,焼肉・ホルモン,韓国料理,アジア・エスニック料理,各国料理,カラオケ・パーティ,バー・カクテル,ラーメン,お好み焼き・もんじゃ,カフェ・スイーツ,その他グルメ"に設定します。

• 水平配置2にユーザーインターフェース パレットから ボタン を追加します。

  • ボタン の名前とテキストを"検索"にします。

“垂直配置2“

• ユーザーインターフェース パレットから ウェブビュー を追加します。
• 垂直配置2の目に見えるプロパティーのチェックを外します。

垂直配置2の下にレイアウト パレットからラベルを2個追加し、ビューアー上に縦に並べ、名前を"住所"と"営業時間"にします。テキストは両方とも空白にします。

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

“水平配置3“

• ユーザーインターフェース パレットから ボタン を3個追加します。
• ボタンの名前を"ブラウザ表示"、"地図表示"、"現在地移動"、テキストを"ブラウザ表示"、"地図表示"、"現在地に移動"にします。

“水平配置4“

• レイアウト パレットから テキストボックス と ボタン を追加します。
• テキストボックス の名前とヒントを"移動先住所"にします。
• ボタン の名前を"住所移動"、テキストを"住所に移動"にします。

非可視コンポーネントの追加

Google Sheets APIを使って観光名所を表示する地図を作ります

このチュートリアルでは、Google Sheets APIを使ってGoogleスプレッドシートに入力された東京の観光名所を地図上に表示するアプリを作ります。複数台のスマホからの同時アクセスも可能ですし、Googleスプレッドシートでデータを変更すると表示されるデータもリアルタイムで反映されます。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

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

Googleスプレッドシートの作成

地図上に観光名所を表示するには名所の名前、緯度、経度が必要です。ChatGPTに頼んでCSVファイルを作ってもらい、Googleスプレッドシートにしました。

ChatGPTに入力したプロンプトはこれです。無料アカウントでもできるので試してみてください。「東京」をあなたの住んでいる地名にするのも面白いですよ。

東京の観光名所の名前、緯度、経度のグーグル スプレッドシートを作りたいので、CSVファイルを作って。

ダウンロードしたCSVファイルをGoogleドライブにアップロードして、Googleスプレッドシートで開くだけです。こんな感じです。クリックするとGoogleスプレッドシートを見れます。シート名は"tokyo_landmarks“です。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"名所地図"にします。

地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。使いやすくなるように文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。

ストレージ パレットからスプレッドシートコンポーネントを追加します。使用するスプレッドシートの スプレッドシートID を取得し、それをプロパティーのスプレッドシートIDに設定してください。

• スプレッドシートIDは以下の手順で取得できます：

  • スプレッドシートを開く。
  • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
  • よくわからない場合は 17Tukip5RlsU1LOBAkq0ngr3sMK1OLPxBKDq4sBwz8FI を使ってください。このスプレッドシートのスプレッドシートIDです。

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

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

グローバル変数

外出先で写真を撮った際に位置情報を取得し、それを地図上に表示・保存するアプリを作成します

このチュートリアルでは、外出先で写真を撮るとそのときの位置情報を位置センサーで同時に取得しそれを保存してあとで地図上で見ることができるアプリを作成します。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは三つのスクリーンを使っていますが、スクリーン毎に同じグローバル変数を設定したり小型DBやウェブコンポーネントなどの同じコンポーネントを使うのは煩雑なので、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。仮想スクリーンではScreen1に複数の垂直配置コンポーネントを配置してブロック編集内で「目に見える」をON/OFFしてスクリーンを切り替えます。

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

デザイン編集

Screen1のタイトルを"写真地図"にします。

仮想スクリーンを作成

レイアウト パレットから 垂直配置コンポーネント を3個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に地図スクリーン、リストスクリーン、写真スクリーンという名前にしてください。それぞれの垂直配置コンポーネントが仮想スクリーンになります。それぞれの垂直配置コンポーネント(スクリーン)にコンポーネントを追加するときは他のスクリーンの目に見えるのチェックを外して作業してください。スクリーン切り替えにはこれらのプロシージャを使います。

“地図スクリーン“

• 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。
• レイアウト パレットから  水平配置コンポーネント を 地図 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前とテキストを"リセット"、"写真撮影"、"一覧"にします。

“リストスクリーン“

• ユーザーインターフェース パレットから リストビュー を追加し、高さと横幅は"親要素に合わせる"に、リストビューレイアウトを"メインテキスト、詳細テキスト(横)"にします。
• レイアウト パレットから  水平配置コンポーネント を リストビュー の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前を"リストリターン"、"削除"、"詳細"に、テキストを"リターン"、"削除"、"詳細"にします。

“写真スクリーン“

• レイアウト パレットから  垂直配置コンポーネント を追加し、水平に整列するを"中央揃え"、高さと横幅は"親要素に合わせる"にします。
• 垂直配置コンポーネント の中にユーザーインターフェース パレットから画像、ラベルを2個、ボタンを１個追加します。画像は高さと横幅は"親要素に合わせる"、回転角度は"90.0″に、ラベルの名前は日時とコメントにし、テキストは空白に、ボタンは名前を"写真リターン"、テキストを"リターン"にします。

非可視コンポーネントの追加

ユーザーインターフェース パレットから通知機能を２個、メディアパレットからカメラ、センサーパレットからタイマーと位置センサー、ストレージパレットから小型DBとファイル、接続パレットからウェブを追加します。

ここまでで下図のようになります。

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

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

データ構造

このアプリでは小型DBにデータのリストを格納しています。データはJSONでその構造はChatGPT-o1が設計したもので以下の通りです。

photosList = [
  {
    "imagePath": "file:///storage/emulated/0/DCIM/Camera/IMG_20250101_123456.jpg",
    "latitude": 35.xxxxx,
    "longitude": 139.yyyyy,
    "timestamp":  "2025-01-01 12:34:56",
    "comment":       "初日の出"
  },
  ...
]

JSONを直接作る機能はApp Inventorにはありませんが、ウェブコンポーネントにディクショナリをJSONにエンコード(Jsonオブジェクトのエンコードメソッド)・デコード(Jsonテキストデコードメソッド)する機能があるのでこれを使います。