自作プラグイン/note

2021-11-26 (金) 21:24:57
note.jpg

スマホ表示に対応した注釈/脚注プラグイン

note.inc.php
製作者kanateko
ライセンスGPLv3
バージョン0.4
動作確認PukiWiki 1.5.3 ~
最終更新2021-11-26

文中にポップアップ表示可能な注釈を挿入するプラグイン。本家で公開されていた注釈プラグインの仕様をベースに、自作のtooltipプラグインを流用してスマホでも表示できるよう対応させたもの。

ツールチップの表示には「tippy.js」というライブラリを使用している。

このプラグインでできること
  • 文中に挿入された注釈の番号をホバーorタップで内容をポップアップ表示する
    • 同じ内容の注釈を同じ番号で管理できる
    • 注釈と同時にキーワードを設定可能。2回目以降はキーワードを使えば同じ注釈を表示できる
  • 文中に挿入された注釈はフッタに番号順で表示される
  • 注釈の挿入位置から脚注への移動、またはその逆が可能
    • 脚注から挿入位置へ戻る場合は、番号のすぐ横にある「^」を押す

ダウンロード

最新: GitHub

日付バージョン備考
2021-11-260.4
  • 設定ページを使って参照番号のフォーマットを変更する機能を追加
2021-11-250.3
  • 脚注/注釈のアンカーに飛んだ際、上に余白ができるよう調整
2021-11-240.2
  • 脚注から本文に戻るリンクを追加
0.1
  • 初版作成

インストール

  1. GitHubのtippyフォルダ内にある「tippy.php」および「note.inc.php」 *1 をダウンロードする
  2. ダウンロードしたファイルをpluginフォルダに入れる
  3. skinフォルダの「pukiwiki.skin.php」の以下の部分を変更する
      <?php if ($notes != '') { ?>
    - <div id="note"><?php echo $notes ?></div>
    + <div id="note"><?php echo '<ol class="note-foot">' . $notes . '</ol>' ?></div>
      <?php } ?>
    
  4. (任意) skinフォルダの「pukiwiki.css」の下の方に以下の内容を追加する
    /* 注釈/脚注への移動時に上に余白をもたせる (数値は各自調整) */
    .note-anchor {
        display: inline-block;
        margin-top: -200px;
        padding-top: 200px;
    }
    .note-foot li {
        font-size: small;
        margin-top: -200px;
        padding-top: 200px;
    }
    /* ツールチップ下部に表示する脚注へのリンク */
    .note-link {
        font-size: small;
        text-align: right;
    }
    /* ツールチップ内のリンクに下線を引く (tooltipプラグインと共通) */
    [data-tippy-root] a {
        text-decoration: underline whitesmoke solid 1px;
    }
    /* ツールチップ内のリンク色を通常の文章と同じにする (tooltipプラグインと共通) */
    [data-tippy-root] a:link, [data-tippy-root] a:visited {
        color: unset;
    }
    

プラグインの設定

NOTE_SETTING_PAGE
設定用ページ。デフォルトは":config/plugin/note"
NOTE_INDEX_FORMAT
文中に挿入する注釈番号のフォーマット。"%d"部分が数字になる
NOTE_KEYWORD_SEPARATOR
キーワードと注釈のセパレータ
TIPPY_ADD_DEFAULT_SETTINGS (tippy.php)
全てのツールチップの表示設定 (プロパティ) を変更する
デフォルト設定

animation: shift-toward, (表示位置の方向からのスライドイン/アウト)
allowHTML: true, (HTMLタグの使用を許可する)*4
interactive: true (ツールチップを選択したりクリックしたりできるようにする)

TippyのプロパティについてはAll Props | Tippy.jsを参照

設定用ページ

設定用ページ (:config/plugin/note) に定義リストの書式で設定を書くとすべての注釈に反映される。

// 設定ページの使用例
:format|[%d]

例えば上記のように設定ページに書き込むと、参照番号のフォーマットが「*1 *2 *3...」から「[1] [2] [3]...」に変わる。

設定可能な項目とデフォルト値
  • format -- *%d

使用方法

&note([オプション]){<キーワード>:<注釈>};

キーワードが空欄*2の場合は注釈部分がそのままキーワード扱いになる。キーワードを設定しておけば、2回目以降はキーワードのみ記入する*3ことで同じ注釈を表示できる。

オプション

今のところはtippy関係の設定のみ。

arrow=true/false
ツールチップ吹き出しの矢印部分を表示/非表示
maxWidth=<数値>
ツールチップの表示幅の最大値
placement=<位置>
ツールチップの表示位置
表示位置一覧

使用例

ページ内を参照。(注釈1*1、注釈2*2、注釈3*3)

追加したい機能

  • 引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
  • 設定可能なtippyのプロパティを増やす

備考

  • tooltipプラグインと併用する場合tooltipプラグインがv0.4以前だとエラーが起きると思うので注意。
  • 同じ注釈を同じ番号で管理する仕様上、脚注からリンクを使って戻るとその番号の中でも一番最初に挿入されている注釈の位置に飛ぶ。いっそのこと注釈/脚注間の移動はjavascriptで制御したほうがいいかもしれない。

コメント

コメントはありません。 コメント/自作プラグイン/note