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
ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker
ちょうど一年くらい前に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のほうが好みだった。 調べた時にでてくる情報量など
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
Ubuntu上でXvfbを使ってJavaScriptのユニットテストをChromeとFirefoxで実行する - Webtech Walker
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は一手間必要だけどわりとすぐ入
Backbone.js 0.9.9 の変更点 - Webtech Walker
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で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
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 ############
「ノンプログラマのための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');
「ノンプログラマのための JavaScriptはじめの一歩」という本を書きました - Webtech Walker
Amazon.co.jp： ノンプログラマのための JavaScriptはじめの一歩 2012/11/7に発売予定です。ハッシュタグは#jsippoなのでみなさんどうぞふるってツイートしてください。 想定している対象 タイトルからもわかるように、デザイナやマークアップエンジニアなどをやっていてプログラムはほとんどわからないというくらいの読者を想定しています。 なので普段JavaScriptを書いている人や、他の言語をやっていて、JavaScriptを学んでみようと思っているような方にはもの足りない内容だと思います。そういう人はサイ本とかパーフェクトJavaScriptを読みましょう。 何を書いて何を書かないかというところの線引に苦労しました。たとえば変数のスコープやprototypeなどはJavaScriptを学ぶ上では避けて通れませんが、そこは敢えて説明を省いています。初めてプログラムを
俺の最強ブログシステムも火を噴いてたぜ - Webtech Walker
俺の最強ブログ システムが火を噴くぜ - てっく煮ブログ これとJekyll、DISQUS、Githubを使ってるところあたりはほとんど同じだった。 元記事がレンタルサーバーにデプロイしてるのに対してこっちはgithub pagesにデプロイしてる。サーバーも用意しなくていいからお手軽かつ最強だぜ〜。 ただgithub pagesに直接Jekyllのソース上げるとplugin使えなかったりして不便なんでJekyllで生成した静的ファイルをgh-pagesブランチにコミットしていて masterブランチ -> ソース gh-pagesブランチ -> 生成したファイル ってしてるんだけど、いちいちブランチ切り替えてなんちゃらしたりhookスクリプトでほげほげするのは面倒なんで $ rake deploy ってやるとJekyllのビルドが走って生成したファイルコピーしてgh-pagesにコミット
jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker
例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロールの処理 ... return false; }); }); つまり $(function() { $('a[href*=#]').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); // スムーズスクロールの処理 ... }); }); としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじ
vimからsassを変換する（–watchしない） - Webtech Walker
昨日のエントリーの件、–watchにしなくても保存するときに都度変換すればいいのかと思った。 こういう意見もあったけど、まあ同期実行の重さが気になるならvimprocにしたほうがいいのかも。もしくはパースエラーを捕捉しなくていいなら&つけてバックグランドでやらせるとか。 sass使ったことないからその辺りがよくわからない。
irssiをインストールしてからやったことのまとめ - Webtech Walker
IRCのクライアントをLimeChatからirssiに乗り換えたのでやったことをまとめときます。最初はtiarraも導入しようと思ったんですけどSSLの設定がわからなくてできなかったので断念しました。 インストールと起動 インストールはyumで一撃でした（CentOS 5.4） $ yum install irssi 起動は $ irssi でOK。起動すると~/.irssi/configという設定ファイルができます。 サーバーとかチャンネルの追加 サーバーの追加は /server add -auto -network freenode irc.freenode.net 6667 でチャンネルの追加は /channel add -auto #チャンネル名 freenode こんな感じ。チャンネルに入るときはサーバーにconnectしてjoinします。 /connect freenode /
githubがhistory.replaceState使ってた - Webtech Walker
JavaScriptでhistory.pushStateとhistory.replaceStateっていう履歴管理のための仕様があるんですけど、これを使うとlocation.hashを使って実装しているような、ページ遷移をしないでコンテンツを入れ替える（Twitterの新UIみたいな）ものを実現できます。 5.4 Session history and navigation — HTML5 Manipulating the browser history - MDC Doc Center で、これを実際使ってるところは見たことなかったんですけど、githubがいつの間にか使ってました。適当なリポジトリに入ってhistory.replaceStateをサポートしてるブラウザ（現時点ではchromeかsafari）で見るとページ遷移なしで動いて、切り替わるときにURLが書き換わってるのがわかる
Python初心者によるPythonのいいところ、はまりどころのまとめ - Webtech Walker
Python勉強し始めて一ヶ月くらいたったんで一度復習を兼ねてまとめてみようと思います。僕が今までPHPとかPerlとかJavaScriptを使っていて、Pythonはこうやるのかーとか、これは便利だなーと思ったところ、開発していてはまったところなどピックアップしてみました。 初めてのPythonを読んで初心者向け勉強会に参加した程度の知識です。とりあえず初めてのPythonがかなりいいのでこれ読むだけで大体基礎は習得できた気がします。基本的な文法の説明だけでなく、大事なことは何回も繰り返し書いてあったり、Pythonの思想などにも触れているのでなぜこういう実装になっているかということも理解できます。これオススメ。 尚、このエントリーではPythonのバージョンは2.5をベースにしてます（主にGoogleAppEngineで使ってるので）。間違えなどあったらツッコミお待ちしてます。 文法、
SVG2Raphaelをとりあえず公開 - Webtech Walker
この前の第9回HTML5とか勉強会でLTしてきたときのSVG2Raphaelをとりあえず公開しました。SVGのコードをRaphaelのコードに変換するWebサービスです。 SVG2Raphael hokaccha's svg2raphael at master - GitHub まだ対応してない要素とかもけっこうあるので、変換できないSVGも多いと思いますけど遊べるくらいにはなってると思います。 勉強会ではPerlで書いたやつでデモしたんですけど、GoogleAppEngineでやりたかったので、その移行をしてたので公開するのにちょっと時間がかかりました。はじめてPython書いたけど、Perlと色々違って面白かったです。
クリックイベントの中で非同期処理したあとに別ウィンドウで開くときにポップアップブロックにひっかからない方法 - Webtech Walker
「twitterに投稿」みたいなボタンをクリックしたときにblt.lyとかのAPIで短縮URLを作って、window.openで別ウィンドウでtwitterを開きたい場合に、bit.lyのAPIを呼ぶJSONPが非同期処理になるので、ほとんどのブラウザでポップアップブロックに引っかかってしまいます。 以前、これ困ったねーって@sugyanと話してたんですけど、@taku_eofにその話しして、色々方法考えてたらよさげなのがでたんでやってみました。 まず、これはポップアップブロックされます。 $('#hoge').click(function() { $.ajax({ type: "GET", dataType: 'jsonp', url: "http://api.bit.ly/shorten", data: {...}, success: function(data) { ... wind
最近のGoogle Analyticsのコードは</head>の直前に入れるべし - Webtech Walker
今まではGoogle Analyticsのコードが非同期で実行できなかったので、AnalyticsのJSが読み込まれるまでコンテンツの描画をブロックしてしまうのでbodyの一番下とかにコードを置くのが普通でしたけど、最近は非同期で実行できるようになったので</head>の直前に入れるのがよいみたいです。 ヘルプに書いてあります。 コードを確認できたらコピーしてウェブページに貼り付けます。終了タグの直前に貼り付けてください*。 *非同期トラッキング コードの主なメリットの 1 つは、HTML 文書の一番上に配置できることです。これによって、ユーザーがページを離れる前にトラッキング ビーコンが送信される可能性が高くなります。JavaScript コードは セクションに配置することが慣例となっており、このコードを セクションの一番下に配置すると最高のパフォーマンスが得られます。 トラッキング コ
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
