集中企画

暮井慧とアプリ開発！　第1回

「App Inventor 2」で簡単プログラミング！

（2014/8/28 17:19）

　こんにちは！　私、暮井慧（くれいけい）。今日は、Androidアプリが簡単に作れちゃう「App Inventor 2」を紹介するよ。

著者プロフィール

【暮井慧（くれい　けい）　17歳】　都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のキャラクターとして活動中！

Twitter：@pronama

Webサイト：http://pronama.jp/kei

「App Inventor 2」で簡単プログラミング！

　「App Inventor 2（以下、App Inventor）」というのは、Androidアプリが作れるクラウドベースの開発環境なんだ。

　特長は、Webブラウザーで開発できて、ブロックを組み合わせてプログラミングすること。それから、Androidデバイスと通信してリアルタイムに手元でプログラムをテスト（実行・デバッグ）できることだよ。

　AndroidのSDK（ソフトウェア開発キット）や専門的な知識はいらないの。なぜかというと、教育用途が想定されているんだよね。だから、アプリ開発がはじめての人も簡単に使えると思うよ。

App Inventor製アプリ

　複雑なアプリを作るのには向いてないけど、頑張ればこれぐらいのことができるよ！

　このアプリは、公式サイトのその月もっともよい「App Inventor」製アプリを紹介するコーナー“App of the Month”で選ばれたアプリだよ。見た目や機能にこだわるとたいへんだから、まずは自分用に単純なアプリを作るのがよいと思う！

App of the Month Gallery | Explore MIT App Inventor: http://appinventor.mit.edu/explore/app-of-the-month-gallery.html
Stock Shop - Google Play の Android アプリ: https://play.google.com/store/apps/details?id=appinventor.ai_ms2606.Stock_Shop_V_1_0

App Inventorでプロジェクト作成！

「App Inventor 2」

　さっそく、「App Inventor」を使ってみよう！　Chrome/Safari/Firefoxのいずれかでai2.appinventor.mit.eduにアクセスしてみて。Googleアカウントが必要だよ。

MIT App Inventor 2: http://ai2.appinventor.mit.edu/

　初期画面はこんな感じ。アプリは、プロジェクトという単位で管理するよ。［New Project］ボタンからプロジェクトを作ろう。

新しいプロジェクトの作成

Androidデバイスと通信！

　それからWi-FiでAndroidデバイスからWebブラウザーのPCにWiFi接続してみよう！　プログラミングはWebブラウザーで、動作の確認はAndroidデバイスで行うの。WiFiネットワークは、同じネットワークである必要があるよ。

　まず、Androidデバイスに「MIT AI2 Companion」をGoogle Playストアからインストールして……

MIT AI2 Companion - Google Play の Android アプリ: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

　次はWebブラウザーに戻って、上部の［Connect］の［AI Companion］を選んで、QRコードを表示するの。それをMIT AI2 Companionの［Scan QR code］ボタンで読み取れば、接続完了！

Wi-Fi接続

　接続すると、Webブラウザーで組み立てたアプリの内容がリアルタイムでデバイスに反映されるよ。接続が切れたらもう一度同じ手順で接続してね。Webブラウザーの［Reset Connection］項目で接続のリセットもできるよ。

デザイナーでアプリの画面を作成！

　これが、デザイナーの画面。ビューワー（Viewer）に、パレット（Palette）から、ボタンなどのコンポーネントをドラッグ＆ドロップして、アプリの画面を作れるよ。コンポーネントの大きさや色などの設定は、プロパティ（Properties）で編集するの。

デザイナー画面

　パレットから次のコンポーネントをビューワーに配置してみて！

“User Interface”からButton
“Media”からTextToSpeech

　TextToSpeechは、文字列から音声を再生するコンポーネントだよ。

　ボタンのプロパティも変更してみよう。

Textを“ヨ！”
Widthを“Fill parent”

Androidデバイスの画面

　Androidデバイスと接続している状態だと、デバイスの画面も変わったでしょ？

　次は、ボタンをタップしたときの動作を組んでいくよ。

ブロックエディターでアプリの動作を組み立て！

　右上の［Blocks］ボタンをクリックして、ブロックエディターの画面に切り替えよう。ブロック（Blocks）から、いろんなブロックをビューワー（Viewer）にドラッグ＆ドロップして、アプリの動作をプログラミングするよ。

ブロックエディター画面

　ボタンをタップ（クリック）したときに、「ヨ！」って再生するようブロックを組むよ。次のブロックを配置してプログラミングしてみよう！

Button1を選んで“when Button1.Click”と書いてあるブロック
TextToSpeech1を選んで“call TextToSpeech1.Speak”と書いてあるブロック
Textを選んで二重引用符（“”）が書いてあるブロック

ブロックの組み立て

　Androidデバイスでボタンをタップしたら「ヨ！」って言ってくれた？　あなたの代わりに「ヨッ！」って言うアプリの完成！　簡単でしょ？

　“when～Click”ブロックは、～がタップされたときに何かするブロックで、その何かするブロックをdo部分に組み入れるの。“call～Speak”ブロックは、message部分を音声再生するブロック。message部分は、テキストのブロックを入れたってわけ。

　ここで、ほんのちょっとだけ応用！　デザイナー画面に戻って“User Interface”からTextBoxを配置してみて。ブロックを次のように組み合わせるとテキストボックスの内容（Textプロパティの値）を再生するアプリになるよ。

テクストボックスの内容を再生

　……とまあ、こういう感じにブロックを組み合わせてプログラミングできるんだよ。らくちんだよね！

ツイートアプリの作成！

　少しアプリの内容を変えてみよっか。Twitterコンポーネントもあって、Twitterアプリも作れるんだ。楽しいコンポーネントなんだけど、ものすごく限定されたTwitterの機能しか使えないし、ちょっと動作も微妙だからあんまり期待しちゃダメだよ。

　はじめに、Twitterの開発者向けサイト（https://dev.twitter.com/）で、アプリを作成してAPIキーを取得しよう。ここ、App Inventorと直接関係ない話だよ。念のため。でも、これをやっとかないとTwitterのアプリ作れないんだよね。

Twitter Application Management: https://apps.twitter.com/

　Application Management画面の［Create New App］ボタンから、新しくアプリを作成。「Callback URL」には、今回は直接使わないけど、自分のWebサイトのURLなどを入れておいてね。アプリのページの「API Keys」にある「API key」と「API secret」を、この後使うからね。「Permissions」では、「Read and Write」のアクセス許可を設定しておこう。

Twitterアプリ作成からAPI key参照とアクセス許可の設定

　ここからApp Inventorに戻るよ。デザイナー画面のパレット「Social」のTwitterを配置。プロパティの「ConsumerKey」にAPI keyの値、「ConsumerSecret」にAPI secretの値を入力してね。

Twitterコンポーネントの設定

Twitterアプリのブロック組み立て

　じゃあ、ブロックエディターで、Twitter1のブロックを使って次のようにブロックを組んでみよう。

　これで、「ヨ！」とツイートできるアプリの完成！

ヨ！
— プロ生ちゃん（暮井慧） (@pronama)2014, 8月 27

　「ヨ！」しかツイートできないから、2回ツイートするとエラーなんだけどね……。

　call～Authorizeブロックは、Twitter認証を行うブロック。認証がまだの場合、Twitterの認証画面が表示されるよ。call～Authorizeの処理の後、when～IsAuthorizedブロックの内容が実行されるの。call～Tweetは、status部分をツイートするブロックだね。

　テキストボックスを組み合わせると、テキストボックスの内容をツイートするのも簡単だし、次のようにするとテキストボックスの内容にハッシュタグ「#窓の杜」を付けてツイートだよ。みんなも、自分にとって便利なアレンジとか面白いアレンジとか、いろいろ試してみて！

ハッシュタグを付けてツイート