ちょっとしたテストとか、JavaScriptの動作チェックとかやる度にゼロからHTMLを書いていました。
まだ、これまではその間隔が2,3ヶ月に１度くらいだったのであまり苦痛ではなかったのですが、最近１ヶ月に１度はやっている気がする。
大抵のテストではjqueryを使いたくなるので、それをダウンロードして、読み込ませたりするし、当然CSSも必要。
でも、CSSのプロパティとかどういうパラメータ名だったっけ？とか、jqueryってどういう使い方だったっけ？と基本的なところので悩み、なんとなく、こんな感じのような。。ちがうなぁ、と試行錯誤の繰り返し。
今更ですが、この作業があまりに無駄に感じたので、その最初のところまでをシンプルにしてまとめたものをアップしておきます。ご自由にお持ちください！
大抵のウェブコンテンツ制作者の方には不要だと思いますが、誰よりも自分のために公開！
あるサイトを構築するにあたって、その内容を多言語対応（日本語/英語）とPC/iPhoneの切り替えを行いたいと考えていた。
しかし、どうやったらスマートに構築出来るか分からず、いろいろと調べたり試したりして（その調査の一環がTomatoCMSを入れてみた経緯でもあるのですが）、ようやく「Smarty」という「テンプレートエンジン」による解決策にたどり着きました。
ある問題の解決方法を探るとき、その問題か解決方法の名前をわかっていないと、Google全盛の今の世の中でもちょっと調べるのが大変です。
考えてみると、作りたいサイトは簡単なHTMLであり、更新もそれほど無いし、自分で更新するサイトだし、且つ、今後そのサイトの機能は自分で拡張していきたい、という条件が揃っていたので、わざわざ自分ですべてを理解するのが難しいCMSを使いたくない、ということがわかってきたのでした。
「それでも、すべてをPHPで作るのはちょっと難しい。HTMLにif文とか変数とかあればいいのになぁ〜」と考えて、ウェブをあれこれ見ていたら「Smarty」というキーワードが目に止まった。その近くにある言葉は「テンプレートエンジン」。ちょっと調べてみたら、これだこれ！かなりいいぞ！とちょっと感動すら覚えた。
早速ダウンロードして試してみたらバッチリで、結局そのサイトは、Smartyを使って作り上げました。
そのSmartyについて概要をメモしておきます。
HTMLでif文や変数を使いたいと考えたとき、Smartyならこう解決出来る、というサンプルをいくつか紹介してみます。
まずは、ある条件で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> |
次は、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> |
次は、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> |
その他にもいろいろな使い方はありますが、とりあえずここまでのサンプルだけで大概のことは解決するような気がします。
あと下記の項目だけはよく使いそうなのでメモしておきます。
いろいろな言語やライブラリの特徴的なコード、リファレンス、クラス一覧などをまとめたチートシートというのが有志によって配布されていたりします。
Smartyについても作成されている方がおられました。
Smartyをよく使うならこれを印刷してて元に置いておくと良さそうですね。
↓Smartyの本はこれがいいのかな？ウェブだけでは得られない周辺知識も得られるかも。
速習Webテクニック Smarty動的Webサイト構築入門 (Quick Master of Web Technique)
著者／訳者：原 一浩 青木 真 鵜飼 孝陽 川野辺 亮
出版社：技術評論社( 2008-09-20 )
定価：￥ 2,919
Amazon価格：￥ 2,919
大型本 ( 328 ページ )
ISBN-10 : 4774136301
ISBN-13 : 9784774136301
↓このSmarty本は５年前に出ている！知らないって怖いですね。そして、そんなに枯れた技術だと安心して使えるな〜。
Smarty入門‾PHP＋テンプレート・エンジンでつくるMVCアプリケーション‾
著者／訳者：山田 祥寛
出版社：翔泳社( 2005-03-15 )
定価：￥ 2,940
Amazon価格：￥ 2,940
単行本 ( 318 ページ )
ISBN-10 : 4798108839
ISBN-13 : 9784798108834
↓SmartyもPHPも関係ないけど、去年末に買ったNikonクリーニングキット。デジタル一眼レフのイメージセンサーやレンズを綺麗にする道具が一通り揃っています。付属のCD-ROMで映像が見れるのが良いです！あとは薬局で無水エタノールを買うだけ！
“wmode”、Flashを使った仕事をしている方なら一度は悩まされた経験があるのではないでしょうか。
Flashの出力ファイルであるswfをhtmlにエンベッドするときに指定するパラメータの一つです。
ところで最近、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のベータ版が配布されています。
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アプリ書き出せるとか、追加機能はその後だよ！
↓MySQLを使おうとしているのですが、最初にどこまで考えて作ったらいいのか分からない。この本とか参考になるのかな？
著者／訳者：佐藤 真人 桑野 章弘 岡田 達典 大黒 圭祐
出版社：ソフトバンククリエイティブ( 2009-09-17 )
定価：￥ 3,360
Amazon価格：￥ 3,360
大型本 ( 408 ページ )
ISBN-10 : 4797353937
ISBN-13 : 9784797353938
↓PixelmatorはMac OS Xで使えるPhotoshop的画像エディタ。現在絶賛試用中！PSDファイル開けるし、ショートカットもかなり同じだし、Elementsよりこっちがいいかもしれない。
 奥出雲ワイン 赤 |
