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を使用します。




0%





<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”に指定する必要があります。

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


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





<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ドラッグ&ドロップされたデータをクリアする
typessetDataメソッドでセットされた情報のtype(text/plain等)を取得する
files他アプリケーションからドラッグされたファイル情報を取得する
setDragImage(image, X, Y)ドラッグ中に表示されるイメージを指定する
addElement(element)ドラッグ中に表示されるイメージに要素を追加する

2011/07/30

SVGを描画する

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

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





<svg height="150" width="300" xmlns="http://www.w3.org/2000/svg">
 <rect height="100" style="fill: orange;" width="100" x="30" y="30"></rect>
 <rect height="100" ry="8" style="fill: black;" width="100" x="150" y="30"></rect>
</svg>



円の例です。





<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" style="fill: blue;" width="100" />
</svg>



楕円形です。





<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
 <ellipse cx="50" cy="50" rx="50" ry="20" style="fill: skyblue;">
</ellipse></svg>




線の例です。





<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 <polyline fill="none" points="20,20 100,100 180,30" stroke-width="3" stroke="black"></polyline>
</svg>



ポリゴンの例です。





<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 <polygon fill="blue" points="20,20 100,100 180,30" stroke-width="3" stroke="black"></polygon>
</svg>



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





<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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 height="200" width="400" xmlns="http://www.w3.org/2000/svg">
 <text fill="skyblue" font-family="sans-serif" font-size="30" stroke-width="1" stroke="blue" x="30" y="30">
テキストです。
 </text>
 <defs>
  <path d="M30,100 C100,100 150,200 200,100 C250,200 300,150 400,150" id="textPath1"></path>
 </defs>
 <text fill="skyblue" font-family="sans-serif" font-size="30" stroke-width="1" stroke="blue" x="30" y="100">
  <textpath xlink:href="#textPath1">パスに沿ったテキストです。</textpath>
 </text>
</svg>



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






<object data="svgファイルのURL" type="image/svg+xml" width="400" height="300"></object>


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;        // グラフの幅取得
    // 1メモリの高さ
    var memHeight = Math.floor(graphHeight / attendanceMax);
    // 棒グラフの幅
    var barWidth = (graphWidth - barInterval * month.length) / month.length;
   
    // X軸を描画
    context.moveTo(originalPoint, graphHeight);
    context.lineTo(graphWidth + originalPoint, graphHeight);
    context.strokeStyle = "#121212";
    context.stroke();
    // Y軸を描画
    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)を使って2次ベジェ曲線カーブをかけます。
bezierCurveTo(X1, Y1, X2, Y2, X3, Y3)現在位置から(X3, Y3)までのベジェ曲線を描画。その際、(X1, Y1), (X2, Y2)を使って3次ベジェ曲線カーブをかけます。

下の例は、赤線が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パスの開始
moveToX, Yに移動
lineToX, 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は非対応です。





<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。巻き戻しはマイナス値
preloadpreload属性。
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再生中は1秒間隔で発生
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&amp;export=download&amp;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は残念ながらストリーミング再生には対応していないようです。


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


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




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

<video controls="controls" height="300" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&amp;export=download&amp;hl=en_US" width="400">再生できません。
&nbsp;</video>



それぞれのパラメータは以下の意味になります。
属性内容
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&amp;export=download&amp;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のバージョン4以降、Chromeの3以降でないと正常に動作しないようです。


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




Jump!

















<style type="text/css">
@-webkit-keyframes jump {
    0% {
        top:100px;
        left:0px;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
    }
    50%  {
        top:0px;
        left:50px;
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
    }
    100% {
        top:100px;
        left:100px;
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
    }
}
.animation {
    -webkit-animation-name:jump;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:10;
    -webkit-animation-direction:alternate;
    animation-name:jump;
    animation-duration:2s;
    animation-iteration-count:10;
    animation-direction:alternate;
    position:relative;
    left:0px;
}
</style>
<p class="animation">Jump!</p>

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

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

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

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

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

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

本項執筆時点では、Firefoxのバージョン5以降、Operaの10.5以降、Safariの4以降、Chromeの3以降でないと正常に動作しないようです。




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



<style type="text/css">
p {
    -webkit-transition:all 2s linear;
    -moz-transition:all 2s linear;
    transition:all 2s linear;
    font-size:20;
    color:#0000BB;
}
p:hover {
    font-size:30px;
    color:#000000;
}
</style>
<p>マウスを乗せると文字が変化します。</p>

-webkit-とか、-moz-とか

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

「-moz-」がFirefox等のMozilla系ブラウザ用です。
「-webkit-」がSafari,Chrome等のブラウザ用です。
「-o-」がOpera用です。
「-ms-」がIE用です。

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

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:余白を分割して子要素の間に割り当てる





記事一覧
メイン記事
日付順記事



<style type="text/css">
#columnLayout {
    width:100%;
    height:400px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
}
#leftColumn {
    width:80px;
    height:400px;
    background:#CACAFF;
    box-ordinal-group:1;
    -moz-box-ordinal-group:1;
    -webkit-box-ordinal-gruop:1;
}
#centerColumn {
    height:400px;
    background:#FFFFFF;
    box-ordinal-group:2;
    -moz-box-ordinal-gruop:2;
    -webkit-box-ordinal-group:2;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
#rightColumn {
    width:50px;
    height:400px;
    background:#FFCACA;
    box-ordinal-group:3;
    -moz-box-ordinal-gruop:3;
    -webkit-box-ordinal-group:3;
}
</style>
<div id="columnLayout">
    <div id="leftColumn" >記事一覧</div>
    <div id="centerColumn" >メイン記事</div>
    <div id="rightColumn" >日付順記事</div>
</div>

2011/07/25

タブのボタンを作る

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

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




お店
商品
アクセス

<style type="text/css">
.tab {
    font-size:20px;
    border-top-left-radius:15px;
    border-top-right-radius:20px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    border:4px solid #6666FF;
}
.tab:hover {
    background-color:#CCCCFF;
    border:4px solid #FFCCCC;
}
</style>
<a class="tab" >お店</a>
<a class="tab">商品</a>
<a class="tab">アクセス</a>

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

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



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

<style type="text/css">
.round {
    border-radius:8px;
    border:2px solid #0000FF;
    padding:4px;
    width:300px;
</style>
<p class="round">角丸の枠線で囲ってます。</p>

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

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



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







<style type="text/css">
table {
    height:200px;
    width:320px;
    background-image:url(btn1.png),url(btn2.png),url(btn3.png),url(btn4.png);
    background-repeat:no-repeat;
    background-position:top left, top right, bottom left, bottom right;
}
</style>
角にある1〜4の数字の画像は、それぞれ1つのTABLE要素に配置した別々の画像です。
<table></table>

文字に影を付ける

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



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

<style type="text/css">
.shadow1 {
    text-shadow:5px 5px 5px #000000;
}
</style>
<p class="shadow1">これは画像ではありません。その証拠に文字を選択できます。</p>

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

サーバー上にあるフォントを指定するには、「@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フォントを使用しています。


<style type="text/css">
@font-face {
    font-family:SampleFont;
    src=url('Quicksand_Light_Oblique.otf') format('OpenType');
}
body {
    font-size:20px;
    font-family:SampleFont;
}
</style>
<body>
この文字は、サーバー上にあるQuicksand_Light_Obliqueフォントを使用しています。
</body>

属性セレクタ

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

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

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



氏名:

電話:

メール:


<style type="text/css">
input[type="text"] {
    border-radius:8px;
    border:1px solid #000000;
}
input[type="tel"] {
    border-radius:4px;
    border:2px solid #AAAAFF;
}
input[type="email"] {
    border-radius:2px;
    border:2px solid #FF0000;
}
</style>
氏名:<input type="text" name="name"><br>
電話:<input type="tel" name="tel"><br>
メール:<input type="email" name="email"><br>

要素セレクタ2

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

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



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

<style type="text/css">
tr:nth-child(odd) {
    background-color:#CCFFFF;
}
tr:nth-child(even) {
    background-color:#FFFFFF;
}
tr:nth-of-type(5)
td:nth-of-type(2) {
    background-color:#FFFF55;
}
</style>
<table border="1" boardercolor="#0000FF">
<tr><td>あんこ</td><td>シューマイ</td></tr>
<tr><td>いちご</td><td>餃子</td></tr>
<tr><td>アイス</td><td>ニラレバ</td></tr>
<tr><td>アメ</td><td>チャーハン</td></tr>
<tr><td>チョコ</td><td>冷やし中華</td></tr>
</table>


セレクタには他に以下の物があります。
下の表もテーブルを使用しているので黄色い部分がありますが(CSSが効いているためです。)、気にしないで下さい。








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

要素セレクタ1

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



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

<style type="text/css">
tr:nth-child(odd) {
    background-color:#CCFFFF;
}
tr:nth-child(even) {
    background-color:#FFFFFF;
}
</style>
<table border="1" boardercolor="#0000FF">
<tr><td>あんこ</td><td>シューマイ</td></tr>
<tr><td>いちご</td><td>餃子</td></tr>
<tr><td>アイス</td><td>ニラレバ</td></tr>
<tr><td>アメ</td><td>チャーハン</td></tr>
<tr><td>チョコ</td><td>冷やし中華</td></tr>
</table>

入力要素のチェック2

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

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


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


氏名:
年齢:
住所:
メールアドレス:
電話番号:



<script type="text/javascript">
function check() {
    var f = document.myForm;
    var items = f.elements;
    var len = items.length;
    for(var i=0;i<len;i++){
        var elm = items.item(i);
        if (elm.nodeName == "INPUT" && elm.validity){
            var elm_error = f.querySelector("#" + elm.name + "_error");
            if(elm_error) elm_error.innerHTML = "";
            // 入力値エラーだった場合
            if(elm.validity.valid == false) {
                // 入力値エラーの種類の判定とエラー・メッセージの定義
                var err_msg = "";
                // 必須入力に値がない場合
                if(elm.validity.valueMissing) {
                    err_msg = "入力をご確認ください。";
                }
                // 入力タイプが違う場合
                else if(elm.validity.typeMismatch) {
                    err_msg = "入力フォーマットをご確認ください。";
                }
                // 入力パターンが違う場合
                else if(elm.validity.patternMismatch) {
                    err_msg = "入力形式をご確認ください。";
                }
                // 入力数値が小さすぎる場合
                else if(elm.validity.rangeUnderflow) {
                    err_msg = "18歳未満は受付できません。";
                }
                // 入力数値が最大値を超える場合
                else if(elm.validity.rangeOverflow) {
                    err_msg = "66歳以上は受付できません。";
                }
                // 入力内容が最大長を超える場合
                else if(elm.validity.tooLong) {
                    err_msg = "入力内容が長すぎます。";
                }
                // その他のエラー
                else {
                    err_msg = "入力内容をご確認ください。";
                }
                // エラーメッセージ表示
                if(elm_error) elm_error.innerHTML = err_msg;
            }
        }
    }
}
</script>
<form id="personInfo" name="myForm" action="">
    <p>氏名: <input type="text" name="name" maxlength="5" required placeholder="名前を入力します。">
                 <span id="name_error" style="color: #FF0000;"></span></p><br>
    <p>年齢:<input type="number" name="age" min="18" max="65" required placeholder="年齢を数値で入力します。">
                 <span id="age_error" style="color: #FF0000;"></span></p><br>
    <p>住所: <input type="text" name="address" required placeholder="東京都渋谷区・・">
                 <span id="address_error" style="color: #FF0000;"></span></p><br>
    <p>メールアドレス: <input type="email" name="email" required placeholder="xxxx@google.com">
                 <span id="email_error" style="color: #FF0000;"></span></p><br>
    <p>電話番号: <input type="tel" name="tel" required pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{4}" placeholder="03-1234-5678">
                 <span id="tel_error" style="color: #FF0000;"></span></p><br>
    <p><button type="button" onclick="check()">送信</button></p>
</form>

入力要素のチェック1

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



電話番号:

<script type="text/javascript">
function check() {
    var result = document.myForm.phone.validity;
    window.alert(result.valid);
}
</script>
<form id="validitySample" name="myForm" action="">
電話番号:<input type="tel" name="phone" pattern="[0-9]{12}" required>
<button type="submit" onclick="check()">送信</button>
</form>

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

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


名前:

電話:

メール:

住所:


<fieldset form="personinfo">
名前:<input type="text" name="name" size="40"><br>
電話:<input type="tel" name="tel" size="12"><br>
メール:<input type="email" name="email"><br>
住所:<input type="text" name="address" size="20"><br>
</fieldset>
<form id="personinfo" action="" method="post">
    <button type="submit">送信</button>
</form>

決まった型での値入力

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

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


カード番号:

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

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


カード番号:

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