HTML5の解説 (2)
HTML5で新しく追加されたAPIを、Javascriptを使って体験してみましょう。
これまでのブラウザでは出来なかった動作が実行出来ます。
JavaScriptが分っていないと、かなり難易度が高いので、分らない人は「図形を描く」の項目を中心に学習してください。（canvasの図はiPhoneでも表示できます）
１、図を描く（図形）
XHTML5では、より簡単に図を描くことができます。描く命令はJavascriptで書きます。
枠付き四角を描く
例 (jQueryを利用）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta charset="UTF-8" />
<title>タイトル</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body> <script type="text/javascript"> $(function(){ //drowボタンをクリックした時に、図を描く。 $("#drow").click(function(){ //カンバス情報の取得 var canvas = $("#sample1")[0]; if (canvas.getContext) { var context = canvas.getContext('2d'); //色を指定する context.strokeStyle = 'rgb(0,0,255)'; //枠線の色は青 context.fillStyle = 'rgb(255,0,0)'; //塗りつぶしの色は赤 //canvas左から20上から40の位置に、幅50高さ100の枠を描く context.strokeRect(20,40,50,100); //canvas左から21上から41の位置に、幅48高さ98の塗りつぶし四角形を描く context.fillRect(21,41,48,98); } }); }); </script> <form action=""> <fieldset> <legend>描く</legend> <input type="button" id="drow" value="描く" /> </fieldset> </form> <canvas id="sample1"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> </body> </html>
問題 １
public_html/tomcat/html5にcanvas1.htmlというファイルを作り、上の例を作りなさい。
塗りつぶしの色を黄色に変えなさい。
枠の高さ、幅を200x200pxに変えなさい。
２、図形を操作する（文字）
図形を操作するには、Javascriptを使います。
たとえば図形に文字を入れるには、fillTextメソッドを使います。
jQueryを利用すると、以下のように入れられます。
例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta charset="UTF-8" />
<title>タイトル</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body> <script type="text/javascript"> $(function(){ $("#drow2").click(function(){ var canvas = $("#sample2")[0]; if (canvas.getContext) { var c2 = canvas.getContext('2d'); //文字色は黒 c2.fillStyle = "rgb(0,0,0)"; //フォントサイズ１０px c2.font = "10px"; //左から0px上から10pxの位置に、最大幅200pxで”山田”という文字を入れる c2.fillText("山田", 0,10,200); } }); }); </script> <form action="">
<fieldset> <legend>グラフ</legend> <input type="button" id="drow2" value="描く" /> </fieldset> </form> <br /><br /> <canvas id="sample2"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> </body> </html>
問題 ２
public_html/tomcat/html5にcanvas2.htmlというファイルを作り、上の例を作りなさい。
文字色黒、最大２００px幅で、「こんにちは」という文字をカンバスに表示させなさい。
＊＊＊＊＊ カンバスを利用した、グラフの例 ＊＊＊＊＊＊＊
問題 ３
public_html/tomcat/html5にgraph.htmlというファイルを作り、上のようなグラフを作りなさい。
グラフの色を青色にしなさい。
文字を入れるときは、説明したように、fillTextを使うと入れられます。
var c2 = canvas.getContext('2d');
c2.fillStyle = "rgb(0,0,0)";
c2.font = "10px";
c2.fillText("山田", 0,10,200);
３、JSPのデータをグラフにする
問題 ４
public_html/tomcat/html5にjspcanvas.htmlというファイルを作り、上のようなグラフを作りなさい。
htmlにはJSPで作ったjavascriptをリンクさせる。
<script type="text/javascript" src="sc.jsp"></script>
JSP側は
<%@ page contentType="text/javascript; charset=UTF-8" trimDirectiveWhitespaces="true" %>
として、javascriptとして、JSPの出力が出来るようにする。
データは、svgの時につかった商品ごとの売り上げ合計を使用してください。
４、GPSを使って位置情報を表示する
HTML5から実装された、Geolocations APIを使うと、現在位置の緯度、経度を調べることができます。
Safari5.1での実装は100%で、全ての機能を利用出来ます。
iPhoneでも同じようにして利用出来ます。
（PCのブラウザでは、アクセス元のIPアドレスを解析して位置を割り出しています）
位置確認のダイアログが表示されるので、「許可」してください。
例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Safari + GPS</title>
<script type="text/javascript">
window.onload = function(){
navigator.geolocation.watchPosition(function(position){ var lat = position.coords.latitude;
var lng = position.coords.longitude;
var acc = position.coords.accuracy;
document.getElementById("pos").innerHTML = lat+","+lng+","+acc+"<br />"+(new Date()); });
}
</script>
</head>
<body>
<h1>現在の位置情報を表示</h1>
<div id="pos">lat, lng, accuracy</div>
</body>
</html>
例 google maps v3 を使って、場所を表示してみた (gps.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: "現在地= " + " 北緯:"+lat+" 東経:"+lng
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Sample Map"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 300px; height: 300px;"></div>
</body>
</html>
問題５
public_html/tomcat/html5にgps.htmlというファイルを作り、上のような地図を作りなさい。
地図の大きさを大きくしてください。
５、Webストレージ
非常に大きなデータを保存することができる。Safariでは無制限です。（今までのcookieを使った方法では最大4096バイト）
例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
//ストレージの内容一覧表示
function ls(){
$("#list").empty();
var list="";
list="<table border='1'>";
list+="<tr><th>キー</th><th>値</th></tr>";
for(i=0;i<localStorage.length;i++){
var k =localStorage.key(i);
var str = localStorage.getItem(k);
list+= "<tr><td>"+k + "</td><td>" + str +"</td></tr>";
}
list+="</table>";
$("#list").html(list);
}
//各ボタンを押したときの動作
$(function(){
//読み込み時にまず一覧を表示
ls();
//追加ボタンを押した時、ストレージにデータ保存
$("#add").click(function(){
localStorage.setItem($("#skey").val(),$("#svalue").val());
$("#info").html("保存しました");
ls();
});
//削除ボタンを押した時、キーの値を削除
$("#del").click(function(){
localStorage.removeItem($("#sdel").val());
$("#info").html("削除しました");
ls();
});
//検索ボタンを押した時、キーの値を検索、表示する
$("#sel").click(function(){
$("#s").html("検索された値="+localStorage.getItem($("#ssel").val()));
ls();
});
//ストレージの全ての内容を削除する
$("#all").click(function(){
localStorage.clear();
$("#info").html("データストアを空にしました");
ls();
});
});
</script>
</head>
<body>
情報：<div id="info"></div><hr />
一覧：<div id="list"></div><hr />
検索結果：<div id="s"></div><hr />
<form action="">
<fieldset>
<legend>Webストレージの利用</legend>
設定するキー:<input type="text" id="skey" /><br />
メモ:<textarea id="svalue" cols="30" rows="10"></textarea><br />
</fieldset>
<fieldset>
<legend>操作パネル</legend>
<input type="button" value="データを追加" id="add"/><br />
削除するキー:<input type="text" id="sdel" />
<input type="button" value="データを削除" id="del" /><br />
検索するキー:<input type="text" id="ssel" />
<input type="button" value="データを検索" id="sel" /><br />
<input type="button" value="データを完全消去" id="all" /><br />
</fieldset>
</form>
</body>
</html>
★参考 localStrorageのとても分りやすい説明 localStorage自体、メソッドが少ないので、そんなに難しくない。
JSON.stringfy()とJSON.parse()を使う（最初から入ってます）と、ストレージに、配列やオブジェクトを入れる事が可能。
問題６
public_html/tomcat/html5にstorage.htmlというファイルを作り、上のデータベースを作ってください。
これを「買い物かご」に改良しなさい。
買い物かごは、商品の追加、削除、更新が出来るようにし、下に合計金額が表示されるようにしてください。