- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-03-31T03:37:45+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
#author("2024-03-31T21:24:57+09:00;2024-03-31T21:22:56+09:00","default:tgoto","tgoto")
&tag();
#ref(https://oncologynote.jp/img/c8b17a2679.png,eager)
* サムネイル用にページタイトルを取り込んだ画像を出力してくれるPukiwikiプラグイン [#g13ea0ea]
ひとまず作成しました。
ページタイトルと日付を利用して、このようなpng画像を出力してくれます。
自分自身のサイト用に作成した段階なのでフォルダやパラメータなどの微調整は未実施です。
ページタイトルと日付を利用して、ブログタイトルなどを記載したpng画像を出力してくれます。最近note.comやはてなブログなどでよく見かけるタイプの画像で、Twitterブログカードなどに最適です。
* ダウンロード [#ef8075d2]
GitHubのページからダウンロードして、imgtext.inc.phpをPukiwikiのプラグインフォルダに設置してください。なお、使用前にかならず自身のPukiwikiのバックアップをとってください。
#ogp(https://github.com/m0370/pukiwiki_imgtext.inc.php)
* インストール [#yf45acbd]
** 背景画像の準備 [#e70362a6]
文字を重ねるための背景画像を準備します。画像ファイルを準備するほかにも、たとえば無機質でシンプルな画像であればPowerPointなどでファイルを作成し、png形式でエクスポートするという方法があります。出力した画像ファイルはthumbnail.pngなどの名前を付けて、サーバーのskinフォルダなどに保存しておきます。
出力する画像サイズはTwitterブログカード用のサムネイル画像であれば2048x1072を推奨。（[[参考サイト>https://unique1.co.jp/column/sns_operation/3033/]]）そのほかに、正方形の画像を使用するサイトもあります。当サイトでは2048x1072pxの[[この画像>https://oncologynote.jp/?plugin=attach&pcmd=open&file=oncologynote_thumbnail.png&refer=pukiwiki%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E7%AE%87%E6%89%80%2F%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%2Fimgtext.inc.php]]を使用しています。
** フォントの準備 [#tae8f377]
TTFフォントファイルをサーバーに置いておき、そのパスをimgtext.inc.phpに記載しておく必要があります。なお、PHPでimagettftextを使って画像に文字を載せる場合、フォントファイルサイズが大きすぎるとPHPエラーが出るという話があります（個人的には今まで経験していませんが）。そのため、使用するフォントのサブセットを作っておくことが推奨されます。
>
- サブセットフォントメーカー
https://opentype.jp/subsetfontmk.htm
- 第一水準漢字＋第二水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな
https://www.webteq.site/archives/2270
- Noto SansをWeb font化しようとした時にハマった話
https://qiita.com/taka4sato/items/dba258d17d68500081f5
サブセットフォントメーカーを使ってフォントのサブセットを作るのですが、第一水準漢字までのみ含めるか第二水準漢字まで含めるかは用途に応じて判断してください。小中学校で習う漢字は基本的に第一水準漢字でカバーされますが、比較的日常でも使用する漢字でも第二水準漢字でなければカバーしないものもあります（たとえば胃潰瘍の「瘍」など）。第二水準漢字まで含めれば当然、ファイルは重くなります。
** imgtext.inc.phpの初期設定 [#u354dbb6]
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ディレクトリにアップロードします。
* 使い方 [#k967768b]
ページに #imgtext と記載すると指定した画像フォルダにpngファイルのサムネイルを作成してくれます。一度作成するとキャッシュするので、2度目以降はこのプラグインを使わないようにしても画像は保存されています。
ページに #imgtext と記載すると指定した画像フォルダにpngファイルのサムネイルを作成してくれます。一度作成するとキャッシュするので、2度目以降はこのプラグインを使わないようにしても画像は保存されています。実際にページを作成しなくても、プレビューするだけでも画像を生成できます。
#imgtext
#navi(pukiwikiカスタマイズ箇所 / 自作プラグイン)
作成してくれるサムネイルは[[こういうもの>https://oncologynote.jp/img/c8b17a2679.png]]です。
* 参考情報 [#k3a5cbca]
** サムネイル画像をPHPで作成する [#me8a1874]
- PHP - imagettftext
https://www.php.net/manual/ja/function.imagettftext.php
- ブログに投稿するサムネイル画像を自動生成する
https://shoalwave.net/develop/202203072691/
- サブセットフォントメーカー
https://opentype.jp/subsetfontmk.htm
- 第一水準漢字＋第二水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな
https://www.webteq.site/archives/2270
- Noto SansをWeb font化しようとした時にハマった話
https://qiita.com/taka4sato/items/dba258d17d68500081f5
#navi(pukiwikiカスタマイズ箇所/自作プラグイン)
#pcomment