投稿日：2019年1月11日
HTML5 Canvas （O’REILLY）の感想【html5 Canvas】
こんにちは、三重県四日市市でホームページの作成など、ウェブデザインのお仕事をしているFLARESの山口です。
前から読みかけだったオライリーのHTML5 Canvasですが、本日名古屋との移動の電車の中でようやく読み終えましたので簡単にレビューしてみたいと思います。
本書「HTML5 Canvas」の構成
この書籍全体を通して学べるのは、2dコンテキストについての内容で、3dについては最後の章で少しだけ触れるだけとなっていますので注意しましょう。
2dってどういうことかって質問の答えとしては、一般的なウェブページをはじめとする「平面上での表現」について座標や摩擦など、様々な物理的な計算をおこないながらどのように要素が動くか…みたいなところを主に扱っています。
本書に説明のあるcanvas上で扱える要素の種類としては以下のものがあります。
- 図形
- 文字（テキスト）
- 画像（イメージ）
- 動画（ビデオ）
- 音声（オーディオ）
動画や音声に関しては、どのように再生を制御するのかというところや、canvas単独ではなく、html要素としてのvideo要素やaudio要素との兼ね合いなどについても学ぶことができます。
図形やテキスト、画像、動画などの目に見える要素については、どうやって要素を動かすのかや、どうやって要素を変形するのか、また高度な動かし方として物理的な計算を用いた動かし方について少しだけ触れています。
それでは、本書の中身について少しだけ見ていきましょう。
1章 Canvas入門
まず第1章の内容ですが、htmlの基礎的な構文に少しだけ触れてから、JavaScriptと深く関わるという過渡に触れつつ、canvas要素の説明へと入っていきます。
html canvas における全体の流れを掴むために1章ではhtml canvasを利用した「文字当てゲーム」を作ることを通して、そのソースコードを見ながら全体的に何ができるのかということを学ぶことができます。
2章 図形とエフェクト
矩形、直線を基本として、その他の関連メソッド（円弧、ベジエ曲線、クリッピング領域）について学び、それらを合成、座標変換（拡大縮小や回転、移動）、また色を変えたりグラデーションやパターンの入れ方などを学ぶことができます。
3章 テキスト
テキストの章では、テキストについての基本構文を学んだ後「テキストアレンジャー」という簡単なアプリをつくりながら、テキストとフォームを連携させたhtml5 canvas の使い方について説明しています。
テキストといえば、フォントの各設定についての設定方法が主要な内容となります。
4章 イメージ
画像をロードし、どのように表示するのか、どのように変形させるか、ズーミングやパン（カメラ側を動かして視点を変える動作のこと）をどのように実現するかについて簡単に説明しています。
また少し高度な方法として、Canvas ピクセル操作 APIについても触れています。タイルを敷き詰めたようなゲームの画面を構成するための方法として、タイルマップエディタの利用方法も学ぶことができます。
5章 数学と物理学とアニメーション
この章ではこれまで扱ってきた各要素を数学と物理学の計算で動かす方法について学ぶことができます。
壁の跳ね返り、曲線と円運動、重力と弾性と摩擦、イージングといった各領域についての実装の仕方をサンプルをみながら学ぶことができました。
6章 Canvasとビデオ
html5のvideo要素について軽く触れてからCanvas要素との兼ね合いの部分や、コントロールをCnavas要素内に描画し、クリックなどのアクションからどのように動画を操作するのかといった一連の流れを学ぶことができます。
また、Canvasにビデオを取り込むことでビデオを半分に割って表示することができたりと、単純なvideo要素では実現ができないような表現についても学ぶことができました。
7章 Canvasとオーディオ
audio要素の基本的なことに触れてから、audio要素とcanvas要素との兼ね合いの部分を学ぶことができます。
html5で実現するゲームにおけるSE（効果音）をどのように実現するかといった技術的に以外と難しい部分について詳しく学ぶことができ、実装のコツを理解することができます。
付録A WebGL
これまではすべて2dコンテキストについての話だったのですが、最後に付録として少しだけ3dコンテキストの扱い方について触れていますが、本当にさわりの部分だけ紹介するにとどまっています。
この書籍が執筆された2011年段階ではまだまだこれからの領域ということだったのかもしれないし、技術的な敷居が高いため多く方が簡単に扱えない領域として除外されたのかなぁといった印象です。
まとめ
簡単に内容をざっくりと説明してみましたが、HTML5 Cnavas の活用シーンとしては、主に画像を物理計算によって動かしたい場合や、インタラクションが組める部分からゲームを作るために利用するといったケースが多いかと思います。
また、最近ではリッチな表現を実現するための一環として、ウェブサイトにも利用されるケースも増えてきましたが、まだまだ実装難易度の高さから、Canvasを扱えるエンジニアやクリエイターは多くない印象です。
昨年はHTML5Canvasを利用して「街の背景イラストの上に飛行機を飛ばし、雲が流れる」というだけの簡単なアニメーションを実装しました。
単純に動かすだけの部分であれば私でも簡単に実装することはできましたが、これの上にさらに「地球を回転させる動き」を混ぜ合わせようとしたら実装に1日まるごとかかってしましまいた。
高校の時に物理を取っていなかったこともあって、物理に関する知識が全く頭に入っていなかったりだとか、数学も高校の時に放棄してしまったので、十分に学ぶことができていないので、ウェブにおけるリッチなアニメーションを学ぶにあたっては確実に数学と物理を数式として理解しておく必要性を感じたところではあります。
技術士（情報工学）の資格は将来的には取ってみたいと感じているので、大学レベルの数学や物理学について数式として理解できる程度には、いずれ学びたいと考えています。
また、今年のお正月には、名古屋駅前でベースキャンプを運営されている Applepple さんから届いたメールには、イノシシがだるまをジャンプしてよけるだけの簡単なゲームのURLが記載されていましたが、このような簡単なゲームをまずは作ってみるというところから始めたられればと思います。
ジャンピングイノシシ2019
