経験ゼロでも大丈夫!? App Inventorで始めるAndroidアプリ開発

App Inventorを使う際は、Googleのアカウントを使って公式サイトにログインしましょう。ログインしたら、画面に表示されている「New」というボタンをクリックします。次に、アプリのタイトルを入力する画面が出てくるので、そこに「MyApp」と入力してください。

すると、App Inventorのデザイナ画面が開きます。このデザイナを使い画面に表示する部品を配置していきます。ここでは、ボタンが押されたら猫の画像を表示するだけのとても簡単なアプリを作ります。

部品の配置

部品の配置は、画面左の「Palette」にある「Button」をドラッグしてViewerの上でドロップしてください。同じように、「Image」も「Viewer」に配置します。

これで部品の配置は終わったので、次は部品の編集です。部品はアプリを最初に起動した時に表示したいようなデザインに編集しておくとよいでしょう。例えば、配置したボタンの表示名を変えるとします。画面の一番右の「Properties」で各部品を編集します。まず、「Viewer」上のボタンをクリックして、「Properties」の中にある「Text」という部分が「Text for Button1」になっているので、それを「show my cat」に変更します。

次に、ボタンを押した時に表示する画像を用意します。「Components」の列の下に「Media」という項目があるので、ここにアプリで使いたい材料を登録します。App Inventorでは画像や音声、動画を用いることができます。画像は、「Media」にあるボタン「Add」を押すと開くアップロード画面で登録します。例では、「cat.png」というファイルを登録します。

上の画像の矢印の右側にあるようにファイル名が表示されれば、画像の準備は完了です。次にアップロードした画像をViewerに置いたイメージの部品に関連付けます。「Components」にある「Image1」をクリックし、右のプロパティにある「Picture」をクリックしてください。ここに「Media」で登録した材料が表示されるので、先ほど登録した「cat.png」をクリックして、「OK」ボタンをクリックしてください。

すると、上の画像の矢印の右側にあるように画像が表示されます。この画像はボタンを押した時に表示したいので、最初は非表示にする設定をします。もう1度「Components」にある「Image1」をクリックし、「Visible」のチェックをクリックして外してください。

イベントの設定

これで、必要な部品を配置できました。次に、ボタンが押されたら画像が表示されるように、「ボタンが押された時のイベント」を作ります。イベントの作成はデザイナとは異なる画面で行います。

その画面を開くには、まずデザイナ画面にある「Blocks Editor is open」というボタンをクリックして、ファイルをダウンロードします。ダウンロードしたファイルを起動すると警告が表示されますが、「ブロックを解除する」というボタンを押して先に進んでください。しばらくすると、準備が完了し、ブロックエディタ画面が開きます。

次に、ブロックエディタの左にある「My Blocks」をクリックしてください。ここには先ほどのデザイナ画面で配置した部品などが表示されます。部品に設定ができるイベントをここで決めます。

まずは、画面左側の「Button1」をクリックし、「Button1.Click」と書かれた部品をドラッグし、画面右側にドロップしましょう。これは「ボタンが押されたら…」という意味の部品です。次にボタンが押された時に何が起きるかを設定します。ボタンを押したら画像を表示するので、今度はブロックエディタの左側にある「Image1」をクリックし、その中から「Image1.Visible」を「Button1.Click」の形に合うように配置します。これで、「ボタンをクリックしたらイメージの表示状態を…」という意味になります。

最後にブロックエディタの左側の「Build-In」をクリックし、その下に表示される「Logic」をクリックしてください。1番上に表示されている「true」という部品を先ほど配置した「Image1.Visible」の右に形が合うように配置します。

以上の設定を行うと、「ボタンをクリックしたらラベルの表示名にイメージの表示状態をONにする」というイベントができます。これでAndroidアプリの完成です。