Movable Type 備忘録

 DJTRによるフリーフォントで日本語表示する

こんにちわ^^

今回はネット上で公開されているフリーフォントを使って動的に、表示させてみたいと思います。

通常、ホームページやらブログを公開した場合、CSSなどでフォントファミリ(font-family)を指定して任意のフォントを指定しますね (￣∇￣)b

CSSなどで指定するフォントファミリは、訪問者さんのブラウザが認識できるもの(パソコンにインストールされているフォント)でなければ期待通りの表示はされませんよね。

もし、サーバにフリーフォントを置いておいて、ページにアクセスされた場合そのフォントが適用されると、とってもいいと思いませんか!? ということをずっ~と考えてたのですが、どうやらそういったことは普通ではないようなんです。

でも、すべてのテキストに適用はできないまでも、一部のテキスト、たとえば、サイトのタイトルだったり、サイドバーの各タイトルなどだったら可能でした!!

今回参考にさせてもらったサイトは以下の通りです。

oaomak.netさん
Dynamic Text Replacement

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

オラオラさん
DJTRの設置はしばらく保留

ありがとうございますですの(●´∀｀●)

実は以前にもTech de Goさんで公開されてる、DJTRを使ってTRYしたことあったのですが、その時は何にも表示されず挫折したんです（つω-`｡）

でも、oaomak.netさんで公開されてる、DJTRのオリジナルであるDTRを使った場合には問題なく表示できるんですけど、欧文フォントしか使えないので諦めてました。

今回も予想通りやっぱりDJTRではページが真っ白になってしまったので、チョビッとくやしくてコード解析して多少変更したら期待通りにラスタライズされました♪

サンプルページ

設置条件

ここで紹介するカスタマイズには以下の制限があります。

  • PHP Ver4.2以上が使用可能なこと

  • サーバにGDライブラリがインストールされてること

  • サーバにfreetype2がインストールされてること

少なくともロリポップ、さくらインターネットでは対応してることを確認しました。
freetype2のインストール確認は以下のコードを適当なファイルにコピペして(たとえば、info.phpというファイル名で保存)してサーバにアップロードします。 そして、ブラウザから表示すれば確認できます。

  1. <?php phpinfo(); ?>

上記表示上のConfigure Commandという欄内に'--with-freetype-dir=●●●'と表示されていれば、freetype2が使用可能なんだそうです。

動作環境について

DTRにしても、DJTRにしてもディレクトリ構成は同じなので、ここでは以下に記すディレクトリ構成として説明します。

  1. http://●●●.com/
  2.  +--- index.html
  3.  +--- styles-site.css
  4.  |
  5.  +--- example/
  6.  | +--- index.php <--- DTR/DJTRの確認用ページ
  7.  | |
  8.  | +--- djtr/
  9.  | | +-- cache/ <--- 作成したイメージをキャッシュするディレクトリ
  10.  | | +-- headings.css <--- CSSで指定されたフォントのイメージを作成します
  11.  | | +-- djtr.php
  12.  | | +-- image.php
  13.  | | +-- azukiLP.ttf <--- CSSで指定された和文フォント
  14.  | |
  15.  | +--- dtr/
  16.  | | +-- cache/ <--- 作成したイメージをキャッシュするディレクトリ
  17.  | | +-- headings.css <--- CSSで指定されたフォントのイメージを作成します
  18.  | | +-- djtr.php
  19.  | | +-- image.php
  20.  | | +-- OzHandicraft.ttf <--- CSSで指定された欧文フォント

ダウンロード

では、実際に表示させてみます。
以下のページから必要な圧縮ファイルをダウンロードしてください。

  • dtr2.zip
    ページ下の方に '40k zip file' というリンクがあります。

  • djtr_pkg_fnt.zip
    フォント付きをダウンロードします。

DTR、DJTRの両方をダウンロードしなくても問題ありません。
ただ、わたしは以前に期待通りの動作がされなかったので、比較のためにダウンロードしました。

ダウンロードしたら、上記ディレクトリ構成のようにサーバにアップロードします。

確認用ページはDTRとDJTRでは異なります。
DTRは和文フォントの表示はできませんのでご注意ください。

DJTRスクリプトの変更

DJTR側のdjtr.phpを以下のように変更します。

  1. 132行目
  2. foreach($attrs as $tcount=>$attd){
  3.     if ( '' == trim($attd) ) continue;
  4.     if(substr_compare(trim($attd),'class=',0)>0){

赤い字の行を追加します。
PHPのバージョン違いのせいなのか、上記箇所でエラーしてるようで、わたしの方では上記のように追加しないと真っ白なページになってしまいました。
上記修正でロリポップ、さくらインターネットで思ったとおりの表示がされることを確認済みです。

変更したらアップロードしてください。

表示確認

ブラウザから、表示確認用ページ(example/index.php)を表示してみてください。
フォントが適用されていればOKです。

DTRではdtr.php内の以下の行で指定された、h1~h3を対象にイメージファイルを作成しています。

  1. 21行目
  2. var $dtr_tags = array('h1', 'h2', 'h3');

DJTRではdjtr.php内の以下の行で指定された、h1~h5を対象にイメージファイルを作成します。

  1. 20行目
  2. var $djtr_tags = array('h1', 'h2', 'h3', 'h4', 'h5');

CSS内でh1~h3のフォントファミリを変更することで、任意のフォントを使用したイメージファイルがcache/ディレクトリ内に作成されます。

注意事項

わたしが気づいた注意点、配布元の注意事項を以下に記します。

  • フォントファミリを変更した場合、キャッシュされたイメージファイルは削除すること。

  • セッションを作成してますので、一時的にクッキーが使用されてます。
    ですので、動作確認中はフォントファミリ変更の際には保存されたクッキーも削除すると無難です。

  • CSS内で指定するフォント名は、ファイル名を指定すること。たとえば、以下のようなかんじ。

    1. azukiLP.ttf の場合
    2. font-family: azukiLP;
    3.  
    4. YOzB04AP.ttf の場合
    5. font-family: YOzB04AP;

  • フォントの拡張子は小文字にすること。たとえば、以下のようなかんじ。

    1. NG：YOzB04AP.TTF
    2. OK：YOzB04AP.ttf

  • ここでは文字コードにUTF-8で動作確認しました。
    djtr.php内の以下の行でUTF-8にエンコードするところがあります。

    1. 83行目
    2. $text=mb_convert_encoding(trim($text),"UTF-8","auto");
    3.  
    4. 105行目
    5. $gis=imagettfbbox($font_size,0,$font_file,mb_convert_encoding($v,"UTF-8","auto"));

    UTF-8以外の文字コードをお使いの人はもしかすると、ここの修正が必要!? かもしれません。

  • width指定された長い文章でも問題なく表示されるようなのですが、わたしの方では確認できませんでした。作成されたイメージが文字化けしてました。
    気力がなかったので流し読みですが、djtr.php内のsplitTag()でイメージ作成してて、そこら辺で 何らかの修正が必要なのかも、です。

以上のことを忘れると、フォントファミリ変更したのに、反映されないなどのトラブルに見舞われます。
わたしはクッキー保存のことで、しばらくハマりました（つω-`｡）とほほ

以上でDTR(Dynamic Text Replacement)の日本語版(DJTR)でフリーフォントを使ったイメージを動的に表示させることができました (￣∇￣)/

わたしのサイトではまだ使ってませんが、もうチョビッと解析して普通に使いこなせるようになったら、実際にテンプレートで使ってみようと思ってます。

 Trackback Pings(0)

No trackbacks found.

 Comments(11)

#1: Posted by arata @ March 25, 2007 [REPLY]
user-pic

これ、面白いですよね。
先日からWindowsローカルサーバーになんとか組み込めないものかと考えてはいるんですが出来ないままです。とても悔しいのです。

 
#2: Posted by bzbell @ March 25, 2007 [REPLY]
user-pic

>>1 arata さん

こんにちわ^^

> これ、面白いですよね。

ですよねっ!!
今回リベンジだったんですけど、やっと表示できましたよ (;￣∇￣A

> ･･･とても悔しいのです。

うん。分かる、分かる!!
わたしも悔しかったからコード解析して、1つ1つ確認用コード入れて、エラーしてる処理を探しまくりましたよ (;￣∇￣A

出力制御されてるから動作確認するの面倒でしたぁ（つω-`｡）

早く、何とかものにしたいものです♪

 
#3: Posted by junon @ March 25, 2007 [REPLY]
user-pic

はじめまして!
DJTRに苦労されたようで、公開しておきながら全くフォローしていないので申し訳ないです。
変更されている部分の修正は必要でしたねー、すみませんでしたm(_ _)m

CSSの設定を、読み込んだdjtr.phpから、レンダリングするimage.phpに渡すためにセッションを使用しているのですが、もしかしたらimage.phpに引数渡しすることにしてセッションを使用しないように作り直した方が良いかもです。

時間が出来たらまた取り組みたいと思っているんですが、これがなかなか．．．．

 
#4: Posted by bzbell @ March 25, 2007 [REPLY]
user-pic

>>3 junon さん

はじめまして^^
いつも拝見させてもらってます♪

> DJTRに苦労されたようで、公開しておきながら全くフォローしていないので申し訳ないです。

いえいえ、とんでもないです!!
今回改めてコード解析したことで、いろんなこと学ばせてもらいました(●´∀｀●)

> もしかしたらimage.phpに引数渡しすることにしてセッションを使用しないように作り直した方が良いかもです。

分かりました。
また時間ができたときにTRYしてみます。
DJTRは是が非でも使いたいので、h1~h5タグに限らず、任意のID/CLASS指定して使えるようにできたらいいな･･･と検討中なんです。

junon さんのブログはサイトもキレイだし、記事も参考になるものが多いのでとっても勉強になってます。
今後も参考にさせて頂きます (m;_ _)mペコ

※トラバさせてもらおうかと思ったのですがURLが公開されてなく、コメントもしないですいませんでした。

 
#5: Posted by oscar @ March 29, 2007 [REPLY]
user-pic

模様替えに夢中で、出遅れましたが・・・
えと、折り返しさえなければ、UTF-8以外でもそのままで使えましたよ。
真っ白という事もなかったし。

 
#6: Posted by bzbell @ March 30, 2007 [REPLY]
user-pic

>>5 oscar さん

こんにちわ^^

テンプレの方は今週末に間に合いそうですか!?

> ･･･UTF-8以外でもそのままで使えましたよ。

ごめんなさい。
今調べたら、mb_convert_encoding()って環境に依存した文字コードからUTF-8に変換するんですね。
勘違いしてました (;￣▽￣A

では、使ってる文字コードには依存しない･･･ということで♪

> 真っ白という事もなかったし。

それなんですよ。
わたしが確認したさくらインターネットとロリポでは記事のように変更しないとエラーしてしまうんです。
PHPのバージョンによるものなんでしょうか。

ちなみに、さくらインターネットでは ver4.4.4 で、ロリポでは ver.4.3.11 でした。

 
#7: Posted by oscar @ March 30, 2007 [REPLY]
user-pic

＞テンプレの方は今週末に間に合いそうですか!?
現在、一生懸命入れ替えてる最中です。でも、ネムイ・・・

＞では、使ってる文字コードには依存しない･･･ということで♪
そうなんですが、もしかしたりボックス幅指定でトリムする処理で、文字を分割する処理に関係があるかもしれないです。なんか奇数行だけ化けたりしてました。

ちなみに、うちは5.2.1ですよ。4.xとも5.0や5.1とも大分違ってるらしいです。

 
#8: Posted by bzbell @ March 31, 2007 [REPLY]
user-pic

>>7 oscar さん

こんにちわ^^

> でも、ネムイ・・・

がんばってください o(￣∇￣)o

> ･･･なんか奇数行だけ化けたりしてました。

確かにわたしの方でも奇数行が文字化けします。

djtr.php内のmb_wordwrap()でmb_strlen()を使用して1行の文字数を取得してました。
ここら辺をよぉ～く解析した方が良さそうですね (￣∇￣)b

> ちなみに、うちは5.2.1ですよ。4.xとも5.0や5.1とも大分違ってるらしいです。

やっぱりですかっ!!
PHPってバージョンによって今まで使ってたスクリプトが動かなくなることがあるってよく聞きますもんね。

 
#9: Posted by oscar @ June 16, 2007 [REPLY]
user-pic

気がつきませんでしたが、TagCloudのページで使ってるんですね。
これは、見た目的にも有効かも。

 
#10: Posted by あーてぃ @ July 16, 2008 [REPLY]
user-pic

>bzbellさま

はじめまして、こんばんは。
当方、javascript、PHPは改造ならなんとか出来るとうい程度の素人です。
Movable Typeのカスタムはそれなりにこなしているので、なんとか知識・経験はあるほうだと思うのですが・・・

以前、自分も同じように真っ白の状態になって挫折していたのですが
あきらめきれずに検索していたところ、google検索よりこちらの記事に辿りつきました。
こちらの記事を参考に、付属のサンプルを動作させるとろこまでは出来ました。
ありがとうございます！

しかし・・・
最終目的のMovable Typeにサンプルより移植作業して導入してみると、動作しません。

ソースを見る限り、djtr.php　が動作していないようです。
画像のcssの新規作成、h2などにclass="djtr"が付与されるなどの動作が一切機能していないようなんですが・・・
Movable Typeへの導入に当たって、なにかサンプルのソース以外に気をつけるべき点をもしご存じであれば、
教えて頂けないでしょうか？

よろしくお願いします。

 
#11: Posted by Author Profile Page bzbellからあーてぃへの返信 @ July 16, 2008 [REPLY]
user-pic

>>10 あーてぃ さん

こんばんわ^^

実は MT には DJTR プラグインなるものがあります。
http://www.zelazny.mydns.jp/archives/001073.php

上記プラグインは Perl のライブラリを別途インストールする必要がありますが、Perl のライブラリさえ組み込んでしまえばお手軽に実現できると思いますようぅ～ん

ちなみにわたしは Perl のライブラリがうまくインストールできなくって挫折したんですのイヤイヤ
ホントはわたしも使いたいんですのキャハハ

 

 Post a Comment

 

コメント用フィード