GoでEnd To End Testingフレームワーク書いた - Webtech Walker
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を以
HTML Importsで読み込まれたドキュメントからの相対パスを得る - Webtech Walker
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、ghq、gh-openの組み合わせが捗る - Webtech Walker
それぞれのツールは以下を見ればどんなのかわかると思う。 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の
Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - Webtech Walker
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
nodebrewにexecコマンドを追加した - Webtech Walker
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
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
ISUCON3 予選の記録 - Webtech Walker
チームNoderとして@yosuke_furukawaさんと@hakoberaさんと一緒にISUCON3に参戦してきた。ISUCON初参戦。なんとか1日目の9位に食い込んで本選にもでれるっぽい（まだ暫定だけど）。 以下大体の記録。 序盤 前日までにLingerでチャットルーム、GitHubでプライベートリポジトリつくって当日に臨む。当日はyosuke_furukawaさんが勤務するDeNAのオフィスをお借りして3人で集まって作業した。 まず最初にAWSの設定をhakoberaさんにお願いして、sshでログインできるようにしてもらう。僕とyosuke_furukawaさんはAWSに不慣れだったので二人だったらここでだいぶ時間かかった気がする。 とりあえずアプリをgitで管理してローカルで作業できるようにしたりアプリの構成とかベンチマークツールの使い方を把握するなどの雑務をやって、Node.j
jQueryプラグインのテストを複数のjQueryのバージョンで実行する - Webtech Walker
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は送っといたので取り込まれたらそっち使いましょう） （追記：取り込まれた
JavaScriptでRuby 2.0のRefinements的なのを実装してみる - Webtech Walker
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という
JavaScriptのゲッタ - Webtech Walker
JavaScriptでゲッタを定義するのにdefineGetterっていうのが使えて var obj = {}; obj.__defineGetter__('hoge', function() { console.log('hoge!!'); }); obj.hoge; //=> hoge!! こんな感じで()つけなくても関数が呼び出されるのでプロパティにアクセスのようにして関数を呼び出すことができる。 Node.jsのライブラリのコード読んでるとよくdefineGetterがでてくる（Node.jsのコードというかTJのコードに多いだけな気もする）。 express/lib/request.js at master · visionmedia/express · GitHub でもdefineGetterはECMAScript非標準なんで非推奨ってMDNに書いてある。 defineGet
modern.IE でIEの検証環境をさくっとつくる - Webtech Walker
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
Node.jsのFiberを使って非同期処理を同期っぽく書く - Webtech Walker
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
nodebrewでバイナリからインストールできるようにした - Webtech Walker
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 ############
Backbone.jsでNode.jsとクライアントサイドのロジックをイケてる感じで共通化する - Webtech Walker
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
「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker
東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phantom-travis-test ここではよくあるjQueryで画像のロールオーバーをするというプラグインを作ってそのライブラリに対してテストを書いています。ソースコードはこんな感じです。 $.fn.rollover = function() { return this.each(function() { var $img = $(this); var src = $img.attr('src');
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
