Osc2012 appinventor のその後

1,348 views

Published on

OSC 2012 Oitaの1コマでAppInventorの簡単な紹介をした時のスライド

Published in: Education
  • Be the first to comment

  • Be the first to like this

Osc2012 appinventor のその後

  1. 1. AppInventorのその後 日本Androidの会 大分支部 本田 克己
  2. 2. 日本Androidの会 大分支部2010年2月6日に設立2010年1月23日のOSC 2010 OitaがキッカケAndroidアプリ開発の勉強会などをやっていますhttp://goo.gl/VKyYNhttp://groups.google.com/group/android-group-japan-oitaFacebookページなんかもあったりします。http://goo.gl/vKmlchttps://www.facebook.com/android.oita
  3. 3. 2012年2月11日 OSC 2012 OitaAndroidアプリを作ってみよう (45分で)
  4. 4. App Inventor
  5. 5. App Inventorブロックを組み合わせて、簡単にAndroidのアプリが作れるプログラムを組んで、すぐに動作を確認できるWindowsでもMacでもLinuxでも使える
  6. 6. App Inventorの仕組み デザイナ App Inventor サーバ ブロック エディタ エミュレータプログラムのコンパイルやソースコード?はクラウド上管理されています。 端末/実機
  7. 7. 2010年7月Googleが開発を行い、Google Labsで公開2011年7月Google Labs閉鎖の発表がありました2011年12月App Inventorサーバが閉鎖されました
  8. 8. ハンズオンしようと思ったら デザイナApp Inventor サーバ ブロック エディタ エミュレータ 端末/実機
  9. 9. Google Labs閉鎖に伴い、App InventorのコードはGoogleからマサチューセッツ工科大学(MIT)のモバイルラーニングセンターに移管されました
  10. 10. 2012年1月20日ソースコードが公開http://code.google.com/p/app-inventor-releases/
  11. 11. 仕方がないので2月のOSCではオープンソース版のサーバを独自に立てて ハンズオンを開催しました
  12. 12. MIT版2012年3月リリースhttp://appinventor.mit.edu/
  13. 13. App InventorとMITOpen Blocksというライブラリを使ってるOpen BlocksはMITが開発、公開Open BlocksはScratchという、プログラミング教育用のプロジェクト向けに開発されてた http://scratch.mit.edu/
  14. 14. App Inventorのはじめかた
  15. 15. 必要なもの1. パソコン2.Webブラウザ3. ネットワーク接続4.Java実行環境(Java6)5.App Inventor Setup Sofware6.Googleアカウント7. (できれば)Android端末
  16. 16. Java実行環境
  17. 17. App InventorのセットアップWindowsとMacは、ダウンロードしてインストールするだけhttp://explore.appinventor.mit.edu/content/linuxhttp://explore.appinventor.mit.edu/content/windowshttp://explore.appinventor.mit.edu/content/mac
  18. 18. App InventorのセットアップWindowsとMacは、ダウンロードしてインストールするだけhttp://explore.appinventor.mit.edu/content/linuxhttp://explore.appinventor.mit.edu/content/windowshttp://explore.appinventor.mit.edu/content/mac
  19. 19. プログラミング始めてみようhttp://beta.appinventor.mit.edu/
  20. 20. Hello App Inventor
  21. 21. こんな感じにアプリが作れます
  22. 22. はじめにプロジェクトを作ります
  23. 23. プロジェクト名を入力
  24. 24. デザイナが開きます
  25. 25. パレット ビューワ コンポーネント リスト プロパティ リスト
  26. 26. ボタンの配置Buttonをスクリーンにドラッグ Textに「こんにちは」と入力
  27. 27. ブロックエディタの起動メニューから[Open the Blocks Editor]をクリック
  28. 28. ブロックエディタ
  29. 29. My Blocksにデザイナで置いた部品 が入っています
  30. 30. ボタンを押した時・・・[My Blocks]タブを選択Button1を選択 Button1.Clickをドラッグ
  31. 31. set Button1.Text toをドラッグ Text と ドラッグBuilt-Inを選択して、Textを選択 textに文字を入力 「Hello App Inventor」 とか
  32. 32. エミュレータの起動 [New emulator]をクリック起動したら、鍵マークを右にドラッグ
  33. 33. プログラムを実行してみる [Connect to Device...]をクリックして emulator-555? を選択
  34. 34. ご清聴ありがとうございましたブースのApp Inventorが使えるパソコンを 置いているので試してみてください

×