コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理a...

33
コンピュータと論理A 82020617App Inventorによる Androidアプリ開発の実践 (2) お絵かきアプリの応用 1

Upload: others

Post on 04-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

コンピュータと論理A

第8回 2020年6月17日App Inventorによる

Androidアプリ開発の実践(2) お絵かきアプリの応用

1

Page 2: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

今回の授業内容

• お絵かきアプリの続きを作る– ラクガキの線の色を変える

– ラクガキの線の太さを変える

– デコ画像を表示する

– デコ画像を動かす

– デコ画像を変える

– デコ画像を拡大・縮小する

– デコ画像を回転する

• Wordでレポートを書く

2

Page 3: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

お絵かきアプリの続きを作る

3

Page 4: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

4

画像をダウンロードする

ここからそれぞれ1つ選んで保存

これらもとりあえず保存

Page 5: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

5

線の色を変えられるようにする

Page 6: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

6

線の色を変えられるようにする

色を半角カンマで区切る

Page 7: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

7

線の太さを変えられるようにする

数字を半角カンマで区切る

Page 8: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

8

線の色・太さを変えられるようにする

Page 9: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

9

線の色・太さを変えられるようにする

Page 10: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

10

線の色・太さを変えられるようにする

Page 11: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

11

線の色・太さを変えられるようにする

Page 12: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

12

線の色・太さを変えられるようにする

Page 13: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

13

線の色・太さを変えられるようにする

Page 14: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

14

線の色を変えられるようにする

Page 15: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

15

線の太さを変えられるようにする

右クリックでメニュー

Page 16: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

スプライトとは

キャンバス上を動き回る画像のこと

16

Page 17: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

17

デコ画像を表示する

0

Page 18: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

18

デコ画像を表示する

Page 19: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

19

デコ画像を動かす

Page 20: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

20

デコ画像を動かす

Page 21: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

• 上方向はy座標の値を減らす(下方向は増やす)

• 左方向はx座標の値を減らす(右方向は増やす)

21

デコ画像を動かす

Page 22: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

22

デコ画像を変えられるようにする

ここにファイルを追加しておく

Page 23: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

23

デコ画像を変えられるようにする

デコ画像の種類を増やす

Page 24: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

24

デコ画像を表示しない選択肢をつくる

Page 25: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

• 各自用意してきた画像を追加する(または差し替える)

• 線の色・太さのバリエーションを増やす

• 画像の拡大/縮小機能を付ける

• 画像の回転機能を付ける

• 画像が加速度センサーで動くようにする→資料「【発展編】デコ画像を加速度センサーで動かす」を参照する

25

応用する

Page 26: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

26

一時的に高さ(Height)を10にして下にスペースを作る.ボタンを足して設定したら高さを戻す.

ボタン追加のヒント

勢いあまって4つボタンを追加しましたが「拡大」「縮小」「回転」なら3つですね…

Page 27: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

• 拡大/縮小は倍率を指定する

• 回転は角度の値を減らす(時計回りの場合)

27

拡大/縮小・回転のヒント

Page 28: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

WORDでレポートを書く

28

Page 29: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

課題レポートについて

• 注意点

• レポートの構成

• 提出方法・提出期限

29

Page 30: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

課題レポートについて

• 注意点

– Microsoft Wordで作成する

–レポートの冒頭に,科目名・タイトル・所属・学生番号・氏名・提出年月日を入れる

–決められた構成で書く

–サンプルをよく見てまねて書く

–提出方法・期限を守る

–困ったことがあったら期限前に担当教員に相談する → [email protected]

30

Page 31: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

課題レポートについて

• レポートの構成

1. アプリの概要

• 特徴・機能など詳細に書く。

2. デザイナ画面

• 各コンポーネントの説明も入れる。

3. ブロックエディタ画面

• (変数があれば)各変数の説明も入れる。

4. 実行画面・操作方法

5. 工夫した点

31

Page 32: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

課題レポートについて

• タイトル

–お絵かきアプリの制作

• 提出方法

–講義用ウェブサイトからレポートとアプリをアップロードする

• 提出期限

– 6月30日(火)23:59

32

Page 33: コンピュータと論理mmt1.cs.tohoku-gakuin.ac.jp/cl_a/08_print.pdfコンピュータと論理A 第8回 2020年6月17日 App Inventorによる Androidアプリ開発の実践

振り返りを提出

• 16:00になったら作業を終わりにし(まだ作業中であっても一度中断),manabaの「小テスト」から「振り返り課題」を提出する.

• 本日の振り返り課題は,実行画面のアップロードがあるため,エミュレータで実行した人はPCから,Androidスマホで実行した人はそのスマホからmanabaにアクセスして提出する.

• 振り返り課題を提出したら終わってよい.ただし作業がまだ残っている場合は次週の授業開始前までに終わらせておく.

33