Single Article

DJTRで日本語を綺麗な画像に変換

PHP+CSS　Dynamic Japanese Text Replacement : DJTRを作ったので公開しておきます。
比較的簡単にタイトルを好みのフォントで表示できるようになると思います。

dtr.gif

１．概要

対象ページのh1~h5までのヘディングタイトルのテキストを、CSSのfont-familyで指定したフォント画像に動的に変換して表示します。テストページの表示を見てください。

２．使用条件

- PHP ver4.2以上、GDライブラリ及びfreetype2が使用できること。
(PHPinfo()のconfigure commandに’–with-freetype-dir=’があれば大丈夫でしょう）

３．設置方法

1.ダウンロード ： 以下のファイルをダウンロードして適当なフォルダに解凍。

手っ取り早く試したい方のためにフォント同梱版も用意しました。添付したのは「YOzフォント」の「ペン字版あんちっくかなP太字」です。この場を借りて制作者の方にお礼を申し上げます。
Y.Oz Vox

2.「djtr」フォルダをフォルダごとサーバにアップロード。
※フォントを追加する場合は「djtr」フォルダにアップロードします。

3.対象となるhtmlファイル(.php)の先頭行に以下を挿入:

<?php include ‘djtr/djtr.php’; ?>

同じく最終行に以下を挿入：

<?php ob_end_flush(); ?>

（上記２行で変換対象のhtmlファイルを挟む感じ。サンプルは同梱のindex.phpを参照。）

※MovableTypeであればテンプレートの始めと終わりに上記を記述します。

4.<head> </head>の間でCSSファイルをリンクする:

<link href=”djtr/headings.css” rel=”stylesheet” type=”text/css” />

または既に使っているCSSファイルの中でインクルードする:

@import “djtr/headings.css”;

5.｢djtr｣フォルダの中の｢cache｣フォルダに書込み(場合により実行)のパーミッション(707など)を与える
※キャッシュを使うことで一回作ったイメージを作り直さないようにしています。
以上で、デフォルトではh3とh4をDJTRします。

４.カスタマイズ

headings.cssの記述
DJTRの対象とするタグについて、cssを記述します。

* font-family : 表示するフォントファイル名を指定（フォント名ではない）
* font-size : 表示するサイズをポイント(ピクセルではない）で指定
* color : フォントの表示カラーを指定。
* background-color : 背景の色を指定（background-imageの指定も可能）。
* a:hover : 上記の色等を指定可能。
* width : 文を折り返す幅（ピクセル）を指定。
* text-decoration: underline
* text-transform: uppercase/lowercase

５．仕組み

簡単にphpスクリプトの仕組みを書いておきます。なお、仕組み自体は、PHP+CSS Dynamic Text Replacementにワードラップや日本語フォントの画像生成のための調整などを施してあります。

djtr.php :

  1. 対象のhtmlを読み込み、headings.cssを読んで
  2. 対象タグの内側に<span>でテキストを囲み、
  3. 対象タグにclass=”djtr”(text-indent:-9999pxによりテキストを隠す）を付加
    ※ちなみに既存のclassに追加します。(例：class=”hoge”→class=”hoge djtr”）
  4. htmlの先頭にCSSを記述し、background-imageをimage.phpで表示するように指定

image.php :

  1. headings.cssで指定されたプロパティに従い
  2. キャッシュファイルがあればそれを出力
  3. 渡されたテキストを透過png形式で描画し
  4. png画像を出力
2007/1/14 17:10 13,056 views
Category: CSS, DJTR, PHP, plugin Tags:, , , ,
Bookmark the permalink. Follow any comments here with the RSS feed for this post.Post a comment or leave a trackback: Trackback URL.

Related Posts

Trackback URL

One Comment

  1. DJTR
    Posted 2008/3/18 at 12:23 am | Permalink

    http://producerdjtr.spaces.live.com
    thanks

7 Trackbacks/Pingbacks

  1. By テックdeGo on 14 Jan 2007 at 10:26 pm

    ブラウザから直接phpを実行できないようにする

    あるphp(1)を他のphpファイル(2)からクエリ情報（?key=value…

  2. By オラオラ on 19 Feb 2007 at 6:22 am

    links for 2007-02-18

    MySQLPHPGrid MySQLデータベースの内容をAjaxで変更できるPHPライブラリ：お??！ (tags: MySQL aja…

  3. By オラオラ on 19 Feb 2007 at 11:44 pm

    PHP5.2.1とあれこれ

    PHPの5.2.1というアップデートが出ていて、セキュリティ対策も含まれてるらしいので、早速アップデートしてみた。前回のインストールの疑問が解決。他にもP…

  4. By 我的春秋 on 22 Mar 2007 at 11:30 pm

    DJTRで日本語を綺麗な画像に変換 | Tech de Go

  5. By MovableType備忘録 on 25 Mar 2007 at 6:58 am

    今回参考にさせてもらったサイトは以下の通りです。 oaomak.netさん Dynamic Text Replacement Tech de Goさん DJTRで日本語を綺麗な画像に変換 オラオラさん DJTRの設置はしばらく保留

  6. By Chess fonts on 28 Mar 2007 at 4:10 pm

    [...] kana, and kanji. They are all free, and cover all platforms. Download page. Yet another URL. Still another URL, where one can find [...]

  7. By はてなブックマーク - タグ php on 29 Mar 2007 at 6:54 pm

    [...] Bookmark.push(’entry-3703002′) DJTRで日本語を綺麗な画像に変換 (テックdeGo) http://www.techdego.com 音楽   :hover cache CSS MovableType PHP 9 users 2007年01月15日 [...]

Post a Comment

Your email is never published nor shared.