このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第2回

作って学ぶスマートフォン対応サイトの基本

2010年08月04日 10時00分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 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共有」にチェックを入れると有効化できます。

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

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

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

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

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

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

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

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

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

zu2-4
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

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング