「10+ useful code snippets to develop iPhone friendly websites」というエントリーよりiPhone/iPod touch用サイトを作成する際の10のTipsのご紹介。

サーバーサイドでの振り分け処理や、画面の向きの取得方法などなど、いつか使うかもしれないのでメモ的にエントリーです。

詳しくは以下

JavaScriptでリダイレクト

iPhone/iPod touchの場合に専用のページにリダイレクトさせます。サーバーサイドのスクリプトを使用できない場合に。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

PHPでリダイレクト

リダイレクトさせるのは上記と同じですが、こちらはPHPを使用しています。

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

viewportで画面サイズを指定する

head 要素にタグを入れるだけで、横幅を最適化する事ができます。
viewportについての説明は@ITに詳しく載っています。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

独自アイコンの指定

以下のコードをヘッドに入れる事で、ブックマークされた際にホーム画面にアイコンを表示させる事ができます。
サイズは 57x 57pxでpng形式で保存する必要があります。

<rel="apple-touch-icon" href="images/template/engage.png"/>

自動でフォントサイズが調整されるのを防ぐ

画面の向きを変えた際に勝手にフォントサイズが調整されます。結構小さくなりすぎる場合などがあるため、変更されないようCSSで指定します。

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

iPhoneの向きを取得

iPhoneの画面の向きを取得します。
このサンプルでは、画面の向きによってCSSを切り替えます。

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

iPhone/iPod touchにだけ適用するCSS

メディアタイプを指定する事でiPhone/iPod touchにだけCSSを適用させる事ができます。

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

画像をiPhone用に最適化する

iPhone/iPod touchの画面は最大で480pxまで表示する事が可能です。480pxより大きい画像の場合、それ以上大きくならないようにします。

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

デフォルトでツールバーを隠す

少しでも画面を大きく使えるよう、初期状態でツールバーを非表示にします。

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

特殊なリンクの指定方法

電話やSMSを起動させる事ができます。

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

hoverを適用させる

マウスオーバーという概念が無いので、JavaScriptで指の位置を取得します。

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

上記のコードを追加する事で、CSSのhover属性が使用できます。

a:hover, a.hover {
    /* whatever your hover effect is */
}

詳しくは以下

1.右クリックを無効にする方法

右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2.フォームの初期値を消す方法

検索フィールドなどに。

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});

function textFill(input){ //input focus text function
 	var originalvalue = input.val();
 	input.focus( function(){
  		if( $.trim(input.val()) == originalvalue ){ input.val(''); }
 	});
 	input.blur( function(){
  		if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
 	});
}

3.リンクを新しいウィンドウで開く

XHTMLでVALIDなページを作る場合「target=”_blank”」は使用できないためjQuery側で_blank属性を追加します。

$(document).ready(function() {

   //外部リンクは全て別ウインドウにする場合
   $('a[href^="http://"]').attr("target", "_blank");  

   //rel="external" 属性を追加した場合のみ別ウインドウにする場合
   $("a[rel='external']").click(function(){
      this.target = "_blank";
   });
});

//　使い方　以下のようなリンクを追加します。
<a href="https://blog.verygoodtown.com" rel="external">リンク</a>

4.ブラウザを調べる

特定のブラウザの場合にだけ処理を指定したい場合に。

$(document).ready(function() {
// Firefox 2以上
if ($.browser.mozilla && $.browser.version >= "2" ){
	alert("mozila");
}

// Safari
if( $.browser.safari ){
	alert("safari");
}

// Chrome
if( $.browser.chrome){
	alert("chrome");
}

// Camino
if( $.browser.camino){
	alert("camino");
}

// Opera
if( $.browser.opera){
	alert("opera");
}

// IE6以下
if ($.browser.msie && $.browser.version <= 6 ){
	alert("IE6以下");
}

// IE7以上
if ($.browser.msie && $.browser.version > 6){
	alert("IE7以上");
}
});

5.CSSの切り替え

使用しているCSSを変更します。

$(document).ready(function() {
	$("a.Styleswitcher").click(function() {
		//CSSのパスを書き換えます
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
	});
});


//使い方
//ヘッダーでデフォルトのCSSを読み込みます
<link rel="stylesheet" href="default.css" type="text/css">


//　以下のようなCSS切り替えのリンクを設置します。
<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>
<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>
<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>

6.フォントサイズを変更する

ユーザーがフォントサイズを変更できるようリンクを設定します。

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

// 使い方
// 以下のようなリンクを追加します。
<a href="#" class="resetFont">元に戻す</a>
<a href="#" class="increaseFont">+</a>
<a href="#" class="decreaseFont">-</a>

7.スムーズリンクを設置する

ページ内リンクをスムーズに移動させます。

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
});

// 使い方 
// スクロール先を指定します。 
<a id="top" name="top"></a> 
// リンクを設置します。 
<a href="#top">go to top</a> 

8.マウス座標を取得する

マウスカーソルの現在地を取得します。

$(document).ready(function() {
   $("html").mousemove(function(e){
     //X座標とY座標を#XYに書き出します。
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
});
// 使い方
<div id="XY"></div>

9.要素が空かチェックする

空の場合の処理を作成する事ができます。

$(document).ready(function() {  
  if (!$('#id').html()) {  
    alert('empty');
  }
});  

10.置換

要素の中身を書き換えます

$(document).ready(function() { 
   $('#my-id').replaceWith('
置換後の文字列
');
}); 

11.タイマーのコールバック関数

時間がたってから何かを動作させたい場合に。

$(document).ready(function() { 
   window.setTimeout(function() { 
      alert('1秒経過');
    }, 1000);
 }); 

12.単語を削除

特定の単語を削除します。

$(document).ready(function() { 
   var el = $('#my-id'); 
   el.html(el.html().replace(/削除したい単語/ig, ""));
 }); 

13.要素の存在確認

lengthプロパティで存在確認が取れます。

$(document).ready(function() { 
    if ($('#my-id').length) { 
      alert('存在します。');
    }
 }); 

14.DIVをクリック可能にする

クリック要素を大きくしたい場合に。

$(document).ready(function() { 
   $("div").click(function(){ 
      //aタグから遷移先を自動取得します。 
      window.location=$(this).find("a").attr("href");
       return false;
    });
}); 

15.画面サイズに合わせてCSSを切り替え

画面の大きさに合わせて適用するスタイルを切り替えたい場合に。

$(document).ready(function() {
   function checkWindowSize() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
   }
$(window).resize(checkWindowSize);
});

16.クローンオブジェクト

オブジェクトのクローンを返します。

$(document).ready(function() { 
   var cloned = $('#id').clone();
}); 

17.画面の中心

画面の中心に要素を配置します。

$(document).ready(function() {
  jQuery.fn.center = function () {
	  this.css("position","absolute");
	  this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	  this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	  return this;
  }
  $("#my-id").center();
});

18.独自のセレクタを使用する

独自のセレクタ拡張で柔軟に対応できる場合があります。
サンプルでは1000px以上のboxクラスはクリックするとアラートが出るようになります。

$(document).ready(function() { 
   $.extend($.expr[':'], { 
      moreThen1000px: function(a) {
         return $(a).width() > 1000;
       }
    });

   $('.box:moreThen1000px').click(function() { 

      alert('The element that you have clicked is over 1000 pixels wide');
    });
});

//以下の要素をhtmlに追加してクリックしてみてください。 
<div style="background-color: #ff0000; width: 1200px" class="box">1200px</div>

19.要素の数を数える

$(document).ready(function() { 
   $("p").size();
}); 

20.箇条書きの行頭文字を独自文字に

行頭の文字を画像や独自文字へ変更する事ができます。サンプルは「‒ 」を追加しています。

$(document).ready(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("‒ ");
});

//使い方 
//cssでリストスタイルを無効にするだけです。 
<style>  
ul.Replaced { list-style : none; } 
</style> 

21.GoogleでホスティングされているjQueryを使う

ローカルファイルやサーバー内に設置しなくてもjQueryが使えるようになります。設置方法は2通りあります。

 //Example 1 
<script src="http://www.google.com/jsapi"></script><script type="text/javascript">
google.load("jquery", "1.4");
google.setOnLoadCallback(function() {
    alert('読み込み完了');
});
</script>
// Example 2 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

22.アニメーションを無効にする

jQueryのアニメーションを全て無効にします。

$(document).ready(function() { 
   jQuery.fx.off = true;
}); 

23.他のライブラリとの共存

他のライブラリと同時に使うには別の変数にjQueryを割り当てる事で動作させる事ができます。

$(document).ready(function() { 
   var $jq = jQuery.noConflict();
   $jq('#id').show();
}); 

参考になれば幸いです。