bashやRubyのpryctrl+rで使える reverse interactive search をnodeのシェルでも使う方法の紹介です。

rlwrap のインストール

rlwrapが必要なのでbrew install rlwrapでインストールしましょう。他の環境の場合は環境にあったパッケージマネージャでインストールしてください。

rlwrapはGNUのreadline的な振る舞いをするためのパッケージだそうです。

node側の設定

を追加してnodereadlineを使うように設定しておきましょう。

参考

https://stackoverflow.com/questions/46714331/how-to-use-reverse-interactive-search-in-nodejs-repl


RailsのDBからGETでデータの呼び出しはできるけど、PUTで値の追加ができなくてこんなエラーに成った時の対処法

原因

CSRF対策です。

ダメな対策

モデルにこれを追加

サイバーノーガード戦法です。おすすめしません。

良さそうな対策

gem の<a href="https://github.com/xrd/ng-rails-csrf">ns-csrf-rails</a>を使う。わからないことは全部gemにまかせてしまいましょう。


かなりハマったのでappend()などを使って動的に追加したHTMLの要素にhoverイベントを追加する方法を残しておきます。説明は全部 coffee script で書いてるので生のJSが良い人は自動変換サービスでもをつかってください。

前提となる知識

まず基本として $('#foo').click -> console.log "押された!" のように #foo に対して click イベントが追加されているわけですが、このイベントの追加はページの読み込み時に行われるために append() などで後から動的に追加された要素にはイベントの登録がされません。

なのでそれを解決するために昔の delegate(), 今なら on() メソッドがあるわけです。簡単でわかり易い名前に統一されたので見た目はスッキリしたのですが、代わりにサンプルコードを探すのが大変になりました。 on って単語短すぎやしません…?

後から追加された要素に click イベントを追加

前置きが長くなりましたが

を動的に追加された要素に適用させるには

とします。document 内部の要素がクリックされるたびにイベントが発火され、クリック対象が #foo ならメソッドが実行されます。もちろん document ではなくページ読み込み時に存在する #foo の親に当たる要素なら何でも構いません。無駄なイベントを発生させないためにできるだけ近い親が良いでしょう。

後から追加された要素に hover イベントを追加

同様に hover イベントも click イベントのように簡単に書き換えれたらいいのですが、hover イベントを on() を使って割り当てると hovermouseentermouseleaveという複数のイベントを受け取っており、このように複数のイベントを受け取ってる関数を on メソッドで割り当てるためにはどのイベントを受け取ったのかを判別して処理する必要が出てきます。

記述が間違っていたので修正しました。
onイベントの引数として "hover"を使った場合、それは単なる "mouseenter mouseleave" の別名であって hover() 関数とは無関係であり、またこの記述方法は jQuery1.8 で depracated で 1.9 では削除されたそうです。

以下はマウスカーソルがあたった時に、クリックできる要素だとユーザーに伝えるためにマウスの形状を変更するコードですが

のようなコードがあった時に

では動きません。

解決策

実際に動くコードは以下のようになります。

参考

javascript – JQuery .on() method with multiple event handlers to one selector – Stack Overflow

.on() | jQuery API Documentation


jQuery で選択した要素が存在するかどうかの関数が何故か用意されてないようだったので追加しました。

CoffeeScriptで書いてるのでjavascriptとして使いたい場合は converter にかけてください。

参考

How to tell if an element exists | jQuery for Designers – Tutorials and screencasts


rails には 値の有無をチェックするときにタブやスペースなどの空白が入っていても「空」だと判断する便利な blank? 関数が用意されていますが、どうやら JavaScript や jQuery には用意されてないので追加してみました。

自分で書いた後にもっと良さそうなコードを見つけたのでそちらを紹介します。

JavaScript

Coffee

もちろん Rails 標準のCoffeeも。

参考

Checking for blank input with jQuery – Stack Overflow

jQuery isBlank() | LakTEK (Lakshan Perera)


Railsのプロジェクトで coffee script を使うけどもコンパイルは全て Asset pipelineがやってくれるので、たまに変換結果の js をちょっと見てみたい時に困った事になります。

なのでEmacsの smart compile の機能を使ってすぐに 出力結果を得られるようにしてみました。

解決策

coffee -pで標準出力に変換結果を出力してくれるので

としておけばOKです。

参考

Convert coffee to javascript and show the result to standard output in Emacs – Stack Overflow


画面遷移無しでファイルのアップロードしようと思ったらiframeを使った技とかややこしい情報が色々出てきて、なかなかやりたいことに辿りつけなかったのでメモ。

やりたい事と条件

・ajaxなテキストファイルのアップロード
・テキストをRubyで編集して返す
・画面遷移せずに結果を表示
・IEは諦める。

必要最低限のコード

まずHTMLを用意

ajaxupload.html

つぎにjavascript

ajaxupload.js

んで何か処理をするRubyのスクリプト。ここではファイルの中身をそのまま返してるだけ。(パス名は適宜変更してください。)
ajaxupload.rb

デモ

サンプルを置いておきます。(さくらのレンタルサーバーはRubyの拡張子がrbではなくcgiじゃなくと動かなかったのでファイル名を変えています。

http://ironsand.net/misc/ajaxupload/ajaxupload.html

上のコードをZIPで固めた奴


javascript で大文字、小文字を区別しないで文字列比較がしたい時は、そういう演算子は用意されてないので toLowerCase() で全部小文字にして比較しちゃいましょう。

こんな感じ。

ちなみに英語で「大文字、小文字を区別しない。」と言いたい時は case-insensitive を使えばよいそうですよ。


jQuery を使って

「クリックされた時に左なら要素を消して、右なら何もしない。」

という動作をさせようと思ったら日本語だと検索してもすぐに答えが出てこなかったので、また stackoverflow から解説を紹介します。

実際のコードがこちら。

mousedown の時に渡されるイベントを確認して場合わけすればよい、と。

つまり左クリックで要素を隠すにはこうします。

他の方法

頻繁に使うのであれば jquery.detailclick.js を入れてこんな風に使えるようにしておくとよいかもしれません。やっぱりこちらの方が jQuery っぽくて見やすいですね。

("target").rightClick(function()
{
$(this).text('右クリックされました!').css('background-color', '#ff3399');
});

参考

javascript - How to distinguish between left and right mouse click with jQuery? - Stack Overflow
http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery
JSNote - 左、中、右クリックのカスタムイベントを追加するjQueryプラグイン
http://jsnt.blog.fc2.com/blog-entry-3.html