2014-11-10

Firefox34でXHR#sendにオブジェクトを指定すると怒られる

Firefox JavaScript

Firefox 34 サイト互換性情報 - Mozilla | MDN
Firefox 34 for developers - Mozilla | MDN

変更点とか参照する限りそういった記述は見られないんですが、仕様変わったんでしょうか。

例えばこんなコードを書くとff34ではエラーが吐かれます。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com");
xhr.send({});

Error: The expression cannot be converted to return the specified type.

ff33、またはchromeだとsendに何渡してもエラー出ない。
ちなみにオブジェクトや配列はだめなんですが、HTMLElementは大丈夫です。

xhr.send(document.createElement("div"));

そもそもsendの引数はpost時の文字列だったりFormDataだったりしかないので、変なもの渡したらエラー出すのは自然なのかもしれないんですけど、上の例みたいに全て拒否するわけじゃないので腑に落ちなかったりするわけです。バグかな。

jQueryとかXMLHttpRequestをラップしてるライブラリを使っていれば恐らく遭遇することはないですね。素のJavaScriptを書いていてXHRのGETとPOSTの振り分け処理をするところに不備があったりすると遭遇するかもしれませんね。（遭遇しました）

2014-10-15

自作npmをcoffeeで書いた時compileはどこでするか

JavaScript node.js npm CoffeeScript

インストール時のお話。

何をcoffeeで書いたとしても吐かれたjsはあまり見たくないわけですが、ましてやバージョン管理なんてもっての外だし当然配布時もjsファイルは含めたくない、って時にどうするか。

https://www.npmjs.org/doc/misc/npm-scripts.html

npmのドキュメントのscriptsの項を見ます。
ここにはpackage.jsonのscriptsの項が何かということが書いてあるわけなんですが、scriptsはいわゆるhookスクリプトみたいなものです。
npmモジュールが動作する各時点において指定したコマンドを実行してくれます。

prepublish: Run BEFORE the package is published. (Also run on local npm install without any arguments.)
publish, postpublish: Run AFTER the package is published.
preinstall: Run BEFORE the package is installed
install, postinstall: Run AFTER the package is installed.
preuninstall, uninstall: Run BEFORE the package is uninstalled.
postuninstall: Run AFTER the package is uninstalled.
preupdate: Run BEFORE the package is updated with the update command.
update, postupdate: Run AFTER the package is updated with the update command.
pretest, test, posttest: Run by the npm test command.
prestop, stop, poststop: Run by the npm stop command.
prestart, start, poststart: Run by the npm start command.
prerestart, restart, postrestart: Run by the npm restart command. Note: npm restart will run the stop and start scripts if no restart script is provided.

指定できるのは上記のもの。丁寧に時系列順で書かれています。各scriptsがそれぞれどの時点でhookされるかはここでは解説しませんが、今回利用するのはinstallです。
自作モジュールが実行される以前にcoffee compileを（一度だけ）済ませる必要があるのでこの時点となります。

installは「Run AFTER the package is installed.」と書かれている通り、npm installが済んだ時点でhookされます。でもそれより前の時点でhookされるものとしてprepublishやらpublishやらあるけどつまりいつよ？となるわけですが、installは分かりやすいです。mainファイル等のコピーが済んでpackage.jsonに書いてある依存モジュールがinstallされた時点でhookされます。というかそのあとが「preuninstall」とかなんで分かると思いますが、すべての配置が済んで利用可能な状態になった時ですね。（coffee compileが済んでないので利用可能な状態じゃないんですが）

利用されるより前にcoffee compileできればいいんだからpublishやpreinstallでもいいのでは？と思うかもしれません。が、そこでやってしまうとcoffee自体が存在しない場合にcompileできないためやはりnpm installが済んだ後であるinstallでやる必要があります。もちろん依存モジュールにcoffeeを含めることを忘れずに。

ということでcoffee compileをしてやるところが分かったのでpackage.jsonに記述します。

"scripts": {
    "install": "coffee -bco output/ input/"
},
"dependencies": {
    "coffee-script": "^1.7.1"
}

今までscriptsをよく知らずtestしか使ったことなかったんですが、jsファイルを除去する方法を調べていてscriptsが使えそうってことで調べ直す機会ができたのでメモがてらのエントリーでした。

もしかしたらbinでcoffeeコマンド叩いてやればcoffee compileすら必要ないのかもしれないんですが、カレントディレクトリがずれてしまってうまくいかなかったのでやり方知っている方いたら教えてください…。

追記

真面目に書いてない時は index.jsに require('coffee-script/register'); require('src/main') みたいな感じに書いてる

coffee-script/registerを利用するとjsからcoffeeをrequireできます。なるほど、これならcoffee compileを介す必要はありませんね。
今回自分が書いていたのはコマンドラインのものだから

  "bin": {
    "hoge": "./index.js"
  }

#!/usr/bin/env node
require("coffee-script/register");
require("./src/main");

こんな感じかな。/usr/bin/env coffeeでcoffee実行するようにしてもいいのかも。
package.jsonでmainに指定するものならコメントの通りワンライナーのjsでよさそうです。
id:mizchi ありがとうございます。

2014-04-11

contenteditableな内容をURIで開いてブックマーク

ブックマークレット JavaScript

たった一行でブラウザをシンプルなメモ帳に変える方法 | IDEA*IDEA
結構お世話になっていたこのスニペット。

書き捨てのメモじゃなくて保存しておきたいって時にhtml形式でそのまま保存するか、内容をコピペしてどこかしらに貼り付けて保存をしないといけないのが若干不便だなぁと感じていたのだけど、同じようなことをやってやればブックマーク保存までできるなぁと今更ながら思った。

javascript:window.open("data:text/html, <html contenteditable><script>document.write(decodeURIComponent('" + encodeURIComponent(encodeURIComponent(document.body.innerHTML)) + "'));document.querySelector(\"head\").appendChild((function() { var t = document.createElement(\"title\"); t.textContent = new Date; return t; })());</script></html>");void(0);

firefoxで動作確認。
こいつをブックマークレットとして登録しておいて、メモが終わってどこかに保存しておきたいってなった時に実行すれば、書いた内容を含めたURIでwindowをオープンするようになっているので、この開いたページをブックマークしてやればメモった内容のブックマークができあがり。
各種ブックマークサービスには登録できず。data:なURI登録できるブックマークサービスないかな。

Hatena::Letに動作するものをうまく登録できなかったので持って行く場合はコード確認の上コピっていってください。

2013-07-11

フラットデザインとかいう流行は早く終われ

雑記

フラットデザインがなんか流行ってるらしいですが、自分はこのデザインもの凄く嫌いで早く流行が過ぎ去らないかなーと思いながら”レスポンスのないボタン”を連打している今日このごろです。
今日も身近なウェブサイトが機能そのままにフラットデザインに変わって遠い目してます。
何が嫌ってその見た目のチープさもそうだけど、クリックしても何も反応がないところ。これだったら全くスタイルが当たっていないアンカーのほうがテキストが青から紫に変わるからよっぽど反応があって分かりやすいんだけど。
もうなんでもいいから音でもなんでも出してよ！クリックしてすぐページ切り替わらないとクリックをし損ねたのか何かロード中なのかブラウザのタブのファビコン部分見ないと何もわからないじゃないか。

Web2.0って言葉が流行った頃のボタンデザインは個人的に気持ちよかったです。光沢あるデザイン、カーソルを合わせた時とかボタン押した時の変化が心地よかった。ボタンフェチにはウェブサイトの内容よりもメニューのボタンいじってる方が楽しかったくらい。
ただこれもだんだん浸透していって見真似の安いものが出回るようになってきてその心地よさもたまに阻害されることもあったんですが。
最近だとボタンが押し込まれるものも期間短いけど流行った気がします。これも気持ちよかった。
フラットデザインの場合そもそも良い悪いが個人的にほとんどなくて、安っぽいものが多い。さっきの見真似の安いものが出回るっていうのがすごい速さで広がってしまった感じ。細部に拘ったデザインはあるんだと思うけど、見た目真似するのは圧倒的に簡単だしね。

あーもうほんとこのデザイン一体どうやって広まってきたの…。ボタンも乳首も押して反応があるからいじりたくなるんでしょうに。
まだしばらく気持ちいいボタンには出会えそうにないです。

2013-04-02

grunt-cliへの移行備忘録

JavaScript Grunt.js

今やってるプロジェクトで使ってるGruntをgrunt-cliで行うようにしたのでメモ。
0.4からGruntはgrunt-cliというのを使うようになったようです。ちなみにこのプロジェクトではまだ0.3.17でタスクを実行する。

基本的にはGetting started - Grunt: The JavaScript Task RunnerとUpgrading from 0.3 to 0.4 - Grunt: The JavaScript Task Runnerにある内容。
0.4からはgrunt-cliを使うようになり、このコマンドがpackage.jsonという設定ファイルを見て各プロジェクトごとにinstallされたgruntを利用して実行するようになるようです。依存しているgruntプラグインも個別に設定するようになるのでgruntをクリーンな状態で保てます。

-gでinstallしているgruntをuninstall

npm uninstall -g grunt

gruntコマンドを扱うモジュールが変わるのでまずはgruntをuninstall。

grunt-cliをinstall

npm install -g grunt-cli

こいつがgruntコマンドになります。でもgrunt自体じゃないです。package.jsonを見てgruntを実行します。

package.jsonを作成

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.3.17"
  }
}

使用するgruntのバージョン、使用するプラグインがあればdevDependenciesに書きます。0.4だとconcat等のタスクを実行する場合にはgrunt-contrib-concatとかが必要になるので書かないとなんですが、以前のバージョン（この場合は0.3.17）を使用する場合はそのへんの基本的なものは含まれているので書く必要はありません。

gruntをinstall

npm install grunt@0.3.17

ローカルにgruntをinstall。grunt-cliはgruntコマンドを実行したディレクトリにあるgruntを実行するので、package.jsonに使用するgruntを書いた上でinstallをしておかないと「Unable to find local grunt.」とか言われます。

必要なプラグインがあればinstall

今回自分は特に使うものはないですが、

npm install grunt grunt-contrib-concat

とかやってinstallします。

これで準備完了。0.4以降のやり方で0.3を実行。このあとgrunt自体も0.4でできるようにちょこちょこ変えてく

2012-12-12

マイリスト動画を移動するフォームをfixedにするグリモン

Greasemonkey ニコニコ動画

とりあえずマイリストとか、登録してる動画が多いフォルダはあとで整理しようと思っても移動用のフォームがページの上の方にあるからものすごい使いづらい。
ということであのフォームをスクロールに合わせて追従するようにposition:fixedにしました。

http://userscripts.org/scripts/show/153902

一ページ分スクロールすると追従するようになります。
これでもまだとりあえずマイリストからの各フォルダへの移動はめんどいので何かしら考えんと。

＃そういえばuserscripts.orgに登録してるグリモンにスクショつけようと思っても画像アップロード失敗する…。

2012-09-15

ニコニコのランキングページのカテゴリ補完

Greasemonkey

http://userscripts.org/scripts/show/145807
カテゴリー補完と言うか何と言うか。
ページ上部のカテゴリメニュー、今のカレントのカテゴリのサブカテゴリしか表示されてないどう考えても不便なメニューの拡張。
とりあえずいつも毎時合算を見たあと科学→科学、生活・一般・スポ→自然と移動するのがあまりにもめんどくさかったから作った。
というかこのメニュー部分はこうなって然るべきUIになってる気がするのだけど。チョコチョコこの部分デザイン変わるようだけどもっと先にする事ないか。
そのデザインがやたら変わるというのがまた憂鬱だけど、何とか追従するようにしよう。というかこれつけてください。

~~そういえばchromeはuserscriptをストアに登録しないといけないんだっけ。ふえぇ…~~
*.user.jsをchromeの拡張機能オプションのページにD&Dすればいいだけだった。