テクノロジア魔法学校、ついに購入(入学?)しました。(13回払いです笑)
画像をご覧ください・・・でかい本が届きました。(比較:ハンターハンター36巻)
もっとペラペラの本が届くのかと思っていましたが、かなりしっかりとした作りになっています。
プログラミング学習サービスのほとんどが、ネットでの学習がメインです。
なので購入したその日からオンラインで学べるサービスがほとんどですが、
テクノロジア魔法学校の、魔法の本が届いてから学習の開始!
というのはワクワクさせる演出として、とても素晴らしいですね。
そして本の中はディズニーのイラストがたくさんあり、謎解き用と思われるシールを貼る場所があったりして、「これからどんなことが学べるんだろう?」という期待感が高まります。
章ごとの身につくスキル、初出関数を書いていきます。
規約にてストーリー、謎解きのネタバレは禁止されています。
ただこのブログでは章ごとにどんなことが学べるか、
どんな関数が出てくるかを書きたいため、念のためブログにそういった内容を書いても良いか問い合わせをしました。
すると問い合わせをしたその日のうち(平日です)に問題ないという旨の回答がありました。
オンライン学習では直接人に質問することができないため、こういった問い合わせに対する対応の早さも非常に好感が持てます。
2章の身につくスキル
WEBデザイン
- 簡単なWEBページ(タイトル、画像、説明文のみのシンプルなWEBページ)を作ります。
見出しの表示の仕方や画像の載せ方、フォントの変え方等を学びます。
1章では一番簡単かもしれないですね。でも基本って大事です!
ゲーム
- 画像(キャラクターや乗り物と考えてよい)をキーボードの「←」「→」で動かすことができるようになります。またアニメーションのように自動で動かすこともできるようになります。
- クリックしたタイミングで画像を切り替えることができるようになります。
- マウスをクリックしたタイミングで音を鳴らしたり、クリックする位置で鳴る音を変えたりすることができるようになります。
まだ「ゲーム」というにはほど遠い気がしますが、上記のことができるようになるだけでもアイディア次第では簡単なゲームが作れそうですよね。
クイズゲームであればすぐに作れそうです。例えば・・・
- この音は何の音でしょう?のメッセージを表示
- 音を鳴らす
- 正解の画像を選んでクリックする
- 正解の画像に切り替えると共に正解音を鳴らす
みたいな感じで!
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/
公式リファレンスサイト。英語ですが、
google翻訳で充分理解できると思います。
HTML
タグ |
説明 |
<h1>~<h6> |
囲んだ文章を見出しにします。 h1が最上位の見出し(大きい見出し)、 |
<img> |
画像を表示するときに使います。 |
<p> |
Paragraphの略で、このタグで囲んだ文章をひとつの段落とします。 |
<br> |
改行です。改行したい箇所に書きます。
|
<div> |
このタグで囲んだ箇所をひとつのブロックとします。 |
CSS
プロパティ |
説明 |
color |
文字色をblackや#000000と書いて色を指定します。 |
font-size |
文字の大きさを指定します。 |
font-family |
フォント(文字の種類)を指定します。 |
text-align |
文章の揃え位置を指定します。 |
border-style |
枠線を指定します。 |
border-color |
枠線の色を指定します。 |
border-width |
枠線の太さを指定します。 |
border-radius |
枠線の丸みを指定します。(角を丸くします) |
p5.js
関数 |
説明 |
ellipse( x, y, w, [h] ) |
画面に円を表示します。画面の左上を0とし、xで水平方向、yで垂直方向の、円の中心点の位置を指定します。xは右方向、yは下方向に向かってプラスになります。 wは円の横幅(横直径)、hは円の高さ(縦直径)を指定します。 |
fill(v1, v2, v3, [alpha]) |
図形を指定した色で塗りつぶします。v1,v2,v3にRGB値を指定します。 色を黒くするだけの場合はfill(0)、 |
background(v1, v2, v3, [alpha])
|
背景の色を指定します。引数はfillと同じです。 |
noStroke() |
図形の輪郭線を消します。 |
draw()
|
繰り返し実行される関数です。 |
setup() |
最初に1回だけ呼び出される関数です。 |
createCanvas(w, h) |
指定したサイズのキャンバスを作ります。draw関数等で描かれる図形は、この作ったキャンバス内に描かれます。 |
preload() |
外部ファイル読み込み用の関数です。 |
loadImage()
|
画像ファイルを読み込みます。 |
loadSound()
|
音楽ファイルを読み込みます。 |
image(img, x, y, [width], [height]) |
画像を表示します。幅と高さは省略可能です。
|
mouseClicked() |
マウスをクリックしたタイミングで実行する関数です。 |
keyDown(key)
|
押下されたキーに応じてtrueかfalseを返します。 |
play() |
loadSoundで読み込んだ音楽ファイルを |
playMode() |
mySound.playMode('restart')のように使います。 |
isPlaying() |
mySound.isPlaying()のように使い、音楽が再生中の場合はtrueを返します。 |
loop() |
mySound.loop()のように使います。mySoundをループ再生します。 |
システム変数 |
説明 |
mouseX |
マウスの水平方向の位置を取得します。 |
mouseY |
システム変数。マウスの垂直方向の位置を取得します。 mouseXと組み合わせて |
windowWidth |
ウィンドウの横幅を取得します。 |
width |
キャンバスの横幅を取得します。 |
windowHeight |
ウィンドウの縦幅を取得します。 |
height |
キャンバスの縦幅を取得します。 |
さて、一部抜けはあるかもしれませんが、
大体書いたかなと思います。
1章はブックレッスンのみの対応です。(それでも多少漏れはありそうですが・・・)
2章からはジェムレッスンも含めて書いていきます。