AI2(3) Mole Mash
第4章 アニメーション(Mole Mash) (Chapter 3. MoleMash) **Mole Mashは、**ゲームセンターによくあるもので、画面のデザイン、Campas部品、さらにImageSprite使い方が学べます。 表3- 1 “もぐら叩き”アプリ中のコンポーネント一覧 コンポーネント パレット 命名 用途 Canvas Drawing and Animation Canvas1 ImageSpriteのコンテナ ImageSprite Drawing and Animation Mole タッチ目标 Button User Interface ResetButton スコアリセット Clock Sensors Clock1 移動速度 Sound Media Sound1 的中された際振動 Label User Interface HitsLabel 的中と表示 Label User Interface HitsCountLabel 的中数の表示 HorizontalArrangement Layout HorizontalArrangement1 HitsLabelとHitsCountLabel置き場 Label User […]
AI2(2) 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は完成です! 完成したプログラム 動作確認 改造 ペンの太さの変更(大丸、小丸) 現在の色、ペンの太さの表示 ペンの太さの自由設定
AI2(1) Hello Purr
第2章 UI (Chapter 1. Hello Purr) Hello Purrは最初に学ぶ、AI2のプログラム、画面のデザイン、ボタン部品の使い方が学べる。 App Inventor のチュートリアル 画像をクリックすると、「ニャー」と猫の鳴き声がするアプリを作る 素材の準備 チュートリアルページよりダウンロード http://appinventor.mit.edu/explore/ai2/hellopurr.html Kitty picture: png Meow sound: mp3 MIT App Inventorのプログラミング環境 Chromeブラウザを開き、http://ai2.appinventor.mit.edu/ を入力する (教室の機材はプロキシの認証画面が出たら、指示した内容を入力する) Google アカウントでログインする (自分のGoogle アカウント、または演習用アカウントtest @edu2web.comを利用する) ウインドウがPopupしていれば、Continueボタンを押して先に進む。 すでに作成済みのProjectがあれば、それが見える。 今回はHellopurr という Project を新規に作る メニューから「Project」→「Start new project」を開き、「Project nameを入れ」→「OK」順に操作。Project name はhellopurrとする。 画面の右上に「Designer」「Blocks」がある。Designerは、ユーザインタフェースを、Blocksは処理を書くためにあるので、適宜切り替える アプリの作成は3ステップで完了 デザイン画面にボタンのブロックを置いてボタンに猫の写真を配置 メディア・コンポーネントのサウンド・ブロックを置いて猫の鳴き声のオーディオファイルとリンク 「when Button1.Click」を置き、その中に「call Sound1.Play」のブロックを組み込み スマホ・アプリ動作確認 エミュレータデバイスにまたはAndroid機材に接続し、猫をタッチしてみて、なき声を確認。 最後不要な文字の消去、説明のラベルの追加など、アプリの形を整える。 QRコードでスマホにスキャンさせ、ダウンロードしてインストールして動作を確認する、またはPCにapk fileとして保存して、配布する […]
AI2(0) Guidance
第1章ガイダンス コンピュータは、日常生活に様々な変化をもたらしました。 歴史的なコンピュータの利用形態の変遷は、以下とも言われる。 メインフレーム全盛期の集中処理 分散システム(オープンシステム)の抬頭によるクライアント・サーバなどの分散処理 インターネットに代表されるネットワーク中心の、新しい集中処理 世界に分散したユーザーがサーバを意識せずサービスを受ける、クラウドコンピューティングの処理形態 モバイルコンピューティングとは、移動中、あるいは外出先でコンピュータを利用すること。ノートパソコンや携帯情報端末の高性能化・高機能化や、携帯電話やPHSによるデータ通信の高速化に伴い、外出中でも家や職場と同様の環境を再現できるようになりつつある。携帯電話などによるデータ通信を併用する場合のみを指してモバイルコンピューティングと呼ぶ場合もある。 ICTのトレンドは、クラウド、IoT、AIへ変換しています。変わらないものは、コンピューターサイエンスであります。 スマートフォンは、様々なセンサーを装備、クラウドと繋がる能力が持つIoTデバイスと見なすことができます。 ユビキタス情報システム論は、特定のコンピューター言語にこだわらない、コンピューターサイエンスの基層知識を用いで、 みなさん手持ちのスマートフォンを教材に、センサー情報の収集、そしてクラウドとの連携する技術を学び、 何時でも、どこでも利用できるユビキタス 情報システムの構築技法を学びます。 本コースの構成 (1-7基礎編) (8-10ネットワーク編) (総合編11-13) スマホ・アプリ開発 世界の携帯電話契約数は世界の人口を上回った。携帯電話中スマホの普及率は67.4%、スマホの販売数はパソコンを超えた、動画視聴ネットショッピングに使用する機器は、スマホがパソコンを超えた!! スマホ・アプリ開発人材不足のため、求人が増えた。 スマホOSのシェアは、主にAndroidとiOSであり。日本にはほぼ半々だが、全世界の場合Androidは78%。 ゲームが作りたい、でもアイディアがない、プログラミングがわからない! 「100万のタマゴ」を検索してみましょう — 「誰もやりたくないアプリ」を3日でつくったら、広告収益3,500万円超え。800万ダウンロードの無駄タップアプリ「100万のタマゴ」が世界各国でヒットするまで。 スマホ・アプリ開発は、従来のプログラミングとビジュアルプログラミングがある。従来のプログラミングは習得まで時間がかかるが、ビジュアルプログラミングは入門がすぐでもできる。 MIT App Inventorとは Android用ビジュアル プログラミング コーディングなし、プログラムの部品をドラッグ&ドロップで組み合わせるだけでできる。 使ってみたいアプリを自分で作る ひらめいたアイデアから簡単にアプリが作ることができる、プロトタイプにも適する 実用のアプリ開発も可能 Java プログラマー向けの Android アプリ開発の解説書の例題10戦全勝 MIT App Inventorできること Googleはコンピュータ科学専攻ではない大学生、看護学生、女子高生、小学生などを対象にApp Inventorのテストを行ってきた。サンフランシスコ大学の学生は車の運転中に送られてきたテキストメッセージに自動返信するアプリを作成。看護学生は加速度センサーを用いて患者が倒れたときに、患者の携帯電話から救急メッセージが送信されるようにした。レゴマインドストームというロボットもプログラムで動かす。 準備するもの PC Webブラウザ (ChromeかFirefoxを推薦。IEはサポート外) MIT Appinventor Tools Windows […]