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

App Inventor12/4 横浜ストリームアドバンスト講座【F】

Androidアプリ開発講座 2日目

はじめに

講師紹介•東京都市大学上野研究室3年水沼広明

•東京都市大学上野研究室修士1年馬場智之

昨年HT-03Aを購入研究テーマとしてAndroidアプリ開発エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属

Javaの授業の質問対応業務に３年ほど携わる（今年４年目）研究テーマとしてARGを扱うエンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属

はじめに

App Inventorの紹介

•App Inventorとは

•App Inventorでアプリ開発

•上野研究室での活用事例

はじめに

1.App InventorとはGoogle「android」のアプリの開発環境

1.App Inventorとは

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


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

これまでの開発環境


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

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

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




WYSIWYGプログラミング



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

例：HTMLエディター「Dreamweaver」

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



ボタンを押す

音が鳴るカチッ


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

App Inventorを使うには




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

App Inventorを使うには


アプリを実機で動かせる

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


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

広がるandroidアプリ市場


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

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

広がるandroidアプリ市場


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

動作環境


デザイナーウィンドウ


デザイナーウィンドウ

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


デザイナーウィンドウコンポーネント一覧

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


デザイナーウィンドウターゲットフィールド

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


デザイナーウィンドウ選択されたコンポーネント

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


ブロックエディタ



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



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


エミュレータ(or実機)


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

2.App Inventorでアプリ開発


App Inventorでandroidアプリを作る

チュートリアル


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

ボタンを押す

音が鳴る

素材


にゃあ



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


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



ConsumerKeyConsumerSecretを取得し入力するだけ

************

マッシュアップ


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

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に山下公園と入力すると、さらなるヒントと地図が表示↓山下公園に行くと、もう一つヒントが↓これを組み合わせて回答を入力すると次は山手方面へ↓これを繰り返して、最終的に自分の考えなどを入力させて、最後に現状のストーリーエンディングを出して終了

• TwitterARGViewer（仮）

　

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

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

Webページによる

イントロダクション GetTimeLine()DirextMessageReserve()

ShowTImelin

ShowTimelineの結果から地名を抽出して検索

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.DirectMessageReseived

botnameで指定したアカウントの書き込みを検索する（今回はfryfish_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アプリの市場とは違った展開

今後の展望

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

3.まとめ

プロトタイプ

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

3.まとめ

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

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

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

3.まとめ

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

Education