DreamweaverCS6.0の新機能を試してみました。

本日、AdobeCS6.0が発売になりました。早速ダウンロードして、DreamweaverCS6.0の新機能を試してみたいと思います。Adobeは、今回から1世代前しかバージョンアップできないという方針を打ち出し物議を醸し出しました。結局世論に押された格好で、今回(2012年12月31日)までは、3世代前までバージョンアップできるようになりました。ただ、次回からは、1世代前しかバージョンアップできない方針は、決定事項みたいです。となると、私みたいにAdobeCSシリーズを何本か持っていて、古い順にバージョンアップしながら、新旧両方使用しているというような使い方が出来なくなります。

この投稿の続きを読む »

タグ

2012年5月11日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver CSS

DreamweaverでPHP/詳細ページの表示

久しぶりのDreamweaverでPHPのコーナーです。

Kazu様よりのご質問で、検索結果のページから詳細ページへの移動方法を尋ねられましたので、今回は、その方法をご紹介したいと思います。

一覧ページから詳細ページへの移動方法は既にご紹介済みと思っていましたが、ご紹介していたのは、マスター詳細ページセットによる作成方法でした。マスター詳細ページセットを利用すれば、マスターページ(一覧ページ)と詳細ページを同時に作成できますが、今回のように自分の好きなページから詳細ページへの移動方法は、ご紹介していなかったかもしれません。

それでは、『DreamweaverでPHP 検索ページ作成3』の続きとして、作成します。まず、新規作成でページを作成し、『DVD_detail.php』ファイル名でいったん保存します。空白だとわかりづらいので、『DVD詳細ページ』と文字を入力していて下さい。

一番簡単なデータの受け渡しはGETで値を渡すことです。但し、GETでデータを渡すとセキュリティがかなり甘くなりますので、注意して下さい。GETでの値の渡し方と何故、GETでは、セキュリティが甘くなるのかを見てみたいと思います。それでは、『DVD_search_and_result.php』ファイルを開き、検索窓に『愛』と入力して、『検索』ボタンをクリックしてみました。

さて、何か気づきましたでしょうか。そうです、ブラウザのアドレスバーがヒントです。『DVD_search_and_result.php』のあとに、『?Title=愛&button=検索』となっているのにお気づきになったでしょうか。この検索ページもGETで作成しています。GETでの値は、アドレスに続く、『?』移行にデータを渡しているのです。試しにアドレスバーに直接入力してみます。愛の代わりに『悪魔』と入力してみます。すると、悪魔という文字を含んだデータの一覧が表示されました。

つまり、GETで値を渡してページを表示する場合、非常に危険が伴うということを理解した上で利用して下さい。とりわけID番号などは、数字ですので、アドレスバーから入力したランダムな数字が、たまたまマッチする可能性は十分にあります。ですので、会員サイト等は、必ず、全ページでユーザー認証を行うようにして下さい。

前置きが長くなりましたが、GETでのデータの渡し方の説明に移ります。

まず、『DVD_search_and_result.php』ファイルを開き、IDのデータをクリックし、プロパティのリンクの横のアイコンをドラッグして、『DVD_detail.php』ファイルを選択します。

これで、『DVD_search_and_result.php』ファイルから、『DVD_detail.php』ファイルへのリンクは作成されました。このままデザイン画面で設定できればいいのですが、これから先は、コード画面で設定しますので、コード画面を開いて下さい。

まず、『<a href=”DVD_detail.php”>』の『php』の後ろに『?ID=』と入力します。次に、バインディングのレコードセットから、IDを『?ID=』の後ろにドラッグします。

下図のようになります。

他の値も渡したい場合は、『&』に続けてGETに指定する名前(任意)『=』で同じようにドラッグして下さい。たとえば、『&Title=』と入力後、バインディングのレコードセットから『Title』をドラッグします。

これで、『DVD_detail.php』のファイルにGETデータを渡すことができました。それでは、その渡されたデータを取得する方法を説明します。

『DVD_detail.php』ファイルを開き、『バインディング』→『+』→『レコードセット(クエリー)』をクリックします。

フィルターを『ID』『=』『URLパラメータ』『ID』と指定します。これは、GETで送られてきたIDの値をデータベースのIDと一致するデータを抽出するということです。『URLパラメータ』以外に『フォーム変数(POSTで送られてきたデータ)』『COOKIE』『セッション変数』『サーバー変数』『入力値』と選択することができます。これらの使い方はいずれ説明する機会があると思います。

『OK』ボタンをクリックするとレコードセットが自動生成されます。

デザイン画面に戻って、一般タブのテーブルで4行2列のテーブルを作成します。『ID』『タイトル』『日付』『内容』と入力したら、バインディングのレコードセットからそれぞれの箇所へドラッグします。

これで、完成です。ブラウザで確認してみます。検索ページからIDの数字をクリックしてみます。

詳細ページが表示されました。尚、お分かりだとは思いますが、何も律儀にIDの箇所にリンクを張る必要はありません。クリックしやすいTitleにリンクを張って、GETで送るのは、IDを指定すればいいだけですから。

ただ、何度も言いますが、ブラウザには、GETで送った値が表示されていますので、人に知られてはまずいような値などは絶対にGETでは送信しないようにして下さい。機会があれば、これ以外のデータの受け渡し方法(POSTやCOOKIE、セッション変数等)もご紹介します。

Kazu様、これでおわかりいただけましたでしょうか。

本日は以上です。

タグ

2011年8月29日 | コメント/トラックバック(1) |

カテゴリー:Dreamweaver

DreamweaverでPHP 会員専用サイト5

久しぶりの『DreamweaverでPHP』ですが、今日はアクセスしてきた人の情報を表示する方法を説明したいと思います。

『index.php』ファイルを開きます。『WinRoad会員専用サイトへようこそ』の前に、アクセスしてきた人の名前を表示したいと思います。『サーバービヘイビア』の『+』アイコンをクリックし、レコードセットをクリックします。

レコードセットダイアログで名前(任意)を入力、接続とテーブル名(members)を選択します。フィルターをmm_mail、『=』でフィルター条件を『セッション変数』でセッション名を『MM_Username』にして『OK』をクリックします。

先頭で改行して、カーソルを先頭へ移動します。バインディングタブのレコードセットソースから『mm_name』をドラッグします。

ドラッグしてできた『PHP』のアイコンの後に『さん』と入力します。

ファイルをアップデートしたら、ブラウザで確認してみます。メールアドレス『suzuki@winroad.jp』、パスワード『suzuki』でログインしてみます。

ログインした人の名前が表示されています。

このようにログインした人の情報をデータベースから取得することができます。その情報によりログインした人のデータベース情報によってサイトの挙動を変えることができます。また、ログイン画面からパスワードを忘れた人のメールアドレスへパスワードの自動メール送信することも簡単にできます。

タグ

DreamweaverをCodeIgniterの開発環境にする

CodeIgniterの開発環境は、Eclipse/PDTを紹介しましたが、使い慣れたDreamweaverを使用して、レンタルサーバー上で直接プログラムを作成したいという人のために、Dreamweaverでの設定方法を紹介します。

尚、私の会社のパソコンが古く、Dreamweaver CS5.5は、フリーズしまくるので、この設定方法に関しては、Dreamweaver CS3を使用して説明いたします。尚、CodeIgniterはローカルフォルダにダウンロードしてあるものとして説明します。

まず、Dreamweaverの初期画面で、サイト→新規作成とクリックします。

カテゴリで、ローカル情報を選択、サイト名(任意)を入力し、ローカルのルートフォルダを選択します。

カテゴリのリモート情報をクリックし、アクセスはFTPを選択します。FTPホスト名は、ドメイン名(サブドメイン名)を入力します。ホストディレクトリは、ドメイン名の場合は、空白で、サブドメイン名の場合は、サブドメイン名を入力します。FTPのログイン名とパスワードを入力し、『テスト』ボタンをクリックします。

『接続されました』の画面が出たら、『OK』をクリックします。

次にカテゴリのテストサーバをクリックします。サーバーモデルで『PHP MySQL』を選択し、アクセスで『FTP』を選択すると、自動的にFTPホストからパスワードまでが入力されていますので、確認するだけで大丈夫です。尚、URL接頭辞は、サブドメインの場合、間違っている可能性がありますので、変更して下さい。『OK』ボタンを押せば設定は完了です。

それではレンタルサーバーにCodeIgniterをアップロードしましょう。ルートフォルダをクリックし、アップロードボタンをクリックします。


『OK』ボタンをクリックすれば、アップロードが始まります。接続環境によりますが、アップロードにはしばらく時間がかかります。


アップロードが終了したら、正しくアップロードできたか確認してみましょう。Dreamweaverの『展開してローカル及びリモートサイトを表示』アイコンをクリックします。

リモートサイトとローカルフォルダが同じならOKです。尚、リモートに何も表示されていなかったら、切断されている可能性がありますので、『リモートホストに接続』アイコンをクリックして下さい。

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

タグ

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時点)

タグ

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

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

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

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

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

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

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

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

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

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

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

タグ

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でスマートフォンサイト作成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でスマートフォンサイト作成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でスマートフォンサイト作成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で表示してみます。下記のようになっています。

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

タグ

このページの先頭へ