がぶちゃんの日記

札幌からフルリモートCTO

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

Android AppInventor

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環境の方は、ドライバをインストールしてくださいね！


アプリの使い方

1. 起動したら「ログイン」ボタンをタップしてください。

2. Twitterアカウントのユーザー名、またはメールアドレスとパスワードを入力して、「連携アプリを認証」をタップしてください。

3. 「つぶやく」ボタンをタップしてください。

4. つぶやきたい言葉を話してください。

5. つぶやけました！！！


アプリができたら

今回はApp Inventorの使い方を理解していただくために非常にシンプルなアプリを作りました。このアプリはまだまだ良くすることができます。

例えば、以下のような仕様が思いつきます。

  • ログインするまでは「つぶやく」ボタンを非表示にする。
  • ログインしたら「ログイン」ボタンは非表示にする。
  • ログアウト機能が必要？
  • 音声認識の結果を確認ダイアログで確認してから、つぶやく？
  • 見た目をかっこよくorかわいくする。

などなど。

ぜひ、挑戦してみてください！

お知らせ１：日本App Inventorユーザー会

Google グループ

App Inventorを使ってAndroidアプリを作っている・ 作りたい人の情報交換のためのメーリングリストです。
こちらに質問を投げて頂ければ、僕が全力で返事を書きます :D

お知らせ２：横浜でApp Inventorイベントやります。

2011年8月6日（土）に横浜でApp Inventorイベントやります。詳細は下のリンクからご覧ください。こちらのイベントでも僕が全力でサポートします :D

横浜支部のハッカソン#1 AppInventorでハッカソンしてみよう♪ : ATND
参加される方は「このイベントに参加登録する」から登録をお願いします。

長くなりましたが以上です。

Enjoy App Inventor ヽ(´ー｀)ノ