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

Post on:2011年3月31日

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のファイル構成

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>

sponsors

top of page

©2024 coliss