Mobile Computing (6) Ladybug Chase

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

(chapter 5. Ladybug Chase)

てんとう虫の冒険

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

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

コンポーネント パレット 命名 用途
Canvas Drawing and Amination FieldCanvas 運動場
ImageSprite Drawing and Amination Ladybug てんとう虫
OrientationSensor Sensor OrientationSensor1 スマホの傾きでてんとう虫をコントロール
Clock User Interface Clock1 向き変更
ImageSprite Drawing and Amination Aphid アブラ虫(餌)
ImageSprite Drawing and Amination Frog カエル(敵)
Canvas Drawing and Amination EnergyCanvas てんとう虫のエネルギー
Button User Interface RestartButton 再スタート
Sound Media Sound1 食べられた

デザイナー画面

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

ブロックエディタ

てんとう虫

  • 運動
  • エネジー
  • 餓死
  • 再生

image

アブラ虫

  • 食べられ
  • 再生

image

再スタート

カエル

  • 運動
  • 食べる

image

リソース

Mobile Computing (5) Twitter

第5章 メディア

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

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

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

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

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

参考ビデオ映像

Twitter とは

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

https://twitter.com/

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

Twitterアカウント申請

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

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

Twitter App申請

アプリ登録は下記リンクの「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 は必須ではないですが、入れないとアプリで「連携アプリの認証」画面出ないので、必ず入力すること。

Twitter 発信

 

Appのテスト

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

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

Twitter 写真投稿

 

Twitter 読み上げ?

Mobile Computing (4) Mole Mash

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

(Chapter 3. MoleMash)

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

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

コンポーネント パレット 命名 用途
Canvas Drawing and Animation Canvas1 ImageSpriteのコンテナ
ImageSprite Drawing and Animation Mole タッチ目标
Button User Interface ResetButton スコアリセット
Clock Sensors Clock1 移動速度
Sound Media Sound1 的中された際振動
Label User Interface HitsLabel 的中と表示
Label User Interface HitsCountLabel 的中数の表示
HorizontalArrangement Layout HorizontalArrangement1 HitsLabelとHitsCountLabel置き場
Label User Interface MissesLabel 失敗と表示
Label User Interface MissesCountLabel 失敗回数
HorizontalArrangement Layout HorizontalArrangement2 MissesLabelとMissesCountLabel置き場

デザイナー画面

まずは、新しいプロジェクトを作りましょう。名前は、「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」を1つ配置します。「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として、下に配置されます。(プロパティの変更はなし。)

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

Mobile Computing (3) PaintPot

PaintPot for App Inventor 2

This tutorial has two parts: Part 1 | Part 2


簡略な手順

デザイン

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

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

f:id:shunXnegi:20141226164500p:plain f:id:shunXnegi:20141226164504p:plain

f:id:shunXnegi:20141226164602p:plain

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

f:id:shunXnegi:20141226165937p:plain

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

f:id:shunXnegi:20141226170357p:plain

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

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

プログラミング

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

f:id:shunXnegi:20141226173856p:plain

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

f:id:shunXnegi:20141226174328p:plain

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

f:id:shunXnegi:20141226174814p:plain

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

f:id:shunXnegi:20141226174928p:plain

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

f:id:shunXnegi:20141226175141p:plain

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

f:id:shunXnegi:20141226175414p:plain

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

f:id:shunXnegi:20141226175637p:plain

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

f:id:shunXnegi:20141226175848p:plain

これでPaintPotは完成です!

Mobile Computing (2) Hello Purr

 

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 )

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

clip_image004

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

clip_image006

• ブロック・エディタ( Blocks Editor )

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

clip_image008 clip_image010

スマホ・アプリ動作確認

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

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

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

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

 

image

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

参考:

Education on Web