四則演算電卓アプリ
四則演算のできる電卓アプリを作ります
このチュートリアルでは、四則演算のできる電卓アプリを作ります。ネットを調べてみると二項演算しかできないApp Inventor 2 電卓アプリばかりだったので、Google Gemini 2.0 Flash Thinking Experimentalに相談してJavaScriptで多項演算できるように作りました。もちろん多項式内の掛け算、割り算は優先して計算します。
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"BasicCalculator"と名前を付けます。
デザイン編集
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
- 名前=小数点、テキスト=.
- 名前=削除、テキスト=◀︎
- 名前=イコール、テキスト==
下図のようになります。携帯電話サイズだとすべてのボタンが見えないのでタブレットサイズで表示しています。
