このチュートリアルでは、単純な二次元 (2 D) グラフィックスを作成するためのキャンバスコンポーネントを紹介する。PaintPotというアプリ作り、ユーザが異なる色で画面上描画でき、そのアプリのアップデート版は写真を撮ると、その上に描画もできる。歴史上、1970 年代にまでさかのぼり、PaintPot はパソコンの可能性を証明するために、開発した最初のプログラムの 1 つ。当時、この単純な描画アプリのようなものを作ることは非常に複雑な作業で、結果はかなりお粗末でした。今のApp inventor では、誰もすぐにかなりクールな描画アプリまとめることができ、これは2 D のゲームを作るための素晴らしい出発点だ。

図2-1 ペイントポットアプリ

図2-1に示すPaintPotのアプリでは、次のことができる。

仮想ペイントポットに指を浸し、その色で描画する。画面に沿って指をドラッグして、線を描画する。画面を突きて、ドットを作る。下部にあるボタンを使って、画面をきれいに拭く。下部のボタンでドットサイズを変更する。カメラで写真を撮り、その絵の上に描く。

学習要点

このチュートリアルでは、次の概念を紹介する：

描画用のキャンバスコンポーネントを使用デバイスの表面上のタッチとドラッグイベントの処理配置コンポーネントを利用したと画面レイアウトの制御引数を持つイベントハンドラの使用変数を定義して値を記憶する、例えばユーザは選ばれ描画のためのドットのサイズ。

作業の開始

App Inventorのウェブサイトを開てください。新しいプロジェクトを起動し、「PaintPot」という名前を付けます。 [Connect]をクリックし、ライブテストのためにお使いのデバイス（またはエミュレータ）を設定（ appinventor.mit.edu/explore/ai2/setupのhttpを参照して、設定してください）。

次に、デザイナの右側に、[Properties]パネルに移動し、画面タイトルを「PaintPot」に変更する。デバイス上で、アプリのタイトルバーに新しいタイトルで表示されたはず。

プロジェクト名とスクリーン名の混乱を心配している場合は、ご安心ください！ App Inventorで3つのキーネームがある：

プロジェクト名：取り組むプロジェクトの名前。これはパッケージ化したアプリの名前にもなる。コンポーネントデザイナで[プロジェクト]と[Save As ]をクリックすることて、新しいバージョンをスタートする、またはプロジェクトの名前を変更することができる。コンポーネント名：コンポーネントパネルにScreen1と表示される。App Inventorの現在のバージョンでは、この初期画面の名前を変更することはできない。画面のタイトル：アプリのタイトルバーに表示されるもの。最初はコンポーネント名と同じScreen1で、HelloPurrでこのようにそのまま使用したが。それを変更することができるので、今度PaintPotでやってみる。

デザインコンポーネント

アプリを作るために、これらのコンポーネントを使用：

3 つのボタンコンポーネント：赤、青、または緑の塗料を選択するため。これらを HorizontalArrangement コンポーネント入れて整理する。 1個ボタンコンポーネント：図面をクリア。 2個ボタンコンポーネント：描画ドットのサイズを変更する。 1個ボタンコンポーネント：カメラを起動して写真を撮る。キャンバスコンポーネント：描画サーフェイスである。キャンバスはBackgroundImage プロパティあり、1 章で HelloPurr チュートリアルから kitty.png ファイルに設定する。この章の後ではユーザー撮った写真を背景に設定するようにアプリを変更する。

COLORボタンの作成

まず、次の指示に従って、3色のボタンを作成。

ビューアの上にButtonコンポーネントをドラッグして、そのテキスト属性を「赤」に変更し、そのbackgroundColorを赤に設定。ビューアでは、コンポーネントの一覧で、Button1をクリックして強調表示し（それが既に強調表示されるかもしれない）、[名前の変更]をクリックし、その名前をButton1をからRedButtonに変更する。コンポーネント名でスペースは許可されていないので、注意してください。名前の各単語の最初の文字を大文字にするのが一般的である。同様に、されに青と緑2つのボタンを作り、それぞれBlueButtonとGreenButtonという名前を付け、赤いボタンの下に立て方向に並ぶ。結果を図2-2と比べてください

図 2-2 作成した 3 つのボタンを表示するビューアー

このプロジェクトでは、HelloPurrで行ったように、デフォルト名のまま残すではなく、コンポーネントの名前を変更してください。より意味のある名前を使用すると、プロジェクトをより読みやすくなり、ブロックエディタに移動し、名前でコンポーネントを参照する必要がある場合に本当に役立ちます。本書では、コンポーネント名の後ろにそのタイプを続くの規則（例えば、RedButton）を使用する。

アプリのテスト：接続をクリックし、お使いのデバイスを接続していない場合、今ここで行い、アプリがデバイスまたはエミュレーターで見えることを確認してください。

Arrangementを使ってレイアウト

これで、3つのボタンが積み重ねられてきたはず。しかし、このアプリは、図2-3に示すように、それらすべてが、画面の上部に、横並びに並んで欲しい。HorizontalArrangementコンポーネントを使って次の操作を行う：

パレットレイアウトの引き出しから、HorizontalArrangementコンポーネントをドラッグして、ボタンの下に置く。 [プロパティ]パネルで、HorizontalArrangementの幅を「Fill Parent」に変更し、画面の幅全体を埋めるようにする。 HorizontalArrangementコンポーネントに三つのボタンを一つずつ移動する。ヒント：ドラッグしている部品が行く場所は青い縦線が示される。

図2-3 水平に配置されて3つのボタン

プロジェクトのコンポーネントの一覧で見ると、HorizontalArrangement コンポーネントの下 3 つのボタンが表示される。これは、ボタンが今 HorizontalArrangement コンポーネントのサブコンポーネントであることを示す。すべてのコンポーネントは Screen1 の下でインデントされることに注目してください。画面上ボタンのある行全体をセンタリングするには、Screen1 の AlignHorizontal プロパティを「Center」に変更する。

アプリテスト: デバイス上は、画面の上部に列に並んであなたの 3 つのボタンが表示される。デザイナーのとまったく同じに見えないかもしれない。たとえば、ビューアーでHorizontalArrangement の周囲にアウトラインが表示されるが、、デバイスでは表示されない。

一般的に、Arrangementコンポーネントを使って単純な垂直、水平、または表形式のレイアウトを作成する。また、Arrangementコンポーネントの中に挿入（またはネスト）することによって、より複雑なレイアウトを作成することができる。

キャンバスの追加

次のは描画するキャンバスを設定するステップだ：

パレット描画とアニメーションの引き出しから、キャンバスコンポーネントをビューアーにドラッグ。名をDrawingCanvasに変更する。それは画面の全体の幅にまたがるように、その幅を“Fill parent”に設定する。その高さを2行のボタンの余地を残して 300 ピクセルに設定する。
HelloPurr チュートリアル (章 1) を完了すると場合、kitty.png ファイルは既にダウンロードした。またの場合は、http://appinventor.org/bookFiles/HelloPurr/kitty.png でダウンロードできる。
DrawingCanvasのBackgroundImageをkitty.pngファイルに設定します。コンポーネントデザイナーの [プロパティ] セクションで、BackgroundImage は None に設定されている。フィールドをクリックし、kitty.png ファイルをアップロードする。
ユーザーのアプリケーションを開始のボタンをまだクリックしていない場合は、デフォルトの色が赤色になりるように、DrawingCanvasのBackgroundImageを赤に設定する。作った様子は図 2-4 のように見えることを確認してください。

図 2-5 DrawingCanvasコンポーネントにBackgroundImageは猫の写真

2. ペイントポット