• 履歴一覧
• 現在との差分 を表示
• ソース を表示
• 履歴 を表示
• 自作プラグイン/gallery へ行く。
  • 1 (2021-06-17 (木) 10:39:46)
  • 2 (2021-06-17 (木) 13:11:17)
  • 3 (2021-06-17 (木) 14:03:59)
  • 4 (2021-06-17 (木) 22:41:46)
  • 5 (2021-06-17 (木) 22:41:46)
  • 6 (2021-06-18 (金) 21:51:34)
  • 7 (2021-06-19 (土) 05:52:20)
  • 8 (2021-06-21 (月) 08:30:21)
  • 9 (2021-06-21 (月) 10:50:37)
  • 10 (2021-06-22 (火) 06:27:50)
  • 11 (2021-06-22 (火) 06:27:50)
  • 12 (2021-06-22 (火) 15:29:20)
  • 13 (2021-06-22 (火) 15:29:20)
  • 14 (2021-07-01 (木) 22:12:01)
  • 15 (2021-07-01 (木) 22:12:01)
  • 16 (2021-07-01 (木) 22:12:01)
  • 17 (2021-07-01 (木) 22:12:01)
  • 18 (2021-07-11 (日) 23:54:45)
  • 19 (2021-07-11 (日) 23:54:45)
  • 20 (2021-07-26 (月) 22:28:12)
  • 21 (2021-07-26 (月) 22:28:12)
  • 22 (2021-07-26 (月) 22:28:12)
  • 23 (2021-09-29 (水) 05:23:46)
  • 24 (2021-09-29 (水) 05:23:46)
  • 25 (2021-09-29 (水) 05:23:46)
  • 26 (2022-05-28 (土) 02:10:03)
  • 27 (2022-05-28 (土) 02:10:03)
  • 28 (2022-05-28 (土) 02:10:03)
  • 29 (2022-07-09 (土) 12:05:24)
  • 30 (2022-07-09 (土) 12:07:45)
  • 31 (2022-07-09 (土) 12:07:45)
  • 32 (2022-07-09 (土) 12:07:45)
  • 33 (2022-11-17 (木) 01:08:36)
  • 34 (2023-05-24 (水) 16:24:02)
  • 35 (2023-05-27 (土) 00:40:33)
  • 36 (2023-06-10 (土) 03:06:23)

• 追加された行はこの色です。
• 削除された行はこの色です。

#author("2022-07-06T04:29:04+09:00;2022-05-28T02:10:03+09:00","default:kanateko","kanateko")
#author("2022-07-09T12:05:24+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#style(class=flex){{
|CENTER:|c
|&ref(gallery.jpg,nolink,wrap,400x0);|
}}
#ref(gallery.jpg,nolink,center,wrap,400x)

#contentsx
*画像のギャラリー表示プラグイン [#x4043488]
#infobox(plugin){{
name=gallery
ver=1.8
ver=2.2
pukiwiki=1.5.3
update=2022-05-18
update=2022-07-09
}}


photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。

:このプラグインでできること|
--キャプション付きで画像を一覧表示
---キャプションの表示/非表示の切替
---画像の横幅の変更
---画像を正方形や円に切り抜いて表示
---一覧の左寄せ、中央揃え、右寄せ指定
--クリックorタップで拡大 & スライドショー
---スワイプやピンチなどスマホ操作に対応
--編集無しでキャプション付きの画像を追加可能
---追加ボタンの表示/非表示
---凍結・編集制限付きの場合は追加不可
#box(label,label-style=full,title=このプラグインでできること){{
-キャプション付きでサムネイルを一覧表示する
-様々なオプションを指定可能
--キャプションの表示/非表示
--追加ボタンの表示/非表示
--サムネイルのサイズ
--サムネイルのクロップ
--サムネイルの配置 (justify-content準拠)
--折り返しの有無
--追加画像の挿入位置
-クリックorタップで拡大 & スライドショー
--スワイプやピンチなどスマホ操作に対応
--ファイル名やキャプションを画面下に表示する
-編集無しでキャプション付きの画像を追加可能
--凍結・編集制限付きの場合は追加不可
}}
#clear

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

#style(addstyle=height:500px){{
|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|570|c
|2022-07-09|2.2|#ul(画像の挿入位置を変更するオプションを追加,アクション型にあった脆弱性を修正,各オプションの初期値と初期化のタイミングを変更,画像サイズ計算時の0の扱いを変更)|
|2022-07-09|2.1|#ul(nobreakオプション (折り返しなし) を追加)|
|2022-07-08|2.0|#ul(Photoswipeのバージョンアップに対応,全体的にコードを改良,画像追加時、ページ上に全く同じギャラリーがあるとその全てが書き換えの対象になる問題を修正,キャプションでPukiWiki記法を利用可能に)|
|2022-05-18|1.8|#ul(PukiWiki 1.5.4のURLカスタマイズに対応)|
|2021-09-29|1.7|#ul(ファイルとキャプションのセパレータを変更するための設定を追加)|
|2021-07-26|1.6|#ul(対応する拡張子にwebpを追加&note{:アップロード・一覧表示はできるがスライド表示はできない。};,1回のみ挿入する初期化用のスクリプトを整理)|
|2021-07-26|1.6|#ul(対応する拡張子にwebpを追加,1回のみ挿入する初期化用のスクリプトを整理)|
|2021-07-11|1.5|#ul(初期化用コードの呼び出しが1回だけになるよう修正)|
|2021-07-01|1.4|#ul(他のページの添付画像を指定する場合、階層化されたページを指定すると添付ファイルを正常に取得できなかった問題を修正)|
|2021-06-22|1.3|#ul(一覧画像の高さを設定する機能を追加,上に伴い、デフォルト設定を幅300pxから高さ180pxに変更)|
|~|1.2|#ul(素の状態のPukiWikiだとアップロード後元のページに戻る際にFatalErrorが出る問題を修正,素の状態のPukiWikiだと一覧画像の高さが自動調整されなかった問題を修正)|
|2021-06-21|1.1|#ul(画像のボーダー (縁取り) を無効にする機能を追加,切り抜き時のキャプションはcircleのみ非表示になるよう変更)|
|2021-06-20|1.0|#ul(ページの編集権限をチェックする機能を追加,画像追加ボタンのデザインを調整,画像一覧の左寄せ・中央・右寄せを設定する機能を追加,画像一覧の画像を正方形や円に切り抜いて表示する機能を追加,画像一覧でキャプションを非表示にする機能を追加)|
|2021-06-19|0.7|#ul(ファイルフォーマットの判別を厳正化,アップロードに失敗した場合のエラーメッセージ表示を追加)|
|2021-06-18|0.6|#ul(使用するライブラリをlightboxからphotoswipeに変更,スマホでの操作性を最適化)|
|2021-06-17|0.5|#ul(画像の追加機能を実装,画像追加ボタンの表示/非表示切り替え機能を追加)|
|~|0.2|#ul(他のページの添付画像を表示する機能を追加,一覧表示の画像の横幅を変更する機能を追加)|
|2021-06-16|0.1|初版作成|

}}
*セットアップ [#ma9d057e]
+[[photoswipe:https://photoswipe.com/]]を適当な場所にダウンロード・解凍する。
+解凍した中の「dist」フォルダの名前を「pswp」に変更し、この「pswp」フォルダをPukiWikiの「skin」フォルダに入れる。
--※「default-skin」フォルダおよび「photoswipe.min.js」「photoswipe-ui-default.min.js」「photoswipe.css」以外は削除してもOK。
+[[photoswipe-simplify:https://github.com/min30327/photoswipe-simplify]]を適当な場所にダウンロード・解凍し、dist/js/ の「photoswipe-simplify.min.js」を「pswp」フォルダに追加する。
+GitHubから「plugin-gallery」フォルダをダウンロードし、中にはいっている「gallery.inc.php」をPukiWikiの「plugin」フォルダに入れ、「gallery.css」の内容をpukiwiki.cssに追加する。
+GitHubにある「plugin-gallery」フォルダをダウンロードし、中身 (skinフォルダとpluginフォルダ) をそのままpukiwikiのディレクトリに放り込む。
+PukiWikiの設定でマルチラインプラグインを許可する。
pukiwiki.ini.phpの56行目
#prism(php){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}
+[[URL短縮ライブラリ>Pukiwikiカスタマイズ#url]]を導入している場合は「gallery.inc.php」の "PLUGIN_GALLERY_USE_SHORT_URL" をtrueに変える。

*プラグイン設定 [#l10e79ce]
:PLUGIN_GALLERY_MAX_FILESIZE|アップロード可能なファイルの最大サイズ。デフォルトは1MB
:PLUGIN_GALLERY_USE_SHORT_URL|短縮URLを使用しているかどうか。デフォルトはfalse (参照: [[PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！ | SEの良心:https://dajya-ranger.com/pukiwiki/embed-url-shortener/]])
:PLUGIN_GALLERY_SEPARATOR|ファイルとキャプションのセパレータ。デフォルトは ">"
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^string|'$|DIR \.=COLOR(#cb643d),^(bool|true|false)$=COLOR(#463dcb)){{
|~グローバル&br;(PLUGIN_GALLERY_~)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|PSWP_CORE|string|'https://unpkg.com/photoswipe/dist/photoswipe.esm.min.js'|Photoswipeの必要ファイル(CDN経由)&br;ローカルに保存して使用する場合は要書き換え|
|PSWP_LIGHTBOX|string|'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.min.js'|~|
|PSWP_CSS|string|'https://unpkg.com/photoswipe/dist/photoswipe.css'|~|
|CSS|string|SKIN_DIR . 'css/gallery.css'|PukiWiki用CSS|
|SEPARATOR|string|'>'|画像とキャプションのセパレータ|
|AVAILABLE_FORMATS|string|'/[1-3] or 18/'|対応するフォーマット ([[参考:https://www.php.net/manual/ja/function.exif-imagetype.php#refsect1-function.exif-imagetype-returnvalues]])|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~GalleryActionクラス|
|MAX_FILESIZE|int|1024|ファイルサイズの最大 (キロバイト)|
}}
}}}

*使用方法 [#gf4f575f]
 #gallery([オプション]){{
 ファイル名>キャプション
 ︙
 }}
キャプションは省略可
キャプションやマルチライン部分は省略可。
後々画像を追加する予定で設置しておくだけなら`#gallery`のみでOK。

:オプション|
--''height=数値''
一覧画像の高さを指定する。 (px)
デフォルトは180。
--''width=数値''
一覧画像の横幅を指定する。 (px)
--''noadd''
#box(label,title=オプション,box-color=black){{
:height = < サイズ指定 >|
サムネイルの高さを指定する (px, %, vh, etc...) 。単位がない場合はpx扱いになる。
指定しない場合は自動的に180pxになる。
:width = < サイズ指定 >|
サムネイルの幅を指定する (px, %, vh, etc...) 。単位がない場合はpx扱いになる。
指定しない場合は自動的に高さに合わせて計算される。
:noadd|
画像追加ボタンを非表示にする。
--''nocap''
一覧表示のキャプションを非表示にする。
拡大した際には画面の下に表示される。
--''nowrap''
画像の縁取りを無くす。
--''left / center / right''
画像の一覧を左寄せ/中央揃え/右寄せにする。
デフォルトは中央揃え。
--''square / circle''
一覧表示した画像を正方形/円に切り抜いて表示する。
:nobreak|
サムネイルの折り返しを無効にする。
:nocap|
キャプションを非表示にする。
:nowrap|
サムネイルの縁取りを無くす。
:< justify-contentの値 >|
サムネイルの配置を変更する。
left / start / flex-start: 左詰め
right / end / flex-end: 右詰め
center: 中央揃え
space-around / space-between / space-evenly: 中央揃え + 余白調整
:square / circle|
サムネイルを正方形/円に切り抜いて表示する。
circleの場合キャプションは強制的に非表示になる。
}}

※元のサイズを超える幅や高さは指定できない。超えている場合は元のサイズで表示される。
※サイズの % 指定は個々の画像の元サイズに対する割合。

*使用例 [#me8eb03d]
**ベーシック [#d160327a]
画像の幅は比率を保った状態で自動的に変わる。
**初期状態 (追加ボタンのみ) [#f30f4bba]
 #gallery
#gallery

**画像の追加 [#d160327a]
他のページに添付してある画像を表示する場合は "ページ名/ファイル名" (refプラグインなどと同じ) で記述すればOK。

キャプションにはPukiWiki記法が使える。ただし反映されるのは拡大表示時のキャプションのみ。

 #gallery{{
 cat1.jpg>かわいい
 cat2.jpg
 cat3.jpg
 cat2.jpg>カ&br;ワ&br;イ&br;イ
 cat3.jpg>&color(tomato){kawaii};
 }}
#gallery{{
cat1.jpg>かわいい
cat2.jpg
cat3.jpg
cat2.jpg>カ&br;ワ&br;イ&br;イ
cat3.jpg>&color(tomato){kawaii};
}}

**横幅指定 [#u4dbdfe1]
横幅を指定すると、高さが比率を保ったまま自動的に変わるようになる。

 #gallery(width=150){{
 cat1.jpg>かわいい
 cat2.jpg>カワイイ
 cat3.jpg>kawaii
 }}
#gallery(width=150){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

**横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し [#ibbb6cda]
切り抜きは画像上端の中央が基準点になる。
切り抜きは画像の中央が基準点になる。

 #gallery(width=150,square,left,nowrap){{
 #gallery(width=10vw,square,left,nowrap){{
 cat1.jpg>かわいい
 cat2.jpg>カワイイ
 cat3.jpg>kawaii
 }}
#gallery(width=150,square,left,nowrap){{
#gallery(width=10vw,square,left,nowrap){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

**横幅指定 + 切り抜き (円) + 追加ボタンなし [#w129022b]
キャプションは表示されない。拡大時には表示される。
**横幅指定 + 切り抜き (円) + 追加ボタンなし + 折り返しなし [#w129022b]
円の切り抜きを指定するとキャプションが非表示になる。

 #gallery(width=200,circle,noadd){{
 #gallery(width=200,circle,noadd,nobreak){{
 cat1.jpg>かわいい
 cat2.jpg>カワイイ
 cat3.jpg>kawaii
 ︙
 }}
#gallery(width=200,circle,noadd){{
#gallery(width=200,circle,noadd,nobreak){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

*追加したい機能 [#rc557fc6]
-%%他のページの添付画像使えるようにする%% v0.2で実装
-%%一覧表示時の画像の横幅指定%% v0.2で実装
-%%画像追加機能%% v0.5で実装
-%%添付ファイルの厳正な制限%% v0.7で実装
-%%デザインの調整%% v1.0で一旦完了
-画像の追加位置 (上下) の変更

*備考 [#w4fc27ad]
-%%まっさらなPukiWikiの環境ではテストしてないので、動作や表示がうまく行われない可能性がある。使用に際して何らかの影響があったとしても責任は取りかねますので予めご了承を。%%
案の定まともに動かなかったので修正。
-このページで表示されている追加ボタンのアイコン表示は配布版には実装されていない。 (別途FontAwesomeの導入が必要になるため)
-photoswipe単体だと色々と盛り込むことが多く、プラグイン化するにあたって面倒だったため、下記サイトで公開・配布されていた「photoswipe-simplify」を併せて使うことにした。
#ogp(https://www.willstyle.co.jp/blog/1881/)
-2022年3月末にphotoswipeのメジャーアップデートがあり、対応させるにはプラグインの処理を大幅に変える必要があったため、この機会にと全面改修を行った (v2.0) 。v2.0の動作には&marker{PHP7.4以上};が必要になる。7.3以前は去年でサポート切れているしいいかなと・・・。古いバージョンで動作させる場合、null合体代入演算子 (??=) をnull合体演算子やエルビス演算子に置き換えたり、戻り値の型宣言を削除すれば動くと思われる。
-photoswipe v5 からキャプションのサポートが無くなってしまったので、[[UI要素追加機能>https://photoswipe.com/adding-ui-elements/]]で補っている。最初は[[Dynamic Caption Plugin>https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin]]を使う方向で作っていたが、必要ファイルがごちゃごちゃしてきたため最終的には見送りに。見た目的には上記プラグインを組み込んだ方が v4 以前に近くなる。
*コメント [#n8472dd2]
#pcomment(reply)