Bootstrapテーマに基づいたWebCenter Portalページ・テンプレートの作成

Size: px

Start display at page:

Download "Bootstrapテーマに基づいたWebCenter Portalページ・テンプレートの作成"

ありかつてらわ
5 years ago
Views:

1 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成 Oracle ホワイトペーパー 2016 年 4 月

2 目次はじめに 2 Bootstrap テーマをダウンロードする 3 Web アプリケーションを作成およびデプロイして Bootstrap テーマのリソースをホストする 3 新しいポータルページテンプレートを作成する 4 Bootstrap テーマのコンポーネントと機能をページテンプレートに追加する 4 ポータル固有のアイテムをページテンプレートに追加する 7 ポータルのアイコンおよび名前 8 ポータルのリンク 8 ポータルの検索または言語 8 ポータルのナビゲーション 9 ページテンプレートに新しいスキンを作成する 9 ページテンプレートのコンポーネントとタスクフローのスタイルを設定する 10 例 11 例 1 11 静的な Bootstrap テーマ HTML を WebCenter Portal ページテンプレートに追加する 11 例 2 12 Bootstrap テーマを使用してポータルのアイコン名前および説明のスタイルを設定する 12 例 3 14 jquery ADF スキン font-awesome アイコン Bootstrap テーマの CSS を使用してポータルログインリンクのスタイルを設定する 14 WebCenter Portal でページテンプレートをテストする 16 1 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

3 はじめにページテンプレートではポータルページでの共通領域の構造が提供されますページテンプレートによって個々のページやページグループをユーザーの画面にどのように表示するかが定義されるためポータルページの構造とレイアウトに一貫性を持たせることができますページテンプレートを変更するとそのテンプレートを参照するすべてのページでその変更が自動的に継承されます Bootstrap は現在応答性の高い最新のモバイルファーストの Web ページおよびサイトの開発にもっともよく使用されている HTML5 フレームワーク CSS3 フレームワークおよび JavaScript フレームワークの 1 つとなっています Bootstrap テーマを使用すると Web サイトの最初のスタイル設定とスキン作成にかかる開発期間を節約できるためポータルページに応答性の高いページテンプレートを短期間で作成できます数千もの利用可能な Bootstrap テーマから選択しポータル固有のニーズに合わせてページテンプレートをカスタマイズできます WebCenter Portal にはモザイクとユニコーンの 2 つの組込みの Bootstrap テーマページテンプレートが含まれていますこれらの組込みのページテンプレートを開始点として使用して WebCenter Portal ページテンプレートを作成できますまたは任意の Bootstrap マーケットプレースサイトで Bootstrap テーマを購入しそのテーマを使用してカスタムの WebCenter Portal ページテンプレートを作成することもできますこのホワイトペーパーでは Bootstrap テーマを使用するページテンプレートの作成方法を説明しますこのプロセスで実行するおもな手順は次のとおりです 1. Bootstrap テーマをダウンロードする 2. Web アプリケーションを作成およびデプロイして Bootstrap テーマのリソースをホストする 3. 新しいポータルページテンプレートを作成する 4. Bootstrap テーマのコンポーネントと機能をページテンプレートに追加する 5. ポータル固有のアイテムをページテンプレートに追加する 6. ページテンプレートのスキンを作成する 7. ページテンプレートのコンポーネントとタスクフローのスタイルを設定する 2 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

4 Bootstrap テーマをダウンロードする Bootstrap テーマという名前をすでに知っており新しいポータルページテンプレートに使用したいという方もいればどのようなものなのか確認したいという方もいるでしょう Bootstrap テーマを検索してダウンロードするには次の手順を実行します 1. 商用の Bootstrap テーマプロバイダーからポータルページテンプレートに使用するテーマを購入してダウンロードします 2. ローカルコンピュータのフォルダにダウンロードした Bootstrap テーマを解凍しますディレクトリには HTML ページと CSS/JavaScript ファイルが配置されますディレクトリ構造は次のようになります /HTML /assets /css /img /plugins /js /php /ajax Web アプリケーションを作成およびデプロイして Bootstrap テーマのリソースをホストする JavaScript イメージ CSS など Bootstrap テーマの Web リソースのサイズは 40MB 程度になる可能性がありますページテンプレートのアーカイブのサイズを小さく保つとともに Bootstrap リソースがすばやく機能するようにこれらのリソースを CDN に配置するか Web サーバーの静的な HTML ディレクトリに配置できますまたページテンプレートの作成時に使用できる別のアプローチとしてこれらのリソースを Web アプリケーションに配置しこのアプリケーションをアプリケーションサーバーにデプロイするというアプローチもあります ADF Fusion Web アプリケーションテンプレートを使用してアプリケーションを作成できます Bootstrap テーマのリソースはダウンロードした zip ファイルの /HTML/assets ディレクトリに配置されるためこのディレクトリを新しく作成したアプリケーションの ViewController プロジェクトの public_html ディレクトリにそのままコピーできますアプリケーションをアプリケーションサーバーにデプロイしたら次の URL 形式を使用して Bootstrap テーマのアセットを参照できます root>/html/assets/ 3 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

5 ここで <host>:<port> は Web アプリケーションがデプロイされているホストとポートで <context root> は Web アプリケーションに指定されているコンテキストルートですこのホワイトペーパーに示されているサンプルコードではアプリケーションのコンテキストルートは /bootstrap に設定されています新しいポータルページテンプレートを作成するページテンプレートを WebCenter Portal で作成できますが編集機能が限られます JDeveloper を使用してポータルのページテンプレートを作成することを推奨します作成が完了したらページテンプレートを WebCenter Portal( ポータルサーバー ) に直接公開してすぐに使用したりテストしたりできますまたはページテンプレートをファイルにエクスポートし後でそのページテンプレートを WebCenter Portal にアップロードすることもできます JDeveloper で新しいページテンプレートを作成するには Oracle JDeveloper による WebCenter Portal アセットとカスタムコンポーネントの開発のページテンプレートの作成を参照してください Bootstrap テーマのコンポーネントと機能をページテンプレートに追加するダウンロードした Bootstrap テーマから必要なコンポーネントと機能を組み込むには次の手順を実行します 1. JDeveloper で作成したページテンプレートを編集します Oracle JDeveloper による WebCenter Portal アセットとカスタムコンポーネントの開発のページテンプレートの編集を参照してください 2. ページテンプレートファイルの先頭の component セクションに content ファセットを追加します ( このファセットがまだ存在しない場合 ) たとえば次のようにします <component xmlns=" <display-name>template Display Name</display-name> <facet> <facet-name>content</facet-name> </facet> </component> 3. ページテンプレートファイルのメインコンテンツ領域にページテンプレートの基本構造のコーディングを追加します ( この項の例については組込みのモザイクページテンプレートまたはユニコーンページテンプレートを参照してください ) たとえば次のようにします <af:pagetemplatedef var="attrs"> <af:xmlcontent> <component xmlns=" <display-name>template</display-name> <facet> <description>the content of the page goes here</description> <display-name>page Content</display-name> <facet-name>content</facet-name> 4 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

6 </facet> </component> </af:xmlcontent> <af:panelgrouplayout id="mainpglwrapper" layout="default" styleclass="wcnoneditablearea"> <meta content="width=device-width, initial-scale=1" name="viewport"/>       <div class="wcsitetemplateroot" id="wrapper">  <div class="wrapper">  <div class="header"> <div class="container">       </div>   </div>    </div>    </div>   </af:pagetemplatedef> 注 :font-awesome Bootstrap および jquery の CSS ファイルと JavaScript ファイルは WebCenter Portal にすでに含まれているためコピーやダウンロードを行う必要はありません 5 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

7 4. ページテンプレートファイルの CSS セクションに Bootstrap テーマの CSS 参照を追加しますたとえば次のようにします   <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=open+sans:400,300,600&subset=cyrillic,latin'/>  <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/css/style.css"/>  <link rel="stylesheet" href="/bootstrap/unify/html/assets/css/headers/headerdefault.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/css/footers/footer-v1.css"/>  <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/animate.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/line-icons/lineicons.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/fontawesome/css/font- awesome.min.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/parallaxslider/css/parallax-slider.css"/> <link rel="stylesheet" href="/bootstrap/unify/html/assets/plugins/owl-carousel/owlcarousel/owl.carousel.css"/>  <link rel="stylesheet" href="/bootstrap/unify/html/assets/css/custom.css"/>  5. ページテンプレートファイルの JavaScript セクションに Bootstrap テーマの JavaScript 参照を追加しますたとえば次のようにします   <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/jquery/jquery.min.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/jquery/jquery-migrate.min.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/bootstrap/js/bootstrap.min.js"></script>  <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/backto-top.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/smoothscroll.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/parallax- slider/js/modernizr.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/parallaxslider/js/jquery.cslider.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/plugins/owlcarousel/owl-carousel/owl.carousel.js"></script>!-- JS Customization --> <script type="text/javascript" src="/bootstrap/unify/html/assets/js/custom.js"></script>  6 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

8 <script type="text/javascript" src="/bootstrap/unify/html/assets/js/app.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/js/plugins/owlcarousel.js"></script> <script type="text/javascript" src="/bootstrap/unify/html/assets/js/plugins/parallax-slider.js"></script> <script type="text/javascript"> jquery(document).ready(function () { App.init(); OwlCarousel.initOwlCarousel(); ParallaxSlider.initParallaxSlider(); }); </script>  6. ダウンロードした Bootstrap テーマ HTML ファイルから必要なページ要素の HTML コードスニペットをコピーして新しいページテンプレートファイル (jspx または jsf) に貼り付けますページ要素にロゴタイトル説明ナビゲーションまたはフッターを含めることができます例 1: 静的な Bootstrap テーマ HTML を WebCenter Portal ページテンプレートに追加するを参照してください 7. WebCenter Portal でテンプレートをテストしダウンロードした Bootstrap テーマのスタイルを確認します WebCenter Portal でページテンプレートをテストするを参照してくださいポータル固有のアイテムをページテンプレートに追加するダウンロードした Bootstrap テーマファイルから必要なページ要素の HTML コードスニペットを新しいページテンプレートにコピーしたら ADF Faces コンポーネントで構築した WebCenter Portal 固有のコンテンツを使用するようにこれらのページテンプレートを編集できます Bootstrap テーマのページ要素を ADF Faces コンポーネントに置き換えるとページテンプレートで次の要素についてポータルから取得した動的なコンテンツを公開できます» ポータルのアイコン名前または説明» ポータルのリンク» ポータルの検索または言語» ポータルのナビゲーション注 : この項に示されているコードスニペットの完全なソースについては組込みのモザイクページテンプレートおよびユニコーンページテンプレートを参照してください 7 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

9 ポータルのアイコンおよび名前ポータル設定で指定したポータルのアイコンおよび名前をページテンプレートに追加する ( すべてをポータルホームページにリンクさせる ) には次の手順を実行します 1. 次の af:switcher プレースホルダのコードスニペットをページテンプレートファイル (jspx または jsf) にコピーします <af:switcher facetname="#{wcappcontext.currentscope.default? 'defaultlogo' : 'spacelogo'}"> </af:switcher> ページの例 2 を参照し選択した Bootstrap テーマのスキンを使用するようにこのプレースホルダコードを変更しますポータルのリンク管理お気に入りポータルプロファイルプリファレンスログインログアウト自動登録ヘルプなどのリンクをページテンプレートに追加するには次の手順を実行します 1. 次の wcdc ユーティリティタグプレースホルダのコードスニペットをページテンプレートファイル (jspx または jsf) にコピーします次にログインリンクの例を示します <wcdc:spacesaction id="wcloginlink" shortdesc="#{uib_o_w_w_r_webcenter.global_link_login}" text="#{uib_o_w_w_r_webcenter.global_link_login}" type="login"/> ページの例 3 を参照し選択した Bootstrap テーマのスキンを使用するようにこのプレースホルダコードを変更しますポータルの検索または言語検索タスクフローまたは言語タスクフローをページテンプレートに追加するには次の手順を実行します 1. 次の af:region コードスニペットをページテンプレートファイル (jspx または jsf) にコピーします <af:region id="searchbox" value="#{bindings.localtoolbarsearch.regionmodel}"/> <af:region id="lang" value="#{bindings.languageselectorregion.regionmodel}" styleclass="text"/> 2. 検索タスクフロー定義および言語タスクフロー定義をページテンプレート pagedef xml ファイルに追加します <taskflow activation="deferred" id="localtoolbarsearch" </taskflow> <taskflow Refresh="ifNeeded" activation="conditional" active="#{!security.authenticated}" id="languageselectorregion" </taskflow> ページの例 2 および 12 ページの例 3 で説明しているのと同じ方法を使用して選択した Bootstrap テーマのスキンを使用するようにこのプレースホルダコードを変更します 8 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

10 ポータルのナビゲーションポータルのナビゲーションをページテンプレートに追加するには次の手順を実行します 1. 次の af:iterator コードスニペットをページテンプレートファイル (jspx または jsf) にコピーします <af:iterator id="i1" var="side_menu_item" value="#{navigationcontext.defaultnavigationmodel.listmodel ['startnode=/, includestartnode=false']}"> </af:iterator> 2. 必要に応じて 11 ページの例 2 および 12 ページの例 3 で説明しているのと同じ方法を使用して選択した Bootstrap テーマのスキンを使用するようにこのプレースホルダコードを変更しますページテンプレートに新しいスキンを作成する Bootstrap テーマの CSS セレクタは非常に一般的であるため ADF Faces コンポーネントのスタイル設定に望ましくない影響が生じる可能性があります Bootstrap の CSS スタイルを変更する代わりにカスタムスキンを作成し一部の ADF Faces コンポーネントの既存のスタイル設定をリストアしたり Bootstrap テーマのスタイルに合わせて既存の UI コンポーネントのスタイル設定を変更したりできますスキンの作成および編集には CSS の知識が必要でありスキンをページテンプレートで使用する方法を把握している必要があります JDeveloper を使用してポータルページテンプレートのスキンを作成することを推奨します作成が完了したらスキンを WebCenter Portal( ポータルサーバー ) または特定のポータルに直接公開してすぐに使用したりテストしたりできますまたはスキンをファイルにエクスポートし後でそのスキンを WebCenter Portal にアップロードすることもできます Bootstrap テーマのページテンプレートスキンの場合新しいページテンプレートの開始点として WebCenter Portal Alta 組込みスキン ( 共有アセット内 ) を拡張するかまたはすべての WebCenter Portal Alta スキンセレクタをコピーしますこれによりポータルコンポーネントに対してデフォルトポータル Alta の外観が設定されますまたポータルビルダーが適切に動作するためにはカスタムスキンが WebCenter Portal Alta スキンに基づいていることが重要です JDeveloper で新しいスキンを作成するには Oracle JDeveloper による WebCenter Portal アセットとカスタムコンポーネントの開発のスキンの作成を参照してくださいスキンをコピーする方法について詳しくは Oracle Fusion Middleware Oracle WebCenter Portal でのポータルの構築のアセットのコピーを参照してください 9 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

11 ページテンプレートのコンポーネントとタスクフローのスタイルを設定するページテンプレートのコンポーネントとタスクフローのスタイルを設定するには次の手順を実行します 1. JDeveloper で作成したスキンを編集します Oracle JDeveloper による WebCenter Portal アセットとカスタムコンポーネントの開発のスキンの編集を参照してください 2. 必要に応じてスキンにセレクタを追加して管理リンクポータル名アイコンなどの ADF Faces コンポーネントやページコンテンツのユーザーインタフェース要素のスタイルを設定します 3.( オプション ) ページテンプレートに追加した CSS スタイルを新しいスキンにコピーしますコピーしたらこれらの CSS スタイルをページテンプレートから削除し実行時にポータルスキンエディタでさらに簡単に編集できます 4. 管理リンクなどスタイルを直接設定するのが難しいポータルユーザーインタフェース要素の場合は jquery を使用して要素を一意の ID で特定し要素にスタイルクラスを適用してスタイル設定を調整しますたとえば次のコードは jquery を使用してポータルユーザーインタフェース要素のスタイルを設定しているユニコーンページテンプレートを示しています <script type="text/javascript"> //Script block if (window.addeventlistener) { /* Modern browsers */ window.addeventlistener("load", onload, false) } else if (window.attachevent) { /* IE */ window.detachevent("onload", onload) window.attachevent("onload", onload) } else { window.onload = onload } function onload() { //Work around for styling ADF elements and overriding the ADF default styles. $('body').addclass('#{attrs.themetype}'); 10 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

12 //Use Jquery to style portal admin link components such as portals, favorites, administration to use font-awesome icon and bootstrap css styles $('#portals.ptext span').html('<i class="icon fa fa-users"></i> <span class="text hidden-xs1 hidden sm1"> #{uib_o_w_s_r_spaces.label_communities}</span>') $('#favb.ftext span').html('<i class="icon fa fa-heart"></i> <span class="text hidden-xs1 hidden-sm1"> #{uib_o_w_w_r_webcenter.label_favorites}</span>') $('#wcadmin.adtext span').html('<i class="icon fa fa-gears"></i> <span class="text hidden-xs1 hidden-sm1"> #{uib_o_w_w_r_webcenter.global_link_administration}</span>'); } jquery を使用した他のスタイル設定例については例 3:jQuery ADF スキン font- awesome アイコン Bootstrap テーマの CSS を使用してポータルログインリンクのスタイルを設定する (12 ページ ) を参照してください注 : デフォルトではポータルスキンは圧縮されます ADF Faces コンポーネントに styleclass が適用されている場合 styleclass は圧縮される可能性があります HTML コンポーネントに同じ styleclass が適用されている場合 styleclass は圧縮されませんそのためこの styleclass に関連するスキンセレクタが別の親 styleclass に依存する場合は親の styleclass と子の styleclass の両方を ADF Faces コンポーネントに適用するかまたは両方を ADF Faces 以外のコンポーネントに適用することを推奨しますこうするとダウンロードした CSS ファイルへのリンク参照を使用する場合これらのスタイルは圧縮されません例 // Javascript force onload if it is not loaded, this is needed in case of PPR reloading --> if (!$('body').hasclass('#{attrs.themetype}')) { onload(); } </script> 以下の組込みのモザイクページテンプレートの例は Bootstrap font-awesome および jquery の各ライブラリを使用してページテンプレートの ADF Faces コンポーネントとタスクフローにスタイルを設定する方法を示していますこの方法を使用すると選択した Bootstrap テーマに従ってスタイルを設定しページテンプレートのポータル設定で指定した動的な値を公開できます例 1 静的なBootstrapテーマHTMLをWebCenter Portalページテンプレートに追加する 1. ダウンロードした Bootstrap テーマ HTML ファイルからアイコン名前および説明の HTML コードスニペットを対象のページテンプレートファイル (jspx または jsf) にコピーしますたとえば組込みのモザイクページテンプレートのこれらのページ要素は次のようになります 11 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

13  <a class="navbar-brand" href="index.html">  <i class="fa fa-th-large"></i>  The Mosaic  <span class="hidden-sm">business Template</span> </a> 2. ページテンプレートをテストして (14 ページの WebCenter Portal でページテンプレートをテストするを参照 ) 次のスクリーンショット例に示すように HTML コードスニペットがレンダリングされることを確認しますブラウザ画面のサイズが小さい場合は Bootstrap テーマの hidden-sm スタイルのために説明が非表示になりますこの例では WebCenter Portal ページテンプレートで Bootstrap テーマのスタイル設定を公開する方法を示していますただしページ要素は静的であり Bootstrap テーマに固有です次の例では Bootstrap テーマのスタイル設定を WebCenter Portal ページテンプレートの ADF Faces コンポーネントに適用する方法を示していますつまりページテンプレートのデフォルトのスタイル設定ではなく Bootstrap テーマのスタイル設定を使用してページテンプレートで動的なポータル設定を公開できます例 2 Bootstrap テーマを使用してポータルのアイコン名前および説明のスタイルを設定する 1. Bootstrap テーマの HTML コードスニペット ( 例 1 で使用 ) 内のスタイルタグを特定します 12 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

14  <a class="navbar-brand" href="index.html">  <i class="fa fa-th-large"></i>  The Mosaic  <span class="hidden-sm">business Template</span> </a> 2. ページテンプレートファイルで次の例に示すように Bootstrap テーマのスタイルタグを使用してポータル設定に定義されているポータルのアイコン名前および説明にスタイルを設定するように af:switcher プレースホルダ領域 ( ポータル固有のアイテムをページテンプレートに追加するのポータルのアイコン名前説明で使用 6 ページ ) を変更します  <div class="navbar-brand"> <af:switcher facetname="#{wcappcontext.currentscope.default? 'defaultlogo' : 'spacelogo'}"> <f:facet name="spacelogo"> <af:golink destination="#{boilerbean.globallogouriinspace}" disabled="#{changemodebean.ineditmode or servicectx.scope.spacetemplate}" id="splggl2">  <af:outputtext value="#{servicectx.scope.spacetemplate? WCTruncator[spaceTemplateManager.template [WCAppContext.currentScope.name].GSMetadata.displayName]['10'] :!(empty spacecontext.currentspace)? WCTruncator[spaceContext.space [servicectx.scope.name].gsmetadata.displayname]['10'] : WCTruncator[WCAppContext.application.applicationConfig.title]['10']}"/>  <af:outputtext inlinestyle="padding-left:5pxp styleclass="hidden-sm" value="#{servicectx.scope.spacetemplate? WCTruncator[spaceTemplateManager.template [WCAppContext.currentScope.name].GSMetadata.description]['10'] :! (empty spacecontext.currentspace)? WCTruncator[spaceContext.space [WCAppContext.currentScope.name].GSMetadata.description]['10'] : ''}"/> </af:golink> </f:facet> </af:switcher> </div> 13 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

15 3. ページテンプレートをテストして (14 ページの WebCenter Portal でページテンプレートをテストするを参照 ) Bootstrap テーマのスタイル設定がポータルコンポーネントに適用されていることを確認します次のスクリーンショットは WebCenter Portal ページテンプレートファイルに適用された組込みのモザイクページテンプレートのスタイルを示していますこの例ではポータル設定で表示名を "Portal Name" と定義しポータルの説明を "Portal Description" と定義しロゴは表示されているグラフィックで定義していますブラウザ画面のサイズが小さい場合は Bootstrap テーマの hidden-sm スタイルのために説明が非表示になります 4. Bootstrap テーマのスタイル設定が ADF Faces コンポーネントで有効にならない場合 ADF およびポータルのデフォルトスキン動作によってスタイル設定が上書きされている可能性がありますこの場合スキンファイルの ADF スキンを使用することが必要になる可能性がありますたとえばリンクにカーソルが置かれたときリンクにフォーカスがあるときまたはリンクがアクセスされたときにポータル名リンクを下線なしの白にするにはスキンファイルに次のスタイルコードを追加します navbar-dark.navbar-brand a:hover, navbar-dark.navbar-brand a:focus navbar-dark.navbar-brand a:visited{ } color:#fff; text-decoration:none; 例 3 jquery ADF スキン font-awesome アイコン Bootstrap テーマの CSS を使用してポータルログインリンクのスタイルを設定する 1. ダウンロードした Bootstrap テーマ HTML ファイルからログインリンクと font-awesome アイコンの HTML コードスニペットを対象のページテンプレートファイル (jspx または jsf) にコピーしますたとえば組込みのモザイクページテンプレートのこれらの要素は次のようになります <a href="sign-in.html" class="pull-right"><i class="fa fa-sign-in"></i> / 14 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

16 2. ページテンプレートをテストして (14 ページの WebCenter Portal でページテンプレートをテストするを参照 ) 次のスクリーンショット例に示すように HTML コードスニペットがレンダリングされることを確認します 3. Bootstrap テーマの HTML コードスニペット内のスタイルタグを特定します <a href="sign-in.html" class="pull-right"><i class="fa fa-sign-in"></i> 4. ページテンプレートファイルで次の例に示すように jquery ADF スキン font-awesome アイコン Bootstrap テーマの CSS を使用してポータルログインリンクのスタイルを設定するように wcdc プレースホルダ領域 ( ポータル固有のアイテムをページテンプレートに追加するのポータルのリンクで使用 6 ページ ) を変更します変更前 <wcdc:spacesaction id="wcloginlink" shortdesc="#{uib_o_w_w_r_webcenter.global_link_login}" text="#{uib_o_w_w_r_webcenter.global_link_login}" type="login"/> 変更後  <div class="pull-right WCPortalAdminLinks" id="user-nav"> <wcdc:spacesaction id="wcloginlink" inlinestyle="white-space:nowrap" shortdesc="#{uib_o_w_w_r_webcenter.global_link_login}" styleclass="litext" text="#{uib_o_w_w_r_webcenter.global_link_login}" type="login"/> /di 5. ( オプション )text 値と shortdesc 値を変更してリンクにカーソルが置かれたときの目的のリンクラベル ("Login" など ) とヒントテキストを指定します 6. Bootstrap テーマのスタイルを CSS またはスキンファイルに追加しますたとえば次のようにします WCPortalAdminLinks a,.wcportaladminlinks a:active, WCPortalAdminLinks a:visited,.wcportaladminlinks a:hover { color: #FFFFFF!important; font-size: 12px; } 7. wcdc コンポーネントやスタイルを直接設定するのが難しい要素が含まれたタスクフローの場合は jquery を使用して要素を一意の ID で特定し要素にスタイルクラスを適用してスタイルを調整しますたとえば Login テキストの前の font-awesome アイコンおよび Bootstrap テーマのスタイルは wcdc コンポーネントの属性で直接渡すことはできませんただし jquery を使用して wcdc コンポーネント内の Login 要素を特定し実行時のページレンダリング中に font-awesome と Bootstrap テーマの CSS HTML コードスニペットを挿入できますヒント : ターゲットの HTML タグを確認するには Firebug などのブラウザツールを使用しますページテンプレートファイルで次の組込みのモザイクページテンプレートの例に示すように jquery コードを使用して font-awesome アイコンおよびスタイル設定を Login リンクの 15 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

17 前に挿入するように JavaScript プレースホルダ領域 ( ポータル固有のアイテムをポータル固有のアイテムをページテンプレートに追加するで使用 6 ページ ) を変更します <script type="text/javascript"> function onload() { $('#user-nav.litext span').html('<i class="icon fa fa-sign-in"> </i><span class="text hidden-xs1 hidden-sm1"> #{uib_o_w_w_r_webcenter.global_link_login}</span>'); } </script> 8. ページテンプレートをテストし (14 ページの WebCenter Portal でページテンプレートをテストするを参照 ) 次のスクリーンショット例に示すように font-awesome アイコン (jquery の HTML タグ <i class="icon fa- sign-in"> で生成 ) を使用して Login リンクがレンダリングされることを確認しますブラウザ画面のサイズが小さい場合は hidden-sm1 スタイルのために Login テキストが非表示になってアイコンのみ表示されますこの hidden-sm1 スタイルは Bootstrap テーマの hiddensm スタイルを変更した拡張版のポータルスタイルです WebCenter Portal でページテンプレートをテストするページテンプレートやスキンの変更など開発時にポータルに変更を加えたら WebCenter Portal でポータルを繰り返して公開およびテストし結果を表示できますページテンプレートおよびスキンを WebCenter Portal に共有アセットとして公開する手順または特定のポータルにポータルアセットとして公開する手順については Oracle JDeveloper による WebCenter Portal アセットとカスタムコンポーネントの開発の WebCenter Portal アセットの公開を参照してください WebCenter Portal でポータルをテストする際次のことを確認してください» ナビゲーション» さまざまなデバイスでの応答性» ポータル固有のコンポーネントとリンク 16 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成

18 Oracle Corporation, World Headquarters 500 Oracle Parkway Redwood Shores, CA 94065, USA 海外からのお問い合わせ窓口電話 : ファクシミリ : CONNECT WITH US blogs.oracle.com/oracle facebook.com/oracle twitter.com/oracle oracle.com Copyright 2016, Oracle and/or its affiliates.all rights reserved. 本文書は情報提供のみを目的として提供されており記載内容は予告なく変更されることがあります本文書はその内容に誤りがないことを保証するものではなくまた口頭による明示的保証や法律による黙示的保証を含め商品性ないし特定目的適合性に関する黙示的保証および条件などのいかなる保証および条件も提供するものではありませんオラクルは本文書に関するいかなる法的責任も明確に否認し本文書によって直接的または間接的に確立される契約義務はないものとします本文書はオラクル社の書面による許可を前もって得ることなくいかなる目的のためにも電子または印刷を含むいかなる形式や手段によっても再作成または送信することはできません Intel および Intel Xeon は Intel Corporation の商標または登録商標ですすべての SPARC 商標はライセンスに基づいて使用される SPARC International, Inc. の商標または登録商標です AMD Opteron AMD ロゴおよび AMD Opteron ロゴは Advanced Micro Devices の商標または登録商標です UNIX は The Open Group の登録商標です 0416 Bootstrap テーマに基づいた WebCenter Portal ページテンプレートの作成 2016 年 4 月著者 :Ingrid Snedecor Doris Zhang Ken Young Savita Thakur 共著者 :Igor Polyakov Anup Chatterjee

Microsoft Windows向けOracle Database 12cでのOracleホーム・ユーザーの導入

Microsoft Windows向けOracle Database 12cでのOracleホーム・ユーザーの導入 Oracle ホワイトペーパー 2013 年 7 月 Microsoft Windows 向け Oracle Database 12c での Oracle ホームユーザーの導入はじめに Oracle Database 12c Release 1(12.1) 以降では Microsoft Windows 上のOracle Databaseでインストール時に指定したOracleホームユーザーの使用がサポートされています