JQuery UI と ThemeRoller

久しぶりの更新になってしまいました。

若い頃は熱意があって、今思うとどうしてこんな行動に出たんだろう？
と思い当たる節がたくさんありましたが、歳をとるとなかなか情熱を表に出せなくなるものですね。

最近、小学生が校庭でサッカークラブ活動しているのを見ると、
「ああ、この子たちには可能性がいっぱい広がっているんだ。」とほほえましくなったりして、
ますます年齢を感じます。

---

前置き、長くなりましたが、
先日社内セミナーでJQueryについて学んだので、久しぶりのアウトプット。

JQueryは卒研とかでかじっていたので基礎的な部分は理解していたのですが、
JQuery UIというのは初耳でした。

そんな中でTheme Rollerのご紹介。

アコーディオンメニュー、タブメニュー、ポップアップなどの
JQuery UIで実装できるユーザインタフェース一式をカスタマイズできる！
そしてそれをダウンロードまでさせてもらえるとな。

しかも、Firefox用のアドオンをインストールすれば、
JQuery UIを他の既成ページにも適用させることが可能だということ。
（注：Jquery UIを使ってるページだけっぽいです。まああたりまえか。）

JavaScriptをオフにしてもページが閲覧できる、という点を抑えているのはさすが。
ただUIをJSで表現するのはどうなのかなー。っていう、古ーい考えになってしまうのはダメですね。
あと、マークアップが固定されてしまうっていうのもちょっと。っていう、（以下略。

下記、脱線文を読み飛ばす。

---

またこの話ですが、
CSSとJavaScriptの壁がどんどん薄く低くなっているなー、と感じます。

CSSだけを使ってリキッド角丸とか、テーブルの行背景色を互い違いにして見やすくする、とかを実装しようとすると、
見栄えのためだけのidやclass、div、spanがでてくるわけで。
それが嫌だからJavaScriptを使う、というのが現状なのですが、
本来の役割的にはどうなんだろうなー、っていうジレンマ。

ソースを汚くするか、本来の役割分担（構造、見栄え、振る舞い）を考えるか、どちらを取るかというと、
現状、ソースは汚くしたくない、というほうを取るかなと思います。私は。
（もちろん状況にもよりけり。テーブルの行の背景色を1行おきにするとかは、いちいち大量のtrにclassつけてらんないというのもありますし。）

Webなんて社会的な扱いは他の広告媒体と同じなのに、中身（ソース）の妥当性も考えるプログラマー的な視点も含まれていて、今さらですがやっぱり異質だなーと思います。
考えてみれば、デザイナーだけじゃなくてプログラマーも制作に関わっているから当然なのですが。

そりゃー、フルDIVで作られたHTMLよりは、
ちゃんと要素に意味づけして括った方がSEO的には良いに決まっているでしょうが、
意味的に正しいマークアップをしていれば、divが増えるとか、idやclassとかをどうするって言うのはやっぱり制作側の美意識？というかこだわり？がそうさせているだけで、極論、別にどうって事ない気はしています。

Jquery UIなんかを見ていると、いずれCSSなんてなくなってしまうのかも。と感じます。
マークアップは人間じゃないと意図通りにできないけど、
CSSは別にコンピュータが勝手にやってもソースが汚くなる、くらいの問題しか発生しないし、
クライアントはさほどいじらない範囲だから、更新がしやすいかどうかっていうのもHTMLほど考えなくてよさそうだし。

---

で、
Jquery UIの話をするつもりだったのに･･･話が脱線してしまいました。

既成ライブラリを使うのはいいけど、
既成ライブラリを使うためにマークアップを（自分が意味的に納得できないものに）変えるのはちょっと嫌だなーと思います。

今回のJQuery UIはその点でちょっと残念です。
（もしわたしがカンチガイしているだけならご指摘お願い致します。）

たとえばASCII.jp：長～いページもスッキリ！jQueryでタブ表示にあった例はこれ。

以下、引用

---

body要素の中で、タブにしたい部分を以下のようにします。タブはul／li要素で表し、タブに表示する内容をdiv要素で表します。そして、タブ部分全体のdiv要素に対して、jQuery UI Tabsの「tabs」という関数を実行します。

■タブにしたい部分の組み方
<div id="タブ部分全体のID">
  <ul>
    <li><a href="#タブ1のID">タブ1に表示する文字列</a></li>
    <li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
    ・・・
    <li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
  </ul>
  <div id="タブ1のID">
    タブ1の内容
  </div>
  <div id="タブ2のID">
    タブ2の内容
  </div>
    ・・・
  <div id="タブnのID">
    タブnの内容
  </div>
</div>
<script type="text/javascript">
  $('#タブ部分全体のID').tabs();
</script>

デモURL：http://www.h-fj.com/ascii/jquery_tabs/sample.html

---

これを見ると、このマークアップの方法でしかこのインタフェースが実現できないように見えます。
でも、リストでくくられたタブ見出しの内容と、とコンテンツ（div部）の関連性がマークアップ的に表されてないのがかなり気になります。
どうしてもタブが実現したくて、開発期間もない、納期も迫っている！ならこれを使いますが、
そうでなければちょっと遠慮したいですねえ。というのが本音。

JavaScriptのためにマークアップを変えるっていうのは本末転倒ですし。
（実案件でやったことはありますが･･･（笑）

なんにせよ、いろんなことが実現できるようになって、
引き出しを多くしておけば、いざとなったときにも対処できますよね！

メモメモ。