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
dotcloud + node.jsでHello World - Webtech Walker
dotcloud + node.jsやってみました。 まずdotcloudをインストールする。特に問題ない。 $ sudo easy_install dotcloud アプリケーションをつくる。APIキーを設定してない場合は設定しろと出るので指示通りsettingsページに書いてあるAPIキーを入力する。 $ dotcloud create hokaccha Warning: /Users/hokamura/.dotcloud/dotcloud.conf does not exist. Enter your api key (You can find it at http://www.dotcloud.com/account/settings): プロジェクトを作る。 $ dotcloud deploy -t nodejs hokaccha.helloworld Created "hoka
gitで差分ファイルを抽出する - Webtech Walker
変更したファイルだけまとめて取り出したいというケースがけっこうあるみたいなんで書いてみた。 gitの差分のファイルをつくる — Gist こいつをパスが通ってるところに置いて実行権限つけたら $ git export-diff <commit> <output_dir> こんな感じで実行すると<commit>からHEADまでの差分ファイルを<output_dir>にコピーする。<commit>の部分はgit diffと同じ物が使えるので $ git export-diff HEAD^^^ path/to/dir $ git export-diff HEAD^^^..HEAD^ path/to/dir $ git export-diff <sha1> <sha1> path/to/dir $ git export-diff <sha1>..<sha1> path/to/dir みたいな感じで
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');
flipsnap.jsでIE10のPointer Eventsに対応した - Webtech Walker
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
Macで設定とかインストールいらずで静的コンテンツ用のサーバーを立ち上げる方法 - Webtech Walker
Macで簡単に静的コンテンツを配信するサーバーを立ち上げる方法を紹介します。 Macには最初からApacheが入っているのでこれを有効にすればいいんですけど、バーチャルホストの設定とかが面倒だし、XAMPPみたいのはインストールして設定するのが面倒です。そこでpythonのSimpleHTTPServerというモジュールを使います。これは最初からMacにインストールされているので特にインストールなどは必要ありません（たぶん10.5からはデフォルトで入ってる）。 まずターミナル.appを開きます。次にドキュメントルートに設定したいディレクトリに移動します。以下のようにcdコマンドで移動できます。 $ cd /Users/hokamura/Sites パスとかよくわかんない人はFinderでフォルダをターミナルにドラッグアンドドロップすればそのディレクトリのパスがコピーされます。 cdしたら以
HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker
jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた＆検証してみたメモ。 デモつくった 調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。（html5shivは読み込んでます） var div = document.createElement('div'); div.innerHTML = '<section>section</section>'; document.getElementById('box').appendChild(div); 以下のようにcreateElementすればいける。 var div = document.createElement('div'
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa
vimで上書きの置換をうまいことやる - Webtech Walker
以下の様なテキストがあって、全てringoに置換したいときに、ringoをyankしてgoriraを削除してringoを貼り付けると、goriaがyankされるのでまたringoをヤンクしないといけなくて面倒なことになります。 ringo gorira rappa pannda DA PUMP これをうまくやるために以下のような設定を書いてみました。 nnoremap y "xy vnoremap y "xy nnoremap d "xd vnoremap d "xd nnoremap c "xc vnoremap c "xc vnoremap p "xp nnoremap <C-p> :<C-u>set opfunc=OverridePaste<CR>g@ nnoremap <C-p><C-p> :<C-u>set opfunc=OverridePaste<CR>g@g@ functio
IE6でmin-widthを実装する方法のまとめ - Webtech Walker
先日書いたmin-widthとmin-heightに関する記事の補足です。以下のようなコメントをいただいたのでIE6でmin-widthを実装する方法をまとめました。 たしかに、この方法に若干違和感感じあります。 例えばどういう実装方法があるのでしょうか？ あまり使う機会がないもので。 javascriptのライブラリを使う ライブラリを使う場合は下記などがあります。お手軽です。 min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R] expressionで実装する expressionを使って、CSS内でjavascriptを使う方法だとかなりシンプルに書けます。 [CSS]IEで、min-widthやmax-widthを実現する方法 | コリス #foo { min-width: 600px; widt
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker
最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。 to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。（追記：ソースをgistにあげました） wordbreak.js for jQuery — Gist IEとFirefox2
ちょっと便利なvimのTips - Webtech Walker
vimのTipsをいくつか紹介してみます。vim使い始めて半年くらいたつけど全然使いこなせてないです。 選択した部分を検索 ビジュアルモード選択した部分を*で検索できる。これはかなり便利です。 vnoremap * "zy:let @/ = @z<CR>n ディレクトリ自動移動 .vimrcにこれを書いておくと開いたファイルのディレクトリがカレントディレクトリに変わります。 au BufEnter * execute ":lcd " . expand("%:p:h") 空行を削除する これでできるかと思ったけど消えなかったorz :%s/^$//g これでおｋ :g/^$/d 選択範囲の全行に文字列追加 ブロック選択モード（C-v）で範囲指定して、Iで挿入モードになって、任意の文字列を入力した後ノーマルモードに戻ると選択した全行に挿入されます。複数行を一気にコメントアウトとかインデントした
vimのhelpの引きかたメモ - Webtech Walker
vimのhelpの引きかたに関するメモ。 同じ文字で異なる機能のヘルプを引く :help winheightでヘルプを引くとevalのwinheight()が引っかかる。optionのwinheightを引きたいときは:help 'winheight'。 :help deleteだとevalのdelete()が引っかかる。:deleteのヘルプを引きたいときは:help :delete。 キーバインドのヘルプ インサートのキーバインドを引きたいときはiをつける。たとえばインサートモードの<C-a>をひきたいときは`:help ictrl-a`。 単語ジャンプ filetypeがhelpのとき、単語の上で<C-]>でその単語にジャンプ。<C-t>で元の位置に戻る。これ覚えておくだけでhelp読む効率が結構あがる。 ヘルプを縦分割 :vertical belowright help word
vimでquickfixを自動で開く - Webtech Walker
vimでgrepとかするときに、結果はquickfixに反映されるわけですが、これは自動で開いてくれないのでgrepしたあと:cwとかして開かないといけないのがちと面倒です。 下記のようにcwもgrepと一緒に指定してもいいんですけど、| cwを毎回タイプするのも面倒です。 :vimgrep /hoge/j * | cw で、それを解決するにはvimrcに下記のように設定します。 autocmd QuickfixCmdPost make,grep,grepadd,vimgrep if len(getqflist()) != 0 | copen | endif これで対象があるときのみ自動でquickfixが開きます。
vimでHTMLとかを編集するときに絶対パスのファイルを開く - Webtech Walker
imはファイル名のところでgfとタイプすると該当のファイルを開く機能があります。 例えば以下のようなソースでjs/jquery.jsの上でgfと押すとカレントファイルからの相対パスを探して、ファイルがあればファイルを開きます。 <script type="text/javascript" src="js/jquery.js"></script> でもHTML書くときにドキュメントルートからの絶対パスで書くときもあるわけで、そのときはどのディレクトリがドキュメントルートになるかvimはわからないので開くことができません。 そこで以下の様な関数を定義して、ドキュメントルートをあらかじめ指定しておくことで絶対パスのファイルでも開けるようにしました。 " HTMLとかでドキュメントルートからの絶対パスのファイルを開く（gfみたいな感じで） " 絶対パスじゃなかったら(/で始まってなかったら）gfと
Macのvimでクリップボードにコピーするoperator - Webtech Walker
下記の様に書けばクリップボードにコピーできるのですが、行単位じゃないとコピーできないし、オペレーターとして使えないのが若干不便です。 nnoremap <silent> <Space>y :.w !pbcopy<CR><CR> vnoremap <silent> <Space>y :w !pbcopy<CR><CR> nnoremap <silent> <Space>p :r !pbpaste<CR> vnoremap <silent> <Space>p :r !pbpaste<CR> なのでクリップボードにコピーするためのオペレーターを定義しました。pbcopyを使うのでMac限定です。 " Macでクリップボードにコピーするoperator if has('mac') function! Pbcopy(type, ...) let reg_save = @@ if a:0 silent
覚えておくと便利なgitのtipsをいくつか - Webtech Walker
頻繁に使うわけではないけど便利なgitのtipsをいくつか紹介。というか自分が忘れるからメモ。 git stash 現在作業中のbranchでまだコミットはしたくないけど、trunkで直さないといけないバグとかが見つかったときに、今の変更を横にどけておくコマンド。 $ git stash で変更をいったん横にどけておいて、他のbranchに切り替えて作業後、今のbranchに戻ってきて $ git stash pop とすれば横にどけておいた変更が復活する。 git ignore プロジェクトの中で除外する必要があるファイルは.gitignoreに書くけど、自分の環境だけで除外したいファイルがある場合は.git/info/excludeに書くのがよいです。 自分の環境ではいつでも除外したいというときは $ git config --global core.excludesfile $HOM
git log - Webtech Walker
についてのメモ。 出力件数を指定する 出力件数を表示する。どちらもいっしょ。 $ git log -n 10 # 最新10件のログ $ git log -10 # 最新10件のログ 範囲指定 コミットの範囲を指定する $ git log HEAD~10..HEAD~5 # 10個前か5個前までのログ $ git log HEAD~10.. # 10個前から最新までのログ $ git log 3hg4390fj3..93jj23rn20 # ハッシュ値で範囲指定 パッチ形式で出力する -pでパッチ形式で出力する。 $ git log -p Authorから探す コミットした人を指定する。部分一致っぽい。 $ git log --author=hokamura # hokamuraを含むAuthorのログ コミット日時から探す 指定した時間以降のコミットを表示する。どちらもいっしょ。 $ gi
第3回CakePHP勉強会にいってきた - Webtech Walker
Home Archive 第3回CakePHP勉強会にいってきた 第3回CakePHP勉強会にいってきた 2008年07月01日 category:PHP Comment(0) Trackback(0) 第3回CakePHP勉強会に参加してきました。今回は13分で満席になったらしいので参加できて運が良かったです。僕はまだCakePHP暦はあまり長くないので内容が難しいところもありましたけど、CakePHPもっと勉強しよう！という気になりました。とりあえず内容を簡単にメモしておきます。 フェイス女学院 / スパイスボックスラボラトリ 神部さん †フェイス女学園† （顔診断サービス） 顔診断のところはPHPじゃない別のプログラム flash()で診断中の時間稼ぎして診断してるっぽさを出している 携帯版は/etc/aliasesからcakeconsoleを叩いている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
