2011-02-22

Javascript で Enter キーの入力を感知する

jQuery Javascript

jQuery + Javascript を使って Enter キーを感知しようという場合には，以下のコードを考えがちである．

$(...).keyup(function(ev){if(ev.which==13) alert('Enter pressed');});

しかし，この方法は日本語入力を絡めたときに問題が発生する．漢字変換を使っていて Enter を入力したときにも感知してしまうのだ．これは，テキストボックスでエンターが押されたときに確定をするような処理をしたい場合に，少々問題になる．

どうにか出来ない物かと考えていたら，やはり先人がいたようである．

http://hondou.homedns.org/pukiwiki/pukiwiki.php?Javascript%20IME%C6%FE%CE%CF%C3%E6%A4%CE%C8%BD%C4%EA

上によれば，keypress が呼ばれずに keyup が呼ばれた場合，IME で変換中であると判定できるとのこと．実際に試したら上手く言った．

そして上手くいったついでに jQuery のプラグインにしてみた．

https://github.com/yuichi1004/jquery.smartenter

ご自由にどうぞ．

2011-02-15

jqPlot で1,000区切り表記

jqPlot Javascript

printf のオプションには %'10d のように書いてやると 1,000,000 のような 3 桁区切りの表記方法が存在する．しかしながら jqPlot が内部で利用している sprintf エンジンが，これに対応していないために，どうやらこのオプションを受け付けてくれないようだ．

不便に思ったので，実装してみた．パッチファイルは以下．

http://code-u.jp/public/patches/patche-jquery-thousand_separator

本家にパッチ申請してみようかな．<追記>
貢献初体験してみました．なにやら jqPlot のプロジェクト管理は hg を使っているとかで．
hg をインストールして，クローン．変更点を加えて pull リクエストをしてみた．

こういうやり方で良いのかな？<追記 2>
本家 jqPlot に変更がマージされました！次のバージョンあたりから，通常通り使えるようになるかもしれない．

2011-02-15

HTML5 Canvas と jqPlot

Javascript jqPlot

一時，急に脚光を浴びてちょっと落ち着いた HTML 5 ですが，個人的には良い技術だなぁと思っています．特に Canvas や Video 回りが素敵．

Javascript の利点は何と言ってもその敷居の低さ．HTML にちょいちょいっと書き足せば，動的なコンテンツがかけるところが素敵です．弱点は描画やリッチなコンテンツを扱うのが難しい点だったと思うのですが，HTML 5 によって，こうしたコンテンツを Javascript から扱えるようになります．

そんな中でも，この HTML 5 を上手く使っているなぁと思うのが jqPlot です．

jqPlot
http://www.jqplot.com/

Javascript でデータを渡してやれば，綺麗なグラフを作ってくれます．上手くコールバック関数などを用いてやれば，インタラクティブなグラフなども作ることが可能．Javascript + HTML5 Canvas の手軽さを上手く利用できてるなぁと関心します．

2011-02-14

vim で関数コメント補完

vim

Vim スクリプトを同時並行で学習中．
JavaDoc 形式のコメントを生成してくれるスクリプトなど組んでみた．

以下のコードを .vimrc に貼り付ける．
あとは該当の function が存在する行にて c を押してやると引数リストを取得して JavaDoc 形式のコメントを記述してくれる．

" Auto JDoc Commands
autocmd FileType javascript nmap <C-c>c :call JsJDoc()<CR>
autocmd FileType php nmap <C-c>c :call PhpJDoc()<CR>

" Insert JDoc Comment
" param summary: Summary of the function
" param args: list of arguments' name
function! AddJDocComment(summary, args)
    let c = indent(".") / &tabstop
    let top = a:firstline - 1 
    let l = a:firstline - 1 
    let s = ''
    while len(s) < (c) 
    let s = s . "\t"
    endwhile
       
    call append(l, s . '/**')
    let l+=1
    call append(l, s . ' * ' . a:summary)
    let l+=1
       
    for arg in a:args
        call append(l, s . ' * @param ' . matchstr(arg, '[^$].*') . ' ')
        let l+=1
    endfor

    call append(l, s . ' * @return ')
    let l+=1
    call append(l, s . ' */')

    call cursor(top+2, 80) 
endfunction

" Insert JDoc Comment in Js source code
function! JsJDoc()
    let args = split(matchstr(getline('.'), 'function(\zs.*\ze)'),' *, *')
    call AddJDocComment('', args)
endfunction

" Insert JDoc Comment in PHP source code
function! PhpJDoc()
    let args = split(matchstr(getline('.'), 'function [^(]*(\zs.*\ze)'),' *, *')
    call AddJDocComment('', args)
endfunction

vim スクリプト面白いんだけど，なにしろ情報が少ないのでちょっと苦戦気味．