[公開講座]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

 

One Comment

Add a Comment

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