App Inventorでは、グラフィックを扱う場合、いくつかの方法があります。１つは、イメージをあらかじめ用意しておき、これを部品に設定して表示する、というもの。もう１つは、「Canvas」を使い、グラフィックを描画する処理を呼び出して描く、というものです。

ここでは、Canvasを利用した方法について説明をしましょう。Canvasは、グラフィックを扱うための部品で、以下のような機能を持っています。

１．簡単な図形（円、四角形、直線といったもの）を描くための機能。これを呼び出すことで図形を表示することができます。

２．背景の色やイメージも設定できるので、あらかじめ用意しておいたイメージを表示させるのにも役立ちます。

３．部品をタッチしたりドラッグした時のイベント処理機能も持っています。インタラクティブに操作をするようなときにも使えます。

このCanvasを利用して、簡単な描画ツールを作ってみることにします。ツールを作る場合、各種の設定などを行うためのGUIも考えなければいけません。Buttonによるプッシュボタンだけでもいいのですが、ここでは「いくつかの項目から１つを選ぶ」という、リスト表示のための部品「ListPicker」も使ってみることにします。

ListPickerは、リストを表示し、そこから項目を選択する部品です。表示する項目はあらかじめテキストで記述しておくことができます。今回は、描画に使う色を選ぶのに、このListPickerを使ってみることにします。

このListPickerは、配置したところはただのButtonに見えます。ボタンをクリックすると、画面にリストが現れ、ここで項目を選ぶようになっているのです。

では、App Inventorにブラウザからアクセスし、プロジェクトを作りましょう。先に作成したMySampleをそのまま再利用してもいいですし、新たに用意してもかまいません。