tanaka 18:42 PM
全国1万2000人のsmartyユーザーの皆様、こんにちは、tanakaです。
ことの始まりは、いつもとなりで、Webアプリケーションのなんたるかを熱弁してくれる先輩のkimotoとの会話でした。
社内技術サポートで忙しいkimoto
html_checkboxes(チェックボックスを簡単に生成するsmartyの関数)っていまいち使いにくいんだよねー、要素と要素の間に自由に文字列置けないし
生意気な新人 tanaka
_ ∩
( ゚∀゚)彡 拡張!拡張!
⊂彡
smartyの入門書を読みかじっていてやたら理論だけはわかっているふりをしていた僕は、拡張の実装方法もしらないままに調子にのってしゃべっていました。
html_checkboxesの何が使いにくいのかというと、separatorにひとつの文字列しか指定できないことです。
つまり、以下のようなコードを書くとします。
test.php
<?php
require_once("lib/smarty/libs/Smarty.class.php");
$o_smarty = new Smarty();
$o_smarty->template_dir = "smarty/templates/";
$o_smarty->compile_dir = "smarty/templates_c/";
$prefectures = array(
"1" => "北海道",
"2" => "青森県",
"3" => "岩手県",
"4" => "宮城県",
"5" => "秋田県",
"6" => "福島県",
"7" => "茨城県",
"8" => "栃木県",
"9" => "群馬県",
"10" => "埼玉県"
// …………中略…………
"47" => "沖縄県");
$o_smarty->assign("pref_checkboxes", $prefectures);
$o_smarty->display("test.tpl");
?>
test.tpl
<html>
<head><title>都道府県チェックボックス</title></head>
<body>
<div><form>
{html_checkboxes name="prefectures" options=$pref_checkboxes separator="<br />"}
</form></div>
</body>
</html>
separatorに"<br />"を指定するとすべてのチェックボックスの間に"<br />"が挿入され、縦に47個並んで表示されてしまいます。
そこで、チェックボックスの間に自由に文字列を挿入できる拡張関数を作るべく、html_checkboxesのソースコード(smarty/libs/plugins/function.html_checkboxes.php)を家で入門書片手に読んでみると、そこにassignというなぞの属性がありました。ドキュメントには載っていない属性のようです。これを使えば、なにも自分でsmarty関数を作らなくても柔軟にチェックボックスがつくれるようです。test.tplを以下のように書き換えてみましょう。
test2.tpl
<html>
<head><title>都道府県チェックボックス</title></head>
<body>
<div><form>
{html_checkboxes name="prefectures" options=$pref_checkboxes assign="checkboxes"}
{foreach from=$checkboxes item="checkbox"}
{$checkbox}{cycle values=",,,<br />"}
{/foreach}
</form></div>
</body>
</html>
html_checkboxes関数のassign属性で変数名checkboxを指定すると変数$checkboxにその結果がアサインされます。このsmarty変数は「<input type="checkbox"…」という風な文字列の配列になっているのでforeach関数で回しながら出力できます。上の例ではcycle関数を使って4個置きに改行しています。
また、以下のように個々の要素を出力することもできます。
test3.tpl
<html>
<head><title>都道府県チェックボックス</title></head>
<body>
<div><form>
<dl>
<dt>北海道地方</dt>
<dd>{$checkboxes.0}</dd>
</dl>
<dl>
<dt>東北地方</dt>
<dd>{$checkboxes.1}{$checkboxes.2}{$checkboxes.3}{$checkboxes.4}{$checkboxes.5}{$checkboxes.6}</dd>
</dl>
…</form></div>
</body>
</html>
いかがでしょうか。html_checkboxesをそのまま使うよりも少しコードが長くなってしまいますが、普通のinput要素でチェックボックスを作るよりも見やすいコードになるのではないかと思います。(html_radiosでもassign属性は使えるようです)ひとつ欠点があるとすれば、アサインされたsmarty変数のkeyが必ず数字になってしまう点でしょうか。自由に、わかりやすいkey名で利用するにはやはり拡張するしかないのでしょうか。
トラックバック
- このエントリーのトラックバックURL
-
http://c-brains.jp/cgi-bin/mt/###/1068
###はmt-tb.cgiに変更してください。

-
- actionscript
- addon
- adobe
- ajax
- Ajax
- analytics
- Apache
- api
- Apple
- blog
- book
- Bookmarklet
- border
- C-brains
- C-brains Life
- cakephp
- CakePHP
- Calc
- clearfix
- CMS
- colinux
- CSS
- css
- CSS Nite
- debian
- deflag
- deploy
- design
- document
- Document
- DOM
- dotted
- download
- Dreamweaver
- EC-CUBE
- Eclipse
- editor
- english
- ERD
- event
- Excel
- Favicon
- Firebug
- firebug
- Firefox
- Fireworks
- flash
- Flash
- Flashゲーム
- Flex
- Flickr
- font
- font-size
- form
- G10 Reader
- geocoding
- GIFアニメ
- Git
- greasemonkey
- groupware
- haskell
- HTML
- httpd.conf
- icon
- IDE
- IE
- IE6
- IE7
- ipad
- iPhone
- iPod touch
- it
- java
- JavaScript
- joke
- jquery
- jQuery
- json
- lifehacks
- linux
- lisp
- localization
- mac
- Mac
- mediawiki
- mobile
- mod_rewrite
- MovableType
- movie
- MT4.2
- MySQL
- netbeans
- network
- NFS
- Office
- OpenSSH
- Opera
- pageant
- pager
- PDT
- photoshop
- php
- PHP
- plugin
- poderosa
- popup
- PostgreSQL
- PowerPoint
- presentation
- profile
- programming
- prototype.js
- putty
- python
- rsync
- safari
- Safari
- sage
- Samba
- scroll
- select
- Selenium
- SEO
- SFU
- shell
- smarty
- SQL
- ssh
- ssh_config
- string
- Subversion
- symfony
- tab
- table
- tcpdump
- tdd
- template
- test
- Testlink
- TiddlyWiki
- TinyMCE
- tips
- tool
- TortoiseSVN
- UI
- UnitTest
- url
- vim
- Virtual Host
- VMWare
- WEBサイト
- WEBサービス
- WEBデザイン
- WEBブラウザ
- WEB制作会社
- wiki
- Windows
- windows
- wireframe
- word
- WordPress
- XHTML
- おサイフケータイ
- まとめ
- アニメーション
- アプリケーション
- ウィジェット
- オフィス
- ケータイ
- サイトマップ
- サムネイル
- システム設計
- ショートカット
- ジェネレーター
- スタッフブログ
- セミナー
- タスク管理
- チュートリアル
- テンプレート
- デザイン
- ニュース
- ハック
- フレームワーク
- ブラウザ
- ブログパーツ
- マインドマップ
- マニュアル
- ユーザビリティ
- ランチャー
- ワークライフバランス
- 仮想デスクトップ
- 似顔絵
- 写真
- 写真補正
- 壁紙
- 広告
- 文字コード
- 横浜
- 秀丸
- 角丸
- 開発環境
- 馬車道ランチ
- WEB制作・ホームページ制作













