[ 地球流体電脳倶楽部 / davis / Gfdnavi / doc / ForDeveloppers ]

ポップアップするヘルプメニューの作り方 (Gfdnavi開発者向けドキュメント)


  1. はじめに
  2. ヘルプメニューの作り方

はじめに

Gfdnavi では、随所にヘルプメニューを埋め込むことができる。 ヘルプメニューは、 青地に?のマーク <img src=HowTo_help_popup_images/helpmark16.png> をクリックすることで表示される。また、help 文書中で、どの個所について の記述であるかを示すため、下線を引いたテキストマウスを合わせると 被説明箇所の背景色を黄色に変えることができる (マウスを外せば、背景色は元に戻る)。

サンプルスクリーンショット:

ヘルプメニューの作り方

ヘルプマークの埋め込み

ヘルプマークを入れたい rhtml (例えば views/analysis/index.rhtml)に, 次の用に埋め込みRubyスクリプトを挿入する:

<%= help_popup( 表題 ) %>

ここで、表題は、'analysis_tab' など、任意の文字列である。 Ruby の文字列 (String) なので、'analysis_tab' でも、 "analysis_tab" でも、文字列を返すコード断片でも良い。

ヘルプマーク画像のサイズは 16×16 である。<table>等に入れる場合、 それ+αの高さを確保するようにせよ。経験的には、<td>であれば、 スタイルシートで

line-height: 20px;

程度を確保すればいいようだ。(これはギリギリなので、もうちょっと大がいいかも。 see public/stylesheets/analysis.css。)

表示内容テキストの作成

ファイル名

次に、help で表示するテキストを用意する。上記の rhtml と同じ ディレクトリーに、

__help_表題.言語.html

という名前で用意する。ここで、言語は en, ja 等である。 表題は上で help_popup の引数として与えたものである。 よって、上の例では views/analysis/__help_analysis_tab.en.html などとなる。ファイル名の添字は rhtml でなく html であることに注意。 つまり埋め込み Ruby は使えず、ただのhtmlである。

言語のデフォルトは英語 (en) である。 現在は、Webインターフェースで変更することができないので、 実質的には英語のみに対応していることになるが、 将来的には、上端の共通レイアウト部分で言語指定できる ようにすることを想定している。なお、設定された言語の help テキストが存在しない場合は、__help_表題.en.html を表示することになっているので、必ず用意すること。 (実は __help_表題.html も検索対象になってるのだが、非推奨。 使わないでください。)

表示内容テキストの書き方

本文の中身を html で書く。通常の html で <body></body> にくるむ内容のみを書くこと。表題は <h2></h2> でくるむことを推奨する(字の大きさに関する趣味の問題なので、h1 でも問題はないが)。

例:

<h2>Analysis tab</h2>
<p>
 <ol>
  <li> How to 1
  <li> How to 2
  <li> How to 3
 </ol>
</p>

何について解説しているかが直感的に理解できるよう、 マウスを乗せると被説明箇所の背景色が黄色に変わるようにするには、 次のようにする。

<h2>Analysis tab</h2>
<p>
 <ol>
  <li> How to 1. This is about the
       <span class="help_link" 
          onMouseOver='helpLinkHilit("variables",this)'
          onMouseOut='helpLinkUnhilit("variables",this)'>
       "Variables" window</span> at the top of the window.
  <li> How to 2
  <li> How to 3
 </ol>
</p>

ここで、

<span class="help_link" 
   onMouseOver='helpLinkHilit(DOMのID,this)'
   onMouseOut='helpLinkUnhilit(DOMのID,this)'>
表示テキスト</span>

である。「DOMのID」は、例えば被説明箇所が <div id="variables"></div> に入っているのであれば、"variables" である。表示テキストは ラベルとして用いられる任意のテキストで、下線を引いた青いフォントで 表示される。

なお、被説明箇所が非表示または存在しない場合(動的に未生成の場合など)は、 表示テキストの後に

(hidden currently)

というテキストがマウスを乗せている間だけ赤く表示される。 なお、非表示になる可能性のある箇所については、 表示法等を文書に書くことを勧める。

赤字で強調したいところについては

<span class="help_stress">強調したい文字列</stress>

のように書く。


davis Group / GFD Dennou Staff dcstaff@gfd-dennou.org
Last Updated: 2007/01/29 (堀之内), Since: 2007/01/29 (堀之内)