OSXの回線速度を落とすNetwork Link Conditionerがデバッグに便利

iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ – クックパッド開発者ブログを読んでいて、OSXの回線速度を3GやADSLやWiFiをシミュレートできるNetwork Link Conditionerを知った。iOSにも似たような機能が標準で付いてるんだけど、OSXはApple公式の別アプリとしてリリースされていた。

クックパッドの記事だとmatttさんのブログ記事にリンクが貼ってあるんだけど、スクショでは”Network Link Conditioner”を検索しているのに対して本文では”Hardware IO Tools for Xcode”を検索するよう指示しているというトラップがあるので、要注意。

https://gyazo.com/112a056e686e772e63f3d45d7bf13006

Hardware IO Toolsを探せばその中にNetwork Link Conditionerが入ってます。分かりづらいので以下のリンクからどうぞ。

https://developer.apple.com/downloads/?name=Hardware%20IO%20Tools

余談

リンスっぽいとおもいました。

ElectronでBonjourに登録されたIPアドレスを取得する

最初にmdnsというnpmパッケージが目についたんだけど、実行すると以下のようなエラーがでてうまく動かない。

$ electron .
[1108/014127:ERROR:http_transport_mac.mm(186)] Could not connect to the server. (NSURLErrorDomain -1004)

Bonjourでブラウズ(デバイスの検索)するだけなら、mdns-jsというnpmパッケージが素晴らしく簡単に動いた。

  • https://www.npmjs.com/package/mdns-js
  • https://github.com/kmpm/node-mdns-js

githubリポジトリに書かれてるように、以下のサンプルコードがそのまま動く。

var mdns = require('mdns-js');

var browser = mdns.createBrowser();

browser.on('ready', function () {
    browser.discover(); 
});

browser.on('update', function (data) {
    console.log('data:', data);
});

JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

続きを読む JavaScriptからCSSファイルに書かれた定義を取得する

FirefoxでSVGからBlobを生成するとfilterが適用されない

※本記事は解決していない内容のメモです。

svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。

続きを読む FirefoxでSVGからBlobを生成するとfilterが適用されない

国勢調査に基づく都市雇用圏

都市雇用圏関東周辺

都市雇用圏(Urban Employment Area)とは、被雇用者がどの都市に通勤するかという基準によって設定された都市圏。最新版はたぶん2005年。以下のpdfに、北海道・東北・関東・近畿・関西・中国・四国・九州・沖縄の各地域ごとの納得感ある都市圏が収録されている。

資料6 2005年国勢調査に基づく都市雇用圏について（PDF形式：1,629KB）

参考

IT企業がどんなWebサービスを使ってるか分かるWebサービス

StackShareというWebサービスは、Uber/Airbnb/Slack/Facebook/Twitter/Netflix/Dropbox/Soundcloud/Kickstarter/Yelp/etc…といったイケイケのインターネットなベンチャーがどんな技術を利用しているのかリストアップする利用技術の一覧サービス。最近どんな技術がトレンドなのか何となく見てるだけでも楽しい。

http://stackshare.io/

名前が思い出せなくて2,3日ぐらい探し回ってようやく思い出した。

探し回ってるうちに、技術からスタートアップを探すというWebサービスも見つけた。

https://startupstack.io/

ngrok: localhostにドメインを割り当てる

ローカルで開発しているWebサービスに、どうしても外部サービスからアクセスさせたい時がある。例えばtwitterやfacebookで共有した時にどのような見た目になるか、を検証する時などはhttp://localhost:3000/を共有するわけにもいかない。

そんな時はngrokを使うと、超便利。ngrokをインストールしたら、以下のようにするだけでhttpアクセスを3000番ポートに飛ばすプロキシサーバーが生成される。

$ ngrok http 3000
ngrok by @inconshreveable                                                                                      (Ctrl+C to quit)

Tunnel Status                 online
Version                       2.0.19/2.0.19
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://7c7*****.ngrok.io -> localhost:3000
Forwarding                    https://7c7*****.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

超便利！！