あなたはテクノロジア魔法学校の卒業生ですか。
一応知らない方のために説明しておくと、オンラインで学べるディズニーのプログラミング教材です。
ファンタジーの世界で遊びながら、
・メディアアート
・Webデザイン
・ゲーム
の3種類のスキルが身につきます。
（本格的な謎解きや、葉書のコレクションも楽しめます！）
https://www.technologia-schoolofmagic.jp/
私も楽しく進めていって、無事卒業したのですが、とあることに気づきました。
『あのコーディングする枠がないと自分の作品が作れない...』
（テクノロジア魔法学校のレッスン画面より引用）
ブラウザにコードを書き込むだけで、きれいな映像やら楽しいゲームやらが簡単に表示できてしまうため、すっかりこの環境に甘えていました。
自分のPCでも自由にコードを書けるようになりたい！
ということで。環境構築手順をまとめてみました。
（Macで確認しています）
メディアアート
Processingという、アートのためのプログラミング言語を使っているらしいです。
まずは下記のサイトの'Download Processing'から、自分のPCに合うバージョンをダウンロードしてきます。
https://processing.org/
起動すると、sketchと呼ばれるファイルが新規作成されます。
初期設定ではJavaになっていましたが、テクノロジアのコードとなんとなく近そうなp5.jsに変更します。（そうすると空の関数が2つできます。）
あとは関数内に、習ったコードを書き込みましょう。
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0, 0, 0, 20);
noStroke();
fill(255, mouseX/4, mouseY/4);
quad(mouseX, mouseY+60+30*sqrt(2), mouseX-60-30*sqrt(2), mouseY-60+30*sqrt(2), mouseX, mouseY-60,mouseX+60+30*sqrt(2), mouseY-60+30*sqrt(2));
ellipse(mouseX + 60, mouseY - 60, 120);
ellipse(mouseX - 60, mouseY - 60, 120);
}
最後に実行ボタン(左上)を押すと、
ブラウザが開いてアートが表示されます。
レッスンではミッキーでしたが、ハート型にアレンジしています。かわいい。
Webデザイン
Webサーバーとして、今回はApacheをインストールし、ローカルで実行します。
以下のコマンドを実行
brew install httpd
/usr/local/var/www に、httpファイルとcssファイル、画像を置きます。
（こちらもレッスンを思い出して好きに変更しましょう）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="cat.css">
</head>
<body>
<div>
<h1>White Cat</h1>
<h2>おしゃれな猫の雑貨屋さん</h2>
<img src="cat.png">
<p>かわいい白猫のマリーがあなたを待っています</p>
</div>
</body>
</html>
h1{
color: rgb(0, 180, 255);
font-size: 80px;
font-family: serif;
}
h2{
color: rgb(255, 180, 180);
}
p{
color: rgb(100, 100, 100);
font-size: 24px;
}
div{
text-align: center;
}
img{
width: 220px;
border-radius: 50%;
}
/usr/local/etc/httpd/httpd.conf に以下を追記して、
ServerName localhost:8080
以下のコマンドでサーバーを起動します。
sudo apachectl start
ブラウザでlocalhost:8080にアクセスすれば、ページが表示されます。
白猫のシルエットを、淡い色と合わせてみました。
停止する際は
sudo apachectl stop
です。
ゲーム
執筆中です