Powered by Google

2012年1月9日月曜日

App Inventor を使用してみる



App Inventorが事前登録なしで使えるようになったそうで
使用(試用)してみることにしました。
googleアカウントお持ちの方であれば誰でもつくることができます。

App Inventor はAndroidアプリをWebベースで作れる、という開発環境です。



まずはセットアップが必要です。
App Inventor SetupでMac/Linux/Windows版をダウンロードできます。

対応OSは
Macintosh (with Intel processor): Mac OS X 10.5, 10.6
Windows: Windows XP, Windows Vista, Windows 7
GNU/Linux: Ubuntu 8+, Debian 5+
と色々対応してそうす。




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



アプリ名を入力してプロジェクトを作成すると上のような画面になります。
まずは画面デザイン作成ですが、Eclipseで開発することと比較すると
超簡単です。

デザインの配置は、画面左の「Palette」にある「Button」などをドラッグ
して真ん中のViewerの上でドロップしてください。



たとえば上のようにButtonとImageを配置してみました。

画面の一番右の「Properties」で各部品を編集します。
たとえば「Viewer」上に配置したボタンをクリックして、「Properties」の中に
ある「Text」という部分が「Text for Button1」になっているので、
それを「miso soup」に変更します。

次に、配置したImageの画像を設定するには「Components」の列の下に
「Media」という項目があるので、ここにアプリで使いたい材料を登録します。
App Inventorでは画像や音声、動画を用いることができます。画像は、「Media」に
あるボタン「Add」を押すと開くアップロード画面で登録します。

登録した画像とImageを関連付けるには
「Components」にある「Image1」をクリックし、右のプロパティにある
「Picture」をクリックしてください。
ここに「Media」で登録した材料が表示されるので、登録した画像を選択して
「OK」ボタンをクリックしてください。

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

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




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

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


アプリを動かすには、エミュレータまたはAndroid端末を使用します。
ブロックエディタにある「New emulator」というボタンをクリックすると、
エミュレータが立ち上がります。

エミュレータが起動したらブロックエディタに戻って「Connect to Device」
をクリックします。すると、アプリを起動する場所を選択する候補が表示されるので、
「emulator」で始まる選択肢をクリックしてください。
次に、表示されている鍵のマークを左から右にスライドさせて、しばらくすると作った
アプリの画面が表示されます。
ここで、「miso soup」と書かれたボタンをクリックすると味噌汁画像が表示されます。




すばらしく簡単にできます。
これはいい。

あれ?これってMarketに公開できない???

0 件のコメント:

コメントを投稿