高度にインタラクティブなアプリケーションおよびモバイル・サイト向けにWebサイトを開発しますか。サイトは、レスポンシブなアプリケーションや単一ページ・アプリケーションなどにすることができます。Oracle WebCenter Sites APIを使用すると、このようなWebサイトを作成して、クライアント側でレンダリングし、ブラウザ・クライアントで実行できます。
作業を進める前に、WebCenter Sites集約REST APIサービスに精通しておくことをお薦めします。 Oracle WebCenter Sites集約REST APIリファレンスを参照してください。
トピック:
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 Fusion Middleware Oracle WebCenter Sitesのインストールと構成』のREST-avisportsサンプル・サイトの構成およびデプロイに関する項を参照してください。
この項では、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
を使用します。
レスポンスは次のようになります。
この図に示すナビゲーションはレンダリングされています。
次のコールは、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
を使用します。
レスポンスは次のようになります。
この図に示すページはレンダリングされています。
次のコールは、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サイトでレンダリングされます。
次のコールは、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
を使用します。
レスポンスは次のようになります。
この図に示す記事はレンダリングされています。
次のコールは、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レスポンス
この図に示すページはレンダリングされています。
次のコールは、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レスポンスは次のようになります。
この図に示すページはレンダリングされています。
トピック:
次のコールは、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レスポンスは次のようになります。
この図に示すページはレンダリングされています。
次のコールは、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レスポンス
この図に示すページはレンダリングされています。
次のコールは、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レスポンス
この図に示すページはレンダリングされています。
次のコールは、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レスポンス
この図に示すページはレンダリングされています。