カテゴリ：プラグイン 自作 追加
blogcard.jpg
目次 [表示]

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

card.inc.php
製作者kanateko
ライセンスGPLv3
バージョン2.0
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2021-08-04

指定範囲のリンクを全てブログカード風のリンクに置き換える事ができる。#lsなどページを一覧表示するプラグインと組み合わせることで、ブログの記事一覧のようなページが作れる。

  • このプラグインでできること
    • 指定範囲内にあるリンクを全てブログカード風に変換する。
    • 変換したカードを指定したカラム数で表示する。 (1～6)
    • サムネイルのキャッシュを作成し、表示を高速化する。
    • リンク先ページが更新された場合はキャッシュも更新する。
    • レスポンシブ対応。
    • [リクエスト] 指定した見出しをページから抜き出してカードに表示する。

ダウンロード

最新: GitHub

日付バージョン備考
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から「card.inc.php」フォルダをダウンロードし、中にはいっている「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

プラグイン設定

CARD_DISPLAY_VERTICAL_THRESHOLD
カードを縦長表示に変更するカラム数の閾値。
CARD_HIDE_DESCRIPTION_THRESHOLD
カードの説明文を非表示にするカラム数の閾値。
CARD_ALLOW_CACHE_THUMBNAILS
サムネイルのキャッシュ生成を許可するかどうか。
CARD_THUMB_DIR
サムネイルのキャッシュを保存するディレクトリ。
CARD_USE_SHORT_URL
短縮URLを使用しているかどうか。 (参照: PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！ | SEの良心)
CARD_USE_FONTAWESOME_ICON
Font Awesomeのアイコンを使用するかどうか。 (更新日時の時計アイコン)
CARD_FORCE_BASENAME
強制的にベースネームを表示
CARD_ERROR_ON_NO_EXISTS
存在しないページが含まれている場合にエラーを出すかどうか
CARD_IMAGE_BASELINE_TOP
画像が縦長の場合にサムネイルの切り抜きを上端に合わせるかどうか

使用方法 

#card([1-6][,オプション]){{
[[リンク1]]
[[リンク2]]

or

#ls

etc...
}}

カラム数1の場合は記述を省略可。
リンクが1個の場合は小括弧内にリンクを置くだけでもOK。 (ブランケット必須)

#card([[リンク]])
オプション
  • base
    階層化されたページ名の場合、ベースネーム (階層化されたページの最後の名前) のみを表示する。

  • *, **, ***=<数値>
    抜き出す見出しを指定する。 "*" の個数で見出しの深さ (h2 ～ h4) を決定し、数値で上から何番目の見出しを抜き出すかを指定する。
    例えば、 "**=2" なら上から2番目のh3を指定したことになる。

使用例

全て開く

例1：1列表示 + ベースネーム表示

例2：2列表示 + 見出しの抜き出し

例3：3列表示

例4：4列表示

例5：5列表示

例6：6列表示

備考

  • v1.5からv2.0で定数名やカード部分の構造が大きく変わっているので、カスタマイズして使っていた場合はバージョンアップ時に注意が必要。
  • カードの幅計算や繰り返し処理などをSass (Dart Sass) の方で行っているので、素のCSSの方を弄るのはあまりおすすめしない。

コメント

最新の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
    • こちらも非常におそくなって申し訳ないのですが、
      デスクリプションに見出しを使う機能の対応、誠にありがとうございます。
      自由に表現できるようになり、大変感謝しております。 -- 2023-05-26 (金) 23:36:59
  • 上の方と同じく素晴らしいプラグインだと思います。
    是非使わせていただきたいと思い、私の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
      • ご返信ありがとうございます。エラー内容は「このページは動作していません　●.com では現在このリクエストを処理できません。HTTP ERROR 500」と表示されます。レンタルサーバー（ロリポップ）側で表示しているメッセージと思われます。複雑な記述は行っておらず、オプションなしのカラム数のみの指定です。別のプラグインとネストしているわけでもありません。どうやら当方の環境が原因のようですね…。 -- yu 2022-10-04 (火) 22:24:28
      • ご返信ありがとうございます。エラー内容は「このページは動作していません　●.com では現在このリクエストを処理できません。HTTP ERROR 500」と表示されます。レンタルサーバー（ロリポップ）側で表示しているメッセージと思われます。複雑な記述は行っておらず、オプションなしのカラム数のみの指定です。別のプラグインとネストしているわけでもありません。どうやら当方の環境が原因のようですね…。 -- yu 2022-10-04 (火) 22:25:07
  • ↑ありがとうございます！動きました。導入する過程で気づいた点があるのですが、このプラグインは説明にも書いている通り、「ページの一番最初にある画像を使ってサムネイルを作成する」とあります。この仕様により、ページによっては、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
  • いつもプラグインの作成と公開ありがとうございます。
    以前より「v2.3」を導入させていただいており、このたび「v3.3」に置き換えたところ、＃card記述をしたページが開かなくなりました（HTTP ERROR 500）
    Githubから順に遡ったところ「v3.0」でエラーとなることが判明したので、コードの差異を確認しましたが、大幅に刷新されており原因を調べきれませんでした。
    なにか考えられることはございますか。Wikiバージョンは1.5.3でPHPは7.4です。ご確認お願いいたします。 -- yu 2022-10-02 (日) 09:17:40
    • コメントありがとうございます。
      PukiWiki1.5.3、PHP7.4.28でv3.3を使ってみましたが、私の方では特にエラー等は確認できませんでした。
      差し支えなければエラー内容やページでの記述方法などを教えていただけませんか？ -- kanateko 2022-10-02 (日) 10:07:09
    • ご返信ありがとうございます。エラー内容は「このページは動作していません　●.com では現在このリクエストを処理できません。HTTP ERROR 500」と表示されます。レンタルサーバー（ロリポップ）側で表示しているメッセージと思われます。複雑な記述は行っておらず、オプションなしのカラム数のみの指定です。別のプラグインとネストしているわけでもありません。どうやら当方の環境が原因のようですね…。 -- yu 2022-10-04 (火) 22:25:35
      • ※すみません、上の枝に返信しようとしたのですが、そのまた上の枝に紐づいてしまったようです…。 -- yu 2022-10-04 (火) 22:27:00
      • ※上記の返信の件ですが、2022-10-02 (日) 10:07:09の枝に返信しようとすると、2022-06-26 (日) 23:02:32の枝に返信されてしまうようです。1行目が「コメントありがとうございます。」と同じ一文で終わっていることから、生成されるinput valueの値が同じものになってしまっているようですね。 -- yu 2022-10-04 (火) 22:31:19
      • すみません、エラー云々に関しては少々言葉足らずでした。php.iniなどで設定することで表示できるエラー文を教えていただければ、何行目のどういった処理でエラーが起きているのか知ることができるので、可能であればそれを教えていただきたかったのです。表示方法はこの記事なんかを参考にして貰えればわかるかと。
        それと、コメント欄に関するバグ報告もありがとうございます。改行可能に改造した弊害ですね・・・。これ以上既存のプラグインをいじるよりも、時間が取れれば1から新しいコメントプラグインを作りたいところですが・・・。 -- kanateko 2022-10-04 (火) 22:45:59
      • 勉強不足で申し訳ありません。「v3.3」をUPした際のエラー文は以下の通りでした。
        Parse error: Invalid body indentation level (expecting an indentation level of at least 8) in /省略/plugin/card.inc.php on line 1032 -- yu 2022-10-05 (水) 22:11:11
      • ありがとうございます。見たところヒアドキュメントに関するエラーですね。1032行目にある空行を削除してみるか、それで駄目なら1041行目EOD;前のインデントを全部削除してみるといいかもしれません。 -- kanateko 2022-10-05 (水) 23:11:53
      • 返信が出来ておらず申し訳ありません。
        1032行目の空白行を削除してみたところ、レイアウトが大きくくずれたものの、PHPエラーは発生しなくなりました。
        当方の環境が原因のようですのでもう少し調べてみます。本当は解決してからコメントしたかったのですが、もう数日かかりそうなので取り急ぎ報告まで。ご教示ありがとうございました。 -- yu 2022-10-10 (月) 22:36:34