この記事はプログラミングを一通り経験したことがある人間として、ディズニーテクノロジアを遊んで(学んで)みたメモです。
いきなりタイトル詐欺ですが、プログラマといっても純粋なプログラマではありません。プログラミングを仕事で使用している程度とお考え下さい。デザインについては全くの初心者です。学生時代はC++とmatlab、会社に入ってからはC++とpythonを基本的に使っています。
ディズニーテクノロジアを購入したときの記事は以下にあります。
チュートリアルと最初のストーリーを終え、本格的なレッスンが始まったくらいからスタートです。上記の記事にもありますが、本編の1章まで進めたので、そこまでの感想とメモを記します。
本編の1章は以下の4項目で構成されています。
- 校長先生のレッスン(チュートリアル)
- ミッキーのレッスン(Media Art)
- ドナルドのレッスン(Web Design)
- グーフィのレッスン(Game)
校長先生のレッスンは先ほどの記事を書いた段階で終わっているので、ミッキーのレッスンから紹介したいと思います。
出てくるプログラミング分野としてはHTML,CSS,JavaScript,Processingです。公式サイトにも記載がありますね。ミッキーとグーフィではJavaScriptとProcessingを、ドナルドではHTML/CSSを学びました。
ミッキーのレッスン
ミッキーのレッスンの内容は簡単なお絵かきプログラムを作ることです。キャンバスの設定をし、円を書いたり色を変えたり、クリックした場所に円を描画するなんていうこともできるようになります。最後はミッキーの形の円をクリックした場所に描画するプログラムを作ります。短いプログラムですが、クリックする場所によって色が変わるのがきれいで、楽しいです。
基本的にはヒントに沿ってプログラムを写経していきます。だんだんとヒントが少なくなり、関数の名前とかを憶えていきます。関数についてもちょっとした説明がありますが、やりながらだんだんと理解していくということを重視している様子でした。
キャンバスの座標やRGBについても軽く説明されます。
以下のキーワードが出てきます。Processing+キーワードなどでGoogle検索してみると雰囲気がつかめるかもしれません。
- fill
- background
- noStroke
- ellipse
- mouseX
- mouseY
ドナルドのレッスン
ドナルドのレッスンでは、簡単なホームページを作ります。HTMLでタイトルをつけたり、本文を書いたりし、それらに対してCSSで文字色変更などの装飾を行います。HTMLタグの説明や、CSSの書き方について基本的なことを学びます。
HTMLやCSSを変えたとき、Webページ見え方がリアルタイムで変化し、それを見ながらコーディングすることができます。画像をWebページに表示する方法も学び、枠線を付けるなどの画像に対する装飾も知ることができます。
キーワードとして、以下のようなものが挙げられます。
- h1タグ
- pタグ
- brタグ
- imgタグ
- border-style, border-color, border-width, border-radius
- font-size
- text-align
- font-family
ミッキーのレッスンと同様、基本は写経ですが、レッスンが進むにつれてクイズを出されたり、ヒントが穴あきになっていたりします。上のようなキーワード群は、さすがにメモを取っていないと覚えきれませんね。レッスンに詰まったらさらにヒントをもらうこともできます。
グーフィのレッスン
グーフィのレッスンでは、ゲームの作り方を学習しました。最終的にできるゲームは、楽器をクリックしたときに音が鳴るという簡単なものです。ミッキーのレッスンで学んだことを基本に、Processingでの画像の表示方法や音の鳴らし方を教えてくれます。
画像や音はファイルから読み込み、変数に格納してから表示するため、変数に関する簡単な説明もここでなされます。
また、forループやif/else文などによる制御、代入演算子+=や-=、クラスメソッドの呼び出し(?)もさらっと出てきますが、深い説明はありません。ヒントを読んでそれ通りに進めていけば問題ありません。
コード量としては50行くらいになります。初めてプログラミングをする方にとっては、完成したときにかなり達成感があるのではないでしょうか。
感想
ヒントに沿って問題を解いていけばそれなりの作品が出来上がるので、やってて楽しいと感じました。また、題材がミッキーを書いたり、ドナルドの帽子屋さんのホームページだったり、グーフィのバンドだったりする点もポイントです。
プログラミングを学習しようとすると、最初に立ちはだかる高い壁は環境構築です。プログラミングをかなり経験した今でさえ、新しい言語を学ぼうと思うと環境構築しなければならず、詰まったりもします。ディズニーテクノロジアでは環境構築を全くせずに、ブラウザ上でちゃんとコードが動き、かなり気軽で学習に集中することができました。
第一章終了時にはperfumeの主題歌が流れ、その後第二章の予告編が流れます。第二章からはさらに本格的なレッスンが始まると予想され、期待感が高まります。
