クラウドDB,チュートリアル,初級

簡単なチャットアプリを作ります

このチュートリアルでは、複数人でチャットのできる簡易チャットアプリを作ります。この機能を実現するため、リアルタイムで動作するクラウド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]を選択し、"SimpleChat"と名前を付けます。

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

  • クラウドDBの使い方

  • リストの使い方

  • ローカル変数の使い方

  • リストビューの使い方

使用コンポーネント

ボタン、テキストボックス、リストビュー、タイマー、クラウドDB

使用ブロック

グローバル変数、リスト

デザイン編集

Screen1のタイトルを"チャットアプリ"にします。

User Interface パレットからTextBox(TextBox1、TextBox2) を2個、Button(Button1)を1個、ListView(ListView1)を1個Viewerに追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

  • TextBox1: Hint=名前を入力

  • TextBox2: Width=Fill parent、Hint=送信メッセージ、Multiline=チェック

  • Button1: Text=送信

  • ListView1: BackgroundColor=Light Gray、FontSize=14.0、Height=Fill parent、Width=Fill parent、TextColor=Black

次に Storage パレットから CloudDB(CloudDB1) を、Sensors パレットから Clock(Clock1) を Viewer に追加します。これらはすべて non-visible components です。

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

グローバル変数

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

クラウドDB,ゲーム,チュートリアル,中級

もぐらたたきゲームにランキングできる機能を付け加えます

このチュートリアルでは、もぐらたたきゲームにリアルタイムでランキングを登録、表示する機能を付け加えます。複数のスマホでプレイしてランキングに参加できるようになります。この機能を実現するため、リアルタイムで動作するクラウド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]を選択し、"MoleMashRanking"と名前を付けます。

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

  • クラウドDBの使い方

  • リストの使い方

  • プロシージャの書き方

  • ローカル変数の使い方

  • “for each item in list do“ブロックを使ったループ処理の仕方

使用コンポーネント

キャンバス、画像スプライト、水平配置、ラベル、ボタン、テキストボックス、リストビュー、タイマー、サウンド、クラウドDB

使用ブロック

グローバル変数、ローカル変数、リスト、プロシージャ、もしならば、それぞれのリスト内の実行、それぞれのはじめ終わり間隔実行

デザイン編集

Screen1のタイトルを"もぐらたたきランキング"にします。

Drawing and Animation パレットから Canvas をViewerにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。ImageSpriteをViewerにドラッグアンドドロップし名前をsprMoleに、PictureをMole.pngに設定します。　Mole.pngはダウンロードセクションからダウンロードしてください

Layout パレットから HorizontalArrangement を2個 Viewer に追加し、Widthはすべて"Fill parent"に設定します。名前はHorizontalArrangement1とHorizontalArrangement2になります。HorizontalArrangement1にはUser Interface パレットからLabelを4個、HorizontalArrangement2にはTextBoxとButtonを追加します。コンポーネントの名前とプロパティーを次のように設定します。

“HorizontalArrangement1“

  • Label1: Text=得点

  • lblScore: Text=0

  • Label2: Text=残り時間

  • lblTime: Text=空白

“HorizontalArrangement2“

  • txtName: Hint=ランキング登録名

  • btnRegister: Text=登録

HorizontalArrangement2の下にUser Interface パレットからLabel(lblMessage)、Button(btnRestart)、Label(Label3) 、ListView(ListView1)をViewer に追加しプロパティーを次のように設定します。()内はコンポーネントの名前です。

  • lblMessage: Text=空白

  • btnRestart: Text=リスタート

  • Label3: Text=トップ５

  • ListView1: BackgroundColor=Cyan、Width=Fill parent、TextColor=Black

次に Sensors パレットから Clock(Clock1、Clock2) を2個 、 Media パレットから Sound(Sound1、Sound2) を2個 、Storage パレットから CloudDB(CloudDB1) を Viewer に追加します。これらはすべて non-visible components です。

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

グローバル変数

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

クラウドDB,チュートリアル,中級

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

このチュートリアルでは、オンラインで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 です。

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

グローバル変数

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内