[公開講座]Thunkable.Xで自分だけのスマホ・アプリを作る

Thunkable.X を使ったスマホ・アプリの作成

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

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

 

スマホ・アプリ開発

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

スマホ・アプリ開発方法:

  • 従来のプログラミング
  • ビジュアルプログラミング

 

Thunkable.X とは

  • アメリカのマサチューセッツ工科大学(MIT):世界一流大学、スクラッチ開発
  • MIT App Inventor : MIT開発したAndroid対応アプリ開発ツール
  • 一部MIT App Inventor開発者がスピンアウトし、独立してThunkableを開発。

特徴:

  • iOS, Android 両方対応ビジュアル プログラミング
    • コーディングなし、プログラムの部品をドラッグ&ドロップで組み合わせるだけでできる。
  • 使ってみたいアプリを自分で作る
    • ひらめいたアイデアは素早く形に
    • プロトタイプにも適する(アイデア検証して、本格開発は業者に依頼)
  • 実用のアプリ開発も可能
    • Apple Store, Google Playへ登録可能

 

準備するもの

  • ノートPC – Webブラウザ
    • WebブラウザのChromeかFirefoxを推薦。IEはサポート外
  • Google アカウント
    • 公開講座では大学が用意したお試しアカウントも使えます
  • iOS, Android 機材(スマホ or タブレット)
    • 解約したWiFiだけ使えるものでも良い
    • Thunkable Liveという無料アプリを予めインストール
  • 無線LAN(WiFi) あると便利
    • 公開講座では大学が無線LAN(WiFi) 用意します

 

Thunkable.X のチュートリアル

ツール表示文字は英語のままですが説明は日本語です。わからない単語あれば先生に聞きましょう。

Kittyというネコの画像をタッチすると、「ニャー」と猫の鳴き声がするアプリを作ってみます。

素材の準備

チュートリアルページまたは下記のリンクよりダウンロード 

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

 

Thunkableに登録

まず https://thunkable.com/ を開いて、gmailのアカウントでログイン。

スクリーンショット 2018-06-01 08.49.58.png

 

iPhneとAndroid両方サポートするCross Platform Xと、Classic Androidがありますが、 Cross Platform Xを選択してください。

スクリーンショット 2018-06-01 08.49.46.png

プロジェクト作成

画面上Create New Projectをクリークし、新規App作成します。アプリ名は「Helloネコ」とします。

 

アプリデザイナー

1)画面に、ボタン部品を配置し、Kittyの写真をアップロードして、ボタンに猫の写真を配置。

2)画面に、Sound部品を配置し、Meowの音声ファイルをアップロード、Sound部品とリンク。
デザインしながら、実機で見るのは、Apple StoreからThunkable Liveというアプリをインストールしてください。「Live Test」をクリックして、バーコードをアプリ「Thunkable Live」に読ませて、実機でデザインの様子をみてください。

スクリーンショット 2018-08-04 00.35.17.png

 

アプリのロジック

3)アプリのBlocks画面に切り替え、ボタンクリックのブロックに、「ニャー」と猫の鳴き声がするように組み立てる。

スクリーンショット 2018-08-04 00.36.34.png

ライブテスト

トップメニューからLive Testを選択すると、テスト用スマホに接続を試みます。

テスト用スマホにThunkable Liveアプリを立ち上げ、Thunkableに登録する時と同じgoogleアカウントでログインして下さい。

ライブテストは先ほど作ったアプリのテストはできますが、アプリをスマホにインストールしたい場合はダウンロードとインストール手順も必要です。

ダウンロード

トップメニューからDownloadを選択すると、しばらくすると、ダウンロードリンクがメールで届きます。テスト用スマホからメールを開く、先ほど作ったアプリのインストールが開始します。

現在の仕様では、一つのアプリのみダウンロードできます。新規ダウンロードしたアプリは、古いのアプリを上書きします。

自分が開発したアプリを複数インストールしたい、またはお友達に共有したい場合は、アプリの公開を考えましよう。

アプリの公開

トップメニューからPublishを選択すると、Google PlayまたはApple Storeへアプリの公開(有料)ができます。予めGoogle PlayまたはApple Storeのアカウントを登録する必要があります。

追加制作内容

作ったアプリに機能追加

  1. 画面の追加
    1. カエルの画像と音声
    2. Forg picture: flog_400x400-300×300.jpeg
    3. Meow sound: forg.wav
  2. 猫の画面とカエルの画面のスワイプ
    (Tab Navigater利用)

新規制作内容

新たに一時はやりの「100万のタマゴ」アプリを作る。

  1. 画面の追加
    1. たまごの画像

    2. 叩くの音声
    3. 叩く回数をカウント
      1. ラベル (Label) を追加、Textに0
      2.  叩くと Label1.Text = Label1.Text + 1

 

Smart Car Demo

学園祭2017に向かって、ユビキタス・クラブのメンバーは、スマートカーの制作に励んでいる。

WiFi制御スマートカー、スマートフォンのブラウザからコントロールできる。

 

D2-6 Smart Car Demo

Bluetooth制御スマートカー、スマートフォンのBluetoothに接続して、コントロールする。

 

[公開講座]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として保存して、配布する 。

外国人留学生向け就職フェア 東京7月15日(土)追加開催決定

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
外国人留学生向け就職フェア ★ 東京7月15日(土)追加開催決定!!! ★
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、グローバルリーダー運営事務局です。
私達は日本で活躍したいという外国人留学生の就職支援を行っています。
http://www.globalleadernavi.com/
6月中旬になり、就活中の方の間では内定のある方とない方と
進捗に差が出てくる時期に入ってきました。「早く内定が欲しい!」
「まだまだ自分に合う企業を見つけたい!」
「今からでも選考が間に合う企業が知りたい!」

そのお声にお答えし、グローバルリーダーでは【外国人留学生積極採用中】の
企業が<10社1~15社>集結する就職フェアを開催します。

「今!」ならまだ日本の就職活動は間に合います。

チャンスがある今だからこそ、そのチャンスを獲得するためにも
ぜひとも、皆さんを採用したいという企業との「出会いの場」に皆さんもお越しください。

————————–————————–——————–
<7月15日開催/外国人留学生向け就職フェア>>
————————–————————–——————–
◆日程 2017年7月15日(土)13:00-17:00(受付12:30開始)
※入退場は自由です。短いお時間でもぜひお越しください。

◆会場 東京/AP東京八重洲通り7階
<アクセス>
JR各線      「東京駅」八重洲中央口より徒歩6分
東京メトロ銀座線 「日本橋駅」徒歩約5分
「京橋駅」徒歩約4分
都営浅草線を   「宝町駅」徒歩約4分

◆対象 2017年4月~2018年3月までに大学・大学院を卒業、
もしくは、卒業見込みのある外国人留学生の方が対象

★初出展企業多数★
今まで知らなかった優良企業に多数出会えます。
続々出展企業決定中です。

★当日面接企業有り★
その場で面接・選考も可能!
特に、早く内定を獲得したい方はすぐに予約をしましょう。

★就活相談ブース有り★
皆さんの就活に関するご相談やES対策などもお伺いします

————————–————————–——————–
▼ご予約はコチラから
http://www.globalleadernavi.com/jobfair/tokyo20170715
————————–————————–——————–
※今回は東京会場のみ開催予定です。

入場可能数には限りがありますので、まずはお早目にご予約ください。
また、もし周りに就職活動中の留学生のお友達がいらっしゃいましたら、
ご一緒にご参加下さいね。

会場でお会いできることを楽しみにしています。
皆さんのご予約・ご参加お待ちしております。

━━【GL】GLOBAL LEADER NAVI. ━━━━━━━━━━━━━━━━

グローバルリーダー運営事務局 TEL:03-6264-9641
〒103-0014 東京都中央区日本橋蛎殻町1-35-7 水天宮HSビル4階
Copyright (C) 2017 Vein Global Inc. All rights reserved.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━