スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

App Inventor for Androidを始めよう!使い方その2

はじめに


前回の記事では、App Inventorを使用するための準備を行いました。今回は、実際にプロジェクトを作成してエミュレータ上でアプリを実行してみます。




App Inventor プロジェクトの新規作成


App Inventorのトップページにはいろいろな情報が掲載されています。チュートリアルやFAQもありますので、かなり参考になります。まずは簡単なサンプルを作成します。最初に画面右上にある「My Projects」をクリックします。


new project

すると以下のような画面が開きますので、「New」ボタンをクリックします。


AppInventor_07.png

以下のようなウィンドウが表示されますので、プロジェクト名を入力します。


AppInventor_08.png

すると以下のようなページに遷移します。これが開発用のページのようです。結構洗練されてますね。この画面はアプリの「GUI」部分を作成するためのもので、画面左側にボタンやテキストボックス等いろいろなパーツが用意されています。基本的には配置したいパーツをマウスでドラッグ&ドロップして、画面中央のアプリ画面に貼付けるだけです。


AppInventor_09.png

今回はシンプルに「ボタンを押したらテキストボックスに文字列を表示する」アプリを作りたいと思います。




GUIの作成


まず、ボタンをアプリ画面に配置します。左上にある「Button」をドラッグ&ドロップしてアプリ画面に持ってきます。すると、アプリ画面にボタンが配置されます。ボタンのプロパティは画面右側に表示されますので、例えばボタンに表示させる文字列を変更させたりできます。ここでは「クリックしよう!」という文字列を表示させます。これらを実行した後の結果は下図のようになります。


AppInventor_20.png

同様の手順でTextBoxも配置していきます。以下のようになります。


AppInventor_21.png

これで今回のGUI作成は終わりです。簡単ですね。




ロジックの作成


次にロジックの作成を行います。ここがApp Inventorのキモですね。まずはApp Inventorのページにある「Open the Blocks Editor」ボタンをクリックします(下図)。


AppInventor_22.png

すると以下のような画面が表示されますので、「開く」をクリックします。なお、これはFirefox 3.6での場合で、Safariなど他のブラウザで行う場合はこの限りではないかもしれません。


AppInventor_23.png

ファイルがダウンロードされ、実行されますが、そのとき以下のような警告が表示されると思いますので、「許可」ボタンをクリックします(私の環境では、許可ボタンのクリックが遅くなるとうまくBlocks Editorが開けないことがありましたので、早めにクリックするのが吉かも)。


AppInventor_24.png

うまくいくと、これでBlocks Editorが開きます。以下のような画面です。App Inventorのページに比べるとちゃちい気がしませんか?


AppInventor_25.png

画面の簡単な説明としては、左上の「Built-in」は動作を規定するブロック(if文などの制御ロジックや、テキスト設定など)、「My Blocks」はGUIとして自分が配置したパーツのブロックを切り替えるためのボタンです。Blocks Editorを開いた段階では「Built-in」のほうが選択されているようで、DefinitionやTextなどのボタンが画面左に並んでいます。


まずはGUI生成のときに作った「ここをクリック!」ボタンが押されたときの挙動を拾うための設定します。Blocks Editorの「My Blocks」ボタンをクリックします。すると以下のようなボタンが画面左に表示されます。


AppInventor_26.png

ここで「Button1」ボタンをクリックします。すると、以下のようにButton1に関連するブロックが表示されます。


AppInventor_27.png

今回はボタンクリックなので、一番上のブロック「Button1.Click」をドラッグ&ドロップして画面上に配置します(下図)。


AppInventor_28.png

次に、ボタンがクリックされたときの挙動を設定してきます。今回はボタンが押されたらテキストボックスにテキストを表示するので、まずはTextBox1のボタンをクリックします(下図)。先ほどと同じようにTextBox1に関連するブロックが表示されます。


AppInventor_29.png

TextBox1にテキストを設定するためのブロックは「set TextBox1.Text to」です。これを先ほどと同じ要領でドラッグ&ドロップしていきます。ここで注意する点は、先ほどは位置した「Button1.Click」ブロックのに配置するということです(下図のような感じ)。


AppInventor_30.png

これで「Button1がClickされたら、TextBox1.Textをsetする」という動作が設定できました。後は設定するテキストですが、これは「My Blocks」のほうではなく「Built-in」のほうにブロックがありますので、「Built-in」ボタンをクリックします(下図)。


AppInventor_31.png

ここで「Text」をクリックして、「text text」というブロックをドラッグ&ドロップします。接続先は「set TextBox1.Text to」です(下図)。


AppInventor_32.png
AppInventor_33.png

後は、少し大きめのテキストで「Text」と書いてある部分をクリックして、任意の文字列を入力して終わりです。今回は「Clicked!」と入力します(下図)。


AppInventor_34.png

これで終わりです。少し手順がなくなりましたが、慣れると簡単かと思います。




エミュレータで実行


まずはエミュレータプログラムを起動します。Macの場合は「アプリケーション→AppInventor→commands for AppInventor」フォルダにある「run-emulator」を実行します。ターミナルが起動して、その後しばらくしてからエミュレータが起動します。結構時間がかかります。


注意:私が試した所によると、どうやらエミュレータを起動してからBlocks Editorを起動しないとうまくエミュレータと連携できないみたいです。エミュレータを起動する際はいったんBlocks Editorを閉じてからエミュレータ起動→Blocks Editor再び起動、すると良さそうです。


AppInventor_35.png

起動してくると途中で以下のようなエラー画面が表示されることがありますが、とりあえず「Force Close」押しておけばオッケーそうです。


AppInventor_36.png

エミュレータが起動したら、Blocks EditorのConnect to phoneボタンをクリックしてエミュレータと接続します(下図)。


AppInventor_37.png

しばらく待っていると、エミュレータ上でアプリが実行されます。今回作ったアプリの実行結果は以下。


AppInventor_39.png

日本語は文字化けしてしまっていますね。App Inventorでは日本語は使用しない方が良さそうです。アプリ上でボタンをクリックすると、テキストボックスに「Clicked!」というテキストが表示されます。


AppInventor_40.png

これで今回のアプリの開発は完了です。





おわりに


今回はとても簡単なアプリを開発してみました。App Inventorはまだベータ版なので、いろいろ不具合などあるかもしれませんが、アプローチとしては面白いのではないでしょうか。また、今回の記事はいろいろ私が試行錯誤した結果のものですので、正規の手順と違う部分もあるかもしれませんので、ご了承ください。個人的にはブロックを配置するだけでコーディングの代わりになる部分は興味深い体験でした!





テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

sepiablue

Author:sepiablue
組込みソフトウェアエンジニアやってます。普段はC言語使い。
趣味はプログラミング、京都旅行で神社巡り。
AndroidアプリをMacで開発中。

最新記事
スポンサードリンク
スポンサードリンク
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。