ogpslider.inc.php

PukiWiki プラグイン

はてなブログやnoteのような大手のブログサービスを見ていると、記事の下や一覧ページに、アイキャッチ画像とタイトルを載せたカードが横一列に並んでいることがよくあります。PukiWikiにも同じ見せ方を持ち込みたいと思い、既存のogp.inc.phpで作ったブログカードを横スクロールで並べるプラグイン、ogpslider.inc.phpを作りました。GitHubでpukiwiki_ogpslider.inc.phpとしてv1.0.0を公開しています。

• 縦に並んだブログカードの問題
• 何をするプラグインか
• 使い方と表示個数
• このページで動かしてみる

縦に並んだブログカードの問題

このサイトでは、関連する記事を紹介するときに #ogpi でブログカードを1枚ずつ縦に並べてきました。1〜2枚なら問題ないのですが、書籍のページのように17枚も続くと、画面をいくらスクロールしてもカードが終わらず、その下に書いた文章まで読者がたどり着けません。カードそのものの見た目は整っていても、ページ全体としてはどうしても野暮ったくなります。PukiWikiが「古いWiki」に見えてしまう原因の一つは、こうした情報の並べ方にあるのではないかと感じていました。

大手のブログサービスが横並びのカードを使うのは、限られた縦幅にたくさんの記事を見せられて、しかも画像が並ぶので一覧として目で追いやすいからでしょう。スマートフォンでは指で横にめくる操作が自然なので、縦に長く伸ばすより相性がいいはずです。ogpsliderはその見せ方を、スキンを触らずにプラグイン1つで実現することを目標にしました。

何をするプラグインか

#ogpslider に並べたいURLを渡すと、各URLのOGP画像を16:9で切り抜き、その下にタイトルを置いたカードを横一列に並べます。説明文とURL欄は隠して、画像とタイトルだけに絞りました。カードを小さくしても一覧として読みやすいようにするためです。スマートフォンではスワイプで、PCではトラックパッドやスクロールバー、左右のボタンで送れます。一覧にキーボードのフォーカスを合わせれば左右キーでも動かせますし、JavaScriptが無効な環境でも横スクロールとリンクは使えます。

OGPの取得は自前でやらず、既存のogp.inc.phpを呼び出して cache/ogp/ のキャッシュをそのまま共有しています。すでに #ogp や #ogpi で表示したことのあるURLなら、新たに外部へ取りに行くことはありません。CSSとJavaScriptはプラグインに内蔵しているので、スキンの編集は不要です。そのぶん、インラインのスクリプトを禁止するCSPを設定しているサイトでは動作が制限されます。

もう一つ手を入れたのがタイトルの表示です。PukiWikiのページ名は 日記/2026年/7月29日/記事名 のような階層になっていて、OGPのタイトルにもそれがそのまま入るため、小さなカードでは肝心の記事名が見切れてしまいます。そこで、同じサイト内のカードに限って、最後の / より後ろだけを表示するようにしました。末尾の「 - サイト名」も取り除きます。

使い方と表示個数

設置は、ogp.inc.php（v3.0以降）が動いている環境の plugin/ に ogpslider.inc.php を置くだけです。書き方は次のとおりで、カードの枚数は max で指定します。

#ogpslider(max=6,https://example.com/article1,https://example.org/article2)

max は画面内に同時に見える枚数ではなくカードの総数で、省略すると6枚、指定できるのは1〜20枚です。ここは一度引っかかりかけたところで、7枚以上並べるつもりで max を書き忘れると、7枚目以降は何も言わずに表示されなくなります。既定値と上限は pukiwiki.ini.php で PLUGIN_OGPSLIDER_DEFAULT_MAX と PLUGIN_OGPSLIDER_MAX を定義すれば変えられます。件数を増やすほど初回のOGP取得が増えるので、サイトの規模に合わせて決めることになります。

URLを並べる代わりに、最近更新したページを自動で選ばせることもできます。recent を付けると、標準の #recent と同じ更新履歴（cache/recent.dat）を読んで、新しい順にカードを作ります。prefix を足せば、ページ名の先頭が一致する階層だけに絞れます。

#ogpslider(recent,max=6,prefix=日記/)

閲覧権限のないページや一覧から除外する設定のページ、カードを置いたページ自身は選ばれません。recent と個別のURLは同時には使えません。

このページで動かしてみる

実際の表示を見てもらうのが早いので、このページと同じ「自作プラグイン」の階層から、これまでに公開した4本を並べてみます。書いたのは次の1行だけです。

#ogpslider(max=4,https://oncologynote.jp/12173bf026,https://oncologynote.jp/b723fa4260,https://oncologynote.jp/c215585539,https://oncologynote.jp/74147cef07)

ページ名は pukiwikiカスタマイズ箇所/自作プラグイン/ogp.inc.php のような階層ですが、カードには ogp.inc.php のように最後の部分だけが出ています。画面の幅が広いPCなら4枚がほぼ収まり、スマートフォンでは2枚目以降が右にはみ出して、指でめくって読む形になるはずです。同じ内容を #ogpi で縦に並べると、カード4枚だけで画面の大半が埋まってしまいます。

先に書いた書籍のページにも同じ置き換えをしてあり、17行あった #ogpi が1行になりました。ただ、横スクロールにすると画面の外にあるカードは読者が自分でめくらないと見えないので、17枚は1本のスライダーとしては多すぎるかもしれません。同じページに何本置いても動くように作ってあるので、ジャンルごとに分けるかどうかは運用しながら決めるつもりです。

画像のない記事は、「画像なし」と書いた灰色の枠で表示されます。OGPや画像を取得できなかったURLも同じ扱いで、リンクだけは残ります。未キャッシュのURLは初回表示のときに順番に取得するため、たくさんのカードを新しく並べたページは最初の1回だけ表示が遅くなります。

プラグインのソースと詳しい説明はpukiwiki_ogpslider.inc.phpに置いてあります。ライセンスはPukiWiki本体と同じGPL v2以降です。

• 前へ
• 次へ
• pukiwikiカスタマイズ箇所/自作プラグイン

更新日：2026-09-11 閲覧数：19 views.