簡単に android アプリの開発を可能にする app inventor の紹介

はじめに

App Inventor
12/4 横浜ストリームアドバンスト講座【F】
Androidアプリ開発講座 2日目

はじめに

講師紹介
• 東京都市大学上野研究室3年水沼広明
昨年HT-03Aを購入
研究テーマとしてAndroidアプリ開発
エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属

• 東京都市大学上野研究室修士1年馬場智之
Javaの授業の質問対応業務に３年ほど携わる（今年４年目）
研究テーマとしてARGを扱う
エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属

はじめに

App Inventorの紹介

• App Inventorとは
• App Inventorでアプリ開発
• 上野研究室での活用事例

1.App Inventorとは

Google「android」のアプリの開発環境

「誰でも簡単にandroidアプリが作れる」


これまでの開発環境

JDK (Java開発環境)
Eclipse (統合開発環境)
SDK (android端末で動作するためのツール)
Java言語で開発


誰でもアプリが作れるように

http://googleresearch.blogspot.com/2009/07/app-inventor-for-android.html

誰でもモバイルアプリの開発を可能にする。
オープンなandroid開発環境を通してプログラム学習を。
教材やアイディアを共有する。


WYSIWYGプログラミング



What You See Is What You Get
(見たままが得られる)

例：HTMLエディター「Dreamweaver」



ボタンを押す

カチッ音が鳴る

パズルのような部品でプログラムを構築


App Inventorを使うには

https://services.google.com/fb/forms/appinventorinterest/


App Inventorを使うには

数日から数週間で利用可能に


アプリを実機で動かせる

作ったアプリはUSBケーブルやQRコードで取り込める


広がるandroidアプリ市場

一方でiPhoneアプリ数：20万以上
「App Inventor」でアプリ市場は広がる？


広がるandroidアプリ市場

アプリを自分で作る／他のユーザーへの公開可能

iPhoneアプリの市場とは違った展開


動作環境

・「デザイナーウィンドウ」
・「ブロックエディター」
・「エミュレータ」or「android端末」


デザイナーウィンドウ



ウェブアプリケーション (インターネットブラウザで起動)
必要なコンポーネントをセットする


コンポーネント一覧

コンポーネント:
「ボタン」や「ラベル(文字)」
「twitter」などの部品があらかじめ用意


ターゲットフィールド

部品を
ドラッグ＆ドロップ
で配置していく


選択されたコンポーネント

コンポーネントを追加
ここに表示


ブロックエディタ



アプレットを起動
アプリの動作についてなどをこの画面で操作



ドラッグ＆ドロップ
で部品を連結していく


エミュレータ(or実機)


エミュレータ(or実機) アプリの動作を確認

2.App Inventorでアプリ開発


App Inventorでandroidアプリを作る


チュートリアル


5分で出来る：「猫アプリ」

素材

ボタンを押す

音が鳴る



にゃあ


「Twitterクライアント」をつくる

「Twitter」のコンポーネント
が最初から配備



******
******
ConsumerKey
ConsumerSecret
を取得し入力するだけ


マッシュアップ

既存のウェブサービスを組み合わせて、新しいものを作る


CDK(Component Developer Kit)

計画中...

・facebook
・Dropbox
などと連携が可能に?


「観光マップアプリ」をつくる


「MapTour」横浜観光アプリをつくる


「MapTour」横浜観光アプリをつくる

Googleマップアプリに制御
を移している


アプリ連携

Googleマップアプリに制御
を移している


上野研究室での取り組み

「モバイルツールを活用したARGの研究」

ARG＝
Alternative Reality Game＝
代替現実ゲーム

“現実を舞台にした遊び”
インターネット、携帯電話
テレビ、ラジオ・・・

ARGのおこり
2001 The Beast
映画 A.Iのプロモーション目的で
初のARG制作

2004 I Love Bees
ゲームソフト Halo2のプロモーション
Webby Award 受賞

• I Love Bees 2004年8月公開
Halo2のゲームトレイラーに広告
→指定されたサイトは
ハッキングされたかのような表示
→公衆電話のGPS座標と
電話が鳴る時間のリストが秘匿

受話器を取り、
録音された質問に答える
→ストーリーのボイスを聞ける

• 自身が公衆電話を通して
ゲームに「参加」できる
→実際に声優と電話を通じて
ストーリーを作ることができる

私はもう夢中でゲーム世界にのめり込んだ。
あのときは登場人物が本当に実在するように感じ
た。

• ARG作成におけるAndroidの利点

Googleとの密接な連携機能
→Google Mapの地図と位置情報を
制限無く自由に使用可能

スマートフォン向けOSによる自由度

ARGをAndroidで作る
→App Inventorを使用したときの制約

• ゲームデータの管理が複雑・困難
• Google Map上で動作するアプリが作れ
ない
→外部ソフトと連携した方が楽な部分が
ある

横浜のどこかで異変が発生
↓
丘の下、港町というメッセージから山下公園と推定
↓
Androidに山下公園と入力すると、
さらなるヒントと地図が表示
↓
山下公園に行くと、もう一つヒントが
↓
これを組み合わせて回答を入力すると
次は山手方面へ
↓
これを繰り返して、最終的に自分の考えなどを入力させて、最後
に現状のストーリーエンディングを出して終了

• Twitterとの対話式ARG
TwitterにはBOT機能を利用

ユーザとのDM機能によってストーリーを展開
ユーザのDM発信も基本的にプログラム、
たまにクイズなどの答えを要求する

Webページによる
イントロダクション GetTimeLine()
DirextMessage ShowTimelineの結果か
ら地名を抽出して検索
Reserve()
ShowTImelin

Web検索
MapSearch

Twitterを絡めたことによって解決した点

• 「ヒント」によるストーリー保存
→BOTに特定の答えに対応して
特定のヒントを投げさせれば
それでストーリーが保存されたに等しい

• Map機能の補助目的化
→Twitterのpostから地名を抽出して検索する
デフォルトコンポーネントの機能のみで
地図アプリのような動作を実現

• 使用しているコンポーネント

Status… 状態遍歴の表示用ラベル

TwitterDisplay… Twitter検索結果の表示
今はWeb検索ログテストも兼用

GoogleMap… GoogleMapを表示
ActivityStartar
要素はListPicker1に格納

• Blockの動作
• Screen1.Initialise
初期動作用ブロック、今回は無動作
• TwitterButton1.Click
OAuthに認証し、
認証したアカウントが受信した
DMを取得、取得後は
Twitter1.DirectMessageReseivedへ

• Twitter1.DirectMessageReseive
d
botnameで指定したアカウントの書
き込みを検索する
（今回はfryﬁsh_bot）
検索後、地名データを示す””の間で切
り分け
そこをヒントとして表示し
ListPicker1に格納

VarにBotnameの要素が入っている場合、
TextにTwitterDisplayに表示する内容と
地域情報のデータを編集する

• MapSearch
addressにListPciker1で選択された項目を加
え
GoogleMapのActivityに入力する
残りはgooglemapのWebで処理

実制作時間・・・10時間ほど
（ただしその半分程度は情報収集・整理）

今後の予定・・・LocationSensorの組み込みで
DMを自動送信できる機能
YoutubeやWeb検索にも対応

ARGにおける「連携」
App Inventorが持つコンポーネントによって、
「Twitter」と「GoogleMap」の連携をサポー
トできた。

将来的に、Android環境で色々な連携要素が出
てきたときにも、App Inventorを用いていろい


3.まとめ

3.まとめ

誰もがアプリを作る

アプリを自分で作る／他のユーザーへの公開可能

iPhoneアプリの市場とは違った展開

3.まとめ

今後の展望

CDK(Component Developer Kit)の拡張
マッシュアップの拡大

3.まとめ

プロトタイプ

アイディアをすぐに形に出来る

3.まとめ

プロトタイプ
横浜ストリーム上野研アドバンスト講座
プロトタイプを用いたデザイン手法

12/11(土) ウェブサイトのプロトタイプ
12/18 (土) モバイルアプリのプロトタイプ

プロトタイプとは何か／プロトタイプの制作
ワークショップ形式でグループワーク

簡単に android アプリの開発を可能にする app inventor の紹介

Recommended

Recommended

More Related Content

Similar to 簡単に android アプリの開発を可能にする app inventor の紹介

Similar to 簡単に android アプリの開発を可能にする app inventor の紹介 (20)

More from Tokyo City University, Ueno Lab.

More from Tokyo City University, Ueno Lab. (11)

Recently uploaded

Recently uploaded (6)

簡単に android アプリの開発を可能にする app inventor の紹介