あみだくじアプリ
簡単なあみだくじアプリを作ります
みんな一度は遊んだことがある「あみだくじ」を、アプリとして作ってみましょう。
このチュートリアルでは、ウェブビュー 内の JavaScript であみだくじの本体を作り、それを App Inventor から操作する方法を解説します。JavaScript のコードは テトリスと同じように、Google Gemini 3 Pro に相談しながら作成しました。コメントやゴール名は小型DBに保存します。
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Amidakuji"と名前を付けます。
このチュートリアルで学べること
- ウェブビューでJavaScriptを実行する方法
- 小型DBでのリストの使い方
使用コンポーネント
ボタン、通知機能、テキストボックス、ウェブビュー、水平配置、小型DB
使用ブロック
グローバル変数、リスト、もしならば
デザイン編集
Screen1のタイトルを"あみだくじ"にします。
ページの最後にあるダウンロードセクションからamidakuji.htmlをダウンロードして、すべてのファイルをメディアのファイルをアップロードボタンをクリックしてアップロードします。
ユーザーインターフェース パレットから テキストボックス をビューアーに追加します。横幅は"親要素に合わせる"に設定します。名前はテキストボックスコメントに設定します。
レイアウト パレットから 水平配置コンポーネント を2個テキストボックスコメントの下に追加します。横幅は"親要素に合わせる"に設定します。名前は水平配置1と水平配置2になります。
ユーザーインターフェース パレットからテキストボックスを4個水平配置1の中に追加します。名前はそれぞれテキストボックスゴール1、テキストボックスゴール2、テキストボックスゴール3、テキストボックスゴール4に設定します。すべて横幅は25%に、ヒントは「ゴール入力」にします。
ユーザーインターフェース パレットからボタンを2個水平配置2の中に追加します。名前はそれぞれボタン1、ボタン2になります。テキストを「設定」、「クリア」にそれぞれ設定します。
ユーザーインターフェース パレットからウェブビューと通知機能を水平配置2の下に追加します。名前はウェブビュー1と通知機能1になります。ウェブビュー1の高さと横幅を"親要素に合わせる"に設定します。
最後にストレージパレットから、 小型DBをビューアーにドラッグアンドドロップします。名前は小型DB1になります。
下図のようになります。
