15 クライアント側Webサイトの開発
高度にインタラクティブなアプリケーションおよびモバイル・サイト向けにWebサイトを開発しますか。サイトは、レスポンシブなアプリケーションや単一ページ・アプリケーションなどにすることができます。Oracle WebCenter Sites APIを使用すると、このようなWebサイトを作成して、クライアント側でレンダリングし、ブラウザ・クライアントで実行できます。
作業を進める前に、WebCenter Sites集約REST APIサービスに精通しておくことをお薦めします。 Oracle WebCenter Sites集約REST APIリファレンスを参照してください。
トピック:
15.1 クライアント側Webサイトについて
REST APIを使用すると、クライアント側でレンダリングし、完全にブラウザ・クライアント内で実行されるWebサイトを構築できます。このようなWebサイトには、単一ページ・アプリケーションが含まれますが、これに限定されるわけではありません。これらのWebサイトは特に、相互作用性の高いアプリケーション(またはWebサイトのポートフォリオ)やモバイル・サイトの役に立ちます。
クライアント側のレンダリングでは、通常、クライアント側ライブラリによってマークアップが生成されますが、これは、クライアントとサーバー間の相互作用をデータ・エレメントのみに制限する上で役に立ちます。この相互作用は通常、JSONの形式で行われます。ユーザーがページ間を移動すると、特定のデータ・コンポーネントに関するリクエストがサーバーに対して実行されると同時に、マークアップを生成するためのJavaScriptがブラウザ内でロードされたままになります。REST APIは通常、サーバー側Java APIの機能をミラーリングします。
WebCenter Sites内のRESTサービスはクライアントに公開され、クライアントはクライアント側フレームワークを使用してデータを取得したりカスタム・サイトを構築したりできるようになります。クライアント側APIを使用すると、サーバー側ロジックまたはJSPを持たないJavaScriptベースのWebアプリケーションを構築できます。これらのAPIは、ページ全体のアセット・データを単一のRESTコールに集約できます。任意のレベルの深さまでのコンテンツ、その関連情報、さらにはWebサイト全体を取得する場合でも、単一のコールで十分です。
RESTサービスに対するレスポンスは潜在的にブラウザ・キャッシュ内にキャッシュできるため、体感的なパフォーマンスを向上させることができます。これらのAPIを使用すると、コンシューマがWebCenter Sitesテンプレートを使用しなくても、サイトからデータを取得し、独自のテンプレートに提示できるようになります。この機能を使用すると、カスタマがWebCenter Sitesをデータ・ストレージとして使用できるようになります。
15.2 REST-avisportsを開発するためのRESTコール: 例
REST-avisportsは、WebCenter Sites REST APIを使用してクライアント側Webサイトの開発を実演するサンプルWebサイトです。このサンプルWebサイトは、WebCenter Sitesインストールのダウンロードに含まれています。
このWebサイトを構成するには、『Oracle Fusion Middleware Oracle WebCenter Sitesのインストールと構成』のREST-avisportsサンプル・サイトの構成およびデプロイに関する項を参照してください。
この項では、avisportsサンプル・サイトに似たREST-avisportsクライアント側Webサイトの開発に使用されるRESTコールの例を示します。これらの例により、RESTコールを使用した本格的なクライアント側Webサイトの効率的な開発方法に関するアイデアをサイト開発者に示します。REST-avisports Webサイトの開発には、次が含まれます。
15.2.1 ナビゲーション・メニューの取得
次のコールは、avisportsサンプルWebサイトで「Home」および「Skiing」ナビゲーション・メニューをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/navigation/Default?assetDepth=0&fields=Page(children,name,id);SiteNavigation(children)&expand=Page
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
レスポンスは次のようになります。
この図に示すナビゲーションはレンダリングされています。
15.2.2 「Home」ページの取得
次のコールは、avisportsサンプルWebサイトで「Home」ページ・アセットをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1327351719456?assetDepth=1&fields=Page(banner,teaserImages,teaserText,bannerText);AVIImage(imageFile,width,height)&expand=Page,AVIImage
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
レスポンスは次のようになります。
この図に示すページはレンダリングされています。
15.2.3 追加のWebサイト・ページの取得
次のコールは、avisportsサンプルWebサイトで「Skiing」ページをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1329326970440?assetDepth=2&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,titleContent1,titleContent2,Assoc_Named_contentList1,Assoc_Named_contentList2);AVIImage(imageFile,smallThumbnail,ClargeThumbnail);YouTube(externalid)&expand=Page,AVIImage,AVIArticle,YouTube
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
レスポンスは次のようになります。
この図に示す「Skiing」ページはavisportsサンプルWebサイトでレンダリングされます。
15.2.4 ページからの記事のコール
次のコールは、avisportsサンプルWebサイトで「Skiing」ページの「Also In the News」セクションに表示される記事をレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/AVIArticle/1328196047241?assetDepth=2&fields=category,author,postDate,subheadline,relatedLinks,relatedStories,relatedImage,body;AVIArticle(id,headline,abstract,relatedImage);AVIImage(imageFile,caption,width,height,sidebarThumbnail)&expand=AVIArticle,AVIImage
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
レスポンスは次のようになります。
この図に示す記事はレンダリングされています。
15.2.5 ページ区切りを使用したコレクション・リソースのコール
次のコールは、avisportsサンプルWebサイトでページ区切りを使用した(ページの下部にナビゲーション・ボタンがある)コレクション・リソースをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/ContentQuery/1395380847207/items?assetDepth=1&fields=AVIArticle(id,headline,abstract,relatedImage);AVIImage(imageFile,smallThumbnail)&expand=AVIArticle,AVIImage&offset=0&limit=8
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
レスポンスは次のようになります。
図15-9 ページ区切りを使用したコレクション・リソースをレンダリングするためのJSONレスポンス
![図15-9の説明が続きます 図15-9の説明が続きます](img/collection_resource_rest2.png)
「図15-9 ページ区切りを使用したコレクション・リソースをレンダリングするためのJSONレスポンス」の説明
この図に示すページはレンダリングされています。
15.2.6 検索リソースのコール
次のコールは、avisportsサンプルWebサイトで基準「How To」の検索結果(コレクション・リソース)をレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/search/sites/avisports/types/AVIArticle/assets?field:name:startswith=How+to
このコールは、問合せパラメータとしてfield name starts with
を使用します。
JSONレスポンスは次のようになります。
この図に示すページはレンダリングされています。
15.2.7 ページ・セグメントのコール
トピック:
15.2.7.1 セグメントのないページのコール
次のコールは、avisportsサンプルWebサイトでセグメントのない「Running」ページをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle
このコールは、問合せパラメータとしてassetDepth
、fields
およびexpand
を使用します。
JSONレスポンスは次のようになります。
この図に示すページはレンダリングされています。
15.2.7.2 特定の訪問者をターゲットにしたセグメントのあるページのコール
次のコールは、avisportsサンプルWebサイトで男性をターゲットにしたセグメントのある「Running」ページをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle&segments=Male
このコールは、問合せパラメータとしてassetDepth
、fields
、expand
およびsegments
を使用します。
JSONレスポンスは次のようになります。
図15-15 男性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス
![図15-15の説明が続きます 図15-15の説明が続きます](img/maleseg_data.png)
「図15-15 男性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス」の説明
この図に示すページはレンダリングされています。
15.2.7.3 異なる訪問者をターゲットにしたセグメントのあるページのコール
次のコールは、avisportsサンプルWebサイトで女性をターゲットにしたセグメントのある「Running」ページをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Pag,AVIImage,AdvCols,AVIArticle&segments=Female
このコールは、問合せパラメータとしてassetDepth
、fields
、expand
およびsegments
を使用します。
JSONレスポンスは次のようになります。
図15-17 女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス
![図15-17の説明が続きます 図15-17の説明が続きます](img/femaleseg_data.png)
「図15-17 女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス」の説明
この図に示すページはレンダリングされています。
15.2.7.4 追加の訪問者をターゲットにしたセグメントのあるページのコール
次のコールは、avisportsサンプルWebサイトで男性と女性の両方をターゲットにしたセグメントのある「Running」ページをレンダリングします。
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle&segments=Male,Female
このコールは、問合せパラメータとしてassetDepth
、fields
、expand
およびsegments
を使用します。
JSONレスポンスは次のようになります。
図15-19 男性と女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス
![図15-19の説明が続きます 図15-19の説明が続きます](img/male_femalesegs_data.png)
「図15-19 男性と女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス」の説明
この図に示すページはレンダリングされています。