[公開講座]MIT App Inventorで自分だけのスマホ・アプリを作る

MIT App Inventorを使ったスマホ・アプリの作成

第一工業大学東京上野キャンパス 情報電子システム工学科

陳 研究室 (http://chenlab.net/)

 

スマホ・アプリ開発

世界の携帯電話契約数は世界の人口を上回った。携帯電話中スマホの普及率は67.4%、スマホの販売数はパソコンを超えた、動画視聴ネットショッピングに使用する機器は、スマホがパソコンを超えた!! スマホ・アプリ開発人材不足のため、求人が増えた。

スマホOSのシェアは、主にAndroidとiOSであり。日本にはほぼ半々だが、全世界の場合Androidは78%。

スマホ・アプリ開発は、従来のプログラミングとビジュアルプログラミングがある。

 

MIT App Inventorとは

  • Android用ビジュアル プログラミング
    • コーディングなし、プログラムの部品をドラッグ&ドロップで組み合わせるだけでできる。
  • 使ってみたいアプリを自分で作る
    • ひらめいたアイデアから簡単にアプリが作ることができる、プロトタイプにも適する
  • 実用のアプリ開発も可能
    • Java プログラマー向けの Android アプリ開発の解説書の例題10戦全勝

 

MIT App Inventorできること

Googleはコンピュータ科学専攻ではない大学生、看護学生、女子高生、小学生などを対象にApp Inventorのテストを行ってきた。サンフランシスコ大学の学生は車の運転中に送られてきたテキストメッセージに自動返信するアプリを作成。看護学生は加速度センサーを用いて患者が倒れたときに、患者の携帯電話から救急メッセージが送信されるようにした。レゴマインドストームというロボットもプログラムで動かす。

 

準備するもの

  • PC
  • Google アカウント
  • Androidマシン(スマホ or タブレット)
    • 「MIT Ai2 Companion」
    • QRコードスキャナー
  • 無線LAN(WiFi) あると便利

 

image

開発環境

下記何れの開発環境を用意

  1. Androidデバイス+WiFiがある => Androidデバイス+WiFiで実行
  2. Androidデバイスがない => エミュレータで実行
  3. AndroidデバイスはあるがWiFiがない => Androidデバイス+USBケーブルで実行

 

App Inventor のチュートリアル

画像をクリックすると、「ニャー」と猫の鳴き声がするアプリを作る

 

 

 

素材の準備

チュートリアルページよりダウンロード http://appinventor.mit.edu/explore/ai2/hellopurr.html

  1. Kitty picture: png
  2. Meow sound: mp3

 

MIT App Inventorのプログラミング環境

  1. Chromeブラウザを開き、http://ai2.appinventor.mit.edu/ を入力する
    (教室の機材はプロキシの認証画面が出たら、指示した内容を入力する)
  2. Google アカウントでログインする
    (自分のGoogle アカウント、または演習用アカウントtest @edu2web.comを利用する)
  3. ウインドウがPopupしていれば、Continueボタンを押して先に進む。
  4. すでに作成済みのProjectがあれば、それが見える。
  5. 今回はHellopurr という Project を新規に作る
    メニューから「Project」→「Start new project」を開き、「Project nameを入れ」→「OK」順に操作。Project name はhellopurrとする。
  6. 画面の右上に「Designer」「Blocks」がある。Designerは、ユーザインタフェースを、Blocksは処理を書くためにあるので、適宜切り替える

 

アプリの作成は3ステップで完了

  1. デザイン画面にボタンのブロックを置いてボタンに猫の写真を配置
  2. メディア・コンポーネントのサウンド・ブロックを置いて猫の鳴き声のオーディオファイルとリンク
  3. 「when Button1.Click」を置き、その中に「call Sound1.Play」のブロックを組み込み

image

image

image

スマホ・アプリ動作確認

エミュレータデバイスにまたはAndroid機材に接続し、猫をタッチしてみて、なき声を確認。

最後不要な文字の消去、説明のラベルの追加など、アプリの形を整える。

QRコードでスマホにスキャンさせ、ダウンロードしてインストールして動作を確認する、またはPCにapk fileとして保存して、配布する 。

Leave a Reply

Your email address will not be published. Required fields are marked *