ファイル／新規を選択します。
最終更新日 :
2021年4月27日
Dreamweaver の jQuery Mobile 提携機能を使用すると、デバイスのサイズに合わせて自動的に変化して、ほとんどのモバイルデバイスで動作する Web アプリケーションを手早くデザインできます。
jQuery Mobile を使用した Web アプリケーションの作成
jQuery Mobile スターターページを開くか、HTML5 ページを作成します
Dreamweaver の jQuery Mobile スターターページを使用して、アプリケーションを作成します。 または、新しい HTML5 ページを使用して Web アプリケーションの作成を開始できます。
jQuery Mobile スターターページに含まれている HTML、CSS、JavaScript およびイメージファイルによって、アプリケーションのデザインを開始することができます。 CDN、自分のサーバー、Dreamweaver と共にインストールされたファイルでホスト管理される CSS ファイルや JavaScript ファイルを使用することができます。
メモ
リンクされたファイルの場所を識別するには、コードビューで <link> および <script src> タグを確認します。
挿入パネルからjQuery Mobileコンポーネントを挿入します
挿入パネルから、HTML ページに jQuery Mobile コンポーネントを挿入します。 jQuery Mobile の CSS および JavaScript ファイルは、コンポーネントのスタイルと動作を定義します。
CDN および ローカルの jQuery Mobile ファイルについて
CDN
CDN（コンテンツ配信ネットワーク）は、ネットワークの様々な場所に配置されたデータのコピーを格納するコンピューターネットワークです。 CDN の URL を使用して Web アプリケーションを作成する場合、URL で指定されている CSS ファイルや JavaScript ファイルがアプリケーションで使用されます。 Dreamweaver の初期設定では、jQuery Mobile CDN が使用されます。
または、Microsoft や Google など他のサイトの CDN の URL を使用することもできます。 コードビューで、<link> タグおよび <script src> タグで指定された CSS ファイルおよび JavaScript ファイルのサーバーの場所を編集します。
CDN からダウンロードしたファイルは読み取り専用です。
ローカルの jQuery Mobile ファイル
Dreamweaver をインストールすると、jQuery Mobile ファイルが使用しているコンピューターにコピーされます。 jQuery Mobile（ローカル）スターターページを選択すると開く HTML ページは、ローカルの CSS、JavaScript およびイメージ ファイルにリンクされています。
jQuery Mobile のスターターページ
Dreamweaver の次のスターターページを使用して、Web アプリケーションを作成します。
jQuery Mobile（CDN）
CDN で jQuery Mobile ライブラリをホストする場合は、このスターターページを使用します。
jQuery Mobile（ローカル）
アセットを自分でホストする場合、またはアプリケーションがインターネット接続に依存していない場合は、このスターターページを使用します。
jQuery Mobile（PhoneGap）
モバイルアプリケーションとしてデプロイされている Web アプリケーションが、モバイルデバイスにネイティブな機能にアクセスする場合は、このスターターページを使用します。 詳しくは、Web アプリケーションのパッケージ化を参照してください。
スターターページを使用して、モバイルデバイス用のアプリケーションを作成します。
必要に応じて次のいずれかを選択します。
サンプルから作成／モバイルスターター／jQuery Mobile（CDN）。
サンプルから作成／モバイルスターター／jQuery Mobile（ローカル）。
「作成」をクリックします。
表示されるページで、リンク先を連続表示（表示／ライブビューオプション）を有効にして、ライブビューに切り替えます。 ナビゲーションコンポーネントを使用して、アプリケーションの動作をテストします。
マルチスクリーンメニューのオプションを使用して、様々なサイズのデバイスでデザインがどのように見えるかを確認します。 ライブビューを無効にして、デザインビューに戻ります。
挿入パネル（ウィンドウ／挿入）で jQuery Mobile を選択します。 Web アプリケーションに追加できるコンポーネントが表示されます。
デザインビューで、コンポーネントを挿入する位置にカーソルを置いて、挿入パネルでコンポーネントをクリックします。 表示されたダイアログボックスで、オプションを使用してコンポーネントをカスタマイズします。
（jQuery Mobile - ローカル）HTML ファイルを保存すると、イメージファイルを含む jQuery Mobile ファイルが HTML ファイルの場所のフォルダーにコピーされます。
ライブビューでページをプレビューします。 ライブビューでのみ適用される CSS クラスもあります。
新しいページからのモバイルデバイス用の Web アプリケーションの作成
ページコンポーネントは、他のすべての jQuery Mobile コンポーネントのコンテナの役割を果たします。 他のコンポーネントを挿入する場合は、挿入する前にページコンポーネントを追加してください。
ファイル／新規を選択します。
空白ページ／HTML を選択します。
一部の jQuery Mobile コンポーネントは、HTML5 固有の属性を使用します。 検証中に HTML5 互換性を確認するには、DocType に HTML5 が選択されていることを確認してください。
挿入パネル（ウィンドウ／挿入）で、メニューから jQuery Mobile を選択します。 jQuery Mobile コンポーネントがパネルに表示されます。
挿入パネルからページコンポーネントをデザインビューにドラッグします。
jQuery Mobile ファイルダイアログで、次のいずれかの操作を行います。
リモート（CDN）
jQuery Mobile ファイルをホストするリモート CDN サーバーに接続する場合に使用します。 jQuery Mobile ファイルを含むサイトが設定されていない場合は、jQuery サイトのデフォルトのオプションを使用します。 また、他の CDN サーバーを使用することも選択できます。
ローカル
Dreamweaver で使用できるファイルが表示されます。 別のフォルダーを指定するには、「参照」をクリックして、jQuery Mobile ファイルを含むフォルダーを参照します。
CSS ファイルおよび JavaScript ファイルは、コンピューターに HTML ファイルを保存しない限り、ローカルの一時ディレクトリにコピーされます。 HTML ファイルを保存すると、関連するすべての jQuery Mobile ファイルとイメージファイルがサイトのルートフォルダー内のフォルダーにコピーされます。
ページコンポーネントのプロパティの入力
デザインビューで、コンポーネントを挿入する位置にカーソルを置いて、挿入パネルでコンポーネントをクリックします。 表示されたダイアログボックスで、オプションを使用してコンポーネントをカスタマイズします。
ライブビューでページをプレビューします。 ライブビューでのみ適用される CSS クラスもあります。
カスタムファイルとカスタムフォルダーの使用
アプリケーション用にカスタムの CSS ファイルおよび JS ファイルを作成することを選択できます。 ファイル名が jquery.mobile.js、jquery.mobile.css および jquery.js であることを確認してください。
カスタムフォルダーを使用する場合は、次の操作を行います。
http://docs.jquery.com/Downloading_jQuery#Download_jQuery から jQuery 1.5 コアライブラリの非圧縮版をダウンロードします。
ファイルをその他のリソースを含むコアフォルダーに保存します。
