二人で対戦する三目並べアプリを作ります
このチュートリアルでは、オンラインで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 です。
