#author("2022-06-17T12:15:30+09:00;2022-06-01T13:51:30+09:00","default:kanateko","kanateko")
#author("2022-07-06T04:29:04+09:00;2022-06-01T13:51:30+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(blogcard.jpg,center,wrap,400x)

#contentsx
*ブログカード風リンク作成プラグイン [#x4043488]
#infobox(plugin){{
name=card
ver=3.3
pukiwiki=1.5.3
update=2022-06-01
}}

指定範囲の内部リンクを全てブログカード風のリンクに置き換える事ができる。`#ls`や`#recent`などページを一覧表示するタイプのプラグインと組み合わせることで、ブログのエントリーページ (記事一覧) のようなページを作ることができる。カードの表示は横型と縦型があり、指定したカラム数によってこれらが切り替わる。

本プラグインにはキャッシュ機能があり、2回目以降の表示は高速化される。また、Wiki上から各ページのキャッシュを管理できる機能もある。

''このプラグインでできること''
-指定範囲内にあるリンクを全てブログカード風に変換する。
-変換したカードを指定したカラム数で表示する。 (1~6)
--縦型と横型を切り替えるカラム数の閾値を設定可能。
-ページ名もしくはベースネームを表示する。
-自動でサムネイルを作成・表示する。
--ページの一番最初にある画像を使ってサムネイルを作成する。
---画像がなければデフォルトに設定した画像を使用する。
--設定でサムネイル作成の可否を選べる。
-本文の抜粋や最終更新日時を表示する (スニペット) 。
--オプションで指定した見出しや見出しの一覧も表示可能。&size(11){&color(red){New!};};
--抜粋や日時は非表示にすることも可能。&size(11){&color(red){New!};};
-各ページごとにキャッシュを作成し、表示を高速化する。&size(11){&color(red){New!};};
--リンク先ページが更新された場合はキャッシュも更新する。&size(11){&color(red){New!};};
--Wiki上でキャッシュの管理が可能。&size(11){&color(red){New!};};
---キャッシュの一覧表示。&size(11){&color(red){New!};};
---各キャッシュ内容の詳細表示。&size(11){&color(red){New!};};
---キャッシュの削除。&size(11){&color(red){New!};};
-カードの配置方法・表示位置を変えられる。&size(11){&color(red){New!};};
-コンテナにスタイルやクラスを追加できる。&size(11){&color(red){New!};};
-レスポンシブ対応。
#clear

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

#style(height:600px;overflow:auto){{
|~日付|~バージョン|~備考|h
|2022-06-01|3.3|#ul(キャッシュに閲覧制限を設ける機能を追加,キャッシュ詳細画面における見出し一覧の構造を修正)|
|2022-05-28|3.2|#ul(対象が1ページの場合はブラケット無しでページを検出できるように改善,nosnippetオプションの不具合を修正)|
|~|3.1|#ul(tocオプションとhオプションを統合,見出しの取得方法を変更,キャッシュの詳細に情報を追加,キャッシュ保存時間の表示を修正)|
|2022-05-27|3.0|#ul(コードを整理して全体的に作り直し,PukiWiki 1.5.4のURLカスタマイズに対応,サムネイル画像やスニペット、見出しの取得方法を変更,プラグインの設定項目 (定数) を大幅に変更・追加,デフォルトのサムネイル保存場所を変更,見出し表示の指定方法を変更,カードの配置方法を変更するオプションを追加,スニペットに複数の見出しを表示する機能を追加,日付やスニペットを非表示にするオプションを追加,クラスやスタイルを指定するオプションを追加,各ページの情報をキャッシュする機能を追加,キャッシュを管理する機能を追加 (一覧・内容の詳細表示・削除))|
|2021-10-04|2.3|#ul([[figプラグイン>../fig]]に対応)|
|2021-08-23|2.2|#ul(ページ名からファイル名への変換で使用する関数を最適化,キャッシュを生成しない場合の階層化されたページにある画像の取得方法を修正,キャッシュを生成する場合、ページにinfoboxプラグインが使われていた場合の対応を強化,キャッシュ保存時に拡張子が正常に付与されない問題を修正)|
|2021-08-04|2.1|#ul([[infoboxプラグイン>../infobox]]との兼ね合いでサムネイルやデスクリプションを抜き出す際の正規表現を調整)|
|2021-07-28|2.0|#ul(定数 (設定項目) を整理、名称を変更,カード表示エリアの幅を固定化、幅の設定はCSS側に移行,上記に伴って幅の固定化を切り替える設定項目を廃止,カードを縦長表示するカラム数の閾値の設定を追加,各カードの幅をCSSのgridレイアウトで制御するように変更,指定した見出しをデスクリプションの代わりに表示する機能を追加)|
|2021-07-26|1.5|#ul(webpに対応,スラッシュが2つ以上入ったページにある画像がうまく取得できなかった問題を修正)|
|2021-06-29|1.4|#ul(プラグインの呼び出し毎に個別のIDを割り振る機能を追加)|
|2021-06-20|1.3|#ul(画像が縦長の場合にサムネイルの切り抜きを画像の上端に合わせるか設定する機能を追加,存在しないページが含まれている場合にエラーを出すかどうかを設定できるように変更)|
|2021-04-07|1.2|#ul(ベースネーム表示機能追加,カラム数を複数回指定するとエラーが表示されるよう変更,その他バグ修正等)|
|2021-04-04|1.1|#ul(カラム数指定時に確実に引数をintで取得できるよう修正,カードの高さをプラグイン側で調整するよう変更,カラム数2以下の場合はスマホでも横長のカードになるよう変更 (cssの変更のみ))|
|2021-04-01|1.0|#ul(サムネイルの更新機能追加,エイリアスに対応,公開に向けて様々なオプションを追加)|
|2021-03-31|0.6|#ul(サムネイルのキャッシュ機能追加,カラム数指定機能追加)|
|2021-03-30|0.2|#ul(初版作成)|
}}

*セットアップ [#ma9d057e]
+GitHubから「plugin-card」フォルダをダウンロードし、中にはいっている「plugin」と「image」フォルダをPukiWikiのフォルダに入れる。必要に応じて「image」の中にある「eyecatch.jpg&note{:リンク先に画像がない場合に変わりに表示するサムネイル画像};」を置き換える。
+「skin」フォルダ内の「card.css」の内容をpukiwiki.cssに追加する。
+PukiWikiの設定でマルチラインプラグインを許可する。

pukiwiki.ini.phpの56行目
#prism(php){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

:配置の見本|
┣ image
┃ ┗ eyecatch.jpg
┣ skin
┃ ┗ pukiwiki.css ← card.cssの内容を追加
┗ plugin
  ┣ card.inc.php
  ┗ resize.php

*プラグイン設定 [#l10e79ce]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^(string|'[^/]+')$|DIR \.=COLOR(#cb643d),^'/.+/'$=COLOR(#df0606),^(bool|true|false)$=COLOR(#463dcb)){{
|~定数 (PLUGIN_CARD_~)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):160|CENTER:80|120|400|c
|DEFAULT_COLUMN|int|1|デフォルトのカラム数|
|CHANGE_LAYOUT_THRESHHOLD|int|3|レイアウトを切り替えるカラム数の閾値|
|HIDE_SNIPPET_THRESHOLD|int|4|スニペットを非表示にするカラム数の閾値|
|CONTAINER_WIDTH|string|'768px'|コンテナの幅をデフォルトで設定する&br;null = 幅を固定しない|
|USE_CACHE|bool|true|各ページの情報をキャッシュする|
|CACHE_ADMIN_ONLY|bool|false|キャッシュの閲覧を管理者のみに許可する|
|CACHE_PRETTY|bool|false|キャッシュを読みやすい形で保存する|
|CACHE_DIR|string|CACHE_DIR . 'card/'|キャッシュのディレクトリ|
|MAKE_THUMBNAIL|bool|true|ページごとにサムネイル画像を作成して保存する|
|THUMB_DIR|string|CACHE_DIR . 'card/thumb/'|サムネイル画像のディレクトリ|
|THUMB_DEFAULT|string|IMAGE_DIR . 'eyecatch.jpg'|デフォルトのサムネイル画像|
|THUMB_DEF_DIRECT|bool|false|デフォルトのサムネイル画像を使用する場合、ページごとのサムネイルを作成せずに直接使用する|
|THUMB_WIDTH|int|320|サムネイル画像の幅の最大値|
|THUMB_HEIGHT|int|180|サムネイル画像の高さの最大値|
|THUMB_COMP_RATIO|int|75|サムネイル画像のjpeg圧縮率|
|SNIPPET_LENGTH|int|200|スニペット (本文の抜粋) の文字数|
|SHOW_SNIPPET|bool|true|デフォルトでスニペットを表示する|
|SHOW_DATE|bool|true|デフォルトで更新日を表示する|
|SHOW_BASENAME|bool|false|デフォルトでベースネーム表示|
|ERROR_IF_NOT_EXISTS|bool|false|存在しないページが含まれている場合にエラーを出す|
|DEFAULT_JUSTIFY|string|'flex-start'|カード配置のデフォルト (justify-content)|
|SHORT_URL_PATTERN|string|'/\?([0-9a-f]{10})/'|短縮URLのIDパターン ([[参考:https://pukiwiki.osdn.jp/dev/?BugTrack/2525]])&br;現状は標準URLかsプラグインを用いた短縮URLにのみ対応&br;例1:?034d2305ca  -> \?([0-9a-f]{10})&br;例2:?&034d2305ca -> \?\&([0-9a-f]{10})|
|REDIRECT_PLUGINS|string|'alias, redirect'|リダイレクト系プラグインのリスト&br;ページのソース取得中にリダイレクトされないようにするためのもの&br;現状は #plugin(page[,options]) ← この書式に当てはまるタイプにのみ対応|
}}
}}}

*使用方法 [#gf4f575f]
 #card([1-6][,オプション]){{
 [[リンク1]]
 [[リンク2]]
 ︙
 or
 #ls #recent etc...
 }}
カラム数1の場合は記述を省略可。
リンクが1個の場合は引数の最後にページ名かリンクを書くだけでもOK。

 #card([オプション], ページ名 or [[リンク]])

**オプション [#d0f5bd43]
***カラム数の指定 (1 - 6) [#k44f3e8f]
1から6の数字でカラム数を指定する。指定しない場合はデフォルトで1。
カラム数が3以上で縦型のカードに切り替わり、4以上でコンパクト表示になる。
#tab{{
#:1
#card(自作プラグイン)
#:2
#card(2,自作プラグイン)
#:3
#card(3,自作プラグイン)
#:4
#card(4,自作プラグイン)
#:5
#card(5,自作プラグイン)
#:6
#card(6,自作プラグイン)
}}

***ベースネーム表示 (base) [#p7de6f91]
階層化されたページの場合、ベースネームのみを表示する
表示例:PukiWiki/1.4/Manual/Plugin/A-D → A-D

***スニペット・日付の非表示 (nosnippet, nodate) [#p8f8a41a]
nosnippet = スニペット (本文の抜粋や見出し) の非表示
nodate = 最終更新日時の非表示

***指定した見出しの表示 (toc=) [#bdb8a6f0]
カードのスニペットに本文の抜粋ではなくページの見出しを表示する。複数の見出しを表示することもでき、見出しの深さ、表示する見出しの開始位置と終了位置を指定が可能。

複数の見出しを表示する場合、スニペットは3行しか無いので、各見出しを読点でつなげた文に変換して出力する。

オプションの指定は以下のようにして行う。

:見出しすべてを表示する場合|
toc
例:
#card(toc,自作プラグイン/attachlist)

:上からn番目の見出し|
toc = n
例:toc=1
#card(toc=1,自作プラグイン/attachlist)

:見出しのx番目からy番目まで|
toc = x : y
例:toc=1:-4
#card(toc=:-4,自作プラグイン/attachlist)
--xとyには負の数を指定でき、例えば-1なら最後から1番目の見出しということになる
--xが空欄の場合は一番最初、yが空欄なら一番最後が自動的に指定される
---例えば toc = 1 : 3 と toc = : 3 は同じ結果になる

:見出しの深さの指定|
toc = 1, 2, 3 | [その他の指定]
例:toc=2|1:3
#card(toc=2|1:3,自作プラグイン/attachlist)
--見出し指定の最初で1、2、3のいずれかを指定してバーティカルラインで区切ると深さの指定になる
--例えば見出し2 (行頭に**, h3) の1から3を取得したい場合、toc = 2 | 1 : 3 となる

***カードの配置 (justify-content準拠) [#s0008c14]
flex-start, flex-end, start, end, left, center, right, space-between, space-around, space-evenlyのいずれかでカードの配置 (とコンテナの配置) を指定する。指定しない場合はデフォルトでflex-start。

一応justify-contentに準拠した指定方法ほぼ全てに対応しているが、flex-start、start、leftとflex-end、end、rightはそれぞれ同じ配置になる。

#tab{{
#:flex-start, start, left
#card(4,left,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
#:flex-end, end, right
#card(4,right,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
#:center
#card(4,center,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
#:space-around
#card(4,space-around,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
#:space-between
#card(4,space-between,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
#:space-evenly
#card(4,space-evenly,[[自作プラグイン/ac]][[自作プラグイン/attachlist]])
}}

なお、カードが折り返してカラム数に足りない場合、例えばrightを指定してカードを右端に寄せても折り返しは左端からになる。これは意図した仕様なので気に入らない場合はCSSを弄ってもらう必要がある。

#style(addstyle=border-radius:12px;overflow:hidden;){{
#ref(justify.jpg,center)
}}

***コンテナの幅 (width=) [#se65bf2a]
全てのカードを覆うコンテナの幅を指定する。指定しないはデフォルトで768px。
個別のカードの幅はCSSで制御しているため、コンテナ幅を変えてもカラム数が増えるだけでカード自体に変化はない。

***クラス・スタイルの追加 (class=, style=) [#pc3ee762]
コンテナにクラスやスタイルを追加する。複数クラスを追加する場合は半角スペースで区切る。
使用例:class=class1 class2 class3, style=color:red;height:400px;

*使用例 [#me8eb03d]
#tab{{{
#:表示
最近更新された自作プラグイン
#card(3,base,center){{
#lsx(自作プラグイン,filter=/,sort=date,num=:9)
}}
#:ソース
 最近更新された自作プラグイン
 #card(3,base,center){{
 #lsx(自作プラグイン,filter=/,sort=date,num=:9)
 }}
}}}

*キャッシュについて [#nbde6911]
キャッシュは対象のページの更新日時がキャッシュの保存日時よりも新しい場合、もしくはキャッシュやサムネイルが見つからない場合に自動で更新される。

各ページのキャッシュには以下の内容が含まれている。
-ページ名
-ベースネーム
-ページへの (相対) リンク
-ページの最終更新日時
-サムネイル画像のパス
-本文の抜粋
-見出しの一覧

**キャッシュの管理機能 [#lfe9f2e6]
./?cmd=cardにアクセスする (アクション型で使用する) と現在保存されているキャッシュの一覧を見ることができる。

任意のキャッシュを選んで確認ボタンを押すとキャッシュの削除画面が、詳細を押すと各キャッシュ内容の詳細が表示される。キャッシュの削除には管理者パスワードが必要となる。
#flex{{
#fig(cache_list.jpg,width=300px,light,center,cap=キャッシュ一覧)
#-
#fig(cache_details.jpg,width=258px,light,center,cap=詳細画面)
}}

*備考 [#g7d8a926]
-v1.5からv2.0、そしてv3.0で定数名やカードのクラス名など構造が大きく変わっているので、カスタマイズして使っていた場合はバージョンアップ時に注意が必要。また、v3.0からは''作成したサムネイルのデフォルト保存場所が変わっている'' (cache/card/thumb) ので、以前の場所 (image/thumb) にあるサムネイルは削除してしまって構わない。
-カードの幅計算などレイアウトの制御は基本CSSの方で行っているので、サイトに合わせてカスタマイズしたい場合は同梱のSCSSを弄るといい。
-%%何かしらref以外の画像を表示するプラグインを作成する度にサムネイル取得部分を書き直す羽目になっているので、そろそろ取得方法自体を見直すべきかもしれない%%
v3.0でデータの取得方法を根本から変えたので、この問題解消された。

*コメント [#n8472dd2]
#pcomment(,10,above,reply)
#pcomment(reply)