2011年2月23日

jQueryで作るヘルプページ

こんにちは。笹亀です。

最近、工事中であった周りの建物の完成が近くなってきており、
周りの景色がいままでと違う景色に変わってしまいなんだか少し寂しさを感じております。
2/24(明日)に噂によると新MacBookProの発表があるということらしく、
こちらは発表までとても待ちどうしくてしかたありません！

さて本日はjQueryのライブラリでヘルプページを作成する方法をご紹介致します。
ヘルプページをいちから作成するというのは手間と労力がとても掛かってしまうものです。
今回ご紹介するライブラリを使用すると下記の画像のようにWebシステム内にヘルプ情報を簡単に組み込めてとても手軽にヘルプページを作成することができます。

それでは実際にヘルプページを作成してみたいと思います。

１．まずは実装に必要なjQueryとヘルプライブラリのJSをダウンロードします
下記からダウンロード可能です。
http://embedded-help.net/download
　※ダウンロードファイル内にjQueryも入っております。

２．ヘルプをコンテンツ情報のHTMLを作成します


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/basetop2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery-Help</title>
<link href="./jquery.ehelp.css" type="text/css" rel="stylesheet" />
  <style>
   html,body { font-size:12px; position:relative; padding:0; margin:0; width:100%; height:100%; }
   body { width:100%; height:100%; }
   #leftdiv { position:relative; display:block; float:left; width:70%; }
   #resultsection { width:120px; }
   #EHhelpBox { position:relative; width:250px; background-color:#eee; padding:5px 10px 10px 10px; }
   #EHhelpBox .title { color:red; }
   #EHhelpBox a { color:black !important; text-decoration:none; }
   #EHhelpBox a:hover { color:red; text-decoration:none; }
  </style>
</head>
<body>
<div id="rightdiv">
<div id="EHhelpBox">
<p class="title">ヘルプメニュー</p>
<a rel='search_base' href=''>アシアルメンバー検索機能の使用方法</a>
<a rel='generate_report' href=''>検索使用方法の手順をレビュー</a><br>
<a class='EHstopAll' href=''>ヘルプ情報を非表示にする</a>
</div>
</div>
<div>
メンバー検索: <input name="search" id="search" value="" maxlength="30" size="30" type="text">
<input type="button" value="検索" name="dosearch"> <input type="button" value="リセット" name="dorefresh"> 
</div>
<h2>アシアルメンバーリスト</h2> 
<table id="baseTable">
<thead><tr>
<th>名前</th>
<th>生年月日</th>
<th>性別</th>
<th>社員番号</th>
<tr></thead>
<tbody>
<tr>
<td><a href="#" id="user1">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user2">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user3">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user4">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user5">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user6">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user1">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
<tr>
<td><a href="#" id="user1">笹亀　弘</a></td>
<td>1980/12/29</td>
<td>男</td>
<td>00000001</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="resultsection">ユーザ詳細</h2>
<div id="resultsbox"></div> 
</div>
<div style="height:800px; display:block; clear:both;"></div>
<div style="float:right;">
<input type="button" value="CSV出力" name="doCsvReport">
</div>
</body>
</html>

３．jQueryとヘルプライブラリ、スタイルシートを２で作成したHTMLで読み込みます


<head>
・
・
<script src="./jquery-1.4.4.min.js"></script>
<script src="./jquery.ehelp-1.1.2.min.js"></script>
<link href="./jquery.ehelp.css" type="text/css" rel="stylesheet" />
・
・
</head>

４．ヘルプ内容が記載されているJSONファイルを作成します

JSONファイルの要素の簡単な解説を記載します。


rel:Action開始のaタグのrel属性名
method:Actionのタイプ
  static:スタンダード表示
  animated:アニメーション表示
path:ヘルプの要素

※詳しくはこちら

JSONファイル


[{
    "rel":"search_base",
    "method":"static",
    "path": [
    {
      "element": "#search",
      "desc": "検索したい人の名前を入力します",
      "duration": 2500,
      "align": "R",
      "marker": "EHmarker"
    },    
    {
      "element": "input[name=dosearch]",
      "desc": "検索ボタンをクリックすると検索が開始されます",
      "duration": 2000,
      "align": "R",
      "marker": "EHmarker"
    },
    {
      "element": "#user1",
      "desc": "詳細情報を閲覧したい場合はリンクをクリックします",
      "duration": 2000,
      "align": "R",
      "marker": "EHmarker"
    },
    {
      "element": "#resultsection",
      "desc": "クリックしたユーザの詳細情報が表示されます",
      "duration": 2000,
      "align": "L",
      "marker": "EHmarker"
    }
    ]},
    {
    "rel":"generate_report",
    "method":"animated",
    "path": [
    {
      "element": "#search",
      "desc": "検索したい人の名前を入力します",
      "duration": 2500,
      "align": "R",
      "marker": "EHmarker"
    },    
    {
      "element": "input[name=dosearch]",
      "desc": "検索ボタンをクリックすると検索が開始されます",
      "duration": 2000,
      "align": "R",
      "marker": "EHmarker"
    },
    {
      "element": "#user1",
      "desc": "詳細情報を閲覧したい場合はリンクをクリックします",
      "duration": 2000,
      "align": "R",
      "marker": "EHmarker"
    },
    {
      "element": "#resultsection",
      "desc": "クリックしたユーザの詳細情報が表示されます",
      "duration": 2000,
      "align": "L",
      "marker": "EHmarker"
    },
    {
      "element": "input[name=doCsvReport]",
      "desc": "CSV出力する場合はクリックするとダウンロードできます",
      "duration": 2000,
      "align": "R",
      "marker": "EHmarker"
    }]}
]

サンプルと同じ名前(paths.json)で保存しておきます。

５．ヘルプ内容が記載されているJSONファイルを読み込む処理を記載します


<head>
・
・
  <script type="text/javascript">  
    $(document).ready(function() {
    $.getJSON("./paths.json",
    function(paths) {
      $('#EHhelpBox').embeddedHelp(paths, {
      'animatedvp': true,
      'staticvp': true,
      'autoalign':true    
           });
    });
    });   
  </script>
・
・
</head>