会員サイト

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

このチュートリアルでは、オンラインで2人対戦ができる三目並べ（Tic-Tac-Toe）アプリを作成します。対戦を実現するために、リアルタイムで動作するクラウド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]を選択し、"TicTacOnline"と名前を付けます。

デザイン編集

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

Layout パレットから HorizontalArrangement を3個 Viewer に追加し、AlignHorizontalはすべて"Center"に、Widthはすべて"Fill parent"に設定します。名前はHorizontalArrangement1からHorizontalArrangement3になります。それぞれのHorizontalArrangementにUser 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にボタンを４個、水平配置2と水平配置3にボタンを2個ずつ追加します。ボタンの名前とプロパティーは次のようにします。

• 水平配置1

  • 名前=黒、背景の色=デフォルト、フォントサイズ=10、横幅=25パーセント
  • 名前=青、背景の色=青、フォントサイズ=10、横幅=25パーセント
  • 名前=緑、背景の色=グリーン、フォントサイズ=10、横幅=25パーセント
  • 名前=赤、背景の色=赤、フォントサイズ=10、横幅=25パーセント

• 水平配置2

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

• 水平配置3

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

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

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

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

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

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

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

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

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

使用コンポーネント

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

使用ブロック

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

デザイン編集

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

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

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

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

レイアウト パレットから 水平配置コンポーネント を5個ビューアーに追加し、横幅はすべて"親要素に合わせる"に設定します。名前は水平配置1から水平配置5になります。それぞれの水平配置にユーザーインターフェース パレットからボタンを４個ずつ追加します。すべてのボタンのフォントサイズは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
  • 名前=小数点、テキスト=.
  • 名前=削除、テキスト=◀︎
  • 名前=イコール、テキスト==

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

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

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

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

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

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

デザイン編集

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

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

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

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

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

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

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

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

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

下図のようになります。

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

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

このチュートリアルでは、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に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に相談してみました。

1. MIT App Inventor 2 App Maker
2. ChatGPT-o1
3. Gemini 2.0 Flash Thinking
4. 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 で表示・保存するアプリが完成します！

ChatGPT-o1

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

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

このチュートリアルでは、写真などの画像にフィルターをかけて表示するアプリを作ります。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
  • 名前=小数点、テキスト=.
  • 名前=削除、テキスト=◀︎
  • 名前=イコール、テキスト==

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

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