iPhone向けサイト制作ノウハウ＆拡張機能「iPhone site extension for Dreamweaver CS4/5」
作成日
29 June 2010
ページ ツール |
必要条件
ユーザーレベル
すべて
必要な製品
- Dreamweaver CS5 (Download trial)
iPhone（iPhone 3G/3GS）／iPod touchは、PC向けサイトがそのまま表示できるところが大きな魅力の一つです。しかし、小さな画面や、指で操作するとインターフェイスなどのようにデバイス特有な面も多く、PC向けサイトのままでは必ずしも見やすいとはいえません。そこで本記事では、Dreamweaverを使ってiPhone向けサイトを作る時のテクニックや注意点をご紹介します。
制作したサイトの表示結果を確認する方法
ライブビューでプレビューする
Dreamweaver CS5（および CS4）には「ライブビュー」機能が搭載されており、ページのレンダリングにはWebKitエンジンを利用しています。iPhoneのSafari（Mobile Safari）も同じWebKitエンジンを利用しているので、Dreamweaver上でもMobile Safariとかなり近い表示結果で確認することができます。この時、できるだけiPhoneと同じ画面サイズでプレビューをした方がより正確な表示結果となるでしょう。そこで、画面サイズを次の手順で変更します。
- ステータスバーの「ウィンドウサイズポップアップメニュー」をクリックします。
- 「サイズの編集」をクリックして、下図のように「320」「480」とそれぞれ入力します。詳細には「iPhone(縦)」など記入しておくとよいでしょう。
- あらためて「ウィンドウサイズポップアップメニュー」をクリックすると、ステップ2で作成した選択肢が表示されているので、これをクリックします。これで、ウィンドウの大きさがiPhoneに近い画面の大きさでプレビューすることができます。
iPhoneシミュレータでプレビューする（Mac OSのみ）
フォントや画面の余白など、より正確な表示を確認したい場合には、iPhoneシミュレータを利用するといいでしょう。Appleが開発者用に無償で配布しており、かなり正確にiPhoneの動作をシミュレーションすることができます（なお、iPhoneシミュレータは、Mac OS Xにのみ提供されています）。
まずは、次のサイトから開発キット（SDK）をダウンロードします。
「iPhone SDK X.X」というリンクをクリックするとログイン画面が表示されるので、Apple Developer Networkに入会してログインします。ダウンロードしたファイルは、そのままダブルクリックして指示に従えばインストールできます。
シミュレータは以下の場所から起動することができます。アプリケーションフォルダ内ではなく、さらにホームフォルダよりも上の階層にあるので気をつけましょう。
/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app
起動すると下図の画面が表示されます。
あとは、iPhoneと同様にSafariを起動してURLを打ち込めば、Webサイトを閲覧することができます。
このiPhoneシミュレータをDreamweaverのプレビューブラウザに指定することができます。Dreamweaverで［ファイル］［ブラウザでプレビュー］［ブラウザーリストの編集...］をクリックします。
画面上部の［+］ボタンをクリックしたら、先程のパス情報を打ち込んで適当な名前をつけて保存します。これで、ブラウザリストに表示されるようになるので、これをクリックするとiPhoneシミュレータが起動します。
ただし、Safariを起動してURLを受け渡すところまではできないため、そこは手作業で行う必要がありますので注意しましょう。
実機で確認する
完成したサイトや、やはり実際の端末で確認したいところです。実際に指で操作してみて、微調整をする必要もでてくるでしょう。iPhoneでサイトを確認するためには、Webサーバにファイルをアップロードする必要があります。Dreamweaverのサイト設定（CS4でいう「サイト定義」）などを活用して、手早くFTPにアップロードできるようにしましょう。サイト設定について詳しくは、次のサイトなどを参照してください。
ただ、微調整する度にアップロード（PUT）を行うのは手間がかかってしまいます。そこで、次の設定をしておくと便利です（CS4では「サイト定義」で行います）。
- サイト設定の「サーバー」の設定画面で、［詳細設定］タブをクリックします。
- 「保存時にファイルをサーバーへ自動的にアップロード」にチェックを入れます。
- ［保存］ボタンをクリックし、サイト設定を続けていきます。
この設定をしておけば、Dreamweaver上でファイルを編集して保存すると、自動的にサーバにもアップロードされます。PUTの操作を行う必要がないため、非常に素早く変更を反映することができます。
iPhoneサイト制作時の注意点
iPhoneサイトには、PCサイトにはない特性があり、気をつけなければなりません。主な特性を押さえておきましょう。
Viewport
iPhoneでPC用のWebサイトを表示すると、下図のように縮小して表示されます。
たとえ、横幅を320ピクセルなどと小さく指定しても、同じように縮小して表示されてしまいます。
この原因は「Viewport」にあります。iPhoneには画面解像度のほかに、そのサイトをどのような解像度で表示するかを定義している値があるのです。そして、この標準の設定が980ピクセルに設定されています。つまり、iPhoneでWebサイトを表示すると、なんでも1/3の大きさに縮小してしまうということになります。PC向けサイトを表示することを前提とした作りとなっているため、このような設定になっているわけです。
そこで、iPhone専用のサイトでは、これを適切に設定し直す必要があります。次のようなmeta要素を、head要素内に書き足します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
ここで、「width=device-width」というのは画面幅に合わせるという特別な設定です。iPhoneを回転させて横幅が変わると、それに追従してViewportが変化するようになります。また、その後に続く「initial-scale」と「maximum-scale」は、ユーザーが画面を拡大・縮小できるかどうかを設定します。この設定では、「標準（initial-scale）が1倍」「拡大（maximum-scale）はできない（＝1倍）」という設定となり、2本指でピンチをしても拡大することができなくなります。この値をそのまま使っても問題ありませんが、サイトの性格によっては変更してもよいでしょう。
font-size-adjust
1行が長いページでは、画面の端で文章が折り返されます。そして、横画面に切り替えると、文字が大きくなるだけで1行の文字数は変わりません。
画面方向の切り替え時に「文字の大きさはそのままで1行の長さを変えたい」という場合には、WebKit独自拡張プロパティ「-webkit-text- size-adjust」（CSS3のプロパティをWebKitが独自に実装したもの）を使って変えることができます。body要素などに指定するとよいでしょう。
body {-webkit-text-size-adjust: none;}
ロールオーバー
iPhoneは指で操作をするため、ロールオーバーという概念がなく、「a:hover」擬似要素にはスタイルを定義することができません。その代わり、リンク要素をタップし続けた時に、色を変えるなどの演出を加えることができます。
a {-webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);}
この設定では、透明度を設定できる「rgba」で、紺色の反転色を定義しています。
iPhoneらしいデザイン
iPhone向けサイトをデザインする時は、どのようなデザインでももちろん構わないのですが、やはり「iPhoneらしい」サイトにしたいことが多いでしょう。それでは、その「iPhoneらしさ」とはなんでしょうか。それは、iPhoneの各アプリケーションが持つ統一感のあるデザインです。そのデザインは、第三者が作ったソフトにも、受け継がれており、iPhone全体でその世界観を表現できています。
この秘密が、Appleが公開している「デザインガイドライン」です。
- iPhone Human Interface Guidelines
- iPhone Human Interface Guidelines for Web Applications
- Safari Web Content Guide
いずれも英語の文書ではありますが、見出しや図を見るだけでもかなり参考になりますので、一度は目を通しておくとよいでしょう。
CSS3を使ったビジュアル表現
CSS3は、現在策定中の規格ながら、グラデーションや角丸など、それまで画像を駆使しなければ表現できなかったようなビジュアル表現が、CSSだけで可能になりました。iPhoneは、3G回線下で使われることも多く、画像ファイルなどはダウンロードに時間がかかることもあり、画像使用は極力避けたいところです。そこで、CSS3が出てくるわけです。
さらに、iPhone専用サイトとするなら、対象ブラウザをMobile Safariのみに絞ることができるため、CSS3やWebKit独自拡張プロパティを、互換性を考慮することなく使うことができます。ぜひ、CSS3を積極的に活用していきましょう。ここでは、いくつかのサンプルを紹介します。
タイトルバーを作る
iPhoneで標準的に利用されているタイトルバーは、下図のように背景がグラデーションで、文字にはエンボスの演出がされています。
そこで、まずは次のようなHTMLを準備します。
<h1>iPhoneサイト制作 on Dreamweaver CS5</h1>
そして、次のようなCSSを準備します。
h1 {
height: 42px;
line-height: 42px;
border-top: 1px solid #cdd5df;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0bccd), to(#6d84a2));
border-bottom: 1px solid #2d3642;
background-color: #b0bccd;
font-family: HiraKakuProN-W6;
font-size: 18px;
color: #fff;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
これで下図のように表示することができます。
ここでのポイントは、「background-image」プロパティの「-webkit-gradient」という記述です。これはグラデーション効果を与えるプロパティで、次のようにパラメータを付加します。ここでは、上から下に向かってグラデーションをする演出を加えました。
-webkit-gradient(【linearまたはradial】, 【開始位置】, 【終了位置】, 【色1】, 【色2】,...)
続いて、テキストにエンボス効果を与えるのが、「text-shadow」プロパティです。次のように指定します。
text-shadow: 【色】 【X位置】 【Y位置】 【ぼかし】
本来は、テキストに影をつける効果ですがY位置を「-1px」にして、白っぽい色を影にすることで、逆にハイライトの効果を与えています。
最後に「text-overflow: elipsis」という指定ですが、これは、1行に文字が入りきらなかった場合に、自動的に末尾を「…」に変えてくれます。iPhoneでは、縦と横の場合で画面幅が変わるため、指定しておくとよいでしょう。
角丸の罫線を作る
続いて、iPhoneの設定画面などでよく使われている、下図のような角丸の罫線を作ってみましょう。
まずは、次のようなHTMLを準備します。
<dl>
<dt>開催日</dt>
<dd>2010年 5月 21日（金）</dd>
</dl>
ここに、次のCSSを割り当てます。
dl {
margin: 9px 9px 16px;
border: solid 1px #a9abae;
-webkit-border-radius: 8px;
background-color: #fff;
}
これで下図のような表示になります。
ここでのポイントは「-webkit-border-radius」で、これは角丸を作るプロパティです。次のように指定します。
-webkit-border-radius: 【角のアール】
こうして、iPhone特有の見た目は、CSS3である程度再現することができます。
iPhone向けサイト制作に役立つ拡張機能「iPhone site extension for Dreamweaver CS4/5」
今回、筆者はこれらのiPhoneサイト向けのテクニックをDreamweaverから簡単に活用できるように、拡張機能「iPhone site extension for Dreamweaver CS4/5（以下、Extension）」を作成しました。無料でご利用できますので、CS5またはCS4のユーザーの方は、ぜひお試しください。
Extensionの主な機能
新規ドキュメントの追加
Extensionをインストールすると、新規ドキュメントとして、「iPhone用ページ」「iPhone用Webアプリ」および、「iPad用ページ」が追加されます。これらのファイルには、前述の「Viewport」などの必要なタグや、便利ないくつかのスタイルシートをあらかじめ準備してあります。
挿入ツールバーの追加
挿入ツールバーに「iPhone」というグループが追加されます。ここには、iPhoneらしい見出しやリスト、ボタンなどを挿入するためのボタンや、Googleマップリンク、iTunesリンクなどの作成を手助けするボタンが入っています。
Extensionのインストール
Extensionをインストールするのは簡単です。まずは、オフィシャルサイトから、ファイルをダウンロードします。
このファイルをダブルクリックするか、「Extension Manager」でファイルを開くと、インストールすることができます。
これで、Dreamweaverを再起動すると利用することができます。
サンプルサイトを作る
- 新しいファイルの作成
メニューから［ファイル］→［新規作成］で新規作成ダイアログを表示して、「iPhone用Webアプリ」を選びます。
このテンプレートは、あらかじめ画面の余白をリセットし、背景をグレーに設定しているだけで、「iPhone用ページ」と大きな違いはありません。
- リセットCSSの設定し直し
テンプレートにあらかじめ設定されているリセットCSSは、非常に簡易的なものです。実際の作業時は、適切なリセットCSSに切り替えた方がよいでしょう。ここでは、Yahoo! Reset CSSを利用します。次のサイトにアクセスしましょう。
YUI 2: Reset CSS
ここでファイルをダウンロードするか、リンクURLを取得します。今、作成したファイルの先頭に記述されている次の記述を削除して、代わりにリセットCSSを読み込みます。
* {
margin: 0;
padding: 0;
}
- コンテンツの作成
あらかじめ設定されている内容は全て削除し、あらためて挿入ツールバーから「見出し1」を挿入します。内容は次のように設定しましょう。
<h1 class="iPhoneHead">見出し1</h1>
続けて、定義リストを挿入して下図のように内容を作っていきます。回り込みのスタイルが定義されているため、デザインビューでは作業がしにくくなっています。コードビューで作業する方がよいでしょう。
- Googleマップのリンクを設置する
続いて、住所をクリックすると地図が表示されるようにしてみましょう。まずは、表示する緯度・経度の情報が必要なので、適当な地図サイトで取得しましょう。Googleマップの場合は、住所で検索をしたら、地図の右上にある「リンク」をクリックしてURLを取得します。長いURLの中から、「sll=」から始まる箇所を見つけましょう。
http://maps.google.co.jp/maps?...sll=35.65861,139.745447&ss...
この「35.65861,139.745447」という記述が緯度・経度です。これをコピーしておきましょう。
※この記述が見つからない場合は、地図の適当な場所でドラッグして、地図を少しずらすとよいでしょう。 次に、Dreamweaverの挿入ツールバーから、［地図リンク］を選んで、次のダイアログを表示します。コピーした緯度と経度を入力し、拡大率や地図の種類などを選んで、リンクを設定しましょう。iPhoneでこのリンクをタップすると、Googleマップが自動的に起動します。
iPhone向けサイトを作る時に気をつける点、まとめ
リンクは大きめに
iPhoneは、指で操作をするため細かなリンク要素では、タップすることができません。また、先の通りロールオーバーの効果がないため、クリックできることをはっきりと示す、Extensionのボタンなどをうまく活用しましょう。
文字も大きめに
拡大・縮小が自由自在なiPhoneとはいえ、2本指でピンチをしたり、ダブルタップをするという操作は、なかなか面倒な作業ではあります。やはり、はじめからViewportなどを適切に設定し、見やすい文字の大きさにするとよいでしょう。
CSS3をうまく使って、下位互換もある程度忘れずに
画像をあまり使ってしまうと、ページ容量が大きくなってしまうので、CSS3をうまく使って少ない容量でビジュアル表現ができるようにしましょう。ただし、他のブラウザで閲覧された時のために、例えば「白背景に白文字」といったことがないようにきちんと対処をするようにしましょう。
以上のような点に気をつけて、ぜひiPhone向けサイト制作にチャレンジしてみてください。
