現在Railsの開発にRubyMineを使っているんだけど、Nuxtなどを触るためにJS専用のWebStormを買うべきか迷ってたので機能の違いを調べてみた。
bashやRubyのpryでctrl+rで使える reverse interactive search をnodeのシェルでも使う方法の紹介です。
rlwrap のインストール rlwrapが必要なのでbrew install rlwrapでインストールしましょう。他の環境の場合は環境にあったパッケージマネージャでインストールしてください。
rlwrapはGNUのreadline的な振る舞いをするためのパッケージだそうです。
node側の設定 alias node="NODE_NO_READLINE=1 rlwrap node" を追加してnodeでreadlineを使うように設定しておきましょう。
参考 https://stackoverflow.com/questions/46714331/how-to-use-reverse-interactive-search-in-nodejs-repl
かなりハマったのでappend()などを使って動的に追加したHTMLの要素にhoverイベントを追加する方法を残しておきます。説明は全部 coffee script で書いてるので生のJSが良い人は自動変換サービスでもをつかってください。
前提となる知識 まず基本として $('#foo').click -> console.log "押された！" のように #foo に対して click イベントが追加されているわけですが、このイベントの追加はページの読み込み時に行われるために append() などで後から動的に追加された要素にはイベントの登録がされません。
なのでそれを解決するために昔の delegate(), 今なら on() メソッドがあるわけです。簡単でわかり易い名前に統一されたので見た目はスッキリしたのですが、代わりにサンプルコードを探すのが大変になりました。 on って単語短すぎやしません…？
後から追加された要素に click イベントを追加 前置きが長くなりましたが
$('#foo').click -> console.log "押された！" を動的に追加された要素に適用させるには
$(document).on 'click', '#foo', -> console.log "押された！" とします。document 内部の要素がクリックされるたびにイベントが発火され、クリック対象が #foo ならメソッドが実行されます。もちろん document ではなくページ読み込み時に存在する #foo の親に当たる要素なら何でも構いません。無駄なイベントを発生させないためにできるだけ近い親が良いでしょう。
後から追加された要素に hover イベントを追加 同様に hover イベントも click イベントのように簡単に書き換えれたらいいのですが、hover イベントを on() を使って割り当てると hover は mouseenter と mouseleaveという複数のイベントを受け取っており、このように複数のイベントを受け取ってる関数を on メソッドで割り当てるためにはどのイベントを受け取ったのかを判別して処理する必要が出てきます。
記述が間違っていたので修正しました。
onイベントの引数として "hover"を使った場合、それは単なる "mouseenter mouseleave" の別名であって hover() 関数とは無関係であり、またこの記述方法は jQuery1.
jQuery で選択した要素が存在するかどうかの関数が何故か用意されてないようだったので追加しました。
CoffeeScriptで書いてるのでjavascriptとして使いたい場合は converter にかけてください。
$.fn.isExist = -> $(@).length != 0 $.fn.isNotExist = -> $(@).length == 0 参考 [How to tell if an element exists | jQuery for Designers – Tutorials and screencasts][1]
rails には 値の有無をチェックするときにタブやスペースなどの空白が入っていても「空」だと判断する便利な blank? 関数が用意されていますが、どうやら JavaScript や jQuery には用意されてないので追加してみました。
自分で書いた後にもっと良さそうなコードを見つけたのでそちらを紹介します。
JavaScript $.fn.isBlank = function() { return !$(this.html()) || $.trim($(this).html()) === ""; }; Coffee もちろん Rails 標準のCoffeeも。
$.fn.isBlank = - !$(@.html()) || $.trim($(@).html()) is "" 参考 [Checking for blank input with jQuery – Stack Overflow][1]
[jQuery isBlank() | LakTEK (Lakshan Perera)][2]
以前使ったAjax用の load.gif の背景が透過されてなかったので、背景が透過されたの探してたらそういう画像を生成してくれるサイトを見つけました。便利！
Ajaxload – Ajax loading gif generator
Railsのプロジェクトで coffee script を使うけどもコンパイルは全て Asset pipelineがやってくれるので、たまに変換結果の js をちょっと見てみたい時に困った事になります。
なのでEmacsの smart compile の機能を使ってすぐに 出力結果を得られるようにしてみました。
解決策 coffee -pで標準出力に変換結果を出力してくれるので
(global-set-key (kbd "C-c C-x") 'smart-compile) (setq smart-compile-alist (append '(("\\.rb$" . "ruby %f")) '(("\\.php$" . "php %f")) '(("\\.coffee$" . "coffee -p %f")) '(("\Gemfile$" . "bundle install")) smart-compile-alist)) としておけばOKです。
参考 [Convert coffee to javascript and show the result to standard output in Emacs – Stack Overflow][1]
画面遷移無しでファイルのアップロードしようと思ったらiframeを使った技とかややこしい情報が色々出てきて、なかなかやりたいことに辿りつけなかったのでメモ。
やりたい事と条件 ・ajaxなテキストファイルのアップロード
・テキストをRubyで編集して返す
・画面遷移せずに結果を表示
・IEは諦める。
必要最低限のコード まずHTMLを用意
ajaxupload.html
`
<script type="text/javascript" src="ajaxupload.js" charset="utf8"></script><br>
textarea{height:80%;width:100%;}
` つぎにjavascript
ajaxupload.js
`
$(function(){ $("#upload").click(function(){ var file = $("#file")[0].files[0]; var reader = new FileReader(); reader.readAsText(file, 'UTF-8'); reader.onload = showFile; }); function showFile(event) { $.ajax({ type: "POST", url: "ajaxupload.rb", data: { filedata:event.target.result} }).done(function(msg) { $("#output").html(msg); }); } }); ` んで何か処理をするRubyのスクリプト。ここではファイルの中身をそのまま返してるだけ。(パス名は適宜変更してください。)
ajaxupload.rb
`
#!P:\Dropbox\bin\RailsPortable\App\Rails\bin\ruby.exe require "
javascript で大文字、小文字を区別しないで文字列比較がしたい時は、そういう演算子は用意されてないので toLowerCase() で全部小文字にして比較しちゃいましょう。
こんな感じ。
function check(){ foo="ABC"; bar="abc"; if(foo.toLowerCase() == bar.toLowerCase()){ //大文字小文字を無視 alert("ok!!"); }else{ alert("NG!"); } } ちなみに英語で「大文字、小文字を区別しない。」と言いたい時は case-insensitive を使えばよいそうですよ。
jQuery を使って
「クリックされた時に左なら要素を消して、右なら何もしない。」
という動作をさせようと思ったら日本語だと検索してもすぐに答えが出てこなかったので、また stackoverflow から解説を紹介します。
実際のコードがこちら。
$('#element').mousedown(function(event) { switch (event.which) { case 1: alert('Left mouse button pressed'); break; case 2: alert('Middle mouse button pressed'); break; case 3: alert('Right mouse button pressed'); break; default: alert('You have a strange mouse'); } }); mousedown の時に渡されるイベントを確認して場合わけすればよい、と。
つまり左クリックで要素を隠すにはこうします。
//左クリックされると foo を隠す $(".foo").click(function(e){ if(e.which == 1){ //左クリック $(this).hide("fast"); } }); 他の方法 頻繁に使うのであれば 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?
