Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{anchor:top}
{toc: class=contents}

h2. 概要
{styleclass: Class=topLink} [ページトップ|#top] {styleclass}
標準のYellowfinログインページのカスタマイズは次の2つの方法で実行できます。
# *シンプル* \- イメージの置き換えおよび標準のログインページに使用されているCSSファイルの変更を伴います。カスタムページを記述する必要はありません。一般的に、このオプションは簡易的な{_}モックアップ{_}に使用され、スタイルが変更された最終版としては使用されません。
# *完全* \- 標準のページと置き換えるカスタムの.jspファイルの記述を伴います。この方法は高度な技術的知識および時間を必要とします。


h2. シンプル
{styleclass: Class=topLink} [ページトップ|#top] {styleclass}
一時的なカスタムログインページを簡易的に作成する場合、Yellowfinの「ROOT」ディレクトリ({{Yellowfin\appserver\webapps\ROOT\images}})で以下のイメージをカスタマイズしたバージョンと置き換えます。
# logo.png
# yellowfin_welcome.png
# logoFooter.png
# nav_bkg.png

これらのイメージを置き換えたら、新しいイメージが表示されるようにブラウザーのキャッシュをクリアする必要があります。

{color:#cc0000}{*}注意:*{color}置き換えとして使用するイメージは、上記のファイルと同じ名前にしてページで使用されるようにする必要があります。

h3. 例

|| コンポーネント \\ || 標準ログイン \\ || カスタムログイン ||
| ページ全体 | !01standardLogin.png|thumbnail,border=1! | !02customLogin.png|thumbnail,border=1! |
| logo.png | !logo.png! | !clogo.png! |
| yellowfin_welcome.png | !yellowfin_welcome.png|thumbnail,border=1! | !cyellowfin_welcome.png|thumbnail,border=1! |
| logoFooter.png | !logoFooter.png! | !clogoFooter.png! |
| nav_bkg.png | !nav_bkg.png! | !cnav_bkg.png! |


h2. 完全
{styleclass: Class=topLink} [ページトップ|#top] {styleclass}
完全に新規な状態から開始するのではなく、Yellowfinインストールの開発例ディレクトリ({{Yellowfin\development\examples\index_mi.jsp}})にある現行のログインページjspのコピーを使用できます。このコピーを使用してカスタムログインページの作成を開始できます。このコピーにはログイン自身に必要なJavascriptが含まれ、必要に応じてレイアウトを変更できます。

h3. 作成方法

初めに、ログインファイルの名前を{{{}index_mi.jsp{}}}以外のファイル名に変更します(例:{{login_companyName.jsp}})。次に、このログインファイルをYellowfinの「ROOT」ディレクトリ({{Yellowfin\appserver\webapps\ROOT}})に配置します。

Yellowfinが標準オプションではなくこのファイルを使用できるようにするには、Yellowfinが{*}実行していない{*}状態で以下の手順を実行する必要があります。
# Yellowfinを終了します。
# {{Yellowfin\appserver\webapps\ROOT\WEB-INF{}}}内に存在する{{{}web.xml{}}}ファイルを見つけて次の場所を特定します。
{code:language=html/xml}
<!-- The Welcome File List -->

  <welcome-file-list>
    <welcome-file>index_mi.jsp</welcome-file>
  </welcome-file-list>
{code}
## {{welcome-file{}}}ノードを、新しいログインページの名前を参照するように更新します。例:
{code:language=html/xml}
<!-- The Welcome File List -->

  <welcome-file-list>
    <welcome-file>login_companyName.jsp</welcome-file>
  </welcome-file-list>
{code}
## {{web.xml{}}}への変更を保存します。
# 新しいログインページを編集します。{{index_mi.jsp{}}}への参照をすべて特定し、新しいログインページ名に更新します。例:
## 次の参照を更新します。
{code:language=javascript}
<input type="hidden" name="<%=Const.INDEX_PAGE%>" value="/index_mi.jsp" />
{code}
これを、次のように更新します。
{code:language=javascript}
<input type="hidden" name="<%=Const.INDEX_PAGE%>" value="/login_companyName.jsp" />
{code}
## また、次の参照も更新します。
{code:language=javascript}
Const.INDEX_PAGE +"=/index_mi.jsp"
{code}
これを、次のように更新します。
{code:language=javascript}
Const.INDEX_PAGE +"=/login_companyName.jsp"
{code}
## ログインページへの変更を保存します。
# ユーザーがログアウトした場合に、初回のログインと同様にカスタムログインページが使用されるようにするには、Yellowfin構成データベースの変更が必要です。データベース内で以下のように変更を行います。
## 「{{Configuration}}」テーブルで、{{ConfigCode = 'LOGONPAGE'}}となっているレコードを特定し、次のように{{{}ConfigData = 'login_companyName.jsp'}}に更新します。
{code:language=sql}
UPDATE dbo.Configuration
SET ConfigData = 'login_companyName.jsp'
WHERE ConfigCode = 'LOGONPAGE'
{code}
# Yellowfinを再起動します。

h3. 例

|| コンポーネント || 標準ログイン || カスタムログイン ||
| ページ全体 | !01fullStandard.png|thumbnail,border=1! | !02fullCustom.png|thumbnail,border=1! |

\\
\\
{horizontalrule}
{styleclass: Class=topLink} [ページトップ|#top] {styleclass}