spanstyle::monologでタグ「HTML」が付けられているもの

Twitterアカウントを持っている人なら一度は見ているであろう、設定完了画面で出てくる「ありがとう。設定を保存しました」や「これはいい画像ですね！」のUI。

ページ表示時にベロンと出てきて、一定時間が経過したらスルスルと消えていく例のアレですが、ユーザへの通知手段として非常にわかりやすいなあと思いませんでしたか？ためしてみたら意外とカンタンに実装できたので、実装方法をまとめてみます。

設置方法じゃなくて記述方法のまとめ。いちいち覚えてらんないのは歳をとったからなのかなぁ...

基本形

<pre>、もしくは<textarea>で。

<pre>の場合

<pre name="code" class="html">
... some code here ...
</pre>

<textarea>の場合

<textarea name="code" class="html">
... some code here ...
</textarea>

<ul>
<li>liタグの中には<div>ブロック要素</div>も<span>インライン要素</span>も置ける</li>
</ul>

一方で、

<dl>
<dt>dtタグには<span>インライン要素しか置けない</span></dt>
<dd>でもddタグには<div>ブロック要素</div>および<span>インライン要素</span>を置いていい</dd>
</dl>

HTML原理主義者への道は険しい。

つか無理。

• コンテンツはフレームで2分割されている
• 左側にはサブフレームが、右側にはメインフレームが存在する

この状況で、「メインフレームが読み込まれるごとに、サブフレームの表示・非表示を切り替えたいんだけど」という要望があったので解決してみることにする。

<dl>、<dt>、<dd>で表された定義型リストの書き方について、今まで大きな勘違いをしていた。

ex)
<dl>
<dt>うどんこ</dt>
<dd>うどんをつくる粉。小麦粉。メリケン粉。</dd>
<dt>そばこ</dt>
<dd>蕎麦の実をひいて粉末にしたもの。蕎麦切り、蕎麦掻きなどの材料にする。</dd>
</dl>

こんな感じに<dt>と<dd>を一つずつ交互に入れなければいけないと思い込んでいたけれど、別に<dt>が複数続いてもいいし、<dd>が複数続いてもいいようだ。

ex)
<dl>
<dt>うどんこ</dt>
<dd>うどんをつくる粉。小麦粉。メリケン粉。</dd>
<dd>白くて粉っぽい。</dd>
<dt>そばこ</dt>
<dd>蕎麦の実をひいて粉末にしたもの。蕎麦切り、蕎麦掻きなどの材料にする。</dd>
<dt>食欲</dt>
<dt>性欲</dt>
<dt>睡眠欲</dt>
<dd>僕が持っている欲。</dd>
</dl>

思い込みって怖いなあ。

前回はHTML_QuickFormの基礎を勉強したので、今回は応用。Smartyとの連携ってのをやってみる。

********************************************************************************
大きな流れ
********************************************************************************
addElement:オブジェクト設定
↓
addRule:検証ルール設定
↓
applyFilter:フィルタ設定。trimしたりとか
↓
(やっぱここでやるんでしょ？)
setDefaults:デフォルト値設定
setConstants:定数設定(上書きできない値。使いどころがイメージできない...)
↓
validate:検証実施
↓
freeze:凍結実施(検証がOKだったら)
↓
Smartyにデータを渡して表示

HTML_QuickForm利用の手引き
http://www.is.titech.ac.jp/~yanagis0/kei/quickform.html

を参考に、まずはPEARについているサンプルソースを見てみる。場所はPEARディレクトリ内の「doc/HTML_QuickForm/docs/renderers/SmartyStatic_example.php」。SmartyDynamic_example.phpもある。スタティックとダイナミックでどう違うかはよくわからんが、まずはスタティックの方のソースを追ってみることに。非Smartyとの違いは、99行目「// setup a template object」以降の処理だけっぽい。

validate&freeze以降の流れはこんな感じ。

Smartyオブジェクト生成
↓
生成したSmartyを渡しながらrendererオブジェクト生成
↓
初期設定(必須とかエラーとか。なんかよくわからん)
↓
HTML_QuickFormオブジェクトにrendererオブジェクトを渡す(accept())
↓
Smartyオブジェクトにテンプレート変数を登録
↓
Smarty->display();

なのだそうな。

テンプレート変数については、例えば

$form->addElement('header', 'MyHeader', 'QuickFormのテスト');
$form->addElement('text', 'name', 'あなたのお名前は？');
$form->addElement('submit', 'btnSubmit', '送信');
//(略)
$tmpl->assign('form', $renderer->toArray());

と登録すれば、テンプレートの方からは{$form.header.MyHeader}で「QuickFormのテスト」にアクセスできる。ただしこれはヘッダに限った話で、その他のフォームオブジェクトへのアクセス方法としては{$form.name.label}で「あなたのお名前は？」に、{$form.name.html}でフォームオブジェクトのHTMLにアクセスできる模様。

ただしsubmitボタンについては、{$form.btnSubmit.label}とやっても「送信」とは表示されない。resetボタンも同様({$form.btnSubmit.value}か？)。

一番重要な<form>タグへ設定する属性値へは{$form.attributes}でアクセスできる。つまり<form {$form.attributes}>と書けばいいみたい。まあとにかくやってみる。

「HTML_QuickForm からの脱却」とか「QF Haters」とかを読む限りでは、MojaviやMapleなどのMVCフレームワークを使いこなせる人にとって、HTML_QuickFormはもはや使い勝手の悪いモノでしかないそうです(Mapleって初めて知りますた。デザイナさんもプロジェクトに参加してるってすばらしい)。

でも、僕は最近ようやっとSmartyが使えるようになった程度だし、PEARもDBとAuthとPagerくらいしか使ったことないし、第一フレームワークがちんぷんかんぷんなので(決定打)、ある意味上級者になるための踏み絵と思いながらHTML_QuickFormをベンキョしてみようと思いますです。最終目標はHTML_Quickform+Smartyの独自レンダリング。入力→確認→完了の遷移ってHTML_Quickform_Controller使わないとムリかしら？

で、とりあえず「html_quickform」のググり一覧をかたっぱしから見ながらやってみました。以下、テストコードにづらづら書いた自分用コメントもまとめて載せます。

最近、気になってること。

Smartyを使う一番大きな利点って「デザイン(HTML)とロジック(PHP)の分離」だと思う(キャッシュ機能もあるけどここでは割愛)。けれどもここでいう「デザイン」とは、おそらく<table>でゴリゴリ組まれたグリッドデザインの話。

一方で、最近流行の「適切にマークアップされたHTML+CSSでデザインされたサイト」を構築するとなると、ゆくゆくは「デザイン(CSS)とHTMLとロジック(PHP)の分離」になる。このとき、HTMLはプログラマとデザイナのどっちが書くことになるんだろう？

HTMLには意味情報を書くのだから、ひょっとしてプログラマ側のさらなる負担に？それともCSSとHTMLをデザイナ側に丸投げ？それとも「タグ打ち職人」とのトライアングル開発なのか？

「適切にマークアップしてくれ」っていう依頼は今後緩やかに増えていくとは思うんだけど、謎は深まるばかり。

ある区切りごとに作られたアーカイブへのリンクには<ul>を用いるべきだけど、縦に長くなってくるとだんだん見苦しくなってきます。

例えばこんな感じ

• 2005年
• 2004年
• 2003年
• 2002年
• 2001年
• 2000年
• 1999年
• 1998年
• 1997年
• 1996年
• 1995年
• 1994年
• 1993年

なげーよ！

これをスッキリと横並びにしてしまいましょう。