- PDF Free Download

Size: px

Start display at page:

Download ""

ゆあうえや
7 years ago
Views:

24  <link rel="apple-touch-icon" href="iphone.png" />  <link rel="apple-touch-icon" sizes="72x72" href="ipad.png" />  <link rel="apple-touch-icon" sizes="114x114" href="iphone4.png" />

27 <!DOCTYPE html> <html lang="ja" manifest="vol1.appcache">

28 vol1.appache CACHE MANIFEST # Version: 0.26 # vol /05/09 by CGFM LLC. CACHE: vol1.html css/ipad-landscape.css css/ipad-portrait.css css/ipad.css js/ipad.js js/jquery min.js js/jquery.touchswipe js js/jquery.ui.js js/jquery.ui.transitionanimator.js img/00.jpg img/01.jpg img/02.jpg img/03.jpg img/04.jpg img/05.jpg img/06.jpg img/07.jpg img/08.jpg img/09.jpg

29 manifestファイルの仕組み ipad 4:20 PM Teehan+Lax Blog Google ipad オンライン manifest #ver1 オフライン一番最初にアクセスローカルと比較差分があれば再DL data www manifest #ver2 data html css html css image js image js

31  <meta name="apple-mobile-web-app-capable" content="yes">

32 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

33 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">

34 <!DOCTYPE html> <html lang="ja" manifest="vol1.appcache"> <head> <meta name="viewport" content="width=device-width, initialscale=1,user-scalable=no,maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="iphone4.png" />

53 全て1つのHTML HTML ipad 4:20 PM Google section Google ul #footer <li> <li> <li> <img> <img> <img> 4:20 PM section section section section section section Teehan+Lax Blog #slide #content ipad Teehan+Lax Blog

58 var contentswipeoptions= { " swipe: contentswipe, // callback " threshold:75, // ( ms ) " allowpagescroll: "vertical" // } $('#content').swipe( contentswipeoptions ); // function contentswipe (e, direction, distance) { " switch (direction) { " " case 'left':" PageChange('R'); break; // " " case 'right':" PageChange('L'); break; // " " case 'up': " PageChange('B'); break; // " " case 'down': " PageChange('T'); break; // " " default:" " break; " } } function PageChange(n) {} //

62 i Pad portlait ipad 4:20 PM landscape Teehan+Lax Blog Google ipad 4:20 PM Nasutoma Magazine Google (px)

64 $(window).bind("resize load",function(){ " if($(window).height()>$(window).width()){ " " // > (orientation:portrait) " " $('#content').show();// On " " $('#slide').hide(); // Off " } else { " " // (orientation:landscape) " " $('#content').hide(); // Off " " $('#slide').show(); // On " } })

73 if( localstorage.nowpage > 0 ) { activepage = localstorage.nowpage; // } pagechange(activepage);

78 AddType text/cache-manifest.appcache

79 >> GET (Not Found) >> Application Cache update failed, because localhost/hoge.hoge could not be fetched.

84 例) 付箋のシェアオンライン付箋情報を保持 ( ) 他のユーザーと付箋をシェア ipad 同期 4:20 PM Teehan+Lax Blog ipad Google 4:20 PM Teehan+Lax Blog Web Storage に付箋情報を保存オフライン Google (つД )