自作プラグイン/card

2022-06-01 (水) 13:51:30

カテゴリ:プラグイン 自作 追加

blogcard.jpg

ブログカード風リンク作成プラグイン

card.inc.php
製作者kanateko
ライセンスGPLv3
バージョン3.3
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-06-01

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

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

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

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

ダウンロード

最新: GitHub

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

セットアップ

  1. GitHubから「plugin-card」フォルダをダウンロードし、中にはいっている「plugin」と「image」フォルダをPukiWikiのフォルダに入れる。必要に応じて「image」の中にある「eyecatch.jpg*1」を置き換える。
  2. 「skin」フォルダ内の「card.css」の内容をpukiwiki.cssに追加する。
  3. PukiWikiの設定でマルチラインプラグインを許可する。

pukiwiki.ini.phpの56行目

 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
配置の見本
┣ image
┃ ┗ eyecatch.jpg
┣ skin
┃ ┗ pukiwiki.css ← card.cssの内容を追加
┗ plugin
  ┣ card.inc.php
  ┗ resize.php

プラグイン設定

定数 (PLUGIN_CARD_~)初期値説明
DEFAULT_COLUMNint1デフォルトのカラム数
CHANGE_LAYOUT_THRESHHOLDint3レイアウトを切り替えるカラム数の閾値
HIDE_SNIPPET_THRESHOLDint4スニペットを非表示にするカラム数の閾値
CONTAINER_WIDTHstring'768px'コンテナの幅をデフォルトで設定する
null = 幅を固定しない
USE_CACHEbooltrue各ページの情報をキャッシュする
CACHE_ADMIN_ONLYboolfalseキャッシュの閲覧を管理者のみに許可する
CACHE_PRETTYboolfalseキャッシュを読みやすい形で保存する
CACHE_DIRstringCACHE_DIR . 'card/'キャッシュのディレクトリ
MAKE_THUMBNAILbooltrueページごとにサムネイル画像を作成して保存する
THUMB_DIRstringCACHE_DIR . 'card/thumb/'サムネイル画像のディレクトリ
THUMB_DEFAULTstringIMAGE_DIR . 'eyecatch.jpg'デフォルトのサムネイル画像
THUMB_DEF_DIRECTboolfalseデフォルトのサムネイル画像を使用する場合、ページごとのサムネイルを作成せずに直接使用する
THUMB_WIDTHint320サムネイル画像の幅の最大値
THUMB_HEIGHTint180サムネイル画像の高さの最大値
THUMB_COMP_RATIOint75サムネイル画像のjpeg圧縮率
SNIPPET_LENGTHint200スニペット (本文の抜粋) の文字数
SHOW_SNIPPETbooltrueデフォルトでスニペットを表示する
SHOW_DATEbooltrueデフォルトで更新日を表示する
SHOW_BASENAMEboolfalseデフォルトでベースネーム表示
ERROR_IF_NOT_EXISTSboolfalse存在しないページが含まれている場合にエラーを出す
DEFAULT_JUSTIFYstring'flex-start'カード配置のデフォルト (justify-content)
SHORT_URL_PATTERNstring'/\?([0-9a-f]{10})/'短縮URLのIDパターン (参考)
現状は標準URLかsプラグインを用いた短縮URLにのみ対応
例1:?034d2305ca -> \?({10})
例2:?&
034d2305ca -> \?\&([0-9a-f]{10})
REDIRECT_PLUGINSstring'alias, redirect'リダイレクト系プラグインのリスト
ページのソース取得中にリダイレクトされないようにするためのもの
現状は #plugin(page[,options]) ← この書式に当てはまるタイプにのみ対応

使用方法

#card([1-6][,オプション]){{
[[リンク1]]
[[リンク2]]
︙
or
#ls #recent etc...
}}

カラム数1の場合は記述を省略可。
リンクが1個の場合は引数の最後にページ名かリンクを書くだけでもOK。

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

オプション

カラム数の指定 (1 - 6)

1から6の数字でカラム数を指定する。指定しない場合はデフォルトで1。
カラム数が3以上で縦型のカードに切り替わり、4以上でコンパクト表示になる。

ベースネーム表示 (base)

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

スニペット・日付の非表示 (nosnippet, nodate)

nosnippet = スニペット (本文の抜粋や見出し) の非表示
nodate = 最終更新日時の非表示

指定した見出しの表示 (toc=)

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

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

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

見出しすべてを表示する場合
toc
例:
上からn番目の見出し
toc = n
例:toc=1
見出しのx番目からy番目まで
toc = x : y
例:toc=1:-4
  • xとyには負の数を指定でき、例えば-1なら最後から1番目の見出しということになる
  • xが空欄の場合は一番最初、yが空欄なら一番最後が自動的に指定される
    • 例えば toc = 1 : 3 と toc = : 3 は同じ結果になる
見出しの深さの指定
toc = 1, 2, 3 | [その他の指定]
例:toc=2|1:3
  • 見出し指定の最初で1、2、3のいずれかを指定してバーティカルラインで区切ると深さの指定になる
  • 例えば見出し2 (行頭に**, h3) の1から3を取得したい場合、toc = 2 | 1 : 3 となる

カードの配置 (justify-content準拠)

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はそれぞれ同じ配置になる。

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

justify.jpg

コンテナの幅 (width=)

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

クラス・スタイルの追加 (class=, style=)

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

使用例

最近更新された自作プラグイン

最近更新された自作プラグイン
#card(3,base,center){{
#lsx(自作プラグイン,filter=/,sort=date,num=:9)
}}

キャッシュについて

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

各ページのキャッシュには以下の内容が含まれている。

  • ページ名
  • ベースネーム
  • ページへの (相対) リンク
  • ページの最終更新日時
  • サムネイル画像のパス
  • 本文の抜粋
  • 見出しの一覧

キャッシュの管理機能

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

任意のキャッシュを選んで確認ボタンを押すとキャッシュの削除画面が、詳細を押すと各キャッシュ内容の詳細が表示される。キャッシュの削除には管理者パスワードが必要となる。

cache_list.jpg
キャッシュ一覧
cache_details.jpg
詳細画面

備考

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

コメント

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

  • Pukiwiki公式を見てすばらしいプラグインだなと思いました。
    作成ありがとうございます。
    記事の説明部分なのですが、
    ・記事タイトル
    ・n番目の見出し(変数を与えて指定できるようにする?)
    のようにできたりしたら好みに説明できてうれしいです。 -- 2021-04-26 (月) 00:05:55
    • プラグインのご利用 & コメントありがとうございます。今回頂いたご要望は、「記事のデスクリプションの代わりに指定した見出しを表示する」ということかと思いますが、個人的にあまり用途が思い浮かばない (そういったブログカードを見たことがない) ので、申し訳ないですが実装の優先度は "低" とさせてください。 -- kanateko 2021-04-30 (金) 10:31:53
    • だいぶ遅くなりましたが、記事の説明部分にページの見出しを指定して表示する機能をv2.0で追加しました。 -- kanateko 2021-07-28 (水) 17:15:49
  • 上の方と同じく素晴らしいプラグインだと思います。
    是非使わせていただきたいと思い、私のpukiwiki1.5.2環境で試してみたのですが、サムネイル画像の生成に失敗してしまうようです。
    そこでVanilla Pukiwikiの1.5.2と1.5.3の両方で試したところ、1.5.3は問題なく動作したので、
    1.5.2だから失敗するということで間違いなさそうです。
    大変あつかましいお願いで恐縮なのですが、1.5.2に対応していただくことって難しいでしょうか。。 -- 2022-06-26 (日) 21:52:06
    • コメントありがとうございます。
      推測になりますが、画像の生成自体はできているものの、アクセス権の問題で画像が表示されない状態なのではないでしょうか。
      PukiWikiは1.5.3から各ディレクトリにある.htaccessがApache2.4準拠のものに変更されていて、このプラグインもそれに従って作成しています。このプラグインのサポート (動作確認) が1.5.3からになっているのもこのためです。
      つまり、各ディレクトリにある.htaccessを1.5.3のものに置き換えるだけで動作する可能性があります。もしくはcache/card/thumbに生成された.htaccessの中身を以下のように書き換えてください。
      Order allow, deny
      Deny from all
      <FilesMatch "^([0-9A-F]{2})+?\.jpg$">
          Allow from all
      </FilesMatch>
      ただ、私としてはPukiWiki自体を最新までアップデートすることをおすすめします。 -- kanateko 2022-06-26 (日) 23:02:32
      • 早速のご返信ありがとうございます!
        PukiWiki1.5.3のcache/card/thumbの.htaccessは
        Require all denied
        # card plugin's image cache
        <FilesMatch "^([0-9A-F]{2})+?\.jpg$">
            Require all granted
        </FilesMatch>
        となっておりました。
        1.5.2の.htaccessも同様の記述となっておりました。
        1.5.2の.htaccessをご助言通りに変えてみましたが状況は変わらずでございました。
        今回、不躾なお願いにもかかわらずご助言をいただき感謝いたします。
        もう少し自分で考えてみたいと思います -- 2022-06-26 (日) 23:41:11
      • 別件のご連絡となりますが、box.inc.phpも大変素晴らしいプラグインだと思います。
        デザイン性に乏しい、またはスマホでは見づらいと言われがちなpukiwikiのデザイン性をアップさせるものであると思っており、完成を心待ちにしております。 -- 2022-06-26 (日) 23:46:48
      • すみません、上記.htaccessの書き換え内容に一部間違いがありました。
        誤:Order allow, deny
        正:Order allow,deny
        上のようにカンマの後の空白を削除してください。これで1.5.2でもサムネイルが表示されることを確認しました。 -- kanateko 2022-06-27 (月) 00:39:33
  • ↑ありがとうございます!動きました。導入する過程で気づいた点があるのですが、このプラグインは説明にも書いている通り、「ページの一番最初にある画像を使ってサムネイルを作成する」とあります。この仕様により、ページによっては、PukiwikiのUI画像である
    ./image/paraedit.png
    ./image/edit.png
    がサムネイル画像として処理される場合があるので、これを回避するため
    imageフォルダの画像は無視する処理をこちらで入れました。
    kanateko様のサイトは上記画像を使っていらっしゃらないようなので問題ないと思うのですが、
    他の方が導入される際、こういった問題が発生する場合があるので共有させていただきました。 -- 2022-06-28 (火) 13:10:27
    • imageフォルダの件に関しては元々それを考慮した作りにしてあるはずで、私の1.5.2 - 1.5.4の環境で試した限りではimageフォルダ内の画像を検出することはありませんでした。
      処理的には画像のリンクを探す際に出だしが "./" と相対リンクになっているものに対象を絞っており、通常imageフォルダ内の画像はこれに当てはまりません。
      例えば標準搭載のフェイスマークは"image/face/smile.png"、ツールバーのアイコンは"image/top.png"と言った具合に "./" を含まないため検出しません。
      さらに言えば、imageフォルダ以外でも "./" を含んでいなければ検出されないので、cardプラグインのサムネイルや外部サイトの画像が検出されることもありません。
      そのため、もしこういった画像を検出している場合、その画像のリンクに "./" を含まないよう関連するプラグインの設定・導入を見直すか、おっしゃるようにcardプラグイン側に手を加える必要があります。 -- kanateko 2022-06-28 (火) 13:57:05
      • 参考までに1.5.2でフェイスマークを含むFrontPageをカード表示した際の画面を貼っておきます画像 -- kanateko 2022-06-28 (火) 14:02:16