クロスプラットフォーム対応モバイルサイトを構築するために必要なファイルをまとめた -Mobile Boilerplate

サイト構築 -制作

Post on:2011年3月31日

sponsorsr

HTML, CSS, JavaScriptをはじめ、sitemap.xml, .htaccessやアクセス解析など、モバイルサイトを構築するファイルをまとめた「Mobile Boilerplate」を紹介します。

「Mobile Boilerplate」はjQuery MobileやSencha Touchなどと相性がばっちりだそうです。

Mobile Boilerplate

[ad#ad-2]

Mobile Boilerplateの特徴

クロスプラットフォーム対応（Android, iOS, Blackberry, Symbian）
CSSはIE Mobile 7をターゲット
ホームスクリーンアイコン（Android, iOS, Symbian）
ビューポートの最適化（Opera Mobile, Android, iOS, IE, Nokia, Blackberry）
ビューポートのスケーリングの最適化（Opera Mobile, Android, iOS, Mobile IE, Blackberry）
iOSのスタート時のフルスクリーンモードに対応
IE Mobileでのフォントのレンダリングの最適化
マークアップとCSSのスケルトン
ローエンドデバイス用のスタイルシート
モバイルサイトマップ
各モバイル機器のMIME typeをサポート

Mobile Boilerplateの更なる特徴

スマートフォン向けのHTML5オフラインキャッシュ
URLバーを隠してスクリーンエリアを最大
クリックイベントのデフォルトの300msの遅れを待たないクリックイベント
テキストエリアの自動拡張
モバイルブックマークバブル
ブラウザデータベースラッパーAPI
.htaccessでのUA探知
デフォルトのCSSでモバイルを最適化
Windows Mobile用のMedia Queries
ローエンドモバイル機器用のGoogle Analytics

[ad#ad-2]

Mobile Boilerplateのファイル構成

Mobile Boilerplateは6つのファイル（style.css, helper.js, default.apache, index.html, sitemap.xml, .htaccess）をベースとして、構成されています。

Mobile Boilerplateのベースとなる6ファイル

Mobile Boilerplateの詳しい使い方は、下記にまとめられています。

ファイルは6つの他にも数多くあり、汎用的に利用できるように設計されています。下記は、index.htmlの中身です。

index.html

<!doctype html>
<!-- Conditional comment for mobile ie7 http://blogs.msdn.com/b/iemobile/ -->
<!-- Appcache Facts http://appcachefacts.info/ -->
<!--&#91;if IEMobile 7 &#93;>    <html class="no-js iem7" manifest="default.appcache?v=1"> <!&#91;endif&#93;-->
<!--&#91;if (gt IEMobile 7)|!(IEMobile)&#93;><!--> <html class="no-js" manifest="default.appcache?v=1"> <!--<!&#91;endif&#93;-->

<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
  
  <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320"/>
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  
  <!-- Home screen icon  Mathias Bynens http://goo.gl/6nVq0 -->
  <!-- For iPhone 4 with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
  <!-- For first-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
  <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
  <!-- For nokia devices: -->
  <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
  
  <!--iOS web app, deletable if not needed -->
  <!--<meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-startup-image" href="img/l/splash.png">-->
  
  <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
  <meta http-equiv="cleartype" content="on">
	
	<!-- more tags for your 'head' to consider https://gist.github.com/849231 -->
  
  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">  -->
  
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css?v=1">
 
  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-1.7.min.js"></script>
</head>

<body>

  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>
    
    <footer>

    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
  
  <!--&#91;if IEMobile 7 &#93;>
  <script src="js/libs/css3-mediaqueries-min.js"></script>
  <!&#91;endif&#93;-->

  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/script.js"></script>
  <!-- end concatenated and minified scripts-->

  <!-- Debugger - remove for production -->
  <!--<script src="https://getfirebug.com/firebug-lite.js"></script>-->
  
  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

</body>
</html>