Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

アプリ映像9 (jQuery Mobile3 & HTML5 API)

■jQueryMobile

(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】

 data-role=”fieldcontain”

 placeholder=”ヒント出力”

 select ~ data-role=”slider”

 3/29(金)に、Mac Book Airで試してみよう!!!

■HTML5 API

(1)WebStrage
 ▼sessionStorage
  PHPのセッションだネ!

 ▼localStorage
  プラウザ内に映像的にデータを保存するストレージ

  保存は「ドメイン名:ポート番号」の組み合わせ「オリジン」単位で保存。

  ▽set
window.onload = function(){
localStorage.setItem( “test1″, “test” );
};

  ▽get
var get_value = localStorage.getItem( “test1″ );
document.getElementById(“test”).innerHTML = get_value;

  ▽remove
localStorage.removeItem( “test1″ );

(2)AppCache

 ▼アプリケーションキャッシュ:CacheManifestの基本
  処理の流れ:
   1回目HTMLをリクエスト:
    キャッシュを保存
   2回目HTMLをリクエスト:
    利用

  ▽index.html
  

  ▽.htaccess
  AddType text/cache-manifest .manifest

  ▽cache.manifest

(3)Canvas基礎

 <canvas id=”**” width=”1024″ height=”764″></canvas>

 ★注意:サイズ属性のサイズ指定はstyle属性で指定すると、うまくいかない!!!

var can = document.getElementById(“drowarea”);
var ctx = can.getContext(“2d”);

(4)Canvas sample1 ~ 文字を表示 ~ 【HTML5_API/canvas_font.html】

★参考サイト
ctx.textBaseline:文字の設置するベースライン

http://www.html5.jp/canvas/ref/property/textBaseline.html

(5)Canvas sample2 ~ パスを表示 ~ 【HTML5_API/canvas_sikaku.html】

 ctx.beginPath();
 ctx.rect(10,10,40,40);
 ctx.stroke();

コメントは停止中です。

TrackBack :
http://rasiku.com/blog/archives/676/trackback

Copyright © Web & AOR Music Blog, All Rights Reserve.