実践！iPhone＆Androidサイト制作ガイド ― 第2回
作って学ぶスマートフォン対応サイトの基本
2010年08月04日 10時00分更新
|
|---|
iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境（エディターとWebサーバー）についても紹介します。
用意するもの1：エディター
HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。
- ・Em Editor / Windows / 4000円（税込）
- http://jp.emeditor.com/
- ・秀丸エディタ / Windows / 4200円（税込）
- http://hide.maruo.co.jp/
- ・TeraPad / Windows / 無料
- http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
- ・JEdit X / Mac / 2940円（税込）
- http://www.artman21.com/jp/jedit_x/
- ・mi / Mac / 無料
- http://mimikaki.net/
もちろん、Dreamweaverなどの高機能な制作ツールでも構いません。
用意するもの2：Webサーバー
PCサイトの場合、制作途中のHTMLファイルをWebブラウザーにドラッグ＆ドロップすれば簡単にプレビューできます。しかし、スマートフォンの場合、PCで作成したHTMLファイルを端末にコピーして開くのは手間がかかるため、Webサーバーを介して確認するほうが簡単です。一番手軽なのは、レンタルサーバーなどを利用して実際にファイルをインターネット上へ公開してしまうこと。次のようなレンタルサーバーを利用すると安価かつ手軽にプレビュー環境を用意できます。
- ・ロリポップ
- http://lolipop.jp/
- ・さくらのレンタルサーバー
- http://www.sakura.ne.jp/
ただし、インターネット上に公開すると検索エンジンにインデックスされる恐れがあるため、外部からアクセスされて困る場合には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サイト制作に必要なツール類を揃えておくとよいでしょう。
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。
iPhone+Android
スマートフォンサイト制作入門
本体 2,380円＋税、B5変形判216ページ（オール4色刷）
ISBN：978-4-04-870218-8
この連載の記事
- 第10回 jQueryでiPhone風スライドパネルを作ろう
- 第9回 CSS＋jQueryでクロスデバイスサイトを作ろう
- 第8回 JavaScriptで振り分けてスマホサイト完成！
- 第7回 HTML5/CSS3で作るスマートフォンサイトの基本
- 第6回 実例でわかる！スマートフォンサイトの画面設計
- 第5回 スマートフォンサイトをデザインする7つのポイント
- 第4回 スマートフォン対応サイトを設計するときのノウハウ
- 第3回 サイト制作の前に知りたいiPhone/Androidの仕様
- 第1回 スマートフォン対応サイトの作り方、教えます
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
