ABC 2011 SummerでApp Inventor入門ワークショップを行いました。（音声認識 + Twitterつぶやきアプリの作り方付き）

7月17日開催のABC 2011 Summerで「App Inventor入門」というタイトルでワークショップを行いました。

ABC 2011 SummerやAppInventorの説明はこちら
ABCでApp Inventor入門ワークショップを行います！ - gabuchanの日記

スライド

ABC 2011 Summer App Inventor入門ワークショップ

View more presentations from gabuchan

音声認識 + Twitterつぶやきアプリの作り方

スライドの実演部分は実際にアプリを作りながら解説したのでスライドがありません。
以下で説明したいと思います。

はじめに

App Inventorのインストール
Googleアカウント（Gmailアカウント）の取得
プロジェクトの作成

までは済んでいるところから説明します。

Designerでコンポーネントを置く

1. ログインボタンとつぶやくボタンを置きます。

Buttonコンポーネントを置いて、右側のTextプロパティを編集してボタンの表示文字を設定してください。入力してエンターキーを押すか、他の場所をクリックすると編集が確定して、Viewerのボタンの文字も変更されるはずです。

2. 音声認識コンポーネントを置きます。

Other stuffをクリックして、SpeechRecognizerコンポーネントを置いてください。

3. Twitter コンポーネントを置きます。

Socialをクリックして、Twitter コンポーネントを置いてください。

音声認識（SpeechRecognizer）コンポーネントとTwitter コンポーネントは画面に表示されないコンポーネントなので、Viewerの下部に下のように表示されます。

4. Twitter APIを利用するためにConsumerKeyとConsumerSecretを設定します。

ComponentsでTwitter1をクリックして、ConsumerKeyプロパティ、ConsumerSecretプロパティにそれぞれ以下のリンク先の値をコピペして、入力してください。

http://bit.ly/gabu-ai-twitter

このConsumerKeyとConsumerSecretはワークショップ用に用意したものなので他の目的に利用しないでください。もし、困ったことが起きたら利用を停止する可能性もあります、そうするとこのアプリも動作しなくなります。

ConsumerKeyとConsumerSecretの取得方法は別のエントリーに書こうと思います。

とりあえず、これでDesignerでの作業は完了です。

5. Blocks Editorを起動する。

右上の「Open the Blocks Editor」をクリックして、Blocks Editorを起動しましょう。ダウンロードされる拡張子が .jnlp のファイルを保存してから開くか直接開くとBlocks Editorが起動します。
Windows環境の方で何度かダイアログが表示される場合は、基本的にOKで先に進んでください。

Blocks Editorでブロックを組み立てる

次に、ブロックを組み立てます。

1. 以下の順番にクリックして、Button1.Clickブロックをドラッグして置いてください。これが「ログイン」ボタンがタップされた時に呼び出されるブロックです。

2. Twitter1.Authorizeブロックをドラッグして、Button1.Clickブロックの内側にドロップして置いてください。これがTwitterのログインページを表示するブロックです。

3. Button2.Clickブロックをドラッグして置いてください。これが「つぶやく」ボタンがタップされた時に呼び出されるブロックです。

4. SpeechRecognizer1.GetTextブロックをドラッグして、Button2.Clickブロックの内側にドロップして置いてください。これが音声認識を開始するブロックです。

5. SpeechRecognizer1.AfterGettingTextブロックをドラッグして置いてください。これが音声認識が完了した後に呼び出されるブロックです。

6. Twitter1.SetStatusブロックをドラッグして、SpeechRecognizer1.AfterGettingTextブロックの内側にドロップして置いてください。これがTwitterにつぶやくためのブロックです。statusという凹みにつぶやきたい文字列をセットします。

7. resultブロックをドラッグして、Twitter1.SetStatusブロックのstatusに差し込みます。これが音声認識の結果の文字列が入っているブロックです。例えば、「こんにちは」と話せば、「こんにちは」という文字列が、このresultブロックに入っています。（例えばが、例えになっていないですね^^;

これで音声認識の結果をつぶやくブロックができました。

8. Android携帯でアプリを動かします。Android携帯をUSBケーブルでPCに接続してから右上の「Connect to Device...」をクリックして、端末IDをクリックしてください。端末IDはそれぞれ違います。
ちなみに、Windows環境の方は、ドライバをインストールしてくださいね！