html5

html5機能

• (1) ファイルのキャッシュ機能「Application Cache」

　Webブラウザのキャッシュ機能とは別に、Webサイト側で
　指定したファイルを明示的にキャッシュする
　→　サーバーとの通信ができない状況でもWebページを閲覧することが可能になる。
　　モバイル環境で利用するWebアプリケーションでは有効になる。

• (2) WebブラウザにDBを持たせる機能、「Web Storage」や

　IndexedDB」と呼ばれる機能、JavaScriptを使って
　データを保存したり、引き出したりできる
　→　業務システムで使うマスターデータや画像ファイルなどを保存しておけば、
　　サーバーにアクセスしなくてもWebブラウザの画面上に必要なデータを表示できる

• (3) その他の機能

　・高速な双方向通信を実現する「WebSocket」
　・端末の位置情報データを扱う「Geolocation API」

• (4) HTML5を扱うために

　・HTMLのタグ
　・JavaScript
　　→　サーバー側のアプリケーションを開発する技術だけでなく、
　　　HTMLやJavaScriptにもある程度明るくないと厳しい
　(HTMLとCSS3の組み合わせが、Flashと比べ劣らなくなった)

<< 従来のhtmlとどう違う? >>

• １．動画や音声、グラフィックの描画が可能になる
  • 動画を用いたい　→　video要素を用いる

<video width="640" height="360" preload="auto"

 poster="hoge.png" controls autoplay>
 // WebM形式の動画
 <source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'>
 // ogv形式の動画
 <source src="hoge.ogv" type='video/ogg; codecs="theora, vorbis"'>
 // mp4形式の動画
 <source src="hoge.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 // video要素に非対応
 <p>動画を再生できません。<a href="hoge.html">推奨環境はこちらから。</a></p>

</video>

• • 音声を持ちたい　→　audio要素を用いる

<audio controls loop>

 // ogg形式の音声
 <source src="hoge.ogg">
 // wav形式の音声
 <source src="hoge.wav">
 // mp3形式の音声
 <source src="hoge.mp3">
 // audio要素に非対応
 <p>音声を再生できません。<a href="hoge.html">推奨環境はこちらから。</a></p>

</audio>

• • グラフィックの描画　→　canvas要素を用いる

<canvas id="canvas" width="640" height="360"></canvas>

 <script>
 //描画コンテキストを取得
 var canvas = document.getElementById('canvas');
 if(canvas.getContext){
   var context = canvas.getContext('2d');
   // 赤色で塗りつぶす
   context.fillStyle = 'rgb(255,0,0)';
   // 左から20上から30の位置に、横幅64・高さ32の四角形を描く
   context.fillRect(20,30,64,36);
 }
 </script>

• • 位置情報を取得したい
    • geolocationをJavaScriptで用いる

<script>

 window.addEventListener('load'. function () {
 //geolocationが用いる事が出来るか判定
   if(navigator.geolocation){
     //現在地を定期的に監視する
     navigator.geolocation.watchPosition(update);
   }
 }, false);
 // 位置が?検出されたら緯度、経度を表示
 function update(position){
   // 緯度を取得
   var lat = position.coords.latitude;
   // 経度を取得
   var lng = position.coords.longitude;
   //経度・経度を書き出し
   document.write('緯度：'+lat+'経度：'+lng);
 }

</script>

• • 大量のデータをクライアント側で保持したい
    • LocalStorageをJavascrptで用いる

<script>

 // localStorageに値を格納
 localStorage.key = '保存したい値';
 // localStorageから値を取得
 var hoge = localStorage.key;
 //「保存したい値」を書き出し
 document.write(hoge);

</script>