12月4日(土) 横浜ストリームアドバンスト講座 【F】Androidアプリ開発講座 2日目

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

2. はじめに
講師紹介
• 東京都市大学上野研究室3年 水沼広明
昨年HT-03Aを購入
研究テーマとしてAndroidアプリ開発
エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属
• 東京都市大学上野研究室修士1年 馬場智之
Javaの授業の質問対応業務に３年ほど携わる（今年４年目）
研究テーマとしてARGを扱う
エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属

3. はじめに
App Inventorの紹介
• App Inventorとは
• App Inventorでアプリ開発
• 上野研究室での活用事例

4. 1.App Inventorとは
1.App Inventorとは
Google「android」のアプリの開発環境
「誰でも簡単にandroidアプリが作れる」

5. 1.App Inventorとは
これまでの開発環境
JDK (Java開発環境)
Eclipse (統合開発環境)
SDK (android端末で動作するためのツール)
Java言語で開発

6. 1.App Inventorとは
誰でもアプリが作れるように
http://googleresearch.blogspot.com/2009/07/app-inventor-for-android.html
誰でもモバイルアプリの開発を可能にする。
オープンなandroid開発環境を通してプログラム学習を。
教材やアイディアを共有する。

7. 1.App Inventorとは
WYSIWYGプログラミング

8. 1.App Inventorとは
WYSIWYGプログラミング
What You See Is What You Get
(見たままが得られる)
例：HTMLエディター 「Dreamweaver」

9. 1.App Inventorとは
WYSIWYGプログラミング
ボタンを押す
カチッ 音が鳴る
パズルのような部品でプログラムを構築

10. 1.App Inventorとは
App Inventorを使うには
https://services.google.com/fb/forms/appinventorinterest/

11. 1.App Inventorとは
App Inventorを使うには
数日から数週間で利用可能に

12. 1.App Inventorとは
アプリを実機で動かせる
作ったアプリはUSBケーブルやQRコードで取り込める

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

14. 1.App Inventorとは
広がるandroidアプリ市場
アプリを自分で作る／他のユーザーへの公開可能
iPhoneアプリの市場とは違った展開

15. 1.App Inventorとは
動作環境
・「デザイナーウィンドウ」
・「ブロックエディター」
・「エミュレータ」or「android端末」

16. 1.App Inventorとは
デザイナーウィンドウ

17. 1.App Inventorとは
デザイナーウィンドウ
ウェブアプリケーション (インターネットブラウザで起動)
必要なコンポーネントをセットする

18. 1.App Inventorとは
デザイナーウィンドウ
コンポーネント一覧
コンポーネント:
「ボタン」や「ラベル(文字)」
「twitter」などの部品があらかじめ用意

19. 1.App Inventorとは
デザイナーウィンドウ
ターゲットフィールド
部品を
ドラッグ＆ドロップ
で配置していく

20. 1.App Inventorとは
デザイナーウィンドウ
選択されたコンポーネント
コンポーネントを追加
ここに表示

21. 1.App Inventorとは
ブロックエディタ

22. 1.App Inventorとは
ブロックエディタ
アプレットを起動
アプリの動作についてなどをこの画面で操作

23. 1.App Inventorとは
ブロックエディタ
ドラッグ＆ドロップ
で部品を連結していく

24. 1.App Inventorとは
エミュレータ(or実機)

25. 1.App Inventorとは
エミュレータ(or実機) アプリの動作を確認

26. 2.App Inventorでアプリ開発
2.App Inventorでアプリ開発
App Inventorでandroidアプリを作る

27. 2.App Inventorでアプリ開発
チュートリアル

28. 2.App Inventorでアプリ開発
5分で出来る：「猫アプリ」
素材
ボタンを押す
音が鳴る

29. 2.App Inventorでアプリ開発
5分で出来る：「猫アプリ」

30. 2.App Inventorでアプリ開発
5分で出来る：「猫アプリ」
にゃあ

31. 2.App Inventorでアプリ開発
「Twitterクライアント」をつくる
「Twitter」のコンポーネント
が最初から配備

32. 2.App Inventorでアプリ開発
「Twitterクライアント」をつくる
******
******
ConsumerKey
ConsumerSecret
を取得し入力するだけ

33. 2.App Inventorでアプリ開発
「Twitterクライアント」をつくる

34. 2.App Inventorでアプリ開発
マッシュアップ
既存のウェブサービスを組み合わせて、新しいものを作る

35. 2.App Inventorでアプリ開発
CDK(Component Developer Kit)
計画中...
・facebook
・Dropbox
などと連携が可能に?

36. 2.App Inventorでアプリ開発
「観光マップアプリ」をつくる

37. 2.App Inventorでアプリ開発
「観光マップアプリ」をつくる
「MapTour」横浜観光アプリをつくる

38. 2.App Inventorでアプリ開発
「観光マップアプリ」をつくる
「MapTour」横浜観光アプリをつくる

39. 2.App Inventorでアプリ開発
「観光マップアプリ」をつくる
「MapTour」横浜観光アプリをつくる
Googleマップアプリに制御
を移している

40. 2.App Inventorでアプリ開発
アプリ連携
Googleマップアプリに制御
を移している

41. 2.App Inventorでアプリ開発
上野研究室での取り組み
「モバイルツールを活用したARGの研究」

42. ARG＝
Alternative Reality Game＝
代替現実ゲーム
“現実を舞台にした遊び”
インターネット、携帯電話
テレビ、ラジオ・・・

43. ARGのおこり
2001 The Beast
映画 A.Iのプロモーション目的で
初のARG制作
2004 I Love Bees
ゲームソフト Halo2のプロモーション
Webby Award 受賞

44. • I Love Bees 2004年8月公開
Halo2のゲームトレイラーに広告
→指定されたサイトは
ハッキングされたかのような表示
→公衆電話のGPS座標と
電話が鳴る時間のリストが秘匿
受話器を取り、
録音された質問に答える
→ストーリーのボイスを聞ける

45. • 自身が公衆電話を通して
ゲームに「参加」できる
→実際に声優と電話を通じて
ストーリーを作ることができる
私はもう夢中でゲーム世界にのめり込んだ。
あのときは登場人物が本当に実在するように感じ
た。

46. • ARG作成におけるAndroidの利点
Googleとの密接な連携機能
→Google Mapの地図と位置情報を
制限無く自由に使用可能
スマートフォン向けOSによる自由度

47. ARGをAndroidで作る
→App Inventorを使用したときの制約
• ゲームデータの管理が複雑・困難
• Google Map上で動作するアプリが作れ
ない
→外部ソフトと連携した方が楽な部分が
ある

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

49. • TwitterARGViewer（仮）

50. • Twitterとの対話式ARG
TwitterにはBOT機能を利用
ユーザとのDM機能によってストーリーを展開
ユーザのDM発信も基本的にプログラム、
たまにクイズなどの答えを要求する

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

52. Twitterを絡めたことによって解決した点
• 「ヒント」によるストーリー保存
→BOTに特定の答えに対応して
特定のヒントを投げさせれば
それでストーリーが保存されたに等しい
• Map機能の補助目的化
→Twitterのpostから地名を抽出して検索する
デフォルトコンポーネントの機能のみで
地図アプリのような動作を実現

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

55. Status… 状態遍歴の表示用ラベル
TwitterDisplay… Twitter検索結果の表示
今はWeb検索ログテストも兼用
GoogleMap… GoogleMapを表示
ActivityStartar
要素はListPicker1に格納

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

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

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

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

60. 実制作時間・・・10時間ほど
（ただしその半分程度は情報収集・整理）
今後の予定・・・LocationSensorの組み込みで
DMを自動送信できる機能
YoutubeやWeb検索にも対応

61. ARGにおける「連携」
App Inventorが持つコンポーネントによって、
「Twitter」と「GoogleMap」の連携をサポー
トできた。
将来的に、Android環境で色々な連携要素が出
てきたときにも、App Inventorを用いていろい

62. 1.App Inventorとは
3.まとめ

63. 3.まとめ
誰もがアプリを作る
アプリを自分で作る／他のユーザーへの公開可能
iPhoneアプリの市場とは違った展開

64. 3.まとめ
今後の展望
CDK(Component Developer Kit)の拡張
マッシュアップの拡大

65. 3.まとめ
プロトタイプ
アイディアをすぐに形に出来る

66. 3.まとめ
プロトタイプ
横浜ストリーム 上野研 アドバンスト講座
プロトタイプ を用いたデザイン手法
12/11(土) ウェブサイトのプロトタイプ
12/18 (土) モバイルアプリのプロトタイプ
プロトタイプとは何か／プロトタイプの制作
ワークショップ形式でグループワーク