クラウド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(TextBox1TextBox2) を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 です。

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

グローバル変数

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

チュートリアル,ユーティリティ,初級

カラフルお絵かきアプリを作りましょう

このチュートリアルでは、画面上で指を使っていろいろな色と太さで自由に絵を描ける お絵かきアプリ を作成します。お絵かきアプリにペンの色と太さ、消しゴムを加えています。もちろんクリアボタンで画面を消去することもできます。

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

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

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

  • キャンバスコンポーネントの使い方
  • リストの使い方
  • プロシージャの書き方
  • すべてのコンポーネント“ブロックを使ったループ処理の仕方

使用コンポーネント

キャンバス、水平配置、ボタン

使用ブロック

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

デザイン編集

Screen1のタイトルを"お絵かきアプリ+"にします。

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。これにより、画面全体に描画スペースが広がり、どのサイズの画面でも対応できるようになります。

レイアウト パレットから 水平配置コンポーネント を3個ビューアーに追加し、横幅はすべて"親要素に合わせる"に、水平に整列するは"中央揃え"に設定します。名前は水平配置1から水平配置3になります。

水平配置1ボタンを4個、水平配置2水平配置3ボタンを2個ずつ追加します。ボタンの名前とプロパティーは次のようにします。

  • 水平配置1

    • 名前=黒、背景の色=黒、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=青、背景の色=青、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=グリーン、背景の色=グリーン、フォントサイズ=10、横幅=25パーセント、テキスト=空白
    • 名前=赤、背景の色=赤、フォントサイズ=10、横幅=25パーセント、テキスト=空白

  • 水平配置2

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

  • 水平配置3

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

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

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