Mobile Computing (6) Tokyo Map Tour

Published by:

第7章 位置情報

(Chapter 6. Map Tour)

(Walking Tour)

今回はTokyo Map Tourというアプリを作ります。

予め登録してある3つの場所をセレクトボタンから選択すると、その場所のマップやストリートビューが表示される、というものです。

Androidでは、あるアプリから別のアプリを起動して、それに処理を渡したり、別のアプリでの実行結果を受け取ったりすることが比較的簡単にできるのです。
Tokyo Map Tourでは、Android端末に用意されているGoogle Mapのアプリを利用します。

1.Map Tour

東京の観光地の地図を表示するアプリです。

[Choose Destination]のボタンを押すと、東京の観光地のリストが表示されます。

  • Tokyo Tower (東京タワー)
  • Imperial Palace(「皇居」二重橋)
  • Sensoji Temple(浅草寺)

リストの中から、行きたい場所を選択すると、

地図が表示されます。

では、チュートリアルに従って、作ってみます。

Designer

まずは、「Designer」ですね。

使用するコンポーネントは、Image、ListPicker、ActiveStarterです。

Table 6-1. Components for the Paris Map Tour

部品 PALETTE 名前 用途
Image User Interface Image1 東京画像
Label User Interface Label1 Androidで東京発見を表示
ListPicker User Interface ListPicker1 目的地リスト
ActivityStarter Connectivity ActivityStarter1 地図アプリを開く

Imageに、最初の画面で表示する地図の画像を設定します。

https://maps.googleapis.com/maps/api/staticmap?center=35.6585805,%20139.7432442%20&zoom=15&size=300×300&maptype=roadmap&markers=color:blue%7Clabel:T%7C35.6585805,%20139.7432442

ListPickerは、テキストデータのリストから一つのデータを選択するためのコンポーネントです。
観光地のリストを入れておくためのものです。
ActiveStarterは、アプリ内から別のアプリを起動するためのコンポーネントです。
ここでは、Google Mapを起動するように設定しています。

Table 6-2. ActivityStarter properties for launching Google Maps

属性
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps

Blocks Editor

続いて、「Blocks Editor」

destinationsというリストを用意して、観光地の名称を入れておきます。

Figure 6-2. Creating a list is easy in App Inventor
Screen1.Initializeは、スクリーンが初期化されるときに呼ばれるブロックでしたね。

Figure 6-3. Put anything you want to happen when the app starts in a Screen1.Initialize event handler
ListPickerの要素として、destinationsリストを設定します。
そして、ListPickerが押されたときの処理。
geo:0,0?q= の文字列の後に、選択された観光地の名称が連結されます。
別のアプリ(Google Map)を起動したとき、この文字列が渡されます。

Figure 6-4. Setting the DataURI to launch the selected map

「Blocks Editor」はこれだけです。

検索して、地図が表示するのは、Google Mapの処理です。
q= の後に、検索したい文字列をくっつけていたのですね。

Mobile Computing (5) Ladybug Chase

Published by:

第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」としました。

ブロックエディタ

てんとう虫

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

アブラ虫

  • 食べられ
  • 再生

再スタート

カエル

  • 運動
  • 食べる

リソース

OrientationSensorがないの対策

OrientationSensorがない場合、AccelerometerSensorで代用可能。下記のコードを変えてください。

Mobile Computing (4) Media

Published by:

第5章 メディア

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

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

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

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

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

参考ビデオ映像

https://www.youtube.com/watch?v=5404RBvbvfA

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/

フォームに登録内容を入力してください。

[Name]

自分で考えてアプリの名前を入力。適当でよい。ただし、世界中に唯一無二の名前でないと登録するときに怒られる

[Description]

簡単なアプリの説明を入力。最低でも10文字必要

[Website]

存在するWebサイトのアドレスを入力。お持ちのWebサイトやブログのアドレスがよい。持っていない方は日本App Inventorユーザー会のアドレスである「http://www.app-inventor.jp」を使ってもらってもよい

[Callback URL]

Websiteと同じアドレスを入力

[Developer Rules of the Road]

チェックをONに

[CAPTCHA]

画像に表示されている読みにくい文字を入力

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

上記のフォームを入力し終わったら画面の一番下にある「Create your Twitter application」をクリックして登録を実行してください。

Twitter 発信

スクリーンショット 2017-09-12 14.05.15.png

ブロックエディタ

ブロックエディタでは以下のイベントを作成します(下記リストは、インデックスになっています)。

  1. 起動時にTwitterにログイン
  2. Twitterにログインしたらボタンを押せるように
  3. 「つぶやく」ボタンを押したらツイートを投稿

App InventorのTwitter機能の多くは非同期になっています。Twitterにログインした後に、認証が通るとお知らせが届くようになっています。それを受け取る部分は別のイベントとして用意する必要があります。

では、上記の機能を1つずつ組み立てていきましょう。

【1】起動時にTwitterにログイン

アプリ起動時に何かさせたい場合に使用するのは「Screen1.Initialize」です。そしてTwitter認証をするためのブロックは「Twitter1.Authorize」です。この2つで「起動時にTwitterにログインする」という動きを表現できます。

ブロックエディタ上では図のようになります。取得元は以下のようになります。この図のようにブロックを組み合わせてください。

ここで使用している「Twitter1.Authorize」を実行すると認証画面が開き、そこにTwitterのログインIDとパスワードを入力すると認証が実施され、アプリからTwitterの各種サービスにアクセス可能になります。

TwitButtonをクリックするとテキストボックスの内容をツイートとして投稿します。同じ内容の投稿して、怒られてしまうことを防ぐため、システム時刻を先頭につけ、クラスの生徒たちの投稿を一覧できるため、ハッシュタグ #upspress を加えた。

スクリーンショット 2017-09-12 14.14.10.png

Appのテスト

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

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

Twitter 写真投稿

Twitter 読み上げ?

Mobile Computing (3) Mole Mash

Published by:

第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として、下に配置されます。(プロパティの変更はなし。)

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

モグラたたきのブロックエディタその1

「Blocks」のボタンを押し、ブロックエディタを表示します。

まずは、点数を表示するための変数「Score」を設置します。初期値は「0」としておきます。

次は、モグラをランダムに表示させるブロックを作ります。左側にあるBlocksの「Clock1」をクリックし、「When Clock1.Timer」ブロックをドラッグします。

これです。↓

これは、「Clock1」のTimerIntervalで指定した時間ごとにイベントを発生するためのブロックです。プロパティで500 msと設定したので、0.5秒ごとにこのブロック内のイベントを発生させます。0.5秒ごとにモグラのを表示させるようにします。

モグラを表示させるのは「MoleImage1」をクリックし、「call MoleImage1.MoveTo」をはめ込みます。このブロックは、「x」と「y」に指定した場所に「モグラの図」を表示します。

「MoveTo」となっているブロックなので、その位置にアニメーションしながら動いていくのかと思いがちですが、「x」「y」の座標の位置までジャンプしていくイメージです。動いている様子は、エミュレートして見て下さい。モグラたたきっぽくなっています。

ここまでだとこうなります。↓

最後に「x」と「y」の部分に入れるものは、ランダムで表示させるブロック「random integer from ① to ②」のブロックを使います。

「x」の①から②の範囲は、下の図を参考に考えて下さい。①は「0」、②は、「Canvas1.width – MoleImage1.Width」となります。

ということで、ここを完成するとこうなります。↓

モグラたたきのブロックエディタその2

「when MoleImage1.Touched」のブロックを使います。

これです。↓

カンバス内の「MoleImage1」にタッチしたときの処理を決めるブロックです。

この中に入れるブロックは、次のものになります。

1,変数「Score」の値を1増やす。

2.変数「Score」の値を「ScoreLabel」に表示する。

3.0.1 秒間(100 ms)スマートフォンを振動させる。

これらを組み合わせて完成させます。

モグラたたきのブロックエディタその3

「Restart」ボタンを動かすブロックです。今回の「Restart」ボタンは、ただ、点数を「0」にもどすだけです。

ブロックエディタで、「RestartButton」ボタンをクリックし、「when RestartButton.click」をドラッグします。

これです。↓

中は、こんなブロックです。

1.変数「Score」を「0」にします。

2.変数「Score」の値を「ScoreLabel」に表示する。

(これは、「モグラたたきのブロックエディタその2」の時に作ったブロックと全く同じものなので、それをクリックし、「Ctrl+C」キーを押し、「Ctrl+V」キーを押す。つまりコピーアンドペーストが使用できます。1.の変数もコピー&ペースとしてから、数値の部分を変えた方が楽です。)

全部一緒にするとこんな感じです。↓

MITでのサンプルはここで終わりです。ここから先は、自分で工夫してみます。

  1. 応用例1:もぐらを3匹にしてみよう。
  2. 応用例2:もぐらを叩いたら音が出るようにしてみよう。
  3. 応用例3:猫を1匹足してみよう。
  4. 応用例4:「Restart」ボタンを、「Start」ボタンに変更。
  5. 応用例5:制限時間を30秒に設定。

Mobile Computing (2) Paint Pot

Published by:

第3章 Paint Pot

(Chapter 2. PaintPot)

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

画面のデザイン、Campas部品の使い方が学べます。

**
**

簡略な手順

http://ai2.appinventor.mit.edu/ を開いて、gmailで登録してください。

デザイン

これがDesignerの画面です。左側のPaletteから、HorizontalArrangement持って来て、

上に3個ボタンを持って来てレイアウトの中にセット!

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

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

LayoutからHorizontalArrangementを1個持って来て、

左からボタンを持って来てレイアウトの中に4個置きます。こんな感じに並べましょう

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

プログラミング

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

次はボタンを押たときに線や点の色を変更できるようにします。対象のボタンのとこからwhenなんとか .ClickBlockを持って来て、Canvasから色をセットするブロックを、色は左のColorsから持ってきましょう。

また、似たような処理はCtrl+C Ctrl+Vでコピペすることが出来ます。

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

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

これでPaintPotは完成です!

完成したプログラム

改造

  1. ペンの太さの変更(大丸、小丸)
  2. 現在の色、ペンの太さの表示
  3. ペンの太さの自由設定