MR.HARIKIRI-INSIGHTS

タグ: tooltip

  • [WordPress] Encyclopedia プラグイン とAMP化

    [WordPress] Encyclopedia プラグイン とAMP化

    Post Views: 246

    Encyclopedia プラグイン

    機能

    投稿で使用した用語に、吹き出しを付けるWordPressのプラグインです。

    Encyclopediaプラグインは、ドイツ製(Deutsch)のTooltipプラグインです。吹き出しのことをTooltipというようです。単語を１つずつ定義します。ページの定義された単語がある場合、定義内容を吹き出しにできます。

    Encyclopedia / Glossary / Wiki

    Free版をしばらく使ってPro版にアップグレード(約5,500円)しました(2020/02/16)

    AMPプラグインを導入していなければ、完全な機能を使うますが、AMPプラグインを導入している場合、AMPのルールに反するJavaScriptなどは削除リストに上がってきます。これを削除しないとAMPの速度向上の恩恵を受けられないので、削除するわけですが、Encyclopediaの機能の一部が使用できなくなります。

    2022/01/02,

    サイトのAMP化を更に進めるためるため、および、当該プラグインのPro版は1年間のサブスクリプションになっているので最新版へのアップデートが出来ないことで、Encyclopediaをアンインストールすることにしました。

    登録してあるワードは、投稿(post)に変換していきます。その後全てを変換完了したらアンインストールする予定です。

    吹き出しの機能は使えなくなりますが (iPadなどマウスカーソルがない場合はそもそも吹き出し機能は使えなかった)、その代わりの機能として、ページの末尾に記事の編集時にタグで指定したワードを利用して、そのワードを登録した記事(post)へのリンクをリストするようにphpでプログラムしました。

    AMP対応ページで使用できなくなる機能

    フォバー機能

    iPhone/iPadでのクリックによるフォバーの代替機能が使えなくなる。これは、マウスカーソルが、登録単語の上に来た時(フォバー)、吹き出しを出す機能ですが、iPhone/iPadでは、マウスは通常使わないので、登録単語をタップした時に、吹き出しを出すようにする機能です。この機能が使えなくなります。ただし、タップした時に、フォバーは機能しないものの、登録の単語のページにはジャンプ可能です。Windowsなどマウスが使用可能なOSでは、フォバー機能は変わらず使えます。

    設定

    目標機能

    • AMPプラグインを未導入の場合
    • モバイルでは、マウスカーソルが無いため、マウスカーソルをリンクの上持ってくるという動作ができません。
    • そこで、モバイルに対応させるために、クリックした場合でも、リンクにジャンプせず、吹き出しを表示する仕様にしたいと思います。

    詳細設定

    基本設定は、以下のように設定しています。

    • ClassicのText Editorは基本的に使用しないので、Off
    • Block Editorは、メインに使用しているので、On
    • Excerpt (投稿の抜粋)は、以下の例では、Onになつていますが、複雑になるのでOffの方が良いかもしれません
    • Revisionsは、Off
    • Comments & Trackbacksは、Off
    • Feature Imageは、Off
    • Custom Fealdsは、何の項目か、良くわからないのでOff
    encyclopedia

    吹き出しの表示/リンクに飛ばない設定

    • Tooltips : On
    • Click-Event : ☑️
    encyclopedia

    注意点

    AMPプラグインを導入している場合、投稿がAMP有効になっていると目標機能は機能しません。

    • クリックした時、リンクに飛んでしまいます。JavaScriptがAMPのルールに違反しているため、削除されているためと考えられます。

    編集履歴

    2020/03/07 はりきり(Mr)
2022/01/02,追記(AMP化を更に進めるためにアンインストールすることにした)
  • [WordPress] 用語の説明を吹き出しする「Glossary / Tooltip 」プラグインを導入すべきか [2020/04/20]

    [WordPress] 用語の説明を吹き出しする「Glossary / Tooltip 」プラグインを導入すべきか [2020/04/20]

    Post Views: 505

    ID7146

    はじめに

    blog記事の中で、一般的でない用語について説明した方が読者にとっていいはずです。しかし、読みづらくなるのは本末転倒。手頃なプラグインはあるでしょうか?

    WordPressの投稿にGlossaryまたはTooltipsはあった方がいい

    説明したい用語について、末尾に説明しておき、投稿内でアンカーを貼るのもいい。しかし、記事を読んでいる途中で用語の意味を知りたくてジャンプしてしまうと読書性が低下する。

    それなら、吹き出し式のGlossaryかTooltipsではどうかと考えた。吹き出しなら本文を読みながら、必要な用語の意味を確認が可能であり、今回の目的にマッチする。

    日本語環境で使えるものは?

    4つをテストしてみた。WordPress TooltipsとEncyclopediaが、日本語環境でも使えそうです。

    1. CM Tooltip Glossary : 英語と日本語が混じっている場合、その間に空白がないと英単語を抽出できない
    2. Glossary : 同上
    3. WordPress Tooltips : 英語日本語混じりでも、登録した単語を正確にTooltipしてくれる
    4. Encyclopedia : WordPress Tooltipsと同等の機能を持ってる(ドイツ製)。

    Text Hover

    ワードを登録する形式である。エディタに一括入力する(ex. WP => wordpress)

    Text Hover

    Tooltip CK

    ワードを登録する形式ではない。

    https://wordpress.org/plugins/tooltip-ck

    CM Tooltip Glossary

    ワードを登録する形式である

    CM Tooltip Glossary

    Glossary

    Glossary

    WordPress Tooltips

    ワードを登録する形式である

    WordPress Tooltips

    Enclyclopedia

    ワードを登録する形式である

    Encyclopedia / Glossary / Wiki

    2020/02/23

    結局、Encyclopedia(有料版)を導入することにした。iPhone/iPadを使っていて、Pageにジャンプせず吹き出し表示が可能だったこと、日本語/英語まじり可能なこと、などが決め手になった。

    2020/04/20

    「amp」を登録すると「Sample」が「Sample」となってしまう。この場合、設定を以下のようにすることで、完全な単語にマッチさせることで回避できる。

    Complete words　☑️

    総評

    GlossaryやTooltipsのPluginは、最も古いもので11年前のものが確認できた。3~5年のGlossary Pluginは結構ごろごろあり、忘れ去れている感じだ。

    最近でもUpdateしていてメンテナンスされているものは、5個程度である。

    それでは、なぜ、忘れ去られたものが多数あり、最近のももは少ないのか。全てのGlossary Pluginは、Getenbergエディターには対応していない。旧エディター(Classic)で編集するようになっている。

    GlossaryのWordPress上での原理を考えてみた。投稿を保存する前に、その記事からワードを拾い出し、Glossaryに登録してあれば、リンクや吹き出しコードを付加してから、保存される。

    AMP対応

    2020/04/20

    これらコードは、JavaScriptが用いられているため、ページをAMPに対応して以来、これらのプラグインが正常に動作しなくなりました。

    AMPは、基本的にJavaScriptを許さない。その代わりにAMP版のJavaScriptのサブセットが開発されており、AMPに対応するためには、そのルールに従った前処理が必要です。AMP対応、且つ，吹き出しの機能の付加は、ちょっとハードルが高そうです。現在のところAMPに対応している「吹き出し」プラグインはありません。