コンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践 (2) お絵かきアプリの応用 1
コンピュータと論理A
第8回 2020年6月17日App Inventorによる
Androidアプリ開発の実践(2) お絵かきアプリの応用
1
今回の授業内容
• お絵かきアプリの続きを作る– ラクガキの線の色を変える
– ラクガキの線の太さを変える
– デコ画像を表示する
– デコ画像を動かす
– デコ画像を変える
– デコ画像を拡大・縮小する
– デコ画像を回転する
• Wordでレポートを書く
2
お絵かきアプリの続きを作る
3
4
画像をダウンロードする
ここからそれぞれ1つ選んで保存
これらもとりあえず保存
5
線の色を変えられるようにする
6
線の色を変えられるようにする
色を半角カンマで区切る
7
線の太さを変えられるようにする
数字を半角カンマで区切る
8
線の色・太さを変えられるようにする
9
線の色・太さを変えられるようにする
10
線の色・太さを変えられるようにする
11
線の色・太さを変えられるようにする
12
線の色・太さを変えられるようにする
13
線の色・太さを変えられるようにする
14
線の色を変えられるようにする
15
線の太さを変えられるようにする
右クリックでメニュー
スプライトとは
キャンバス上を動き回る画像のこと
16
17
デコ画像を表示する
0
18
デコ画像を表示する
19
デコ画像を動かす
20
デコ画像を動かす
• 上方向はy座標の値を減らす(下方向は増やす)
• 左方向はx座標の値を減らす(右方向は増やす)
21
デコ画像を動かす
22
デコ画像を変えられるようにする
ここにファイルを追加しておく
23
デコ画像を変えられるようにする
デコ画像の種類を増やす
24
デコ画像を表示しない選択肢をつくる
• 各自用意してきた画像を追加する(または差し替える)
• 線の色・太さのバリエーションを増やす
• 画像の拡大/縮小機能を付ける
• 画像の回転機能を付ける
• 画像が加速度センサーで動くようにする→資料「【発展編】デコ画像を加速度センサーで動かす」を参照する
25
応用する
26
一時的に高さ(Height)を10にして下にスペースを作る.ボタンを足して設定したら高さを戻す.
ボタン追加のヒント
勢いあまって4つボタンを追加しましたが「拡大」「縮小」「回転」なら3つですね…
• 拡大/縮小は倍率を指定する
• 回転は角度の値を減らす(時計回りの場合)
27
拡大/縮小・回転のヒント
WORDでレポートを書く
28
課題レポートについて
• 注意点
• レポートの構成
• 提出方法・提出期限
29
課題レポートについて
• 注意点
– Microsoft Wordで作成する
–レポートの冒頭に,科目名・タイトル・所属・学生番号・氏名・提出年月日を入れる
–決められた構成で書く
–サンプルをよく見てまねて書く
–提出方法・期限を守る
–困ったことがあったら期限前に担当教員に相談する → [email protected]
30
課題レポートについて
• レポートの構成
1. アプリの概要
• 特徴・機能など詳細に書く。
2. デザイナ画面
• 各コンポーネントの説明も入れる。
3. ブロックエディタ画面
• (変数があれば)各変数の説明も入れる。
4. 実行画面・操作方法
5. 工夫した点
31
課題レポートについて
• タイトル
–お絵かきアプリの制作
• 提出方法
–講義用ウェブサイトからレポートとアプリをアップロードする
• 提出期限
– 6月30日(火)23:59
32
振り返りを提出
• 16:00になったら作業を終わりにし(まだ作業中であっても一度中断),manabaの「小テスト」から「振り返り課題」を提出する.
• 本日の振り返り課題は,実行画面のアップロードがあるため,エミュレータで実行した人はPCから,Androidスマホで実行した人はそのスマホからmanabaにアクセスして提出する.
• 振り返り課題を提出したら終わってよい.ただし作業がまだ残っている場合は次週の授業開始前までに終わらせておく.
33