ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(25)

今回は前回と同様に｢Lists｣を使いながらデーターベース(TinyDB)をもう少し高度に使いますが、表示上は如何にもデーターベースの内容を表示しているように見えるテストアプリです。表示する内容を決めるのは｢Spinner｣による一覧ではなく、テキスト入力したデータをキーとして検索します。



テストアプリを起動するとUIはこちらの様になっています。


検索した結果の表示がこちら。


かな漢字変換ができませんので、ローマ字入力しています。



実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらとこちらです。



初期処理で検索対象の内容から成るデータベースを構築しています。検索でデータベースに対応するキーがない場合は、null値のチェックで分かりますが、ここではキー値のリストに有るか無いかで判断しています。位置固定なのでIndex値は数値指定でもいいのですが、表示項目の選択も可能なスペックを考慮しています。



これでビジュアル・プログラミング言語｢App Inventor 2｣の"使ってみる"シリーズ(？)を一旦終わりとします(上掲の動画のBGMが"蛍の光"になっているのは、偶々動画の長さとBGMの長さがマッチしたからです･･･)。この言語システムはプログラミングに関する教育が主目的なので、現実的なシステム開発には向きませんが、Androidスマホ向け個人利用の簡単なアプリであれば使えると思います。今後もチョッとしたアプリを作ったら投稿したいと思っています。

但し、｢App Inventor 2｣の全ての機能を記事の中で使ってはいませんし、限界まで使った訳でもありません。データベースの保存場所の様に安定して確保できるようにする事も必要になりますので、興味を持てた場合には、更にテストアプリなどで機能などを調べてみる事をお勧めします。



今後プログラミング言語について更に幾つかのシステムをチェックしてみたいと思っています。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(24)

今回は｢Lists｣を使いながらデーターベース(TinyDB)をもう少し高度に使う事にします。実際に｢TinyDB｣ではデータ部が1つしか扱えないので、｢Lists｣としてフィールドをIndexの位置で分けて扱います(最近のプログラミング言語は、Indexが0から始まりますが、ここでは1から)。



テストアプリを起動するとUIはこちらの様になっています。


これまでと同様に｢Spinner｣により山名を選択し、山の解説をテンプレートに埋め込んでテキストの結果を表示します(こちらを参照)。




実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらとこちらです。



初期処理としてデータベース内容を作っています。｢Lists｣をテキストで表示するとテキストを連結してくれるので、文章として表現しています。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(23)

今回は｢Lists｣を使いながらエラーチェックするテストアプリです。


テストアプリを起動するとUIはこちらの様になっています。


前回と同様に｢Spinner｣により選択した都市を、状況に応じた処理に使って結果を表示します(こちらを参照)。




実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらです。


プログラムを見やすくする為に"リスト表示"として｢Procedures｣にまとめています。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(22)

今回は｢Built-in｣されている｢Lists｣の基本的な操作をするテストアプリです。前回に使ったデーターベース(TinyDB)をもう少し高度に使う時に必要になります。



テストアプリを起動するとＵＩはこちらの様になっています。



上部メニューにあるボタンは、基本操作をアプリ内で行って結果だけを表示します。内容は下の｢Blocks｣で、ボタン1～5に対応するイヴェント操作を確認してください。

下部のボタンはこちらの｢Spinner｣により選択した都市を、状況に応じた処理に使って結果を表示します。




実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらとこちらです。





｢Lists｣の｢Built-in｣ライブラリーは多数あります(こちら)。


テストアプリについて補足すると、「新規」と｢追加｣は｢,｣を入れているか否かです。｢,｣を付けると｢ElementsFromString｣に対する追加で、そうでなければリストに対する追加になります。リストはカッコを付けて表現します(｢クリア｣の時の表示の例を参照)。

尚このアプリではエラー処理は入っていませんので、次回に別のテストアプリとして確認します。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(21)【改訂】

今回はデーターベース(TinyDB)の入出力をするテストアプリです。

テストアプリを起動するとＵＩはこちらの様になっています。



｢一覧表示｣をクリックするとWebサイトのリスト表示になります(こちら)。


｢JAXA｣を選択すると、前の画面で｢JAXA｣のWebページを開きます(こちら)。




実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらです。



｢Screen｣の初期処理でWebサイト名をキーとしURLをデータとして登録します。｢GetTags｣でリストとしてキーワードを抽出し｢ListPicker｣に設定します(こちらを参照)。


選択したWebサイト名によりURLが取り出されて｢WebViewer｣に渡されます。



【改訂】2015年08月29日　23：15　画像の設定変更


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(20)

今回はテキストファイルをローカルで入出力するテストアプリです。

テストアプリを起動するとＵＩはこちらの様になっています。

AppInventor2_Test021-01.png (PNG 画像, 1024x549 px) via kwout

(英数字)文字を入力して何度か保存した後、文字を何もいれないでボタンを押すと入力モードを終了して、それまでの入力したテキストを全て表示します(こちらを参照)。

AppInventor2_Test021-02.png (PNG 画像, 1024x550 px) via kwout

実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらです。

AppInventor2_Test021-03.png (PNG 画像, 1024x664 px) via kwout

ボタンの表示・意味を変えながらモードの移動(保存・追加・表示・削除)をします。ファイルの入出力に関しては、｢SaveFile｣→｢AppendToFile｣で出力し、｢ReadFrom｣→｢GotText｣で入力します。複数回の｢AppendToFile｣で出力した結果は、1回の｢GotText｣で取得します(こちらを参照)。

AppInventor2_Test021-04.png (PNG 画像, 1024x669 px) via kwout

最後はテキストファイルを削除して次のテキストファイル生成に戻ります。今回はファイル名を固定していますが、テキストを結合しているのはファイル名を外部から与えられる様にする準備でもあります・・・


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(19)

今回は初歩的なピンボールゲームができるテストアプリです。

テストアプリを起動するとＵＩはこちらの様になっています。

AppInventor2_Test019-01.png (PNG 画像, 1024x547 px) via kwout

バーをクリックするとゲームが始まり、上端からボールが落ちてくるのをバーを左右に動かして跳ね返します(こちらを参照)。

AppInventor2_Test019-02.png (PNG 画像, 1024x550 px) via kwout

最初に落ち始める上端の場所は乱数で決まります。バーで跳ね返せずに下端に達したら終了ですが、"カウントダウン"が0になるまで繰り返しやり直しできます。初期は難易度1でスタートしますが、5までの難易度を設定出来ます。難易度が高くなればボールの落下スピードが速くなります。



実際の様子はこちらの動画で確認できます。


中盤以降は徐々に試合放棄モード(？)でアプリを終わらせようとしています・・・



これを実現している｢Blocks｣はこちらとこちらです。

AppInventor2_Test019-03.png (PNG 画像, 1421x730 px) - 表示倍率 (94%) via kwout

AppInventor2_Test019-04.png (PNG 画像, 1416x730 px) - 表示倍率 (94%) via kwout

処理の内容は前３回分で｢ImageSprite｣と｢Ball｣を扱った時と同じです。新しい点は｢ImageSprite｣と｢Ball｣を同時に扱っている事と、乱数を使っている事です。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(18)

今回はボールを壁に45度の角度で当てるテストアプリです。

テストアプリを起動するとＵＩはこちらの様になっています。既にボウルは45度の角度で動いていて、キャンバス(Canvas)の上下左右端でバウンドします。それも45度です。スライダーでボールの大きさを変更でき、矢印は各ボールの移動中に45度での力を加える事ができます。

AppInventor2_Test018-1.png (PNG 画像, 1024x547 px) via kwout

実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらです。

AppInventor2_Test018-02.png (PNG 画像, 1379x720 px) - 表示倍率 (96%) via kwout

ボールの移動方向を指定する｢Heading｣Propertyは、水平右方向を0度とし時計の逆回りに角度を指定します。そこでアプリの処理上で｢Angle｣変数に対して時計回りで見る角度をマイナス角度として処理を作っています。

ボールが上下左右端の何れかに当たると、ライブラリー｢EdgeReached｣は｢edge｣で上端：1・下端：-1・右端：3・左端：-3を返します。この｢edge｣を判別して当たった後の方向(角度)を計算しています。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(17)

今回は3つのボールが別々の動作する中で、前回と同様にキャンバス(Canvas)の端で壁に当たるようにバウンドするテストアプリです。



テストアプリを起動するとUIはこちらになっています。2つのボールが交差した時は色の交換をします。

AppInventor2_Test017-01.png (PNG 画像, 1124x600 px) via kwout

マウスによるドラッグで位置を変更する事にも対応しています。



実際の様子はこちらの動画で確認できます。

これを実現している｢Blocks｣はこちらとこちらです。

AppInventor2_Test017-02.png (PNG 画像, 1305x720 px) via kwout

AppInventor2_Test017-03.png (PNG 画像, 1313x720 px) via kwout

今回は｢ImageSprite｣ではなく｢Ball｣を使っています。｢ImageSprite｣では表示対象がないので画像を指定しましたが、｢Ball｣では(色・サイズ指定する必要がありますが)円に決まっています。｢Dragged｣や｢EdgeReached｣などのライブラリーは同じ動きをしますから、「上下」・｢左右｣の移動に関しては前回と同様になっています。

中心課題はボールが重なった(相互に触れた)時の動作で、｢CollidedWith｣と｢NolongerCollidingWith｣を使います(こちらを参照)。

AppInventor2_Test017-04.png (PNG 画像, 1318x720 px) via kwout

2つのボールが重なった時色の交換をしていますが、複数の｢CollidedWith｣処理が全く同時に動いている訳ではなく、処理の順番によって誤った結果になります。他のボウルでの色交換の処理が終わるまで残しておき、後の順番になっている処理で保存してある色を使うようにしています。

また、｢CollidedWith｣のイヴェントは重なっていると常に一定のインターバルで発生するので、重なった最初のイヴェントを"Connection"フラッグで区別しています。重なりが終了した事は｢NolongerCollidingWith｣のイヴェントで知る事ができます。


尚、今回のテストアプリには3つのボールが(直接・間接問わず)重なった時の処理は入っていません。従って全てのボールが同じ色になる事があります(上掲の動画でもそのようになっています・・・)。


 

ブロックを組立てていくビジュアル・プログラミング言語｢App Inventor 2｣を使ってみる(16)

今回はキャンバス(Canvas)上で画像が自動で移動するテストアプリです。



テストアプリを起動するとUIはこちらになっています。ビーチボールが左右に動いていて、キャンパスの端でバウンドする様になっています。

AppInventor2_Test016-01.png (PNG 画像, 1024x546 px) via kwout

上部ボタンでビーチボール動作の停止/開始、上下/左右への方向変更ができます。また、マウスでドラッグして自由な位置に移動もできます。



実際の様子はこちらの動画で確認できます。




これを実現している｢Blocks｣はこちらです。

AppInventor2_Test016-02.png (PNG 画像, 1024x710 px) via kwout

ビーチボールの移動は特にアルゴリズムを記述している訳ではなく、｢ImageSprite｣のPropertiesとして｢Speed｣・「Interval」と「Heading」で移動の速さと方向を初期設定(又は初期値)で指定し、｢EdgeReached｣ライブラリーで壁面｢edge｣値を指定しているだけです(こちらを参照)。

AppInventor2_Test016-03.png (PNG 画像, 1024x709 px) via kwout

ドラッグでの移動は｢Dragged｣ライブラリーでビーチボールの位置をドロー中の現在ポイントに指定しています。