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のアカウントでログイン。

 

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

プロジェクト作成

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

 

アプリデザイナー

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

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

 

アプリのロジック

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

ライブテスト

トップメニューから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