$

この投稿は8年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2008 年 9 月 14 日 3,175日前)
3,000文字 (読了時間7分)

SPONSORED LINK

ぼくは文芸の世界に生きる人間なので、やっぱりテキストが大好きです。なので、RIA(リッチ・インターネット・アプリケーション)を導入するにしても、やっぱり「動画・アニメーション」というイメージのあるflashよりも、テキストをそのまま装飾できるJavascriptの方が好きだったりします。

で、普段はMootoolsを使っています。バージョンが1.2に上がってからシンプルなレイアウトになってしまいましたが、ぼくが始めて見た1.11の時(2007/7)にはダークで怪しげかつグイングイン動き、デモもオサレだったのです(ここでまだ見られます。)。

このMootools、「最悪なのはコピペで済ませることだ」と書いてあるように、ちょっと敷居が高い感じです。それに、日本語情報はほとんど皆無。ぼくもかつてはドキュメンテーションの全訳を試みましたが、その直後にバージョンが1.2に上がってしまったので、諦めた口です。

が、これまではそれでもなんとか使いこなしており、そんなにエラーも出なかったのですが、破滅派の投稿フォームに実装していたバリデーション機能を修正していたとき、小一時間ほどハマりました。例によってIEでしたが、firefoxでもエラーが出ました。

実装した機能

  1. フォームにマウスオーバーすると、右にボックスが下りてきて、対話式にチュートリアルをしてくれる。
  2. inputタグをクリックすると、背景色が白くなって、自分がいまどこに入力しているか教えてくれる。
  3. 「投稿ははじめてですか?」や「連載ものですか?」にチェックを入れると、新しい入力欄がふわっと出てくる。
  4. 送信をクリックすると、間違っている欄に注意書きが出て、再入力を促す。

とまあ、通り一遍のことをやってみたのですが、こんなエラーが出ちゃいました。

  • firefoxで<input type=”file” />をクリックしても、ファイルを選択するダイアログが出ない
  • 5つの式で実現していた上の機能がIEではそもそも動かない

ファイルのダイアログが出ないエラーに関しては、とりあえず背景色が白くなるフォーカス・ブラーイベントを添附しないことで回避。

どうやら、inputタグにあれこれとイベントを添附するとおかしなことになるようです。buttonやtextなら問題ないけれど、fileは駄目なようです。イベントを上書きしてしまうのかな?

一応、無名関数ではなく、きちんと名前をつけた関数で登録したんですが、駄目でした。

で、IEの「そもそもすべてが動かない」ということに関しては、さんざんググった挙句、英語情報しかなくてテキストオンリーの目がクラクラするMootoolsフォーラムでヒントを見つけました。

とにかく、uidってのはMootoolsがすべてのHTML要素に対して割り当てている固有のIDのことだし、Internet explorerは瞭かにformフィールドを特別扱いしているからね。

解決法:Mootoolsの要素や属性名をformのinputのname属性に使わないこと。

出典:Valerio in Mootools Forum 高橋文樹訳

なるほど……さすが外人プログラマー。Ajaxフレームワークの構造を理解した上で使っていらっしゃる……コピペで済ませようとするそこいらのへっぽこプログラマーとは偉い違いだ……

と、上記をヒントにして、「Mootoolsはform周りが怪しい」というめぼしを立ててみると、機能1「対話式チュートリアル」周りの関数内で、なんと$関数がエラーを起こしているではないですか!

HTML

<form id="toukou" name="toukou" action="hoge.php">
     <!-- inputタグ色々 -->
</form>

Javascript

var toukou = $('toukou'); // <-これがエラー

toukou.addEvent('mouseenter',makeHint.bindWithEvent(toukou));
toukou.addEvent('mouseleave',makeHint.bindWithEvent(toukou));

function makeHint(){
    //なんかいろいろと処理を行う
}

で、この”var toukou = $(‘toukou’);”がすでにエラーを起こしているわけです。そんなことってある? と驚きを隠せないまま、formにイベント添附することをやめ、fieldsetに添附してみました。

HTML

<form id="toukou" name="toukou" action="hoge.php">
   <fieldset id="toukouField">
     <!-- inputタグ色々 -->
   </fieldset>
</form>

Javascript

var toukou = $('toukouField'); // <-変更部分

toukou.addEvent('mouseenter',makeHint.bindWithEvent(toukou));
toukou.addEvent('mouseleave',makeHint.bindWithEvent(toukou));

function makeHint(){
    //なんかいろいろと処理を行う
}

$関数といえば、”document.getElementById(element)”のショートハンドであると同時に、要素を拡張してくるもっとも基本的な関数なんですが、こんなこともあるんですね。

ともかく、これでまったく問題なく動きました。近々アップ予定なので、文芸作品を持っている方は、投稿してください。

追記:痛感したこと2つ

Mootoolsはやはり敷居が高い。Prototype.jsにかなり似ているのだが、ちょっと違うようだ。オライリー本『Prototype.js & Script.aculo.us』で読んだ知識によると、Prototype.Jsには$F関数という、フォーム専用の関数があったような気がするんだが……

やはり英語情報の方が豊富だ。日本語だけだと、後追いになってしまう。Mootoolsフォーラムも、Mootorialも、英語Onlyでテキストだけだからなあ……

カーネルから日本語でできてるPCはできないのかな……それとも、英語公用語化かな……それにしても、英語って文字が小さい……なんでこんなんでみんな読めるんだ……ペーパーバックの文庫は文字がすごいデカいくせに……

このままだと、彼我の差は大きいぞと痛感する三連休初日でした。

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2008 年 9 月 14 日にWeb制作, プログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

どいつもこいつも不味いツラだ

— 尾崎紅葉

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。