第6章　センサー(1) 加速度センサー

(chapter 5. Ladybug Chase)

てんとう虫の冒険

スマホの傾きでてんとう虫をコントロール。

てんとう虫は、アブラ虫を食べて、エネルギーを蓄え。カエルに食べられたらおしまい。

まずは、新しいプロジェクトを作りましょう。名前は、「Ladybug」とします。

ブロックエディタ

てんとう虫

アブラ虫

• 食べられ
• 再生

再スタート

カエル

• 運動
• 食べる

• frog.png
• ladybug.png
• deadladybug.png
• aphid.png
• frog.wav

第5章　メディア

(Chapter 4. No Texting While Driving) — 運転中チャット（Texting）しない

内容はショットメッセージ受信してたら、電話番号とメッセージの音声の読み上げ、自動返信です。

日本では、ショットメッセージあまり普及しないので、このコース実験用スマートフォンは回線契約もないので、実施は困難。

そこで、内容は日本人の間流行っているTwitterの発信、受信（ 読み上げ？）にアレンジする。

これをベースに、音声の読み上げ (発音テスト？)、翻訳ツールの作成、IoTのセンサー情報の公開も考えられます。

参考ビデオ映像

Twitterは、140文字以内の短文「ツイート」の投稿を共有するウェブ上の情報サービスである。

https://twitter.com/

Twitterへようこそ. 「いま」起きていることを見つけよう。国内のニュースから身近なできごとまで、みんなの話題がわかる。

Twitterアプリを作る場合は「Twitter」の「Properties」にある「ConsumerKey」と「ConsumerSecret」が必要になります。これはTwitterアプリの製造者番号のようなので、アプリ単位にTwitterに申請をするともらえます。

番号を取得するためにはTwitterアカウントを持っていてログイン出来ていることが前提条件になります。またアプリ製作者はモバイル登録されていることが条件になっています。携帯電話の番号を事前に登録しておきます。

アプリ登録は下記リンクの「Create New App」からできます。

必要事項を入力して登録が完了すれば「Keys and Access Tokens」から「Consumer Key (API Key)」「Consumer Secret (API Secret)」がすぐにもらえます。

• ConsumerKey

• ConsumerSecret

Application Management

https://apps.twitter.com/

申請する際、必須項目は赤い✴️　と表示、しかしCall back URL は必須ではないですが、入れないとアプリで「連携アプリの認証」画面出ないので、必ず入力すること。

Appの初期化する際、Twitterの認証を行う。

利用者のTwitterアカウント情報（Id / Pw）でログインしてください。

第4章　アニメーション(Mole Mash)

(Chapter 3. MoleMash)

Mole Mashは、ゲームセンターによくあるもので、画面のデザイン、Campas部品、さらにImageSprite使い方が学べます。

表3- 1 “もぐら叩き”アプリ中のコンポーネント一覧

まずは、新しいプロジェクトを作りましょう。名前は、「mole」としました。

「Screen1」ができております。さっそく「Screen1」のプロパティから変更します。

• Title 　　　　　　　「もぐらたたき」「アプリの名前になります。」
• ScreenOrientation 「Portrait」「縦長固定のアプリにします。」
• Scrollable 　　　　 チェックをはずす。「スクロールするような状況になっても、画面にスクロールバーが表示されず、画面がスクロールしなくなります。

というわけで、ここに置くコンポーネントのHeightのFillParentがきちんと効くようになります。

スコア表示部を作ります。

「LayOut」内の「HorizontalArrangement」を置き、その中に、Labelを2つ入れます。

こんな感じ↓

後で、ブロックエディタでプログラミングするときに、分からなくならないように「Components」を「Rename」します。

• 「HorizontalArrangement」　→Rename→　「ScoreArrangement」
• 「Label1」　→Rename→　「HitsLabel」（プロパティのTextを「Hits:」に変更する。）
• 「Label2」　→Rename→　「HitsCountLabel」（プロパティのTextを「0」に変更する。）

これは、点数を表示させるラベルとなります。

デザイナー画面を完成させます。

1. 「Button」を１つ配置します。「Button1」　→Rename→　「RestartButton」（プロパティのTextを「Restart」にする。
2. 「Canvas1」を配置します。（プロパティWidth: Fillparent, Height: Fillparent）
3. 「Canvas1」の中に「ImageSprite」を一つ入れます。「ImageSprite1」　→Rename→　「MoleImage1」（プロパティのPictureに「mole.png」を設定し、もぐらを表示します。）

   

   (mole.png), 「MoleImage1」の配置は、Canvas内であれば、どこでもかまいません。好きなところにおいてください。

4. 「Clock1」を配置します。Non-visible Componentとして、下に配置されます。（プロパティのTimerIntervalを500に設定します。）
5. 「Sound1」を配置します。これも、Non-visible Componentとして、下に配置されます。（プロパティの変更はなし。）

これらが完成するとこうなります。↓

PaintPot for App Inventor 2

---

簡略な手順

デザイン

ネコの顔に赤青緑の線を引いたり点をうったりでき、書いたものを消したり、点を打つ大きさを変えたり、背景の写真をカメラで撮ったりできるアプリですん。

これがDesignerの画面です。左側のPaletteから、LayoutからHorizontalArrangementを2個、Drawing and AnimationからCanvasを1個持って来てこんな感じに並べましょう

　

左からボタンを持って来てレイアウトの中にセット！今回は上に3個、下に4個置きます。

次に先ほど置いたCanvasをクリックしてPropertiesから大きさを変更しましょう。今回は横幅をFill parentに、縦幅を300ピクセルに設定しました。Propertiesからボタンの色やテキストも変更できます。ついでにボタンごとの呼び名もわかりやすいように変えておくといいと思います。Componentsから対象のボタンを選択して、下のRenameから変更できます。

次にCanvasのBackgroundImageを選択します。

最後にMediaからCameraを持って来てDesignerでの作業は終了になります。

プログラミング

次はいよいよBlocksでの作業になります。右上のBlocksと書いてあるボタンを押してBlocks編集画面へ移動します。まずはなぞった部分に線を引いていく処理を作ります。左側のCanvasからwhen canvas1 .Draggedというブロックを持ってきます。その中に同じくCanvasから持ってきたcall Canvas1 .DrawLineをセットします。次に始点と終点の座標は下の図のようにセットしてください。これだけで画面に線が引けるようになりました！

次にタッチしたところに点を打てるようにします。…って言ってもやることはさっきとほとんど一緒です。こんな感じ。点の大きさはMathのとこから数字を持って来て、とりあえず5をセットしました。

さて、次はボタンを押たときに線や点の色を変更できるようにします。対象のボタンのとこからwhenなんとか .ClickBlockを持って来て、Canvasから色をセットするブロックを、色は左のColorsから持ってきましょう。また、似たような処理はCtrl+C Ctrl+Vでコピペすることが出来ます。

次にWipeボタンを押したときに画面に書いたものが消せるようにしましょう。…って言ってもこれだけ！

次に画面をタッチした時に打つ点の大きさを変えたいのですが、先ほど点の大きさは5と決めてしまったのでこのままでは変えることが出来ません。そこで、今回は変数のような途中で値が変わる数字を作ります。左のVariablesからinitialize globalなんとかを持ってきましょう。ここには初期値として数字や文字列や色とかいろいろセットすることが出来ますが、今回は2をセットします。

変数の呼び出しはVariablesのgetなんとかで出来ます。点を打つ処理のところをこんな感じにしましょう。

次にボタンを押したときにドットの大きさを変更できるようにします。これはVariablesのsetなんとかを呼び出せば出来ます。

最後にカメラを使えるようにしましょう。といってもMIT AI2ではカメラ画面をそのまま使えるわけではなく、端末のカメラアプリを起動して、戻り値としてカメラの画像を受け取ることになります。Cameraからcall Camera1.TakePictureを持って来て、カメラで写真をとったらCanvasの背景に設定するようにします。

これでPaintPotは完成です！

 

App Inventor のチュートリアル

画像をクリックすると、「ニャー」と猫の鳴き声がする

https://www.youtube.com/watch?v=8ADwPLSFeY8#t=11

素材の準備

チュートリアルページよりダウンロード (http://appinventor.mit.edu/explore/ai2/hellopurr.html )

1. Kitty picture: kitty.png

2. Meow sound: meow.mp3

MIT App Inventorのプログラミング環境

1. http://ai2.appinventor.mit.edu/

2. Google アカウントでログイン

3. Hellopurr という Project を作る

メニューから「Project」→「Start new project」を開き、「Project nameを入れ」→「OK」順に操作。Project name はhellopurrとする。

 

アプリの作成は3ステップで完了

• デザイン（ Design ）

– デザイン画面にボタンのブロックを置いてボタンに猫の写真を配置

– メディア・コンポーネントのサウンド・ブロックを置いて猫の鳴き声のオーディオファイルとリンク

• ブロック・エディタ（ Blocks Editor ）

– 「when Button1.Click」を置き、その中に「call Sound1.Play」のブロックを組み込み

スマホ・アプリ動作確認

エミュレータデバイスにまたはAndroid機材に接続し、猫をタッチしてみて、なき声を確認。

実機がある場合、なき声と同時にバイブレータする、そして実機の振動に反応してなき声するも試すことができる。

最後不要な文字の消去、説明のラベルの追加など、アプリの形を整える。

QRコードでスマホにスキャンさせ、ダウンロードしてインストールして動作を確認する、またはPCにapk fileとして保存して、配布する

 

はじめてのApp Inventor (2)　ボタンで音を鳴らすアプリ作成

参考：

• http://appinventor.mit.edu/explore/ai2/hellopurr.html