プログラミング■ ヒント
最近、新機能の追加や、問合せの多い機能に対して説明文を表示したいという思いが強くなってきました。
以前はマニュアルを整備する方向で考えていたのですが、マニュアルの整備って皆嫌がって、なかなか進まないんですよね。
しっかりした機能説明は不要で、ちょっとしたヒントが出せれば十分なのです。ってことで、画面上に簡単なヘルプメッセージを出せればなぁと。
■ title属性
最初はポップアップウィンドウを試して見たのですが、少し仰々しいし実装の手間が大きい、かつ実際に表示してみたらウザいので却下。
そこで目を付けたのが、title属性です。
こいつを設定すると、マウスカーソルが当たった時に設定したメッセージ（ツールチップって言うのかな？）を表示してくれます。このtitle属性は、ボタンやリンク、テーブルの行全体とか、ほぼ全てのタグに設定できるようです。
ちょっと使ってみました。
<INPUT type="button" value="マウスを当てると..."
title="こうやって説明を表示できます">
こんな感じで表示されます。
これで行けそうです。
■ 使ってみて
メッセージを表示したい要素にtitle属性を設定するだけなので、実装が簡単なのは良いですね。逆に言うと、細かい工夫が出来ないって事ですが、それは趣旨が異なる（趣旨＝ちょっとしたヒントを表示したい）ので別に構いません。
ちょっと残念なのは、メッセージが数秒で消えてしまうので、長い文章は使えない事でしょうか。
javaScriptで工夫すれば出来るような気もしますが、実装の手間が．．．
■ 改行
細かい書式は諦めるとしても、せめて改行くらいはしたいものです。調べてみると、いくつか方法があるようです。
① 単純に改行する
単純に、改行したい位置で改行するだけで良いようです（"←改行" の前には、タブが入力されています）
<INPUT type="button" value="改行のテスト"
title="ここで→
←改行">
こうなりました。
しかし、少し実装が美しくないので気に入りません。
② 文字実体参照を使う
改行したいって事は、改行コード、つまり「CR（キャリッジリターン）」と「LF（ラインフィード）」があれば良いわけですので、これを文字実体参照を使って突っ込んでやります。
<INPUT type="button" value="改行のテスト２"
title="ここで→& #13;& #x0A;←改行">
& #13; がCRで、& #x0A; がLFになります。
結果、問題なく改行できました。
上で偉そうに書いていますが、これを調べるまで文字実体参照って存在自体を知りませんでした。何でも、キーボードから入力出来ない（しにくい）文字を表現するためのHTMLの仕様らしいです。
※ 上で&と#の間にスペースがありますが、実際にはスペースは不要です。なんか、ブログの仕様と言うか入力内容をHTMLとして解釈するらしく、そのままだと表示されなかったので、ちと工夫しました。
■ 後書き
ちゃんとしたマニュアルを作成して、維持管理して、見たい時に見れる状態にしたいのですが、戦力の少ない非IT系のシステム部門では現実的に難しいです。
そもそも、マニュアル作りに時間を掛けていると、上司に怒られる（マニュアル＝誰も読まない無駄な物って認識がある、あながち間違っていない）ので、なかなか難しい．．．
そこで、苦肉の策として考えたのが今回の手段です。仕様レベルに落とし込もうとすると面倒ですが、実際の開発作業の時点でこっそりと実装すれば、大した手間でもありません。
肝心の効果なのですが、正直微妙です。というか、ユーザーは悪いことは言ってくるのですが、良いことは言ってくれないというか．．．
まぁ、苦情は出てないので良い効果が出ていると信じましょうかね。
スポンサードリンク
0
0
