アプリ映像9 (jQuery Mobile3 & HTML5 API)
2013/3/27 19:30 | Category アプリ開発実践フェーズ | Comment (0)
■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の基本
処理の流れ：
１回目HTMLをリクエスト：
キャッシュを保存
２回目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();