プロダクト負債というもの
root Design Meetup #1 「UX負債への取り組み」 - connpass に参加していてUX負債とは技術的負債に非常に近いものを感じた。 そこから考えてみると、特にUXや技術に関わりなく共通的に負債を概念を考えられるのではないかと思ったので書く。 現状プロダクトを運営していく上で積み重なっていく問題を横断的に指す言葉として、ここでは「プロダクト負債」とする。 当初「サービス負債」としていたが、いくつか検索したところ、「product debt（プロダクト負債）」は既に使われている用語のようなので書き直した。 Googleで検索した範囲では「プロダクト負債」だと数件のヒットがあった。 「product-debt」だとそれなりの件数がヒットするが、いくつかみた範囲ではここで紹介している内容より狭い範囲を想定しているように見えた。 （が、この記事は翻訳ではないため、既存の概念と
ブラウザ上で軽いDOMを使いたい
documentFragmentを使ってもDOMが重い場合、Server side DOMをブラウザ上で使うと早くなる。 今回はdominoを使った。 試してないけど、jsdomはたぶんブラウザ上では動かない（node向けの依存ライブラリがかなりあるので。dominoはpure jsでdependenciesが無い） ただ、dominoもそのままglifyJSにかけると壊れる。 正規表現用の文字列（\uxxxx）が壊れるのと、function nameが消えてinstanceofが失敗するのが原因っぽい glifyJSのコマンドラインオプションに --beautify beautify=false,ascii-only=true --keep-fnames を足して解決。 Special characters in Regular Expressions · Issue #171 · mi
二槽式とはなにか
この記事は仮想DOM/Flux Advent Calendar 2015 - Qiita13日目です。 二槽式とは「Viewとロジックを切り離し、それぞれが独立して成立することを目指したアーキテクチャ」をさして呼んでいます。 （これは私が勝手に名付けてるだけなので厳密な定義はないです） このView部分を「フロントエンドフロントエンド」、ロジック部分を「フロントエンドバックエンド」と呼び、合わせて「二槽式」と呼んでいます。 もう少し具体的にいうと、「Fluxのアクション部分を切り離して、View -> postMessage(JSON) -> onmessage(()=>{}) -> Dispatcherという形式にしたもの」です。 （ここではpostMessageを使っていますが、ある程度独立性が保てるのであれば普通のfunction callでも問題ないと考えています） なにを解決した
なぜSeleniumIDEを作ってるのか
この記事はFrontrend Advent Calendar 2014 - Qiita 1日目です。 今年の中頃から一人でSeleniumIDEのChrome版のようなものを作ってる。 kyo-ago/chrome-autopilot-tool これはほぼ趣味の活動だけど、せっかくなので目的とかを書いておこうと思う。 SeleniumIDEとは何かその前にSeleniumの説明がいるか。。。 Seleniumとは何かSeleniumとはオープンソースのE2Eテストフレームワークで、主に実ブラウザを動かしてWebサイトの検証を行うために使われる。 歴史は結構古くて2004年くらいに現Sauce Labs CTOのJason Hugginsが開発したらしい。 WebDriverとは何かSeleniumを語る上で外せないのがWebDriverだ。 WebDriverとはブラウザをリモートから共通
どれだけ奇抜な文字列をURLとしてブラウザに認識させるか
Twitter / hasegawayosuke: 「どれだけ奇抜な文字列をURLとしてブラウザに認識させるか」みたいなの、人類にはあんまり役に立たない知識。 以下の文字列はすべてChromeでlocation objectに代入するとGoogleに遷移する文字列です。 （1249766309はGoogleのLong IP Address） 最後の2つの例以外はschemeを省略しています。 （http上で試してください） // 先頭の「/」はいずれも「\\」に置き換え可能 location = '/\\1249766309' location = '\\/1249766309' location = '\\\\1249766309' // 以下の例すべて先頭のいずれかの「/」を「\\」にしても遷移可能 location = '//@1249766309' location = '//:@
HTMLElementのdata attributeの使いどころ
Twitterでアプリの状態をdata-*属性で管理するかJavaScriptの変数で管理するかの使い分けに関して質問を受けたので、まとめてみました。 個人的には以下の様な理由から、data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています。 Objectを保持できない JSのObjectは.toStringされた結果が保持されるため、JSの内部状態をそのまま保持できません DOMアクセスが有るため遅い これに関してはベンチマークをとったわけではないですが、JS内で完結する変数アクセスに比べると速度的なペナルティはあると思います （data-*もCSSから参照できるからそのへんの解決もいるし） jQuery.fn.dataの実装はこれらの問題をある程度解決しているので、「HTMLElement毎の独自変数を保持
ネットワーク通信を行う場合に検討すべきこと
特にモバイルアプリで頻繁にネットワークが切れる可能性がある場合こういった対策を考えた方がいい。 接続のタイムアウト通信を行う場合には基本的にタイムアウトの設定をする。 「どのくらいの秒数でタイムアウトするか」は難しいが、「課金や決済等の2重投稿が問題になる通信」は長く、「ページの表示等の2重投稿が問題にならない通信」は短くするのがいい。 ただし、2重投稿が問題になる通信でも、「タイムアウト後は再送信前にサーバに最初の通信が成功したかどうか確認する」のであればタイムアウトは短くても機能的な問題は少ない。 （または、サーバ側が2重送信前提で処理を行う） 自動再接続特にストリーミング等で「常時コネクションを張り続ける」系の実装を行う場合、一度通信が切断しても自動的に再接続する実装が行われることが多い。 ただ、このときにコネクションの管理が正しく行われず複数のコネクションが同時張られる状態になると
カジュアルにChrome extensionを書いてみる
Chrome extensionを0から開発しようとするとmanifest.jsonとか色々考えないといけないので、すでにインストール済みのextensionを改造するのをおすすめします。 書き換えたいextensionを入れる。普通にChrome ウェブストア - 拡張機能からインストールします。 extension idを取る。インストールページのURL末尾にあるアルファベットの羅列がextension idです。 すでにインストール済みのextension idが欲しい場合、「extensionの管理画面（ chrome://extensions ）」から対象のextensionの脇にある「Visit website」をたどるといいです。 ソースを見る。Macの場合以下の場所にあります。 ~/Library/Application\ Support/Google/Chrome/Def
iOS, AndroidでSafariからアプリのインストール状態によって遷移先を変える方法
制限すべてのOSで「表示開始時にアプリがインストールされているかを判断して表示を変える」事はできない iOS6以下の方法で画面上部にバナー（Smart App Banner）を出せる <meta name="apple-itunes-app" content="app-id=405548206"> 以下の形式でパラメータを渡すことも可能 <meta name="apple-itunes-app" content="app-id=405548206,app-argument=nakamap://invited"> 【iOS6】ページ上部にアプリが開けるバナーを表示！ Smart App Bannerについて : Excite Smartphone Engineer’s Blog ただし、この方法では「要素をクリックした場合にアプリかストアへ遷移する」動作は実現できないので、クリック時の飛び先
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
mobile safari向けFast Buttons（vclick）実装
mobile safariはclick時に300msの遅延が発生するのでmobile safari向けフレームワークではそれ回避用の実装が提供されてる。 jQuery Mobileの場合、vclick Mobile Boilerplateの場合、Fast Buttons Closure Libraryの場合、Creating Fast Buttons for Mobile Web Applications - Mobile — Google Developers ただ、それぞれFWに依存してるか、要素それぞれへ個別に適応する必要がったので、ライブラリ異存なしでdelegate的な実装を書いてみた。 fastButton - jsdo.it - Share JavaScript, HTML5 and CSS デモ 注意点として、マウス関係のイベントをかなり潰します。 clickは発行されない
JavaScript UnitTest Patterns
ここでは以下の順番でSinonJSとJsTestDriverを使用したJavaScriptのUnitTest Patternsを紹介します。 初期化の遅延非同期実行の同期化html, cssのテストイベントのテストその他問題になりうるコード初期化の遅延UnitTestを行う場合、まずは初期化functionが自動的に実行されないようにしましょう。 初期化functionをこちらの任意のタイミングで実行できるようにすることにより事前に対象外のコードをstub化したり、必要なfunctionへspyを仕込んだ状態でfunctionを実行できるようになります。 UnitTestの場合のみ初期化を遅延する一番簡単な方法はUnitTest実行時のみ条件分岐で初期化を止める方法です。 $(function () { if (window.sinon) { init(); } }); この方法は簡単かつ
SinonJSとJsTestDriverを使ったJSテスト手法に関して
最近SinonJSとJsTestDriverを組み合わせてこんな感じのコードをベースにテストを書いているので紹介したいと思います。 sinon.log = function (message) { jstestdriver.console.log(message); }; sinon.assert.expose(this, { 'includeFail' : false }); var oldTestCase = TestCase; TestCase = function (name, condition, opt_proto) { if ('function' !== typeof condition) { opt_proto = condition; condition = undefined; } Object.keys(opt_proto).forEach(function (ke
JSのUnitTest関連技術
ざっくり以下のようなツールが関連する CIサーバ系（Jenkins等） 何かのタイミングで自動的にテストを実行する場合に使用 「Swarm系」、「結合テスト系」を操作し、その結果を蓄積、報告する 結合テスト系 利点 IDEを使えばテストの定義が簡単実ブラウザでテストを実行するので検証が確実標準で画面遷移も含めた結合テストをサポートhtmlの切り出しが不要で実サービスを使ったテストが可能CIサーバとの連携が可能欠点 IDEを使ったテストは柔軟性に欠ける実ブラウザを使うので起動が遅い実ブラウザを使うので安定性に欠けるテストがUI（html, css）に依存するHeadLess系が使えない（多分）ブラウザのみでテストが完結しないある程度UIが安定しているサービスに対してのサーバも含めたブラックボックステストに向く Swarm系 利点 実ブラウザでテストを実行するので検証が確実UnitTest系の
Object.prototype.__defineSetter__を使ったAndroidでのJSON Hijackingに関して
Object.prototype.__defineSetter__を使ったAndroidでのJSON Hijackingに関して こないだShibuya.XSSで徳丸さんが紹介されてたObject.prototype.__defineSetter__を使ったJSON Hijackingに関して「Fx3系とAndroid 2系で動作する」とのことだったので検証してみた。 前書き __defineSetter__とはブラウザベンダーが独自実装したProperty AccessorでECMAScriptには定義されていない（ECMAScriptでは別の方法が定義された） 具体的な使い方は以下のとおり。 hoge = {}; hoge.__defineSetter__(‘huga’, function(val) { this.huga_ = val; }); hoge.huga = 'foo’;
JSの単体テストにJsTestDriverがおすすめ
基本的には以下の内容のまとめです。 0-9, JsTestDriverを使うときの注意点 http://0-9.tumblr.com/post/15574052397/jstestdriver 0-9, 最近のJS系のツールを触ってみたまとめ http://0-9.tumblr.com/post/15398953814/javascript-tools ・JsTestDriverとは何か？ 超簡単に言うとSelenium CoreのJS実装とQUnitを合わせたものです。 実際Selenium ver2はJsTestDriverが使ってるWebDriverと言うAPIを使っています。 （WebDriverがブラウザを外部から動かす共通仕様で、Selenium ver2とJsTestDriverはそれを使ってる状態） ・使った感想は？ ブラウザ上で動作するJSの単体テスト環境としてはかなり快
最近のJS系のツールを触ってみたまとめ
社内用にまとめたものだけど、そもそもTwitter上で流したもののまとめなのでこちらにも投げてみる。 //——————– CoffeeScript 元からCoffeeScriptに慣れてるか、素のJSが書きにくいと感じる人にはおすすめ 素のJSが書きやすい人はロジック書きにくくなる部分あるので若干つらい 記述するコード量は減るけど、素のJSでもエディタとかのサポートがあれば記述時間はそれほど変わらないかも （特に変換後のJS想像しながら書く場合） ただ、素のJS好きな人でも対応は難しくないので、JS書きたくない人が開発するのであれば使うのはありかも （OSとかの環境によって開発に支障が出ることはなさそう） おすすめの使い方 サーバサイドの人がメインで書く場合 単体テスト用コード（ロジックは素のJS、テストはCoffeeScriptで書こうかな） WebStorm IDEとしての完成度は高い
JSでラベルがサポートされ続けなければならない理由
あまり知られてないし、実際殆ど使われてないけど、JSにはこんな感じで使うラベル構文がある。 hoge: for (;;) { while (1) { break hoge; }; }; 使われてない理由は色いろあると思うけど、functionの中から外に飛べないのでイテレータとの相性がわるいというのもあって、これがなんとかなれば多少は使われるのかなーという感じ。 ただ、それでもこの言語仕様はJSの実装上非常に重要な構文で、これがないとsyntax errorになるコードは結構多いはず。 具体的には以下のようなコードがsyntax errorにならないのはhttp:がラベルと解釈されてその後の//がコメントの開始と解釈されてるから。 http://example.com/ if (true) { alert(1); }; また、hoge.jsにこんなコードが書かれてるのも見たことがある。 j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTTPのテストサイトを作成しました
location objectを使ったコードのテスト