tooltipsとはなんぞや？
Wikipediaによるミニ解説
ツールチップ（Tooltip）ということばをご存じでしょうか？私は、ごく最近知りました。ふつうの辞書には載っていません。専門用語のようです。Wikipediaには、次のように定義されています。
ツールチップの実際の応用例は、デスクトップアプリケーションのみならずウェブページにおいて広く普及している。ウィキペディア上で画像やハイパーリンクにカーソルを重ねた場合にもツールチップが表示されるであろう。
（Wikipedia「ツールチップ」より）
たしかに、Wikipediaを読んでいるときなど、キーワードにマウスを載せると、そのことばの定義が出てくることがあります。英文ニュースサイトでも、難しい単語にマウスを合わせると、その語義が表示させるというものがありました。これらを見て、自分のサイトでもこういうツールを導入できれば便利だろうな、と考えました。
Tooltipsを実装できるWorddPressプラグイン
そこで、いろいろなWordPressプラグインを渉猟した結果、tooltipsという言葉に行き着いたというわけです。改めて、tooltipというキーワードで検索してみると、けっこう多くのtooltipsプラグインがあるということがわかりました。その中で特に気に入ったのは、CM Tooltip GlossaryとTooltip Proの二つです。
https://tooltip.cminds.com/
https://tooltips.org/
どちらも有料なのがネックですが、便利さには代えがたいものがあるので、入手して使ってみることにしました。料金的には後者の方が安いのでおすすめですが、この「iシニアのブログ」で使っているのは前者のプラグインですので、これについて少し詳しく紹介したいと思います。
CM Tooltip Glossaryプラグインの使い方
このプラグインは、上のリンク先のサイトからダウンロードできます。Basic Versionは無料です。私の場合、tooltipの中に写真やビデオを表示したかったので、いちばん上級のeCommerceバージョンを購入しました。
プラグインのインストール
インスト−ルの方法は、他のプラグインと同じです。管理画面の「プラグイン」で新規プラグインのインストールを行い、有効化します。すると、管理画面に「CM Tooltip Glossary」という表示が出ますから、ここをクリックして、各種のsettingを行います。有料版の場合は、メールで送られてきたライセンスキーを入れます。このプラグインのライセンスは1年間で、かつ１サイトに限定されています。その点では、複数のサイトを運営している場合には、メインのサイト以外では機能の限定された無料版を使うことになります。以下では、eCommerce版のプラグインを使った実例を紹介したいと思います。
CM Tooltip Glossaryの応用例
一般のウェブサイトでは、Tooltipがさまざまな用途で使われています。CM Tooltip GlossaryのeCommerce版は、テキストに加えて、写真、動画、リンク、スライドショー、オーディオプレイヤーなど、さまざまなモードのコンテンツをtooltipに表示させることができるので、いろいろな用途に使うことができると考えられます。以下では、とりあえず思いついた応用例をとりあげて、プレゼンテーションしてみたいと思います。
語学学習サイト
英文を読みながら、難しい単語をツールチップでチェックすることができたら、さぞ便利なことでしょう。また、語句に関連した情報を写真や地図、動画などで表示できたら、もっと楽しいのではないでしょうか。他のブログでも紹介した「シャーロック・ホームズ」シリーズを材料にして、それを実現してみたいと思います。「青い柘榴石」(The Adventure of the Blue Carbuncle）の一節です。
“Certainly, sir,” said Baker, who had risen and tucked his newly gained property under his arm. “There are a few of us who frequent the 1Alpha Inn, near the Museum-we are to be found in the Museum itself during the day, you understand. This year our good host, Windigate by name, instituted a goose club, by which, on consideration of some few pence every week, we were each to receive a bird at Christmas. My pence were duly paid, and the rest is familiar to you. I am much indebted to you, sir, for a Scotch bonnet is fitted neither to my years nor my gravity.” With a comical 2pomposity of manner 3he bowed solemnly to both of us and strode off upon his way.
(from Conan Doyle,4“The Adventure of the Blue Carbuncle” )
この英文の中で1のAlpha Innにマウスをあててみてください（スマホの場合は軽く指をふれてください）。すると、文字の下にGoogleマップが表示されると思います。青いポイントは、Alpha Innの所在地（推定）を示したものです。この青いポイントをクリックすると、Alpha InnのモデルとなったMuseum Tavernの写真と簡単な説明が表示されます。これは、Googleマップの「マイマップ」で作成したものです。
次に、2のpomposityという単語にマウス（スマホの場合は指）をあててみてください。この単語の意味がしたに表示されます。これはWikipediaなどでおなじみの機能です。
3の右の文章にマウス（または指）をあてると、この場面を描いたSydney Baget氏によるイラストが表示されます。この文章の描写する場面がより鮮明にイメージできると思います。最後に、4の右の出典の部分をクリックしてみてください。映画Sherlock Holmesの"The Adventure of the Blue Carbuncle"の一部をYouTubeの映像で見ることができます。
ウェブサイトはプッシュ型からプル型へ向かうか
このように、このプラグインでは、語句の意味を表示させるだけではなく、語句に関連する地図、写真、イラスト、動画などを表示させることができるので、コンテンツをよりリッチなものにすることができます。初めからウェブページに表示するというプッシュ型の情報配信ではなく、ユーザーが関心に応じて情報を見に行くというプル情報型の提示方式のため、ユーザーの探究心をくすぐるエンターテイメント的な要素も付加することができるのではないでしょうか。
また、制作者側からみると、一つ一つのタームをグロッサリーに登録しなければならないので、面倒ではありますが、いわば自分だけのワードバンクを構築することができるので、知識を広げることができるでしょう。物忘れが多くなる高齢者にも、記憶の貯蔵庫をつくることができるので、大いなる福音といえるのではないでしょうか？
本サイトでも、これからWP Tooltip Glossaryプラグインをどんどん積極的に活用していきたいと思っています。ご期待下さい。