Movable Type 備忘録
DJTRによるフリーフォントで日本語表示する
- Next Page: カテゴリごとにテンプレートを切り替える
- Prev Page: moo.fx でアコーディオン表示
こんにちわ^^
今回はネット上で公開されているフリーフォントを使って動的に、表示させてみたいと思います。
通常、ホームページやらブログを公開した場合、CSSなどでフォントファミリ(font-family)を指定して任意のフォントを指定しますね (￣∇￣)b
CSSなどで指定するフォントファミリは、訪問者さんのブラウザが認識できるもの(パソコンにインストールされているフォント)でなければ期待通りの表示はされませんよね。
もし、サーバにフリーフォントを置いておいて、ページにアクセスされた場合そのフォントが適用されると、とってもいいと思いませんか!? ということをずっ~と考えてたのですが、どうやらそういったことは普通ではないようなんです。
でも、すべてのテキストに適用はできないまでも、一部のテキスト、たとえば、サイトのタイトルだったり、サイドバーの各タイトルなどだったら可能でした!!
今回参考にさせてもらったサイトは以下の通りです。
ありがとうございますですの(●´∀｀●)
実は以前にもTech de Goさんで公開されてる、DJTRを使ってTRYしたことあったのですが、その時は何にも表示されず挫折したんです（つω-`｡）
でも、oaomak.netさんで公開されてる、DJTRのオリジナルであるDTRを使った場合には問題なく表示できるんですけど、欧文フォントしか使えないので諦めてました。
今回も予想通りやっぱりDJTRではページが真っ白になってしまったので、チョビッとくやしくてコード解析して多少変更したら期待通りにラスタライズされました♪
設置条件
ここで紹介するカスタマイズには以下の制限があります。
PHP Ver4.2以上が使用可能なこと
サーバにGDライブラリがインストールされてること
サーバにfreetype2がインストールされてること
少なくともロリポップ、さくらインターネットでは対応してることを確認しました。
freetype2のインストール確認は以下のコードを適当なファイルにコピペして(たとえば、info.phpというファイル名で保存)してサーバにアップロードします。
そして、ブラウザから表示すれば確認できます。
<?php phpinfo(); ?>
上記表示上のConfigure Commandという欄内に'--with-freetype-dir=●●●'と表示されていれば、freetype2が使用可能なんだそうです。
動作環境について
DTRにしても、DJTRにしてもディレクトリ構成は同じなので、ここでは以下に記すディレクトリ構成として説明します。
http://●●●.com/
+--- index.html
+--- styles-site.css
|
+--- example/
| +--- index.php <--- DTR/DJTRの確認用ページ
| |
| +--- djtr/
| | +-- cache/ <--- 作成したイメージをキャッシュするディレクトリ
| | +-- headings.css <--- CSSで指定されたフォントのイメージを作成します
| | +-- djtr.php
| | +-- image.php
| | +-- azukiLP.ttf <--- CSSで指定された和文フォント
| |
| +--- dtr/
| | +-- cache/ <--- 作成したイメージをキャッシュするディレクトリ
| | +-- headings.css <--- CSSで指定されたフォントのイメージを作成します
| | +-- djtr.php
| | +-- image.php
| | +-- OzHandicraft.ttf <--- CSSで指定された欧文フォント
ダウンロード
では、実際に表示させてみます。
以下のページから必要な圧縮ファイルをダウンロードしてください。
dtr2.zip
ページ下の方に '40k zip file' というリンクがあります。djtr_pkg_fnt.zip
フォント付きをダウンロードします。
DTR、DJTRの両方をダウンロードしなくても問題ありません。
ただ、わたしは以前に期待通りの動作がされなかったので、比較のためにダウンロードしました。
ダウンロードしたら、上記ディレクトリ構成のようにサーバにアップロードします。
確認用ページはDTRとDJTRでは異なります。
DTRは和文フォントの表示はできませんのでご注意ください。
DJTRスクリプトの変更
DJTR側のdjtr.phpを以下のように変更します。
132行目
foreach($attrs as $tcount=>$attd){
if ( '' == trim($attd) ) continue;
if(substr_compare(trim($attd),'class=',0)>0){
赤い字の行を追加します。
PHPのバージョン違いのせいなのか、上記箇所でエラーしてるようで、わたしの方では上記のように追加しないと真っ白なページになってしまいました。
上記修正でロリポップ、さくらインターネットで思ったとおりの表示がされることを確認済みです。
変更したらアップロードしてください。
表示確認
ブラウザから、表示確認用ページ(example/index.php)を表示してみてください。
フォントが適用されていればOKです。
DTRではdtr.php内の以下の行で指定された、h1~h3を対象にイメージファイルを作成しています。
21行目
var $dtr_tags = array('h1', 'h2', 'h3');
DJTRではdjtr.php内の以下の行で指定された、h1~h5を対象にイメージファイルを作成します。
20行目
var $djtr_tags = array('h1', 'h2', 'h3', 'h4', 'h5');
CSS内でh1~h3のフォントファミリを変更することで、任意のフォントを使用したイメージファイルがcache/ディレクトリ内に作成されます。
注意事項
わたしが気づいた注意点、配布元の注意事項を以下に記します。
フォントファミリを変更した場合、キャッシュされたイメージファイルは削除すること。
セッションを作成してますので、一時的にクッキーが使用されてます。
ですので、動作確認中はフォントファミリ変更の際には保存されたクッキーも削除すると無難です。CSS内で指定するフォント名は、ファイル名を指定すること。たとえば、以下のようなかんじ。
azukiLP.ttf の場合 font-family: azukiLP; YOzB04AP.ttf の場合 font-family: YOzB04AP;フォントの拡張子は小文字にすること。たとえば、以下のようなかんじ。
NG：YOzB04AP.TTF OK：YOzB04AP.ttfここでは文字コードにUTF-8で動作確認しました。
djtr.php内の以下の行でUTF-8にエンコードするところがあります。83行目 $text=mb_convert_encoding(trim($text),"UTF-8","auto"); 105行目 $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(9)
- #2: Posted by bzbell [RES]
>>1 arata さん
こんにちわ^^
> これ、面白いですよね。
ですよねっ!!
今回リベンジだったんですけど、やっと表示できましたよ (;￣∇￣A> ･･･とても悔しいのです。
うん。分かる、分かる!!
わたしも悔しかったからコード解析して、1つ1つ確認用コード入れて、エラーしてる処理を探しまくりましたよ (;￣∇￣A出力制御されてるから動作確認するの面倒でしたぁ（つω-`｡）
早く、何とかものにしたいものです♪
- #3: Posted by junon [RES]
はじめまして!
DJTRに苦労されたようで、公開しておきながら全くフォローしていないので申し訳ないです。
変更されている部分の修正は必要でしたねー、すみませんでしたm(_ _)mCSSの設定を、読み込んだdjtr.phpから、レンダリングするimage.phpに渡すためにセッションを使用しているのですが、もしかしたらimage.phpに引数渡しすることにしてセッションを使用しないように作り直した方が良いかもです。
時間が出来たらまた取り組みたいと思っているんですが、これがなかなか．．．．
- #4: Posted by bzbell [RES]
>>3 junon さん
はじめまして^^
いつも拝見させてもらってます♪> DJTRに苦労されたようで、公開しておきながら全くフォローしていないので申し訳ないです。
いえいえ、とんでもないです!!
今回改めてコード解析したことで、いろんなこと学ばせてもらいました(●´∀｀●)> もしかしたらimage.phpに引数渡しすることにしてセッションを使用しないように作り直した方が良いかもです。
分かりました。
また時間ができたときにTRYしてみます。
DJTRは是が非でも使いたいので、h1~h5タグに限らず、任意のID/CLASS指定して使えるようにできたらいいな･･･と検討中なんです。junon さんのブログはサイトもキレイだし、記事も参考になるものが多いのでとっても勉強になってます。
今後も参考にさせて頂きます (m;_ _)mペコ※トラバさせてもらおうかと思ったのですがURLが公開されてなく、コメントもしないですいませんでした。
- #6: Posted by bzbell [RES]
>>5 oscar さん
こんにちわ^^
テンプレの方は今週末に間に合いそうですか!?
> ･･･UTF-8以外でもそのままで使えましたよ。
ごめんなさい。
今調べたら、mb_convert_encoding()って環境に依存した文字コードからUTF-8に変換するんですね。
勘違いしてました (;￣▽￣Aでは、使ってる文字コードには依存しない･･･ということで♪
> 真っ白という事もなかったし。
それなんですよ。
わたしが確認したさくらインターネットとロリポでは記事のように変更しないとエラーしてしまうんです。
PHPのバージョンによるものなんでしょうか。ちなみに、さくらインターネットでは ver4.4.4 で、ロリポでは ver.4.3.11 でした。
- #7: Posted by oscar [RES]
＞テンプレの方は今週末に間に合いそうですか!?
現在、一生懸命入れ替えてる最中です。でも、ネムイ・・・＞では、使ってる文字コードには依存しない･･･ということで♪
そうなんですが、もしかしたりボックス幅指定でトリムする処理で、文字を分割する処理に関係があるかもしれないです。なんか奇数行だけ化けたりしてました。ちなみに、うちは5.2.1ですよ。4.xとも5.0や5.1とも大分違ってるらしいです。
- #8: Posted by bzbell [RES]
>>7 oscar さん
こんにちわ^^
> でも、ネムイ・・・
がんばってください o(￣∇￣)o
> ･･･なんか奇数行だけ化けたりしてました。
確かにわたしの方でも奇数行が文字化けします。
djtr.php内のmb_wordwrap()でmb_strlen()を使用して1行の文字数を取得してました。
ここら辺をよぉ～く解析した方が良さそうですね (￣∇￣)b> ちなみに、うちは5.2.1ですよ。4.xとも5.0や5.1とも大分違ってるらしいです。
やっぱりですかっ!!
PHPってバージョンによって今まで使ってたスクリプトが動かなくなることがあるってよく聞きますもんね。
これ、面白いですよね。
先日からWindowsローカルサーバーになんとか組み込めないものかと考えてはいるんですが出来ないままです。とても悔しいのです。