AI,ChatGPT,チュートリアル,生成AI

画像フィルターアプリで使っているJavaScriptを含む imagefilter.html に新しいフィルターを追加してもらう方法です。生成AI関連チュートリアルは通常はゴールド会員特典ですが皆さんに生成AIに興味を持ってもらいたいので無料会員特典として公開します。無料のChatGPTでできるので試してみてください。

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

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個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

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

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

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

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

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

下図のようになります。

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

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

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

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

このチュートリアルでは、関数計算のできる電卓アプリを作ります。使える関数は平方根、三角関数、対数関数、累乗、階乗です。普通に作ろうとするとすごく大変になるので、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

    • 名前=小数点、テキスト=.

    • 名前=削除、テキスト=◀︎

    • 名前=イコール、テキスト==

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

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

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

アプリ設計,チュートリアル,生成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: 太字フォント=チェック、テキスト="リスト"、フォントサイズ=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) を地図の下に追加し、横幅は"親要素に合わせる"にします。

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

このチュートリアルでは、ホットペッパー グルメサーチ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“

  • レイアウト パレットから テキストボックス と ボタン を追加します。

  • テキストボックス の名前とヒントを"移動先住所"にします。

  • ボタン の名前を"住所移動"、テキストを"住所に移動"にします。

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

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