テクノロジア魔法学校のお試しをやってみた

テクノロジア魔法学校をやってみた
Mission1は初心者向けPC操作の基本
Mission2　Javascriptを使ってアートを完成させる
1. メディアアート

テクノロジア魔法学校をやってみた

テクノロジア魔法学校は、プログラミングの基礎から教えてくれる教材です。
パソコンの使い方からJavascriptなど、有名ディズニーキャラクターが教えてくれます。
お試し体験が出ていたので、やってみました。
https://www.technologia-schoolofmagic.jp/

登録はアドレスだけなので簡単。
かわいいキャラクターと幻想的なイラスト、壮大なスケールで繰り広げられる世界観に、すぐに入り込んでしまいます。無料版でできるところは限られているようですが、やってみて感じたことと得られた内容について紹介します。

登録を済ませたらすぐにチュートリアルが始まります。
映像がきれいで、BGMやキャラクターの音声もあり、細部までキレイで、さすがディズニーだなと感じました。

HTMLやCSSまではやったことがあるのですがJavascriptになると難しそうだと少し気が引けていたのですが、
細かく教えてくれるので、子供から大人まで幅広く楽しんで学べると思います。

チュートリアルが終わると、第1Missionに移ります。

Mission1は初心者向けPC操作の基本

複数項目に分かれて一つずつクリアしていくレッスン。
クリアするとジャムというアイテムをもらえて、すべてのMissionをクリアすると、総合テストのような問題には入れます。

Mission1では、操作の基礎を教えてくれます。

スクロール、クリック
ドラッグ＆ドロップ
タイピング　打ち方
タイピング　切り替え、変換（HTMLコード内の修正）
コピペ（ショートカット）

パソコンを初めて触る人でもわかるように作られているので安心です。
パソコン基礎レッスンはスキップができるので、一般的に使用できる人はスキップして問題ない内容でした。

ジャムをすべて揃えたあとの総合問題では、説明が少し足りなくて私自身どうやってクリアするんだと悩みました。
理由は、TOP画面の下部スクロールしないと見えない箇所に、入力するフォームがあるのですが、そこに文字を入れていく必要があります。
それも含めて総合テストなんだと感心させられました。
もしわからない方がいたら、入力してクリアした後に出てくるメモ帳に記載されている

マーク＝英字

は、TOPでスクロールした下部にある入力フォームに入れましょう。
問題は3問ありますが、TOPページで入力した後にそのタブのままページ遷移して別の問題を解くと、TOPへ戻ったときに入力した文字が消えているので注意が必要です。
別タブで開くか、メモしておくといいでしょう。

Mission1は、最初の登録からチュートリアル、問題回答も含め約50分でクリアできます。
チュートリアルはエンターやクリックで次に進めるので、もう少し早めに進められます。

Mission2　Javascriptを使ってアートを完成させる

ディズニーキャラクターにようやく会えます。
それまではかわいらしいキャラクターによって進められていきますが、ディズニー好きにはたまらない瞬間がやってきます。
イラストもかわいいし、なによりリアルにしゃべってくれるのでテンション上がりますよ。

Mission2ではプログラミングをしてみます。
すぐにjsを使ってアート作成していくのですが、堅苦しい説明はなく、やってみたらこんなことができるんだと発見がたくさんあるレッスンになっています。

個人的にJavascriptはほぼ初めてなので、このMissionで得た内容を紹介します。

メディアアート

メディアアートでも同様に複数レッスンに分かれています。

円を作る
色の変更
マウスの関数

①円を作ってみる

円はellipseという関数を使います。

ellipse(100, 100, 100);
カッコの中の数字は、

一つ目の数字は左からの距離
二つ目の数字は上からの距離
三つ目の数字は円の直径

この数字を変えれば、配置場所やサイズを変更できます。

②色の変更

色はfillで指定できます。
数字を変更することで、いろんなカラーにできます。
赤　fill(255,0,0); 緑　fill(0,255,0); 青　fill(0,0,255); 黄　fill(255,2550,0); 黒　backgroud(0,0,0); グレー　backgroud(100,100,100);

また、円の線を消すには
noStroke();
を使います。

③マウスの関数

function drow(){}
絵をかいたり動かすときに使う関数です。
ここでは、マウスについてくる指示を書いていきます。
ほんとに簡単で、入り口が楽しいのでもっと勉強してみたいと思える内容になっています。

マウスに円がついてくる

function drow(){ ellipse(mouseX,mouseY,100); }

作業を進めていく中で、メイン画面以外のツールなどを触ってしまったからか、マウスのクリックが効かなくなりました。
タブキー（tab）を2～3回クリックすると入力欄で選択できるので、試してみてください。
ちなみに、押しすぎてfunctionの前にスペースができてしまっても、答えが合えばクリアできるので問題ありません。

カラー指定の4番目の数字で透過できます。

fill(255,0,0,10);

真ん中に設置する

ellipse(width/2, height/20, 200);
関数の中で足し算引き算ができる
ellipse(width/2 + 100, height/2 - 110, 120);

マウスの位置で色が変わる

これは驚きました。こんなこともできるんだと感動したと同時に、もっと勉強したいと思いました。
fill（255,mouseX/4,mouseY/4);

このMission2で最終的に出来上がる指示がこちら。
ミッキーの形です！かわいい！マウスについてきて色が変化していくので、ワクワクしますね！

　
function draw() {
  background(0, 0, 0, 20);
  noStroke();
  fill(255, mouseX/4, mouseY/4);
  ellipse(mouseX, mouseY, 200);
  ellipse(mouseX + 100, mouseY - 110, 120);
  ellipse(mouseX - 100, mouseY - 110, 120);
}

Mission2はチュートリアルも含め約50分でクリアできます。
ここをクリアすると動画が流れ、ディズニーのたくさんのキャラクターが出てきます。
販売されている教材の紹介があるので、購入したい方はご確認ください
https://www.technologia-schoolofmagic.jp/