簡単に android アプリの開発を可能にする app inventor の紹介
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,109 views

12月4日(土)

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

Statistics

Views

Total Views
3,109
Views on SlideShare
3,104
Embed Views
5

Actions

Likes
2
Downloads
9
Comments
0

2 Embeds 5

http://ueno-lab.com 4
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • はじめに App Inventor12/4 横浜ストリームアドバンスト講座【F】 Androidアプリ開発講座 2日目
  • はじめに 講師紹介• 東京都市大学上野研究室3年 水沼広明 昨年HT-03Aを購入 研究テーマとしてAndroidアプリ開発 エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属• 東京都市大学上野研究室修士1年 馬場智之 Javaの授業の質問対応業務に3年ほど携わる(今年4年目) 研究テーマとしてARGを扱う エンジニアコミュニティ「日本アンドロイドの会横浜支部」に所属
  • はじめにApp Inventorの紹介• App Inventorとは• App Inventorでアプリ開発• 上野研究室での活用事例
  • 1.App Inventorとは1.App Inventorとは Google「android」のアプリの開発環境 「誰でも簡単にandroidアプリが作れる」
  • 1.App Inventorとはこれまでの開発環境 JDK (Java開発環境) Eclipse (統合開発環境) SDK (android端末で動作するためのツール) Java言語で開発
  • 1.App Inventorとは誰でもアプリが作れるように http://googleresearch.blogspot.com/2009/07/app-inventor-for-android.html 誰でもモバイルアプリの開発を可能にする。 オープンなandroid開発環境を通してプログラム学習を。 教材やアイディアを共有する。
  • 1.App InventorとはWYSIWYGプログラミング
  • 1.App InventorとはWYSIWYGプログラミング What You See Is What You Get (見たままが得られる) 例:HTMLエディター 「Dreamweaver」
  • 1.App InventorとはWYSIWYGプログラミング ボタンを押す カチッ 音が鳴る パズルのような部品でプログラムを構築
  • 1.App InventorとはApp Inventorを使うには https://services.google.com/fb/forms/appinventorinterest/
  • 1.App InventorとはApp Inventorを使うには 数日から数週間で利用可能に
  • 1.App Inventorとは アプリを実機で動かせる作ったアプリはUSBケーブルやQRコードで取り込める
  • 1.App Inventorとは広がるandroidアプリ市場 一方でiPhoneアプリ数:20万以上  「App Inventor」でアプリ市場は広がる?
  • 1.App Inventorとは広がるandroidアプリ市場 アプリを自分で作る/他のユーザーへの公開可能 iPhoneアプリの市場とは違った展開
  • 1.App Inventorとは動作環境 ・「デザイナーウィンドウ」 ・「ブロックエディター」 ・「エミュレータ」or「android端末」
  • 1.App Inventorとはデザイナーウィンドウ
  • 1.App Inventorとはデザイナーウィンドウ ウェブアプリケーション (インターネットブラウザで起動) 必要なコンポーネントをセットする
  • 1.App Inventorとは デザイナーウィンドウコンポーネント一覧 コンポーネント: 「ボタン」や「ラベル(文字)」 「twitter」などの部品があらかじめ用意
  • 1.App Inventorとはデザイナーウィンドウ ターゲットフィールド 部品を ドラッグ&ドロップ で配置していく
  • 1.App Inventorとはデザイナーウィンドウ 選択されたコンポーネントコンポーネントを追加ここに表示
  • 1.App Inventorとはブロックエディタ
  • 1.App Inventorとはブロックエディタ アプレットを起動 アプリの動作についてなどをこの画面で操作
  • 1.App Inventorとはブロックエディタ ドラッグ&ドロップ で部品を連結していく
  • 1.App Inventorとはエミュレータ(or実機)
  • 1.App Inventorとはエミュレータ(or実機) アプリの動作を確認
  • 2.App Inventorでアプリ開発 2.App Inventorでアプリ開発 App Inventorでandroidアプリを作る
  • 2.App Inventorでアプリ開発チュートリアル
  • 2.App Inventorでアプリ開発5分で出来る:「猫アプリ」 素材 ボタンを押す 音が鳴る
  • 2.App Inventorでアプリ開発5分で出来る:「猫アプリ」
  • 2.App Inventorでアプリ開発5分で出来る:「猫アプリ」 にゃあ
  • 2.App Inventorでアプリ開発「Twitterクライアント」をつくる 「Twitter」のコンポーネント が最初から配備
  • 2.App Inventorでアプリ開発「Twitterクライアント」をつくる ****** ****** ConsumerKey ConsumerSecret を取得し入力するだけ
  • 2.App Inventorでアプリ開発「Twitterクライアント」をつくる
  • 2.App Inventorでアプリ開発 マッシュアップ既存のウェブサービスを組み合わせて、新しいものを作る
  • 2.App Inventorでアプリ開発CDK(Component Developer Kit) 計画中... ・facebook ・Dropbox などと連携が可能に?
  • 2.App Inventorでアプリ開発「観光マップアプリ」をつくる
  • 2.App Inventorでアプリ開発「観光マップアプリ」をつくる 「MapTour」横浜観光アプリをつくる
  • 2.App Inventorでアプリ開発「観光マップアプリ」をつくる 「MapTour」横浜観光アプリをつくる
  • 2.App Inventorでアプリ開発「観光マップアプリ」をつくる 「MapTour」横浜観光アプリをつくる Googleマップアプリに制御 を移している
  • 2.App Inventorでアプリ開発アプリ連携 Googleマップアプリに制御 を移している
  • 2.App Inventorでアプリ開発 上野研究室での取り組み 「モバイルツールを活用した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() DirextMessage ShowTimelineの結果か ら地名を抽出して検索 Reserve() ShowTImelinWeb検索 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 dbotnameで指定したアカウントの書き込みを検索する(今回は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を用いていろい
  • 1.App Inventorとは 3.まとめ
  • 3.まとめ誰もがアプリを作る アプリを自分で作る/他のユーザーへの公開可能 iPhoneアプリの市場とは違った展開
  • 3.まとめ今後の展望 CDK(Component Developer Kit)の拡張 マッシュアップの拡大
  • 3.まとめプロトタイプ アイディアをすぐに形に出来る
  • 3.まとめプロトタイプ 横浜ストリーム 上野研 アドバンスト講座 プロトタイプ を用いたデザイン手法 12/11(土) ウェブサイトのプロトタイプ 12/18 (土) モバイルアプリのプロトタイプ プロトタイプとは何か/プロトタイプの制作 ワークショップ形式でグループワーク