Vol de Nuit ~夜間飛行~

App Inventor2でアプリを作る中年オヤジの無謀な挑戦日記

App Inventor2 でAndroidのアプリを作ってみる 5. とりあえず動かそう(1)

まずは簡単なアプリをさっそく作ってみよう。

1. AI2にログインします。

  http://ai2.appinventor.mit.edu/

  ブックマークしときましょう。

2.最初の画面が立ち上がったら、

 左上の”Start New Project"で新しいプロジェクトを作成f:id:spice_jp:20160514013952j:plain

 

3.プロジェクト名の入力を求められるので、

f:id:spice_jp:20160514014444j:plain

適当なプロジェクト名を入力してOKします。

これから、ボタンを押すと”Hello”と表示する簡単なアプリを作成するので、上図例では”Test_Hello"としました。

4.すると、下図の画面になります。

f:id:spice_jp:20160514014925j:plain

これがアプリの見た目を作成していく”Design”画面になります。

5.左側のメニューで”Button”を選択し、下図のようにドラッグします。

f:id:spice_jp:20160514020255j:plain

すると、

f:id:spice_jp:20160514020458j:plain

ボタンが、スマホタブレットの画面をあらわすScreen1に置かれます。

ボタンには”Text for Button1"が表示されているので変更しましょう。

画面右側にある、Propertiesメニューにある”Text"で変更できます。例えば、”Push!”としてみましょう。            

f:id:spice_jp:20160514021730j:plain

 6. 同じように、左側のメニューで”Label”をドラッグして、先ほどのボタンの下に配置します。

f:id:spice_jp:20160514022516j:plain

これでボタンと表示を行うためのラベルの設置が終わりました。

7.ここまでの作業の確認としてスマホでちゃんと表示されるか見てみましょう。

インストールしたエミュレータを起動しましょう。

エミュレータは、

C:\Program Files (x86)\AppInventor\commands-for-appinventorにあるaistater です。

クリックして起動しましょう。

8.正常に起動するとWindowsの場合、下図のようなウインドが起動します。

f:id:spice_jp:20160514023354j:plain

このウインドウはそのままにしておくか、最小化して置く必要があります。

 9.AI2の上部メニューにある”Connect"をクリックして、プルダウンメニューから”Emulator”を選択します。

f:id:spice_jp:20160514023922j:plain

10.少し時間がかかりますが待っていると、エミュレータの画面が立ち上がります。

f:id:spice_jp:20160514024607j:plain

AI2の画面で配置したように表示されていますか?

ボタンは押せますか?(押しても何も起こりませんが)

正しく表示されていれば、ここまでの作業は成功です。

なお、通信状況が悪い場合(MITサーバーが込み合ってる場合も含めて)や、aistaterが2重に起動されているなどの場合等で、エミュレータの起動に失敗することがしばしばあります。

その場合”Connect”のHard Restを選択し、あわせてAI2をログアウトして、再ログインすることで解決できると思われます。

11.ボタンやラベルの名前は、Conponentsで変更できます。あとあと作業がやり易いように、分かりやすい名前に変更しておきましょう。

f:id:spice_jp:20160514031219j:plain

消去もこの画面で行います。

残念なことに部品のコピペはまだ実装されていないようです。(知らないだけかも)

 

後半へ続く・・・

App Inventor2 でAndroidのアプリを作ってみる 4.エミュレーターのインストール

AI2で作業をする場合、作成過程の動作が確認できる環境があったほうが効率が良い。

Androidスマホタブレットを使用して作成途中のアプリの動作を確認しても良いけど、めんどくさいのでエミュレータをPCにインストールしとこう。

手順

1.エミュレータのページに移動

http://appinventor.mit.edu/explore/ai2/setup-emulator.html

2.下図の画面になるので、使用しているOSを選んでクリック

f:id:spice_jp:20160514005450j:plain

3.”Download the emulator"をクリック

f:id:spice_jp:20160514010040j:plain

4.エミュレータのダウンロードファイルは80MBほどあるので、落とすのに数分かかるかもしれません。

5.ダウンロードが終了したら、ファイルを実行してインストールします。

6.インストール場所は自動的に、Windows7の64bitの場合、

  C:\Program Files (x86)\AppInventor

になるようです。

7.エミュレータを起動するファイルは、

  C:\Program Files (x86)\AppInventor\commands-for-appinventor\aistater

ですので、ショートカットをディスクトップに貼り付けておきましょう。

 

一応、App Inventor2の設定はこれで終わりです。

次回から、アプリの作成を行っていきます。

 

App Inventor2 でAndroidのアプリを作ってみる 3.ログイン方法

App Inventor2へのログイン方法

まずApp Inventor2(以下AI2)にログインします。

http://appinventor.mit.edu/explore/ へ行き、右上のCreate Apps!をクリックしましょう。

f:id:spice_jp:20160513234108j:plain

すると、Googleのログイン画面になるので、

 

 f:id:spice_jp:20160513235232j:plain

用意したログインアカウントでLoginします。

ログインに成功すると、AI2とGoogleアカウントの同期についての質問には「許可する」、アンケートの依頼の質問には「Survey Later」をクリックすると下記の画面になります。これがAI2の最初の画面です。

f:id:spice_jp:20160514001615j:plain

AI2の本体の設定はここまで。

App Inventor2 でAndroidのアプリを作ってみる 2.準備 必要なもの

App Inventor2を使い始めるにあたって必要な物は以下のとおりです。

Googleアカウント

Windows7以上、iOSLinuxのどれかで動作するPC

JAVAが動作すること

・インターネット環境 

ChromeFireFoxブラウザを推奨します

Androidで動作するスマホあるいはタブレット

・意欲 

 

App Inventor2はブラウザ上で操作します。

ログインはGoogleアカウントで管理されており、データは開発元のMIT(マサチューセッツ工科大)のサーバーに自動的に保存されます。

App Inventor2 でAndroidのアプリを作ってみる 1.ことの始まり

前々からうちの娘(中3)が、プログラミングをやってみたいと言っていたので、何か良い方法がないか考えていた。

参考文献が多いからといって、いきなりC言語だとハードルが高いだろうしなぁと思って色々ググっていたら、MITLabでApp Inventor2というものを発見した。

どうやらWindowsPC上でAndroidのアプリをブロックを組み上げる方法で作成できるらしい。

エミュレータもあって、PC上で動作確認できるのも楽しいし、出来上がったアプリを公開することもできる。

とりあえず手始めにいいかなとインストールして触ってみたら、私がはまってしまったww

ちなみにこのツールは無料です。

昔々Linux上でTCL/TKを使ってプログラミングの真似事をやっていたことを思い出した。

というわけで、App Inventor2に関する諸々を覚え書きも兼ねてちょっと書いていきたいと思います。

 

 

 

初めまして

初めまして。

とある小さい商社で技術営業しているオヤジの日記です。

以前は天体観測などの話題を中心に10年位前にブログやってたんですが、久々に書こうかなと突然思い立ちました。

基本的に、深夜に更新するのでVol de Nuit 夜間飛行・・