最終課題要件

1-4人のクループで、自分のデザインのアプリを作成する。 この課題の得点は、Mobile Computing コース成績の50％に相当する。

どんな種類のアプリでも自由にデザインすることができる。 アプリの洗練さや複雑さの面においでは、些細なではない（non-trivial ）アプリである。 例えば、アプリケーションの重要な拡張が大丈夫ではあるが、コースでやったアプリのうちの1つのマイナーな調整ではない。

最小技術要件

アプリは特定の最小技術要件を満たしている必要があります。

• データ抽象化 。 アプリには少なくとも2つの変数が必要、 どちらかのリストまたはデータベースを使用する必要   。
• 手続き抽象化 。 アプリには少なくとも2つのプログラマー定義のプロシージャまたは関数を含める必要。
• アルゴリズムと制御。 少なくとも1つのif / else構造体または1つのループを含める必要 。

評価基準

課題を評価するために、次の基準が使用されます。 各基準は、0点（評価不能）から5点（良好）までの合計5点で合計20点の価値があります。

• 目的 ：アプリの目的が明確に記述されており、アプリ自体が目的を明確に果たしています。
• 技術的要件 ：アプリケーションは上記の最低限の技術要件を満たしています。
• 機能的性能 。 アプリはダウンロードされ、テストされ、大きなパフォーマンス上の問題やバグがなければ期待どおりに機能しました。
• スコープ ：このアプリは重要なクリエイティブな成果を表しており、コースで行ったアプリのうちの1つの小さな変化や拡張ではありません。

最低限のプレゼンテーション要件

このコースでは、アプリケーションがレビューされるためには、GitHub.comで公開されているプレゼンテーションへのリンクを提供する必要があり、 以下の最小要件を満たしている必要がある。

• タイトル。 アプリのタイトル。
• エレベーターピッチ。 一言でアプリの基本的な目的を説明する。
• 説明。 アプリケーションの1つのパラグラフの説明。目的と範囲を説明し、基本機能を要約しています。
• アプリスクリーンショット。 アプリのメイン画面またはビューのスクリーンショット。
• ブロックスクリーンショット。 アプリケーションがプロジェクトの技術的プログラミング要件を満たしていることを示すブロックのスクリーンショット。
• QRコードとダウンロードリンク。 機能しているQRコードと、アプリのAPKファイルへの機能するHTMLリンク、およびレビュー担当者がアプリをテストする方法の簡単な説明。

サンプルプレゼンテーション

https://github.com/edu2web/PhotoBlog/blob/master/README-Jp.md

Final Project Requirements

For this assignment you will create an app of your own design.  You will have two weeks to complete it.  Your score on this project, is worth 50% of your course grade.

You are free to design whatever type of app you want.  In terms of the sophistication or complexity of the app, it must be a non-trivial app.  For example, it cannot simply be a minor tweak to one of the app’s we’ve done in the course, although a significant extension of one of our apps would be okay.

Minimum Technical Requirements  

The app must meet certain minimum technical requirements.

• Data Abstraction.  The app must include at least two variables and must make use of either a list or a database.
• Procedural Abstraction.  The app must include at least two programmer-defined procedures or functions.
• Algorithms and Control.  The must include at least one if/else structure or one loop.

Evaluation Rubric

The following criteria will be used to evaluate your project.  Each criterion will be worth 5 points, ranging from 0 (unable to assess) to 5 (good),  for a total of 20 points.

• Purpose:  The app’s purpose is clearly described and the app itself clearly achieves its purpose.
• Technical Requirements:  The app meets or exceeds the minimum technical requirements as described above.
• Functional Performance. The app was downloaded and tested and it worked as expected without major performance issues or bugs.
• Scope:  The app represents a significant creative accomplishment and is not just a minor variation or extension of one of the apps we did in the course.

Minimum Presentation Requirements 

In order for you app to be reviewed by your peers in this course, you will be required to provide a link to a publicly accessible presentation  of your app that meets the following minimum requirements.  

• Title. The app’s title.
• Elevator Pitch. A one sentence description of your app that captures its essential purpose.
• Description. A one paragraph description of your app that describes its purpose and scope and summarizes its basic functions.
• App Screenshot.  A screenshot of one of the app’s main screens or views.
• Blocks Screenshot.  A screenshot of the blocks that demonstrates that the app meets the technical programming requirements of the project.
• QR code and Download Link. A functioning QR code and a functioning HTML link to your app’s APK file and a brief description of how the reviewer should test the app.

Sample Presentation

https://github.com/edu2web/PhotoBlog/blob/master/README.md

第11章　Amazon API

(Chapter 13. Amazon Bookstore)

Amazon API

まず、App Inventor専用のAmazon APIを見てください。

http://aiamazonapi2.appspot.com/

試しに、1449397484入力すると、ISBN番号1449397484の本の書名、単価が返ってくる。

デザイン

BarcodeScanner

図書のISBN番号の入力の代わりに、ISBNのバーコードを読み取ることもできる。

BarcodeScannerは非表示部品です。この部品を使ってバーコードを撮影します。

撮影はバーコード撮影用の別バーコードを読み取るアプリが起動します。そのためアプリを動かす端末に「ZXing」のようなバーコードを読み取るライブラリが必要です（マーケットから無料でダウンロード可能）。

Amazon API検索

このAmazon APIは、TinyWebDBのAPIを利用して、図書の検索を行う。「tag」を送信して、「value」を取得する代わりに、検索ワードを送り、検索結果を受け取り。

テスト

撮影はバーコード撮影用の別画面が起動します。明るい枠の中にある赤い線の上に乗ったバーコードを読み取ります。このプレビューではバーコードに反応して赤い線の上に黄色い丸が出現しています。バーコードのスキャンの際はシャッターを切る必要はありません。このプレビューでも明るい枠内に全てのバーコードが入るようにカメラを動かせば、自動的にスキャンします。スキャンが終わると、赤い線が緑になり、App Inventorのアプリに画面が戻ります。

ISBN番号9781491906842の本のバーコード

第11章　Web API (WordPress TinyWebDB API)

WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressに API機能を追加して、クライドとして利用する方法を試み。

App InventorはAndroidのApp作りに簡単な環境である。そのTinyWebDBコンポーネントは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。

WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressをWebコンテンツを作るに最適な環境。WordPressサイトは、App InventorのTinyWebDBサービスとして利用できるか？

答えはYes.

WordPressに API機能を追加して、クライドとして利用する方法を試み。

WP-TinyWebDB-APIは、両者の長所を連携し、WordPressをAppInventorのTinyWebDBサービスとして利用するためのAPIを、WordPressのプラグインとして提供したもの。

本章は、WP-TinyWebDB-APIのインストール、Postman を使ってAPIの動作確認, そして第９章のWebデータベースに応用する検証を行う。

公式サイトを利用する

1. FTPツールでtinywebdb-api ディレクトリー全体を WordPress の pluginsフォルダーにコピーして下さい(/wp-content/plugins/).

2. FTP the entire tinywebdb-api directory to your WordPress blog’s plugins folder (/wp-content/plugins/).

3. 管理パネルの「Plugins」タブ上のpluginを有効化してください。

4. Activate the plugin on the “Plugins” tab of the administration panel.

サイトをブラウザーで開くと、普通のWordPressのサイトに見える

http://tinywebdb.ai2.work/

追加したAPI機能をみる。(これをTinyWebDBのServiceURLにセットする)

http://tinywebdb.ai2.work/api

http://tinywebdb.ai2.work/api/getvalue/?tag=questionsChenLab

ブラウザから取得したデータは、少々見にくい。PostmanというChrome の拡張を使うと、便利。認証、パラメタ引き渡しもできる。

http://tinywebdb.ai2.work/api/storeavalue/

URL: アドレス/storeavalue
パラメータ: tag=タグ名&value=値

URL: アドレス/getvalue
パラメータ: tag=タグ名

Take Quiz

Components:

Make Quiz:

Take Quiz:

Blocks:

Make Quiz:

Take Quiz:

Refer:

• http://www.appinventor.org/MakeQuiz10 – (English)
• https://edu2web.github.io/ai2bookcn/chapter10.html – (Chinese)

**第8章　データベース　**

（TinyDB）

(Chapter 7. Android, Where’s My Car?’)
ANDROID 、私の車はどこですか

アプリの内容はロケーションセンサ(LocationSensor)でケータイの位置を記憶(TinyDB)し、別の場所に移動した後に記憶した場所がどの方向にあるかを示すものです。なお、ロケーションセンサはエミュレータでは動作しません。動作の確認はAndroidケータイで行ってください。

データベース

TinyDB : アプリを終了させても残るデ－タを持つことができる部品。デ－タはキ－とバリュ－の対で記憶される.

デザイン

デザイン画面

コンポーネントリストの後半

部品の一覧（プロパティ名も変更してください）

ブロックエディタ

このアプリでは以下の4つのイベントを使用します。

1. 位置情報が更新されたら現在位置の表示を更新
2. 「RememberButton」をクリックしたら現在位置を記憶
3. 「DirectionsButton」をクリックしたら現在位置から記憶した位置の方向を表示
4. アプリ起動時に現在位置を記憶している場合復元し、画面に表示

必要なイベントが分かり、このアプリがどのように動くかの大まかなイメージができたと思います。以下にイベントごとのブロックを組み立てた完成図と使用する部品を表に示しますので、それに倣って組み立てましょう。

【1】現在位置更新時のイベント

位置情報更新時のイベントでは、現在位置を表示するラベルに値を反映し、現在の位置を記憶するボタンを使用可能にします。以下の図5の完成図のように表にある部品を組み立ててください。

【2】RememberButtonがクリックされたときのイベント

RememberButtonがクリックされたときのイベントでは、記憶する位置情報を表示するためのラベルに現在の位置情報反映し、TinyDB1に同じ内容を記録します。また、位置を記憶したら方向を表示するボタンを使用可能にします。

では、先ほどと同じように部品を組み立ててください。

【3】DirectionsButtonがクリックされたときのイベント

DIrectionsButtonがクリックされたときのイベントでは、現在の位置情報と記憶した位置情報を使って方向を表示するためのGoogleマップ用のリクエストURIを組み立ててActivityStarterに渡し、別のアプリを起動します。このイベントも先ほどと同じように例に倣って部品を組み立ててください。

【4】アプリ起動時のイベント

アプリ起動時のイベントでは、TinyDB1に位置を保存していれば画面上の記憶した位置情報を表示するラベルに復元します。例によって、図と一覧表を見て部品を組み立ててください。

これでアプリは完成です。最後に、実際に動かしてみましょう。

センサアプリを実機でテストするには

今回使ったロケーションセンサはエミュレータでは動かないのでAndroid端末の実機で動かします。また、ケーブルを抜いても動かすために今までと違う手順でAndroid端末の実機にインストールします。

ブロックエディタでAndroid端末に接続し、一度アプリを起動します。その後、デザイナ画面の右上にある［Package for Phone］の［Download to Connected Phone］を選ぶと、Android端末の実機にダウンロードされます。

後は普通のアプリのように起動すれば、このように起動します。お好きな場所で「現在位置を記憶する」ボタンを押し、少し移動して「現在位置から記憶した位置の方向を表示」を押しすと、別のアクティビティ（Activity）が開き、現在位置から記憶した位置の方向を表示してくれます。

このとき、ケータイの位置情報を取得する機能をONにしておくことを忘れないでください。位置情報のONの仕方はAndroid端末の［設定］画面の［現在位置とセキュリティ］内の［GPS機能を使用］のチェックボックスを［ON］にすればOKです。

第7章　位置情報

(Chapter 6. Map Tour)

（Walking Tour）

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

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

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

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

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= の後に、検索したい文字列をくっつけていたのですね。

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

(chapter 5. Ladybug Chase)

てんとう虫の冒険

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

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

デザイナー画面

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

ブロックエディタ

てんとう虫

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

アブラ虫

• 食べられ
• 再生

再スタート

カエル

• 運動
• 食べる

リソース

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

OrientationSensorがないの対策

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

第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　発信

ブロックエディタ

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

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 を加えた。

Appのテスト

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

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

Twitter　写真投稿

Twitter 読み上げ？

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

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

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

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

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

次は、モグラをランダムに表示させるブロックを作ります。左側にある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」の①から②の範囲は、下の図を参考に考えて下さい。①は「０」、②は、「Canvas1.width – MoleImage1.Width」となります。

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

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

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

これです。↓

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

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

１，変数「Score」の値を１増やす。

２．変数「Score」の値を「ScoreLabel」に表示する。

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

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

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

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

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

これです。↓

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

１．変数「Score」を「0」にします。

２．変数「Score」の値を「ScoreLabel」に表示する。

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

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

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

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