どらのガジェット日誌

スマホやタブレット、カメラなどいろんなことを浅く広く。

Thunkableで作るAndroidアプリ開発入門 「税込計算アプリ」

time 2016/04/18

Thunkableで作るAndroidアプリ開発入門 「税込計算アプリ」

近頃、スマホの爆発的な普及に伴い、スマホ上で動くアプリを個人で開発する方々が沢山います。
自分もその端くれとして、もっと多くの人に「プログラミングの楽しさを知ってもらいたい!」と思い、ブロックを組むように簡単にアプリが作れる「Thunkable」の入門講座を書きたいと思います。

今回の目標

この講座では、下の画像のような「税込計算アプリ」を作ることを目標にします。

thunkable-25

 

まずは、Thunkableにアクセス

まずは、「Thunkable」にアクセスしましょう。アクセスは下のリンクから。
ちなみにこのサービスは、MITが開発した「App Inventor」というサービスが基になっています。英語ですが、全部無料で使えますのでご安心を。

Thunkable

アクセスしたら、画面右上の「SIGN UP」をクリック

thunkable-1

Googleアカウントでのログインを求められるので、持っているアカウントを入力。
入力したら、「許可する」をクリック。
thunkable-2 thunkable-3

アプリ(プロジェクト)の作成

ログインができたら、画面左上の「Create New App」をクリック
App Nameには適当な名前(例:「TaxCalc」)を入れて、OKをクリック。

thunkable-4

thunkable-5

ここまで終わると、下のような画面になると思います。

thunkable-6

画面に部品を配置しよう

さて、次はこの真っ白なスマホのスクリーンが表示されているところに、左側の「Palette」から部品を配置していきます。
今回使うのは、「User Interface」内にある下の3つです

TextBoxTextBoxは、文字を入力する欄です。
今回は、計算したい税抜きの金額を入力する欄として、この部品を使います。

thunkable-8Buttonは、読んで字のごとくボタンです。
クリックして何かイベントを発生させることが出来ます。今回は、「計算」ボタンを置きます。

thunkable-9Labelは、文字を表示する部品です。
今回は、計算した税込金額を表示するのに使います。

これらは、ドラッグしてスマホのスクリーンの部分に持ってくると置くことが出来ます。

thunkable-10

下のように、3つの部品が配置できたらOKです。

thunkable-11

見た目を整えよう

一通りの部品配置は済みましたが、まだとてもアプリらしくないですよね。
ボタンや入力する欄の見た目を整えていきましょう。Viewer内の部品をクリックするか、Components内の部品の名前を選択すると、右側のPropertiesのところにその部品に関する設定項目が出てきます。

thunkable-12ここで、入力する欄であるTextBox1について、

  • FontSizeを25くらいに
  • WidthをFill parentにして、横幅いっぱいに
  • NumbersOnlyにチェックを入れて、数字のみ入力できるように
  • Textに「0」と入力して、最初から「0」が入っているように
  • TextAlignmentをRightにして文字を右寄せに

次に、計算ボタンであるButton1について、

  • FontSizeを20くらいに
  • WidthをFill parentにして、横幅いっぱいに
  • Textに「計算」と入力

最後に、結果の金額を表示するLabel1について、

  • FontSizeを25くらいに
  • WidthをFill parentにして、枠を横幅いっぱいに
  • TextAlignmentをCenterにして、文字を中央寄せに

このようにしてみると、下のような見た目になると思います。

thunkable-13

ボタンを押すと反応するようにしよう

だんだんアプリが出来てきましたね。ただ、まだこのままではボタンを押しても何も起きません。ボタンを押したら、消費税込みの金額を表示するようにしてみましょう。
まずは、今までの見た目を整えるモードから、実際の処理を組むモードに切り替えましょう。

画面左上の「Blocks」ボタンを押します。

thunkable-14

Button1をクリックし、出てきたブロックから「When Button1.Click」を選び、ドラッグして配置します。

thunkable-15

次に、ボタンをクリックするとLabel1に結果を表示するようにするため、
Label1をクリックし、「set Label1.Text to」をドラッグして右側のエリアに持ってきます。
(ひとつ上の左側に凸があるブロックではありません)

thunkable-16

このブロックを、マウスでドラッグして動かして、下のように配置しましょう。

thunkable-17

そして、Label1に表示したいのは税込金額ですよね。
入力された数字×1.08をした数字をセットします。

Built-inと書かれた中の「Math」をクリックしてみます。このカテゴリーには計算の処理がまとめられています。
ここから、□×□のブロックを選び、左記ほどのブロックの「to」の右にくっつけましょう。

thunkable-18

まず、空欄の左側を埋めましょう。左側には、入力された数字をセットします。
TextBox1を選び、左に凸がある「TextBox1.Text」をセットします。

thunkable-19

次に、右側には、数字「1.08」をセットします。「Math」をクリックし、一番上の0と書かれたブロックを持ってきます。ブロックを置いた後、それをクリックし、「1.08」と入力しましょう。

thunkable-20

はい、これで必要な処理は終わりです!

スマホで実際に動かしてみよう

さて、これで必要な作業は全部終わったので、実際にスマホで動かしてみましょう!
アプリ上部のメニューから、「Export」→「App (provide QR code for .apk)」をクリックします。

thunkable-21

少し待つと、以下のようにQRコードが現れるので、これをスマホで読み取ります。

thunkable-22

ダウンロードする際に、下のような表示が出ますが問題ありません。「OK」を押しましょう。
また、「提供元不明のアプリ」をオンにする必要があります。こちらもオフになっている場合は、オンにしてください。

thunkable-23

ダウンロード後、インストールしたら起動してちゃんと動くか確認してみましょう!

thunkable-24

「Thunkableで作るAndroidアプリ開発入門(1)」は以上になります。
何かご質問等ありましたら、コメント欄までどうぞ!

down

コメントする




*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ブログ運営

未分類

自己紹介

どら

どら

高校3年生、そう受験生です。カメラやガジェット機器全般、好きです。更新はあまり頻繁にできなくなってしまうと思いますが、役に立つ記事があれば嬉しいです。プロフ画像は、comicoの「ReLIFE」より。

カテゴリー


- Rental Orbit Space -