任意のテキストをクリックで表示させるシンプルな注釈スクリプト・「Expounder」

Ads

Expounder


Expounderはクリックで任意のテキストを表示させるシンプルなスクリプトです。タイトルだけだとうまく説明できなかったのですが、百聞は一見に如かずという事で上記の動作サンプルを用意しました。注釈系のスクリプトですが、マウスホバーで表示する等ではなく、予め用意した任意のテキストをクリックで表示させる、というもの。マウスホバーによるツールチップ等で表示するのも場合によっては見にくいのでこういう方法もありかなぁと感じました。

一見二度手間に感じますが、例えば文章内に特定のキーワードの説明を書いた場合、そのキーワードの事を既に知っている方にとっては無駄な説明となります。この場合、その言葉の意味を知りたい方だけクリックで表示させれば知ってる人は文章が読みやすくなるし、知らない人もその場で理解出来るので幸せになれるよね、という意図で書かれたスクリプトだそうです。

非常に簡単なコードで実装可能ですが、発想が良かったのでメモとして。使い方も簡単で、ターゲットとなるキーワードと表示させたい文章の2つのカスタムデータ属性の値を揃えればいいだけです。他スクリプトへの依存もなく、単体で動作します。クリックで注釈が表示される旨の明示や通常リンクとのスタイルの差別化は当然必要ですが、選べるように配慮するのは良いユーザビリティと言えそうです。ライセンスはMIT。

Expounder

タイトルとURLをコピーしました