LEARNING

「テクノロジア魔法学校」は、プログラミングの入門から基礎固めに最適なオンライン型学習教材です。
HTML/CSSやJavaScript、Processingなどを使って本格的なデジタル作品を実際に制作しながら、
プログラミング全般に通じる基礎力をしっかりと身につけることができます。

学習イメージ動画を見る

WHAT

3領域×4言語の
「クロスカテゴリー学習」

何から学び始めたらいいかなんて、悩む必要はありません。
テクノロジア魔法学校では、Webデザイン・ゲーム制作・メディアアートの
3つの領域で、初心者に最適な4つの言語（HTML/CSS・JavaScript・Processing・Shader）を横断的に学ぶ「クロスカテゴリー学習」を採用。
入門編・基礎編あわせて76レッスンを収録し、週1回のプレイで約半年間（※）、たっぷり学んでいただけます。

※学習者によって学習速度は異なります。

WEB DEsign GAME Media Art ４つの言語 HTML/CSS JavaScript Processing Shader

  • WEB DESIGN

    ディズニーキャラクターをあしらったWebページをデザインしながら、HTML5とCSS3というWeb制作用言語を基礎から学んでいきます。JavaScriptを使用したワンランク上のWebデザインレッスンも。ふだん目にするWebサイトがどのようにできているのかも分かるようになるので、参考にしたり応用したりできるようにもなります。

  • GAME

    ProcessingやJavaScriptという言語を使って、アクションゲーム、レースゲームからパズルゲームまで、さまざまなジャンルのゲーム制作を学びます。プログラミング基礎、アルゴリズム基礎はもちろん、数学や物理の有用性も体験的に楽しく理解することができます。ゲームを遊ぶ側でなく「つくる側」の世界がひらけるでしょう。

  • MEDIA ART

    プログラミングとアルゴリズムでCGを生成し、動くアート作品をつくります。主にProcessingという言語を使いますが、初心者でも驚くほど豊かな表現を生み出すことができるので、達成感もひとしおです。後半ではShaderというグラフィックス処理に強い言語を使ってより高度な映像表現をつくることにも挑戦します。

LESSON

実際にどんなステップで学んでいくのか、そしてどんな本格的なものが出来上がるのか、その一部をご紹介します。

  • 人探しサイト

    「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう

    学習ステップを見る

  • フライングカーペット

    横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

    学習ステップを見る

  • スカイランタン

    「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

    学習ステップを見る

  • 魔法の鏡

    さまざまなエフェクトで世界を映す魔法の鏡をつくろう

    学習ステップを見る

  • ダンジョンエスケープ

    ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

    学習ステップを見る

  • スクールオブフィッシュ

    マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

    学習ステップを見る

  • フォトギャラリー

    本格的なフォトギャラリー付きWebサイトをつくろう

    学習ステップを見る

  • クイーンズカード

    「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

    学習ステップを見る

追加教材*に登場するレッスン

  • ハニーハント

    風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

    学習ステップを見る

  • KAWARA割り

    ベイマックスを強化するために瓦割りゲームをつくろう

    学習ステップを見る

  • 宝石パズル

    7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

    学習ステップを見る

  • シュガー・ラッシュ

    「シュガー・ラッシュ」のレースゲームをつくろう

    学習ステップを見る

  • スノウマジック

    「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

    学習ステップを見る

  • ドラゴン＆ソード

    格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

    学習ステップを見る

  • ミーミルの課外授業
    （外部環境レッスン）

    ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

    学習ステップを見る

  • ミーミルの課外授業
    （外部環境レッスン）

    ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

    学習ステップを見る

*本編76レッスンに加え、基礎・応用編を最大108レッスン購入可能です。

追加教材のレッスンも見る

レッスン目次 人探しサイト

53ステップ

  1. タイトルを書こう
  2. 見出しを作ろう
  3. 画像を表示しよう
  4. 文字の見た目を変えよう
  5. 箱を作ろう
  6. 背景画像を表示しよう
  7. 高さを指定しよう
  8. divの上がわに空間を作ろう
  9. 真ん中にそろえよう
  10. <header>タグを作ろう
  11. セレクターを書きかえよう
  12. 文字を打ち込もう
  13. ２つ目の見出しを作ろう
  14. セクションを作ろう
  15. 文章をかこもう
  16. 改行をいれよう
  17. 画像を表示させよう
  18. セクションのセレクタを作ろう
  19. セクションに背景をいれよう
  20. 文字の見た目を変えよう
  21. 文字の下に空間を作ろう
  22. 画像と文章を横にならべようセレクタを書こう
  23. セクションに高さをいれよう
  24. セクションの内がわに空間を作ろう
  25. 見出しを作ろう
  26. セクションを作ろう
  27. セクションの背景を変えよう
  28. セクションのCSSを消そう
  29. セレクターを作ろう
  30. クラス名をつけよう1
  31. 高さを変えよう
  32. クラス名をつけよう2
  33. 一人目の見出しを作ろう
  34. 一人目の画像をいれよう
  35. 一人目の文章をかこもう
  36. 箱を作ろう
  37. 二人目の名前と画像に書きかえよう
  38. セレクターをふやそう
  39. 横幅（よこはば）を変えよう
  40. 横ならびにしよう
  41. 空間を作ろう
  42. 三人目の名前と画像に書きかえよう
  43. 高さを変えよう
  44. 名前の背景に色をつけよう
  45. 名前を真ん中にそろえよう
  46. 名前のまわりに空間を作ろう
  47. 文字の大きさを変えよう
  48. 文章にクラスをつけよう
  49. 文字の大きさを変えよう
  50. 文章にクラスをつけよう
  51. 文章の背景を白にしよう
  52. 文章に空間をつけよう
  53. フッターを作ろう
「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう！

レッスン目次 フライングカーペット

87ステップ

  1. キー入力で上に動かそう
  2. キー入力で下に動かそう
  3. ステージを変えよう
  4. gameSetup関数を作ろう
  5. createAladdin関数を作ろう
  6. アラジンのスプライトを作ろう
  7. アラジンのアニメーションを追加しよう
  8. createWall関数を作ろう
  9. 洞窟の壁のスプライトを作ろう
  10. createMagma関数を作ろう
  11. マグマのスプライトを作ろう
  12. アラジンを移動させよう
  13. カメラを移動させよう
  14. for文で壁をくり返し作成しよう
  15. 壁の位置をずらして作ろう
  16. for文でマグマをくり返し作成しよう
  17. マグマの位置をずらして作ろう
  18. ステージを作る関数を作ろう
  19. 岩の変数を作ろう
  20. 岩のスプライトを作ろう
  21. 岩を置く位置の変数を作ろう
  22. スプライトの横の位置を書きかえよう
  23. 岩のスプライトに画像を追加しよう
  24. for文で岩をくり返し作ろう
  25. 岩を作る位置をずらそう
  26. ステージのレイアウトを作ろう
  27. for文を書こう
  28. ステージのレイアウト配列を２行にする準備をしよう
  29. stageLayout.lengthを修正しよう
  30. 上の段と下の段の岩を区別する準備をしよう
  31. imageIndexを作ろう壁を右に移動させよう
  32. マグマを左に移動させよう
  33. スプライトの動きを止めておこう
  34. テキストを表示しよう
  35. テキストを大きくしよう
  36. テキストを中央にそろえよう
  37. 文字のフォントを変えよう
  38. マウスがクリックされたら呼ばれる関数を作ろう
  39. クリックされたらスプライトを動かそう
  40. テキストを表示する時にカメラをオフにしよう
  41. ゲームを管理する変数を作ろう
  42. ゲームモードを初期化しよう
  43. ゲームスタート時にだけテキストを表示しよう
  44. マウスがクリックされたらゲームモードを「プレイ中」に変更しよう
  45. 岩のスプライトのグループを作ろう
  46. ゲームオーバーの関数を作ろう
  47. アラジンをコントロールする関数を作ろう
  48. アラジンコントローラー関数を呼び出そう
  49. アラジンが岩と重なったらゲームオーバーになるようにしよう
  50. ゲームモードを変更しよう
  51. ゲームオーバーのテキストを表示しよう
  52. アラジンとカメラを制限しよう
  53. ゲームオーバー時に曲を再生しよう
  54. 「クリックしてスタート」のテキストを表示しよう
  55. ゲームスタートの設定をしよう
  56. ゲームをセットアップしなおそう
  57. ゲームオーバーの設定をしよう
  58. 上矢印キーを押した時にアラジンを上昇させよう
  59. 下向きの矢印キーを押した時にアラジンが下に動くようにしよう
  60. アラジンのあたり判定の形状（コライダー）を調整しよう
  61. 操作方法のテキストを追加しよう
  62. 画面の上にあたったらゲームオーバーになるようにしよう
  63. 画面の下にあたったらゲームオーバーになるようにしよう
  64. ゴール直前に出てくる岩をなくそう
  65. ゴールを作る関数を作ろう
  66. createGoal関数を呼び出そう
  67. ゴールのスプライトを作ろう
  68. ゴールの画像を追加しよう
  69. ゴールのコライダーを表示してサイズを変更しよう
  70. 出口に着いた時に呼ばれる関数を作ろう
  71. ゲームモードをフィニッシュにしよう
  72. ゲームが終わった時に曲を流そう
  73. ゴールした時にテキストを表示しよう
  74. ゴールした後マウスをクリックしたらもう一度プレイできるようにしよう
  75. ゴールのコライダーの表示を消しておこう
  76. アラジンの移動のコントロールをpositionからvelocityに変えよう
  77. アラジンを進行方向に向かって回転させよう
  78. コインのスプライトを作ろう
  79. コインのグループを作ろう
  80. コインを拾う時に呼ばれる関数を作ろう
  81. コインと重なったら拾うようにしよう
  82. コインのコライダーを見えるようにしよう
  83. コインのコライダーを調整しよう
  84. コインの位置にエフェクトを作ろう
  85. スコアの初期値を設定しよう
  86. 画面の右上にスコアを表示しよう
  87. コインを拾った時にスコアの値を増やそう
横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

※応用編1の内容を含む

レッスン目次 スカイランタン

8ステップ

  1. キャンバスをつくろう
  2. お城の画像を表示しよう
  3. ランタンを表示しよう
  4. 　　　 ランタンを増やそう
  5. for文でランタンをくり返し表示しよう
  6. ランタンを下から上に動かそう
  7. ランタンの上昇速度を書きかえよう
  8. ランタンの数をさらに増やそう
「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

レッスン目次 魔法の鏡

34ステップ

  1. ピクセルのRGBを取り出そう
  2. ピクセルにRGBAを入れよう
  3. 赤の成分を反転させよう
  4. 緑の成分を反転させよう
  5. 青の成分を反転させよう
  6. グレースケールフィルターの関数を呼び出そう
  7. ピクセルのRGB成分を取り出そう
  8. グレースケールを計算しよう
  9. ピクセルの色をグレースケールに変えよう
  10. セピア調フィルターを作ろう
  11. 白黒フィルターの関数を呼び出そう
  12. ピクセルから赤の成分を取り出そう
  13. 赤の成分を分けるif文を書こう
  14. if文で判定されたピクセルを白く塗りつぶそう
  15. elseを使って残りのピクセルを判定しよう
  16. 白以外の色を黒く塗りつぶそう
  17. mosaic関数を呼び出そう
  18. stepSize変数を用意しよう
  19. y方向にくり返しの魔法を使おう
  20. x方向にくり返しの魔法を使おう
  21. インデックス計算をしよう
  22. ピクセルのRGB成分を取り出そう
  23. 色を指定しよう
  24. モザイクの四角を描こう
  25. マウスで四角の大きさを変えよう
  26. gray関数を呼び出そう
  27. sepia関数を呼び出そう
  28. blackAndWhite関数を呼び出そう
  29. mosaic関数を呼び出そう
  30. フィルターの変数を作ろう
  31. フィルターの変数を初期化しよう
  32. フィルター変数を変えて判定しよう
  33. マウスクリック関数でfilter関数を変化させよう
  34. filter変数の数字の上限を作ろう
さまざまなエフェクトで世界を映す魔法の鏡をつくろう

レッスン目次 ダンジョンエスケープ

41ステップ

  1. 右に歩けるようにしよう
  2. 左に歩けるようにしよう
  3. キーが押されていない時は動かさないようにしよう
  4. ラルフが右向きという情報を代入しよう
  5. ラルフが左向きという情報を代入しよう
  6. ラルフが右を向いている判定をして右向きのアニメーションに切りかえよう
  7. ラルフが左を向いている判定をして左向きのアニメーションに切りかえよう
  8. 接地している時の縦の速度をゼロにしよう
  9. 重力をかけよう
  10. 上キーを押した時にジャンプしよう
  11. 上キーが押されていない時だけ縦の速度をゼロにしよう
  12. ラルフが落下中の時だけジャンプできるようにしよう
  13. ジャンプ音を鳴らそう
  14. ラルフとカギが重なったらpickup関数を呼ぼう
  15. カギを消そう
  16. カギを拾った時の音を鳴らそう
  17. ステージの形を変えて大きな穴を渡ろう
  18. ステージの形を変えてカギを取れるようにしよう
  19. パンチのアニメーションを出そう
  20. 右向きの条件をつけよう
  21. 左向きのパンチアニメーションを入れよう
  22. パンチモードに切りかえよう
  23. 移動モードに切りかえよう
  24. パンチ中は横移動しないようにしよう
  25. パンチの音を鳴らそう
  26. パンチの変数を作ろう
  27. 右パンチのスプライトを作ろう
  28. 左パンチのスプライトも作ろう
  29. パンチとブロックが重なったらcrash関数を呼ぼう
  30. ブロックが壊れた時の音を鳴らそう
  31. 判定が終わったらパンチを消そう
  32. ブロックの位置に破片のスプライトを作ろう
  33. 破片のブロックにアニメーションを作ろう
  34. ブロックを消そう
  35. トゲのタイミングを変更しよう
  36. カギの数をカウントしよう
  37. ドアの画像を変えよう
  38. ドアが開く音を鳴らそう
  39. ドアが開いているかどうかを確認しよう
  40. 開いたドアに重なったらescape関数を呼ぼう
  41. ダンジョンから脱出しよう
ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

レッスン目次 スクールオブフィッシュ

36ステップ

  1. 背景の画像を表示しよう
  2. 魚のクラスを作ろう
  3. 魚を入れる配列を用意しよう
  4. 魚のクラスから、新しい魚を作ろう
  5. 魚を一匹表示しよう
  6. 魚の座標をランダムに初期化しよう
  7. this.positionを使おう
  8. 魚の数の変数を作ろう
  9. 魚のクラスを使ってたくさんの新しい魚を作ろう
  10. 魚の数だけクラスを処理しよう
  11. move関数を使って魚を移動させよう
  12. 魚の速度をゼロで初期化しよう
  13. 魚が向かう先となる目標座標を作って初期化しよう
  14. 魚が泳ぐ時の力の向きを計算しよう
  15. 力の向きを整えよう
  16. directionに力の大きさを掛けて加速度にしよう
  17. 加速度を使って速度を変化させよう
  18. 速度を使って位置を変化させよう
  19. 速度で左右の向きを判定しよう
  20. 速度にリミッターを入れよう
  21. 最高速度をランダムで初期化しよう
  22. リミッターに最高速度を読みこもう
  23. 泳ぎの力をランダムで初期化しよう
  24. 力の向きにランダムな力を読みこもう
  25. 魚がマウスカーソルについてくるようにしよう
  26. 魚の数を増やしてみよう
  27. 泡のクラスを作ろう
  28. 泡の座標を初期化しよう
  29. 泡を1つ表示しよう
  30. 泡の配列と泡の数を用意しよう
  31. 泡のクラスを元に新しい泡をたくさん作ろう
  32. 泡の表示をしよう
  33. 泡の縦の移動速度を初期化しよう
  34. 泡１つを移動させる関数を作ろう
  35. 全ての泡を移動させよう
  36. 泡の大きさをランダムで初期化しよう
マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

レッスン目次 フォトギャラリー

40ステップ

  1. 写真を表示しよう
  2. divタグで囲もう
  3. 背景色を指定しよう
  4. divの高さを指定しよう
  5. 背景画像を表示しよう
  6. 画像を真ん中にそろえよう
  7. 上にだけ余白をつけよう
  8. クラスをつけよう
  9. 枠線をつけよう
  10. 写真に影をつけよう
  11. photo変数をつくろう
  12. 写真を切りかえる関数を作ろう
  13. クリックで関数を呼び出そう
  14. ボタンの画像を表示しよう
  15. 画像がクリックされたら写真を変えよう
  16. ボタンの下方向に余白をつけよう
  17. 写真の順番を変える変数を作ろう
  18. 写真の順番を１増やそう
  19. 写真の順番によって写真を変えよう
  20. ２枚目の写真の条件を追加しよう
  21. 写真の番号が3以上になったら0に戻そう
  22. 写真の番号が0の時の画像を追加しよう
  23. クラスを使って画像を表示させよう
  24. 呼び出す関数の名前を変えよう
  25. 写真を戻す関数を作ろう
  26. アラートを表示しよう
  27. クリックで関数を呼び出そう
  28. alertを消そう
  29. next関数の中身をコピペしよう
  30. photoNumberをへらそう
  31. photoNumberの変数をリセットしよう
  32. setPhoto関数を作ろう
  33. setPhotoを呼び出そう
  34. 表示する写真の枚数を増やそう
  35. nextPhoto関数の条件を直そう
  36. backPhoto関数の条件を直そう
  37. 4枚目の画像を追加しよう
  38. 写真をくり返す条件を直そう
  39. 画像にホバーした時にサイズを大きくしよう
  40. だんだん大きくなるようにしよう
本格的なフォトギャラリー付きWebサイトをつくろう

レッスン目次 クイーンズカード

48ステップ

  1. 背景を表示しよう
  2. スプライトを作ろう
  3. スプライトにオモテの絵を追加しよう
  4. カードの絵を変えてみよう
  5. 絵をヨコに並べる準備をしよう
  6. 変数xを変えてみよう
  7. for文を使ってくり返そう
  8. 絵をタテに並べる準備をしよう
  9. 変数yを変えてみよう
  10. for文を使ってカードをタテに並べよう
  11. カードの絵を変えてみよう
  12. １２枚のカードのタイプを配列で表そう
  13. カードのタイプを配列から持ってこよう
  14. 配列の数字を変えてみよう
  15. 変数を使って並べよう
  16. カードがクリックされた時に呼ばれる関数を作ろう
  17. スプライトがクリックされた時に呼び出される関数をセットしよう
  18. スプライトの絵をオモテ面に変えよう
  19. カードをめくった時の音を再生しよう
  20. クリックされた時にカードのオモテとウラを入れかえよう
  21. ウラ面を追加しているコードをコメントアウトしよう
  22. カードをシャッフル関数を作ろう
  23. カードをシャッフルする関数を呼び出そう
  24. カードをシャッフルする処理を書こう
  25. コメントアウトを戻そう
  26. スコア数を入れる変数を作ろう
  27. スコアをテキストで表示しよう
  28. テキストの設定をしよう
  29. スコアにゲットした宝石の数を足そう
  30. ゲーム終了の処理を行う関数を作ろう
  31. 100点を超えたらゲームを終了させよう
  32. クリックしたカードがオモテだった時に何もしないようにしよう
  33. else文を削除しようめくられたカードの枚数を数えよう
  34. カードが2枚めくられたときを判定しよう
  35. めくられたカードを保存する変数を作ろう
  36. 1回目にめくったカードを変数に保存しよう
  37. 2回目にめくったカードを変数に保存しよう
  38. 2枚目をめくった時にペアがそろった時のを鳴らしてflippedCountもゼロにしよう
  39. カウントダウンタイマーを作ろう
  40. カードをウラ面に戻そう
  41. ウラ面に戻すときに音楽を再生して、めくった枚数をリセットしよう
  42. カードのタイプをカードの中に保存しよう
  43. 1枚目と2枚目のカードが一緒だった時の条件を書こう
  44. else文を追加しよう
  45. 変数pairCountを作ろう
  46. ペアの数を数えよう
  47. ペアが全てそろった時に音楽を鳴らそう
  48. ゲーム終了時の画像を表示しよう
「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

レッスン目次 ハニーハント

47ステップ

  1. キャンバスを作ろう
  2. 背景の色を指定しよう
  3. 木のスプライトを作ろう
  4. スプライトを表示しよう
  5. 木の画像を追加しよう
  6. プーさんのスプライトを作ろう
  7. 風船のスプライトを作ろう
  8. 風船の位置を調整しよう
  9. BGMを流そう
  10. gamePlaying関数を作ろう
  11. プーさんを上に移動させよう
  12. 風船をプーさんの位置に合わせよう
  13. カメラを移動させよう
  14. for文で木をくり返し作成しよう
  15. 木の位置をずらして作ろう
  16. プーさんをマウスで移動できるようにしよう
  17. 風船をプーさんの位置に合わせよう
  18. プーさんの速さを調節しよう
  19. プーさんが画面の左端を越えないようにしよう
  20. プーさんが画面の右端を越えないようにしよう
  21. ハチミツのスプライトを作ろう
  22. ハチミツをたくさん作ろう
  23. ハチミツのスプライトのグループを作ろう
  24. ハチミツのグループを追加しよう
  25. ハチミツのスプライトを消そう
  26. プーさんとハチミツの当たり判定をしよう
  27. ハチミツを拾った時に曲を再生しよう
  28. ハチミツの数を表示する背景画像を表示しよう
  29. カウンターはカメラに影響されないようにしよう
  30. ハチミツを拾った数を入れる変数を作ろう
  31. ハチミツの数を初期化しよう
  32. ハチミツの数をテキストで表示しよう
  33. 文字の大きさや位置を調整しよう
  34. ハチミツの数に１を足そう
  35. 文字の色を変えてみよう
  36. フォントを変えてみよう
  37. フォントを太字にしよう
  38. gameMode変数を作ろう
  39. ゲームモードを初期化しよう
  40. gameCompleted関数を作ろう
  41. if文でゲームモードをgamePlayingに切り替えよう
  42. ゲームモードにgameCompletedを追加しよう
  43. ハチミツを５つ集めたらゲームを完了させよう
  44. ゲームをコンプリートしたら音楽を鳴らそう
  45. ゲームをコンプリートしたら文字を表示しよう
  46. 文字を大きくして、真ん中に寄せよう
  47. ゲームモードの切り替えをswitch-case文に書き換えよう
風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

レッスン目次 KAWARA割り

47ステップ

  1. 背景画像を表示しよう
  2. 曲を再生しよう
  3. ベイマックスのスプライトを作ろう
  4. スプライトを全て表示しよう
  5. ベイマックスのスプライトに手を上げている画像を追加しよう
  6. ベイマックスのスプライトに手を下げている画像を追加しよう
  7. 手を下げている画像に変えてみよう
  8. マウスが押されたら画像を変えよう
  9. マウスが放されたら画像を変えよう
  10. 破壊音を再生しよう
  11. 瓦のスプライトを作ろう
  12. createKawaras関数を呼び出そう
  13. kawaraImagesの配列から画像を追加しよう
  14. 変数iの数字を変えてみよう
  15. for文を使ってaddImageをくり返そう
  16. 瓦の画像を切り替えよう
  17. 瓦の枚数をランダムで決めよう
  18. 瓦の枚数によって画像を変えよう
  19. マウスを放した時に瓦の画像を切り替えよう
  20. 瓦の枚数を１枚ずつ減らそう
  21. 瓦の画像を枚数に合わせて変えよう
  22. 新しくfor文を作ってみよう
  23. 瓦のスプライトを作るコードに変数jを組み合わせよう
  24. mousePressed関数をbaymaxMove関数に書き換えよう
  25. mouseReleased関数をbaymaxChop関数に書き換えよう
  26. 瓦の上でマウスが押された時に関数を呼び出そう
  27. ベイマックスのX座標を変えよう
  28. 瓦の上でマウスを放した時に関数を呼び出そう
  29. gamePlaying関数を作り、文字を表示するコードを書こう
  30. gamePlaying関数を呼び出そう
  31. 文字をスタイリングしよう
  32. タイマー表示の準備をしよう
  33. スコアとタイマー表示に必要な変数を作ろう
  34. 変数を初期化しよう
  35. スコアとタイマーをテキスト表示しよう
  36. スコアが１ずつ増えるようにしよう
  37. タイマーを表示しよう
  38. if文でタイマーを減らす条件を作ろう
  39. タイマーがゼロになったら何もしない処理を書こう
  40. ゲームモードの変数を追加しよう
  41. ゲームモードを初期化しよう
  42. switch-case文でゲームモードを管理しよう
  43. gameFinished関数を作ろう
  44. switch-case文にゲーム終了の条件を追加しよう
  45. タイマーが０になったらゲーム終了にしよう
  46. ゲームが終了したらスコアを大きく表示しよう
  47. ゲームが終了したら音を鳴らそう
ベイマックスを強化するために瓦割りゲームをつくろう

レッスン目次 宝石パズル

89ステップ

  1. キャンバスを作ろう
  2. 背景に画像を表示しよう
  3. スコアボードの画像を表示しよう
  4. BGMをループ再生させよう
  5. ボードを作る関数を作ろう
  6. 宝石のスプライトを作ろう
  7. スプライトを表示しよう
  8. 宝石の画像を追加しよう
  9. 宝石をくり返し作成しよう
  10. 宝石の画像をくり返し追加しよう
  11. 宝石の色をランダムに設定しよう
  12. 5色の宝石を表示しよう
  13. 宝石の位置情報を保存しよう
  14. セルの位置を計算する関数を作ろう
  15. セルの位置を計算する関数を使おう
  16. 宝石のスプライトを配列に保存してみよう
  17. 宝石をクリックしたときに呼ばれる関数を作ろう
  18. 宝石の大きさを変えよう
  19. 宝石の情報を設定する関数を作ろう
  20. クリックした時表示される宝石の種類を変えよう
  21. ゲーム管理の変数を作ろう
  22. 条件判定しよう
  23. ゲームモードを変更しよう
  24. コードを消してみよう
  25. 宝石の色を入れる変数を作ろう
  26. 宝石を入れ替えよう
  27. ゲームモードの関数を作ろう
  28. それぞれのモードをコントロールしよう
  29. 宝石が移動している時間を数える変数を作ろう
  30. タイマーに時間をセットしよう
  31. 宝石がクリックされたらゲームモードを切り替えるようにしよう
  32. タイマーをカウントダウンしよう
  33. タイマーがゼロになったらゲームモードを変更しよう
  34. 宝石のスプライトに色の情報を保存しよう
  35. 関数の引数を増やそう
  36. 宝石のスプライトに速度を指定しよう
  37. 宝石の座標を書き換えよう
  38. 宝石の動きをストップさせる関数を作ろう
  39. 宝石の動きを止める関数を呼び出そう
  40. ２重for文を作ろう
  41. 宝石のスプライトの速度をゼロにセットしよう
  42. 宝石の位置をそろえよう
  43. 宝石が揃った時の関数を作ろう
  44. 宝石をゲットした時の関数を呼び出そう
  45. 宝石をゲットした時に音を再生しよう
  46. エフェクトのスプライトを作ろう
  47. エフェクトのアニメーションを追加しよう
  48. エフェクトに表示時間を設定しよう
  49. エフェクトをくり返そう
  50. 宝石がそろった判定をするif文を書こう
  51. 宝石が３つ並んでいる判定をする関数を作ろう
  52. 宝石が光るか確認してみよう
  53. 全ての宝石に対して判定させよう
  54. 宝石が横に３つ並んでいるかどうかを判定しよう
  55. 横に並んだ宝石の色がそろっているかをチェックしよう
  56. trueをfalseにかきかえよう
  57. 宝石が横に二つ並んでいる判定をしよう
  58. 宝石が三つ光るようにしよう
  59. 全てのisCollectedをfalseにしよう
  60. 宝石が縦に３つ並んでいるかどうかを判定しよう
  61. 集めた宝石の数を計算する関数を作ろう
  62. count変数を作ろう
  63. 同じ色が三つ並んだ宝石の数を数えよう
  64. ゲットした宝石の数を数える関数を使ってみよう
  65. ゲットした宝石があるかどうか判定しよう
  66. 色の揃った宝石を消して並べなおす関数を作ろう
  67. 左から処理を行うためのfor文を追加しよう
  68. 色の並んだ宝石を下から数えよう
  69. 消えた宝石の数の分だけ移動させる処理を書こう
  70. 画面の外側に新しく宝石を並べ直そう
  71. 宝石を落とす関数を呼び出そう
  72. movingTimerをセットし直そう
  73. 宝石が隣同士か判定しよう
  74. 隣り合う宝石がクリックされたかチェックしよう
  75. 隣り合う宝石ではなかった場合の処理を設定しよう
  76. 宝石が縦に並んでいるか判定しよう
  77. 宝石が連続して縦に並んでいるか判定しよう
  78. 宝石が連続して横に並んでいるか判定しよう
  79. angle変数を作ろう
  80. 角度を変えてみよう
  81. クリックした宝石の大きさを変えよう
  82. angleの増えかたを変えよう
  83. 宝石の大きさを戻そう
  84. スコア数を入れる変数を作ろう
  85. スコアをテキストで表示しよう
  86. テキストの設定をしよう
  87. スコアにゲットした宝石の数を足そう
  88. ゲーム終了の処理を行う関数を作ろう
  89. 100点を超えたらゲームを終了させよう
7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

レッスン目次 シュガー・ラッシュ

52ステップ

  1. キャンバスを作ろう
  2. ゲーム全体の初期化を行う関数を作ろう
  3. ゲーム全体の初期化を行う関数を呼び出そう
  4. 道路のスプライトを作ろう
  5. スプライトを表示しよう
  6. 道路の画像を追加しよう
  7. ヴァネロペのスプライトを作ろう
  8. ヴァネロペのアニメーションを追加しよう
  9. BGMを流そうBGMと一緒に、走行音を流そう
  10. ヴァネロペを下に移動させよう
  11. ゲームプレイの処理をする関数を作ろう
  12. ゲームプレイの処理をする関数を呼び出そう
  13. カメラを移動させよう
  14. 道路をくり返し作成しよう
  15. 道路のスプライトのグループを作り、道路スプライトを追加しよう
  16. ヴァネロペをキーで移動させよう
  17. ヴァネロペがコースの端を越えないようにしよう
  18. ライバルを作成する関数を作ろう
  19. ライバルを作成する関数を呼び出そう
  20. ライバルのスプライトを作成しよう
  21. ライバルの配置を変えてみよう
  22. ライバルをレーンにそって、ランダムに配置しよう
  23. ライバルにアニメーションを追加しよう
  24. アニメーションをランダムに変えよう
  25. ライバルの速度を設定しよう
  26. ライバルの数を入れる変数を作ろう
  27. ライバルを増やそう
  28. ライバルのグループを作ろう
  29. ヴァネロペがライバルにぶつかった時の関数を作ろう
  30. ゲームオーバーでサウンドを停止させよう
  31. ゲームオーバーでスプライトの動きを止めよう
  32. ヴァネロペに当たり判定をつけよう
  33. ヴァネロペにコライダーを追加しよう
  34. ゴールのスプライトを作り、画像を追加しよう
  35. ゴールの縦の位置を調整しよう
  36. ゲーム終了の処理をする関数を作ろう
  37. サウンドを停止させよう
  38. 全てのスプライトの動きを止めよう
  39. ヴァネロペがゴールしたときのコードを書こう
  40. ゴールした時の関数を呼び出そう
  41. ゲームモードの変数を作ろう
  42. ゲームモードを変えてみよう
  43. ゲームモードを切り替えよう
  44. ゲームプレイ中の処理を書こう
  45. ゲームオーバーの時の処理を書こう
  46. ゲームモードをゲームオーバーに切り替えよう
  47. ゲームオーバーのサウンドを流そう
  48. ゲームをゴールしたら文字を表示しよう
  49. ゴールしたときにゲームモードを切り替えよう
  50. テキストの設定をしよう
  51. 文字に縁を追加しよう
  52. ゴールのサウンドを再生しよう
「シュガー・ラッシュ」のレースゲームをつくろう

レッスン目次 スノウマジック

16ステップ

  1. 雪の粒のクラスを作ろう
  2. クリックで雪の粒を作ろう
  3. 雪の粒を動かそう
  4. 雪の粒を消そう
  5. 雪の粒の速度を変えよう
  6. 雪の粒をクルンと回転させよう
  7. 雪の粒の軌道を変えよう
  8. 雪の粒ごとに動きを変えよう
  9. 軌跡を表現しよう
  10. 雪の粒を増やそう
  11. 雪の粒１つ１つを変化させよう
  12. 空気抵抗を大きくしよう
  13. 雪の粒の速さを変えよう
  14. 背景の透明度を変えよう
  15. 雪の粒が表示される時間を変えよう
  16. 雪の粒の動きに変化を出そう
「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

レッスン目次 ドラゴン＆ソード

10ステップ

  1. 前に歩くアニメーションに切り替えよう
  2. 後ろに歩くアニメーションに切り替えよう
  3. ガードのアニメーションに切り替えよう
  4. 炎を上むきにはね返そう
  5. 王子を後ずさりさせよう
  6. 攻撃のアニメーションに切り替えよう
  7. 剣を振る音を再生しよう
  8. 通常モードに切り替えよう
  9. アニメーションのコマを巻き戻そう
  10. 剣の当たり判定を作ろう
格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

レッスン目次 ミーミルの課外授業
（外部環境レッスン）

32ステップ

  1. ブラウザを使おう
  2. Bracketsを検索しよう
  3. Bracketsをダウンロードしよう
  4. Bracketsをインストールしよう
  5. Bracketsを使おう
  6. ミーミルからのプレゼントを受け取ろう
  7. zipを展開しよう
  8. フォルダをBracketsで読み込もう
  9. プレビューしてみよう
  10. 画面を左右に並べよう
  11. DOCTYPEを宣言しよう
  12. htmlタグを書こう
  13. インデントしよう
  14. headタグを書こう
  15. bodyタグを書こう
  16. 文字化けを防ごう
  17. titleタグを書こう
  18. h1タグを書こう
  19. h2タグを書こう
  20. 画像を表示しよう
  21. 画像の場所を指定しよう
  22. 段落を作って文章を書こう
  23. htmlファイルを保存しよう
  24. h1の色を変えよう
  25. HTMLとCSSをつなげよう
  26. h1の大きさを変えよう
  27. h1のフォントを変えよう
  28. h2の色を変えよう
  29. divタグを書こう
  30. 文字と画像を真ん中に移動しよう
  31. 画像に枠をつけよう
  32. 画像の角を丸くしよう
ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

レッスン目次 ミーミルの課外授業
（外部環境レッスン）

21ステップ

  1. ミーミルの課外授業
  2. メディアアート 編
  3. Bracketsを開こう
  4. ミーミルからのプレゼントを受け取ろう
  5. zipを展開しよう
  6. フォルダをBracketsで読み込もう
  7. プレビュー画面を用意しよう
  8. HTMLとlibraryをつなげよう
  9. HTMLとJavaScriptをつなげよう
  10. htmlファイルを保存しよう
  11. JavaScriptファイルをクリックしよう
  12. setup関数を作ろう
  13. キャンバスを作ろう
  14. draw関数を作ろう
  15. 背景をぬりつぶそう
  16. 円を描こう
  17. 輪郭（りんかく）を消そう
  18. 背景の色を変えよう
  19. 小さな円を書こう
  20. 真ん中の座標をマウスの位置に置き換えよう
  21. 色をぬろう
  22. 背景に透明度をつけよう
  23. 別の作品を作る方法
ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

HOW

参考書や動画での学習は、
途中で飽きてしまったり、
難しくて付いていけなくなったり、
なかなか長続きしないもの。

でも、「テクノロジア魔法学校」なら大丈夫。
ストーリーや謎解きを交えた
「飽きさせない」教材設計と、
ライフイズテック独自の学習システム「MOZER®︎」により、
より集中して、より速く、より深く学べる
学習体験を実現しました。

教材アイテムを見る

POINT1

エンターテインメントと
学習が融合する体験

ストーリー・ゲームとレッスンとが一体化した、
「テクノロジア魔法学校」だけの特別な学習体験。
その具体例として、第2章「塔の上のラプンツェル」の進めかたをご紹介します。

クリックでpdfが表示されます。

POINT2

世界で評価される学習システム
「MOZER®︎」

MOZER®︎の最大の特徴は、難解さを徹底して取り除いたレッスン構造。1画面に詰め込む情報量が適切にコントロールされているので、文字の多さに「うわっ」となることがありません。また、長くて複雑なプログラムでも、パーツごとに細かくステップ分けしてレッスン化してあるので、1つ1つ着実に理解しながら進むことができます。

  • 適切な学習情報量で学びやすい画面構成

  • 会話形式の丁寧なナビゲーション。新しい知識は図解で説明

  • 時にはクイズ形式で理解度を確認！

  • レッスンのホーム画面。繰り返し復習できるREPLAY機能も

適切な学習情報量で学びやすい画面構成

会話形式の丁寧なナビゲーション。新しい知識は図解で説明

時にはクイズ形式で理解度を確認！

レッスンのホーム画面。繰り返し復習できるREPLAY機能も

LEARN MORE?

より本格的なアルゴリズムやコード設計、外部環境構築など、
もっと学びたい方向けの追加教材も。

追加教材の詳細はこちら

SKILL

Webデザインでもゲームでもメディアアートでも、
作品づくりを楽しみながら繰り返しコードを書くうちに、
プログラミング全般に通じるスキルや感覚が身について行きます。

MESSAGE

橋本善久

橋本善久（ライフイズテック株式会社取締役CTO）

東京大学工学部卒業後、セガ、スクウェア・エニックスでエンジニア、技術ディレクター、ゲームディレクター、CTOなどを務め、家庭用ゲームソフトやゲームエンジンの開発を17年行う。
2014年12月よりライフイズテック株式会社 取締役CTOに就任し、オンラインプログラミング学習サービスの開発及び教材開発の責任者を務めている。


【 代表作 】

「ソニック・ワールドアドベンチャー」（セガ / ゲームディレクター兼技術ディレクター）「FINAL FANTASY XIV 新生エオルゼア」(スクウェア・エニックス / 技術ディレクター)「オンラインプログラミング学習システム MOZER」（ライフイズテック/開発責任者）

プログラミングは現代の魔法

「ディズニー ・テクノロジア魔法学校」は
「夢中になってプレイしていたら本格的なプログラミングの力がいつのまにか身についてしまっていた。
世の中や将来に対しての見つめ方が少しだけ変わった。少しだけ自分に自信がついた。
そして人生の転機になった。」
という出来事が老若男女問わず一人でも多くの方に起きて欲しいと願い制作されています。

本作は、Life is Tech! CAMP/SCHOOLのフェイス・トゥ・フェイスサービスの魅力や
ワクワクを産み出し牽引しているCOO小森の経験と、
私のゲーム開発やエンジニアリングの経験のそれぞれの持ち味を活かして、
アナログの良さとデジタルの良さをどちらも大切にした、新しい考え方のプログラミング学習教材として設計しました。
・ディズニーの魅力的な物語へダイブできる
・大人も驚く本格的・実践的なプログラミング制作テーマ
・デジタルとアナログを融合させたワクワク謎解きアドベンチャー
・続きが気になるメインストーリーやキャラクター達との会話
・レッスンクリアで送られてくる美しい絵葉書のコレクション
・クロスカテゴリー型カリキュラムで総合学習
・「3秒ステップ・バイ・ステップ式」学習システムで「速く・深く・大量に」学ぶ
・入念に設計された繰り返し学習サイクル
など、「続けたくなる」「理解を促す」為の工夫が幾重にも施されています。

その結果、
プログラミング教材として見ても未だかつてない教材になり、
ゲームとして見ても未だかつてないゲームになり、
本として見ても未だかつてない本になり、
物語体験として見ても未だかつてない体験になりました。

Scratchの次はこれ

日本では小学校、中学校、高校の授業におけるプログラミングの必修化が始まりつつあり、 プログラミング学習熱も高まっています。
そして米国を中心に「STEM」または「STEAM」と呼ばれる、コンピュータサイエンスやエンジニアリングや
アートなどを軸に学びを広げ深めていく考え方も広まって来ています。

現在、小学生向けのプログラミング教育で非常に人気があるのが、
MITが開発したビジュアルプログラミング言語「Scratch」です。
プログラミング初心者でもなるべく抵抗感が少なくプログラミングに取り組める、素晴らしい学習環境です。

しかし現時点では「Scratchの次」に課題が残されています。
「Scratchでプログラミングに慣れた後にどのような教材でプログラミングを学び続ければ良いのか？」
「中高生や大人にとってちょうど良い、ゼロからしっかりとプログラミングを学べる本格的な学習環境は無いのか？」
というご質問やご相談も多く耳にします。

その課題への最善の答えの１つが「ディズニー・テクノロジア魔法学校」になると私たちは考えています。
幾重もの工夫により全くのプログラミング初心者でも安心して本格的なプログラミング学習に
取り組んで頂くことが出来ますので、必ずやご満足頂けると信じています。

世の中が大きく変化する時代と向き合うために

人工知能、IoT、ドローン、ロボット、自動運転、VR/AR、バーチャルキャラクター、3Dプリンター、 宇宙技術、遺伝子や細胞操作技術、など、
一昔前ならSFの中の出来事だったテクノロジーが日進月歩どころか秒進分歩で発展しています。
人類史上最大級の変化が私たちの生活の中にもこれから訪れることになります。

これからテクノロジーの進化によって起きる世の中や生活の変化に対して前向きに積極的に向き合うためにも、
一人ひとりがプログラミングを「経験」「体験」する事が大切だと考えています。
聞きかじった知識ではなく、実際に自分の手でプログラミングを組み、
画面の中で何かが動き、反応するという「小さな感動体験」を繰り返し経験する事で、
プログラミングやテクノロジーと向き合うことが楽しいと思えるようになってくるでしょうし、
新しい事を学ぶのもこわくなくなる事でしょう。

たとえ将来プログラマーになるつもりが無くても、
プログラミングやアルゴリズムという概念を体験を伴った指先感覚で理解しておく事で、
自分の将来に対して自分で考えて自分で答えを見つけて行く力を身につける一助となります。

「ディズニー・テクノロジア魔法学校」を通じて、
ティーンのお子さんであれば将来どんな仕事をしたいのかをより広い視野で考えるきっかけになるでしょうし、
数学や物理への興味を持つきっかけにもなるかもしれません。
大人の方であれば現在の仕事との向き合い方を変えるきっかけ、
新しい仕事に挑戦するきっかけにもなって貰えれば本望です。

プログラミングを身につける事で誰もが現代の魔法使いになる事が出来ます。
それでは、ディズニーの世界でプログラミングアドベンチャーをお楽しみください。

ディズニー・テクノロジア魔法学校
ゲームデザイン・システム開発・カリキュラム開発責任者
ライフイズテック株式会社

非対応ブラウザ

申し訳ございません。当サイトではご利用のブラウザは非対応となっております。
下記のリンクより最新のブラウザをインストールしてご覧ください。