Javascript

【Javascript】iPhone 3G用のWebページを作る1

Javascript関連情報

更新日：2008年07月19日

iPhone 3G用のWebページを作る1

高橋登史朗

今回から特別に、今月(2008年7月11日)発売されたばかりの話題の携帯 iPhone 3G 用にWebページを作る際のポイントをみてみます。今回は、ユーザーエージェントの確認とビューポートです。

とりあえず動かしてみる

なにはともあれ、iPhone 3GでJavaScriptを動作させてみます。何でも良いのですが、わかりやすいところで、alertなどのダイアログを出してみましょう。

ここでは、各ダイアログの機能そのものは説明しませんが、普通のJavaScriptのwindowオブジェクト下に実装されているダイアログですので、必要でしたら Webや書籍でご確認ください。

iPhone 3Gで、とりあえず、基本的なJavaScriptのダイアログを表示させるとどうなるかというテストです。

サンプル1(iPhoneで見てください)
http://jsgt.org/a/080715/a.htm

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" 
      content="width=320; initial-scale=1.0; user-scalable=0;">
</head>
<body>

<div>
<button onclick="alert('alert()です')">alert()</button>
<button onclick="confirm('confirm()です。')">confirm()</button>
<button onclick="prompt('prompt()です')">prompt()</button>
</div>

</body>
</html>

各ボタンをクリックします。	alert() : 普通のalertダイアログです。
confirm() : これも普通のconfirmです。	prompt() : ダイアログ表示と同時に入力可能な状態になります

このサンプルでは、クリックイベントをbutton要素内に記述しましたが、Appleでは、iPhoneのJavaScriptソースについて、 jsファイルとcssファイルのHTMLからの分離を推奨(Designing Content)していますので、そのように分離したサンプルも下記に提示しておきます。

分離するメリットは、一般的な管理上の手間を減らせるといった事などの他に、iPhoneのようなデバイスの場合は、外部ファイル化されたファイルがキャッシュされることで再利用時に読み込むファイル量を軽量化できるという点もあげられると思います。

サンプル2(iPhoneで見てください)
http://jsgt.org/a/080715/a2.htm

HTML

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="viewport" 
      content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script src="./test.js" type="text/javascript"></script>

</head>
<body>

<div>
<button id="ale">alert()</button>
<button id="con">confirm()</button>
<button id="pro">prompt()</button>
</div>

</body>
</html>

test.js

window.addEventListener("load", function(event){

    var ale = document.getElementById("ale"),
        con = document.getElementById("con"),
        pro = document.getElementById("pro")
        
    ale.addEventListener("click", function(event){
      alert('alert()です');
    }, false);
        
    con.addEventListener("click", function(event){
      confirm('confirm()です');
    }, false);
        
    pro.addEventListener("click", function(event){
      prompt('prompt()です');
    }, false);
    
}, false);

まず、外部ファイルのtest.jsでは、window.addEventListener("load", function(event){...})によってページロード後にfunction内のスクリプトを実行開始する仕組みになっています。

その後、HTML内の各ボタン要素をdocument.getElementByIdで検索し、それぞれのボタンごとにbuttonOj.addEventListener("click", function(event){...})によってクリックイベントを設定しています。これも、クリック時にfunction内のスクリプトを実行開始する仕組みです。

ちなみに、上記では、window.addEventListenerを使って記述していますが、addEventListenerはSafariやFirefox、Operaでは動作しますが、 IEでは動作しませんので、必要なら jQueryやYUIなどのライブラリを使ってクロスブラウザに書くことも可能です。

さて、ところで、上記のHTMLソースには、新しいMETA要素がでてきました。meta name="viewport" です。

次ページでは、このビューポートについて調べます。

回答募集中のトピック（お題）

人気Javascriptランキング