| Oracle® Fusion Middleware Oracle WebCenter Sitesでの開発 12c (12.2.1.1) E77292-01 |
|
 前 |
 次 |
作業を進める前に、WebCenter Sites集約REST APIサービスに精通しておくことをお薦めします。詳細は、『Oracle WebCenter Sites集約REST APIリファレンス』を参照してください。
次の項で、クライアント側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をデータ・ストレージとして使用できるようになります。
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サイトの開発には、次が含まれます。
次のコールは、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-2に示すナビゲーションはレンダリングされています。
次のコールは、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-4に示すページはレンダリングされています。
次のコールは、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-6に示す「Skiing」ページはavisportsサンプルWebサイトでレンダリングされます。
次のコールは、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-8に示す記事はレンダリングされています。
次のコールは、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に示すページはレンダリングされています。
この項には次のトピックが含まれます:
次のコールは、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-14に示すページはレンダリングされています。
次のコールは、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に示すページはレンダリングされています。
次のコールは、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に示すページはレンダリングされています。
次のコールは、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に示すページはレンダリングされています。
