レ点腫瘍学ノート

Top / pukiwikiカスタマイズ箇所 / 自作プラグイン

imgtext.inc.php

c8b17a2679.png

サムネイル用にページタイトルを取り込んだ画像を出力してくれるPukiwikiプラグイン

ページタイトルと日付を利用して、ブログタイトルなどを記載したpng画像を出力してくれます。最近note.comやはてなブログなどでよく見かけるタイプの画像で、Twitterブログカードなどに最適です。

ダウンロード

GitHubのページからダウンロードして、imgtext.inc.phpをPukiwikiのプラグインフォルダに設置してください。なお、使用前にかならず自身のPukiwikiのバックアップをとってください。

GitHub - m0370/pukiwiki_imgtext.inc.php: サムネイル用に、ページタイトルを取り込んだ画像を出力してくれるPukiwikiプラグイン(プロトタイプ)
サムネイル用に、ページタイトルを取り込んだ画像を出力してくれるPukiwikiプラグイン(プロトタイプ) - m0370/pukiwiki_imgtext.inc.php
https://github.com/m0370/pukiwiki_imgtext.inc.php

インストール

背景画像の準備

文字を重ねるための背景画像を準備します。画像ファイルを準備するほかにも、たとえば無機質でシンプルな画像であればPowerPointなどでファイルを作成し、png形式でエクスポートするという方法があります。出力した画像ファイルはthumbnail.pngなどの名前を付けて、サーバーのskinフォルダなどに保存しておきます。

出力する画像サイズはTwitterブログカード用のサムネイル画像であれば2048x1072を推奨。(参考サイト)そのほかに、正方形の画像を使用するサイトもあります。当サイトでは2048x1072pxのこの画像を使用しています。

フォントの準備

TTFフォントファイルをサーバーに置いておき、そのパスをimgtext.inc.phpに記載しておく必要があります。なお、PHPでimagettftextを使って画像に文字を載せる場合、フォントファイルサイズが大きすぎるとPHPエラーが出るという話があります(個人的には今まで経験していませんが)。そのため、使用するフォントのサブセットを作っておくことが推奨されます。

サブセットフォントメーカーを使ってフォントのサブセットを作るのですが、第一水準漢字までのみ含めるか第二水準漢字まで含めるかは用途に応じて判断してください。小中学校で習う漢字は基本的に第一水準漢字でカバーされますが、比較的日常でも使用する漢字でも第二水準漢字でなければカバーしないものもあります(たとえば胃潰瘍の「瘍」など)。第二水準漢字まで含めれば当然、ファイルは重くなります。

imgtext.inc.phpの初期設定

imgtext.inc.phpの初期設定を行います。背景画像とサブセットフォントさえ準備してあれば、他はほとんど初期設定のままで通用すると思います。

以下はver1.0の初期設定状態です。なお、s.inc.phpとtopicpath.inc.phpに依存しているのでこれらのプラグインがインストールされていない場合はこれらのプラグインも使用可能な状態にしておいてください。

define('IMGTEXT_DIR', 'img/'); // 画像保存ディレクトリ
define('TEMPLATE_IMG', './skin/thumbnail.png'); // テンプレート画像ファイル(Twitterブログカード用の推奨画像サイズ:2048x1072)
define('FONTPATH', './skin/fonts/ipagp.ttf'); // TTFフォントのファイル
define('FONTSIZE', 80); // フォントサイズ(推奨値:80)
define('LEFT', 160); // 左からのテキスト開始位置(推奨値:160)
define('TOP', 240); // 上からのテキスト開始位置(推奨値:240)
define('LINE', 150); // 行の高さ(推奨値:150)
define('SUB_FONTSIZE', 48); // 日時表示のフォントサイズ(推奨値:48)

上記の設定ができれば、このimgtext.inc.phpをpluginディレクトリにアップロードします。

使い方

ページに #imgtext と記載すると指定した画像フォルダにpngファイルのサムネイルを作成してくれます。一度作成するとキャッシュするので、2度目以降はこのプラグインを使わないようにしても画像は保存されています。実際にページを作成しなくても、プレビューするだけでも画像を生成できます。

作成してくれるサムネイルはこういうものです。

参考情報

サムネイル画像をPHPで作成する


この記事に対するコメント

このページには、まだコメントはありません。

お名前:


添付ファイル: fileoncologynote_thumbnail.png 16件 [詳細]

更新日:2024-03-31 閲覧数:125 views.