第6回講義資料

コンピュータと論理A
第6回 2015年5月20日
App Inventorによる
Androidアプリ開発方法を学ぶ
1
今回の授業内容
•
•
•
•
•
•
スマートフォンのアプリ開発とは
素材を用意する
App Inventor2でおみくじを作る
エミュレータで実行する
実機で実行する
おみくじを改良する
2
スマートフォンのアプリ開発とは
3
スマートフォンのアプリ開発の
魅力
• 通話，GPS，カメラといった，スマートフォン
ならではの機能
• 傾き・加速度・明るさ・圧力・温度などの
各種センサ
• 優れた携帯性
• 容易な操作性
これらを活かしたアプリを制作可能
作品を公開し評価される「場」がある
4
スマートフォン用アプリの
開発方法
• ウェブアプリ
– iPhone/Android共通
• JavaScript
• ネイティブアプリ
– iPhone
• Objective-C
– Android
• Java
• App Inventor
5
アップ
インベンター
App Inventorによる開発の特徴
• ソースコードを一切書かない
• Webブラウザ上で作成（要ネット環境）
– Chrome○／Firefox○／IE×
• 「デザイナ」で画面を作る
「ブロックエディタ」で動作を決める
だけ
• もちろんつくったアプリは実機で動かせる
• 自分のウェブサイトで公開（配布）することも
GooglePlayで公開することも可能
6
Javaのプログラム（ソースコード）の
例：おみくじ
package com.example.pazzle;
import
import
import
import
import
import
import
import
import
import
import
import
import
case 4:
text ="大凶";
break;
default :
text = "凶";
break;
}
myTextView.setText(text);
android.os.Bundle;
android.annotation.SuppressLint;
android.app.Activity;
android.view.View;
android.view.Menu;
android.view.MenuItem;
android.widget.Button;
android.widget.TextView;
java.util.Date;
java.util.Random;
java.lang.Integer;
java.lang.String;
android.support.v4.app.NavUtils;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myButton = (Button)findViewById(R.id.button1);
myTextView = (TextView)findViewById(R.id.textView1);
// myButton.setOnClickListener(this);
public class MainActivity extends Activity {
Button myButton;
TextView myTextView;
}
public void changeText(View theButton){
Random rand = new Random();
String text = "test";
switch((int)rand.nextInt() % 5){
case 1:
text = "大吉";
break;
case 2:
text = "中吉";
break;
case 3:
text ="小吉";
break;
public void onClick(View view){
//changeText();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
7
アップ
インベンター
App Inventorでできること
• 基本
– 文字や画像の表示
– 文字の入力やボタン、チェッ
クボックスなどのUIの作成
– 簡単なデータの保存
• メディア
– カメラの起動やフォトギャラ
リーへのアクセス
– 音声ファイルや動画の再生
• アニメーション
– 円や画像のアニメーション
• センサー
• ソーシャル
–
–
–
–
–
電話帳へのアクセス
電話をかける
SMSを送る
ウェブへのアクセス
Twitterへの連携
• その他
–
–
–
–
–
他のAndroidアプリとの連携
バーコードスキャナー
Bluetoothによる通信
音声認識
音声合成
– 加速度センサー
– GPSなどによる位置情報の取得
8
アプリづくりの手順
1. 「デザイナ」で見た目をつくる
2. 「ブロックエディタ」で動きをつくる
3. エミュレータで動作確認を行う
4. スマホまたはタブレットにインストール
して動作確認する
9
素材を用意する
10
画像をダウンロードする
11
画像をダウンロードする
12
画像をダウンロードする
①画像の上で右クリック
②
13
画像をダウンロードする
「omikuji_case」
14
ここからとりあえず3つ選んで
15
同様にダウンロードする
16
ファイル名の変更は不要
17
APP INVENTOR2でおみくじを作る
18
App Inventor2のサイトへ
19
Chromeを起動して
Googleアカウントでログインする
20
21
22
23
24
25
新しいプロジェクトをつくる
26
プロジェクトに名前をつける
今回は「Omikuji」
27
1.「デザイナ」で見た目をつくる
28
コンポーネント
配置した部品一覧
ビューア
アプリの画面
プロパティ
部品の詳細設定
パレット
使える部品一覧
メディア
アプリで使うファイル一覧
29
アプリのタイトルを変える
「おみくじ」
30
Canvasを配置する
31
omikuji_case.pngをアップロードする
32
omikuji_case.pngをアップロードする
33
omikuji_case.pngをアップロードする
34
omikuji_case.pngをアップロードする
35
omikuji_case.pngをアップロードする
36
Canvas1のBackgruondImageに
omikuji_case.pngを設定する
37
Canvas1のBackgruondImageに
omikuji_case.pngを設定する
38
Iconにomikuji_case.pngを設定する
39
続いて他の画像も同様にアップロードする
40
続いて他の画像も同様にアップロードする
41
続いて他の画像も同様にアップロードする
42
「ブロックエディタ」を起動する
43
2. ブロックエディタで動きをつくる
44
キャンバスがクリックされたら
45
キャンバスがクリックされたら
46
画像を変更する
47
画像を変更する
48
画像を変更する
「omikuji_daikichi.png」
49
エミュレータで実行する
50
アプリを生成してＰＣに保存する
51
エミュレータの中にアプリを移す
52
エミュレータの中にアプリを移す
53
エミュレータの中にアプリを移す
コピー
54
エミュレータの中にアプリを移す
①Windows8_OS
②Windroy
③windroy_root
④data
の順に左の
をクリック
55
エミュレータの中にアプリを移す
②貼り付け
①appをクリック
56
エミュレータを起動する
57
作ったアプリを起動する
58
タップして画像が変われば成功
59
おみくじを改良する
60
2種類の結果が出るようにする
• ランダムな数（＝乱数）を生成する
• 乱数の値によって表示画像を変える
61
ランダムな数（＝乱数）を生成する
62
乱数の値によって表示画像を変える
63
おみくじをさらに改良する
• 3種類以上の結果が出るようにする
• １回引くごとにおみくじ入れの画像に
戻るようにする
64

Download Report