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

今回の目標

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

まずは、Thunkableにアクセス

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

Thunkable

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

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

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

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

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

画面に部品を配置しよう

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

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

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

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

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

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

見た目を整えよう

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

ここで、入力する欄である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にして、文字を中央寄せに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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