=begin = ポップアップするヘルプメニューの作り方 (Gfdnavi開発者向けドキュメント) # # 履歴情報 (新しい更新履歴を上に追記していくこと) # # * 2007/01/29 (堀之内) 作成 == はじめに Gfdnavi では、随所にヘルプメニューを埋め込むことができる。 ヘルプメニューは、 ((<青地に?のマーク|URL:HowTo_help_popup_images/helpmark16.png>)) をクリックすることで表示される。また、help 文書中で、どの個所について の記述であるかを示すため、下線を引いたテキストマウスを合わせると 被説明箇所の背景色を黄色に変えることができる (マウスを外せば、背景色は元に戻る)。 サンプルスクリーンショット: * ((<解析・可視化画面 |URL:HowTo_help_popup_images/sample_before.png>)) * ((<画面の左下の "Analysis" タブのヘルプマークをクリックしたところ |URL:HowTo_help_popup_images/sample_after.png>)) * ((<被説明箇所のハイライト(help文中の "Variables" window (下線付) をクリックして背景が黄色くなったところ) |URL:HowTo_help_popup_images/sample_highlight.png>)) == ヘルプメニューの作り方 === ヘルプマークの埋め込み ヘルプマークを入れたい rhtml (例えば views/analysis/index.rhtml)に, 次の用に埋め込みRubyスクリプトを挿入する: <%= help_popup( 表題 ) %> ここで、表題は、'analysis_tab' など、任意の文字列である。 Ruby の文字列 (String) なので、'analysis_tab' でも、 "analysis_tab" でも、文字列を返すコード断片でも良い。 ヘルプマーク画像のサイズは 16×16 である。
であれば、
スタイルシートで
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 で
にくるむ内容のみを書くこと。表題は
でくるむことを推奨する(字の大きさに関する趣味の問題なので、h1
でも問題はないが)。
例:
Analysis tab
Analysis tab
|