15 クライアント側Webサイトの開発

WebCenter Sites REST APIを使用して、クライアント側Webサイトを構築できます。

作業を進める前に、WebCenter Sites集約REST APIサービスに精通しておくことをお薦めします。詳細は、『Oracle WebCenter Sites集約REST APIリファレンス』を参照してください。

次の項で、クライアント側Webサイトの開発について説明します。

• クライアント側Webサイトについて

• REST-avisportsを開発するためのRESTコール: 例

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 WebCenter Sitesのインストールと構成』を参照してください。

この項では、avisportsサンプル・サイトに似たREST-avisportsクライアント側Webサイトの開発に使用されるRESTコールの例を示します。これらの例により、RESTコールを使用した本格的なクライアント側Webサイトの効率的な開発方法に関するアイデアをサイト開発者に示します。REST-avisports Webサイトの開発には、次が含まれます。

• ナビゲーション・メニューの取得

• 「Home」ページの取得

• 追加の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-1のようになります。

図15-1 ナビゲーション・レスポンス

図15-2に示すナビゲーションはレンダリングされています。

図15-2 JSONレスポンスからレンダリングされたナビゲーション

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-3のようになります。

図15-3 「Home」ページをレンダリングするためのJSONレスポンス

図15-4に示すページはレンダリングされています。

図15-4 JSONレスポンスからレンダリングされたavisportsの「Home」ページ

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を使用します。

レスポンスは図15-5のようになります。

図15-5 「Skiing」ページをレンダリングするためのJSONレスポンス

図15-6に示す「Skiing」ページはavisportsサンプルWebサイトでレンダリングされます。

図15-6 JSONレスポンスからレンダリングされた「Skiing」ページ

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-7のようになります。

図15-7 「Skiing」ページに表示される記事をレンダリングするためのJSONレスポンス

図15-8に示す記事はレンダリングされています。

図15-8 JSONレスポンスからレンダリングされた記事

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のようになります。

図15-9 ページ区切りを使用したコレクション・リソースをレンダリングするためのJSONレスポンス

図15-10に示すページはレンダリングされています。

図15-10 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-11のようになります。

図15-11 検索結果をレンダリングするためのJSONレスポンス

図15-12に示すページはレンダリングされています。

図15-12 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-13のようになります。

図15-13 セグメントのないページをレンダリングするためのJSONレスポンス

図15-14に示すページはレンダリングされています。

図15-14 レンダリングされたセグメントのないページ

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のようになります。

図15-15 男性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス

図15-16に示すページはレンダリングされています。

図15-16 男性をターゲットにしたセグメントのあるレンダリングされたページ

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のようになります。

図15-17 女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス

図15-18に示すページはレンダリングされています。

図15-18 女性をターゲットにしたセグメントのあるレンダリングされたページ

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のようになります。

図15-19 男性と女性をターゲットにしたセグメントのあるページをレンダリングするためのJSONレスポンス

図15-20に示すページはレンダリングされています。

図15-20 男性と女性をターゲットにしたセグメントのあるレンダリングされたページ