Kこの広告は、90日以上更新していないブログに表示しています。2012-06-26簡易テストツールを公開しておきますjs今年はブログを書きたいと述べて二ヶ月以上経ってしまいました。最近、大規模だったり高速だったりという需要に応えるJavaScriptを書く道具がいくつも出てきています。一方で、小規模でもっと手軽にという道具がイマイチ少ない気がします(主観)。jQueryでもうちょっと届かないところを埋めるそういう道具を少しずつ準備していこうかなと思います。昔作ったユニットテストを改良したので公開しておきます。JavaScriptutestは最小限のユニットテストを提供します。昔作ったのでIE5.5でも動きますが、そういう目的にはあんまり使うつもりは無いです。方針としては容易に書けるテストを目指しました。自分はテスト書くのがたるくて手が止まるというのがありがちなので......。以下に示すsample.jsをテストすることを考えます。}};QUnitでは以下のように書くと思います。});});非同期テストがもう少し簡単に書ければ嬉しいな、と感じます。うまく書くやり方を知っている方は教えてください。一方でutestは以下のように書きます。}]);全体的にズボラな感じに仕上がっています。QUnitはよくできているのですが、もう少し手軽で気楽に書ければと思って作ってみました。今までテスト書かずに書き捨てていたコードにも少しはテスト書くようになりたいです。世間のちゃんとしたユニットテストの代替じゃなくて、ユニットテスト使わずに書いていた(自分の)ところ向けIE5.5で動くけど、もうそういう古いの向けのコードは今後は書かないよ記法の備忘録まとめのあとに続けます。上記のutestの記法は一番省略を効かせています。上記の例とは異なりますが、省略を行わずに書いた例を示します。});});setupとteardownが不要な場合があると思います。その場合、returnで書くこともできます。]);});また、テストごとに関数で囲むのであれば、全体の関数も不要かもしれません。}]);さらにテスト名はもっとルーズに書ける方が良いでしょう。}});このように配列やオブジェクトで記述できます。ルーズにテスト名を書かずに連番による自動命名に任せることもできます。sync1は同期するテストですが、test()は関数を生成し、一次変数に格納しています。test1(tmp.flag);}これは以下のように書けます。test()(tmp.flag);}一つ目のカッコが鬱陶しいのと、テストなら第一引数にbooleanかarrayかobjectしか入らないので、その場合は、カッコを省略できるようにしました(それ以外が入る場合があれば、自動命名が働くので注意する必要があります)。test(tmp.flag);}テストセットの登録と同じようにtestの数が一つならreturnで返せるようにします。tmp.flag;}ものによっては関数スコープも不要でしょう。tmp.flagsync2も同期テストです。二つ目のテストはreturnで置換可能です。]);}両方returnで記述することもできます。配列を使わないのはテストで配列を利用するためです。};}名前も単なる連番でも構いません。};}自分で名前をつけるのが億劫なら引数に与えたものを上記の連番で名前をつけたオブジェクトに変換する関数もあります。]);非同期テストを見ていきます。1000);}このテストも一見すると、以下のように書けるかもしれません。setTimeoutの関数が実行されなかった場合、テストがいくつあるかわからないため、実行漏れが起きてしまいます。そのため、非同期テストの場合はtest()でテスト実行関数の生成を必ず行う必要があります。1000);}ですが、setTimeoutを組み合わせてテストを書くことは多々ありそうです。終了後実行関数を設定できるようにしました。});}ここでテストの意味は変わってしまいますが、このtest2はtest1が終わって2秒後ではなく、テスト開始からtest1の遅延を含めた3秒後に開始と読み替えます。すると、以下のように書けます。3000);}これなら、テストの初回の関数取得を省略して、こう書けます。3000);}そんなわけで、短くすると(色々副作用がある場合があるので場合によりけりですが)こう書けます。}]);以上のように簡潔にサッとテストを書き残すことができます。01:32簡易テストツールを公開しておきますTweet広告を非表示にするもっと読むコメントを書く2012-04-02入社しました昨日付けで株式会社プリファードインフラストラクチャーに入社しました。今日に至るまで紆余曲折がありましたが、これから頑張っていこうと思います。今年度はブログをもう少し書きたいです。Airを買ったのでセットアップをしますmac入社するので、新しいマシンを買いました。4年近く使ったLetsnote(CF-W7)はスペック的にももう厳しそうだったので。最近ではディスプレイのバックライトにガタが来たのか画面が突然消えたりするので、そろそろ寿命という説もあります。Windows機はあって困らないので安いやつを今度探すつもりです。i5、メモリ4G、ストレージ256GB)のセットアップをします。開封後マシンと電源ケーブルと小さいマニュアルだけ。mjd、と思ってしまう。リカバリ用のディスクとかUSBメモリとか無いのか―、と驚く。軟弱なので日本語を選択キーボード入力環境USキーボードだけど、「ことえり」でおk。ないと設定で日本語が入力できない。記号の配列がJISになったりするかと思ったけど、そんなことなかった。その他タイムゾーンとかネットワークとか適当に設定。起動後iCloud勧められたのでアカウントを作ってみる。カスペルスキー2012セキュリティソフト。二年期限なんだけど一年期限のシリアルナンバーが二つ入っているので、どっち使ったかはメモ。ソフトウェア・アップデート思い出したかのようにやっておく。「ファイヤーウォール」を入キーボード「キーリピート」を一番速く。「リピート入力認識までの時間」を一番短く。「F1、F2などのすべてのキーを標準のファンクションキーとして使用」をオン。トラックパッド「タップでクリック」をオン。サウンドとりあえず「消音」。共有コンピュータ名を変更。Chromeデフォルトブラウザにする。言語とテキストの入力ソースからことえりとGoogle日本語入力のカタカナ・半角カナ・全角英数を無効化。FirefoxDropboxCotEditor少しはまともなエディタ。4あとでWindows入れる。StoreからのインストールAlfredEvernote夜フクロウMPlayerXATOKPad他に何か必要か探しています。Airを買ったのでセットアップをしますTweet広告を非表示にするもっと読むコメントを書く2011-09-05jQueryのプラグインを三つ作りました。jquery細々とした奴を作ったので置いておきます。keychar.jsキーコードを文字列に変換します。keyIdentifierが使えるようになるまでのつなぎ的なやつです。}});keydownでもkeyupでもkeypressでも変な記号でも割と動きます。レポジトリサンプルjquery.touchable.jsmousedown、mousemove、mouseupをtouchstart、touchmove、touchendに読み替えるライブラリです。普通にmousedown等を使っているだけのコードがtouchイベントで動きます。mouseupのtouchendへの読み替えが手抜きなので、後々改善したいです。三つとも使うドラッグとかは綺麗に書けます。これでマウス用のざっくり書いたイベントがタッチで動くようになりました。logをjQueryプラグインとして実装したものです。HTML中に書かれているimgタグに対しても利用したかったので、読み込みが終了している場合も既に読み込んでいるという扱いで着火します。this.src);});もちろん、新規作成時のonloadとしても使えます。あと、iframeとかscriptの読み込みの監視もできるようになっています。同じドメインのiframeを操作するためにもjQuery.sub(iframe.contentWindow)とかできるようになってほしいですね。23:18jQueryのプラグインを三つ作りました。Tweet広告を非表示にするもっと読むコメントを書く2011-06-09Googleギターを自動演奏しよう!(Firefoxのみ)neta最近のGoogleロゴは遊べるものが出ていて、中々非常に面白いです。2chではキー入力による演奏例が登場し、力作が投稿されています。これらの力作を正確に手元で再現するのは中々難しいです。タイピングが苦手な僕にとっては難易度が高いです。いうわけで、投稿作を自動演奏するブックマークレットをサクサクッと作ってみました。e=D.createEvent('KeyboardEvent');e.initKeyEvent('keydown',true,true,null,false,false,false,false,kc,kc);D.dispatchEvent(e);}setTimeout(lp,ms);}else{bn.disabled=false;}}())}}(document))FirefoxでGoogleのギターを開いて、上記のブックマークレットを実行して下さい。演奏コードの入力枠、音間隔の入力枠、演奏実行ボタンがロゴの下に表示されます。2chまとめブログなどに掲載している奴をコピペしてやると、イイ感じに鳴ってくれます。Chromeでは動きません。initKeyboardEventでkeyCodeがうまく設定できないからです。サポートされていないのだと思います。動かし方があれば、誰か教えてください。18:17Googleギターを自動演奏しよう!(Firefoxのみ)Tweet広告を非表示にするもっと読むコメントを書く2011-04-29ア行は本当に多いのか?neta昨日このような話題がありました。確かに自分の大学の名簿もア行が1/3ぐらいいたような気がします。1-1000位のデータを元に、日本の苗字のトップ1000に一般的な訓読みを付与して、どの五十音の行が多いか、人口比を出してみました。ア行18.1%カ行15.7%サ行13.7%タ行10.6%ナ行8.68%ハ行10.3%マ行10.9%ヤ行9.25%ラ行0.67%ワ行2.01%なんと人口比でア行は一番多いことがわかりました。いう話もあるので、トップ1000の苗字を五十音の行ごとに分類してみました。0.8%やっぱり、ア行がすごく多いです。三割を超えると何か偏っているのかもしれません。統計的な誤差ってどこまで入るんでしょうかね......。結論これは幻想なんですね......。どっちかというと、記事よりもtableのスタイルを書くのに時間がかかったような。18:00ア行は本当に多いのか?Tweet広告を非表示にするもっと読むコメントを書く2011-04-04ここのブログとサイトのリデザインをしましたhatena自分のブログなのに少し読みにくくて、メモとしても活用できなかったので、リデザインしました。ついでに、0fk.orgのリデザインも行ってみました。0fk.orgでやったことは文字列が切り替わるJavaScriptを書きなおしたことぐらいです。IE5をサポートブラウザから切りました。いうか、今までIE5で動いていたことに僕もびっくりです。CSSを活用していきたいですね。いうことで、そのどちらの恩恵もあずかれないはてなブログのデザインのハマりどころをまとめておきます。APIで少し困るという話です。はてなは危ないCSSプロパティ(behaviorとか)使わせないために、@importを書くとはてな側がダウンロードしてくるデータを貼りつけてきます。APIの場合はユーザーエージェントでダウンロードさせるCSSを振り分けてきます(その仕組も正直どうかと思っていますが)。いうわけで、手元にUA変えて落として、woff、ttf、eotのフォントのURLを入手して、振り分けてやるコードを書くとみんなハッピーになれると思います。はてなに任せたらttfしかダウンロードされないCSSを貼りつけてくるので、IE以外のブラウザでは表示されると思いますけどねwhttp://fonts.googleapis.com/css?~を@importで読み込む場合は、はてな側で展開しないとかという仕様になってくれると嬉しいのだけど、まぁ、ならないでしょうね......。普通の記事にクラスが振られていないので、その場で編集モードのデザイン崩れてちょっと困ったタイトル通りです。imgと書くとその場で編集モードでぐちゃぐちゃになって泣けます。記事であるものだけのクラスがあればいいのだけど、そんなものはないのでinheritでポチポチ打ち消す必要があります。以外とタグが少なくて焦る細いヘッダー部分を簡単に表すと以下のようになります。</ul></div>コメント部分も同様に示すと以下の感じになります。</div></div>全体的にクラスとかもうちょっと欲しいんだけどなーって思えるようなHTML構成でした。url('');base64,..');ってなった。Opera残念でしたーって感じですね。単純に不正なURLを削る処理でしょうけど。APIコメントの表示デザインIE対応は適当にやりました。position:absolute;効かなくて諦めた。Airを買ったのでセットアップをしますjQueryのプラグインを三つ作りました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。