Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

App inventorハンズオン勉強会

247 views

Published on

One Japan Hackathon向けワークショップ

Published in: Internet
  • Be the first to comment

App inventorハンズオン勉強会

  1. 1. 2018/6/2 1.0版 有山 隆史 App Inventor/Thunkable ハンズオン勉強会 ~Androidアプリ簡単作成 【One Japan Hackathon】
  2. 2. 1 App Inventorって ▌ Googleが教育コンピューティング向けに先行研究 ►2010年に一般公開 ►2012年にオープンソース ▌ MITに引き継ぎメンテナンス ▌ 2016年にThunkableとして、Y Combinatorの投資 を受けて商用 ► iOSを対象に追加。Cross Platform Xリリース。
  3. 3. ▌ Thunkableのログイン ► https://thunkable.com/ ▌ AndroidにThunkableアプリをインストール ► Thunkable Live for Classic Android ▌ Android端末の準備と設定 ► 開発者向けオプション ► セキュリティ→提供元不明のアプリ(ON) 2 事前準備
  4. 4. ▌① カウンター ▌② Google Mapsを使った地図表示 ▌③ 画像認識サービス ▌④ Webサービスからの天気読み上げ 3 ハンズオン
  5. 5. ▌ Designer ►Paletteから部品をスマートフォン画面に配置 ▌ Blocks ►Block editorで各部品の機能を配置 ▌ Export ►App(provide QR code from .apk)でサーバサイドでコンパイル ▌ Install ►バーコードのURLからapkをダウンロード 4 開発の流れ
  6. 6. 5 ハンズオン① カウンタ ▌ 人の交通量を調べるため に、カウンタを作ろう。 ►カウンタを+1 ►カウンタをー1 ►カウンタをクリア
  7. 7. 6 H01-0 App作成 ▌「Apps」→「Create New App」 ▌App nameを「counter」に設定
  8. 8. 7 H01-1 画面のデザイン ▌左のPaletteからLabelを一つ、 Buttonを3つ作成する。
  9. 9. 8 H01-2 Rename Component
  10. 10. 9 H01-3 Block programming
  11. 11. 10 H01-4 Download & Install ExportでApp(provide QR code for .apk)を選ぶ
  12. 12. ▌Android端末の状況によりapkがダウン ロードできない場合がある。 ▌対策 ►save .apk to my computerでダウンロード ►Android端末へコピー ◘Dropboxなどのオンラインストレージ ◘WindowsからBluetooth転送 ◘USBメモリー 11 【TIPS】 Error 1101など
  13. 13. ▌スマホを振ると自分の位置の地図 を出してみよう。 ▌Design ►「Visualization」→「Google Maps」 ►「Sensors」→「Accelerometer」 ◘バックグラウンド処理のため、画面の下 に移動 12 ハンズオン② Google Maps
  14. 14. 13 H02-1 Google Maps 【参考】Thunkable Intermediate App Tutorial #9 "Google Maps Location" ▌ Map初期設定 ▌ 加速度を振って地図を表示
  15. 15. ▌ Microsoft Cognitive Servicesを使って 撮った写真を認識させてみよう。 ▌ Design ►Image1 ◘「Scale Picture to Fix」にチェック ►Label1 / Button1 / Button2 ►Media →Camera1 ►Image Recognizer ►Media→Text-to-Speech 14 ハンズオン③ AI機能を使う
  16. 16. 15 H03-1 Block①
  17. 17. 16 H03-2 Block② 【参考】Thunkable Intermediate App Tutorial #7 "Image Recognition & Artificial Intelligence"
  18. 18. ▌ インターネット上にあるWebサービス(天気サイ ト)をアクセスしてみよう。 ►Livedoor Weather Web Service / LWWS ◘http://weather.livedoor.com/weather_hacks /webservice ▌ Design ►Button ►Label ►Web ►Text-to-Speech 17 ハンズオン④ Webサービス
  19. 19. 18 Weather Hacksを開く
  20. 20. ▌ 東京の天気を取り出す。 ►http://weather.livedoor.com/forecast/webservice/json/v1?city=130010 19 H04-1 Blocks
  21. 21. ▌ 一日目の天気を取り出して、日本語で読み上げる。 20 H04-2 Blocks for JSON
  22. 22. 21 【TIPS】 Extension ▌基本機能以外の拡張機能を使う ►https://puravidaapps.com/extensions.php
  23. 23. 22 ハンズオン お疲れ様でした。

×