テクノロジア魔法学校２章の身につくスキルと関数一覧まとめ

ディズニー・プログラミング学習教材「テクノロジア魔法学校」の2章の、
身につくスキルと関数一覧のまとめです。

1 第2章の感想
2 2章の身につくスキル
3 2章関数一覧

第2章の感想

登場人物が増え、レッスンのボリュームも一気に上がりました。
難易度に関しては、2章でレッスンの流れをつかめた人であれば、困ることも少ないと思います。

WEBデザインのレッスンは？

2章ではWEBデザインの内容が特に濃いですね。
ブックレッスンも真っ白の画面からWEBサイトを手順に沿って作っていくので、
自分でWEBサイトを作るという感覚が、初学者の人でも掴みやすいのではないでしょうか。

ゲームのレッスンは？

ジェムレッスンは大満足だったのですが、
ブックレッスンの方は少しあっさりしていた気がします笑
ステージ、キャラクターは既に画面上に表示されていて、
そこからゲームを完成させるために手を加えていくという形のため、
1から作っていく形ではありませんでした。

これに関しては、1から作ろうとすると、
他のレッスンと比べて膨大に時間が掛かってしまうため、
まずはユーザーに「いずれはこんなゲームも1から作れるようになるんだぜ？」と
期待させるためのレッスンだったのかなぁと思っております。

ちなみにジェムレッスンは1から作りますよ！
ゲームで次章に備えて復習する場合は、ジェムレッスンの5番目が良いかもしれません。

メディアのレッスンは？

WEBデザイン、ゲームと触れたので、最後にメディアの感想を。
メディアはゲームと同じ p5.js （processing）でのコーディングのため、
ゲームと内容が被る部分もありますね。

テクノロジア魔法学校ではメディア、WEBデザイン、ゲームと3つにカテゴライズされていますが、
僕の中では
・WEBデザイン
・メディア、ゲーム
という風にメディアとゲームは二つで一つのイメージがあります。
新しく覚えた関数も両方で使ったりしますからね。

2章ではゲーム、メディアの両方でrandom()という関数を使うのですが、
メディアはこのrandam()関数を使う楽しさが特に際立っています。
ブックレッスンで画面いっぱいにrandam()関数を使ってあるものを表示するのですが・・・
これがすごく綺麗なんです。
何を表示するか自分の目で確かめてください笑

2章の身につくスキル

WEBデザイン

余白の設定の仕方がわかります。
画像を横並びで表示する方法がわかります。
classの使い方がわかります。レイアウトの変更を、
全体ではなく1部分だけに適用することができるようになります。
ヘッダーやフッターの設定の仕方がわかります。

特にclassは重要ですね。

ゲーム

キャラクターにアニメーションを付ける方法を学びます。
ランダムに画像（アイテム）を表示できるようになります。
衝突判定が学べます。Aの画像（キャラクター）とBの画像（障害物）が重ね合わさったとき、どういった動きをさせたいか指定することができるようになります。

メディア

四角形を画面に表示できるようになります。
繰り返し処理と配列の使い方について学びます。同じ画像や図形をたくさん表示したり、
それぞれに同じ動きをさせたりすることが、少ないコーディングで行えるようになります。

ゲームで書いたことは省略しています。

2章関数一覧

for文やif文、配列の初期化方法などは載せません。
一覧にしなくても、嫌でも毎回使うことになると思うので省いておきます笑

また1章よりは説明を簡略化しています。（１章も簡素でしたが・・・）
ここで中途半端に説明するより詳しい使い方はリファレンスで見た方が誤解がないと思うので。
それではどうぞ。

リファレンスサイトはこちら

HTML / CSS
・http://www.htmq.com/

p5.js
・https://p5js.org/reference/

・https://p5js.org/libraries/

HTML

タグ	説明
<body>	文書全体を示すタグです。
<header>	ヘッダーであることは示すタグです。画面上部に表示したい内容をこのタグで括ります。
<footer>	フッターであることは示すタグです。画面下部に表示したい内容をこのタグで括ります。
<section>	タグで括った箇所を一つのセクションであると示すタグです。
<タグ class = 'クラス名'>	<div class='hoge1'>のように使います。タグに名前を付けるものだと思って構わないです。まだテクノロジアでは「id」は出てきていませんが、 classとidの違いは同じhtml内で同じ名前(例で言う'hoge1'）を使えるかどうかの違いがあります。 classは複数個所で同じ名前を使えます。idはhtml内で一度使った名前は他の箇所では使えません。

CSS

プロパティ	説明
padding[ - left, right, top, bottom]	内側の空白のサイズをpx（ピクセル)で指定します。 padding-left とすることで左側のみ空白のサイズを指定することも可能です。 leftなら左、rightなら右、topなら上、bottomなら下です。
margin[ - left, right, top, bottom]	外側の空白のサイズをpxで指定します。
background-color	背景の色を指定します。
background-image	背景の画像を指定します。
border[-left, right, top, bottom-]style border[-left, right, top, bottom-]width border[-left, right, top, bottom-]color	1章で学んだ枠線のstyle, width, colorを、 border-left-style のように書くことで線を指定することができるようになります。
width	幅を指定します。
height	高さを指定します。
float	指定した要素を左または右に横並びにして配置します。
clear	floatで横並びにした状態を解除します。
box-shadow	要素に影を付けます。

p5.js

関数	説明
rect(x, y, w, h)	四角形を描写します。xとyが四角形の左上の座標、wが幅、hが高さです。
createSprite ( x, y, width, height )	Sprite（キャラクターやアイテムなどの2Dのグラフィックスオブジェクト）を作ります。
drawSprite(sprite)	createSpriteで作成したspriteを画面に表示します。
loadAnimation(sprite)	preLoad関数内に書きます。アニメーションを読み込む関数です。 loadAnimation('image00.png', 'image08.png')のように書くことで、image00~08の画像（全9枚）をアニメーションとして読み込みます。
addAnimation ( label, animation )	spriteにアニメーションを追加します。 sprtiteをcharaという変数に代入し、 runAnimationという変数にloadAnimationでアニメーションを読み込んだ場合、 chara.addAnimation('run1', runAnimation) のように使用します。
position.x	chara.position.x = 数値のように書くことでspriteの横軸の位置を指定できます。
position.y	chara.position.y = 数値のように書くことでspriteの横軸の位置を指定できます。
random(n)	括弧内の数値の範囲でランダムな値を返します。 random(5)とした場合、 0~5未満の値をランダムに返します。注意点は0,1,2,3,4のどれかを返すわけではないということです。 4.999等小数点以下の値も含むため、整数のみを返したい場合は floor(random(5)) のように書きます。引数は random(2,5)のように二つ指定することもできます。この場合、2~5未満の値をランダムに返します。
floor(n)	n以下の最も近い整数を返します。 4.999なら4となります。
addImage ( label, img )	Spriteに画像を追加します。使い方はaddAnimationと同じです。
createGroup()	Spriteのグループを作成します。
drawSprites(group)	グループ単位でSpriteを画面に表示します。引数未指定の場合はSpriteすべてを画面に表示します。
add(sprite)	spriteGroupというグループ変数を定義した場合 spriteGroup.add(sprite1)のように使います。 spriteをグループに追加します。
collide(target, [callback])	SpriteGroup.collide(blockSprite)のように使います。括弧内のSpriteと重なった場合、groupは重ならない位置に移動し、（弾かれます）trueを返します。引数の2つ目に衝突時に実行する関数を指定できます。省略可能です。
overlap(target, [callback])	collideとほぼ同じですが、重ならない位置に移動はしません。