iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境（エディターとWebサーバー）についても紹介します。

用意するもの1：エディター

　HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。

　もちろん、Dreamweaverなどの高機能な制作ツールでも構いません。

用意するもの2：Webサーバー

　PCサイトの場合、制作途中のHTMLファイルをWebブラウザーにドラッグ＆ドロップすれば簡単にプレビューできます。しかし、スマートフォンの場合、PCで作成したHTMLファイルを端末にコピーして開くのは手間がかかるため、Webサーバーを介して確認するほうが簡単です。一番手軽なのは、レンタルサーバーなどを利用して実際にファイルをインターネット上へ公開してしまうこと。次のようなレンタルサーバーを利用すると安価かつ手軽にプレビュー環境を用意できます。

　ただし、インターネット上に公開すると検索エンジンにインデックスされる恐れがあるため、外部からアクセスされて困る場合にはBASIC認証をかけておくとよいでしょう。BASIC認証の方法については、各レンタルサーバーのマニュアルやヘルプなどを参照してください。

■WiFi環境下にサーバーを立てる

　セキュリティ上の制約などでどうしても外部のサーバーに公開ファイルをアップロードできない場合には、同じWiFiネットワーク環境下にWebサーバーを立てることで外部からは閲覧できない環境を作れます。Webサーバーとスマートフォンを同じWiFiのアクセスポイントに接続して、スマートフォンから次のようなURLを開きます（実際のアドレスは管理者に確認しましょう）。

http://192.168.1.xxx/

■開発マシンをWebサーバーにする

　ひとまず制作用に利用しているマシンをWebサーバーにする方法もあります。Mac OS Xには標準でWebサーバーの機能があり、「システム環境設定」から「共有」の「Web共有」にチェックを入れると有効化できます。

システム環境設定の「Web共有」にチェックを入れる

　作成したHTMLなどのファイルはホームフォルダ下の「サイト」フォルダの中に入れ、共有の設定画面に表示されているIPアドレス（http://192.168.1.13など）をスマートフォンに入力するとファイルが表示されます。

　一方、Windowsの場合は、次のようなフリーソフトを利用すると簡易的なWebサーバーを構築できます。

　ダウンロードしたファイルをダブルクリックでセットアップしたら、次の手順でWebサーバーを起動できます。

　まず、［スタート］→［すべてのプログラム］→［XAMPP for Windows］→［XAMPP ControlPanel］を起動し、「Apache」の「Start」ボタンをクリックします。

StartボタンをクリックしてWebサーバーを起動する

　自分のマシンのIPアドレスを調べるため、スタートボタンをクリックして、[すべてのプログラム]→[アクセサリ]→[コマンドプロンプト]を起動します。

IPアドレスを調べるためコマンドプロンプトを起動する

　キーボードで「ipconfig」と打ち込んで、Enterキーを押します。「IPv4アドレス」と表示されている箇所がIPアドレスです（Windowsのバージョンやネットワークの構成によって多少異なります）。

ipconfigコマンドを実行するとIPアドレスを調べられる

　HTMLなどのファイルはXAMPPをセットアップしたフォルダの下の「htdocs」フォルダに入れます。標準の場合は「C:¥xampp¥htdocs」です。あとは、IPアドレスをスマートフォンに打ち込めばファイルを確認できます。

　以上、紹介したようなエディターとサーバー環境を準備すれば、とりあえずスマートフォン向けサイトの制作を始められます。あとは、必要に応じてPhotoshopなどの画像処理ソフトや、HTML／CSSリファレンスなど、Webサイト制作に必要なツール類を揃えておくとよいでしょう。

基本のHTMLを作成する

　最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。

　今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。

　まずはここまでの状態でWebサーバーにアップロードしてみましょう。iPhone/Androidで確認するとそれぞれ以下のように表示されます。

サンプルコードをiPhoneで表示したところ		同じくAndroidで表示したところ

　ここで、少し気になるところがあります。

Viewportの変更

　一見して分かるのは、文字が非常に小さく、右側に余白が目立つことです。このままだと拡大しないと本文を読むのは難しいでしょう。

　原因は「Viewport（ビューポート）」にあります。iPhoneやAndroidはPCサイトをそのまま表示できますが、画面が小さいため、PC向けのサイトを実際の縮尺で表示すると一部しか見えません。

PCサイトをiPhone/Androidで100%表示するとページの一部しか表示されない

　そこで、スマートフォンは自動的にページを縮小して表示する仕組みになっていて、この時に利用されるのが「Viewport」という値なのです。たとえばiPhoneの場合、Viewportが「980×1470ピクセル」に設定されています。つまり、横幅980ピクセルのディスプレイを、表示能力はそのままに小さくしたと考えるとよいでしょう。

Viewportの設定によって幅980ピクセルのディスプレイと同じように表示される

　PC向けのサイトを見る場合には便利ですが、このままではスマートフォン向けに作成したサイトも小さく表示されてしまいます。そこで、次のようにmeta要素でViewportを変更できます。meta要素はhead要素内に記述します。

　これで、以下のように適切な大きさで表示できます。

Viewportの値を設定すると意図したとおり適切に表示される

　ここで紹介したViewportの書式は次の通りです。

　各項目の意味は、次の通りです。

・横幅

画面の横幅をピクセル単位で指定します。ただし、スマートフォンの場合は機種によって画面の横幅がまちまちで、本体の向き（縦方向・横方向）によっても違いがあるので、通常は「device-width」という特殊な値を設定するとよいでしょう。device-widthを指定すると、端末の横幅で自動的に調整されます。

・初期の倍率

表示した時の画面の倍率を指定します。たとえば「1」を指定すると1倍、「2」を指定すると2倍になります。

・拡大可能な最大の倍率

スマートフォンは2本指でピンチ（iPhone）したり、拡大ボタンをタップ（Android）したりすることで画面を拡大できます。この時の最大の倍率を指定します。「1」を指定すると拡大できなくなります。

画面を横にしたときの処理

　先ほど作成したページを表示した状態でスマートフォン本体を回転すると、画面が自動的に拡大されて表示されます（iPhone 4で回転ロックがかかっている場合は外してください）。

本体を回転すると画面が拡大して表示される

　これはこれで見やすいかもしれませんが、多くの場合は横にしたら文字の大きさはそのままで、1行の文字数が増えることを期待するはずです。このような場合には、Viewportの「maximum-scale」を「1」に設定します。

　これによって、本体を横向きにしても文字の大きさを変えずに1行の文字数を増やせます。サイトの性質にあわせて設定するとよいでしょう。

プレビュー環境を整える

　ここまでの作業で分かるように、スマートフォン向けのWebサイトを作る際、毎回実際の端末で確認するのは非常に手間がかかります。そこで、本格的なサイト制作に入る前に、PC上で確認できるプレビュー環境を整えておくと便利です。

■Safari、Google Chromeで確認する

　今後詳しく解説しますが、iPhone/Androidに搭載されているブラウザーは、それぞれSafariとGoogle Chromeのエンジンを利用しています。そのため、単純なレイアウトの確認程度であれば、SafariやChromeで済む場合もあります。

　ブラウザーのウィンドウサイズをスマートフォンに近づければ、画面上に表示された時のイメージもある程度は確認できます。ただし、Mac版のSafariやChromeは横幅を350px程度より小さくできないため、実際のiPhoneと同じ横幅（320px、縦向きの場合）での表示ができません。

Mac版のSafariにはウィンドウサイズの制限がありiPhoneと同じサイズにはできない

　また、iPhoneの標準フォントは「ヒラギノ角ゴ」ですが、MacのSafariの標準フォントは「ヒラギノ明朝」に設定されているため、フォントの設定を変えないと同じ見た目になりません。Androidの場合はそもそもPCと異なる専用フォントが採用されているので、PC上で表示を再現するのはさらに困難です。

　このため、SafariやChromeを利用する際は、簡単なレイアウトの確認や、JavaScriptの動作確認などにとどめておくのがよいでしょう。

シミュレーターをインストールする

　それでは、もう少し実際の端末に近いイメージで表示を確認したい場合はどうしたらよいでしょうか。幸い、iPhone/Androidのアプリ開発者向けに配布されているSDK（Software Development Kit）に、「シミュレーター」が用意されています。シミュレーターを利用すると、より実際の端末に近い状態でWebサイトの表示を確認できます。SDKは本来、アプリ開発者を対象としたソフトなのでインストールには若干の手間がかかりますが、手順を詳しく紹介しますのでぜひ導入しましょう。

■iPhoneシミュレーター（Macのみ）

　iPhoneの場合、Mac用のシミュレーターのみが配布されています。

　まず、次のページにアクセスして、Apple IDでログインします。IDを取得していない場合は、無料で取得できます。

　次に、「iPhone Dev Center」から「iOS 4」の「Downloads」をクリックして、「Xcode 3.2.3 and iPhone SDK 4」をクリックします（バージョンが新しい場合は、最新版を入手します）。

iPhone SDKをダウンロードする

　SDKにはシミュレーターのほか、開発用のソフトが同梱されているためファイルサイズが非常に大きく、ダウンロードには多少時間がかかります。ダウンロードしたファイルはダブルクリックし、指示に従ってセットアップしましょう。

　セットアップが完了すると、シミュレーターを利用できます。シミュレーターは、Finderのハードディスクのアイコン（標準の名前は「Macintosh HD」）から「Developer」フォルダをダブルクリックし、次のようなパスを辿った先にあります。

Platforms→iphoneSimulator.platform→Developer→Applications→iPhone Simulator

　iPhone Simulatorをダブルクリックすると、シミュレーターが起動します。今後の作業のために分かりやすい場所にショートカットを作っておくとよいでしょう。

iPhoneのシミュレーターは非常に深い階層にあるのでショートカットを作っておくと便利

　シミュレーターではiPhoneのほとんどの操作を再現できます。タップやドラッグなどの操作はマウスでできますし、2本指での操作はaltキーを押すことで操作できます。また、Macがインターネットに接続されていれば、シミュレーター上でもそのままインターネットに接続できます。ホーム画面からSafariを起動して、Webサイトを閲覧してみましょう。

シミュレーター上で実際のiPhoneとほぼ同じ操作ができる

■Androidシミュレーター

　AndroidシミュレーターのインストールはiPhoneよりもやや複雑です。1つ1つ、手順を追って作業しましょう。

　はじめに、以下のサイトからWindows用、またはMac用のAndroid SDKをダウンロードします。

http://developer.android.com/sdk/index.html

　ダウンロードした圧縮ファイルを展開して適当なフォルダにコピーします。Android SDKの動作には、Java SDKが必要なので併せてダウンロードしましょう（Mac OS Xには標準でインストールされています）。

http://java.sun.com/javase/downloads/index.jsp

　さらに「Eclipse」という開発ツールも必要になるので、以下からダウンロードします。

http://www.eclipse.org/downloads/

　ダウンロードページにはさまざまな種類がありますが、「Eclipse Classic」を利用するとよいでしょう。インストーラーの指示に従ってセットアップし、Eclipseを起動しておきます。

　続いて、EclipseのAndroid用プラグインをインストールします。Eclipseの[Help]→[Install New Software...]メニューを選択し,「Install」ダイアログの[Add...]ボタンをクリックします。

Installダイアログ

　「Add Repository」ダイアログが表示されたら、以下のように入力して[OK]ボタンをクリックします。

Android用のリポジトリを設定する

　「Install」ダイアログが以下の画面のように変わるので、「Developer Tools」にチェックを入れて[Next]ボタンをクリックします。

Developer Toolsにチェックを入れる

　指示に従ってダイアログを進み、「Review Licenses」で「I accept the terms of the license agreements（規約に同意します）」のチェックボックスにチェックを入れたら、[Finish]ボタンをクリックします。

規約に同意したらFinishをクリックする

　しばらく待つとAndroid開発用のプラグインがインストールされます。途中、「Security Warning」などが発生する場合がありますが、[OK]ボタンをクリックして構いません。インストールが完了してEclipseを再起動すると、メニューバーにAndroid用のボタンが追加されています。

Android開発用プラグインのインストールが終わってEclipseを再起動するとアイコンが追加された

　プラグインのインストールが終わったら、今度はEclipseの環境設定を開きます（Macなら[Eclipse]→[環境設定]、Windowsなら [Window]→[Preferences]）。「Android」グループの「SDK Location」という設定項目に、先ほどコピーしておいた「Android SDK」のフォルダを指定し、[OK]ボタンで確定します。

ダウンロードしてコピーしたSDKのパスを設定する

　ツールバーに追加された[Opens the Android SDK and AVD Manager]ボタンをクリックすると以下のようなウィンドウが表示されます。ここで、Androidの仮想環境を作成します。

Androidの仮想環境を作成する

　まず、画面左側の「Available Packages」をクリックして、右側のリスト三角アイコンをクリックすると、仮想環境パッケージのリストが表示されます。

作成できる仮想環境の一覧が表示される

　リストの中の「SDK Platform Android 2.2, API 8, revision 2」のチェックをつけ（バージョンが変わっていた場合は最新のものを選びましょう）、[Install Selected]ボタンをクリックします。確認のウィンドウが表示され、[Install]ボタンをクリックすると仮想環境のインストールが始まります。インストールが終わったら、[Close]ボタンでウィンドウを閉じてください。

　続いて、同じウィンドウの左側のリストから「Virtual Devices」を選択し、右端にある[New]ボタンをクリックします。

Virtual DevicesからNewをクリックする

　「Name」に適当な名前をつけます。「Target」から先ほどインストールした「Android 2.2 - API Level 8」を選び、[Create AVD]ボタンをクリックします。

適当な名前を入力して、Androidの仮想マシンを作成する

　ウィンドウが戻り、作成した「AVD（Android Virtual Device）」が追加されています。これを選んで[Start...]ボタンをクリックします。

AVD（Android Virtual Device）が追加されているので選択する

　次に出てくる「Launch Options」のダイアログは特に設定を変えずに、[Launch]ボタンを押します。

Launch Optionsは特に設定せずにボタンをクリックする

　これでしばらく待つとAndroidシミュレーターが起動します。ブラウザーを起動して、Webサイトを閲覧しましょう。

Androidのシミュレーターを起動したところ。実際の端末とほぼ同じように操作できる

◆

　Androidのほうは手順が多くやや骨が折れますが、一度環境を作ってしまえば以降の作業はぐっと楽になります。次回は、本格的なスマートフォンサイト制作の前に知っておきたいサイト設計について解説します。

Eclipseとは

　Eclipse（エクリプス）は、Androidのための専用ソフトではなく、本来さまざまなソフトウェア開発に利用する「統合開発環境」と呼ばれるツールです。プラグインをインストールすることで、Android向けアプリの開発にも利用でき、アプリ開発のテスト環境としてシミュレーターが提供されています。

　そのため、単にWebサイトを制作するためだけにしてはかなりインストールが大変ですし、重装備になってしまいますが、がんばってインストールしましょう。

Eclipseの日本語化

　Eclipseのメニュー画面などはすべて英語です。英語に慣れていない方には、それだけでかなり抵抗感があることでしょう。幸い、 Eclipseを日本語化するオープンソースプロジェクトが存在しており、簡単な手続きでメニューなどを日本語にできます。次のサイトなどを参考に、日本語化するとよいでしょう。

http://www.eclipsewiki.net/eclipse/?%C6%FC%CB%DC%B8%EC%B2%BD