HTML5とは？
HTMLの基礎を既に学び始めている方ならわかると思いますが、単純にHTMLのことです。
5は版を示しており、HTML5になってから基本的なことに加え、audioタグでの音楽の再生やvideoタグでの動画の再生などできることが増えました。
これらのタグとJavaScriptなどを組み合わせることによって、簡単なプレイヤーなら割と簡単に自作できるようになったのです。
ということでまずはHTMLは単純にサイトを構成するもので、HTML5までバージョンアップして色々出来ることが増えてきたという認識をしておけばOKです。
という方は現在無料で学べる色々なものがあるので利用して軽く勉強してみてください。
動きのあるサイトを作る方法
HTML5で動きのあるサイトを作成するにはcanvasタグを利用します。いわゆるアニメーションを作成するような形になります。
今回はサイトにアクセスすると「Welcome!!」というメッセージが1文字ずつ表示されていくという動きを実装したいと思います。
まずは単純にcanvasタグを用いて文字を描画するだけのものを作成してみましょう。
HTML
<canvas id="canvas"></canvas>
JavaScript
const context = document.getElementById('canvas').getContext('2d');
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("Welcome!!", 10, 10);
いきなりですがcanvasを用いたアニメーションにはJavaScriptの利用も合わせて行う必要があります。
JavaScriptについて知りたいという方は以下の記事を参考にしてみてください。
HTMLではcanvasタグの設定のみ、JavaScriptで文字の描画を行うような形になります。
こちらの例が以下の画像です。
アニメーションなどは全くなく、ただ文字が描画されただけの形になります。
文字のアニメーションを作る
先ほどの文字が1文字ずつ表示されていくアニメーションを目標にしていきます。
アニメーションを実現するにはrequestAnimationFrameやsetIntervalといった関数を利用するのが一般的のようですが、今回はアニメーション間隔の数字を指定したかったのでsetIntervalを利用してみます。
HTMLに変更はありません。
JavaScript
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d');
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";
var count = 1;
function drawText () {
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#333333';
context.fillText(count, 10, 10);
count++;
if (count > 5) {
clearInterval(id);
}
}
var id = setInterval(drawText, 500);
このコードでは単純に1～5までの数字がアニメーションで表示されていきます。要点の部分を解説します。
setInterval(drawText, 500); 500ミリ秒（0.5秒）毎に、drawTextという関数を実行する ] [ fillStyle = '#ffffff'; fillRect(0, 0, canvas.width, canvas.height); fillStyle = '#333333'; context.fillText(count, 10, 10); 一度白でキャンバスを塗りつぶしてから、再度黒を指定して新しい文字を描画する
if (count > 5) {
clearInterval(id);
}
countが5よりも大きい数字になったら繰り返しを終了する、言い換えるとcountが5以下の間繰り返し処理を実行する
もっと遅くアニメーションさせたい場合はsetIntervalの500を1000にしたり、もっと早くしたい場合は200にしたりと調整ができます（単位はミリ秒です：1000ミリ秒=1秒）
これで1から5までの数字をただアニメーションさせることはできました。
文字のアニメーション仕上げ
先ほどの例を元に、今度は「Welcome!!」という文字を1文字ずつ追加してくアニメーションを実装します。
おなじくHTMLに変化はありません。
JavaScript
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d');
const displayText = 'Welcome!!';
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";
var count = 1;
function drawText () {
context.beginPath();
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#333333';
context.fillText(displayText.substr(0, count), 10, 10);
count++;
if (count > displayText.length) {
clearInterval(id);
}
}
var id = setInterval(drawText, 100);
const displayText = 'Welcome!!';
表示したい文字列を設定します。
context.fillText(displayText.substr(0, count), 10, 10);
表示したい文字列を左端から1文字ずつ増やして取得・表示しています。
if (count > displayText.length) {
clearInterval(id);
}
表示したい文字列の長さ分繰り返すように設定しています。
あとは文字の表示が思いのほか遅く感じたので、setIntervalの数字を100に調整しました。
これで特定の文字列を1文字ずつアニメーションで表示させることが出来ました。以下のような形になります。
canvasに背景色を指定したり、背景画像を指定したりすることもできます。文字もフォントや色を指定できるので、指定によってはそこそこカッコいいアニメーションを作れるかと思います。
とはいえ文字を1文字づつ出すだけというのも微妙な気がするので、この例をベースにオリジナルな表現方法を考えるのも楽しそうです。
図形を書くことも出来るので、四角い表示枠が伸びていき、伸び切ったところで文字が浮かび上がるみたいな表現も面白そうです。
スライドやカルーセルなど
という方には文字列のアニメーションのみの紹介で終了となってしまいましたが、スライドやカルーセルなどの動きのあるサイトの作り方も個別に記事にして紹介させて頂く予定です。
今後もお暇な時にでも覗きに来ていただければ幸いです。