Gruntをようやく使ってみた - 愛と勇気と缶ビール
Gruntってアレですね、JSでホゲホゲっと設定ファイルを書いてJSとかCSSのファイルをminify/unifyとかするヤツです。 最近よく聞くので、機会があったら使ってみようと思っていたのですが、最近とあるウェッブページをPlay!Frameworkで作ってみたりしていたので、それのJS/CSSのビルドに使ってみました。 もろもろやりたいことを実現したらこんな感じに。本当はもうちょっと綺麗に書けるのではないかと思います。 https://gist.github.com/3738650 僕のやりたかったことは、 JS/CSSのunify JS/CSSのminify JS/CSSのgzip (for Play!) timestampをつけたファイル名の生成 作成されたfileどものclean conf, templateの文字列置換。@@timestampをtimestampに置換するなど
Maintainable JavaScriptにみる、コンテキストとアプリケーションロジックの分離 - 愛と勇気と缶ビール
個人的なこと 読書はいわゆる自己投資？にあたるものなのでケチるもんじゃないよなあ、とは思いつつも可能なら安い値段でより大きなリターンを得たいよねー、ということで最近はOreillyの半額セールに目を光らせるようになりました。英語は「拾い読み」がし辛いという欠点があるのですが、まぁ、安いし、全ての本にちゃんと訳が出るわけでもないので、ええかなぁと。 そんなわけで "Maintainable JavaScript" という本を読んでいたのですが、その中のEvent Handlingについての章が「おお、これこれ」という感じだったのでちょっと紹介。 Maintainable Event Handling jQuery覚えたぜ！って感じの人がとりあえずコードを書くと、だいたいこんな感じになりますね。ちなみに、これは別にjQueryがどうとかいう話ではなくて、本質的には生DOMでも他のライブラリでも
jQueryオブジェクトを入れる変数の名前を$で始める話 - 愛と勇気と缶ビール
前提として、何度も同じelementを操作するのに毎回 $("#your complicated.selector").css({"...":"..."}); とか書いてる奴はくたばれ。それは、参照するデータが同じなのに毎回DBに問い合わせてるのと同じだぞ。 $で変数名を始めるのはなんでキモいか 僕がjQueryを使うときは$()関数で返ってきたオブジェクトを入れる変数名を$から始める、ということをけっこうよくやるのだけども、それについて「なんかキモくないですか」という意見があったのでちょっと考えてみる。ちなみにそれをやり始めたのはどこかで見たからだと思うんだけど、ソースは忘れた。 jQuery objectをつっこむ変数の名前を$で始めることが気持ち悪い理由はだいたい以下の２つくらいだと思う オブジェクトの型（のようなもの）に基づいてprefixをつけているところに、ハンガリアン的な闇の
プログラミング言語について語るときに僕の語ること - 愛と勇気と缶ビール
僕はしばらく前までプログラミング言語についての議論を戦わすのが好きな人間だった。 今でもそういう会話が嫌いではないとはいえない。というか好きか嫌いかで言うと好きな方かもしれない。今でもそういった会話、「何とか言語はこういうとこがいけない」「それに比べると(俺の使っている)○○言語はうんたらかんたら」というトークは、茶飲み話としてはそうとう楽しいと思う。酒の席で語るにはもってこいの話題だ。でも、それは職業としてエンジニアをやるいい大人がツバを飛ばして語るような話題ではない、と思う。 なぜそう思うか、と問われれば答えは明快で、その言語を使うコンテキストを無視して言語の優劣を語ることには意味がないと思うからだ。 非常に大雑把な括りをさせて貰えば、いわゆるスクリプト言語および動的な型付けを行う言語は、「少数の一定水準を越えたチームが最大限の効率を発揮するために設計された言語」だと思っている。 例え
メッセージングでまあまあ捗るかもしれない話 - 愛と勇気と缶ビール
この記事はJavaScript Advent Calendar(オレ標準コース)の13日めのエントリイになります。 ちなみに家に帰った瞬間、マシンの時計がずれて12/14になってて、大分一人で焦りました。てへぺろ。ぺろぺろ。 この記事の題材はJavaScriptにおけるメッセージング（もどき）です。 で、メッセージングって何やねんと JavaScriptで！メッセージング！というとその筋の人はwindow.postMessageを思い出すのかも知れませんが、 この記事では「メッセージング」という言葉をもっと広い意味に捉えて使っています。 だいたい、「あるオブジェクトがメッセージを受け取るオブジェクトを直接には知らなくても、特定の目的を持ったメッセージを投げて処理をさせることができるような仕組み」のことを「メッセージング」と呼んでいます。 すごい！すごい分かりにくい！ (ちなみにいわゆるプロ
Android4.0にはHTML5 History APIが実装されていない - 愛と勇気と缶ビール
（※このエントリーは、「Androidのブラウザは本当のクソAdvent Calendar」の一日目の記事として書いています） 12/2に発売予定のGalaxy Nexusにも搭載される予定のAndroid4.0ですが、なんと標準ブラウザにHTML5 history APIが「実装されていません」。 2.2系、2.3系にはあったのに、なぜかなくなっています。 http://caniuse.com/#search=pushState ここに書いてある通り、実際にAndroid4.0のemulatorでHistory APIが「ない」ことが確認されています。4.0はスマートフォン向けの2系とタブレット向けの3系の合流、という立ち位置らしいですが、ブラウザに関してはHistory APIのない3系に寄ってしまっているのでしょうか…。 「お前の好きなAPIがなくなったくらいで騒ぐなよ」という人もい
本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
iPhone/Androidにタッチ！ - 愛と勇気と缶ビール
stats.js (https://github.com/mrdoob/stats.js) という、JavaScriptでfpsもどきの値を出すライブラリをiPhone/Androidで試していた時に気づいたんだけど、iPhone/AndroidのWebKitではデフォルトのスクロール中はsetIntervalの監視が無効になっているっぽい。 具体的には、例えば setInterval(function() { count++; }, 1000); みたいなことをやっているページがあってとして 1. タッチ開始 2. 指を動かす 3. タッチ終了 4. 慣性スクロール の流れで、4.が完全に終わるまでcountの値は変わらない。また、実行キューに入っていたものがスクロール後に一気に実行されるというわけでもない。完全にtimerが止まっている。 一瞬「指を置いて動かしている間はJSの実行は全
Log::Handyとかそんなものをでっちあげた - 愛と勇気と缶ビール
Mandyではありません。Handyです。 http://github.com/zentooo/p5-log-handy 個人的にLoggerにあってほしいのは 色々な場所への出し分け/同時出力が出来る（STDOUT, file, syslogくらいがとりあえずあればいいけど） インタフェースが煩雑でない（例えば$self->log(level => "warn", message => "message" ...) とかダメ。使い方として$self->log->warn("message") くらいが限界） ファイルを手軽にわけられる というような機能なのだけど、最後のがあんまり満たされないので自分でつくった。 BASICS 基本的にはLog::Handler (http://search.cpan.org/~bloonix/Log-Handler-0.71/lib/Log/Handle
Perlで抽象クラス的なものをテストしたい場合どうするか - 愛と勇気と缶ビール
例えば、以下のような抽象クラス？的なモジュールがあるとしねえ。 package AbstractClass; sub call { my ($self, @args) = @_; # なんか色々前処理とかする $self->do_something($params); } # ここから後にdo_somethingの実装はない (いわゆる抽象メソッド的なアレ) plugin的な仕組みを用意したいとき、こんなコードが出てくると思います。「この抽象クラスを継承したクラスで、do_somethingを実装する」ということにして、その中身はクラスごとに違う、と。使う側は常にcallを呼び出して、共通する前処理をcallの中でやってもらって後、サブクラスのdo_somethingに処理が移る。 で、このcallメソッドのtestをしたいんだけど、このAbstractClassをそのままnewしてcal
iPhone/Android向けのselector-based libraryを実装しての色々(3) - pluginとかtestとかdocumentとか - 愛と勇気と缶ビール
前回の続き。 plugin機構とか Riddle.jsにはplugin機構があります、と書くとなんだかカッコよさげに聞こえるが、それは結局外部にエクスポートされているシンボルのうち２つ(rとr.fn)に関数を生やすとpluginっぽいことが出来ますよ、というだけの話にすぎない。r.fnは、セレクタで返ってくる結果セットが継承する元の雛形となっているオブジェクトで、jQuery.fnみたいなもんである。(今これを書いてて思ったけど、Property Descriptorsを使って外部pluginから既存APIの書き換えなどを防ぐ、というのはアリかもしれない。おそらく、そこまでしなくてもいい類のものだけど…) coreを出来る限り小さく保ちたいという理由から、常に必要ではない要素 or 実験的な要素はpluginと付属させることにした。Zeptoと同じ方法を採用しているわけだが、Zeptoとの
iPhone/Android向けのselector-based libraryを実装しての色々(1) - 愛と勇気と缶ビール
selector-based libraryってまず何やねん、って話ですが、いわゆる$("#id")みたいにcssセレクタでelementをモリっと引っ張ってきて、そのwrapされたelement集合に生えてる関数でいろいろやることがメインの目的とされてるJavaScriptライブラリのことを僕はそう呼んでいます。 まあ、いわゆるjQueryとかprototypeとかです。cssセレクタ+αでオマケユーティリティとかはついてるけど、モジュールを定義する機能とか、モジュール間の依存性を解決しつつそれらをロードする機能とか、コンポーネントを作成する機能とか、そういうのがついてないイメージ。 で、なんで僕がselector-basedなライブラリを書いてしまったかというと、とある人とラーメン屋で「スマホ向けのJSライブラリって、なんか一度それ使っちゃうとそれ以外で書けなくなっちゃう（ライブラリに
JavaScriptでEventまわりのコードをテストする時のアレ - 愛と勇気と缶ビール
addEventListenerのラッパとか、書くじゃないですか。 iPhoneやAndroidでswipe event的なものを用意するために、DOMContentLoaded呼ばれたときにbindしておいてevent delegation使ってほむほむするコードも書くじゃないですか。 で、そいつらをテストするコードも書くじゃないですか。 直接画面をタッチ/クリックして動作確認するのももちろん必要だけど、まずは自動テスト書くじゃないですか。 で、そん時にはまあこういう関数を適当に用意して、自家発電すると思うんだけど function emit(el, event) { var e = document.createEvent("Event"); e.initEvent(event, true, true); el.dispatchEvent(e); } 当たり前田のクラッカーですが、こう
githubのアレ(history.replaceStateとかhistory.pushStateの話) - 愛と勇気と缶ビール
会社で下の記事についてリマインドしてもらって、なんとなく気になっていたことを調べたメモ。 http://webtech-walker.com/archive/2010/12/06160539.html 記事を読んで、history.replaceState(null, "title", "/new.html") とかやると遷移なしでページのcontentも勝手に置き換わるのかなー、だったらあのアニメーションはどこで発火してんだ？とか考えていたがそもそもreplaceStateの動作について勘違いしていた。 要は、次のようなhtml書いてボタンをクリックしても、historyの先頭が置き換わるだけでページ自体には何も起こらない。(ただしlocation.hrefは置き換わっており、reloadすると/replace.htmlにいく) <!DOCTYPE HTML> <html lang="e
ゆとりがlong pollingを実装してみた - 愛と勇気と缶ビール
long pollingって結局 HTTPでつなぎに行って、レスポンスが帰ってきたら何かして再度つなぐ(Client Side) HTTPリクエストをキープしといて、イベントに応じてレスポンスを好きな時に返す(Server Side) の２つだろう、と思って、勉強を兼ねて「とりあえず上記の条件だけは満たすっぽいもの」を書いてみた。実際はこんな風にはかかないだろうし、エラーハンドリングとかをもっとちゃんとする必要があると思われる。(特にtimeout処理とか) Server side ( longpoll.js ) node v0.3.1-pre にて動作確認 var server = require('http').createServer(handle), util = require('util'), fs = require('fs'), port = 8000, listeners
YAPC::Asia 2010に行ってきたかもしれない - 愛と勇気と缶ビール
けっこう長いかもしれない。あと、前の方の記憶が結構うすれてるかもしれない。 前夜祭(10/14 夕方〜) WAF祭り とりあえず、きのこ派(Catalyst派)とたけのこ派(Sledge派)がいることは分かった。あと、id:tokuhiromさんのWAF全般に関する考え（結局何のためにWAF使うのか？みたいな話）が聞けて面白かった。 LT 忘却（ﾄﾞｲﾋｰ）。Getopt::Compact::Withcmd使いたい！ YAPC.vim 対談の女の人が誰だかよくわかんなかったので、c9sというVimanaの作者と喋っていた。その日の昼にVimanaに対してgithubでpull requestを出していたので、「おうgithubのアレか！」「githubのアレさんですね！」みたいな感じで会話を始めた。githubで始まる出会いってあるんですね！ステキ！（もちろん相手は男です） c9sはPer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
