スポンサーサイト

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

簡単にAndroidアプリが作れるツール #3

「App Inventor for Android」実際のアプリの作り方です。
初めの記事で動画になっていた 猫アプリ を作ります。


まずは、こちらのサイトで猫の画像と音声をダウンロード。
・kitty picture
・meow sound

NEW Project作成
こちらにアクセスしてログインしてください。
承諾はagreeしましょう。
右上の方に「My Projects」というリンクがあるのでクリック。
以下のような画面になります。
(10_12_27) inventor1

レイアウトを作成
左上のボタン「New」をクリックしてプロジェクト名を入力します。
ここでは「HelloPurr」としています。
左のPaletteから「Button」を右のViewerへドラッグ&ドロップします。
(10_12_27) inventor2
こんな感じ

中央にある「Media」という所で、「Add」ボタンを押して、先ほどDLした猫の画像をUP
(10_12_27) inventor2.5


さらに右側の「Properties」にて「Image」のテキストボックスをクリックして、UPした猫画像を選択
(10_12_27) inventor3
こんな感じ

右下の「Text」のテキストボックスに書かれている文字「Text for Button1」は消します
何だかボタンが非常に小さくなってしまいますが、このまま進めましょう。
(10_12_27) inventor4


Android端末と連動
右上の「Open the Blocks Editor」をクリック
警告が出てきたらOKを押す。JAVAのロゴ出てきて、しばらく時間がかかるのでじっと待つ。
(10_12_27) inventor5

下記のテキストボックスが出てきたら「Use a phone」を選ぶ。
(10_12_27) inventor6

Android端末をPCに繋げていない場合は繋げる
右上の「 Connect to device」という灰色のボタンを押す
(10_12_27) inventor6.5
しばらくすると、Android端末に、猫の画像が現れる!


残りのレイアウトを仕上げる
最初に立ち上げたブラウザ画面に戻って、Paletteから「Lable」を「Viewer」へドラッグ&ドロップ。
右下の「Text」に「Pet the Kitty」などと入力したり、テキトーに色を変えてみる
(10_12_27) inventor7

Paletteから「Media」をクリックして、「Sound」を「Viewer」にドラッグ&ドロップ
中央下にある「Media」にある「Add」ボタンをクリックして、最初にDLしたmp3ファイルをUP
右の「Source」のテキストボックスでUPしたmp3ファイルを選択する
(10_12_27) inventor8

アルゴリズム作成
先ほどのJavaの画面に戻って「My Blocks」という所をクリック
「Button1」をクリック
下記のパーツをドラッグ&ドロップ
(10_12_27) inventor9

次に「Sound1」をクリックして、下記のパーツをドラッグ&ドロップ
(10_12_27) inventor10

ジグソーパズルを組む感じで合わせる。カチッと音が鳴ります。
これで出来上がり!
Android端末上で、猫にタッチするとニャーと鳴きます。


Android端末だけで動くアプリ作成
再びブラウザに戻って、右上の「Package for Phone」をクリックしてさらに、「Download to Connected Phone」をクリックすると、Android端末の中にアイコンができてアプリ一丁あがり!です


ちょっと長くなってしまいましたが、以上がプログラミングのメモでした。
スポンサーサイト

comment

管理者にだけ表示を許可する

09 | 2017/10 | 11
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
プロフィール

エレクトリックバカ

Author:エレクトリックバカ

ポケコンでプログラミングに目覚め、PICマイコンで電子工作に希望を抱き、来たるべきUGDの時代を夢見て眠る。
そんな うだつが上がらないサラリーメン。
先生、電子工作はおやつに入りますか?




Electric Baka

最新記事
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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