Tag Archives: HTML

Smarty:HTMLをちょっと賢くするPHPライブラリ

0
Filed under PHP
Tagged as , , ,

Smartyで解決!

あるサイトを構築するにあたって、その内容を多言語対応(日本語/英語)とPC/iPhoneの切り替えを行いたいと考えていた。
しかし、どうやったらスマートに構築出来るか分からず、いろいろと調べたり試したりして(その調査の一環がTomatoCMSを入れてみた経緯でもあるのですが)、ようやく「Smarty」という「テンプレートエンジン」による解決策にたどり着きました。


ある問題の解決方法を探るとき、その問題か解決方法の名前をわかっていないと、Google全盛の今の世の中でもちょっと調べるのが大変です。

考えてみると、作りたいサイトは簡単なHTMLであり、更新もそれほど無いし、自分で更新するサイトだし、且つ、今後そのサイトの機能は自分で拡張していきたい、という条件が揃っていたので、わざわざ自分ですべてを理解するのが難しいCMSを使いたくない、ということがわかってきたのでした。
「それでも、すべてをPHPで作るのはちょっと難しい。HTMLにif文とか変数とかあればいいのになぁ〜」と考えて、ウェブをあれこれ見ていたら「Smarty」というキーワードが目に止まった。その近くにある言葉は「テンプレートエンジン」。ちょっと調べてみたら、これだこれ!かなりいいぞ!とちょっと感動すら覚えた。
早速ダウンロードして試してみたらバッチリで、結局そのサイトは、Smartyを使って作り上げました。
そのSmartyについて概要をメモしておきます。

これはもうHTML++だ

HTMLでif文や変数を使いたいと考えたとき、Smartyならこう解決出来る、というサンプルをいくつか紹介してみます。

サンプル1: phpからのテンプレート読み込み例

まずは、ある条件でtrueなら index_true.tplに書いたHTML、falseならindex_false.tplに書いたHTMLを表示する、という例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// index.php
require_once './Smarty/Smarty.class.php';
$smarty = new Smarty();
template_dir = './templates/';
$smarty->compile_dir  = './templates_c/';
 
if( true ){
  $smarty->display('index_true.tpl');
}
else{
  $smarty->display('index_false.tpl');
}
?>
1
2
3
4
<!-- templates/index_true.tpl -->
<html><head><title>TRUE</title></head>
<body>true, true, true</body>
</html>
1
2
3
4
<!-- templates/index_false.tpl -->
<html><head><title>FALSE</title></head>
<body>false, false, false</body>
</html>

サンプル2: 変数をテンプレートに渡す

次は、php側で定義した変数をテンプレート(.tpl)側で呼び出して使用する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
// index.php
require_once './Smarty/Smarty.class.php';
$smarty = new Smarty();
$smarty->template_dir = './templates/';
$smarty->compile_dir  = './templates_c/';
 
// 定義.
$message = "Hello!! Smarty!!!";
 
// 左側がtpl内で使う変数名.
$smarty->assign('message', $message);
 
$smarty->display('index.tpl');
?>
1
2
3
4
5
6
<!-- templates/index.tpl -->
<html><head><title>TEST Smarty</title></head>
<body>
<p>I said "{$message}".</p>
</body>
</html>

サンプル3: 変数をテンプレートに渡す

次は、php側で定義した変数をテンプレート(.tpl)側でphpを使って処理する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// index.php
require_once './Smarty/Smarty.class.php';
$smarty = new Smarty();
$smarty->template_dir = './templates/';
$smarty->compile_dir  = './templates_c/';
 
// 定義.
$value1 = 1;
$value2 = 2;
 
// 左側がtpl内で使う変数名.
$smarty->assign('v1', $value1);
$smarty->assign('v2', $value2);
 
$smarty->display('index.tpl');
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- templates/index.tpl -->
<html><head><title>TEST Smarty</title></head>
<body>
<!-- v1 -->
{if $v1 == 1}
<p>value1 is One.</p>
{else}
<p>value1 is not One.</p>
{/if}
<!-- v2 -->
<p>value2 is {$v2}</p>
 
</body>
</html>

その他の使い方

その他にもいろいろな使い方はありますが、とりあえずここまでのサンプルだけで大概のことは解決するような気がします。
あと下記の項目だけはよく使いそうなのでメモしておきます。

  • テンプレートに渡す変数が多くなったときには連想配列を使ったほうが良い。
  • テンプレート内に JavaScriptとか書いて問題が発生したときには、{literal}{/literal}で括ると良いです。

チートシートでざっくり見渡す

いろいろな言語やライブラリの特徴的なコード、リファレンス、クラス一覧などをまとめたチートシートというのが有志によって配布されていたりします。
Smartyについても作成されている方がおられました。

Smartyをよく使うならこれを印刷してて元に置いておくと良さそうですね。


[AD]

↓Smartyの本はこれがいいのかな?ウェブだけでは得られない周辺知識も得られるかも。

アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。

↓このSmarty本は5年前に出ている!知らないって怖いですね。そして、そんなに枯れた技術だと安心して使えるな〜。

Smarty入門‾PHP+テンプレート・エンジンでつくるMVCアプリケーション‾

著者/訳者:山田 祥寛

出版社:翔泳社( 2005-03-15 )

定価:

Amazon価格:¥ 3,024

大型本 ( 320 ページ )

ISBN-10 : 4798108839

ISBN-13 : 9784798108834


↓SmartyもPHPも関係ないけど、去年末に買ったNikonクリーニングキット。デジタル一眼レフのイメージセンサーやレンズを綺麗にする道具が一通り揃っています。付属のCD-ROMで映像が見れるのが良いです!あとは薬局で無水エタノールを買うだけ!

アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。

wmode 再び!

0
Filed under Flash, トラブルシューティング
Tagged as , , ,

鬼門のwmode

“wmode”、Flashを使った仕事をしている方なら一度は悩まされた経験があるのではないでしょうか。
Flashの出力ファイルであるswfをhtmlにエンベッドするときに指定するパラメータの一つです。

Firefox 3.6

ところで最近、Firefox 3.6にアップデートされて、 Flash上でマウスホイールによるウィンドウスクロールができなくなってしまいました。
とある案件でこの問題が浮上してきて困りましたが、知り合いが調査してくれた結果、回避方法が分かりました。
しかしその回避方法とは「wmodeの設定で”window”以外にする」というもの。

うわー!

出た!

wmode!!

ただ、今までは「wmodeを”window”以外にすると日本語入力が出来ない」という致命的なFXXKINGバグがありましたが、その時はwmodeを他のもの(“opaque” か”transparent”)に変えて対応してきました。

ところが、今回はその逆です。
つまり、日本語入力が必要かつ、Firefox3.6でフルスクリーンFlashでFlash上でマウスホイールによるスクロール欲しい、となったらアウトです!

幸い、今回の案件では日本語入力が必要ないものだったのでwmode変更で対応出来ました。
あと、Scroll on FlashというFirefoxアドオンによる回避方法もあるようですが、Windowsでしか使えない上に、サイト閲覧者にこれをインストールしろ、とは言えないですよね。

Flash Player 10.1! 早く!

ところで、Flash Player 10.1のベータ版が配布されています。
kamijoさんもblogに書かれていますが、新機能はよく分からない。

そこで、期待しないでリリースノート(PDF)を見てたら、Fixed Issuesの中に驚きの一文を発見しました!

Can’t input Japanese characters in text field if wmode “opaque” or “transparent” is set true except IE.

おぉ!!!
これは!!Flash Player 10.1では、wmodeの指定と日本語入力の問題が直る!ということです!(よね?)

ってか、やっぱり(ブラウザの問題ではなくて)Flash Playerのバグだったのか!一体どれくらいの人がこのバグに悩まされていたり、仕様変更を余儀なくされていたのか!と大崎に向かって言いたいところですよ。
一般公開はまだなのですが、バグ修正分だけはさっさとリリースして欲しいです!

こういうバグを何年も放置しているものはやっぱりiPxxには載せられないよね。
クパチーノで「この致命的なバグリストを直すまでは載せられない」とでも言われたのかな?というぐらい、 Flash Player 10.1では結構真剣にデバッグされているような気がする。
あと、IDE側もいろいろと直したり、基本機能の改善を行って欲しいです。iPhoneアプリ書き出せるとか、追加機能はその後だよ!


[AD]

↓MySQLを使おうとしているのですが、最初にどこまで考えて作ったらいいのか分からない。この本とか参考になるのかな?

MySQLによるタフなサイトの作り方

著者/訳者:佐藤 真人 桑野 章弘 岡田 達典 大黒 圭祐

出版社:SBクリエイティブ( 2009-09-16 )

定価:

Amazon価格:¥ 3,456

単行本 ( 408 ページ )

ISBN-10 : 4797353937

ISBN-13 : 9784797353938


↓PixelmatorはMac OS Xで使えるPhotoshop的画像エディタ。現在絶賛試用中!PSDファイル開けるし、ショートカットもかなり同じだし、Elementsよりこっちがいいかもしれない。

ピクセルメーター

ピクセルメーター

定価:¥ 9,236

カテゴリ:CD-ROM

発売日:2009-07-30