プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle WebCenter Sitesの使用
12c (12.2.1.2.0)
E82733-01
目次へ移動
目次

前
次

7 モバイル・デバイス・コンテンツの使用

Mobility機能を使用すると、モバイル・デバイス用のWebサイトを作成できます。モバイル用Webサイトのアセットおよびサイト・ナビゲーションを作成、コピーおよび編集できます。また、様々なデバイス用のモバイル用Webサイトをプレビューおよび承認することもできます。

モバイル・デバイス・コンテンツの使用の詳細は、次のトピックを参照してください。

7.1 モバイル用Webサイトについて

モバイル用Webサイトは、デスクトップ/ラップトップ・デバイスでの表示用のデフォルトWebサイトと同様に、Oracle WebCenter Sites: Contributorインタフェースの「サイト・ツリー」内で、サイト・ナビゲーション・ノードによって表現されます。各ノードには、サイトのアセットを他のサイトのアセットと区別する上で役立つ個別アイコンがあります。たとえば、図7-1はavisportsサンプル・サイト内の「サイト・ツリー」を示しています。

図7-1 avisportsサンプル・サイトのサイト・ナビゲーション

図7-1の説明が続きます
「図7-1 avisportsサンプル・サイトのサイト・ナビゲーション」の説明

図7-1の上部には、サイトの作成時にデフォルトで作成された、デスクトップ・デバイスおよびラップトップ・デバイス用の「デフォルト」サイト・ナビゲーション・ノードがあります。その下には、「タッチ」および非タッチという名前のモバイル用のサイト・ナビゲーション・ノードがあります。これらのノードは、管理者によって作成されたもので、このとき、これらはデバイス・グループに割り当てられています。これは、類似機能を持つデバイスのグループ(タッチスクリーン・フォンのグループなど)です。

図7-1では、「タッチ」サイト・ナビゲーション・ノードはモバイル・タッチスクリーン・デバイス用のデバイス・グループに割り当てられています。非タッチ・サイト・ナビゲーション・ノードは、QWERTYキーパッドを備えたモバイル・デバイス用のデバイス・グループに割り当てられています。それぞれのサイト・ナビゲーション・ノードの下には、サイト・ナビゲーションを表す一連の配置済ページがあります。管理者がサイト・ナビゲーションを作成する一方、コントリビュータはページを配置します。配置済ページは、モバイル・デバイスのコンテキストで表示および編集できます。

7.1.1 モバイル用Webサイトを作成する方法

モバイル用Webサイトを作成するには、ページを配置することによって、モバイル・サイト・ナビゲーション・ノードの下にモバイル用サイト・ナビゲーションを作成します。コンテンツ・アセットおよびページを作成することも、既存のコンテンツ・アセットおよびページをコピーして編集することもできます。詳細は、「モバイル用Webサイトの作成について」を参照してください。

7.1.2 モバイル用Webサイトを編集する方法

デフォルトWebサイトの場合とまったく同様に、モバイル用Webサイトのページとコンテンツ・アセットをフォーム・ビューとWebビューで編集できます。また、「モバイル・デバイスのコンテキストでのアセットの編集」で説明するように、ページとコンテンツ・アセットをモバイル・デバイスのコンテキストで編集するオプションもあります。

7.1.3 モバイル用Webサイトをプレビューする方法

「モバイル・デバイスのコンテキストでのアセットのプレビュー」で説明するように、単一のモバイル・デバイスまたは複数のモバイル・デバイス(同じデバイス・グループに関連付けられた)のコンテキストで、モバイル用Webサイトのページとコンテンツ・アセットをプレビューできます。

図7-2は、単一のモバイル・デバイス(デバイス・アセットによって表現される)に表示される「Surfing」ページのプレビューを示しています。図7-3は、複数のモバイル・デバイス(同じデバイス・グループに関連付けられた)に表示される「Surfing」ページのプレビューを示しています。

図7-2 単一のデバイスに表示されるページ・アセットのプレビュー

図7-2の説明が続きます
「図7-2 単一のデバイスに表示されるページ・アセットのプレビュー」の説明

図7-3 複数のデバイスに表示されるページ・アセットのプレビュー

図7-3の説明が続きます
「図7-3 複数のデバイスに表示されるページ・アセットのプレビュー」の説明

7.1.4 モバイル用Webサイトのパブリッシュを承認する方法

モバイル用のWebサイトを使用可能にするには、サイト・ナビゲーション(サイト・ナビゲーション・アセット)、コンテンツ・アセット、配置済ページおよびデバイス・グループを承認する必要があります。デバイス・グループは相互に依存しているので、1つのデバイス・グループを承認する際には、依存するデバイス・グループをすべて承認する必要があります。モバイル用のWebサイトを管理システムにパブリッシュするには、そのモバイル用のWebサイトに関連付けられたすべてのデバイス・アセットも承認する必要があります。詳細は、「モバイル用サイト・ナビゲーションのパブリッシュの承認について」を参照してください。

7.2 モバイル用Webサイトの作成について

モバイル用Webサイトのナビゲーションの作成は、デスクトップ/ラップトップ・デバイスで表示するデフォルトWebサイトのナビゲーションの作成とほとんど同じです。まず、アセットとページを作成するか、既存のアセットとページをコピーしてモバイル用Webサイトのために編集します。その後、ページをモバイル用サイト・ナビゲーションの下に配置するか、ナビゲーションをコピーして別のモバイル用サイト・ナビゲーションの下に貼り付けることによって、モバイル用Webサイトのナビゲーションを作成します。

モバイル用Webサイトの作成の詳細は、次のトピックを参照してください。

7.2.1 モバイル用Webサイトのコンテンツの作成またはコピーについて

モバイル用Webサイトのコンテンツを作成するには、次の方法を使用できます。

7.2.2 モバイル用Webサイトのナビゲーションの作成またはコピーについて

モバイル用Webサイトのナビゲーションは、Contributorインタフェースの「サイト・ツリー」でサイト・ナビゲーションの下にあるページ・アセットの配置によって決定されます。ページを配置取消し済ページ・ノードからモバイル用サイト・ナビゲーションの下に配置するか、ナビゲーションをコピーしてモバイル用サイト・ナビゲーションの下に貼り付けることができます。また、サイト・ツリー内の任意のノードを右クリックして「新規ページ」を選択することにより、モバイル用サイト・ナビゲーション内でページを直接作成することもできます。手順については、「Webサイトナビゲーションの定義」を参照してください。

注意:

WebCenter Sitesでは、Webサイトのナビゲーションを作成する方法が複数提供されます。サイト・デザインによって、Webサイトのナビゲーションの作成方法が決まります。この項は、Contributorインタフェースの「サイト・ツリー」を使用してWebサイトのナビゲーションを作成できるようサイト・デザインが構成されているユーザーを対象としています。Webサイトのナビゲーションがどのように作成されるかについては、サイトの開発者に確認してください。

7.3 モバイル・デバイスのコンテキストでのアセットの編集

モバイル・デバイスのコンテキストでアセットを編集する作業は、Webビューでアセットを編集する場合と同じですが、1つ異なる点として、編集するアセットはモバイル・デバイスを表現するデバイス・アセットに表示されます。モバイル・デバイスのコンテキストでアセットを編集する際には、コンテンツの編集、Webページ・レイアウトの変更、スロットのコンテンツ・レイアウトの変更およびアセットのアソシエーションの編集が可能です。

注意:

デフォルトWebサイトのアセットを編集する場合とまったく同じように、フォーム・ビューおよびWebビューでモバイル用Webサイトのアセットを編集することもできます。手順については、「フォーム・ビューでのアセットの作成」および「Webビューでのアセットの作成」を参照してください。

モバイル・デバイスのコンテキストでアセットを編集するには:

  1. Contributorインタフェースから、アセットを編集するモバイル用Webサイトが含まれるサイトを選択します。

  2. モバイル・デバイスのコンテキストで編集するアセットを見つけて開きます。「アセットの検索と編成」および「モバイル・デバイスの配置済ページ・アセットの使用」を参照してください。

  3. アセットのコンテンツを編集する対象のデバイスを選択します。

    1. アセットのツールバーで、「デバイスの表示/非表示」アイコンをクリックします。

      アセットの右側にデバイス選択パネルが開きます(図7-4を参照)。

      図7-4 アセットの右側に開いたデバイス選択パネル

      図7-4の説明が続きます
      「図7-4 アセットの右側に開いたデバイス選択パネル」の説明
    2. デバイス選択パネルで、アセットを編集する対象のデバイスを選択します。

      図7-5に示すように、選択したデバイスの画面にアセットの編集ビューが表示されます。

      図7-5 モバイル・デバイスの画面に表示されたアセット

      図7-5の説明が続きます
      「図7-5 モバイル・デバイスの画面に表示されたアセット」の説明

      この時点で、デフォルトWebサイトのアセットの場合と同様にアセットを編集できます。

  4. アセットの編集ビューの様々な領域をポイントし、変更可能なコンテンツを組み入れる領域を決定します。ドラッグ・アンド・ドロップ機能およびその他のコンテンツ管理アクションをサポートする領域は、それらをポイントしたときに強調表示されます。

    注意:

    表示される編集可能領域のタイプ、およびモバイル・デバイスのコンテキストでアセットを編集する際にそれらの領域がどのように表示されるかは、開発者がどのようにアセットのWebページ・レイアウト(テンプレート)をコーディングしたかによって決まります。Webページ・レイアウトについては、「Webページ・レイアウトの変更」を参照してください。

    編集可能領域の様々なタイプの詳細は、「Webビューでのアセットの作成」を参照してください。

  5. テキスト領域内をクリックして単純なテキスト・フィールドまたはWYSIWYG対応のフィールドを表示することにより、アセットのコンテンツを編集します。次に、フィールドに表示されたコンテンツを変更します。WYSIWYG対応のフィールドの詳細は、「CKEditorの使用」を参照してください。

  6. アセットのWebページ・レイアウトを変更します。手順については、「Webページ・レイアウトの変更」を参照してください。

  7. スロットのコンテンツ・レイアウトを変更します。手順については、「コンテンツ・レイアウトの変更」を参照してください。

  8. アセットのアソシエーションを編集します。

  9. 変更を保存するには、次のいずれかを実行します。

    • アセットのツールバーで、「保存」アイコンをクリックします。

    • メニュー・バーで、「コンテンツ」「保存」を選択します。

  10. アセットを調査するには、次のいずれかを実行します。

    • アセットのツールバーで、「調査」アイコンをクリックします。

    • メニュー・バーで、「コンテンツ」「調査」を選択します。

  11. モバイル・デバイスのコンテキストでアセットをプレビューします。手順については、「モバイル・デバイスのコンテキストでのアセットのプレビュー」を参照してください。

7.3.1 モバイル・デバイスの配置済ページ・アセットの使用

ナビゲーション・ペインの「サイト・ツリー」を使用します。

  1. ナビゲーション・ペインで、「サイト・ツリー」バーをクリックします。

    ナビゲーション・ペインに「サイト・ツリー」が表示されます。

  2. 「サイト・ツリー」内で、アセットを編集する対象のモバイル・デバイスのタイプに関連付けられたサイト・ナビゲーションを開きます。
  3. 開いたサイト・ナビゲーションで、アセットを右クリックして、コンテキスト・メニューから「編集」を選択します。

    タブが開き、サイト・ナビゲーションに関連付けられたモバイル・デバイスのコンテキストで、ページ・アセットの編集ビューが表示されます。

    注意:

    ページ(またはコンテンツ)アセットを編集のために開くと、タブ上のアセット名の左側にサイト・ナビゲーション・アイコンが表示されます。この機能は、複数のアセットを編集のために同時に開くときに役に立ちます。サイト・ナビゲーション・アイコンを使用すると、アセットがどのサイトに属しているかを確認しやすくなります。

7.4 プレビュー用の優先デバイスの選択

1つ以上のデバイスを優先デバイスとして選択し、そのコンテキストでサイトをプレビューできます。優先デバイスを設定すると、Contributorインタフェースの「デバイス」パネルでこれらが使用可能になります。また、優先デバイスを使用することにより、Webビューでこれらのデバイスのコンテキストでコンテンツを編集することもできます。

優先デバイスを選択するには:

  1. アプリケーション・バーで、サイトのドロップダウン・フィールドの手前の右側に表示されるユーザー名リンクをクリックします。
  2. 「プロファイルの編集」ページで、サイト・プリファレンス・セクションまでスクロール・ダウンします。
  3. 優先デバイス・セクションで、(そのコンテキストでサイトをプレビューする)優先デバイスを「使用可能なデバイス」ボックスから優先デバイス・ボックスに移動します。たとえば、図7-6を参照してください。
  4. 「保存して閉じる」をクリックして、優先デバイスを保存し、Contributorインタフェースに戻ります。
  5. Contributorインタフェースで、「デバイス」パネルがまだ表示されていない場合は、「デバイスの表示/非表示」をクリックしてこのパネルを表示します。
  6. 「デバイス」パネルでは、プロファイルの優先デバイスが最初に表示され、その後ろに残りのデバイスが表示されます。たとえば、図7-7には、図7-6優先デバイス・ボックスに表示されている「デバイス」パネル内のデバイスが表示されています。

    図7-7 「デバイス」パネル上の優先デバイス

    図7-7の説明が続きます
    「図7-7 「デバイス」パネル上の優先デバイス」の説明

    注意:

    優先デバイスは、Webビューだけでなく単一のプレビューでも使用できます。これらを使用して複数のデバイスでサイトを同時にプレビューすることはできません。つまり、優先デバイスはマルチデバイス・プレビュー機能で使用することはできません。

7.5 モバイル・デバイスのコンテキストでのアセットのプレビュー

モバイル・デバイスのコンテキストでアセットをプレビューする作業は、デスクトップ/ラップトップ・デバイスでアセットを表示する場合と似ていますが、1つ異なる点として、アセットのプレビューは、実際のモバイル・デバイスを表現する単一のデバイス・アセットまたは複数のデバイス・アセットに表示されます。また、デバイスを回転してアセットのプレビューをランドスケープ・モードで表示したり、アセットのプレビューを拡大縮小することもできます。

デフォルトWebサイトのアセットの場合と同じ方法で、モバイル・デバイス上でプレビューするアセットにアクセスできます。唯一の違いは、「サイト・ツリー」を使用してモバイル・サイト・ナビゲーションの下のページ・アセットにアクセスすると、そのサイト・ナビゲーションに関連付けられたモバイル・デバイスにページが自動的に表示されることです。アセットのプレビューにアクセスする方法の詳細は、「アセットのプレビュー」を参照してください。

モバイル・デバイスのコンテキストでアセットをプレビューするには:

  1. Contributorインタフェースから、モバイル・デバイスのコンテキストでアセットをプレビューするモバイル用Webサイトが含まれるサイトを選択します。
  2. モバイル・デバイス上でプレビューするアセットを見つけて開きます。「アセットの検索と編成」および「モバイル・デバイスの配置済ページ・アセットの使用」を参照してください。
  3. アセットのツールバーで、「プレビュー」アイコンをクリックします。

    アセットのプレビューが開きます。

  4. アセットのツールバーで、「デバイスの表示/非表示」アイコンをクリックします。

    デバイス選択パネルがアセットの右側に開きます。

  5. デバイス選択パネルで、アセットをプレビューする対象のデバイスまでナビゲートしてデバイスを選択します。

    注意:

    「検索」機能または「コンテンツ・ツリー」を使用してアセットにアクセスした場合は、システム上で使用可能なすべてのデバイス・グループに含まれるデバイスのリストがパネルに表示されます。「サイト・ツリー」からページ・アセットにアクセスした場合は、そのページが配置されているサイト・ナビゲーションに関連付けられたデバイスのみがパネルに表示されます。

    アセットのプレビューが、選択したデバイスのコンテキストで表示されます。

  6. (オプション)「デバイスの表示/非表示」アイコンをクリックして、デバイス選択パネルを閉じます。
  7. プレビューを回転するには、「回転」をクリックします。

    アセットのプレビューが、ランドスケープ・モードでモバイル・デバイスに表示されます(図7-8を参照)。

    図7-8 デバイスにランドスケープ・モードで表示されるアセットのプレビュー

    図7-8の説明が続きます
    「図7-8 デバイスにランドスケープ・モードで表示されるアセットのプレビュー」の説明
  8. 様々なサイズでアセットをプレビューするには、「スケール」ツール(図7-9を参照)を使用してアセットのプレビューを拡大縮小します。

    図7-9 「スケール」ツール

    図7-9の説明が続きます
    「図7-9 「スケール」ツール」の説明
  9. 別のモバイル・デバイスの画面でアセットがどのように表示されるかプレビューするには
    • デバイス選択パネルが表示されていない場合は、「デバイスの表示/非表示」アイコンをクリックしてパネルを開きます。

      デバイス選択パネルがアセットの右側に開きます。

    • デバイス選択パネルで、モバイル・デバイスを選択します。

      選択したモバイル・デバイスの画面に、アセットのプレビューが表示されます。

  10. 新しいウィンドウでアセットをプレビューするには、「表示」「新しいウィンドウでプレビュー」を選択します。

    新しいブラウザ・ウィンドウが開き、デバイス・アセットに対して構成された正確なピクセル比でアセットのプレビューが表示されます(図7-10を参照)。たとえば、Samsung Galaxy S3デバイス・アセットは720x1280のピクセル比で構成されています。このため、ブラウザ・ウィンドウでのアセットのプレビューは、これと正確に同じピクセル比で表示されます。

    図7-10 新しいブラウザ・ウィンドウに表示されるアセットのプレビュー

    図7-10の説明が続きます
    「図7-10 新しいブラウザ・ウィンドウに表示されるアセットのプレビュー」の説明
  11. 複数のデバイスでアセットをプレビューするには、アセットのツールバーでマルチデバイス・プレビュー・アイコンをクリックするか、メニュー・バーで「表示」マルチデバイス・プレビューを選択します。

    タブにアセットのマルチデバイス・プレビューが表示されます(図7-11を参照)。

    図7-11 すべてのiPhoneデバイスのコンテキストで表示されるアセットのプレビュー

    図7-11の説明が続きます
    「図7-11 すべてのiPhoneデバイスのコンテキストで表示されるアセットのプレビュー」の説明

    表示されるデバイスは、同じデバイス・グループ(この例では、iPhonesデバイス・グループ)に属するものです。単一のデバイス上でアセットのプレビューを最初に行った場合は、その単一のデバイスと同じデバイス・グループに属するデバイスすべてのコンテキストで、「マルチデバイス・プレビュー」にアセットのプレビューが表示されます。

    異なるデバイス・グループのデバイスでアセットをプレビューするには、デバイス・グループ・ドロップダウン・リスト(図7-12を参照)で、下向き矢印アイコンをクリックし、デバイス・グループを選択します。

    図7-12 「デバイス・グループ」のドロップダウン・リスト

    図7-12の説明が続きます
    「図7-12 「デバイス・グループ」のドロップダウン・リスト」の説明

    タブには、選択したデバイス・グループに関連付けられたデバイス上のアセットの「マルチデバイス・プレビュー」が表示されます。

将来の特定の日付にWebサイトに表示されるアセットのプレビュー、異なるページ・レイアウトでのアセットのプレビュー、セグメントを使用するアセットのプレビューなど、アセットのプレビューの詳細は、「アセットのプレビュー」を参照してください。

7.6 モバイル用サイト・ナビゲーションのパブリッシュの承認について

モバイル用サイト・ナビゲーションのパブリッシュの承認は、デフォルトWebサイトのサイト・ナビゲーションの承認と同じです。モバイル用Webサイトをパブリッシュする前に、サイト・ナビゲーション・アセットのパブリッシュを承認する必要があり、それとともにアセットの配置済ページ(サイト・ナビゲーション)および関連したコンテンツ・アセットの承認も必要です。モバイル用Webサイトを承認するには、システム上のデバイス・グループすべての承認も必要です。デバイス・グループは相互に依存しているので、1つのデバイス・グループを承認する際には、依存するデバイス・グループをすべて承認する必要があります。管理システムへのパブリッシュのためにモバイル用サイト・ナビゲーションを承認する場合は、そのモバイル用サイト・ナビゲーションに関連したデバイス・アセットも承認する必要があります。モバイル用サイト・ナビゲーションの承認手順については、「サイト・ナビゲーションのパブリッシュの承認」を参照してください。