橋本商会

クリックするとinputタグになるのはいいけど、textareaにはできないの？という質問が来たので、実装した。

デモ

こういうところをクリックすると


編集できるようになって


枠外をクリックすると保存される


edit-in-place（その場編集）プラグインはいくつか存在するけど、jQuery.editableは最も使いやすいAPIを出していると思います。
他のは・・あまりカッコよく書けない。

clickしたら編集し、編集終了後の値をコールバックで取得するのはこう書ける。
click以外にもmouseover, dblclick, clickholdなどトリガーは色々設定できる。

$("span#edit").editable("click", function(e){

  alert(e.value);

});

値をチェックして、条件に合わなかったら元の値に戻すこともできる（validatorがわり）

$("span#zip").editable("click", function(e){

  if( !e.value.match(/^\d{3}\-\d{4}$/) ){

    e.target.html(e.old_value);

    alert(e.value + " is not valid zip-code");

  }

});

編集するテキスト以外のDOM要素をトリガーにする事もできる。この場合は横に「編集ボタン」があってそれを押したら編集モードになる。編集中はトリガーになった要素はhide()される。

var option = {trigger : $("input#btn_edit"), action : "click"};

$("span#edit").editable(option, function(e){

  alert(e.value);

});

今回追加したtextarea版はこうやる。type: “textarea”を指定すればtextareaになり、その中は複数行の編集ができる。

var option = {type : "textarea", action : "click"};

$("p#license").editable(option, function(e){

  alert(e.value);

});

のgithub pagesを作ってみた

jQuery.editable


30分ぐらいで作れるので楽しい。

けっこう増えてきた http://shokai.github.com

jQuery.editableというプラグインを作った。

デモページ

触ってみればわかるが、edit in place(その場編集)ができる。クリックやマウス長押しでテキストを編集開始して、Enterキーを押すか入力フォーム外をクリックすると編集が終了する。編集完了時にあらかじめ登録しておいたcallback関数が呼ばれて入力値が渡される。
似たようなのが他にもいくつかあるけど、callback指定できて簡単に使えるものが無かったので作った。

 

■使い方

読み込んで

<script src='jquery.editable.js' type='text/javascript'></script>

jQueryのセレクタからeditable関数に編集方法（click, dblclick, clickhold, mouseoverなど）とコールバック関数を登録する。

$('span#edit').editable('click', function(e){ alert(e.value); });

e.valueで編集後の値が取れる。e.old_valueで編集前の値が取れるので、e.valueが気に入らなかったら元に戻したりできる。
githubのREADMEを見るとわかりやすい。テキストそのものをクリックだけではなく、横のボタンを押したら編集モードに入るのも作れるようにしてある。

 

■jQuery pluginの作り方

初めてjQuery pluginを作った。

(function($){

  $.fn.editable = function(/* 適当な引数 */){

    /* 適当に処理 */

    return this;

  };

})(jQuery)

と書くと、 $.editable に関数が登録できる。
登録した関数内のthisはjQueryのセレクタで取ったDOM要素が入る。
最後にreturn thisしておくとjQueryのmethod chainが使える。

AndroidでADK開発している時に便利なツールを作った → http://dev.shokai.org/js/websocket-client/

ADKをAndroidに挿すと、1つしかないUSBポートが埋まってしまって、logcatでデバッグ情報を見れなくなってしまう。しかし、俺の使っているNexusSはネットワーク越しのADB(Android Debug Bridge)はrootを取らないと使えない。

素晴らしいことにブラウザからlogcatを見る – 明日の鍵で、「LogcatSocketServer」というlogcatを全てwebsocketに流してくれるサーバーを作ってくれていた。これは凄く良い。

俺は普段はlogcatを複数開いて、 ^[DE]/ やアプリ名などでgrepしてエラーだけを表示したりしている。LogcatSocketServerの出力を分割してそれぞれgrepできるしくみがあれば、普段と同じ快適なAndroidアプリ開発環境が手に入る・・・ので作った。



webブラウザでwebsocketを受信して、縦分割で複数表示し、それぞれgrepできる。（クリックで拡大）
「+」ボタンを押す毎に分割パネルが増える。
この例では4分割して、左から順に「全て表示」「IOIOに関するものだけ表示」「DebugとErrorだけ表示」「バッテリー情報を表示」している。

Androidのデバッグだけではなく普通のwebsocketを使ったwebアプリのテストにも使えるはず。



■LogcatSocketServerのインストール
ブラウザからlogcatを見る – 明日の鍵にあるLogcatSocketServerをAndroidにインストールする。


バイナリがあるのでダウンロードして、AndroidにUSBケーブルつないでインストール。

wget http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/LogcatSocketServer/bin/LogcatSocketServer.apk

adb install -r LogcatSocketServer.apk

起動させ、start serverボタンを押すとAndroidがwebsocketサーバーになる。



■webブラウザでlogcatを見る
http://dev.shokai.org/js/websocket-client/を開く。Google ChromeかSafariでしか動かない。

LogcatSocketServerの画面に表示されているIPアドレスとポート番号を、左上に入力してに接続する。
「+」ボタンを押すとパネルが増える。あとはgrep欄に正規表現を書けば表示をフィルタできる。

^[VEW]/アプリ名 とかでgrepしたりすると便利ですぞ。


ローカルで実行するならgithubに置いたのでどうぞ https://github.com/shokai/websocket-client

git clone git@github.com:shokai/websocket-client.git

open websocket-client/index.html

こういうGUIアプリ、VisualStudioとかで作ってたけど無名関数をばしばし使えるJavaScriptの方が作りやすいですね。

研究室の後輩にSinatraとhamlとjQueryを教えるために作ったテンプレートについて、ここにも書いておく

ソースコード https://github.com/shokai/sinatra-template
実際動いているもの http://masui.sfc.keio.ac.jp/sinatra-template/

git clone git://github.com/shokai/sinatra-template.git

■Sinatraを何に使うか
Sinatra+haml+jQueryが便利。
Railsと似てるけど、ちょっと違う。

個人的には
Rails → HTMLのページをいっぱい作るのに便利
Sinatra → 画面遷移あまりしなくて、同じURLのままjsonのAPIをjQueryのajaxで取得して動的に表示を変えるwebページを作るのには便利

に感じる。
でもSinatra自由すぎるので、ある程度実装パターンを知らないとメチャクチャになるのでこのテンプレートを参考にすると良いよ

個人的にはserial-http-gatewayと一緒に使ってデバイスと連動したwebページを作る、とかが手軽にできてよく使う。



■動かし方
gemでsinatra入れて、ruby development.ru
詳しくはREADME嫁


■テンプレートの解説
最低限の動作するおみくじアプリです
おみくじ結果をJSONで返すAPIがある
jQueryでajaxでJSON読んで表示する
hamlでhtmlを作る
開発用とデプロイ用の2種類のRackUp(*.ru)ファイル付き


■ファイルの説明
・README.md
　まず読め
・development.ru
　開発サーバーを起動し、main.rbとhelper.rbを読み込んでSinatraアプリを実行するスクリプト
・config.ru
　本番サーバーのapacheやnginxでsinatraアプリを実行するためのPassenger用スクリプト
・config.yaml
　”やむる”形式の設定ファイルです。アプリのタイトルしか書いてない。
　ここに設定値を書くようにするとアプリを配布するのに便利
　（必要になったら）DBの接続設定などを書くと良い。
・Gemfile
　アプリで使うgemを書いておく
　bundlerでgemを管理する時に使う
・helper.rb
　起動時に一回だけ読み込まれる
　必要なライブラリをロードするコードはここに書く
　（必要になったら）データベースへの接続などをここで行うと良い。
　app_rootという関数が定義されている（重要）
　これにより、開発サーバー・サブドメインでの運用・サブディレクトリでの運用でも内部のURLがズレない
　jsからサーバーのAPIにアクセスする時、hamlでcssを読み込む時などに便利
・main.rb
　Sinatraアプリ本体
　HTTPでアクセスしてきた時のresponseを書く
　app_root/omikuji.json でアクセスしてきた時に、ランダムなおみくじを返す
・views/
　hamlを置くディレクトリ
・views/index.haml
　http://(app_root)/ にアクセスした時に表示されるhamlファイル
　index.hamlをどのURLの時に表示するかは、main.rbで指定している
　main.js, main.cssを読み込んでいる
　rubyの変数のapp_rootをjsの変数app_rootに渡している（重要）
・public/
　画像やjavascriptなどの静的ファイルを置くディレクトリ
・public/js/jquery.js
　最新版のjquery
・public/js/main.js
　index.hamlから読み込まれるJavaScript
・public/css/main.css
　index.hamlから読み込まれるcss

SinatraやjQueryの基本的な使い方についてはググる。ライブラリの入門サイトとかを頭から読むよりも既に動いているアプリのソースを読んでわからない所を調べるのが一番速い。


■工夫しているところ
そんなに多いわけでもないけど、
・config.ruとdevelopment.ruを分ける。developmentから起動した時だけsinatra/reloaderを使ってアプリを毎回リロードさせている
・helper.rbの中身は1プロセス毎に1回しか呼ばれないので、DBとの接続や設定ファイルの読み込みはmain.rbと分けてここに書いておくといい
・app_rootという関数を定義してあって、開発環境や本番環境でAPIのURLがずれないようにしている
・haml内に書かれたRubyコードの動作についてはここにまとめた


■アプリの動作
ruby development.ruする→helper.rb読む→helperがyamlの設定ファイルを読む、app_rootという関数を作る→port8080でサーバーがthinに設定される→Sinatraアプリ(main.rb)を起動→main.rbは”/”へのアクセスにindex.hamlを返す、”/omikuji.json”にはランダムなおみくじと時刻を返す

ブラウザで”/”にアクセスする→cssとjsを読む、ajaxでおみくじを取得する関数がボタンに関連付けられる→ボタン押す毎におみくじ表示される



こんな感じで、ajaxでデータ取ってきてhtmlを書き換えるアプリの最低限のテンプレートを用意しました。
意外とDB無くてもglitchtweetやTweetButtonや増井研オーディオAPIのようなものは作れるので、まずはDBなしでSinatra+Haml+jQueryで何か作ってみるのが良い。


DB使うときは、SQL系ならActiveRecordsかSequelかDataMapperあたりがメジャーなのかな？多分。そのへんをまず単体で使ってみて、適当にtwitterのクローラーとか作ってみると良い。
それからSinatraの中に混ぜて使ってみる。いきなりjsで画面が書き換えて、Sinatraもいじって、DBも使うとかやると確実に破滅するので一つずつやるのオススメします