生成AIを使ったQRコード生成アプリの設計
JavaScriptにQRCode.jsというライブラリがあってこれを使うと簡単にQRコードが作れるらしいです。App Inventor 2 ではウェブビューにJavaScriptを含むhtmlファイルをアセットとして登録すればJavaScriptを呼び出してデータのやり取りができます。App Inventor 2 には直接QRコードを作る機能は無いので、QRCode.jsを使ってQRコードを作るApp Inventor 2 アプリを作ることにしました。
作り方はChatGPTとGemini、最近賢くなったと噂に聞くClaude 3.7 Sonnetに相談してみました。
- １は大体はいいみたい。
- ２も大体はいいみたい。
- ３はJavaScript関数を呼ばずにwindow.postMessageを使っているのでうまく動くか分からないので却下。
- ４はブロック編集部分が間違っているので却下。
１と２で作ってみます。
MIT App Inventor 2 App Maker
JavaScriptのQRCode.jsを使ってApp Inventor 2 アプリを作りたい。ただし、ウェブビューは見えなくし、App Inventor 2 からウェブビューに文字列を渡して、できたQRコードはApp Inventor 2 に渡してキャンバスコンポーネントに表示して保存できるようにしたい。作り方を教えて。### **MIT App Inventor 2でQRCode.jsを使ったQRコード生成アプリの作成方法**
MIT App Inventor 2 で `QRCode.js` を使い、ウェブビューを非表示にしながらQRコードを生成し、キャンバスに表示して保存するアプリを作成する手順を説明します。
---
### **🔹 概要**
1. **ウェブビューコンポーネントを利用するが非表示にする**
2. **App Inventor 2 から WebViewer に文字列を送信**
3. **QRCode.js を使用してQRコードを生成**
4. **生成したQRコードをApp Inventor 2に渡し、Canvasに表示**
5. **Canvasの画像として保存**
---
## **📌 手順**
### **❶ MIT App Inventor 2 でのコンポーネント設定**
まず、以下のコンポーネントを **デザイナー画面** で追加します。
| **コンポーネント名** | **種類** | **説明** |
|-----------------|---------|----------------------------|
| `WebViewer1` | WebViewer | QRコードを生成するための非表示Webコンポーネント |
| `Canvas1` | Canvas | 生成したQRコードを表示するキャンバス |
| `Button1` | Button | QRコードを生成するボタン |
| `TextBox1` | TextBox | QRコードに埋め込むテキスト入力欄 |
| `File1` | File | 画像を保存するためのファイルコンポーネント |
---
### **❷ `QRCode.js` を利用するHTMLファイルを作成**
App Inventor 2 の **WebViewer** に QRコード生成処理をさせるために、外部HTMLを作成し、それをアプリ内で利用します。
#### **📄 `qrcode.html` の作成**
以下のHTMLファイルを作成し、`Assets` にアップロードしてください。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function generateQRCode(data) {
document.getElementById("qrcode").innerHTML = ""; // QRコードをリセット
new QRCode(document.getElementById("qrcode"), data);
}
function getQRCodeImage() {
var canvas = document.querySelector("canvas");
if (canvas) {
var imageData = canvas.toDataURL("image/png");
AppInventor.setWebViewString(imageData); // App Inventorに送信
}
}
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
```
✅ `generateQRCode(data)` 関数で QRコードを生成し、
✅ `getQRCodeImage()` 関数で `base64` 画像を App Inventor 2 に渡します。
---
### **❸ App Inventor 2 のブロックエディタ設定**
次に、MIT App Inventor の **ブロックエディタ** で以下のようにブロックを作成します。
#### **🟢 ボタンを押したらQRコードを生成**
1. **`Button1.Click`**
- `WebViewer1.GoToUrl` を実行し、以下のようにURLをセット：
```
file:///android_asset/qrcode.html
```
- **`WebViewer1.EvaluateJavaScript`** を呼び出し、以下のスクリプトを実行：
```
generateQRCode("入力されたテキスト")
```
- ここで `TextBox1.Text` を利用して QRコードを作成します。
2. **QRコード画像を取得**
- **`Clock1.Timer`** を設定し、一定時間後に以下を実行：
```
WebViewer1.EvaluateJavaScript("getQRCodeImage()")
```
---
### **❹ QRコード画像をCanvasに表示**
- `WebViewer1.WebViewStringChanged` イベントを利用し、以下を設定：
```
Canvas1.BackgroundImageinBase64 = WebViewer1.WebViewString
```
---
### **❺ 画像を保存**
1. **キャンバスの画像を保存するための処理**
- `Button2.Click` に以下を設定：
```
File1.SaveAs(Canvas1.SaveAs("QRCode.png"))
```
- これで、QRコード画像が `QRCode.png` として保存されます。
---
## **📌 完成イメージ**
**📷 UIデザイン**
```
[TextBox1]（ここにQRコードに変換する文字を入力）
[Button1] （QRコード生成ボタン）
[Canvas1] （生成したQRコードを表示）
[Button2] （QRコード画像を保存）
```
---
## **✅ まとめ**
1. **WebViewer を非表示** にして `QRCode.js` を利用
2. **App Inventor 2 から WebViewer にデータ送信**
3. **QRコードを生成し、base64 画像として取得**
4. **Canvas に QRコードを表示**
5. **生成した QRコードを保存**
これで、ウェブビューを見せずに QRコードを作成し、App Inventor 2 で表示・保存するアプリが完成します！