HTML5をマスターする: 2011/07

2011/07/31

ファイルをブラウザにドロップして読み込む

ブラウザにドラッグしたファイルを読み込むには、「ドラッグ＆ドロップを検出する」と同じように、dropイベントを補足し、「ローカルファイルを読み込む」と同じようにFileReaderでドロップされたデータを読み込むようにします。

下の四角にエクスプローラ/ファインダー等からファイルをドラッグすると、ブラウザにファイルを読み込みます。

ここにドロップして下さい。

<div id="dragAndDropSample" style="border: 1px solid #0000FF;border-radius:4px; width:300px; height:200px;" onDragOver="onDragOver2(event)" onDrop="onDrop2(event)">
ここにドロップして下さい。
</div>
<div id="info"></div>
<div id="view"></div>
<script type="text/javascript">
var info = document.getElementById("info");
var v = document.getElementById("view");
var fr = new FileReader();
function onDragOver2(event) {
    event.preventDefault();
}
function onDrop2(event) {
    var fs = event.dataTransfer.files;
    for ( var i = 0 ; i < fs.length ; i++) {
        var f = fs[i];
        info.innerHTML = "name:" + f.name + " type:" + f.type + " size:" + f.size / 1000 + " KB";
        if(/^image/.test(f.type)) {
            var img = document.createElement("img");
            fr.onload = function() {
                img.src = fr.result;
                v.appendChild(img);
            }
            fr.readAsDataURL(f);
        }
        if (/^text/.test(f.type)) {
            fr.onload = function() {
                v.innerHTML = fr.result;
            }
            fr.readAsText(f, "utf-8");
        }
    }
    event.preventDefault();
}
</script>

ローカルファイルを読み込む

ファイルを読み込むには、File APIのFileReaderを使用します。

<input type="file" name="files[]" id="file" multiple onchange="readFile()">
<div id="progress">0%</div>
<div id="view"></div>
<script type="text/javascript">
function readFile() {
    var fs = document.getElementById("file").files;
    var v = document.getElementById("view");
    v.innerHTML = "";
    for ( var i = 0 ; i < fs.length ; i++ ) {
        var f = fs[i];
        var fr = new FileReader();
        var p = document.getElementById("progress");
        if (f.type == "image/jpeg" || f.type == "image/gif" || f.type == "image/png") {
            var img = document.createElement("img");
            fr.onload = function(event) {
                img.src = fr.result;
                v.appendChild(img);
            }
            fr.onerror = function() {
                v.innerHTML = "エラーが発生しました。";
            }
            fr.onprogress = function(event) {
                p.innerHTML = Math.floor(event.loaded / event.total) * 100 + "%";
            }
            fr.readAsDataURL(f);
        } else {
            fr.onload = function(event) {
                v.innerHTML = fr.result;
            }
            fr.onerror = function() {
                v.innerHTML = "エラーが発生しました。";
            }
            fr.onprogress = function(event) {
                p.innerHTML = Math.floor(event.loaded / event.total) * 100 + "%";
            }
            fr.readAsText(f, "utf-8");
        }
    }
}
</script>

上の例は、input要素でファイルを選択させ、選択後にファイルを読み込んでImageファイルの場合はimg要素を追加し、Image以外の場合はテキストとして読み込んで表示するようにしています。また読み込みの際、progressイベントを補足して進行度をパーセント表示させています。
FileReaderのメソッドは以下の物があります。

メソッド・プロパティ	内容
readAsBinaryString(ファイル)	バイナリとして読み込みます。
readAsText(ファイル, エンコーディング)	テキストファイルを指定エンコーディングで読み込みます。
readAsDataURL(ファイル)	ファイルをDataURL形式で読み込みます。
abort()	ファイル読み込みを中断します。
result	メソッドの実行結果を参照します。

イベント一覧は以下の物があります。

イベント	内容
loadstart	読み込みが開始された
load	読み込みが正常終了
loadend	読み込みが終了（成功 or 失敗）
abort	読み込みが中断された
error	読み込みエラーが発生
progress	読み込み中

ファイル情報を取得する

File APIを使用すれば、filesでファイル情報を取得してローカルにあるファイルにアクセスすることができます。
filesで取得できる情報には以下の物があります。

プロパティ	内容
name	ファイル名
type	ファイルのMIME/TYPE
size	ファイルのバイトサイズ
urn	ファイルのURN

<input type="file" name="files[]" id="file" multiple onchange="getFiles()"><br>
<span id="disp"></span>
<script type="text/javascript">
function getFiles() {
   var files = document.getElementById("file").files;
   var disp = document.getElementById("disp");
   disp.innerHTML = "";
   for(var i=0 ; i < files.length; i++) {
       var file = files[i];
       disp.innerHTML += file.name + " : " + file.size/1000 + " KB type:" + file.type + " URN:" + file.urn + "<br>";
   }
}
</script>

ドラッグ＆ドロップを検出する

ドラッグ＆ドロップを検出するには、onDragStartのイベントを補足して、dataTransferのメソッドでデータを受け渡します。 draggable属性がデフォルトで有効なのはimg要素とa要素だけなので、その他はドラッグ＆ドロップを行わせる場合は明示的にdraggable=”true”に指定する必要があります。

５つの花を四角の中にドロップして移動させるサンプルです。

ここにドロップして下さい。

<img draggable="true" id="flower" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" />
<img draggable="true" id="dandellion" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFRjLRFcgpbOK4Wsu1Vxn1JpTFdsudqjftA7aLis-DL6kfxPC1yVoZRtAos4VoZ4DP58387QcGMox9i6gCdFPzKH8XtVCBVszxWRlxALs8vSjzyVARrBhr5HduOB-9oVVl03CYs9x2dX9/s1600/Dandelion.gif" />
<img draggable="true" id="African Daisy" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-8DlPX2EtuZTqgNwmhVVe790bdl6-SjcPKssqbovYxDjigJnvbGl2H5w9M_cR27vCHUQZvWJpSlw_c4bkXhwBospATjzSqyfVtKZHleRSaAUp3DCs_sZl-z2fIlt1N6dWlJz-cXJqkWEd/s1600/African+Daisy.gif" />
<img draggable="true" id="Ixia" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1oL5S3SeWlU3KXi5FAVaKNkZmUbwPQwKxJhnLKxXkXev-IrCLET55LGMH9SZhxHxFktkwXmmdiBrSXE18-iETdWJ13MuOGplhjxGG7kBA7tu7H-zDKt9Hx2uWLT2gVTYna5a_dMp_LEYE/s1600/Ixia.gif" />
<img draggable="true" id="Spiked" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15pYaJtscUa0JI3AnlUte5n4Ado14vWIyegi5RVaqYlvhw1DAfTgaBte3nLJIAT0udeKO6hkrEfktIP6Hv4jAUk8dKjaF6Srf-742mTLfGlzNIMnlo_veE8pJcPQ86PPpDdR0nqjeaET7/s1600/Spiked.gif" />
<br />
<div id="drop1" ondragenter="onDragEnter1(event)" ondragleave="onDragLeave1(event)" ondragover="onDragOver1(event)" ondrop="onDrop1(event)" style="border-radius: 4px; border: 1px solid #0000FF; height: 100px; width: 400px;">
ここにドロップして下さい。
</div>
<div id="debug">
</div>
<script type="text/javascript">
var debug = document.getElementById("debug");
function onDragStart1(event) {
debug.innerHTML = "Drag Start";
event.dataTransfer.setData("text", event.target.id);
}
function onDrop1(event) {
debug.innerHTML = "On Drop";
var id = event.dataTransfer.getData("text");
var elm = document.getElementById(id);
event.currentTarget.appendChild(elm);
event.preventDefault();
}
function onDragOver1(event) {
debug.innerHTML = "On Drag Over";
event.preventDefault();
}
function onDragEnter1(event) {
debug.innerHTML = "On Drag Enter";
}
function onDragLeave1(event) {
debug.innerHTML = "On Drag Leave";
}
</script>

onDrop1 / onDragOver1にある、「preventDefault()」は、デフォルトではDropイベントが無効化されているので、このメソッド呼び出しでDropイベントを有効化しています。

メソッド・プロパティ	内容
setData(key , value)	ドラッグ＆ドロップされるデータをセットする keyには"text"か"url"のみ指定できる。
getData(key)	ドラッグ＆ドロップされたデータを取得する keyには"text"か"url"のみ指定できる。
clearData	ドラッグ＆ドロップされたデータをクリアする
types	setDataメソッドでセットされた情報のtype(text/plain等)を取得する
files	他アプリケーションからドラッグされたファイル情報を取得する
setDragImage(image, X, Y)	ドラッグ中に表示されるイメージを指定する
addElement(element)	ドラッグ中に表示されるイメージに要素を追加する

2011/07/30

SVGを描画する

SVGとは、Scalable Vector Graphicsの略です。
HTML5では、外部ファイルにある拡張子がSVGのファイルを読み込んで表示させることができます。
SVGファイルはその名の通りベクターベースなので拡大してもピクセルがカクカクになったりしないという利点があります。また、XMLベースなのでグラフィックツールなどを利用して簡単にデータが作成できるという利点もあります。

以下は四角形を描画する例です。

円の例です。

楕円形です。

線の例です。

ポリゴンの例です。

グラフィックツールを使えば、パスやグラデーションを使った以下の様な絵もSVGで描画可能です。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon fill="#FFFF00" stroke="#000000" stroke-miterlimit="10" points="153,184 100.271,158.186 49.113,186.988 57.37,128.863
    14.168,89.109 72,79 96.458,25.628 123.943,77.506 182.261,84.274 141.416,126.445 "/>
<path fill="#C7B299" stroke="#000000" stroke-miterlimit="10" d="M239.192,113.619c4.675,4.697,4.657,12.296-0.04,16.971L119,231
    c-4.697,4.675-14.052,25.583-18.727,20.886l-8.465-8.505C87.133,238.684,109.303,228.675,114,224l99.757-118.926
    c4.696-4.675,12.295-4.657,16.97,0.04L239.192,113.619z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="207.1367" y1="233.4961" x2="281.1367" y2="233.4961" gradientTransform="matrix(-0.9478 0.3187 -0.3187 -0.9478 540.8281 359.5)">
    <stop offset="0" style="stop-color:#FFFFFF"/>
    <stop offset="0.1832" style="stop-color:#FAFAFA"/>
    <stop offset="0.3909" style="stop-color:#EDEDED"/>
    <stop offset="0.6108" style="stop-color:#D6D6D6"/>
    <stop offset="0.8375" style="stop-color:#B6B6B6"/>
    <stop offset="1" style="stop-color:#9B9B9B"/>
</linearGradient>
<circle fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" cx="235" cy="216.001" r="37"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M211.001,187.823C220.17,191.074,227,203.575,227,218.5
    c0,13.298-5.423,24.673-13.091,29.294"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M263.954,239.872c-6.184-2.017-12.876-13.377-15.964-27.979
    c-2.752-13.01-1.847-24.828,1.807-30.323"/>
</svg>

文字を描く例です。

以下は、外部にあるsvgファイルを表示する例です。ファイルは存在しないので以下ではエラーメッセージが表示されます。

2011/07/29

canvas上でアニメーションする

canvas上でアニメーションをさせるには、javascriptで繰り返し描画を行います。

マウスを乗せると描画します。

<canvas id="drawAnimationOnCanvas1Canvas" style="border: 1px solid;" onmouseover="drawAnimationOnCanvas1();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawAnimationOnCanvas1() {
    var c = document.getElementById("drawAnimationOnCanvas1Canvas");
    var context = c.getContext("2d");
    var width = c.width;
    var height = c.height;
    var cx = 150;
    var cy = 150;
    var r = 150;
    var d = 0;
    var fontSize = 1;
    var fontAdd = 0.02;
    setInterval(fire, 50);
    function fire() {
        context.clearRect(0, 0, c.width, c.height);
        context.fillStyle = "#FFFFFF";
        context.fillRect(0, 0, c.width, c.height);
        var x = Math.cos(d * 360) * r + cx;
        var y = Math.sin(d * 360) * r / 2 + cy;
        context.fillStyle = "#000000";
        context.font = fontSize + "em 'Georgia'";
        context.fillText("This is not a Flash", x, y);
        d += 0.07;
        fontSize += fontAdd;
        if (3 < fontSize) fontAdd = -0.02;
        if (fontSize <= 0.25) fontAdd = 0.02;
    }
}
</script>

canvasにグラフを描画する

グラフを描画するには、canvas要素に「四角形を描く」や「線を描く」等で紹介したメソッドを使って地道に書いていくか、ライブラリを使います。
ライブラリの説明はそれぞれのサイトをご覧下さい。
RGraph
html5.jp

マウスを乗せるとグラフを描画します。

<canvas id="drawGraphCanvas1" onmouseover="drawGraph1();" style="border: 1px solid;" width="400" height="300">
</canvas>
<script language="Javascript" type="text/javascript">
function drawGraph1() {
    var c = document.getElementById("drawGraphCanvas1");
    var context = c.getContext("2d");

    // プロットデータ
    var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var attendance = [3, 5, 4, 7, 9, 5, 11, 13, 15, 20, 19, 22];
    var attendanceMax = 22;    // attendanceの最大値

    var originalPoint = 50;    // 原点座標
    var barInterval = 20;        // 棒グラフの間隔

    var graphHeight = c.height - originalPoint;    // グラフの高さ取得
    var graphWidth = c.width - originalPoint;        // グラフの幅取得
    // １メモリの高さ
    var memHeight = Math.floor(graphHeight / attendanceMax);
    // 棒グラフの幅
    var barWidth = (graphWidth - barInterval * month.length) / month.length;

    // Ｘ軸を描画
    context.moveTo(originalPoint, graphHeight);
    context.lineTo(graphWidth + originalPoint, graphHeight);
    context.strokeStyle = "#121212";
    context.stroke();
    // Ｙ軸を描画
    context.moveTo(originalPoint, 0);
    context.lineTo(originalPoint, graphHeight);
    context.stroke();

    // 棒グラフを描画
    var x = originalPoint + barInterval;
    var i = 0;
    for( i = 0 ; i < month.length ; i++) {
        context.fillStyle = "#FF1212";
        context.fillRect(x, graphHeight - (memHeight * attendance[i])
            , barWidth, memHeight * attendance[i]);

        context.fillStyle = "#000000";
        context.fillText(attendance[i], x, graphHeight - (memHeight * attendance[i]) - 3);

        context.strokeStyle = "#FF0000";
        context.stroke();
        context.fillStyle = "#121212";
        context.fillText(month[i] + "月", x, graphHeight + 15);
        x += barInterval + barWidth;
    }

    // メモリを描画
    var y = graphHeight - memHeight;
    for( i = 0 ; 0 < y ; i++) {
        context.strokeStyle = "#696969";
        context.moveTo(originalPoint, y);
        context.lineTo(graphWidth + originalPoint, y);
        context.stroke();

        if ( (i + 1) % 5 == 0 ) {
            context.fillStyle = "#000000";
            context.fillText(i + 1, originalPoint - 20, y);
        }
        y -= memHeight;
    }
}
</script>

canvasに文字を描画する

canvasにテキストを描画するには、以下のプロパティ、メソッドを使います。

メソッド・プロパティ	内容
font	フォントを指定
textAlign	表示位置の指定 left/center/right
textBaseline	テキストのベースラインを指定位置は上からtop/hanging/middle/alphabetic/ideographic/bottomの順。
fillText(text, X, Y)	塗りつぶしテキストを描画
fillText(text, X, Y, Width)	塗りつぶしテキストを描画
strokeText(text, X, Y)	線でテキストを描画
strokeText(text, X, Y, Width)	線でテキストを描画

マウスを乗せると文字を描画します。

<canvas id="drawTextCanvas1" onmouseover="drawText1();" width="400" height="400">
</canvas>
<script language="javascript" type="text/javascript">
function drawText1() {
   var c = document.getElementById("drawTextCanvas1");
   var context = c.getContext("2d");
   var text = "Baseline=top";
   context.font = "1em 'Georgia'";
   context.lineWidth = 1;
   context.fillStyle = "#1212FF";
   context.strokeStyle = "#0000FF";
   context.textBaseline = "top";
   context.fillText (text, 80, 50);
   context.beginPath();
   context.moveTo(80, 50);
   context.lineTo(320, 50);
   context.stroke();

   text = "Baseline=hanging";
   context.textBaseline = "hanging";
   context.fillText(text, 80, 100);
   context.beginPath();
   context.moveTo(80, 100);
   context.lineTo(320, 100);
   context.stroke();

   text = "Baseline=middle";
   context.textBaseline = "middle";
   context.fillText(text, 80, 150);
   context.beginPath();
   context.moveTo(80, 150);
   context.lineTo(320, 150);
   context.stroke();

   text = "Baseline=alphabetic";
   context.textBaseline = "alphabetic";
   context.fillText(text, 80, 200);
   context.beginPath();
   context.moveTo(80, 200);
   context.lineTo(320, 200);
   context.stroke();

   text = "Baseline=ideographic";
   context.textBaseline = "ideographic";
   context.fillText(text, 80, 250);
   context.beginPath();
   context.moveTo(80, 250);
   context.lineTo(320, 250);
   context.stroke();

   text = "Baseline=bottom";
   context.textBaseline = "bottom";
   context.fillText(text, 80, 300);
   context.beginPath();
   context.moveTo(80, 300);
   context.lineTo(320, 300);
   context.stroke();

   text = "縁取り文字";
   context.font = "2em 'Georgia'";
   context.strokeText(text, 80, 350);
   context.beginPath();
   context.moveTo(80, 350);
   context.lineTo(320, 350);
   context.stroke();
}
</script>

2011/07/28

イメージを描画する

イメージをcanvasに描画するには、drawImageメソッドを使います。

描画メソッド	内容
drawImage(image, X, Y)	(X, Y)にimageを描画
drawImage(image, X, Y, W, H)	(X, Y)にimageを指定の大きさ(Width, Height)で描画
drawImage(image, X1, Y1, W1, H1, X2, Y2, W2, H2)	image画像から座標(X1, Y1)から大きさ(W1, H1)で切り取った後、(X2, Y2)から指定の大きさ(W2, H2)にコピーして描画

マウスを乗せると描画します。

<canvas id="drawImage1Canvas" style="border: 1px solid;" onmouseover="drawImage1();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawImage1() {
    var c = document.getElementById("drawImage1Canvas");
    var context = c.getContext("2d");
    var image = new Image();
    image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif";
    image.onload = function() {
        context.drawImage(image, 10, 10, 400, 300);
    }
}
</script>

マウスを乗せると描画します。

<canvas id="drawImage2Canvas" style="border: 1px solid;" onmouseover="drawImage2();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawImage2() {
    var c = document.getElementById("drawImage2Canvas");
    var context = c.getContext("2d");
    var image = new Image();
    image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif";
    image.onload = function() {
        context.drawImage(image, 10, 10, 20, 30, 10, 10, 300, 400);
    }
}
</script>

ベジェ曲線を描画する

ベジエ曲線を描画するには、以下のメソッドを使います。

描画メソッド	内容
quadraticCurveTo(X1, Y1, X2, Y2)	現在位置から(X2, Y2)までのベジェ曲線を描画。その際、(X1, Y1)を使って２次ベジェ曲線カーブをかけます。
bezierCurveTo(X1, Y1, X2, Y2, X3, Y3)	現在位置から(X3, Y3)までのベジェ曲線を描画。その際、(X1, Y1), (X2, Y2)を使って３次ベジェ曲線カーブをかけます。

下の例は、赤線がquadraticCurveToを使った描画で、青線がbezierCurveToを使った描画です。

マウスを乗せると描画します。

<canvas id="drawBezierCurveCanvas" style="border: 1px solid;" onmouseover="drawBezierCurve();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawBezierCurve() {
    var c = document.getElementById("drawBezierCurveCanvas");    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(100, 50);
    context.quadraticCurveTo(300, 0, 300, 250);
    context.strokeStyle = "#FF0000";
    context.stroke();

    context.beginPath();
    context.moveTo(100, 50);
    context.bezierCurveTo(300, 0, 300, 250, 350, 50);
    context.strokeStyle = "#0000FF";
    context.stroke();
}
</script>

円を描く

円を描画するには、arcメソッドを使います。

arc(X, Y, 開始角度, 終了角度, 反時計回り);

角度はラジアンで指定します。また、時計回りに増加していきます。

マウスを乗せると描画します。

<canvas id="drawArcCanvas1" style="border: 1px solid;" onmouseover="drawArc1();width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawArc1() {
   var c = document.getElementById("drawArcCanvas1");
   var context = c.getContext("2d");
   context.arc(200, 150, 100, 0 , 2 * Math.PI, false);
   context.strokeStyle = "#FFCCCC";
   context.lineWidth = 6;
   context.fillStyle = "#CCCCFF";
   context.fill();
   context.stroke();
}
</script>

マウスを乗せると描画します。

<canvas id="drawArcCanvas2" style="border: 1px solid;" onmouseover="drawArc2();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawArc2() {
    var c = document.getElementById("drawArcCanvas2");
    var context = c.getContext("2d");
    context.arc(200, 150, 100, 0, Math.PI / 2, false);
    context.strokeStyle = "#FFCCCC";
    context.lineWidth = 6;
    context.fillStyle = "#CCCCFF";
    context.fill();
    context.stroke();
}
</script>

パスにグラデーションで色を塗る

パスにグラデーションで色を塗るには、pathStyleにグラデーションを指定します。

描画メソッド/プロパティ	内容
createLinearGradient(x1, y1, x2, y2)	線形グラデーションの生成
createRadialGradient(x1, y1, r1, x2, y2, r2)	円形グラデーションの生成
addColorStop(オフセット, 色)	グラデーションの色を指定

<canvas id="drawGradientPathCanvas1" onmouseover="drawGradientPath1();" style="border: 1px solid;" width="400" height="300"></canvas>
<script language="javascript" type="text/javascript">
function drawGradientPath1() {
    var c = document.getElementById("drawGradientPathCanvas1");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    var g = context.createLinearGradient(0, 0, 300, 300);
    g.addColorStop(0.3, "#FF0000");
    g.addColorStop(1, "#00FF00");
    context.fillStyle = g;
    context.fill();
    context.stroke();
}
</script>

以下の例は、上の「createLinearGradient」を「createRadialGradient」に変えただけの例になります。

<canvas id="drawGradientPathCanvas2" style="border: 1px solid;" onmouseover="drawGradientPath2();" width="400" height="300"></canvas>
<script language="javascript" type="text/javascript">
function drawGradientPath2() {
    var c = document.getElementById("drawGradientPathCanvas2");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    var g = context.createRadialGradient(200, 150, 50, 200, 150, 100);
    g.addColorStop(0.3, "#FF0000");
    g.addColorStop(1, "#00FF00");
    context.fillStyle = g;
    context.fill();
    context.stroke();
}
</script>

パスに色を塗る

canvas要素にパスを描画したら、それに色を塗ることもできます。

描画メソッド/プロパティ	内容
strokeStyle	線の色を指定
lineWidth	線の太さを指定
fillStyle	塗りつぶしの色を指定
fill()	塗りつぶしの実行

<canvas id="drawFillPathCanvas" onmouseover="drawFillPath();" style="border: 1px solid;" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawFillPath() {
    var c = document.getElementById("drawFillPathCanvas");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    context.strokeStyle = "#CACAFF";
    context.lineWidth = 8;
    context.fillStyle = "#FFCACA";
    context.fill();
    context.stroke();
}
</script>

線を描く

絵を描けるようにするには、canvas要素を追加します。
canvas要素内で以下のメソッドで描画します。

描画メソッド	内容
beginPath	パスの開始
moveTo	X, Yに移動
lineTo	X, Yに向けて線を描画
closePath	パスを閉じて描画（最後に始点に向かってパスが引かれます）
stroke	パスを線として表示

<canvas id="drawPathCanvas" onmouseover="drawPath();" style="border: 1px solid;" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawPath() {
    var c = document.getElementById("drawPathCanvas");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(300, 200);
    context.stroke();
}
</script>

四角形を描画する

絵を描けるようにするには、canvas要素を追加します。
canvas要素内で以下のメソッドで描画します。

パラメータは全て(x, y, 幅, 高さ)です。

描画メソッド	内容
fillRect	塗りつぶし四角形を描画
clearRect	四角形をクリア
strokeRect	四角形の専を描画

マウスを乗せると描画します。

<canvas id="drawCanvas" onmouseover="drawRect();" style="border:1px solid;" width="400" height="300">このブラウザではcanvasは非対応です。</canvas>
<script language="javascript" type="text/javascript">
function drawRect() {
var c = document.getElementById("drawCanvas");
var context = c.getContext("2d");
context.fillRect(40, 40, 200, 200);
context.clearRect(50, 50, 150, 150);
context.strokeRect(60, 60, 100, 100);
}
</script>

音声ファイルを再生する

音声ファイルを再生するには、audio要素を使います。
プロパティや操作などは基本的にビデオの再生と同じ物が使用できます。（poster（ロード中の画像表示）以外）
詳細は「ビデオを再生する」「Javascriptからビデオにアクセスする」を参照して下さい。

2011/07/27

Javascriptからビデオ要素にアクセスする

video要素にJavascriptからアクセスするには、「getElementById」を使用します。
getElementByIdで得られたvideo要素に対し、以下のものを使ってアクセスすることが可能です。

メソッド一覧

メソッド	意味
load()	ファイルの読み込みを行う
play()	ファイルの再生を行う
pause()	ファイルの再生の一時停止を行う
canPlayType(MIMEタイプ)	指定MIMEタイプが再生可能か判断する maybe:再生可能

プロパティ一覧

プロパティ	意味
currentSrc	現在再生しているファイルのURL。参照のみ
duration	再生時間の長さ（秒）。参照のみ
ended	再生が終了したかどうか true:再生終了。参照のみ
error	エラー時のエラーコード。参照のみ
played	再生済みの時間範囲（TimeRanges型）。参照のみ
seekable	シーク可能な時間範囲（TimeRanges型）。参照のみ
seeking	指定された再生位置に移動中 true:シーク中。参照のみ
startTime	再生開始位置（秒数）。参照のみ
src	動画ファイルのURL
readyState	メディアのダウンロード状態
currentTime	現在の再生位置（秒）
defaultPlaybackRate	デフォルトの再生速度。デフォルトは1.0
playbackRate	再生速度。デフォルトは1.0。巻き戻しはマイナス値
preload	preload属性。 auto:自動読み込み有効 metadata:メタデータのみ none:自動読み込み無し
loop	繰り返し再生をするか
controls	コントロールを表示するか
volume	音声のボリューム。0.0〜1.0
muted	ミュートするか。 true:ミュート

イベント一覧

イベント	発生条件
loadstart	メディアデータのロード開始
progress	メディアデータの読み込み中
suspend	サスペンドした
abort	中断された
error	エラーが発生した
emptied	メディアデータが空
stalled	中断した
play	再生開始
pause	再生停止
load	メディアのダウンロード完了
loadedmetadata	メタデータのダウンロード完了
loadeddata	データの読み込みが完了
waiting	待機中
playing	再生中
canplay	再生可能
canplaythrough	最後まで再生可能
seeking	シーク中
seeked	シーク終了
timeupdate	再生中は１秒間隔で発生
ended	再生終了
ratechange	再生速度が変更された
durationchange	再生時間が変更された
volumechange	音量が変更された

下の例は、ビデオを再生中にtimeupdateイベントを補足して時間と再生率を表示する例です。

<video height="300" id="playMovie" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" width="400">
<source src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&export=download&hl=en_US" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"></source>
<source src="OGG用ファイルのURL.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
<object data="player.swf" type="application/x-shockwave-flash"> <param name="movie" value="フラッシュ用ファイルのURL.swf">
</object>
</video>

<input onclick="startVideo()" type="button" value="再生" />
<span id="progress" name="progress"></span>
<script type="text/javascript">
var v = document.getElementById("playMovie");
function startVideo() {
v.play();
v.addEventListener("timeupdate", fire, false);
}
function fire() {
var prg = document.getElementById("progress");
var rate = Math.floor(v.currentTime) / Math.floor(v.duration) * 100;
rate = Math.round(rate);
prg.innerHTML = Math.floor(v.currentTime) + "/" + Math.floor(v.duration) + " " + rate + "%";
}
</script>

動画を再生する

HTML5は標準で動画の再生をサポートしていますが、以下のようにブラウザごとに再生できるフォーマットに制限があります。
また、本項執筆時点ではHTML5は残念ながらストリーミング再生には対応していないようです。

コーデック	概要	Chrome	Fire Fox	Opera	Safari	iPhone /iPad	IE
Ogg Theora Ogg Vorbis	Xiph.org Foundationが開発したオープンソースのビデオ・音声コーデック。	○	○	○	×	×	×
MP4(H.264, AAC)	携帯電話からHDTV等の高品質再生まで対応した共通規格。	×	×	×	○	○	○

下にビデオ要素を使った例を示します。動画ファイルをGoogle Docに置いてるので、ビデオが見られない場合があるかもしれません。（Google Docはアクセスが集中するとアクセス制限がかかるようです。）

以下に、HTMLを示します。
poster属性とsrc属性は下の例では長くなっていますが（Googleのサービスを利用するため、長いURLになっています。）、サーバー等に配置する場合は、もっと短いURLで記述できるはずです。

それぞれのパラメータは以下の意味になります。

属性	内容
src	動画ファイル名
autoplay	自動で再生を行うか指定。
controls	再生・停止などのコントローラを表示する指定。
preload	自動読み込みを行うか指定。 auto:自動読み込み有効 metadata:メタデータのみ none:自動読み込み無効
loop	繰り返し再生を指定。
poster	動画が再生されるまでの間に表示される画像を指定

どのブラウザでも再生できるようにするには、以下のようにsource属性でブラウザに対応したファイルの指定を行います。
<object>〜</object>まではHTML5に対応していないブラウザでもFlashを使って再生できるようにするタグです。
sourceの「type」は基本的に不要ですが、動画データによっては複数のタイプを含んでいてブラウザがどのタイプを選べば良いか判断できない場合があるようなので、その場合に備えて一応指定しておきます。
当然ですが、動画ファイルはそれぞれ用意する必要があります。

type	内容
video/mp4; codecs='avc1.42E01E,mp4a.40.2'	MP4コンテナ。シンプルベースラインH.264動画とAAC音声
video/mp4; codecs='mp4v.20.8,mp4a.40.2'	MP4コンテナ。シンプルプロファイルレベル0動画とAAC音声
audio/ogg; codecs='vorbis'	OGGコンテナ。vorbis音声コーデック

下の例では、sourceに「OGG用ファイルのURL.ogg」「フラッシュ用ファイルのURL.swf」と指定していますが、この例では実在しないファイルなので再生されません。動画ファイルの変換が面倒くさいのでしてないだけです。（汗）

<video controls="controls" height="300" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" width="400">再生できません。
<source src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&export=download&hl=en_US" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"></source>
<source src="OGG用ファイルのURL.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
</video>
<object data="player.swf" type="application/x-shockwave-flash"> <param name="movie" value="フラッシュ用ファイルのURL.swf">
</object>

2011/07/26

アニメーションさせる

テキストやイメージ等をフラッシュのようにぐりぐり動かすには、「@keyframes」「animation」プロパティを指定します。
本項執筆時点では、keyframesはSafariのバージョン４以降、Chromeの３以降でないと正常に動作しないようです。

プロパティ名	内容
animation-name	フレーム名を指定
animation-duration	アニメーションにかける時間(s/ms)
animation-timing-function	速度の変化パターン
animation-iteration-count	アニメーションの繰り返し回数
animation-direction	繰り返し指定 alternate:逆再生
animation-delay	アニメーションの開始遅延

Jump!

プロパティ値を徐々に変化させる

プロパティ値を徐々に変化させるには、transitionプロパティを使用します。

transition:[変化させるプロパティ値] [変化にかける時間] [速度のパターン] [遅延]

速度のパターンは、以下の物があります。

速度のパターン	内容
linear	一定速度
ease	少し減速して開始、少し減速して終了
ease-in	減速して開始
ease-out	減速して終了
ease-in-out	減速して開始、減速して終了

transitionプロパティはｍ「変化させるプロパティ」「変化にかける時間」「速度のパターン」「遅延」等全てを一括で指定できますが、それぞれ個別に指定するプロパティもあります。
transition-property:変化させるプロパティを指定
transition-duration:変化にかける時間を指定
transition-timing-function:速度の変化パターンを指定
transition-delay:遅延を指定

本項執筆時点では、Firefoxのバージョン５以降、Operaの１０．５以降、Safariの４以降、Chromeの３以降でないと正常に動作しないようです。

マウスを乗せると文字が変化します。

-webkit-とか、-moz-とか

時々プロパティ等で「-moz-プロパティ名」とか、「-webkit-プロパティ名」等を見かけることがあります。
これは、HTML5の仕様が正式になっていない場合に付けられる「ベンダープレフィックス」というものです。ベンダー毎に動作が異なる場合があるようなので、ベンダープレフィックスが必要な物は付けておいた方が良いです。また、合わせて正式版になっても修正を極力減らす為に、ベンダープレフィックス無しの物も付記しておいた方がよいです。

「-moz-」がＦｉｒｅｆｏｘ等のMozilla系ブラウザ用です。
「-webkit-」がＳａｆａｒｉ，Ｃｈｒｏｍｅ等のブラウザ用です。
「-o-」がＯｐｅｒａ用です。
「-ms-」がＩＥ用です。

仕様が正式になったらこのベンダープレフィックスをはずすことが推奨されています。

CSSでレイアウト

CSSでレイアウトを指定するには、「box-ordinal-group」と「box-flex」等のboxプロパティを使います。

プロパティ	内容
box-orient	子要素の並べ方。 horizontal:水平（左から右） vertical:垂直（上から下） inline-axis:水平方向の設定に従う block-axis:垂直方向の設定に従う
box-direction	子要素の並べ方を指定。 normal:左上から右下へ reverse:右下から左上へ
box-align	子要素を揃える縦位置を指定。 start:親要素の上辺に end:親要素の下辺に center:親要素の中央に stretch:子要素の高さを親要素に合わせる
box-pack	子要素を揃える横位置を指定。 start:左寄せ end:右寄せ center:中央 justfy:余白を分割して子要素の間に割り当てる

記事一覧

メイン記事

日付順記事

2011/07/25

タブのボタンを作る

CSSでタブのような物を作るには、以下のように「border-radius」プロパティを指定します。

プロパティ	内容
border-radius	全体の角の大きさ設定
border-top-right-radius	右上の角の大きさ設定
border-top-left-radius	左上の角の大きさ設定
border-bottom-right-radius	右下の角の大きさ設定
border-bottom-left-radius	左下の角の大きさ設定

お店
商品
アクセス

テキストを角丸の枠線で囲う

テキストを角が丸い枠線で囲うには、border-radiusプロパティを指定します。

角丸の枠線で囲ってます。

要素に複数画像を設定する

１つの要素に複数の画像を指定するには、「background-image」に複数の画像を指定します。

角にある１〜４の数字の画像は、それぞれ１つのTABLE要素に配置した別々の画像です。

文字に影を付ける

テキストに影を付けるには、「text-shadow」を指定します。
text-shadow:X軸オフセット Y軸オフセットぼかしの範囲影の色;

これは画像ではありません。その証拠に文字を選択できます。

サーバー上のフォントを使う

サーバー上にあるフォントを指定するには、「@font-face」を使います。
@font-face {
font-family:SampleFont;
src=url('Quicksand_Light_Oblique.otf') format('OpenType');
}

font-familyにはCSS内で使う任意のフォント名を指定します。CSS内で一意であれば「ABCDEFont」とかでも何でも良いと思います。
srcにサーバー上にあるフォント名を指定し、formatに「TrueType」「OpenType」「Embedded OpenType」のいずれかを指定します。それぞれどのformatに当てはまるかは、フォントの説明を見る必要がありますが、通常はフォントファイルの拡張子が「ttf」（TrueType）「ttf/otf/ttc」（OpenType）「eot」（Embedded OpenType）になります。

この文字は、サーバー上にあるQuicksand_Light_Obliqueフォントを使用しています。

属性セレクタ

属性セレクタとは、CSS側から「属性」を指定することができる機能です。
要素[属性=値]
例えば、input要素のtype属性が”tel”のものだけに効果を適用するには、以下のように指定します。
input[type=”tel”]
属性セレクタには、この他に以下の物があります。

属性セレクタ	内容
要素[属性^=値]	属性が「値」で開始する要素
要素[属性$=値]	属性が「値」で終了する要素
要素[属性*=値]	属性が「値」を含む要素

下の例では、INPUT要素の「type属性」毎に枠の色と形、太さを変えています。

氏名：

電話：

メール：

要素セレクタ2

要素セレクタ1の続きです。

下の例はセレクタの「nth-of-type」を使って「冷やし中華」の部分だけを目立たせています。

あんこ	シューマイ
いちご	餃子
アイス	ニラレバ
アメ	チャーハン
チョコ	冷やし中華

セレクタ	内容
nth-child(条件)	前から「条件」要素の指定
nth-last-child(条件)	後ろから「条件」要素の指定
nth-of-type(条件)	同一要素を対象として、前から「条件」要素の指定
nth-last-of-type(条件)	同一要素を対象として、後ろから「条件」要素の指定
first-child	最初の要素の指定
last-child	最後の要素の指定

要素セレクタ1

要素セレクタとは、CSS側から要素を指定することができる機能です。
例えば、CSSでテーブルの特定セル（要素）の色を変えたりすることができます。
下の例は、行（tr）要素の奇数（Odd）の色を水色に、偶数（Even）の色を白色に変更しています。

あんこ	シューマイ
いちご	餃子
アイス	ニラレバ
アメ	チャーハン
チョコ	冷やし中華

入力要素のチェック2

JavaScriptからValidityのエラー詳細を取得することができます。

名前	内容
element.willValidate	入力チェックが行われるか(true/false)
element.setCustomerValidity(エラーメッセージ)	任意のエラーメッセージをセット
element.validity.valueMissing	入力必須（required属性）なのに入力がない場合true
element.validity.valueTypeMismatch	pattern属性のパターンに一致しない場合true
element.validity.tooLong	maxlengthより入力文字数が長い場合にtrue
element.validity.rangeUnderflow	min属性より値が小さい場合にtrue
element.validity.rangeOverflow	max属性より値が大きい場合にtrue
element.validity.stepMismatch	入力値がstep属性で指定された値と一致しない場合にtrue
element.validity.customError	独自エラーが設定されている場合にtrue
element.validity.valid	入力チェックを全て通る場合にtrue
element.validity.checkValidity()	入力チェックを全て通る場合にtrue。falseの場合にinvalidイベントを生成
element.validity.validationMessage	入力チェックが行われた際のエラーメッセージを返却

下の例は、フォームに値を入力してから「送信」ボタンを押すとチェック結果が表示されます。

入力要素のチェック1

form欄で入力された値をjavascriptから参照するには、validityプロパティを使用します。
下の例は、送信ボタンが押された時に入力欄のチェック結果をjavascriptのalertを使って表示します。

formの入力要素をform外で指定する

formで入力要素を外部の要素と関連づけるには、fieldset要素を使います。
fieldsetを使うとform要素から外部の要素が呼び出せるようになります。

名前：

電話：

メール：

住所：

決まった型での値入力

入力欄の型が決まっている場合、入力値を決まったパターンに強制させることができます。
pattern属性で定型文字列を指定し、required属性で入力必須かどうかを指定します。
inputのtypeがemail/password/search/tel/text/urlの場合に型を指定することができます。

formのアクション実行時にパターンのチェックや必須項目かのチェックがクライアント側で行われ、エラーの場合はメッセージが表示されます。パターンは正規表現で指定します。正規表現についてはそれだけで１冊の本ができてしまう位奥深いので、本サイトでの説明は省略します。

<form name="creditcard" action="">
カード番号：<input type="text" name="number" pattern="[0-9]{16}" required title="16桁のカード番号を入力して下さい。" placeholder="0123456789012345">
</form>

novalidate属性を付けるとチェックを行わないように指定することもできます。
ただし、本項執筆時点では対応しているブラウザは存在しないようです。

登録: 投稿 (Atom)