はてなブックマーク

SeleniumラッパーなテストフレームワークをGoで書いてみた。初Go。 https://github.com/hokaccha/sprinkler GoのコードでE2Eテストのコード書けてもあんまり嬉しくないのでYAMLで書けるようにした。 scenarios: - name: Hello sprinkler! actions: - visit: http://www.google.com - assert_title: Google - wait_for: input[type="text"] - input: element: input[type="text"] value: Hello - submit: form[name="f"] - wait: 1000 - assert_text: element: "#main" contain: Hello こんな感じのYAMLを以

x-sushiyukiというsushiyukiを表示するためのWebComponentsの要素を作ったんだけれども、importされたファイルからの相対パスでsushiyukiの画像パスを指定するのにちょっと苦戦した。 たとえば、 /index.html から以下のように x-sushiyuki.html を呼び出す。 <link rel="import" href="bower_components/x-sushiyuki/x-sushiyuki.html"> この x-sushiyuki.html に CustomElement で<x-sushiyuki>を登録する処理などがかかれているので、 /index.html では次のように<x-sushiyuki>が使えるようになる。 <x-sushiyuki type="uni">うに</x-sushiyuki> このようなコンポーネント

それぞれのツールは以下を見ればどんなのかわかると思う。 peco（Simplistic interactive filtering tool）を作った話 : D-7 ghq: リモートリポジトリのローカルクローンをシンプルに管理する - 詩と創作・思索のひろば (Poetry, Writing and Contemplation) GitHubのレポジトリURLを開くgh-openコマンド - unknownplace.org pecoとghqを組み合わせる例はpecoのREADMEにあるようにかなり強力で、ghqで管理しているリポジトリのディレクトリにcdしたりするのに便利。 こんな感じ。 $ cd $(ghq list -p | peco) また、typester先生作のgh-openは指定したディレクトリのリポジトリをGitHubで開けるので、同じように使えばpecoでGitHubの

元ネタ GitHubクローンのGitBucketを10秒でインストールした - rela1470のにっき GitHubクローンのGitLabを５分でインストールした - アルパカDiary Digital Oceanはこんな感じでサーバーつくるときに色んなアプリケーションがプリインストールされたイメージを選べる。 GitLabもこの中にあるので、これを選んでサーバーをつくると、GitLabがインストールされてbundle installとかdb:migrateも済んでる状態で、さらにWebサーバーとWorkerも起動した状態でできあがるので、サーバーができた瞬間からGitLab使える状態になってる。大体1分くらいでできる。 サーバーができたらとりあえずIP指定してブラウザで見たらログイン画面が表示されるので初期アカウントの Email: admin@local.host Password:

Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - @kyanny's blog Backbone.Routerは基本的にhistory APIやhashchangeを使ったSPAのためのルーティングをしてくれるものなので、SPAじゃない場合に使うのはあんまりオススメできない。 方法は色々だと思うけど、自分の場合はそういうケースでは次のような簡易的なURL Dispatcherを書いて対応することが多い。 dispatcher.js これをこんな感じで使う。 // main.js new Dispatcher() .route('.*', 'Common') .route('/', 'Top') .route('/user/([^/]+)', 'User') .dispatch({ path: locatio

CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。 最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、ponchoっていうラッパーを使ってみた。 ponchoはMocha、PhantomJS、Blanket.jsをうまいことつないでくれるやつで、普通にMochaでテスト書いてるプロジェクトだったらすごく簡単に設定できる。Mocha限定になっちゃうけど。 すでにMochaでテストが書かれてて、test/index.htmlとかでテスト実行できる（ブラウザで開いてMochaのテストが走る）とすると、まず、

#LOVEFONT Advent Calendar 2013 14日目です。 フォントについて語るAdvent Calendarなんだけど斜め上でFont Awesomeについて書こうと思います。 Font AwesomeというのはWebサイトで使える様々なアイコンをフォントファイルとして提供しているライブラリです。 Font Awesome これの何がいいかというと、まず色々なアイコンが簡単に使えるというのはもちろんのこと、それがフォントファイルで提供されているというところです。フォントファイルで提供されているということはつまり、CSSで見た目を制御できるわけです。 例えば、大きさを変えようと思ったらfont-sizeプロパティで変えられるし、色を変えようと思ったらcolorプロパティで変えられるわけ。つまりアイコンをちょっと変更するだけで画像切り出し直すみたいな手間から開放されるわけで

Node.js Advent Calendar 1日目です。まだ空きがありますので、Node.jsネタあるよーという方ぜひ参加してみてください。 Node.js Advent Calendar 2013 さて、この前のNode学園祭2013のLTでもちょっと話したんですが、nodebrewにexecというコマンドを追加しました。 execを使うと一時的に別のバージョンでNode.jsを実行することができるようになります。 $ nodebrew exec <version> -- <command> 例えばこんな感じ。 # 今使ってるバージョンは v0.10.21 $ nodebrew ls v0.8.26 v0.10.21 current: v0.10.21 # たしかに v0.10.21 $ node -v v0.10.21 # execで一時的に v0.8.26 を使いたい $ nod

チームNoderとして@yosuke_furukawaさんと@hakoberaさんと一緒にISUCON3に参戦してきた。ISUCON初参戦。なんとか1日目の9位に食い込んで本選にもでれるっぽい（まだ暫定だけど）。 以下大体の記録。 序盤 前日までにLingerでチャットルーム、GitHubでプライベートリポジトリつくって当日に臨む。当日はyosuke_furukawaさんが勤務するDeNAのオフィスをお借りして3人で集まって作業した。 まず最初にAWSの設定をhakoberaさんにお願いして、sshでログインできるようにしてもらう。僕とyosuke_furukawaさんはAWSに不慣れだったので二人だったらここでだいぶ時間かかった気がする。 とりあえずアプリをgitで管理してローカルで作業できるようにしたりアプリの構成とかベンチマークツールの使い方を把握するなどの雑務をやって、Node.j

最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような

ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyllのようなものなんだけど、Asset Pipelineが使えたり、テンプレートがerbとかhaml、Slimなどで書けたり、helperが充実してたりする。 RailsのViewまわりの機能をそのまま持ってきたような感じなので、普段Rails使ってる人にとってはJekyllよりも使いやすいかもしれない。個人的にもJekyllよりはmiddlemanのほうが好みだった。 調べた時にでてくる情報量など

Travis CIは language: node_js node_js: - 0.10 - 0.8 - 0.6 とか書けば複数のバージョンでテスト実行してくれてマジすごいんだけど、同じことをjQueryのバージョンでもやってみた。 主にjQueryのプラグインを書いてる場合などに便利だと思う。1.9で非互換な変更があったんでバージョン違うとプラグイン動かないとかけっこうあるからね。 まずmocha-phantomjsを使ってmochaで書いたテストをphantomjsで動くようにする。 jQueryのバージョンはmocha-phantomjsに環境変数で渡したいんだけど、mocha-phantomjsは環境変数をブラウザに渡せるようになってなかったので、パッチ書いたのでひとまずそっちを使う。（Pull Requestは送っといたので取り込まれたらそっち使いましょう） （追記：取り込まれた

Ruby2.0でRefinementsという、クラスの拡張を特定にスコープに限定する仕組みが導入された（一応使えるけどまだ実験的な機能）。 こんな感じで使う # foo.rb module Foo refine String do def greeting "hello #{self}!" end end end require './foo' using Foo puts 'hokaccha'.greeting #=> hello hokaccha! refineで拡張したString#greetingメソッドはusingしたファイル内でしか使えない。 このような仕組みがあると、どこでどのようにクラスが拡張されたか、わけがわからなくなるという問題を解決できる。 試しにJavaScriptでも実装してみた。 refinements.js こんな感じで使う。 // TestRefineという

modern.IEというIEの検証のために色々できるサイトができて、ここでIEのVMのイメージを落とすことができる。Virtual Box、VMWare Fusion、Parallelsとメジャーなものは全部対応してる。すごい。 とりあえずMacのVirtual BoxにIE10 Win8をいれてみた。まず以下からからMacとVirtual Boxを選んで「IE10 - Win8」の.sfxとかの.rarのファイルを全部ダウンロードする。 http://www.modern.ie/ja/virtualization-tools 「.sfx」というのがよくわからんかったけどなんか圧縮形式らしくて実行権限つけて実行すれば解凍されるらしい。 $ chmod +x IE10.Win8.For.MacVirtualBox.part1.sfx $ ./IE10.Win8.For.MacVirtualB

FirefoxのJavaScriptではバージョンを1.7以上に指定するとyieldが使えて非同期処理を同期っぽく書くことができるようになる。 適当な例だけどこんな感じ。 function run(f) { var g = f(function(x) { g.send(x) }); g.next(); } run(function(next) { var result = []; result.push('foo'); // ここで1秒待つ yield setTimeout(function() { result.push('bar'); next(); }, 1000); // ここで1秒待つ var baz = yield setTimeout(function() { // nextの引数がyieldの返り値になる next('baz'); }, 1000); result.push

JavaScriptのユニットテストをJenkinsとかでCIしたいとき、PhantomJSで実行するのもいいけどやっぱりChromeとかFirefoxみたいな実際のブラウザでテストしたい。でも環境作るのめんどくさいよなーと思ってたけどXvfbを使うとChromeとかFirefoxが動くのでLinux版のChromeとFirefoxだけだとわりと簡単に環境つくれた。 Xvfbというのは画面入出力をシミュレートするやつでデスクトップ環境を用意しなくてもChromeとかFirefoxとかが動かせるやつ。 OSはUbuntsの12.04（precise64）で試した。 まずXvfbを入れる。 $ sudo apt-get install xvfb 次にFirefoxを入れる。これもすぐ入る。 $ sudo apt-get install firefox Chromeは一手間必要だけどわりとすぐ入

タッチ系の操作をスマホでもデスクトップPCでも動くようにするため、タッチイベントがある場合はtouchstartやtouchmoveを使い、タッチイベントをサポートしていないブラウザではmousedownやmousemoveを使って同じ挙動にするというケースがあります。 例えばこういうやつ。 flipsnap.js DEMO そのようなケースでは僕はこれまで次のように書いていました。 var supportTouch = 'ontouchstart' in window; var touchStartEvent = supportTouch ? 'touchstart' : 'mousedown'; var touchMoveEvent = supportTouch ? 'touchmove' : 'mousemove'; var touchEndEvent = supportTouch

Backbone.jsの0.9.10がリリースされました。 Backbone.js - Change Log 変更点は次のような感じです。 routeイベントはこれまではBackbone.historyで発火してたんですが、routerでも発火されるようになりました。 バリデーションが走るのがsaveメソッドのみになりました。setメソッドやnewしたときには走りません。save以外でもバリデーションを実行するにはオプションに{validate:true}を指定します。 バリデーションが失敗したときのイベントがerrorからinvalidになりました。（本家のChange Logには未掲載） View#makeが削除されました。代わりに$を直接使ってDOM要素を初期化しましょう。 Model#changeメソッドが削除されました。 Passing {silent:true} on chan

Backbone.js Advent Calendarの19日目です。 先週Backbone.jsの0.9.9がリリースされてけっこう変更点多いのでChange Logに書いてあるやつを簡単にまとめときます。 Backbone.js - Change Log また、先日清水さん（@tori3_jp）が以下のようなエントリを書いていて、いくつか重複する点がありますので、こちらも参照してください。 Backbone.js 1.0に向けての変更点 « NAVER Engineers' Blog Events関連 EventsにlistenToとstopListeningが追加されました。清水さんのエントリの追記の部分に詳しく書いてあります。 BackboneオブジェクトがEventsを継承するようになりました。Backbone.on('foo')みたいなグローバルなイベントが貼れるみたいです。

Backbone.js Advent Calendarの15日目です。軽めにいきます。 Backbone.Modelのattributesにオブジェクトを設定するときの注意点など。attributesはsetとかで設定される値をオブジェクトして持っているやつです。 まず次のようにsetでattributesを設定します。 var MyModel = Backbone.Model.extend(); var m = new MyModel(); m.set('hoge', 'fuga'); m.set('foo', { bar: 'baz' }); このようにhogeには文字列、fooにはオブジェクトを設定しました。そしてtoJSONでattributesを取得して値を更新してみます。 var attrs = m.toJSON(); attrs.hoge = 'new fuga'; attr

Backbone.js Advent Calendarの12日目です。 Backbone.jsを使ってNode.jsとクライアントサイドのJavaScriptでロジックを共有する方法について書いてみます。 Node.jsといえばチャット。チャットといえばSocket.IOということでSocket.IOを使ったチャットを例にしてみます。 例えばチャットの一回の文字列の上限を140文字にしたいとします。その場合クライアント側でもサーバー側でも同じバリデーションのロジックを実装するのは面倒ですし、上限値が変更になったときに2箇所変更するのはイケてないですね。そこでBackbone.jsを使ってその部分のロジックを共通化する方法を考えてみます。 Backbone.jsはnpmでインストールできるのでまずはBackbone.jsとSocket.IOをインストールします。 $ npm install

Backbone.js Advent Calendarの12日目です。 Backbone.jsを使ってNode.jsとクライアントサイドのJavaScriptでロジックを共有する方法について書いてみます。 Node.jsといえばチャット。チャットといえばSocket.IOということでSocket.IOを使ったチャットを例にしてみます。 例えばチャットの一回の文字列の上限を140文字にしたいとします。その場合クライアント側でもサーバー側でも同じバリデーションのロジックを実装するのは面倒ですし、上限値が変更になったときに2箇所変更するのはイケてないですね。そこでBackbone.jsを使ってその部分のロジックを共通化する方法を考えてみます。 Backbone.jsはnpmでインストールできるのでまずはBackbone.jsとSocket.IOをインストールします。 $ npm install

nodebrewの0.6.0をリリースしました。install-binaryというコマンドを追加しまして、コンパイル済みのバイナリからインストールできるようにしました。 バイナリのファイルはNode.jsのv0.8.6以降で配布されるようになったので、それ以前のバージョンはインストールできません。Mac OSX、Linux、Solaris用のがそれぞれ32bitと64bitのものが用意されていて、nodebrewがアーキテクチャから自動で判別してとってくるようにしています。OSXとUbuntuくらいでしか試してないので動かなかった場合は報告ください。 こんな感じです。 $ nodebrew install-binary v0.8.6 fetch: http://nodejs.org/dist/v0.8.6/node-v0.8.6-darwin-x64.tar.gz ############

軽めのjQuery Advent Calendar 2012 3日目の記事です。jQueryのDeprecated（非推奨）な機能をいくつか紹介します。 $.browser これは有名ですね。ブラウザで分岐するんじゃなくて機能があるかないかで分岐するのがいいから$.supportを使えよって話です。 まあIE6だけで起きるバグとかのためにブラウザ判定するのはありだと思いまけどjQuery的には$.browserは非推奨らしいです。 .live() .live()は非推奨で.on()とか.delegate()で同じ事でできるのでこっちを使うのを推奨してるみたいです。 .size() .size()はjQueryオブジェクトの要素数を返すメソッドですが、これが非推奨な理由は.size()と.lengthは同じで.size()のほうが関数呼び出しのオーバーヘッドがかかるから.lengthのほうが

flipsnap.jsをWindows8のIE10のタッチで動くようにしました。 flipsnap.js 思ったより簡単に対応できました。diffはこんな感じ。 IE10 for touch device support. Fix #13 · 0524fef · pxgrid/js-flipsnap IE10はiOSやAndroidのようにtouchstartやtouchmoveのようなタッチイベントが用意されておらず、代わりにタッチした際に、pointerイベントというイベントが発火します。 Pointer Events Specification Touch Input for IE10 and Metro style Apps - IEBlog - Site Home - MSDN Blogs まだMSPointerDownのようにMSというprefixがついています。 elemen

もうすぐAdvent Calendarの季節なわけですが、いかがお過ごしてしょうか。僕も毎年なんらかのAdvent Calendarに参加したり、去年はSass Less Advent Calendarなどを立てたりしました。 最近はけっこうATNDでAdvent Calendarを募集することが多いみたいなんですが、ATNDは何日に書くことになるのかわかりにくく、順番も決めづらいなどAdvent Calendarの募集には向いてないと個人的には思ってたので、Advent Calendarの登録サイトを作ってみました。 Adventar 任意の日付にボタン一つで登録できるのでATNDよりは簡単でいいかなと思います。 思いついて特急で作ったんでバグってるところとかつかいにくいとことがあると思いますけどちょいちょい直していく予定です。 エントリー公開後にタイトルとURLを入力できるようにする