メニュー領域の表示形式を変更する

業務実行画面のメニュー領域の表示形式をカスタマイズする手順を次に示します。

ucnp_menu_onload関数に引数を指定すると，カスタム画面の読み込み時に初期化処理が実行されるため，画面もリサイズして表示されます。iPadでカスタム画面を表示する場合，適度にリサイズされるため便利です。

テキストエディタで，メニュー領域に表示させるHTMLファイル，またはJSPファイルを作成します。
作成するファイルの記述形式を次に示します。
なお，太字で示した行は必ず記述してください。

画面をリサイズする場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/ucnpBase/adportlets/ucnp/js/tools/UcnpCustomTools.js"></script>
</head>
<body onload="ucnp_menu_onload('resizeArea');">
 
<div class="resizeArea" id="resizeArea">
この部分に，HTMLタグおよびナビゲーション プラットフォームで提供している
JavaScript関数を使用して，メニューの内容を記述します。
</div>
 
</body>
</html>

画面をリサイズしない場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/ucnpBase/adportlets/ucnp/js/tools/UcnpCustomTools.js"></script>
</head>
<body onload="ucnp_menu_onload();">
この部分に，HTMLタグおよびナビゲーション プラットフォームで提供している
JavaScript関数を使用して，メニューの内容を記述します。
 
</body>
</html>

ナビゲーションプラットフォームで提供しているJavaScript関数の詳細は，「4.2.1　ナビゲーションプラットフォームで提供しているJavaScript関数」を参照してください。

作成したファイルを格納します。
ファイルの種別ごとの，ファイルの格納先を次に示します。
- HTMLファイルの場合
  実行環境の静的ファイル格納先に格納してください。静的ファイル格納先の詳細は，「4.1.1　静的ファイルの格納先とパス」を参照してください。
- JSPファイルの場合
  開発環境のJSPファイル格納先に格納してください。JSPファイル格納先の詳細は，「4.1.2　JSPファイルの格納先とパス」を参照してください。
JSPファイルを作成した場合は次の手順に進んでください。HTMLファイルを作成した場合は，手順6.へ進んでください。
カスタム画面をビルドします。
カスタム画面のビルド手順はプラグインの場合と同じです。詳細は，「3.6.1　プラグインのビルド手順」を参照してください。
開発環境のユーザプロパティファイル（ucnp_user.properties）を設定します。
設定するプロパティの詳細は，「4.4.3　ユーザプロパティファイルの設定」を参照してください。
J2EEアプリケーションをインポートして，開始します。
インポートと開始の手順は，「3.8　uCosminexus Navigation DeveloperのJ2EEアプリケーションのインポートと開始」を参照してください。
J2EEアプリケーションをデバッグして，問題がないことを確認します。
デバッグ手順は，「3.11　プラグインのデバッグ」を参照してください。
作成したJ2EEアプリケーションのファイルを編集環境および実行環境に送付します。
開発環境から送付されたファイルを編集環境および実行環境に適用する方法の詳細は，マニュアル「Cosminexus V9 ナビゲーションプラットフォーム導入から運用まで」を参照してください。
編集環境および実行環境のユーザプロパティファイル（ucnp_user.properties）を編集します。
どのプロパティを編集するのかについては，「4.4.3　ユーザプロパティファイルの設定」を参照してください。

＜この項の構成＞: (1)　カスタマイズしたメニュー領域のソース例; (2)　カスタマイズしたメニュー領域の表示例

カスタマイズしたメニュー領域のソース例を次に示します。なお，この例ではカスタム画面がリサイズされます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/ucnpBase/adportlets/ucnp/js/tools/UcnpCustomTools.js"></script>
</head>
<body onload="ucnp_menu_onload('resizeArea');" >
<div id="resizeArea">
    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr bgcolor="#00ccff"><td><font size="4"><b>顧客対応業務</b></font></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr><td><br></td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「契約情報の確認」の業務コンテンツID'); return false;">契約情報の確認</a></li>
        </td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「契約への問い合わせ」の業務コンテンツID'); return false;">契約への問い合わせ</a></li>
        </td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「新規契約受付」の業務コンテンツID'); return false;">新規契約受付</a></li>
        </td></tr>
    </table>
    <br>
    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr bgcolor="#00ccff"><td><font size="4"><b>社内業務</b></font></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr><td><br></td></tr>
        <tr><td style="padding-left:14px;"><li><a href="「出張申請」社内システムのURL" target="_blank">出張申請</a></li></td></tr>
        <tr><td style="padding-left:14px;"><li><a href="「備品申請」社内システムのURL" target="_blank">備品申請</a></li></td></tr>
    </table>
</div>
</body>
</html>

4.2.2 メニュー領域の表示形式を変更する

(1) カスタマイズしたメニュー領域のソース例

(2) カスタマイズしたメニュー領域の表示例

4.2.2　メニュー領域の表示形式を変更する

(1)　カスタマイズしたメニュー領域のソース例

(2)　カスタマイズしたメニュー領域の表示例