志田の日記 JavaScript

2008-08

prototype.js と jQuery の競合

　Rails で Ajax を使うようになってきた。
　Rails の既存のアプリに Ajax リクエストのコーディングを追加したら、リクエストが実行されずに JavaScript のソースコードがブラウザに表示されるという現象が発生。いろいろ調べてみたら、prototype.js と jQuery を一緒に使っていたことが原因だった。

　ここにあるように、jQuery.noConflict(); という関数を実行してあげ、これまで jQuery を使っていた箇所では、たとえば、以下のように書き換えてあげればOK。

Before:

jQuery (function ($) { $(".time_entry").timeEntry({spinnerImage: '', show24Hours: true}); } );

After:

jQuery (function (jQuery) { jQuery(".time_entry").timeEntry({spinnerImage: '', show24Hours: true}); } );

　$ を jQuery に置き換えるということ。

FireBug - Firefox の Add-on として動作する JavaScript デバッガ

　引き続き JavaScript の勉強中です。Ruby on Rails で作ったWebアプリにAjaxを導入しているのです。

　昨日までは普通にブラウザをリフレッシュしてほげデバッグ（alert("hoge")でスクリプトの挙動を確認する）でがんばっていたんだけど、あんまり効率が悪いもんだから、評判のよい FireBug を導入してみた。

　

　ｳﾎｯwwww 何これwwww 超便利wwwwwwwww 鼻血出そうwwwww
　もっと早く導入しとこうよ俺www

　ポイント：
・Add-on なのでインストールが楽。Visual Studio や Eclipse を使うより数倍は楽。
・F12 かメニュー → 表示 → Firebug で起動する。
・調査/HTMLをクリックした状態でマウスを動かすと、カーソルがある位置のHTMLがリアルタイムに強調表示される。思い通りに表示されない箇所がどうなっているか調べるのが超楽。
・調査/CSSをクリックした状態でプロパティ（font-familyなど）をクリックして編集可能。値（arialなど）も編集可能。ブラウザの表示も即座に反映される。
・調査/スクリプトをクリックした状態でJavaScriptを実行するとDOMインスペクタ（？）を見ながらステップ実行とかブレークポイントを張ったりとかできる。
・コンソールにJavaScriptのエラーが表示される。HTMLやCSSも表示されるのかな？
・やり方は忘れたけど、ページのどの要素を表示するのに何秒かかったかがガントチャート風に表示できる。どこがボトルネックかが直感的に判断できる。JavaScriptを使う場合、大抵は応答性や帯域幅の調整をしているケースだろうから、これは便利だろうと。
・使い込めばほかにもありそう。

　Safari も「開発」メニューを出せるし、OperaはDragonflyを出してきたし、どんどん便利にになっていくなぁ。。。

ソースコードを色分けするJavaScriptいくつか

　google-code-prettify
　http://code.google.com/p/google-code-prettify/

　SHJS - Syntax Highlighting in JavaScript
　http://shjs.sourceforge.net/index.html

　syntaxhighlighter
　http://code.google.com/p/syntaxhighlighter/

　highlight.js
　http://softwaremaniacs.org/soft/highlight/en/

　以前、google-code-prettifyを使ってソースコードの色分けをしていたときに、.emacs つまり elisp がうまく色分けできなかったので、明示的に言語を指定して色分けできるようなライブラリがあれば…と思ったのだけれど、ざっと調べてみて elisp に対応しているものが見つからない…。自分で拡張したほうが早いかな。

JavaScriptの勉強をはじめた。

　時刻入力をするにあたって「未入力の箇所にはデフォルト値を入れる」という処理がやりたかったのだけれど、サンプルがなさそうな気がしたので勉強がてら自分で書いてみた。JavaScriptはコピペで済ませていて、自分で書くのは初めてなので「Rubyなら...」「Perlなら...」と思いながら調べつつ書いた。メモしておく。

test.html:


<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
    <!--
    function onStartClick() {
      if (document.F2.start.value == "Start") {
        document.F2.start.value = "End";
        
        for (i = 0; i < document.F1.elements.length; i++) {
          if (document.F1.elements[i].value == "") {
            document.F1.elements[i].value = document.F2.begin.value + "-" + document.F2.end.value;
            document.F1.elements[i].setAttribute("readOnly", "true");
            document.F1.elements[i].setAttribute("style", "background-color: #CCCCFF;");
          }
        }
      } else if (document.F2.start.value == "End") {
        document.F2.start.value = "Start";
        
        for (i = 0; i < document.F1.elements.length; i++) {
          if (document.F1.elements[i].hasAttribute("readOnly")) {
            document.F1.elements[i].value = "";
            document.F1.elements[i].removeAttribute("readOnly");
            document.F1.elements[i].setAttribute("style", "background-color: #FFFFFF;");
          }
        }
      }
    }
    // -->
    </script>
  </head>
  <body>
    <p><b>時刻</b></p>
    <form name="F2" action="#">
      <input type="text" name="begin" value="08:00" />
      <input type="text" name="end" value="17:00" />
      <input type="button" name="start" value="Start" onclick="onStartClick()" />
    </form>
    <p><b>結果</b></p>
    <form name="F1" action="#">
      01: <input type="text" name="text_area01" value="" /><br />
      02: <input type="text" name="text_area02" value="" /><br />
      03: <input type="text" name="text_area03" value="" /><br />
      04: <input type="text" name="text_area04" value="" /><br />
      05: <input type="text" name="text_area05" value="" /><br />
      06: <input type="text" name="text_area06" value="" /><br />
      07: <input type="text" name="text_area07" value="" /><br />
      08: <input type="text" name="text_area08" value="" /><br />
      09: <input type="text" name="text_area09" value="" /><br />
      10: <input type="text" name="text_area10" value="" />
    </form>
  </body>
</html>

　いくつかの項目を入力した状態で[Start]をクリックすると、

　未入力のところだけ指定したデフォルト値が入り、入力ができない状態になる。

　[End]をクリックすると元に戻る。

　先日の時刻入力制限と組み合わせれば予定通り。

　はずかしい...。

時刻入力サポート＆入力補完するAjaxライブラリ3つ

　今現在Ruby on Railsで作ってるWebアプリに時刻を入力する欄があって、これを普通のテキストボックスにすると入力しにくいので、Ajaxのライブラリでどうにかならないかと調べてみた。

　まず「入力補完」とか「suggest」とかで検索したところ、「クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」というのがHitした。

　こんな感じで途中まで入力すると残りを推測＆候補を提示してくれる。

　

　画像なので動かないのです。実働するサンプルはこちらにあるので試してみるのも楽しいでしょう。PHPSPOTほどの有名サイトの2007年のエントリなので釈迦に説法かもしれませんが。

　で、これはけっこう利用が難しいのと、キーボードでの操作が直感的でないのと、画像が派手すぎるのとで違うかなーと採用見送り（ローカルでいろいろいじったけど、ちょっと凝ろうとしたら動かなくなった）。

　次に「suggest.js - 入力補完ライブラリ」を試してみた。こんな感じになる。

　

　実働サンプルはこちら。デザインもシンプルだし、キーボードナビゲーションもわかりやすい。候補数が少なければHTML内や外部.jsに直接書いてしまえるのでお手軽だったりもする。いいじゃん！　いいじゃん！　これ好き！！

　でも僕が最初にやりたかったのは時刻入力だったので目的としていたのとはだいぶ違いますね。覚えておくけど、別なの探さなきゃ。

　たぶん検索ワードがよくないなぁと違う単語で探したら「JavaScript + Ajax 実践サンプル集 - jQuery Time Entry」をあっさり発見。

　

　そう、これが欲しかった。キーボードで時刻入力可能で「8:」って打つと「08:00」になったりするの。実働サンプルはこちらにあります。

　入力補完で探すとGoogle Suggest的なサンプルが大量に引っかかるのね。いまさらながら影響の大きさを思い知るなぁ。

　今日の成果は主にこれ。
　アウトプットが少なすぎる…。