【dokuwiki】スマホ時は注釈をクリックで表示させる方法

dokuwikiには「注釈」があり、

という風にwiki編集にて二重カッコで囲うとそこが注釈の文章になり、表示上その個所には数字がふられ、注釈テキストは非表示になります。

パソコンだとこの数字にマウスオーバーすることで注釈テキストが表示されるようになるんですが、スマホにはマウスオーバーがないので、数字をタッチしてその文章一番下の注釈がまとまったところに移動するしか注釈テキストを読む方法がないんです。

これだと不便なので、スマホ閲覧時は注釈の数字をタップすることで注釈テキストがポップアップ表示されるように変更する方法を紹介しますね。

1. 注意
2. やり方
3. コード説明
1. 変更点①について
2. 変更点②について
3. 変更点③について
4. まとめ

注意

dokuwiki自体のファイルを触ることになります。dokuwikiのバージョンアップなどでこの変更が消えることがありますので、そこだけ注意してくださいね。

やり方

全部で3か所変更します。

指定してる行をそのまま下のコードと入れ替え（つまり元のその行のコードは削除）てください。

        if( /iPhone|Android/i.test(navigator.userAgent) ){
          jQuery(document).on('click', 'a.fn_top', dw_page.footnoteDisplay);
          jQuery('body').on('click', function () {jQuery('#insitu__fn').hide().attr('aria-hidden', 'true');});
        }else{
          jQuery('a.fn_top').on('mouseover', dw_page.footnoteDisplay);
        }

            if( /iPhone|Android/i.test(navigator.userAgent) ){
                 $fndiv.off('mouseleave');
            }
            jQuery('.dokuwiki:first').append($fndiv);

        .show().attr('aria-hidden', 'false');

        if( /iPhone|Android/i.test(navigator.userAgent) ){
          return false;
        }

これでスマホで見てる際はクリックで注釈が表示され、違う場所でクリックするとその注釈が消えるように変更できました。

コード説明

ここまでで作業は完了しているので、ここから先は読みたい人だけ読んでくださいね。

わからないコードをそのままコピペするのってちょっと怖いなと感じる方もいると思いますので、サクッとコード説明をしておきたいと思います。

変更点①について

アイフォンやアンドロイド、つまりスマホだったらクリックイベントを追加、そうじゃなくてパソコンなら従来通りマウスオーバーイベントを追加、というコトをここでやっています。

「/iPhone|Android/i.test(navigator.userAgent)」という書き方は私もちょっと最初何やってるかわからなかったんですが、jqueryでモバイル判定するときの定番の書き方のようです。

変更点②について

スマホの時はマウスが離れた時のイベントを無効にしています。

変更点③について

クリックイベントがbodyまで伝播しちゃって、①で追加したbodyに対してのクリックイベントが起こっちゃうので、ここで「return false」することでbodyにクリックイベントが伝播しないようにしています。

「event.preventDefault();」だとaタグのリンクは発生しなくなるんですが、jqueryの他のクリックイベントには伝播しちゃうので「return false」にしています。

まとめ

ここではdokuwikiの注釈をスマホ閲覧時はクリック（タップ）したタイミングでポップアップ表示するよう変更する方法を紹介しました。

まとめると、page.jsでモバイル時の処理を少し追加すればOK、という感じ。

参考にしてみてくださいね。