自作プラグイン/note

2021-11-26 (金) 21:24:57

目次 [表示]

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

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

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

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

このプラグインでできること

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

ダウンロード

最新: GitHub

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

セットアップ

GitHubのtippyフォルダ内にある「tippy.php」および「note.inc.php」 *1 をダウンロードする
ダウンロードしたファイルをpluginフォルダに入れる

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 } ?>

(任意) 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で制御したほうがいいかもしれない。

最新の10件を表示しています。コメントページを参照

styleプラグインの中にnoteプラグインを書くと、styleプラグインの中のものの番号が一番後ろになります。
```
&note{:a};
#style(class=hoge){{
&note{:b};
}}
&note{:c};
&note{:d};
```
と書くと
```
*1
*4
*2
*3
```
という感じになって数字が順番に並びません。（動作はちゃんとしています）
他の自作プラグインとの併用の問題はお門違いかもしれませんが
コメントさせていただきました。 -- 2023-05-27 (土) 00:18:11
- 他のプラグインでも報告がありましたが、これはPukiWiki自体のプラグイン処理の順番に起因するもので、プラグイン側で解決することはできないと思われます。 -- kanateko 2023-05-27 (土) 00:43:01
- 返信ありがとうございます。
  プラグインではなく本体側の原因だったのですね。失礼いたしました。 -- 2023-06-04 (日) 16:57:22

新規コメント追加

コメントを送信