MIT App Inventor2 アプリケーション開発のための手引き [part4]

MIT App Inventor2 アプリケーション開発のための手引き [part4]
山本富士男 2015- 11-27
1. 今回のねらいと検討題材
これまで３回の講座内容を基礎として、さらに App Inventor を使ったプログラミングを掘り下げます。
今回は、以下の３つを題材にして検討します。
(1)
マルチスクリーン間でのデータの受け渡し（スライダーとチェックボックスも利用）
(2)
外部プログラムを起動する Activity Starter を使う（Google Maps 検索、QR コード作成など）
(3)
コンパクトドキュメントビューアの作成（実用性を高めるためのアイディアと設計も検討）
2. マルチスクリーン間のデータの受け渡し
［概要］前回のスクラッチ（画面を指で削る）をマルチスクリーン化します。何のために？
(1) 削る線幅を変更可能とし、削る際に振動（バイブレーション）を起こして実感を持たせる。
(2) 線幅は「スライダー」で変更し、振動の有無は「チェックボックス」で指定する。
(3) その「設定」は、別スクリーンで行う。
(4) デフォルトの Screen1 以外に、任意の名前のスクリーンを設定できるが、その名前は変更できない。
(5) 各スクリーンは同じ同一アプリに属するが、各スクリーンは独立しており、別のスクリーンに設置し
たコンポーネントは参照できない。
(6) そのため、スクリーン間でデータを１つだけ渡す仕組み（関数の返値に相当）がある。
(7) それ以外に、いくつかのデータを受け渡したい場合は、TinyDB を使うとよいだろう。
「削る線幅の設定」と「バイブレーシ
ョン指定」を別スクリーンで行うよう
にしてみよう。そのため、
「Settings」という名前のスクリーン
を作る。
最初の Screen1 で「設定」ボタンを
押すと Settings スクリーンへ行くよ
うにするには、以下のブロックを使
う。
Setting スクリーンが閉じられて、
Screen1 へ戻ってきた時に、result を受け
取るには、以下のようにする。ここでは、
線幅の値を result で受け取り、それを変数
lineWidth へ設定している。その線幅でス
クラッチが行われるようにする。
[ここからは別のスクリーン：Settings]---------------------------------------------------------------------------もうひとつのスクリーン Settings のデザイナーでは右のように設定する。すなわ
ち、スライダーを設置して、そのつまみの位置が変わった場合に、その値をラベル
に表示する。この例ではつまみの位置は 12 となっている。
「戻る」ボタンを押した時の処理を以下のようにすると、Setting スクリーンが閉じられ、スライダーの値
が、Screen1 側に伝えられる。すなわち、上記に示した result を渡すことになる。（vibrate については後
で述べる。）
さて、もうひとつやりたい
ことがある。チェックボック
ス vibrate にチェックが付い
ていれば、Screen1 で画面を
削った際に、振動させること
である。チェックボックスの
状態を Screen1 に伝えるた
め、TinyDB を使う。
すなわち、キーxvibrate に
対して、true か false を値と
して格納することになる。
「線幅設定」と「バイブレーション設定」を実現したスクリーン Settings 側の全体ソースが上図である。
[ここまでは別のスクリーン：Settings]---------------------------------------------------------------------以下に、Screen1 側の完成版のブロック図も示しておく。
3. 他の Android プログラムを起動するための Activity Starter
(1) 他の Android プログラム（組み込まれているアプリ
や、Java や App Inventor で作成したプログラムな
ど）を起動する Activity Starter ブロックが使え
る。
(2) そのためには、起動されるプログラム側のいくつか
の情報（intent に関する）が必要である。
(3) メーカーからそれらの情報が提供されている場合も
ある。（例えば、Evernote など）そうでなくて
も、既存のプログラムを調査して、必要な情報を取
得できる場合もある。
(4) 呼び出す際にデータ（パラメータ）を与えたり、起
動されたプログラムから返値を受け取れる場合もあ
るが、そのプログラムの処理に依存する。
(5) 呼び出されたプログラム画面で、Android の「戻
る」ボタンを押すと、呼び出し側へ戻ってくる。
(6) ここでは簡単な起動例を 4 つ示す。
以下の４つを起動するブロックです。ActivityStarter のいくつかの必要なプロパティ（動作の種類、プロ
グラムのクラス、そのパッケージなどの情報）を設定し、StartActivity を起動します。
•
Google Maps 検索
•
電卓を出す
•
Google Play でアプリや書籍を検索
•
QR コードを作成
4. コンパクトドキュメントビューア
ちょっとした時間に（電車の中やレストランなどで）、講義スライドや配付資料などを手軽に復習できる
「コンパクトドキュメントビューア」はどうだろうか。まず、以下のようなものを試作しよう。
•
４つほどのボタンを置く。
•
どれかを押すと、資料（pdf, word, excel などの）を閲覧できる。
•
資料のタイトルはボタンに表示され、現在見ている資料のタイトルは赤字になる。
設計は色々と考えられるでしょう。小さなプログラムであっても、アイディアと設計は非常に重要と思いま
す。ここでは、最初のバージョンとして以下のように作ります。
(1) ドキュメント（pdf, word, excel など）は web にあるとする。
(2) ドキュメントのリンクと、ドキュメントのタイトルをリストとして、このアプリに設定する。
(3) それらにリストのインデックスに対応した番号のボタンを用意する。
(4) そのボタンを押した時に、対応ドキュメントのタイトルがボタンに表示される。また、現在、そのド
キュメントを見ていることを示すため、そのボタンの文字は赤色にする。
(5) 同時に、WebViewer.GoToUrl によってドキュメントを表示させる。
最初のバージョンのブロック図は以下のようになるでしょう。
ボタン、ドキュメントタイトル、ドキュメントリンクのリストを設定する。
次に、各ボタンを押した時の動作（処理）をプロシージャー（関数）の形にします。
getDocTitle は、ボタン番号（index）に対して、対応するドキュメントのタイトルを返す関数です。
getDoc は、同様にボタン番号（index）に対応するドキュメントを、WebViewer で表示させます。この
際、他のボタンの文字を黒色にして、現在のボタンの文字だけを赤色にしています。
なお、この例で使用しているドキュメントのリンク（文字列）は下記にありますので、利用して下さい。
http://kaitxcsxinfo.com/ap/?page_id=17 にある forCompactViewer.docx
各ボタンを押した際の動作は図の
ブロックで表せます。
ドキュメントタイトルを得るため
の getDocTitle と、ドキュメント
本体を表示させるための getDoc
を呼び出すだけになっています。
５．コンパクトドキュメントビューアを拡張する
さて、このドキュメントビューアですが、実用性を高めるためのア
イディアは色々とありそうです。その１つは、見るドキュメントを固
定するのではなく、自由に、取り替えられるようにすることです。
•
ドキュメントのタイトルとドキュメントのリンクを、このアプリ
の外部から設定する。そのための１つの方法は、TinyWebDB を
使うことです。リンクの文字列が長いので、Android ではやりに
くいですが、TineWebDB は PC のブラウザからも設定できるの
で、それを使うと良いのではないでしょうか。
•
いったん見たドキュメントを Android の SD カードに保存して、
次回からはそこから表示するオプションも有用です。