App Inventorを使ってみよう! (5/7)
作成:2010-11-08 15:40
更新:2010-11-08 16:02
更新:2010-11-08 16:02
■簡単な画面を作ってみよう
では、実際にデザイナに部品を配置して、ちょっとしたアプリを作っていきましょう。今回、配置するのは、以下の3つの部品です。いずれもパレットの「Basic」というところに用意されています。
Screen
初期状態では、コンポーネント・エリアに「Screen1」という項目が表示されています。これは、画面に関する部品です。これを選択し、右側にあるプロパティの欄から「Title」を「Sample App」と書き換えてみましょう。画面のタイトル表示が変更されます。
Label
Labelは、テキストを表示するための部品です。まずは、この部品をビューワにドロップしてください。画面の一番上に、横長に配置されます。その右側のコンポーネント・エリアには、「Label1」と部品が表示されます。これが、配置した部品の名前です。
配置したら、画面右側のプロパティから「Text」という項目を探し、「your name:」と書き換えておきましょう。ビューワの表示も変更されます。続いて、「Width」という項目を探し、値を「Fill Parent」に変更しましょう(値の部分をクリックすると、変更のためのポップアップ表示が現れます)。
TextBox
TextBoxは、テキストを入力するための部品です。これをビューワにドロップすると、細長い入力フィールドが生成されます。コンポーネント・エリアには「TextBox1」という名前で表示されます。これも「Width」を「Fill Parent」にしておきます。
Button
Buttonは、プッシュボタン(いわゆるボタン。タッチして何か動かすやつ)の部品です。これをビューワにドロップすると、「Text for Button1」と表示されたボタンが作成されます。「Button1」というのが、部品の名前です。
やはりプロパティから「Text」という項目を探して、「click!」と書き換えましょう。
――これで、ざっと下のイメージのような画面が作成できました。後は、ボタンを押したときに何かを実行するような処理を作成すればいいだけです。
Screen
初期状態では、コンポーネント・エリアに「Screen1」という項目が表示されています。これは、画面に関する部品です。これを選択し、右側にあるプロパティの欄から「Title」を「Sample App」と書き換えてみましょう。画面のタイトル表示が変更されます。
Label
Labelは、テキストを表示するための部品です。まずは、この部品をビューワにドロップしてください。画面の一番上に、横長に配置されます。その右側のコンポーネント・エリアには、「Label1」と部品が表示されます。これが、配置した部品の名前です。
配置したら、画面右側のプロパティから「Text」という項目を探し、「your name:」と書き換えておきましょう。ビューワの表示も変更されます。続いて、「Width」という項目を探し、値を「Fill Parent」に変更しましょう(値の部分をクリックすると、変更のためのポップアップ表示が現れます)。
TextBox
TextBoxは、テキストを入力するための部品です。これをビューワにドロップすると、細長い入力フィールドが生成されます。コンポーネント・エリアには「TextBox1」という名前で表示されます。これも「Width」を「Fill Parent」にしておきます。
Button
Buttonは、プッシュボタン(いわゆるボタン。タッチして何か動かすやつ)の部品です。これをビューワにドロップすると、「Text for Button1」と表示されたボタンが作成されます。「Button1」というのが、部品の名前です。
やはりプロパティから「Text」という項目を探して、「click!」と書き換えましょう。
――これで、ざっと下のイメージのような画面が作成できました。後は、ボタンを押したときに何かを実行するような処理を作成すればいいだけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「App InventorによるAndroid開発入門」に戻る