画像スワイプ表示プラグイン

項目	内容
カテゴリー	プラグイン：画像拡張表示
公開日	2022年10月02日
バージョン	1.2.0

SEの良心・友の会

PukiWiki用画像スワイプ表示プラグイン

https://salon.dajya-ranger.com/product/pukiwiki-plugin_image-swipe/

PukiWikiで画像や写真を表示する場合、パソコン優位になってはいないだろうか？本プラグインでは、パソコン・スマホ・タブレットで共通したユーザーエクスペリエンスを提供するべく、画像表示とその操作を拡張する。ページの画像表示に悩んでいる方は必見のプラグインです。

SEの良心BOOTH店 - BOOTH

PukiWiki用画像スワイプ表示プラグイン - SEの良心BOOTH店 - BOOTH

https://dajya-ranger.booth.pm/items/4802655

本プラグインを利用することで、ブロック型プラグインとしてページに添付された単数または複数画像を拡張表示し、次の機能を可能にします（マウス・キーボード・タッチ操作）。・ズーム表示・全画面表示・スワイプ操作・ピンチイン・ピンチアウト操作・SNS（Facebook・Twitter）でのシェアインライン型プラグインとしても動作し、インライン要素内でも単数または複数画像の拡張表示が可能です。

概要

正式公開版です（PukiWiki1.5.3UTF-8版で動作確認済）
本プラグインを利用することで、ブロック型プラグインとしてページに添付された単数または複数画像を拡張表示し、次の機能を可能にします（マウス・キーボード・タッチ操作）
- ズーム表示
- 全画面表示
- スワイプ操作
- ピンチイン・ピンチアウト操作
- SNS（Facebook・Twitter）でのシェア
インライン型プラグインとしても動作し、インライン要素内でも単数または複数画像の拡張表示が可能です
画像の拡張表示は、高さ or 横幅指定（ピクセル単位）・アライメント（左寄せ・中央寄せ・右寄せ）指定・フレーム無し指定が可能で、レスポンシブ対応です
本プラグインの導入には、次のモジュールの導入が前提となります
- PukiWikiダジャレンジャー版共通ファイル 最新版
- PukiWiki用URL短縮ライブラリ Ver1.1.0以上
- PukiWiki用URL短縮対応画像遅延読込・画像リサイズプラグイン Ver1.6.0以上
本バージョンはオンラインサロン会員（PukiWiki開発基本会員以上）向けですが、オンラインストアでも販売しています
本アーカイブのライセンスはGPL v2（もしくは任意のv2以降のバージョン）で、ライセンスが定める諸条件の範囲において個人・法人内部で自由に利用・改変が可能ですが（改変・再配布はコピーレフト）、著作権者の不利益に該当するあらゆる行為はライセンスに関係なく禁止とします

変更履歴

2022/10/02 Ver1.2.0
- DRE_IMAGE_NO_RIGHT_CLICK（画像右クリック禁止）設定対応（サムネイル画像以外は不完全対応）
- サムネイル画像を遅延読み込み化
2022/09/01 Ver1.1.0
- CSSとJavaScriptコードを圧縮ファイルに変更（高速化対応）
2022/08/27 Ver1.0.0
- 画像リサイズプラグインに対応（WebP画像で高速化）
- サムネイル画像にwidthとheight属性を指定
- CSSとJavaScriptコードを非同期読み込みに変更（高速化対応）
- 正式公開（ライセンス変更）
2021/09/17 Ver0.1.0
- 暫定公開

image_swipeプラグイン書式

引数
- width：サムネイル画像横幅（ピクセル）指定（サムネイル画像を横ピクセルで揃える・height指定不可・省略時：240px ※プラグイン内設定）
- height：サムネイル画像高さ（ピクセル）指定（サムネイル画像を縦ピクセルで揃える・width指定不可）
- left：左寄せ
- center：中央寄せ（デフォルト・省略可）
- right：右寄せ
- noframe：サムネイル画像フレームなし指定
※各引数のデフォルト値は次バージョンでPukiWikiエターナルウェア版設定ファイルに移管予定

ブロック型

#image_swipe([width|height=ピクセル指定][,left|center|right][,noframe]){{
画像ファイル名1[:キャプション]
画像ファイル名2[:キャプション]
画像ファイル名n[:キャプション]
}}

インライン型

&image_swipe([width|height=ピクセル指定][,left|center|right][,noframe]){画像ファイル名1[:キャプション][,画像ファイル名2[:キャプション]]･･･[,画像ファイル名n[:キャプション]]};

ブロック型

オプション指定なし（画像高さ指定：240px／画像アライメント：中央／画像フレーム：あり）

#image_swipe{{
ロードランナー.jpg:ロードランナー
タイニーゼビウス.jpg
ギャラクシアン.jpg
ハイドライド.jpg
}}

画像横幅指定：240px／画像アライメント：左／画像フレーム：なし

#image_swipe(width=240,left,noframe){{
ロードランナー.jpg:ロードランナー
タイニーゼビウス.jpg
ギャラクシアン.jpg
ハイドライド.jpg
}}

インライン型

ソートテーブルでの例

#sortable_table(String|,autonum,head=#f0f0f0,odd=#ffffff,even=#f6f9fb,nowrap,width=100){{
|~対象|~ゲーム|h
|CENTER:|LEFT:|c
|PC-6001ml2系|画像アライメント：左／画像フレーム：なし&br;&image_swipe(left,noframe){ギャラクシアン.jpg:ギャラクシアン,グロブダー.jpg:グロブダー};|
|PC-6601系|画像アライメント：中央／画像フレーム：あり&br;&image_swipe(){ロードランナー.jpg:ロードランナー,タイニーゼビウス.jpg:タイニーゼビウスmk2};|
|SR専用|画像アライメント：右／画像フレーム：なし&br;&image_swipe(right,noframe){ハイドライド.jpg:ハイドライド,テラ4001.jpg:スターアーサー伝説Ⅲテラ4001};|
}}

No	対象	ゲーム
1	PC-6001ml2系	画像アライメント：左／画像フレーム：なしギャラクシアングロブダー
2	PC-6601系	画像アライメント：中央／画像フレーム：ありロードランナータイニーゼビウスmk2
3	SR専用	画像アライメント：右／画像フレーム：なしハイドライドスターアーサー伝説Ⅲテラ4001