#author("2022-05-29T18:57:19+09:00;2021-11-26T21:24:57+09:00","default:kanateko","kanateko")
#author("2022-07-06T04:29:04+09:00;2021-11-26T21:24:57+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

CENTER:#ref(note.jpg,center,nolink,wrap,400x0)

#contentsx

*スマホ表示に対応した注釈/脚注プラグイン [#i0279b82]
#infobox(plugin){{
name=note
pukiwiki=1.5.3
ver=0.4
update=2021-11-26
}}

文中にポップアップ表示可能な注釈を挿入するプラグイン。[[本家で公開されていた注釈プラグイン:https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/note.inc.php]]の仕様をベースに、自作の[[tooltipプラグイン>../tooltip]]を流用してスマホでも表示できるよう対応させたもの。

ツールチップの表示には「[[tippy.js:https://atomiks.github.io/tippyjs/]]」というライブラリを使用している。

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

*ダウンロード [#e789ebf9]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

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

*セットアップ [#w0c581bc]
+GitHubのtippyフォルダ内にある「tippy.php」および「note.inc.php」 &note{注1:同フォルダ内にあるtooltip.inc.phpは必要に応じて}; をダウンロードする
+ダウンロードしたファイルをpluginフォルダに入れる
+skinフォルダの「pukiwiki.skin.php」の以下の部分を変更する
#prism(diff-php diff-highlight){{
  <?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」の下の方に以下の内容を追加する
#prism(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;
}
}}

*プラグインの設定 [#y0def2d1]
:NOTE_SETTING_PAGE|設定用ページ。デフォルトは":config/plugin/note"
:NOTE_INDEX_FORMAT|文中に挿入する注釈番号のフォーマット。"%d"部分が数字になる
:NOTE_KEYWORD_SEPARATOR|キーワードと注釈のセパレータ
:TIPPY_ADD_DEFAULT_SETTINGS (tippy.php)|全てのツールチップの表示設定 (プロパティ) を変更する
#box(label,title=デフォルト設定){{
animation: shift-toward, (表示位置の方向からのスライドイン/アウト)
allowHTML: true, (HTMLタグの使用を許可する)&note{:PukiWiki記法を利用可能にするための設定で、実際にHTMLタグを使用することはできない};
interactive: true (ツールチップを選択したりクリックしたりできるようにする)
}}
Tippyのプロパティについては[[All Props | Tippy.js:https://atomiks.github.io/tippyjs/v6/all-props/]]を参照

**設定用ページ [#z920356a]
設定用ページ (:config/plugin/note) に定義リストの書式で設定を書くとすべての注釈に反映される。
 // 設定ページの使用例
 :format|[%d]
例えば上記のように設定ページに書き込むと、参照番号のフォーマットが「*1 *2 *3...」から「[1] [2] [3]...」に変わる。

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


*使用方法 [#x782d41f]
 &note([オプション]){<キーワード>:<注釈>};

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

**オプション [#zd33297c]
今のところはtippy関係の設定のみ。
:arrow=true/false|ツールチップ吹き出しの矢印部分を表示/非表示
:maxWidth=<数値>|ツールチップの表示幅の最大値
:placement=<位置>|ツールチップの表示位置
#ac(表示位置一覧){{
--top
--top-start
--top-end
--right
--right-start
--right-end
--bottom
--bottom-start
--bottom-end
--left
--left-start
--left-end
--auto
--auto-start
--auto-end
}}

*使用例 [#pd23c0fc]

ページ内を参照。(注釈1&note{注1};、注釈2&note{注2};、注釈3&note{注3};)

*追加したい機能 [#p5860edc]
-引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
-設定可能なtippyのプロパティを増やす

*備考 [#pce650c6]
-[[tooltipプラグイン>../tooltip]]と併用する場合[[tooltipプラグイン>../tooltip]]がv0.4以前だとエラーが起きると思うので注意。
-同じ注釈を同じ番号で管理する仕様上、脚注からリンクを使って戻るとその番号の中でも一番最初に挿入されている注釈の位置に飛ぶ。いっそのこと注釈/脚注間の移動はjavascriptで制御したほうがいいかもしれない。
*コメント [#d0888ec3]
#pcomment(,10,above,reply)
#pcomment(reply)