最近役立ったフォーム関連のJS

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

仕事で忙しくてなかなか更新ができませんでした。
と言い訳してみます。

ですが、このまま会社に飼い殺されているわけにはいかないので、
時間を見つけて、ちょっとでも更新頻度を上げていけたらと思っています。


今回は最近仕事で大変役に立ったJSプラグインをご紹介。

１．プルダウンによる別プルダウンの制御

複数の選択式プルダウンというか、連動プルダウンというか、
Aを選択したとき、別のプルダウンではCとDが選択できるようになる。
Bを選択すると、別のプルダウンではEとFが選択できるようになる、
というように、プルダウンの選択によって別プルダウンのoptionを制御するJSを見つけました。

Select系はJSで制御するのが難しく困っていたので、見つかって助かりました。
場所はこちら。

URL：
http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

JQuery用のデモ：
http://www.ajaxray.com/Examples/depend-1.3.x.html

詳しい使い方は今度追記。
ブラウザによって若干の挙動の差異があるため、完全に表示が一緒になってほしい場合はおススメしません。

２．フリガナ自動入力JS

文字を入力すると自動的にフリガナが生成されるようにしてほしい。
と要望があったときにいろいろ検索してみたのですが、JQueryベースのものがなく困っていたところで発見。

URL：
http://mashimonator.weblike.jp/blog/2009/10/js-14.html

デモ：
http://mashimonator.weblike.jp/experiment/js/kanaTextExtension/sample.html

ライセンス（コメント欄の文章を引用させていただきました）：
本サイトで公開しているライブラリは基本的には無償で自由に使用してかまいません。
なるべくソースコード内に記載してある制作者名は残して頂きたいです。
また、バグ等ありましたらご指摘頂けるとあり難いです。

jRailsのデモサイト

いろいろあって久しぶりにjRailsを使おうと思って、本家ページにアクセスしたら、デモページがなくなってました。
調べてみると、前から噂になっていたみたいですね･･･。

昔よく言ってた近所の駄菓子屋さんがなくなってしまったような感じでした（笑）。
別に他の場所でもコードは拾えるんですが、あのデモページが好きだったので、残念でした。

なので、気休めですがjRailsで使えるエフェクトだけでも復活させようと思ってデモを作ってみました。
jRails demo (not official)

※念のため、著作権は私ではなくスクリプトを書いた方にあります。

jQueryでつくるアコーディオンメニューCookie機能付き

繁忙期真っ只中です。

シルバーウィークやらプラチナウィークやらが９月にあるそうですが、
仕事をするものからすれば嬉しくもあり、煩わしくもあり。

この５連休のために、連休前にどかっと仕事を終わらせなければならない、という反面、
連休明けのお仕事を連休中に（出勤して）終わらせてしまえる（笑）、という考え方もできるし。

どうなることやら。


ということで、（全然関係ない前置きでしたが、）
jQueryでつくるアコーディオンメニュー（Cookie機能付き）
のご紹介です。
デモを見る

参考にさせてもらったサイトは下記です。
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す


「アコーディオンメニュー」とは書いていますが、
実際にはメニューではなく、開閉式のコンテンツとして実装しました。
デフォルトでは詳細が隠れていて、ボタンを押すと詳細情報が表示される仕組みです。

あまり汎用性を考えず、
「このページにだけ組み込むためのスクリプト」として書いたため、（しかもそれを汎用的にする気力がないため、）
ちょっと扱いづらいかもしれません。

ブラウザを閉じた時点でcookieは消えるようにしています。
また、最初のアクセス時に一番上の項目が開いている状態になるようにしています。


JSルールとしては、

「ひらく」ボタン⇒ファイル名が○○_cl.拡張子
「ひらく」ボタンロールオーバー後⇒○○_cl_o.拡張子
「とじる」ボタン⇒○○_op.拡張子
「とじる」ボタンロールオーバー後⇒○○_op_o.拡張子

全部ひらく・とじるボタン⇒命名ルールは上に同じ。imgのidにallviewを指定。

開閉コンテンツ⇒div.detailの中に入れる

cookieの配列は現状ではa,b,c,d,e,f,gまではいっています。
aが最初の.section、bが2番目の.section。という感じで、cookieと同期しています。
項目を増やしたい場合は、アルファベットを増やせばOK。

※ただし、エクセルの列表示みたいにBa、Bbとかはできないハズ。なので、26項目が限界かなと思います。
※1と9は別のトリガーに使っているので、cookie配列の中に入れないで下さい。


本当はjQuery以外のライブラリは使いたくなかったけれど、
JSの技量が足りないために導入いたしました。
何度かもう実装できんかもと思ったけれど、無事できてよかったです。

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

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

メモメモ。

JavaScriptでフォームを操作すること

先日、JavaScriptでフォームの選択肢を操作できるか否か、みたいな話になって、
JavaScriptを使って、ラジオボタンの選択肢によって、後続の選択肢が変化するコンテンツを作りました。

ソースを会社PCに置いてきてしまったので、実物をお見せできないのが非常に残念なのですが、
こういうことって、実際にサイトに取り入れていいんだろうか？という疑問がありまして。

そのコンテンツは、ラジオボタンをクリックすることで、特定のフォームをdisplay:none;するようにJavaScriptで命令する形で実装しています。
ですので、CSSがオフの環境でも、JavaScriptオフの環境でも問題なく動作すると思います。

が、なんとなく「これって正規の方法なんだろうか？」と思って。
そう思うのは、私がユーザビリティとかアクセシビリティに関する知識が皆無であるということが原因なのですが、
そういった観点からの不都合はないのかなぁと。

ふと感じた疑問でした。