自作プラグイン/linkcard の履歴(No.2)

外部リンクカード表示プラグイン

外部リンクからOGP（Open Graph Protocol）情報を非同期で取得し、リッチなリンクカードとして表示するプラグイン。ブログやニュースサイトのような洗練された外部リンク表示を手軽に実現できる。

🔗 OGP非同期取得：URLを指定するだけでタイトル・説明文・画像を自動取得
⚡ 高速なページロード：スケルトンUI（Shimmerアニメーション）を採用。非同期ロードによりページ本体の読み込みを妨げない
💾 インテリジェント・キャッシュ：OGPデータをサーバー側に7日間保存。外部サイトへの重複リクエストを防止し、表示を高速化
⚙️ キャッシュ管理画面：管理者パスワードによる認証付き管理画面 (?cmd=linkcard) で、キャッシュの統計確認、詳細情報の閲覧、個別・一括削除が可能
🖼 画像最適化：取得した画像をWebP形式に変換・リサイズ（240x126px）。通信量を削減しつつ、カードに最適なサイズで表示
🌙 ダークモード対応：ダークモード用スタイル実装済み
📱 レスポンシブ設計：PCだけでなく、モバイル端末の狭い画面でも美しくレイアウトを維持
🛡 セキュリティ配慮：CSRF保護、POSTリクエストによる取得、適切なエスケープ、および画像配信用の.htaccess自動生成

日付	バージョン	備考
2026-03-13	1.2.4	管理画面へのダークテーマ適用管理画面のファイル数カウントをJSONのみに修正
2026-03-13	1.2.3	OGP取得時のUser-Agentフォールバック実装
2026-03-12	1.2.2	セッションロックの早期解放による並列処理の改善一部サイトでのUser-Agent制限による取得エラーの修正
	1.2.1	キャッシュ管理画面の機能拡張（詳細表示・プレビュー・個別削除） PRGパターンの導入
	1.2.0	キャッシュ管理画面の追加スタイル読み込みの最適化
	1.1.0	SSRF対策追加 cURLのリソース制限追加キャッシュGC機能の追加 UAを一般的なブラウザに近いものに変更
	1.0.2	ワンタイムトークンによるPOST認証を追加
	1.0.1	カードホバー時のアウトラインエフェクトを調整
	1.0.0	初版作成

ブロック型プラグインとして、表示したいURLを引数に指定する。

#linkcard(URL)

引数名	説明	例
`URL`	リンク先のURL	`#linkcard(https://google.com)`

基本構成
#linkcard(https://example.com/)

?cmd=linkcard からキャッシュの管理画面にアクセス可能。(要管理者パスワード)

非同期通信:
- ページ読み込み時に、各カード要素が data-url 属性を持って生成される。
- クライアント側の JavaScriptがこれらの要素を検出し、PukiWiki のアクション型プラグイン (?plugin=linkcard) に対して POST リクエストを送信して OGP データを一括ではなく順次取得する。
キャッシュサーバー:
- PHP 側で CACHE_DIR/linkcard/ ディレクトリ内にデータをキャッシュ。
- OGP 情報はブラウザに返す JSON 形式で保存。
- 画像は GD ライブリを使用して、元のアスペクト比を維持しつつ 240x126 に中央トリミングし、WebP 形式で保存（品質 80）。
スタイリング:
- SCSS で記述。グラスモフィズム風の背景や、ホバー時のスムーズなアウトラインアニメーションを実装。
- セーフティとして、OGP取得失敗時や画像がない場合は、ドメイン名のみを表示するシンプルなカード構造にフォールバックする。
- pukiwiki.ini.php 内やプラグイン内で PKWK_SKIN_DARK_THEME を 1 に設定すると、ダークテーマで表示される。
  - CSS をいじればユーザー設定に合わせたテーマの切り替えも可能 (.plugin-linkcard--dark を prefers-color-scheme: dark に書き換えるなど)

Loading comments…