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

今回はチェックボックスを扱います。チェックボックスはアンケートなどのフォームで良く使われる形式ですが、アンケートでファイル(またはデータベース)に蓄積する部分は別途投稿します。テストアプリではチェックしている数を表示します。



ユーザインターフェースはこちら。

AppInventor2_Test005-1.png (PNG 画像, 1024x546 px) via kwout

アプリの動作はこちらの動画を確認してください。




｢Blocks｣はこちらです。

AppInventor2_Test005-2.png (PNG 画像, 1024x693 px) via kwout

1つのカウンターとチェックボックスの数だけのフラッグを使います。何れも初期処理で 0 又は"False"にします。表示の合計数(Label3)はスクリーンを開く初期処理で 0 にします。


チェックボックスの数が多いのでブロック要素が多くなっていますが、各々のチェックボックスにおける処理はほぼ同じです。チェックボックスにチェックを入れたり消したりする訳ですが、どちらかの操作をした時に変更したイヴェントを取り込みます(こちらを参照)。

AppInventor2_Test005-3.png (PNG 画像, 1024x693 px) via kwout

イヴェントを取り込むと、それまでのフラッグが｢False｣であればチェックが入っていない状態から変わった(チェックが入った)事になるので、カウンターを1加算してフラッグを｢True｣にします。それまでのフラッグが｢True｣であればチェックが外れた事になるので、カウンターを1減算しフラッグを｢｢False｣にします(こちらを参照)。

AppInventor2_Test005-4.png (PNG 画像, 1024x694 px) via kwout

そしてその時点での合計数(Label3)を変更します。


 

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

今回はスクリーンの移動とWebサイトへのアクセスがテーマです。その他に並べる表示指定をしたり、ボタンの属性(画像の利用、サイズ調整など)を設定しています。

2つのスクリーン(Screen1、Screen2)を使います。メインとなるScreen1のユーザインターフェースがこちらです。

AppInventor2_Test004-1.png (PNG 画像, 1024x545 px) via kwout

｢インターネット・サイト・ビュー｣では対応のサイトにアクセスします。｢星座ビュー｣はサムネイルに対応する画像を開きます。サムネイルを2×2で並べるのに、｢Layout｣にある｢TableArragement」を使っています。


主にScreen1のクリックボタンに対応した内容表示に使うScreen2はこちらです。

AppInventor2_Test004-2.png (PNG 画像, 1024x550 px) via kwout

Screen2にはWebViewerを指定しておきます。この時点では表示するエリアだけ確保している状態です。



実際の動作はこちらの動画を参照してください。




Screen1の｢Blocks｣はこちらです。

AppInventor2_Test004-3.png (PNG 画像, 1024x682 px) via kwout

ボタン毎にクリックしたらScreen2を指定してスクリーンを開きます(こちらを参照)。

AppInventor2_Test004-4.png (PNG 画像, 1024x680 px) via kwout

ここではScreen2に渡す情報として｢startValue｣も指定しています。



Screen2での｢Blocks｣はこちらです。

AppInventor2_Test004-5.png (PNG 画像, 1024x682 px) via kwout

Screen2の起動イヴェントは、スクリーンが開かれた事による初期化処理です(こちらを参照)。

AppInventor2_Test004-6.png (PNG 画像, 1024x680 px) via kwout

初期化処理の中でScreen1から渡された情報を判別します(こちらを参照)。

AppInventor2_Test004-7.png (PNG 画像, 1024x679 px) via kwout

渡された情報は｢get start value｣で受け取ります(こちらを参照)。

AppInventor2_Test004-8.png (PNG 画像, 1024x682 px) via kwout

Webサイトへのアクセスには｢GoToUrl｣を使います(こちらを参照)。

AppInventor2_Test004-9.png (PNG 画像, 1024x679 px) via kwout

Screen2での｢Blocks｣では、イヴェントとしての「戻る」ボタンでScreen1に移動する処理もあります。


 

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

今回はテキストの読み上げに関連するアプリです。ユーザ・インターフェースはこちらです。

AppInventor2_Test003-1.png (PNG 画像, 1360x729 px) - 表示倍率 (92%) via kwout

スクリーンに背景画像を設定し、ボタンのデザインもデフォルトから変更しています。また、｢Designer｣で｢Media｣にある｢TextToSpeech｣を組み込んでおきます。サムネイル画面上には表示されませんが、｢Components｣に登録されます(こちら)。

AppInventor2_Test003-2.png (PNG 画像, 1362x728 px) - 表示倍率 (92%) via kwout

このアプリでは、｢お試し発声｣をクリックすると｢I love you｣と話し、テキストを入力して｢入力テキスト発声｣をクリックするとその通りに発音します。更に｢Your name?｣に応えて名前を入力すると、｢hanako｣とした場合と他で｢ご挨拶の発声｣をクリックした答え方を変えています。実際こちらの動画を参照。

｢Blocks｣はこちらの様になっています。

AppInventor2_Test003-3.png (PNG 画像, 1358x728 px) - 表示倍率 (92%) via kwout

各ボタンをクリックしたら動作する様になっています。発声の処理は｢Speak｣ブロック要素を組み込んで、発生するテキストを指定します(こちら)。ボタン1では直接テキストを指定し、ボタン2ではテキストボックス１で入力されたテキストになります。

AppInventor2_Test003-4.png (PNG 画像, 1035x610 px) via kwout

ボタン3をクリックした場合の流れでは、｢Control｣にある比較判定を使います(こちら)。

AppInventor2_Test003-5.png (PNG 画像, 1035x608 px) via kwout

また｢Text｣にある文字列の結合を使っています(こちら)。

AppInventor2_Test003-6.png (PNG 画像, 1034x607 px) via kwout

 

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

使い方を理解する所から始めているので、暫くは基本的な内容を確認していきます。

前回の｢Hello World｣と同様ですが、画像を組み込む事とボタンをクリックすると(それまでの表示を残して)指定の位置にメッセージを表示します(こちらとこちら)。

AppInventor2_Test001-1.png (PNG 画像, 1024x546 px) via kwout

組込む画像ファイルは｢Properties｣で指定します。但し、日本語のファイル名は使えません。

AppInventor2_Test001-2.png (PNG 画像, 1024x546 px) via kwout

｢Blocks｣のブロックを組立てた様子がプログラム・ソースになります。

イヴェント・ドリブンな構築方法になりますので、｢Button1｣をクリックし、対応の制御をするブロック要素を選択します(こちら)。

AppInventor2_Test001-3.png (PNG 画像, 1024x591 px) via kwout

｢Label1｣に値を設定する様にします(こちら)。

AppInventor2_Test001-4.png (PNG 画像, 1024x592 px) via kwout

｢Label1｣に｢ようこそ！｣を設定するのがこちら。

AppInventor2_Test001-5.png (PNG 画像, 1024x591 px) via kwout

数値を設定する時は｢Math｣から、論理値は「Logic」から選択します。

【改訂】　2015年08月07日　00：30　画像ファイル名の記述追加

 

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

こちらの記事に引かれて(･･･？！)、｢App Inventor 2｣（以下、AI2）というAndroidアプリが作れるクラウドベースの開発環境を使ってみる事にしました。テキストベースのプログラミング手法ではなく、ブロックを組立てていくビジュアル・プログラミング言語です。

• プロ生ちゃん（CV 上坂すみれ）ボイスがさらに使いやすくなりました！【2015/07/31】

プロ生ちゃん（CV 上坂すみれ）ボイスがさらに使いやすくなりました！ | プログラミング生放送 via kwout

こちらの記事に従って先ず、AI2開発環境をインストールします。システム環境としてはWindows 7＋Chromeブラウザとしました。Windows 8.1で試みましたが、実行環境の方が動作しません(但し、本記事を作成するに当たっては、我家のPC環境から開発環境はWindows 8.1を使い、実行はWindows 7のエミュレータ環境とします)。

• ビジュアルプログラミング言語 MIT App Inventor2 メモ【2014/01/12 】

記事の通りの作業で容易にできますが、インストール直後に『3.PCのAppInventor2で、「Connect」-「Emulator」を選択｣』からエミュレータで作ったアプリを起動する所が上手くいきませんでした。記事にもある通り、エミュレータを終了し、再立上げし直して接続すると上手く起動できました。

最初のアプリは、プログラミング環境の確認をする為に良く使われる｢Hello World｣です。画面上の｢OK｣ボタンを押すと｢Hello World｣というメッセージを表示します。こちらとこちら。

AppInventor2_HelloWorld-1.png (PNG 画像, 1024x546 px) via kwout

AppInventor2_HelloWorld-2.png (PNG 画像, 1024x546 px) via kwout

作成要領は上掲のこちらに書かれています。



今後サンプルアプリを作りながらどの程度のアプリができるのかを見ていきたいと思います。