App Inventorを使ってみよう! (6/7)
作成:2010-11-08 16:15
更新:2010-11-08 16:15
更新:2010-11-08 16:15
■ブロック・エディタを使おう
では、作成したアプリに、処理を組み込みましょう。これは「ブロック・エディタ」と呼ばれるものを使います。画面右上辺りに「Open the Blocks Editor」というボタンが見えるはずです。これをクリックしてください。AppInventorForAndroidCodeblocks.jnlpというファイルがダウンロードされ、実行されます。ブラウザによっては、ダウンロードするだけだったりするので、いつまで待っても実行されない場合は、自分でファイルをダブルクリックして実行してください。
(※なお、場合によっては、セキュリティの警告ダイアログが現れるかも知れません。この場合は、信頼して実行してください)
このブロック・エディタは、左側に「Built-in」「My Blocks」といったタブがあり、右側になにもないエリアが表示されます。「Built-in」「My Blocks」が、利用可能な部品(ブロック)を一覧表示するものです。ここから使いたいブロックを選択し、右側のエリアに配置して並べていきます。では、順にやっていきましょう。
1.「My Blocks」→「Button1」→「Button1.Click」
My Blocksには、GUIに配置した部品の名前が表示されます。ここから「Button1」を選択すると、右側にButton1に用意されている部品がポップアップして現れます。その一番上にある「Button1.Click」という部品をドラッグして、空きスペースにドロップしてください。
これは、Button1のボタンをクリックしたときに実行する処理を作るためのものです。この部品に、実行したいブロックをハメ込んでいきます。
2.「My Blocks」→「Label1」→「set Label1.Text to」
今度は、「Label1」にある「Label1.Text」というのを配置します。これは2種類あります。前後に小さく「set」「to」と表示されているものは、Textの値を変更するための部品です。
この部品をドラッグし、先に配置した「Button1.Click」のくぼみ(中央の凹んだ部分)の中にドロップしてください。きれいに嵌めこまれます(うまくいかなかったら、上下左右に位置を微調整してみてください)。
3.「Built-in」→「Text」→「join」
Built-inは、標準で組み込み済みの部品です。「Text」は、テキストを操作するためのものがまとめられています。その中から「join」をドラッグし、先の「Label1.Text」の右側に連結してください。
このjoinは、2つのテキストを1つにまとめるためのものです。これを配置すると、2つの凹みのある部品が配置されます。この2つのヘコミに、それぞれのテキストの部品をはめ込むわけです。
4.「Built-in」→「Text」→「text」
テキストの部品です。これをドラッグし、「join」の左側のヘコミにはめ込んでください。そして「text」というボールド部分をクリックし、「Hello,」と書き換えてください。
5.「My Blocks」→「TextBox1」→「TextBox1.Text」
Text1のテキストを示す部品です。これを、先の「join」の右側のヘコミにはめ込みます。これで、「Hello,」というテキストとTextBox1のTextの値を1つにつなげて、Label1のTextに設定する、という処理ができあがりました。
(※なお、場合によっては、セキュリティの警告ダイアログが現れるかも知れません。この場合は、信頼して実行してください)
このブロック・エディタは、左側に「Built-in」「My Blocks」といったタブがあり、右側になにもないエリアが表示されます。「Built-in」「My Blocks」が、利用可能な部品(ブロック)を一覧表示するものです。ここから使いたいブロックを選択し、右側のエリアに配置して並べていきます。では、順にやっていきましょう。
1.「My Blocks」→「Button1」→「Button1.Click」
My Blocksには、GUIに配置した部品の名前が表示されます。ここから「Button1」を選択すると、右側にButton1に用意されている部品がポップアップして現れます。その一番上にある「Button1.Click」という部品をドラッグして、空きスペースにドロップしてください。
これは、Button1のボタンをクリックしたときに実行する処理を作るためのものです。この部品に、実行したいブロックをハメ込んでいきます。
2.「My Blocks」→「Label1」→「set Label1.Text to」
今度は、「Label1」にある「Label1.Text」というのを配置します。これは2種類あります。前後に小さく「set」「to」と表示されているものは、Textの値を変更するための部品です。
この部品をドラッグし、先に配置した「Button1.Click」のくぼみ(中央の凹んだ部分)の中にドロップしてください。きれいに嵌めこまれます(うまくいかなかったら、上下左右に位置を微調整してみてください)。
3.「Built-in」→「Text」→「join」
Built-inは、標準で組み込み済みの部品です。「Text」は、テキストを操作するためのものがまとめられています。その中から「join」をドラッグし、先の「Label1.Text」の右側に連結してください。
このjoinは、2つのテキストを1つにまとめるためのものです。これを配置すると、2つの凹みのある部品が配置されます。この2つのヘコミに、それぞれのテキストの部品をはめ込むわけです。
4.「Built-in」→「Text」→「text」
テキストの部品です。これをドラッグし、「join」の左側のヘコミにはめ込んでください。そして「text」というボールド部分をクリックし、「Hello,」と書き換えてください。
5.「My Blocks」→「TextBox1」→「TextBox1.Text」
Text1のテキストを示す部品です。これを、先の「join」の右側のヘコミにはめ込みます。これで、「Hello,」というテキストとTextBox1のTextの値を1つにつなげて、Label1のTextに設定する、という処理ができあがりました。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「App InventorによるAndroid開発入門」に戻る