Webでアニメーション「 canvas」入門
4.6 (7 ratings)
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.
44 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webでアニメーション「 canvas」入門 to your Wishlist.

Add to Wishlist

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

Webの新しい仕様であるHTML5の中で、もっとも特徴的な機能の「canvas」はWebに絵を描く描画のしくみです。単に図形をかくだけではなくアニメーションや変形させることまででき、そしてゲームまで作れちゃうんです!
4.6 (7 ratings)
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.
44 students enrolled
Created by 中島 俊治
Last updated 11/2015
Japanese
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 新しい Webアプリケーションを作るためのHTML5で、図形を描くことのできるCanvasというしくみについて深く知ることができます。
  • Canvasの設置方法から、実際の図形の描き方、アニメーション、そして最後にマウスでのコントロールの方法をご紹介します。
View Curriculum
Requirements
  • Webページを作るために「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。
Description

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

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

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

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

Who is the target audience?
  • HTML5になにかしら興味をお持ちのかたを対象としています。
  • プログラムの深い知識は不要です。
  • 私のもうひとつのコース「HTML5入門」を受講した後に、このコースを受けると知識が深まります。
  • 現役のWebデザイナ、Webコーダ、エンジニアの方々、マーケティング、ヘルプデスク、営業、経営まで、Webに関わる方々にご覧いただけると幸いです。
  • 趣味でWebに興味がある方も大歓迎です。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
16 Lectures
02:14:32
+
まず、最初にやっておきましょう
3 Lectures 23:37

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

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

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

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

Preview 09:14

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

JavaScriptの基礎をかじりましょう
11:12
+
いよいよ図形を描きますよ。
8 Lectures 01:08:38

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

四角形(矩形)を描きましょう
10:58

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

多角形を描きましょう
10:56

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

直線を描きましょう
07:34

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

円と円弧を描きましょう
10:00

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

曲線を描きましょう
08:33

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

グラデーションを描きましょう
06:46

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

文字を表示させましょう
05:20

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

画像を描きましょう
08:31
+
次に、図形のを変形させましょう
1 Lecture 12:25

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

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

回転・伸縮・移動。まとめて変形させちゃいましょう
12:25
+
おまちかね!アニメーションです
3 Lectures 26:52

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

アニメーションの準備
05:22

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

アニメーションさせましょう
10:24

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

双方向性なWebアプリケーションへ
11:06
+
ゲームアプリケーション演習
1 Lecture 00:00

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

サンプル・アプリケーション「シューティングゲーム」
3 pages
About the Instructor
中島 俊治
4.7 Average rating
39 Reviews
286 Students
3 Courses
HTML5講師

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

Microsoft MVP アワード(2014,2015,2016,2017-)受賞。HTML5プロフェッショナル試験レベル2合格。

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