Mobile Computing (3) Paint Pot

第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. ペンの太さの自由設定

Mobile Computing (1) About App Inventor

第1章 モバイルコンピューティング

Forward

Preface

ンピュータは、日常生活に様々な変化をもたらしました。

歴史的なコンピュータの利用形態の変遷は、以下とも言われる。

  • メインフレーム全盛期の集中処理

  • 分散システム(オープンシステム)の抬頭によるクライアント・サーバなどの分散処理

  • インターネットに代表されるネットワーク中心の、新しい集中処理

  • 世界に分散したユーザーがサーバを意識せずサービスを受ける、クラウドコンピューティングの処理形態

モバイルコンピューティングとは、移動中、あるいは外出先でコンピュータを利用すること。ノートパソコンや携帯情報端末の高性能化・高機能化や、携帯電話やPHSによるデータ通信の高速化に伴い、外出中でも家や職場と同様の環境を再現できるようになりつつある。携帯電話などによるデータ通信を併用する場合のみを指してモバイルコンピューティングと呼ぶ場合もある。

ICTのトレンドは、クラウド、IoT、AIへ変換しています。変わらないものは、コンピューターサイエンスであります。

スマートフォンは、様々なセンサーを装備、クラウドと繋がる能力が持つIoTデバイスと見なすことができます。

ユビキタス情報システム論は、特定のコンピューター言語にこだわらない、コンピューターサイエンスの基層知識を用いで、

みなさん手持ちのスマートフォンを教材に、センサー情報の収集、クラウドとの連携する技術を学び、

何時でも、どこでも利用できるユビキタス 情報システムの構築技法を学びます。

本コースの構成

(1-8基礎編)

(9-11ネットワーク編)

(12最終課題)

1.1 ガイダンス

1.2 環境構築 (Genymotion)