技術情報
かんたん機能追加
・ホームページをプラグインとして追加する方法
公開ドキュメント
・JavaDoc API
・設計書ダウンロード
・ファイル、ディレクトリ構造
開発
(1)使用する技術・製品の概要
(2)Eclipseで開発を行う
(3)コンパイルを行う
(4)「Hello World！」プラグインを作成する方法
(5)データベースに接続する方法
(6)セッション情報を取得する方法
(7)テンポラリディレクトリを取得する方法
(8)IDを採番する方法
(9)バッチ処理の実装
(10)ヘルプ機能の実装
(11)メイン＞インフォメーションへメッセージ表示
(12)任意のサイトからログインする方法
(13)メイン画面にポートレットを表示する方法
その他
・H2 Database Engineに関する技術・製品の概要

ヘルプ機能を実装する方法

-- 2011.07.20 GroupSession Version3.5.0 --

はじめに

GroupSessionでは各画面毎に機能の説明を表示するヘルプ機能が実装されています。

この様なヘルプ機能をGroupSessionではかんたんに実装できる様に作成されているので、実装方法をご紹介いたします。

前提条件

下記ドキュメントをご確認いただいた方を対象としています。

ここでは「Hello World！」プラグインを作成する方法で作成した｢new plugin｣にヘルプ機能を作成します。


作成・編集するファイルの一覧

作成するファイルの一覧です。

機能詳細用・画面一覧(サムネイル)用の画像

下記の手順１で作成します。

ディレクトリ\gsession3\newplugin\help\images\

ファイルscr_help_big_helloworld0.gif

ファイルscr_help_big_helloworld1.gif

ファイルscr_help_helloworld1.gif

ヘルプ画面のHTMLファイル

下記の手順２で作成します。

ディレクトリ\gsession3\newplugin

ディレクトリhelp

ファイルh_helloworld0.html

ファイルh_helloworld1.html

ファイルindex.html

ディレクトリhelp_ajax

ファイルajax_newplugin_left_list.html

ヘルプボタンを設置する画面のJSPファイル

下記の手順３で編集します。

ディレクトリ\gsession3\WEB-INF\plugin\newplugin\jsp

ファイルhelloworld.jsp

プラグイン設定ファイル

help機能のON/OFF設定します。

下記の手順４で編集します。

ディレクトリ\gsession3\WEB-INF\plugin\newplugin

ファイルplugin.xml

作業の手順

新規プラグインの作成手順を説明します。


手順１　ヘルプ画面用の画像を作成する

ヘルプ画面用の画像には、1 機能詳細用と、2 画面一覧(サムネイル)用 の2種類の画像が必要です。


Hello World! Help


下記の表の通りのファイル名、幅で画像を作成してください。

HELP_NUMはヘルプ画面表示切替のための画像です。

一画面(JSP)に複数のヘルプを作成しない場合は0を指定してください。


  命名規則 幅 説明
? 機能詳細用画像 "scr_help_big_"
     + プログラムID
     + HELP_NUM		 600px ヘルプ画面の機能詳細部分に表示される画像
? 画面一覧用画像 "scr_help_"
     + プログラムID
     + HELP_NUM		 250px ヘルプ画面の画面一覧（サムネイル）部分に表示される画像

機能詳細部分の画像作成に使用する番号(赤色の丸数字)をダウンロードできます。

画像作成時の素材としてご利用ください。

→ 素材のダウンロード（gif形式）



作成した画像をディレクトリに配置

\gsession3\newplugin\help\images

に作成したヘルプ画面用の画像を配置します。


下記の様な階層構造になります。

ディレクトリgsession3

ディレクトリnewplugin 

ディレクトリhelp

ディレクトリimages

ファイルscr_help_big_helloworld0.gif

ファイルscr_help_big_helloworld1.gif

ファイルscr_help_helloworld0.gif

ファイルscr_help_helloworld1.gif

手順２　ヘルプ画面のHTMLファイルを作成する

ここでは、下記のHTMLファイルを作成します。

１）  index.html   NEW PLUGINのヘルプトップページ

２）  ajax_newplugin_left_list.html   画面一覧

３）  h_helloworld0.html   機能詳細

４）  h_helloworld1.html   機能詳細(パラメータによる切替用)



※文字コードは必ず「UTF-8」を使用してください。

※下記のHTMLファイルは、赤字で表示されている部分に注意して作成してください。


１） index.html(NEW PLUGINのヘルプトップページ)を作成する

Hello World! Help


・下記のＡは、画面一覧に表示する画面名・画像を指定します。

・下記のＢは、画面一覧に表示する機能説明を記入します。

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[Group Session 2 ヘルプ] NEW PLUGIN</title>
<link rel=stylesheet href="../../common/css/default.css" type="text/css">
<link rel=stylesheet href="../../help/css/help.css" type="text/css">
<script type="text/javascript" src="../../common/js/prototype.js"></script>
<script type="text/javascript" src="../../common/js/cmd.js"></script>
<script type="text/javascript" src="../../help/js/help.js"></script>
</head>

  <body onLoad=
"ajaxGetContents('help-left-plugin-list', '../../help/hlp000.do');
ajaxGetContents('plugin-top', '../../help/hlp000ptop.do?pluginId=newplugin');
chengeHeaderText('[ NEW PLUGIN ]');"">

  <div id="container"><a name="top"></a>
  <div id="help-left">
  <div class="help-content-tr"><div class="help-content-tl">
      
  <img src="../../help/images/help_content_text_list.gif"
        alt="プラグイン情報" height="30"></div></div>
  <div class="help-content-mr"><div class="help-content-ml">
  <div id="help-left-plugin-list"><!-- ここにメニューが入ります --></div>
  </div></div>
  <div class="help-content-br"><div class="help-content-bl">
  <img src="../../help/images/spacer.gif" width="1" height="15" alt="">
  </div></div></div>

  <!-- コンテンツ -->
  <div id="right-content">

    <div class="help-right">
    <!-- プラグイン情報 // ここから -->
    <div id="plugin-top"></div>

    <!-- 画面一覧 -->
    <div class="help-content-tr"><div class="help-content-tl">
    
    <img src="../../help/images/help_content_text_dsp.gif"
        alt="画面一覧" height="30"></div></div>
    <div class="help-content-mr"><div class="help-content-ml pad">
    <table class="help-content-m-table" summary="NEW PLUGIN画面一覧"
        cellpadding="0" cellspacing="0">
    <tr>
    <th><a href="h_helloworld0.html">
    <img src="./images/scr_help_helloworld0.gif" alt="Hello World">
    </a></th>
    <td>
    <strong>
    <a href="h_helloworld0.html">Hello World 1</a>             -------Ａ
    ・
    <a href="h_helloworld1.html">Hello World 2</a>             -------Ａ
    </strong>
    <br><br>
    ｢HELLO WORLD!｣の文字を表示します。                                     -------Ｂ
    </td>
    </tr>
    <!-- // ここまでを編集 -->
    </table>
    <br>
    </div></div>
    <div class="help-content-br"><div class="help-content-bl">
    <img src="../../help/images/spacer.gif" width="1" height="15" alt="">
    </div></div>
    <div class="help-align-right"><a href="#top">▲画面トップへ</a></div>
    </div>

  </div>
  </div>

</body>
</html>

２） ajax_newplugin_left_list.html(画面一覧)を作成する

Hello World! Help

ajax_newplugin_left_list.html


<!-- a要素のhref属性、img要素のsrc属性をそれぞれ指定します。 -->
<!-- 画像サイズはCSSで自動調整されます。 -->
<p>
<a href="../../newplugin/help/h_helloworld0.html">Hello World 1<br>
<img src="../../newplugin/help/images/scr_help_helloworld0.gif"
    alt="NEW PLUGIN">
</a>
</p>
<p>
<a href="../../newplugin/help/h_helloworld1.html">Hello World 2<br>
<img src="../../newplugin/help/images/scr_help_helloworld1.gif"
    alt="NEW PLUGIN">
</a>
</p>

３） h_helloworld0.html(機能詳細)を作成する

Hello World! Help


・下記のＣは機能説明欄のタイトル部分です。

・下記のＤは機能説明欄の説明部分です。

h_helloworld0.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[Group Session 2 ヘルプ] NEW PLUGIN</title>
<link rel=stylesheet href="../../common/css/default.css" type="text/css">
<link rel=stylesheet href="../../help/css/help.css" type="text/css">
<script type="text/javascript" src="../../common/js/prototype.js"></script>
<script type="text/javascript" src="../../help/js/help.js"></script>

</head>
<!-- '../help_ajax/ajax_xxx_left_list.html' を編集 -->
<body onLoad="
    ajaxGetContents('help-left-func-in',
    '../help_ajax/ajax_newplugin_left_list.html');
    chengeHeaderText('[ NEW PLUGIN ]');">
<div id="container"><a name="top"></a>

    <div align="right" class="help-align-right">
    <input type="button" value="NEWPLUGIN トップへ" class="btn_base0"
        onClick="commonHelpLocationChange('./index.html');">
    </div>
    <!-- ナビゲーション -->
    <div id="help-left-func">
    <div class="help-content-tr"><div class="help-content-tl">
    <img src="../../help/images/help_content_text_dsp.gif"
        alt="画面一覧" height="30"></div></div>
    <div class="help-content-mr"><div class="help-content-ml">
    <div id="help-left-func-in">
    <!-- ここにajax_xxx_left_list.htmlが入ります -->
    </div>
    </div></div>
    <div class="help-content-br"><div class="help-content-bl">
    <img src="../../images/spacer.gif" width="1" height="15" alt=""></div>
    </div>
    </div>

    <!-- コンテンツ -->
    <div id="help-right-func">
    <div class="help-content-tr"><div class="help-content-tl">
    <img src="../../help/images/help_content_text_func.gif"
    alt="機能詳細" height="30"></div></div>
    <div class="help-content-mr"><div class="help-content-ml pad">
    <p>プラグイン追加用のサンプル画面です。</p>
    <!-- img要素のsrc,alt属性を編集 -->
    <h1 class="help-right-func-img">
    <img src="images/scr_help_big_helloworld0.gif"
        alt="Hello World 1画面 機能詳細"></h1>
    <p class="help-right-func-p">機能説明</p>
    <table summary="機能詳細" class="help-right-func-more"
        cellpadding="0" cellspacing="0">
    <!-- h2要素の中身と、p要素の中身を編集。項目数の調整 -->
    <tr>
    <th>
    <h2 class="num-back01">HELLO WORLD</h2>                 -------Ｃ
    <p>「Hello World!」と表示します。</p>                                     -------Ｄ
    </th>
    <td>
    <h2 class="num-back02">ヘルプ機能追加</h2>                    -------Ｃ
    <p>「この画面にヘルプ機能を追加しました。」と表示します。</p>       -------Ｄ
    </td>
    </tr>
    </table>

    </div></div>
    <div class="help-content-br"><div class="help-content-bl">
    <img src="images/spacer.gif" width="1" height="15" alt="">
    </div></div>

    <div class="help-align-right"><a href="#top">▲画面トップへ</a></div>
    </div>
</div>
</body>
</html>

４） h_helloworld1.html(機能詳細パラメータによる切替用サンプル)を作成する

    h_helloworld1.html は、h_helloworld0.html と同様に作成する。


HTMLファイルをディレクトリに配置

作成したHTMLファイルを、ディレクトリhelp_ajaxに配置します。


下記の様な階層構造になります。

ディレクトリgsession3

ディレクトリnewplugin

ディレクトリhelp

ファイルh_helloworld0.html

ファイルh_helloworld1.html

ファイルindex.html

ディレクトリhelp_ajax

ファイルajax_newplugin_left_list.html

手順３　ヘルプボタンを設置する画面のJSPファイルを編集する

※1つのJSPファイルに複数のヘルプを作成する場合のみ下記の修正が必要です


ヘルプボタンを設置する画面のJSPファイルを編集します。

ここでは、\gsession3\WEB-INF\plugin\newplugin\jspフォルダ内の「helloworld.jsp」を編集します。

赤字で表示されている行を１行追加します。


helloworld.jsp


  <%@ page pageEncoding="Windows-31J"
    contentType="text/html; charset=UTF-8"%>
  <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
  <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
  <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
  <%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested" %>

  <html:html>
  <head>
  <title>[GroupSession] HelloWorld</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel=stylesheet href='../common/css/default.css' type='text/css'>
  </head>

  <body class="body_03">
  <html:form action="/newplugin/helloworld">

  <%@ include file="/WEB-INF/plugin/common/jsp/header001.jsp" %>
  <input type="hidden" name="helpPrm" value="0">

  <table width="100%">
  <tr>
  <td width="100%" align="center">
    <p>Hello World！</p>
    <br><br>
    <p>この画面にHELP機能を追加しました。</p>
  </td>
  </tr>
  </table>

  <%@ include file="/WEB-INF/plugin/common/jsp/footer001.jsp" %>

  </html:form>
  </body>
  </html:html>
手順４　プラグイン設定ファイルを編集する

プラグイン設定ファイルを修正し、ヘルプ機能を有効にします。

ヘルプ情報のメニューの表示非表示の項目をfalseからtrueに変更してください。

plugin.xml

<?xml version="1.0" encoding="Shift_jis" ?>

 

<plugin>

 

<!-- プラグインID -->

<!-- 手順１で決めたプラグインIDを記述します -->

<id>newplugin</id>

 

<!-- 名称 -->

<!-- プラグインの名称を記述します -->

<name>ニュープラグイン</name>

 

<!-- 説明 -->

<!-- プラグインの説明を記述します -->

<description>新しいプラグインです。</description>

 

<!-- トップメニューの情報を記述する 記述しない場合はメニューに表示しない -->

<topmenu-info>

<!-- メニューへの表示/非表示 -->

<!-- プラグインをメニューへ表示する場合は「true」と記述します -->

<view>true</view>

<!-- メニューアイコンクリック時にフレーム内に表示するURLを記述します -->

<!-- struts_config.xmlのactionのpathの値を元に、下記の様に記述 -->

<url>../newplugin/helloworld.do</url>

</topmenu-info>

 

<!-- ヘルプ情報を設定する。 -->

<help-info>

<!-- ヘルプの表示/非表示 -->

<view>true</view>

</help-info>

 

</plugin>


手順５　ヘルプの検索インデックスを作成する

GroupSessionはヘルプの全文検索が可能です。

全文検索を行うためには事前に検索用のインデックスを作成する必要があります。。


インデックスの作成はapache antを使用し簡単に作成することができます。

\gsession3\WEB-INF\help_init\build.xml 内のcreate_indexを実行します。


コマンドライン上で以下を実行してください。

GroupSessionをインストールしたフォルダの\gsession3\WEB-INF\help_initへ移動します。


$ cd C:\gsession3\WEB-INF\help_init\


次にAntを実行し、検索インデックスを作成します。


$ ant create_Index

実行後、\gsession3\WEB-INF\plugin\help\help_indexに検索インデックスのファイルが作成されます。


以上で、ヘルプの検索インデックスの作成は完了です。


手順６　各ファイルのディレクトリ階層を確認する

以上の全てのファイルを配置すると、下記のような階層構造になります。


ディレクトリgsession3

ディレクトリnewplugin

ディレクトリhelp

ディレクトリimages

ファイルscr_help_big_helloworld0.gif

ファイルscr_help_big_helloworld1.gif

ファイルscr_help_helloworld0.gif

ファイルscr_help_helloworld1.gif

ファイルindex.html

ファイルh_helloworld0.html

ファイルh_helloworld1.html

ディレクトリhelp_ajax

ファイルajax_newplugin_left_list.html

ディレクトリWEB-INF

ディレクトリplugin

ディレクトリnewplugin

ファイルstruts_config.xml

ファイルplugin.xml

ファイルbuild.xml

ディレクトリjsp

ファイルhelloworld.jsp

ディレクトリsrc

ディレクトリjp

ディレクトリgroupsession

ディレクトリv2

ディレクトリnewplugin

ディレクトリhelloworld

ファイルHelloWorldAction.java

ファイルHelloWorldForm.java

手順７　tomcatを起動して動作を確認する

tomcatを起動し動作を確認します。


「NEW PLUGIN」の｢Hello World！」のページのヘルプアイコンをクリックすると、

｢Hello World！」のページのヘルプ画面が別ウインドウで表示されます。


Hello World！


Hello World！


1つのJSPファイルに複数のヘルプ画面を作成する方法

一つのJSPファイルで、登録と修正、管理者用と一般ユーザ用等、共通で使用する場合があると思います。

そういった場合のヘルプファイルの切替も簡単に行うことができます。


手順１?４ではh_helloworld0.htmlのヘルプ画面を表示しています。


手順３で設定したパラメータ"helpPrm"に"1"を指定すると、

h_helloworld1.htmlのヘルプ画面が表示されます。


つまりこの数字をプログラムで動的に変化させることによって表示するヘルプを切り替えることができます。


サンプルをダウンロード

手順１?４で作成するファイルとディレクトリ構成のサンプルを、こちらからダウンロードできます。

→ サンプルをダウンロード


１） zipファイルを解凍後、「help_sample」ディレクトリの下に「gsession3」ディレクトリができます。

２） GroupSessionをインストールしたgsession3ディレクトリに、
      解凍後の「gsession3」ディレクトリを上書きします。

３） ソースファイルのコンパイルを行います。

４） tomcatを再起動すると上記の「Hello World！」プラグインが追加され、ヘルプ機能を使用できます。


Copyright 日本トータルシステム株式会社