Single Article

テキストを画像に変換するプラグインwp-DJTR

以前に作成したDJTR(Dynamic Japanese Text Replacement)をwordpressのプラグインにしました。true type font(ttf)から画像を生成するものです。

同様のプラグインにhiromasa.zone :o) » wp-tegaki をつくってみる, Image Replacement WordPress Plugin - Development on a Shoestrin などが既にあるので、いまさら感がありますし、こっちはコードも汚いです(直し途中です)。基本的にやっていることは同じです。仕様は違いますが。

こんなやつです

機能・仕様

  • 関数(wp-djtr())により、テンプレートでテキストを変換。
  • インライン変換により、投稿中で変換するテキストを指定。
  • 画像は背景透過(PNG-8形式なのでIEでもハックなしで透明になります)、背景色指定も可。
  • widthで画像を分割するピクセル数を指定することによる、複数行にわたるテキストの画像化。
  • ffamilyでフォントファイルを指定することによる複数のフォントの使い分け。
  • 一度生成した画像はキャッシュして高速(?)表示

インストール

  1. 以下よりzipファイルをダウンロードし解凍、wp-DJTRフォルダごとpluginsフォルダにアップロードして、activateしてください。
  2. true typeフォント(ttf)は同梱していません。ttfファイルをwp-DJTRフォルダに入れてください。
  3. cacheフォルダとconfig_djtr.phpに書込み属性を与えてください(700でイケるはずですが)。
  4. 'DJTRというメニューから、アップロードしたttfファイルを指定して保存(Update Options)、同ページ下部に文字画像が出ていることを確認してください。

ダウンロード :  wp-DJTR 0.5.5.zip (1127)

使用方法

  1. インライン変換:投稿中の下記フォーマットを画像(imgタグ)に変換します。

    <!-- djtr [options] -->変換対象テキスト<!-- any text -->

    例:<!-- djtr fsize=20&fcol=#F30&width=400 -->ほげほげ<!-- -->

    ほげほげ

  2. タグ変換:このブログの記事タイトルのようにテンプレート中で記述する際の関数です。

    wp_djtr( string text, [string options]);

    例: wp_djtr( get_the_title(), "ffamily=sazanami-gothic.ttf&width=500&bcol=#050" );

  3. options

    フォーマット: option1=value1&option2=value2&...

    fcol フォントの色 fcol=#FOFOFO / fcol=#A0B
    fsize フォントの大きさ(pt) fsize=12 (12ポイント)
    bcol 背景色(transbgがfalseの場合) bcol=#FAFAFA / bcol=#FFF
    transbg 背景色透明 transbg=true / transbg=false
    width 折り返しの幅(px)
    (imgタグを分割生成し、並べて出力)
    width=400
    ffamily フォントファイル名 ffamily=sazanami_gothic.ttf (大文字小文字を区別)

テンプレート変更の具体例

テンプレートを変更して記事のタイトルを画像化する場合の変更の例です。

記事タイトルを表示する、the_title();を探します。記事を表示するテンプレート(index.php, single.php, archive.phpなど)には必ずあるはずです。デフォルトテーマのindex.phpでは以下のような記述です。

PHP

<h2><a href="<?php the_permalink() ?>" ..(中略).. <?php the_title(); ?></a></h2>

上記の<?php the_title(); />の部分を、以下のように変更します。

PHP

<?php wp_djtr( get_the_title(), "ffamily=hoge.ttf&width=500" ); ?>

注意点等

  • 描画スピードを得るため、DBではなく、デフォルト設定をファイル(config_djtr.php)で渡します。同ファイルが書込み可能であれば、optionsメニューから設定するとこのファイルが変更されるはずです。変更できない場合は直接ファイル内容を変更してください。
  • フォントファイル(.ttf)を直接ダウンロードさせないように.htaccessファイルを同梱しています。
  • GPLライセンスです。改変、再配布は自由です。ただしコードは作者の意図に反して非常に分かりにくくなっています :)
  • インライン変換は2つのコメントに挟まれたテキストを2つのコメントごとimgタグに変換します。プラグインを外すと普通のテキストとして表示されます。
  • 簡単な禁則処理をします。処理されない文字があれば、djtr.phpの行頭/行末禁則文字(コメントしてあります)に追加してください。
  • テストは不十分です。おそらく不具合も一部有るかと思います。使って不具合があれば、コメントでご報告いただけると助かります。

変更履歴

  • 2007/4/19: Ver0.3.9 リリース
  • 2007/4/20: Ver0.4.0 基本的な禁則処理をするようにしました。追い出し処理します。字間は調節しません(できてません)。
  • 2007/5/1: Ver0.4.3 PHP4でエラーが出るバグを修正。ファイルをUTF-8で保存。
  • 2007/5/9: Ver0.4.9 初期設定時のバグを修正。get_wp_djtr関数を追加。プラグイン説明からのリンク修正。
  • 2007/5/30:Ver0.5.0 stripos(PHP4でエラー)を使わないように変更。
  • 2007/5/31:Ver0.5.5 オプション画面での動作を変更。エラー処理のバグを修正。

Related Posts

Trackback URL

27 Comments

  1. とおり
    Posted 2007/4/19 at 12:50 pm | Permalink

    「複数行にわたるテキスト」の処理をするなら、ハイフンや禁則処理をしないと話にならないですよ。

  2. Posted 2007/4/19 at 1:26 pm | Permalink

    とおりさん
    ご指摘ありがとうございます。禁則処理、重要ですね。早速基本的な禁則処理に対応したいと思います。

  3. Posted 2007/5/1 at 12:33 am | Permalink

    デフォルト設定で、

    Fatal error: Call to undefined function: scandir() in /home/masayashi/www/wp-content/plugins/wp-DJTR/djtr.php on line 312

    のエラーが出てしまいました…><

  4. Posted 2007/5/1 at 1:44 am | Permalink

    masayashiさん
    PHP4ではエラーが出ますね。すみません。
    Ver0.4.3で修正しました。すみませんが、このバージョンでもう一度トライしてみてください。

  5. Posted 2007/5/1 at 11:39 am | Permalink

    Ver0.4.3で正常な動作を確認できました!
    ありがとうございます!

  6. 木公
    Posted 2007/5/7 at 5:20 am | Permalink

    初めまして。エラーを見つけたのでご報告をさせて頂きます。Verは0.4.3です。

    WPのME2.1.2を使っているのですが、各種設定画面でオプションとフォントが表示されているのにも関わらず、サイズや色の変更を行ってもconfig_djtr.phpに反映されず、「デフォルト設定での表示例:」と実際のタグ変換時にエラー文が表示される、といった現象が起きました。
    直接config_djtr.phpのフォント名を書き換えてUPした所、今度は設定画面上で問題なく大きさやサイズを変更することができましたけども。

    あと恐縮なのですが、ブログの記事タイトルの部分を画像に変換する際のwp_djtr( string text, [string options]);は、どのファイルのどの部分に記述すればいいのでしょうか。

  7. Posted 2007/5/7 at 11:12 pm | Permalink

    木公さん
    はじめまして。ご報告ありがとうございます。
    該当する箇所を見てみたのですが、分かりませんでした。

    恐縮ですがお使いのPHPのバージョンと、表示されるエラー文を教えていただけますでしょうか?

    また、記事タイトル部分の変換は、普通のテーマだと、index.phpやsingle.phpなどに出てくるthe_title();という部分を、wp_djtr(get_the_title());と記述していただければ変換するはずです。

    よろしくお願いします。

  8. 木公
    Posted 2007/5/8 at 2:01 am | Permalink

    質問に答えてくださってありがとうございます。
    エラー文は
    DJTR_FONTFILE invalid. Defined as “サイト/www/wp-content/plugins/wp-DJTR/LOGOG_BG.ttf”
    でPHPのバージョンは
    Version 4.4.6
    でした。

  9. あきくん
    Posted 2007/5/9 at 5:04 pm | Permalink

    はじめまして、素晴らしいプラグインをありがとう。

    私も上の「木公」さんと同じエラーメッセージが出ましたが、config_djtr.php を書き換えて対応しました。

    ソースを追跡していないので不明ですが、問題点ではないかと思う部分を記載しますね。
    ============================================
    1)デフォルトで適用されるオプションの設定:
    この項目に出てくるフォントは、config_djtr.phpの内容に関わらず、プラグインディレクトリに置いてある「フォント『名』」を自動で読み込み、その名前が出ています。
    (例えば私の場合だと、aquafont.ttf)

    2) 1)にもかかわらず、実際に読み込みに行こうとする「フォント」は config_djtr.php に記載されているLOGOG_BG.ttf というフォントのようです。

    3) 2)であるため、エラーが出て、エラーがでると、Updateボタンが(パーミッションに関係なく)消えてしまい、管理画面内から修正できません。
    ============================================

    あれば良いのではないかと思ったもの。
    wp_djtr()は、echoをしてしまいますが、echoをせずに文字列として返す関数もあれば良いと思いました。
    (関数の中等に組み込みやすくなります)

    (wpで言えば、ちょうど the_**** 系関数と get_the_***** 系のように)

    function wp_djtr() {
    $num_args = func_num_args();
    ・・・・
    $djtr->text = $txt;
    echo $djtr->get_img_tag();
    }

    function get_wp_djtr() {
    $num_args = func_num_args();
    ・・・・
    $djtr->text = $txt;
    return $djtr->text;
    }
    (このような重複記述はアレですが…とりあえず意図を伝えるために…)

    以上となります。ありがとうございました~

  10. Posted 2007/5/10 at 12:23 am | Permalink

    木公さん
    返答が遅くなってすみません。
    修正しましたので、Ver0.4.8で試していただければ、多分、大丈夫だと思います。

    ご不便をおかけしました。

  11. Posted 2007/5/10 at 12:30 am | Permalink

    あきくん さん

    はじめまして!非常に有益な情報をありがとうございます!
    おっしゃるとおり、最初の設定時にフォントが無いのでエラーになり、そのためUpdateボタンが押せないので設定もできないという、テスト不足丸出しのバグでした。
    すみません。

    Ver0.4.8では、ご提案のとおり、get_wp_djtr()という関数(使い方はwp_djtr()と同じ)を作りました。
    この関数は単にechoするかどうかの違いなので問題は起きないと思います。

    また何かありましたらよろしくおねがいします!

  12. あきくん
    Posted 2007/5/10 at 2:28 am | Permalink

    すばやい修正・get関数の導入ありがとうございます。
    get関数はうまく動作することを確認しました。

    小さなケアレスミス(?)を発見しました。
    WordPressの「プラグイン管理画面」で、(うーんと「プラグイン一覧画面」と言った方がわかりやすいでしょうか)

    Quote:”
    ==================================
    プラグイン|バージョン|概要|アクション|
    ==================================

    とありますが、ここの

    Quote:”
    「Replace texts with images using true type font. See [[options page]] for further instructions. By [[Junon]].」

    の、options page の部分のリンクがオプション画面に飛びません「\(円・バックスラッシュ)」と「/(スラッシュ)」の問題であると思います。
    (Winサーバーだともしかすると「\」でも動作するのかな?)

    小さなミスですがとりあえずご報告でした~

  13. ヨスィダ
    Posted 2007/5/30 at 9:28 am | Permalink

    はじめまして。
    本プラグインをぜひとも導入したいのですが、
    オプション設定のところに以下のエラーが表示されます。

    Fatal error: Call to undefined function: stripos() in /home/sites/lolipop.jp/users/lolipop.jp-dp09093272/web/wp/wp-content/plugins/wp-DJTR/djtr.php on line 322

    入れたTTFファイルは HuiFontP28.ttf
    WordPressME 2.1.3
    PHP 4.3.11 です。
    よろしくお願いいたします。

  14. Posted 2007/5/30 at 11:40 am | Permalink

    ヨスィダさん
    はじめまして。

    すみませんstripos()はPHP4では未対応ですね。
    いま会社なので今晩中に直します。
    とりいそぎ、お返事まで。

  15. Posted 2007/5/30 at 10:12 pm | Permalink

    ヨスィダさん

    ご報告ありがとうございました。
    修正したVer0.5.0で、ご報告いただいたエラーは出ないと思います。
    すみませんが、再度ダウンロードして試してみてください。

    よろしくおねがいします。

  16. ヨスィダ
    Posted 2007/5/31 at 1:13 pm | Permalink

    junonさん、早速の修正ありがとうございます。
    おかげさまで、先だってのエラーは出なくなりました。
    が、オプション画面で以下の状態となります。

    (1)オプションは表示されるのですが、「Update Options」ボタンが出てこないため、設定が変更できません。

    (2)「デフォルト設定での表示例」の箇所に以下の表示が出て、表示例は出ません。これは(1)に関連していると思います。
    DJTR_FONTFILE invalid. Defined as “/home/sites/lolipop.jp/users/lolipop.jp-dp09093272/web/wp/wp-content/plugins/wp-DJTR/LOGOG_BG.ttf”

    とりあえず、config_djtr.phpファイル内のフォント名を直接書き換えることで動作はしました。

  17. ヨスィダ
    Posted 2007/5/31 at 1:27 pm | Permalink

    すいません。一度目の投稿時に通信が途絶えたため、再送信したら二重投稿になってしまいました。

    もうひとつ、お教えいただきたいことがあります。

    記事中に「このブログの記事タイトルのようにテンプレート中で記述する際の関数です。」とありますが、記事タイトルで使用する際の関数の組み込みの具体例を示していただけると非常に助かります。
    #組込み先ファイルはpost-template.phpでしょうか??

  18. Posted 2007/5/31 at 11:26 pm | Permalink

    ヨスィダさん
    ご報告ありがとうございます。
    いただいた情報を元に、再度修正しました。

    また、組み込み先ファイルの件は、この記事本文に追加しましたのでご参考にしてください。

    post-template.phpはWP本体のファイルなので、変更しないでください。
    書き換えるべきファイルは、wp-content/themes/使用中のthemeフォルダ の中にある、index.phpなどです。
    よろしくおねがいします。

  19. Posted 2007/6/1 at 8:43 am | Permalink

    junonさん、迅速な対応、ほんとうにありがとうございます。最新バージョンで問題なく動作することを確認しました。
    また、記事タイトルへの組み込み方法も作成していただき、ありがとうございました。おかげさまで私のブログの記事タイトルもいい感じになって、すごく満足しています。

  20. Posted 2007/8/7 at 4:11 pm | Permalink

    すみません。
    もしかするとどっかで基本的なミスを犯しているのかもしれませんが、下記のようなエラーメッセージがタイトル部分にでてしまいます。
    WP-DJTR : Font file /virtual/…/wp-content/plugins/wp-DJTR/hogehoge.ttf does not exists.
    ちなみに、2行になるタイトルの場合は、2行目が1行目の前に重複して表示されてしまっています。
    お忙しい中恐縮ですが、解決策を教えていただけますと大変助かります。
    どうぞよろしくお願いします。

  21. Posted 2007/8/28 at 9:26 am | Permalink

    初めましてjunonさん。

    うちのサイトでも使わせてもらっています。
    ひとつ要望があります。

    うちではエントリタイトルと、ブログのタイトル2カ所に使っていて、それぞれ背景色が違います。
    プログラムを見る限り、透過処理を白で決め打ちしているようですが、これを任意に決めるようにしたいです。

    透過処理有りの時にbgcolを無効にせずに、透過処理時の背景色として利用できると思い色々とやってみましたが、なかなかうまく行かないので、こちらに相談した方が早いかも……と思い相談しました。

  22. kentan
    Posted 2007/11/18 at 8:32 pm | Permalink

    プラグイン使わせて頂きました。
    要望がございます。

    長い文章を打った場合、分割でpngに出力にするのではなく1つのpngファイルに出力するオプションをつけれませんでしょうか。
    また、タグ途中に改行があるとプラグインが動作しないので分を打つ時に任意に改行ができません。
    開始タグから終了タグまでの間の分(改行含む)を1つのpngファイルに出せるようにできませんでしょうか。

    ご検討をお願い致します。

  23. Posted 2008/2/14 at 7:51 pm | Permalink

    はじめまして、Uと申します。

    とてもかっこよく使い勝手もいい
    素敵なプラグインをありがとうございます。

    ただひとつわからず困っていることがありまして‥

    カテゴリーページのテンプレート中で
    wp_djtr( get_the_title())を使うと
    カテゴリーのタイトルではなく
    そのカテゴリーに表示されている1番上の記事のタイトルが
    画像に変換されてしまいます。

    get_the_title()の部分を
    どのようなものに置き換えれば
    カテゴリーのタイトルが表示されるのでしょうか。

    ワードプレス暦が浅く
    PHPもまだよくわからない状態なので
    本や色々なサイトを調べて試してみたのですが
    わかりませんでした。

    お手数だとは思いますが
    お教えいただけませんでしょうか。

    何卒よろしくお願い致します。

  24. たびねこ
    Posted 2008/5/7 at 8:08 pm | Permalink

    はじめまして。
    DJTR plugin for WordPress 0.5.5をダウンロードして、いろいろなツールで解凍を試みてみたのですがエラーが出て解凍がうまくいきません(^^;

    どのツールで解凍できるでしょうか?

  25. Posted 2008/5/16 at 4:36 pm | Permalink

    こんにちは、よさそうなpluginですね、
    ところで、zipファイルを解凍しようとすると、「圧縮する」となり無限 圧縮→解凍 になります。
    で、元のファイルに辿り着けないのですが、僕だけでしょうか?また、もういちど新しくuploadしていただけたらさいわいです。

  26. ha23
    Posted 2008/5/31 at 10:44 pm | Permalink

    DJTR、ダウンロードした.zipファイルが0kbです。中身が無いみたいなんですけど。

  27. shama
    Posted 2008/6/12 at 11:25 am | Permalink

    junonさん、はじめましてこんにちは!

    CSS関連のすばらしい情報をいつもありがとうございます!

    今まで気づかなかったのですが、最近になってWPを始めまして、DJTRのプラグインの存在を知りました。これはスゴイと思いダウンロードして早速弄ってみようかと思いましたが、dataが破損しているようですので、ご連絡差し上げました。

    お忙しい中とは思いますが、お気付きになられましたら、ご確認いただければ幸いです。

    宜しくお願い申し上げます。

6 Trackbacks/Pingbacks

  1. [...] テキストを画像に変換するプラグインwp-DJTR | Tech de Go [...]

  2. I Am A Photograph…

    news…

  3. [...] Visit [...]

  4. [...] wp-DJTR [...]

  5. [...] ついでに不要なプラグインの整理を行って、WP Super CacheやSimpleTagsなど有益なプラグインも導入しました。 中でもWP-DJTRというプラグインは面白いですよ~~? [...]

  6. [...] テキストを画像に変換するプラグインから「wp-DJTR」をダウンロード [...]

Post a Comment

Your email is never published nor shared.