おすすめ webサービス

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

更新日:

テクノロジア魔法学校、ついに購入(入学?)しました。(13回払いです笑)
画像をご覧ください・・・でかい本が届きました。(比較:ハンターハンター36巻)
もっとペラペラの本が届くのかと思っていましたが、かなりしっかりとした作りになっています。

プログラミング学習サービスのほとんどが、ネットでの学習がメインです。
なので購入したその日からオンラインで学べるサービスがほとんどですが、
テクノロジア魔法学校の、魔法の本が届いてから学習の開始!
というのはワクワクさせる演出として、とても素晴らしいですね。

そして本の中はディズニーのイラストがたくさんあり、謎解き用と思われるシールを貼る場所があったりして、「これからどんなことが学べるんだろう?」という期待感が高まります。

章ごとの身につくスキル、初出関数を書いていきます。

規約にてストーリー、謎解きのネタバレは禁止されています。

ただこのブログでは章ごとにどんなことが学べるか、
どんな関数が出てくるかを書きたいため、念のためブログにそういった内容を書いても良いか問い合わせをしました。
すると問い合わせをしたその日のうち(平日です)に問題ないという旨の回答がありました。
オンライン学習では直接人に質問することができないため、こういった問い合わせに対する対応の早さも非常に好感が持てます。

 

2章の身につくスキル

WEBデザイン

  • 簡単なWEBページ(タイトル、画像、説明文のみのシンプルなWEBページ)を作ります。
    見出しの表示の仕方や画像の載せ方、フォントの変え方等を学びます。

1章では一番簡単かもしれないですね。でも基本って大事です!

ゲーム

  • 画像(キャラクターや乗り物と考えてよい)をキーボードの「←」「→」で動かすことができるようになります。またアニメーションのように自動で動かすこともできるようになります。
  • クリックしたタイミングで画像を切り替えることができるようになります。
  • マウスをクリックしたタイミングで音を鳴らしたり、クリックする位置で鳴る音を変えたりすることができるようになります。

まだ「ゲーム」というにはほど遠い気がしますが、上記のことができるようになるだけでもアイディア次第では簡単なゲームが作れそうですよね。
クイズゲームであればすぐに作れそうです。例えば・・・

  1. この音は何の音でしょう?のメッセージを表示
  2. 音を鳴らす
  3. 正解の画像を選んでクリックする
  4. 正解の画像に切り替えると共に正解音を鳴らす

みたいな感じで!

1章で学ぶことは簡単な方かもしれませんが、
「今回学んだことでどんなゲームが作れるだろう?」
とアイディアを膨らませるだけでも楽しいですし、成長につながると思いますよ!

メディア

  • 円を使って自由に絵を描けるようになります。
    画面上の自由な位置に様々な大きさの円を配置したり、マウスに追従する円を作ることができるようになります。

  • 様々な色の円を使い、重ね合わせたりすることで、色鮮やかなサークルアートが描けるようになります。

3つの円でお馴染みのあのマークが書けるようになるかも?

 

1章関数一覧

メディア、WEBデザイン、ゲームでの区別でなく、
HTML、CSS、p5.js(processing)で分けます。
引数(パラメータ)のパターンが複数ある関数はレッスンで使った使い方を優先し、
場合によって同じ関数の引数違いとして分けて記載します。

気になった関数やタグに関する詳細な説明は各リファレンスサイトを参照してください。

HTML / CSS 
http://www.htmq.com/
非公式ではありますが、見やすく整理されており、
とても使いやすいので上記サイトをおすすめします。
htmlに関しては、公式リファレンスというと
https://www.w3.org/TR/html/ (英語)
こちらになりますが、たぶん見るの大変だと思います笑

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

https://p5js.org/libraries/

公式リファレンスサイト。英語ですが、
google翻訳で充分理解できると思います。

 

HTML

タグ

説明

<h1>~<h6>

囲んだ文章を見出しにします。

h1が最上位の見出し(大きい見出し)、
h6が最下位の見出し(小さい見出し)となります。

<img>

画像を表示するときに使います。
<img src="image.png">
のように使います。

<p>

Paragraphの略で、このタグで囲んだ文章をひとつの段落とします。

<br>

改行です。改行したい箇所に書きます。

 

<div>

このタグで囲んだ箇所をひとつのブロックとします。
CSSで文字色を変えたり、行の揃え位置を変えたいという場合に、このブロックの範囲で変えることができます。

 

CSS

プロパティ

説明

color

文字色をblackや#000000と書いて色を指定します。
rgb(v1, v2, v3)で色を指定することもできます。
https://ja.wikipedia.org/wiki/RGB

font-size

文字の大きさを指定します。

font-family

フォント(文字の種類)を指定します。

text-align

文章の揃え位置を指定します。
中央寄せの場合は center です。

border-style

枠線を指定します。
solid で最も一般的な1本線で囲みます。

border-color

枠線の色を指定します。
色の指定の仕方は color と同じです。

border-width

枠線の太さを指定します。

border-radius

枠線の丸みを指定します。(角を丸くします)
例えば30pxと指定した場合、
半径が30pxの円がちょうど角に収まる程度の丸みになります。

 

p5.js

関数

説明

ellipse( x, y, w, [h] )

画面に円を表示します。画面の左上を0とし、xで水平方向、yで垂直方向の、円の中心点の位置を指定します。xは右方向、yは下方向に向かってプラスになります。

wは円の横幅(横直径)、hは円の高さ(縦直径)を指定します。
hは省略可能で、省略した場合は高さはwの値と同じになります。
単位はpx(ピクセル)です。

fill(v1, v2, v3, [alpha])

図形を指定した色で塗りつぶします。v1,v2,v3にRGB値を指定します。
alphaは透明度の指定です(省略可能)。
0に近づくほど透明になります。それぞれの値の最大は255です。

色を黒くするだけの場合はfill(0)、
白くするだけの場合はfill(255)だけでも良いです。

background(v1, v2, v3, [alpha])

 

背景の色を指定します。引数はfillと同じです。

noStroke()

図形の輪郭線を消します。

draw()

 

繰り返し実行される関数です。
デフォルトで1秒間に60回実行します。
例えばこの関数の中に円を表示する関数を書くと、
1秒間に60回円を画面に描きます。

setup()

最初に1回だけ呼び出される関数です。
キャンバスの作成、背景色の設定など、
1回設定すれば良いものをこの関数内に書きます。

createCanvas(w, h)

指定したサイズのキャンバスを作ります。draw関数等で描かれる図形は、この作ったキャンバス内に描かれます。
wは横幅、hは縦幅、単位はpxです。

preload()

外部ファイル読み込み用の関数です。
画像ファイルや音楽ファイルなどをこの関数内で読み込みます。setup関数はこのpreload関数が実行し終わった後に実行されます。

loadImage()

 

画像ファイルを読み込みます。
loadImage('image.png')
のように使います。

loadSound()

 

音楽ファイルを読み込みます。
loadSound('sound.mp3')
のように使います。

image(img, x, y, [width], [height])

画像を表示します。幅と高さは省略可能です。

 

mouseClicked()

マウスをクリックしたタイミングで実行する関数です。

keyDown(key)

 

押下されたキーに応じてtrueかfalseを返します。
keyDown('up')と書いた場合、「↑」キー押下時にtrueを返します。

play()

loadSoundで読み込んだ音楽ファイルを
変数 mySoundに設定したとき、
mySound.play()のように使用します。
mySound.play()のタイミングでmySoundの音楽を流します。

playMode()

mySound.playMode('restart')のように使います。
restartを指定した場合、mySoundを再生中にもう一度mySoudを実行する命令が来た時、mySoundを最初から再生します。

isPlaying()

mySound.isPlaying()のように使い、音楽が再生中の場合はtrueを返します。

loop()

mySound.loop()のように使います。mySoundをループ再生します。

 

システム変数

説明

mouseX

マウスの水平方向の位置を取得します。
ellipse関数の x 部分に書くと、
円が横方向のみマウスに追従するようになります。

mouseY

システム変数。マウスの垂直方向の位置を取得します。
ellipse関数の y 部分に書くと、
円が縦方向のみマウスに追従するようになります。

mouseXと組み合わせて
ellipse(mouseX, mouseY, 200)のようにすることで、
マウスの座標に円を描くことができるようになります。

windowWidth

ウィンドウの横幅を取得します。

width

キャンバスの横幅を取得します。

windowHeight

ウィンドウの縦幅を取得します。

height

キャンバスの縦幅を取得します。

さて、一部抜けはあるかもしれませんが、
大体書いたかなと思います。
1章はブックレッスンのみの対応です。(それでも多少漏れはありそうですが・・・)
2章からはジェムレッスンも含めて書いていきます。

-おすすめ, webサービス

Copyright© すとらぐりんぐSE , 2021 All Rights Reserved.