Webでアニメーション「 canvas」入門

Webの新しい仕様であるHTML5の中で、もっとも特徴的な機能の「canvas」はWebに絵を描く描画のしくみです。単に図形をかくだけではなくアニメーションや変形させることまででき、そしてゲームまで作れちゃうんです!
4.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
20 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 16
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 Japanese

Course Description

2014年10月にHTMLは5回目の大幅な改定が行われ、HTML5となりました。HTML5は従来のホームページを作るものからWebアプリケーションへと進化し、ゲームやユーティリティが簡単に作成できるようになりました。

HTML5には、マークアップのタグはもちろん、デザインのCSS3、プログラムのJavaScript、さらにはいろいろな機能を提供してくれるAPIなど様々な仕様の集合体です。

このコースでは、HTML5の最大の立役者である「描画の機能」の「canvas」に焦点を当て、「canvasでどのようなことができるか」を実際のコーディングを交えてご紹介します。

この授業をきっかけに更に深くHTML5アプリケーションに興味を持っていただき、今後に開設するコースにも参加していただき、Webアプリケーションを皆さんが自由に作れるようになっていただければ幸いです。

What are the requirements?

  • Webページを作るために「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。

What am I going to get from this course?

  • 新しい Webアプリケーションを作るためのHTML5で、図形を描くことのできるCanvasというしくみについて深く知ることができます。
  • Canvasの設置方法から、実際の図形の描き方、アニメーション、そして最後にマウスでのコントロールの方法をご紹介します。

What is the target audience?

  • HTML5になにかしら興味をお持ちのかたを対象としています。
  • プログラムの深い知識は不要です。
  • 私のもうひとつのコース「HTML5入門」を受講した後に、このコースを受けると知識が深まります。
  • 現役のWebデザイナ、Webコーダ、エンジニアの方々、マーケティング、ヘルプデスク、営業、経営まで、Webに関わる方々にご覧いただけると幸いです。
  • 趣味でWebに興味がある方も大歓迎です。

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: まず、最初にやっておきましょう
03:11

Webに絵を描くために必要なツールはふたつです。

  • テキストエディタ(日頃から使い慣れているものがあればそれを使ってください)
  • ブラウザ(このコースではGoogle Chromeを使用します)
09:14

テキストエディタを使って、HTMLファイルを作りましょう。

そしてHTMLやCSSを書き込んで、canvasを練習するための準備を始めましょう。

11:12

canvasはJavaScriptで操作します。そのJavaScriptの基礎と、実際に絵を描くための準備を説明します。

Section 2: いよいよ図形を描きますよ。
10:58

もっともシンプルでよく使われる四角形(矩形:くけいと読みます)の描き方を説明します。

10:56

複数の角を持つ多角形の描き方を説明します。これを使えば、何角形でも描けます。

07:34

開始点と終了点を持つ直線の描き方を説明します。さらに折れ線まで進みますので、みなさんは、例えば折れ線グラフなんていうものも作ることができるようになります。

10:00

canvasでは円を描くことも簡単です。さらに、円を分割した円弧まで描くことができます。そうすれば、みなさんはリアルタイムで値の変わる円グラフを作ることもできるようになります。

08:33

ベジエ曲線っていうのをきいたことありませんか?曲線です。canvasでは、曲線も自由に描くことができます。

06:46

canvasの中ではグラデーションも描くことが出来ます。

05:20

canvasは描画の世界ですが、文字を表示することもできます。

08:31

今までは基本図形を描いてきましたが、あらかじめ画像があればそれを表示してコントロールすることもできます。

Section 3: 次に、図形のを変形させましょう
12:25

基本図形が描けるようになったので、このレクチャではそれらを変形(移動・回転・伸縮)させます。

これでさらに自由に図形を表現することができるようになりました。

Section 4: おまちかね!アニメーションです
05:22

canvasでのアニメーションはいわゆる「パラパラ漫画」の方法と同じです。このレクチャでは、それらの原理を説明します。

10:24

ではいよいよcanvasでアニメーションをさせましょう!

11:06

canvasは絵を描き、アニメーションすることができるようになりました。私たちはそれらの図形をコントロールすることができます。マウスのコントロールで図形が移動するようにてみましょう。

Section 5: ゲームアプリケーション演習
3 pages

PDFで提供しますので、ぜひ実際に作ってみてください。

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

97年ソフトバンク入社、GeoCities Japan 立ち上げ従事。その後、Yahoo! JAPAN、Vector、SBIなどのベンチャ企業の後独立。現在は放送大学等の大学・専門学校、デジハリ・オンラインスクールschoo などでHTML5の講師をつとめる。

Microsoft MVP アワード(2014,2015)受賞。HTML5プロフェッショナル試験レベル2合格、「HTML5プロフェッショナル試験攻略テキスト(レベル1、レベル2:秀和システム)」執筆。

東京アプリ・ワークショップ主催、HTML5の楽しさを伝道中。

Ready to start learning?
Take This Course