Dreamweaverでスマートフォンサイト作成

DreamweaverCS5.5の新機能

DreamweaverCS5.5からJavaScriptフレームワークの『jQuery Mobile』に対応するようになりました。これまでDreamweaverはモバイルサイトを作成するのに決して使い勝手のいいソフトではありませんでしたが、今回の新機能によりかなり使い勝手がよくなりました。今回から数回にわたり『jQuery Mobile』を使ったサイトの作り方を検証してみたいと思います。 今までのサイトと区別するため新しく『sp』フォルダを作成して、そこにスマートフォン用のサイトを作成していきたいと思います。

①ファイル→新規作成で『新規ドキュメント』ダイアログを開き、『サンプルから作成』→『モバイルスターター』→『jQuery Mobile(ローカル)』とクリックします。下記のようなソースコードが作成されました。

②スマートフォンではどのように表示されるのか『ライブコード』をクリックしてみます。すると『jQuery Mobile』特有のレイアウトが表示されます。

③それでは、どんな構造になっているのか『ライブコード』を解除して調べてみます。同じファイルの中にトップページ、2ページ目、3ページ目と配置され、アンカーリンクが張られています。

④それでは少し編集してみましょう。『ライブビュー』を解除します。表題を『WinRoad会員サイト』に変更し、リスト名を変更したら、対応している箇所(アンカーリンクの張られている箇所)の名称も変更します。フッダーは全て同じにしました。

⑤『ライブビュー』をクリックして、実際にどのように表示されるか見てみます。

⑥リストの中の『DVD一覧』をクリックしてみます。

⑦『DVD一覧』のページが表示されます。トップページに戻るための『Back』ボタンも作成されています。

⑧このようにコンテンツさえ決まっていれば30分程度で簡単なスマートフォンサイトが作成できます。 それでは、いったん最初に作った『sp』フォルダにindex.phpとして保存します。

⑨『ファイル』→『別名で保存』で保存先とファイル名(index.php)を入力し、『保存』ボタンをクリックすると、『依存ファイルのコピー』ダイアログが表示されますので、そのまま『コピー』ボタンをクリックします。

⑩『依存ファイル』のダイアログボックスで『コピー』をクリックします。ファイルの一覧を見てみると、『jquery-mobile』のフォルダと関連ファイルが作成されています。

以上、今日はDreamweaverCS5.5の新機能『jQuery Mobile』の使い心地を簡単に検証しました。

Adobe Dreamweaver CS5.5 Windows版
アドビシステムズ (2011-05-20)
売り上げランキング: 265

マッキーさんのご質問にお答えします。以下のようなタグでBackボタンを生成することができるはずです。試してみてください。

<div data-role=“header”>
<a href=“” data-rel=“back”>Back</a>
</div>

タグ

Dreamweaverでスマートフォンサイト作成2

PCサイトとスマフォサイトの振り分け設定

パソコン用のサイトとスマートフォン用のサイトを作り分けても、別々のアドレスでアクセスさせるのではあまり意味がありません。パソコンでアクセスしてきたらパソコン用サイトへ、スマートフォンでアクセスしてきたらスマートフォン用サイトへ、と同じアドレスでアクセスしてきても、振り分けるように設定したいと思います。

ユーザーエージェントとは

ウィキペディアによると、『ユーザーエージェントとは、利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアを指す』と以下かなり難しいことが書かれていますが、ここで使用する『ユーザーエージェント』とは、サイトのユーザーがWebブラウザ(Internet ExplorerやFirefox、Safari等)を通じてサーバーへ送信する文字情報を指します。この『ユーザーエージェント』により、サイトの振り分けを行いたいと思います。

PHPにより振り分け

ユーザーエージェントによる振り分けと言っても、.htaccessファイルによる振り分け、JavaScriptsによる振り分け、PHPにより振り分け等、色々な種類がありますが、PHPにより振り分け方法を紹介したいと思います。

PC用に作ったindex.phpを開き、セッションが開始される前の箇所にPHPのコードを入力します。

<?php
 $ua=$_SERVER['HTTP_USER_AGENT'];
 if((strpos($ua,'iPhone')!==false)||(strpos($ua,'Android')!==false))
 {
 header("Location:/sp/index.php");
 exit();
 }
 ?>

PHP初心者に、簡単に意味を解説します。変数$uaにサーバーからの情報(ユーザーエージェント)を代入します。その代入された$uaの中に『iPhone』の文字か『Android』の文字が含まれていたら、spフォルダのindex.phpへ移動するようにと命令しています。尚、最後のexit()がないとそれ以降のPHPも実行されますので、いったん会員認証画面へ移動して、認証してから、再度spフォルダのindex.phpへ移動する形になります。PC用の認証画面は見づらいのでスマートフォン用の認証画面も作成したいと思います。とりあえず現状は、スマートフォンからアクセスすれば誰でもWinRoad会員専用サイト(テストサイト)へ移動することができます。又、このままでは、iPadもスマートフォン専用のサイトへ強制的に移動する形になっていますが、その辺の変更は後日設定します。

これで『iphone』や『Android』からサーバーへアクセスしてきた場合、『sp』フォルダのindex.phpへ振り分けることができます。

jQuery Mobile ページ

それでは前回の続きとして、『Dreamweaver CS5.5』のjQuery Mobileコマンドアイコンを端から検証してみたいと思います。

①一番左端の『jQuery Mobileページ』のアイコンをクリックしてみます。出てきた『jQuery Mobile ページ』ダイアログを見てみると、現在のページにjQuery Mobileを適用させるためのアイコンみたいです。『OK』をクリックしてみます。

②ページ名の入力画面とヘッダー、フッターを使用するかどうかの確認画面が出ます。そのまま何も変更せずに『OK』ボタンをクリックします。

③下記のようにコードとデザインが作成されました。

④いったん『test.php』で保存して、Device Centralで表示してみます。以下のように表示されます。

jQuery Mobile リストビュー

①次にDreamweaverのデザイン画面に戻り、左から2番目の『jQuery Mobile リストビュー』をクリックしてみます。『リストタイプ』は、番号付きか番号無しを選択するようになっています。項目はリストの項目数を選択するようになっています。この辺は説明の必要は無いと思います。

②それ以降のチェックはどのような機能なのか検証するため、いったん何もチェックを入れずに『OK』ボタンをクリックし、Device Centralで表示してみます。下記のようなページボタンが生成されています。

③次に全部にチェックを入れ、同じくDevice Centralで表示してみます。下記のようになっています。

詳細な使い方とかは、そのうち検証したいと思います。本日はここまでにします。

タグ

Dreamweaverでスマートフォンサイト作成3

jQuery Mobile レイアウトグリッド

①次に『Dreamweaver CS5.5』の新機能、『jQuery Mobile』アイコンの3番目をクリックしてみます。『jQuery Mobile レイアウトグリッド』のダイアログボックスには『行』と『列』しか表示されていません。2行3列を選択して『OK』ボタンをクリックします。

②デザインページでは、先ほど指定した2行3列にはなっていません。

③Device Centralで表示してみると、きちんと2行3列になっています。今までテーブルで作っていたレイアウトをきちんと表示することができそうです。

jQuery Mobile 縮小可能ブロック

①『jQuery Mobile』アイコンの4番目は『縮小可能ブロック』と表示されます。とりあえずアイコンをクリックしてみると、ヘッダーとコンテンツのブロックが3つ作成されました。

②同じく、Device Centralでどのように表示されるのか確認してみます。ヘッダーボタンの中にコンテンツが隠れるタイプのレイアウトです。ヘッダーボタンをクリックすると、中のコンテンツが表示されます。

jQuery Mobile テキスト入力

『jQuery Mobile』コマンドアイコンの5番目『jQuery Mobile テキスト入力』、6番目『jQuery Mobile パスワード入力』、7番目『jQuery Mobile テキスト領域』、この辺はほとんど説明のいらない箇所だと思います。

jQuery Mobile Select Menu

『jQuery Mobile』アイコンの8番目『jQuery Mobile Select Menu』をDevice Centralで見てみます。『オプション1』という名前のボタンが作成されています。そのボタンをクリックしてみます。

するとWordpressのプラグインなどで有名なライトボックス風の浮き上がってくるようなセレクトメニューが表示されます。

jQuery Mobile チェックボックス

9番目のアイコン『jQuery Mobile チェックボックス』をクリックします。『jQuery Mobile チェックボックス』のダイアログでチェックボックスの数を3、レイアウトを縦にして『OK』をクリックしてみます。

これもDevice Centralで表示してみます。チェックボックスが縦に3つきれいに並んでいます。

今度はチェックボックスを横に並べてみます。チェックボックスの数を2と3で表示してみます。すると縦の場合と違って、チェックボックスもありませんし、チェックボックスが3の場合はレイアウトも崩れています。これはバグでしょうか。それともこういうレイアウトなのでしょうか。不明です。バグなら早急に対応して欲しいです。

本日はここまでにします。

タグ

Dreamweaverでスマートフォンサイト作成4

jQuery Mobile ラジオボタン

それでは次に、『jQuery Mobile』 コマンドアイコンの10番目、『jQuery Mobile ラジオボタン』をクリックしてみます。

ラジオボタンの数を3、レイアウトを縦で『OK』をクリックします。

Device Centralで表示してみると、縦にラジオボタンが3つ並んでいます。

それでは、前回チェックボックスで問題のあった縦を同じようにDevice Centralで表示してみます。やはりチェックボックスと同じようにレイアウトが崩れています。自分でCSSいじって調整するしかないようです。

jQuery Mobile ボタン

次に、11番目のアイコン『jQuery Mobile ボタン』をクリックしてみます。『jQuery Mobile ボタン』のダイアログボックスには、ボタンの数、ボタンの種類(ボタン、リンク、入力)、入力タイプ、位置、レイアウト、アイコン、アイコンの位置と選択肢が、多くいろんな用途に使えそうです。

『jQuery Mobile ボタン』のレイアウトは、3つまでは横にきれいに並びますが、それ以上になると、チェックボックス、ラジオボタンと同様、レイアウトが崩れます。これはおそらく文字数の関係だと思われます。

jQuery Mobile スライダー

12番目のアイコン『jQuery Mobile スライダー』をクリックしてみます。すると何もダイアログボックスが表示されず、いきなり『値:』という文字と『0』と数字の入った、フィールドが作成されました。

これもDevice Centralで表示してみます。右のスラーダーを動かせば数値が変わるスライダーバーが生成されています。

jQuery Mobile フィリップトグルスイッチ

最後のアイコン『jQuery Mobile フィリップトグルスイッチ』をクリックしてみます。コンテンツやプログラムのON、OFFを行うスイッチが生成されています。

以上で、『Dreamweaver CS5.5』の新機能『jQuery Mobile』のアイコンの説明は終わります。次回からは実際にこのアイコンを利用してサイトを作成してみたいと思います。

タグ

Dreamweaverでスマートフォンサイト作成5

トップページのヘッダーを画像に変更

それでは、今日から実際に『jQuery Mobile』を使って、スマフォサイトを作成してみたいと思います。スマートフォン用のサイトは携帯の3G回線を利用しての接続が多いので、なるべくページの容量は少なくしなければなりません。かといって文字だけのサイトは味気ないですよね。そこでまずサイトの顔ともいえるトップページのヘッダーに、画像を使用してみたいと思います。

現在のスマートフォンのディスプレイは、iphoneの3GSまでが320×480px、iphone4が640×960pxで、Androidも同様のサイズです。そこで横幅320pxで作成すれば、ほとんどのスマートフォンに対応できますので、横幅320pxで作成していきたいと思います。縦スクロールは簡単ですので、トップページ以外は縦幅はほとんど考慮する必要は無いと思います。

まず横幅300px程度で、トップページのヘッダーに使用する画像を用意します。用意した画像を前回スマートフォン用に作成したspフォルダのindex.phpのヘッダーにドラッグします(便宜上、WinRoad徒然草の文字は削除してあります)。

さっそくDevice Centralでどのように表示されるのか見てみたいと思います。一応画像は表示されましたが、背景が黒で画像も一部しか表示されていません。

それでは、CSSを変更してヘッダーに画像が表示されるように設定しましょう。画像をクリックし、CSSスタイルの新規作成をクリックします。『新規CSSルール』のダイアログが表示されたら、ルール定義の新規スタイルシートを選択します。

新規ファイルの保存場所はどこでも大丈夫ですが、とりあえず『jquery-mobile』フォルダに保存します。

CSSに自信のある人は、直接『jQuery Mobile』のスタイルシートを変更すればいいのですが、あまり自信のないひとは、別ファイルを作成するのをお勧めします。別ファイルで保存すれば、変更も削除も簡単ですが、元ファイルを直接変更すれば、元に戻すのは大変です。

CSSルール定義のダイアログが表示されますが、そのまま何も入力せずに『OK』をクリックします。新しいCSSファイルとのリンクが作成されています。

只、このままCSSファイルを記入しても、『jQuery Mobile』のdata-role属性で、こちらの思うようなデザインができません。そこで、『my_header』という名前のIDセレクターを作成することにします。『Dreamweaver』のコード画面で画像に変更したい箇所の『data-role=”header”』という文字を削除して、代わりに『id=”my_header”』と入力します。

今ある画像をいったん削除して、トップページのヘッダー部分に『winroad徒然草』とタイトルを入力します。入力したら、ヘッダー部分をクリックして、タグセレクタの『h1』をクリック。CSSの新規作成ボタンをクリックします。

新規CSSルールのダイアログを確認したら、『OK』ボタンをクリックします。

CSSルール定義のダイアログで、『背景』をクリックし、下のように設定します。

次にカテゴリのブロックをクリックし、text-indentを『-9999px』に設定します。

text-indentを-9999に指定するのは、<h1>タグ内の文字内容『Winroad徒然草』は検索ロボットに認知させて、表示だけは、背景画像を表示するためのテクニックです。どこかの書籍にSEOスパムにはならないと書いてあったので、それを信じて利用しています。只、画像だけを表示させるために、文字色を背景色と同色にして見えなくするテクニックはSEOスパムになる可能性が高いそうです。もし間違っていたら指摘して下さい。

最後にボックスをクリックし、画像の高さに合わせて高さ設定をします。

それでは、Device Centralで表示してみることにしましょう。

トップページのヘッダーに『WinRoad徒然草』のロゴが表示されました。きょうはここまでにします。

タグ

Dreamweaverでスマートフォンサイト作成6

レイアウトグリッドを使ったナビボタン

今日は、レイアウトグリッドを使って、ナビボタンを作成してみたいと思います。1行5列でレイアウトグリッドを作成します。

レイアウトグリッド内の文字を削除して、事前に作成しておいた60×60pxの画像をそれぞれのブロックへドラッグします。

ドラッグした画像にアンカーリンクを設定してみます。一覧画像の前に<a href=”#page2″>を、画像の後ろに</a>を入力します。同じように検索画像の前に<a href=”#page3″>と後ろに</a>を、新規画像の前に<a href=”#page4″>と後ろに</a>を入力します。

訂正画像と削除画像用のページは作成していないので、そのまま何も入力しません。Device Centralで表示してみます。

ただし、携帯を横にするとナビボタンのレイアウトが崩れます。

そこで少し工夫してみます。画像をクリックして、プロパティの幅を『100%』に変更します。高さはもとの60pxのままにしておきます。

すると今度は、縦でも横でもきちんと均等に配置されます。

ちょっと風変わりなナビボタンが出来ました。皆さんも工夫してみるとおもしろい使い方が出来ると思います。おもしろい使い方があれば紹介してください。

今日はここまでにします。

タグ

Dreamweaverでスマートフォンサイト作成7

Dreamweaverの超便利機能『コードナビゲータ』

それでは、今日はDreamweaverの『コードナビゲータ』を使用して、実際に『jQuery Mobile』のCSSを変更してみることにしましょう。

コードナビゲータとは、DreamweaverのCS4から導入されたとても便利な機能です。コードナビゲータには、ページ上で選択した特定範囲に関連するコードソースのリストが表示されます。ここから、 CSS ルール、サーバーサイドインクルード、外部 JavaScript ファイル、他関連ファイルへ一発で移動できます。

今回は、フッターを変更したいと思います。ライブビューモードにして、フッター部分をクリックします。しばらくすると表示されるコードインジケーターをクリックします。

コードインジケーターが表示されない場合は、コードインジケーターを無効にしてある可能性があります。そのときは、『Alt』キーを押しながら、フッターをクリックしてください。

コードナビゲータのダイアログボックスが表示されます。このままでは関連ファイルが多すぎてどれをいじればいいのかわかりません。

セレクタをマウスオーバーすると実際のプロパティと値が表示されるので、ある程度見当がつくと思います。フッターのデザインは『ui-bar-a』が関係していそうです。それでは、『ui-bar-a』のセレクタをクリックしてみます。

編集方法は実際のソースコードを書き換える方法、プロパティをクリックして編集する方法、鉛筆アイコンをクリックして、CSS定義ルールのダイアログボックス内で編集する方法があります。

実際にCSSを書き換えて後で元に戻すのは大変です。そこで『DreamweaverCS5』からの新機能『CSSプロパティの無効化』ボタンを利用してみることにします。これは、CSSプロパティの有効無効をワンクリックで変更できる機能です。ライブビューの表示が変わりますので、実際にどのように変化するのか簡単に調べることが出来ます。

『background-image』を無効化して、『background-color』を『#00F』に変更してみます。するとすべてのheaderとfooterの背景色が変更されました。

Webkit先行実装プロパティ

ただこのままでは、背景を単色にしただけで、面白みがありません。そこで、『background-image』の『Webkit』の『先行実装プロパティ』もいじってみましょう。

CSS3は現在策定中の企画であり、正式な勧告までまだ時間がかかります。そこで、Webブラウザの開発ベンダーは、CSS3のプロパティ名に特定のプレフィックス(先頭文字列)を付加することで、独自のプロパティとし、CSS3の機能を一部先行実装しています。こうしたプロパティは『先行実装プロパティ』と呼ばれ、iphoneやAndroidで採用されているレンダリングエンジンの『Webkit』では、『-webkit』というプレフィックスでCSS3の機能を利用できるようにしています。

それでは、『-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111))』を解読してみましょう。『-webkit-gradient』とは、背景色を画像を使わずにグラデーション化するWebkit先行実装プロパティです。

構文は『-webkit-gradient(グラデーションの方向、開始位置、終了位置、開始色、終了色)』です。私が調べた書籍によると開始色はfrom(色コード)、終了色はto(色コード)となっていましたので、『color-stop(0,#3c3c3c),color-stop(1,#111)』は解読不能です。

よって以下のように変更します。『-webkit-gradient(linear,left top,left bottom,from(#66ccff),to(#000099))』。これでWinRoad徒然草のロゴカラーに近いグレデーションカラーになりました。

それでは、いつものようにDevice Centralで表示してみます。

尚、『background-image』の変更は、コードを直接変更してください。プロパティ画面から変更すると、Webkitコードがurl(……)で挟まれ、実際にレイアウトを変更することが出来ません。これもバグでしょうか。そのような仕様なのでしょうか。不明です。

今回『Webkit先行実装プロパティ』の内容でお世話になった書籍が下の書籍です。スマートフォンサイトの制作を分かりやすく解説しています。この本を熟読すれば、『Dreamweaver CS5.5』がなくても、きれいなスマートフォンサイトが作成できそうです。興味のある方はどうぞ。

iPhone Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

新品価格
¥2,499から
(2011/6/11 15:36時点)

タグ

このページの先頭へ