GoでEnd To End Testingフレームワーク書いた - Webtech Walker

2014/10/17 67 users YAML Actions テストフレームワーク Visit

SeleniumラッパーなテストフレームワークをGoで書いてみた。初Go。 https://github.com/hokaccha/sprinkler GoのコードでE2Eテストのコード書けてもあんまり嬉しくないのでYAMLで書けるようにした。 scenarios: - name: Hello sprinkler! actions: - visit: http://www.google.com -... 続きを読む

HTML Importsで読み込まれたドキュメントからの相対パスを得る - Webtech Walker

2014/07/11 16 users ドキュメント 相対パス HTML Imports href

x-sushiyukiというsushiyukiを表示するためのWebComponentsの要素を作ったんだけれども、importされたファイルからの相対パスでsushiyukiの画像パスを指定するのにちょっと苦戦した。 たとえば、 /index.html から以下のように x-sushiyuki.html を呼び出す。 <link rel="import" href="bower_componen... 続きを読む

peco、ghq、gh-openの組み合わせが捗る - Webtech Walker

2014/06/24 86 users peco Poetry GHQ GitHub 思索

それぞれのツールは以下を見ればどんなのかわかると思う。 peco（Simplistic interactive filtering tool）を作った話 : D-7 ghq: リモートリポジトリのローカルクローンをシンプルに管理する - 詩と創作・思索のひろば (Poetry, Writing and Contemplation) GitHubのレポジトリURLを開くgh-openコマンド - u... 続きを読む

GitHubクローンのGitLabを1分で使えるようにする - Webtech Walker

2014/05/24 65 users GitLab GitBucket ふり GitHubクローン

元ネタ GitHubクローンのGitBucketを10秒でインストールした - rela1470のにっき GitHubクローンのGitLabを５分でインストールした - アルパカDiary Digital Oceanはこんな感じでサーバーつくるときに色んなアプリケーションがプリインストールされたイメージを選べる。 GitLabもこの中にあるので、これを選んでサーバーをつくると、GitLabがインス... 続きを読む

Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - Webtech Walker

2014/03/31 68 users エントリポイント ルーティング SPA 方法 自分

Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - @kyanny's blog Backbone.Routerは基本的にhistory APIやhashchangeを使ったSPAのためのルーティングをしてくれるものなので、SPAじゃない場合に使うのはあんまりオススメできない。 方法は色々だと思うけど、自分の場合はそ... 続きを読む

クライアントサイドJavaScriptのテストカバレッジをCoverallsに投げる - Webtech Walker

2014/01/08 52 users テストカバレッジ クライアントサイド GitHub 若干めん

CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。 最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、po... 続きを読む

Pull RequestとCIを使ったGitHub Flowなブログ環境を作ってみた - アインシュタインの電話番号

2013/11/11 77 users アインシュタイン pull request 煮ブログ 話題

今から1年ほど前に、自分でお気に入りのブログ環境を構築する記事が話題になっていて、それを読んだ時から、自分用のブログ環境を作りたいと思っていた。 俺の最強ブログ システムが火を噴くぜ - てっく煮ブログ 俺の最強ブログシステムも火を噴いてたぜ - Webtech Walker 当時はそれどころではなかったこともあって、なかなか着手できずにいたんだけど、今年の7月頃から作り始めて、最近そこそこ希望通... 続きを読む

ISUCON3 予選の記録 - Webtech Walker

2013/10/06 27 users 予選 ISUCON3 記録 プライベートリポジトリ 本選

チームNoderとして@yosuke_furukawaさんと@hakoberaさんと一緒にISUCON3に参戦してきた。ISUCON初参戦。なんとか1日目の9位に食い込んで本選にもでれるっぽい（まだ暫定だけど）。 以下大体の記録。 序盤 前日までにLingerでチャットルーム、GitHubでプライベートリポジトリつくって当日に臨む。当日はyosuke_furukawaさんが勤務するDeNAをお借り... 続きを読む

静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker

2013/09/03 146 users Grunt Middleman concat Sass CSS

最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchした... 続きを読む

ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker

2013/08/26 68 users Middleman jekyll GitHub 興味 ブログ

ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyl... 続きを読む

jQueryプラグインのテストを複数のjQueryのバージョンで実行する - Webtech Walker

2013/08/20 21 users jQuery language jQueryプラグイン マジ

Travis CIは language: node_js node_js: - 0.10 - 0.8 - 0.6 とか書けば複数のバージョンでテスト実行してくれてマジすごいんだけど、同じことをjQueryのバージョンでもやってみた。 主にjQueryのプラグインを書いてる場合などに便利だと思う。1.9で非互換な変更があったんでバージョン違うとプラグイン動かないとかけっこうあるからね。 まずmoch... 続きを読む

modern.IE でIEの検証環境をさくっとつくる - Webtech Walker

2013/04/11 26 users modern.IE Parallels SFX 検証環境 検証

modern.IEというIEの検証のために色々できるサイトができて、ここでIEのVMのイメージを落とすことができる。Virtual Box、VMWare Fusion、Parallelsとメジャーなものは全部対応してる。すごい。 とりあえずMacのVirtual BoxにIE10 Win8をいれてみた。まず以下からからMacとVirtual Boxを選んで「IE10 - Win8」の.sfxとかの... 続きを読む

Node.jsのFiberを使って非同期処理を同期っぽく書く - Webtech Walker

2013/04/10 64 users yield Ｒｕｎ function NEXT Fiber

FirefoxのJavaScriptではバージョンを1.7以上に指定するとyieldが使えて非同期処理を同期っぽく書くことができるようになる。 適当な例だけどこんな感じ。 function run(f) { var g = f(function(x) { g.send(x) }); g.next(); } run(function(next) { var result = []; result.p... 続きを読む

Ubuntu上でXvfbを使ってJavaScriptのユニットテストをChromeとFirefoxで実行する - Webtech Walker

2013/04/08 47 users ユニットテスト Xvfb Jenkins PhantomJS

JavaScriptのユニットテストをJenkinsとかでCIしたいとき、PhantomJSで実行するのもいいけどやっぱりChromeとかFirefoxみたいな実際のブラウザでテストしたい。でも環境作るのめんどくさいよなーと思ってたけどXvfbを使うとChromeとかFirefoxが動くのでLinux版のChromeとFirefoxだけだとわりと簡単に環境つくれた。 Xvfbというのは画面入出力を... 続きを読む

Backbone.js 0.9.9 の変更点 - Webtech Walker

2012/12/19 43 users エントリ Backbone.js Change Log ヤツ

Backbone.js Advent Calendarの19日目です。 先週Backbone.jsの0.9.9がリリースされてけっこう変更点多いのでChange Logに書いてあるやつを簡単にまとめときます。 Backbone.js - Change Log また、先日清水さん（@tori3_jp）が以下のようなエントリを書いていて、いくつか重複する点がありますので、こちらも参照してください。 B... 続きを読む

nodebrewでバイナリからインストールできるようにした - Webtech Walker

2012/12/10 29 users nodebrew バイナリ Linux コマンド ファイル

nodebrewの0.6.0をリリースしました。install-binaryというコマンドを追加しまして、コンパイル済みのバイナリからインストールできるようにしました。 バイナリのファイルはNode.jsのv0.8.6以降で配布されるようになったので、それ以前のバージョンはインストールできません。Mac OSX、Linux、Solaris用のがそれぞれ32bitと64bitのものが用意されていて、... 続きを読む

Advent Calendarの登録サイトつくりました - Webtech Walker

2012/11/01 30 users Advent Calendar ATND Advent 順番

もうすぐAdvent Calendarの季節なわけですが、いかがお過ごしてしょうか。僕も毎年なんらかのAdvent Calendarに参加したり、去年はSass Less Advent Calendarなどを立てたりしました。 最近はけっこうATNDでAdvent Calendarを募集することが多いみたいなんですが、ATNDは何日に書くことになるのかわかりにくく、順番も決めづらいなどAdvent... 続きを読む

「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker

2012/10/31 375 users ノンプログラマ JavaScriptはじめ デバッグツール

11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています... 続きを読む

mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker

2012/10/23 90 users Travis-CI Jenkins PhantomJS 内容

東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phan... 続きを読む

「ノンプログラマのための JavaScriptはじめの一歩」という本を書きました - Webtech Walker

2012/10/23 41 users ノンプログラマ デザイナ Amazon.co.jp 一歩 読者

Amazon.co.jp： ノンプログラマのための JavaScriptはじめの一歩 2012/11/7に発売予定です。ハッシュタグは#jsippoなのでみなさんどうぞふるってツイートしてください。 想定している対象 タイトルからもわかるように、デザイナやマークアップエンジニアなどをやっていてプログラムはほとんどわからないというくらいの読者を想定しています。 なので普段JavaScriptを書いて... 続きを読む

jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker

2012/09/20 76 users イベントハンドラ jQuery functio return

例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロースの処理 ... return false; }); }); つまり $(functio... 続きを読む

続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/06/03 33 users iOS Demo font-size iPhone 隙間

前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。 Demo これiPhoneで見るとこうなる。 なんかIEでもfont-sizeが... 続きを読む

Chromeの等幅フォントがOsakaになってる件 - Webtech Walker

2011/04/29 27 users Osaka Chrome 幅フォント Monaco フォント

sugyanのツイートで気づいたけど、なんかChromeでいつの間にか等幅フォントがOsakaになってて、全然等幅じゃなくなってた。前からだっけ？ とりあえずフォントの設定でMonacoにしといた。（なぜかOsaka-Monoがない？） こんな感じで。 続きを読む

Google Chrome11でサポートされた音声入力API - Webtech Walker

2011/04/28 39 users prefix input要素 API Chrome11 音声

Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっ... 続きを読む

iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/03/30 64 users iOS font-size padding iPhone 隙間

結構前に書いたの公開してなかった。iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。DemoこれをiPhoneで見るとこんな感じになる。こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-si... 続きを読む