アプリ設計,チュートリアル,生成AI

電卓アプリを作ろうと思い立ちいろいろ探してみたのですが、単純な加減乗除しかできない電卓でもApp Inventorで作ろうとすると結構複雑になることがわかりました。そこであまりなさそうな関数電卓アプリをApp Inventorで作ることにしました。作業に入る前にChatGPTとGeminiに相談してみました。

  1. MIT App Inventor 2 App Maker
  2. ChatGPT-o1
  3. Gemini 2.0 Flash Thinking Experimental
  4. Gemini 2.0 Pro Experimental

はエクステンションか大変な処理しか言ってこないので却下。はWebViewer内でJavaScriptで計算する方法を教えてくれました。うまい方法なんですが、データのやりとり部分は外している感じです。UIは数字入力部分を無視していていい加減です。はWebViewer内でJavaScriptで計算する方法を教えてくれましたが、なんか説明が変なので詳しく説明するように頼んだところ、良さそうな説明をしてくれました。eval()のセキュリティ上のリスクと回避方法を説明してくれたのはいいですね。は拡張機能を一番おすすめしてきたので却下。

で作ってみます。

アプリのアイデア

平方根、三角関数、対数が使えてカッコ付きの数式も処理できる関数電卓アプリ

MIT App Inventor 2 App Maker

App Inventorで関数電卓アプリを作りたい。関数としては平方根、三角関数、対数を使いたい。カッコ付きの数式も処理したい。

関数電卓アプリをMIT App Inventorで作成するには、以下のような手順で進めることができます。このアプリには、平方根、三角関数(sin、cos、tanなど)、対数計算、そしてカッコ付きの数式の処理を含む計算機能を実装します。

---

### 1. **基本のUIデザイン**
Designer画面で以下のコンポーネントを配置します:
- **TextBox**: 入力式を入力するためのエリア。
  - 例: 名前を`InputExpression`に設定。
- **Label**: 結果を表示するため。
  - 例: 名前を`ResultLabel`に設定。
- **Button**: 計算を実行するボタン。
  - 例: テキストを「計算」に設定し、名前を`CalculateButton`に設定。

---

### 2. **数式処理用のエクステンション**
MIT App Inventorでは、複雑な式の計算を実現するためにJavaScriptエンジンを使ったエクステンション(例: MathJSや他の計算ライブラリ)が便利です。以下の手順で準備できます:

1. **エクステンションを追加**:
   - MathJSのような外部エクステンション(App Inventorの拡張機能)を使用して、カッコや関数を含む複雑な数式を処理できます。
   - エクステンションをMIT App Inventorにインポートします。

2. **エクステンションをプロジェクトにドラッグ**:
   - ドラッグして画面上に配置。

---

### 3. **Blocksでの実装**
次に、Blocksエディターで以下のようにブロックを組み立てます:

#### **数式を解析し、計算結果を表示**
1. `CalculateButton.Click`イベントで以下を実行:
   - `InputExpression.Text`を取得。
   - MathJSエクステンション(または別のエクステンション)の「evaluate」メソッドを使って数式を計算。
   - 計算結果を`ResultLabel.Text`に設定。

#### **具体例**:
```plaintext
When CalculateButton.Click
  Set ResultLabel.Text to MathJS.Evaluate(InputExpression.Text)
```

---

### 4. **サポートする計算機能のテスト**
以下の式が正しく動作するかをテストしてください:
- 平方根: `sqrt(25)` → 結果は`5`
- 三角関数: `sin(30)` → 結果は`0.5`(注意:度数法かラジアンか確認)
- 対数: `log(100, 10)` → 結果は`2`
- 複雑な式: `2 * (3 + 5)` → 結果は`16`

---

### 5. **改良(オプション)**
- **入力検証**: 数式が不正確な場合はエラーメッセージを表示。
- **ボタンの配置**: 数字や演算子ボタンを画面に追加して手動入力をサポート。

---

これで関数電卓アプリの基本的な作成が可能です!必要に応じて調整や機能追加も行えます。

エクステンションを使わないで作る方法はない?

エクステンションを使わずにMIT App Inventorで関数電卓アプリを作成する方法もありますが、その場合、以下の方法で数式処理を手動で実装する必要があります。

---

### アプローチ
エクステンションなしで実現するには、以下のように進めます:

1. **式を解析して処理するロジックを作成**
   - 入力された数式を解析するために、`split`や`select list item`などのブロックを使います。
   - 各演算子(`+`, `-`, `*`, `/`, `sqrt`, `sin`, `cos`, `log` など)を検出し、それに応じた計算を行います。

2. **順序に基づく演算(優先順位処理)**
   - 計算の優先順位(例: 括弧→指数→乗算/除算→加算/減算)を再現するために、数式を分割して段階的に処理します。

---

### ステップごとの実装

#### **1. UIデザイン**
- **TextBox**: 数式を入力するエリア。
  - 名前: `InputExpression`
- **Label**: 結果を表示するため。
  - 名前: `ResultLabel`
- **Button**: 計算実行ボタン。
  - 名前: `CalculateButton`、テキストは「計算」に設定。

---

#### **2. 数式解析と計算ロジックの実装**
以下のようにブロックを作成します。

##### **a. 四則演算の処理**
数式を解析して、簡単な演算を実行するロジックを作成します。

```plaintext
When CalculateButton.Click
    Set input to InputExpression.Text
    If contains(input, "+") Then
        Split input into two parts by "+"
        Set ResultLabel.Text to number 1 + number 2
    Else If contains(input, "-") Then
        Split input into two parts by "-"
        Set ResultLabel.Text to number 1 - number 2
    Else If contains(input, "*") Then
        Split input into two parts by "*"
        Set ResultLabel.Text to number 1 * number 2
    Else If contains(input, "/") Then
        Split input into two parts by "/"
        Set ResultLabel.Text to number 1 / number 2
```

---

##### **b. 特殊関数(平方根、三角関数など)の処理**
以下は特殊関数の例です。

- **平方根の計算**:
  ```plaintext
  If contains(input, "sqrt") Then
      Remove "sqrt(" and ")" from input
      Set ResultLabel.Text to sqrt(number)
  ```

- **三角関数の計算(sin, cos, tan)**:
  ```plaintext
  If contains(input, "sin") Then
      Remove "sin(" and ")" from input
      Convert input to radians (if required)
      Set ResultLabel.Text to sin(number)
  ```

- **対数の計算**:
  ```plaintext
  If contains(input, "log") Then
      Remove "log(" and ")" from input
      Split input by ","
      Set ResultLabel.Text to log(number1) base number2
  ```

---

##### **c. 括弧付きの式の処理**
括弧をサポートするには、再帰的な処理を使います。

1. **括弧を検出**:
   - `contains(input, "(")`を使用して括弧を検出。
   - 内部の最も内側の括弧を抽出(`split`と`substring`を使用)。

2. **括弧内の式を計算**:
   - 抽出した式を再帰的に計算。
   - 計算結果で括弧部分を置換。

3. **全体の式を再計算**。

```plaintext
If contains(input, "(") Then
    Find innermost parentheses
    Calculate result of parentheses
    Replace parentheses with result
    Recalculate input
```

---

### 実装上の注意
1. **エラーハンドリング**:
   - 入力が不正な場合、エラーメッセージを表示(例: "式が正しくありません")。

2. **計算順序のサポート**:
   - 計算の優先順位(乗算・除算が加算・減算よりも先に計算される)を再現するため、条件を分岐させます。

---

### シンプルな例
例えば、「2 + 3 * 4」を処理する場合:
1. `*`を先に計算 → `3 * 4 = 12`
2. 次に加算 → `2 + 12 = 14`

これをブロックで再現します。

```plaintext
When CalculateButton.Click
    Set input to InputExpression.Text
    If contains(input, "*") Then
        Split input into parts by "*"
        Calculate multiplication first
        Replace input with result
    Else If contains(input, "+") Then
        Split input into parts by "+"
        Calculate addition
        Replace input with result
    ```

---

### 制限と拡張
エクステンションなしの場合、複雑な数式(多段の括弧や複雑な関数)は実装が大変です。シンプルな式から始めて、段階的に拡張してください。

もしより高度な数式処理が必要なら、エクステンションを導入するのが効率的です。

もっと簡単にやりたい

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

チュートリアル,ユーティリティ,小型DB

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

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

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

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

デザイン編集

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

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

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

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

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

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

AI,gemini,アプリ開発,チュートリアル,生成AI

最近特に賢くなってきている生成AIで簡単なアプリを作れるか、GoogleのGemini 2.0 Flash Thinking Experimentalで試してみました。結果は予想以上でGeminiは作り方のチュートリアル を出力してくれました。まだ100%これだけでOKというわけにはいきませんが、少しの調整で動くアプリを作れました。調整した点は以下です。

  • バーコードスキャナー外部スキャナーの使用のチェックを外す
  • BarcodeScanner1.AfterScanで「format」は渡されない

実際に作ったQRコード読み取りアプリのチュートリアルはこちらです。実験日: 2025年2月6日

App InventorでQRコードを読んで内容を表示するアプリ作れる?

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

gemini,アプリ開発,センサー,チュートリアル,ユーティリティ,生成AI

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

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

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

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

コンポーネントの配置

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

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

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

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

Google Sheets API,チュートリアル,地図

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

このチュートリアルでは、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) を地図の下に追加し、横幅は"親要素に合わせる"にします。

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

  • 水平配置1

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

  • 水平配置2

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

  • 水平配置3

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

  • 水平配置4

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

  • 水平配置5

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

  • 水平配置6

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

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

レイアウト パレットから 水平配置コンポーネント(水平配置7) を1個、垂直配置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を活用して、周辺のお店を検索できる地図アプリを作成します

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

ページの最後にあるダウンロードセクションからソースコードと実行用の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“

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

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

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

アプリ設計,チュートリアル,生成AI

地図コンポーネントを使ったアプリのアイデアとして、レストラン検索アプリを作ろうと考えました。
本来なら食べログやぐるなびからレストラン情報を取得する方法が考えられますが、これらのサービスは有料だったり、無料でもアプリから情報を取得するためのAPIキーを一般公開できないなどの制約があります。
そこで、スプレッドシートコンポーネントを使用し、Google Sheets APIを経由してレストランの情報を取得し、地図上で検索できるようにすることにしました。

作り方はChatGPTとGeminiに相談してみました。

  1. MIT App Inventor 2 App Maker
  2. ChatGPT-o1
  3. Gemini 1.5 Pro
  4. Gemini 2.0 Experimental Advanced

ラフなアイデアから始めたところ、こんな結果です。

  • 1はスプレッドシートコンポーネントを無視したので却下。でもマーカークリック時に通知機能でレストラン情報を表示するのは良いアイデア。
  • 2もスプレッドシートコンポーネントを無視したので却下。
  • 3はスプレッドシートコンポーネントを使用しているが他の部分のデザインがおかしい。
  • 4はスプレッドシートコンポーネントを使用しているし、全体的によくできていて、コンポーネントの使い方で知らないものを教えてくれるのでありがたい。

4で作ってみます。できたアプリはこちらです

アプリのアイデア

地図コンポーネントを使って現在地の周辺にあるレストランを検索し、クリックしたときに以下の情報を表示するApp Inventorアプリを作りたい。APIは使わずにレストラン情報はGoogleスプレッドシートを使いたい。どうするといいか?

名前 料理 営業時間 定休日 住所 電話番号

MIT App Inventor 2 App Maker

地図コンポーネントを使って現在地の周辺にあるレストランを検索し、クリックしたときに以下の情報を表示するApp Inventorアプリを作りたい。APIは使わずにレストラン情報はGoogleスプレッドシートを使いたい。どうするといいか?
名前 料理 営業時間 定休日 住所 電話番号

以下の手順で、MIT App Inventorを使用して「地図コンポーネント」と「Googleスプレッドシート」を利用し、現在地周辺のレストラン情報を表示するアプリを作成できます。APIを使用せず、Googleスプレッドシートでデータを取得します。

---

### 必要な機能:
1. 現在地取得:`LocationSensor`を使用。
2. レストランリスト取得:Googleスプレッドシートから情報を取得。
3. 地図表示:`Map`コンポーネントを使用。
4. レストラン情報表示:`Notifier`または`Label`コンポーネントを利用。

---

### 実装ステップ

#### 1. Googleスプレッドシートの設定
1. **Googleスプレッドシートを作成**し、以下のようなフォーマットでデータを入力:
   | Name          | Cuisine    | Hours        | ClosedDay | Address       | PhoneNumber   | Latitude | Longitude |
   |---------------|------------|--------------|-----------|---------------|---------------|----------|-----------|
   | Restaurant A  | Italian    | 10:00-22:00  | Monday    | Example Addr  | 1234567890    | 35.6895  | 139.6917  |
   | Restaurant B  | Japanese   | 11:00-23:00  | Sunday    | Example Addr  | 0987654321    | 35.6896  | 139.6920  |

2. スプレッドシートを**公開**設定にし、共有リンクを作成します。

3. スプレッドシートのデータをCSV形式で取得できるURLを生成:
   - スプレッドシートのURL例:
     ```
     https://docs.google.com/spreadsheets/d/your_spreadsheet_id/edit#gid=0
     ```
   - データ取得用URL:
     ```
     https://docs.google.com/spreadsheets/d/your_spreadsheet_id/export?format=csv
     ```

#### 2. App Inventorの準備
1. **コンポーネント追加**:
   - `LocationSensor`(現在地を取得)
   - `Map`(地図表示)
   - `Web`(スプレッドシートデータ取得)
   - `Notifier`(レストラン情報の表示)
   - 必要に応じて`Button`や`Label`を追加。

---

#### 3. ブロックの設定

##### **現在地の取得**
- `LocationSensor.LocationChanged`イベントを使用し、緯度・経度を取得。
```plaintext
When LocationSensor1.LocationChanged
  set global CurrentLatitude to LocationSensor1.Latitude
  set global CurrentLongitude to LocationSensor1.Longitude
```

##### **スプレッドシートデータの取得**
- `Web1`を使用し、スプレッドシートからデータを取得。
```plaintext
When ButtonGetRestaurants.Click
  set Web1.Url to "https://docs.google.com/spreadsheets/d/your_spreadsheet_id/export?format=csv"
  call Web1.Get
```
- データ取得完了時の処理:
```plaintext
When Web1.GotText
  set global RestaurantData to call csv table to list Web1.ResponseContent
```

##### **地図にマーカーを追加**
- `Map`コンポーネントの`AddMarker`メソッドを使用。
```plaintext
for each item in global RestaurantData
  call Map1.AddMarker
    Latitude: select list item (item, 7)
    Longitude: select list item (item, 8)
    Title: select list item (item, 1)  // レストラン名
    Description: select list item (item, 2)  // 料理
```

##### **マーカークリック時に情報表示**
- `Map1.MarkerClick`イベントを使用:
```plaintext
When Map1.MarkerClick
  call Notifier1.ShowMessageDialog
    Message: join "Name: " + marker.Title + newline
                   "Cuisine: " + marker.Description + newline
                   "Phone: " + get restaurant phone (marker.Title)
    Title: "Restaurant Info"
    ButtonText: "OK"
```

##### **電話番号や住所の取得**
- タイトルに基づいて該当するレストラン情報を取得。
```plaintext
function get restaurant phone(name)
  for each item in global RestaurantData
    if select list item (item, 1) = name
      return select list item (item, 6)  // 電話番号
```

---

### 画面デザイン
1. 地図を画面いっぱいに配置。
2. ボタンでスプレッドシートからデータを取得。
3. マーカークリックで情報を表示。

---

これにより、Googleスプレッドシートを使用して現在地周辺のレストラン情報を表示し、詳細を確認できるアプリを構築できます!

ChatGPT-o1

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

Google Sheets API,チュートリアル,ユーティリティ,地図

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

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

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

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

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

デザイン編集

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

仮想スクリーンを作成

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

“地図スクリーン

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

リストスクリーン

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

“写真スクリーン

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

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

ユーザーインターフェース パレットから通知機能を2個、メディアパレットからカメラ、センサーパレットからタイマーと位置センサー、ストレージパレットから小型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テキストデコードメソッド)する機能があるのでこれを使います。

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

アプリ設計,チュートリアル,生成AI

地図コンポーネントを使ったアプリのアイデアを思いついたので、ChatGPTとGeminiに相談してみました。

  1. MIT App Inventor 2 App Maker
  2. ChatGPT-o1
  3. Gemini 2.0 Experimental Advanced

ラフなアイデアから始めたところアプリの感想から設計までいずれも一応それらしく行っていますが、は余計なことをしていてあまりうまく設計できていません。UIの設計はが良い感じです。もデータ保存に関してはJSONを使っていて良いですが、の方が丁寧に説明してくれています。他を参考にしながらで作ってみます。

作ってみたところ、とりあえず3時間で動きましたね。あとは使い勝手をよくするために調整。

アプリのアイデア

写真を撮るとGPSで位置も取って地図にその写真のアイコン入れる。クリックで写真を拡大表示

MIT App Inventor 2 App Maker

こんなアプリはどう思う?:写真を撮るとGPSで位置も取って地図にその写真のアイコン入れる。クリックで写真を拡大表示

このアプリのアイデアは非常に魅力的で、以下のような構成でMIT App Inventorを使用して実現できます。写真撮影とGPS座標の取得、さらに地図にその写真をマークする機能を組み合わせたアプリは、旅行記録、不動産の調査、プロジェクト管理など、多くの用途に役立ちます。

### 必要なコンポーネント
1. **カメラ (Camera)**:
   - ユーザーが写真を撮るために使用。
   - 撮影後、写真のファイルパスを取得。

2. **ロケーションセンサー (LocationSensor)**:
   - 写真が撮影されたときのGPS位置情報(緯度・経度)を取得。

3. **マップ (Map)**:
   - 地図を表示し、写真のアイコンをその位置にマッピング。

4. **マーカー (Marker)**:
   - 撮影された写真ごとにマップに追加されるポイント。クリックすると写真が表示される。

5. **ストレージ (TinyDB)**:
   - 写真とGPSデータを保存して、アプリを閉じた後もデータを保持する。

### 実装手順
1. **UIのデザイン**:
   - ボタン:「写真を撮る」ボタン。
   - マップ:地図を表示するエリア。
   - 表示用のコンポーネント(例えば、画像表示用のラベルやポップアップ)。

2. **ブロックの構成**:
   - 「写真を撮る」ボタンのクリック時に、カメラを起動し、撮影後に写真のファイルパスを取得。
   - ロケーションセンサーでGPS座標を取得。
   - 写真ファイルのパスとGPS座標をTinyDBに保存。
   - 取得したGPS座標に基づいて、マーカーをマップに追加。マーカークリック時に、対応する写真を表示する。

3. **データ保存と表示**:
   - TinyDBを使用して、各写真のデータを保存(ファイルパス、緯度、経度)。
   - アプリ起動時に、保存済みデータを読み込み、地図にマーカーを復元。

### 注意点
- 写真ファイルのストレージパスはAndroidの権限設定に依存するため、適切な権限(カメラ、ストレージ、位置情報)を要求する必要があります。
- 高精度なGPSデータを得るために、LocationSensorの設定を調整することを推奨します。

このアプリは、実用性とカスタマイズの可能性が高いプロジェクトであり、App Inventorの基本的な機能だけで実現可能です。さらに質問や特定のステップについての詳細が必要であれば教えてください!

詳細設計してください。追加で条件が必要ならば聞いてください。

詳細設計に進む前に、以下の質問をさせていただきます。この情報を基に、より具体的な設計を提案できます:

### 確認事項
1. **写真の保存場所**:
   - 写真はデバイスのローカルストレージに保存しますか?それともクラウド(例: Firebaseなど)にアップロードしますか?

2. **地図の機能**:
   - ユーザーがズームイン/ズームアウト、ドラッグして地図を移動できるようにしますか?
   - 写真を撮影した場所の詳細情報(例: 日時、説明など)をマーカークリック時に表示しますか?

3. **複数の写真管理**:
   - 複数の写真を同じ地図上に表示できますか?
   - 古いデータの削除や編集機能が必要ですか?

4. **アプリ使用の想定環境**:
   - アプリを主に使用する場面(例: 旅行、仕事の記録)。
   - オフラインでの地図表示やデータ管理が必要ですか?

5. **見た目と操作性**:
   - カメラ起動や地図表示時に特別なアニメーションやガイドが必要ですか?
   - UIデザインの好み(シンプル、カラフルなど)。

### 仮の前提条件
上記に回答をいただくまでの間、以下のような仕様で設計します:
1. 写真はローカルストレージに保存し、GPS座標と共に地図上にマッピング。
2. ユーザーは複数の写真を撮影して地図上に追加可能。
3. マーカーをクリックすると、写真と撮影日時を表示。
4. データはローカルストレージ(TinyDB)に保存。

これを基に詳細設計を進めますが、追加情報があれば適宜反映します。どうしますか?

これでお願いします

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