kitak.blog

Kみたいなエンジニアになりたいブログ

web

ウェブアプリのパフォーマンスに対する共通の捉え方を持つ

最近、一緒に仕事をしている企画者に「ブラウザAでページBを開いたら重かったです」と言われたことがあって、そのときに思ったこと。 「重かったです」と言ってくるということは何か良からぬことが起きている気がするけれど、それだけだと何が起きているのか…

BroadcastChannel API を使ってみた

BroadcastChannel API を使ってみた。 同一オリジンのタブ・ウィンドウ・フレーム間でデータを送受信できる API。API の詳しい説明は BroadcastChannel API: A Message Bus for the Web | Web | Google Developers に譲ります。コードは、パッと見、Cross-Do…

VISA デビットカードを使ったら口座残高が通知されるようにした

VISA デビットカードを使ったら口座残高が通知されるようにしたので、個人の技術的な備忘録。 三菱東京UFJダイレクトのページの操作を自動化して、口座残高を調べる - kitak.blog の続きにあたります。ざっくりこんなかんじです。 (あらかじめ、VISA デビッ…

WebPagetest を使わずに Speed Index を算出する

題の通り。 WebPagetest を使うと、Speed Index というページのコンテンツがいかに速くレンダリングされたかの総合的なスコアが算出できます。Speed Index は、定期的にこのブログで取り上げていますが、算出方法の内容は https://github.com/t32k/webpagete…

ウェブフロントエンドのパフォーマンス改善のひとつの日常

ひとつの日常 この間、仕事でちょっとしたハイブリッドアプリ(ネイティブアプリのWebViewの上で動くWebアプリ、とここでは定義しておく)をリリースした。 そのアプリにはタブがあって、(当たり前だが)タブでコンテンツが切り替わる。 リリースして3日くらい…

Android ChromeでPhysical Webを試した

googledevjp.blogspot.jp を読んで、試してみることに。Physical Webってなに? iBeaconと何が違うの? という話は http://physicalweb.jp/ が詳しい。 送信側 送信側。ビーコンを飛ばすデバイスは http://direct.sanwa.co.jp/ItemPage/MM-BTPW1 で売ってる…

HTML5で定義されたinput typeを機能検出する術

こんにちは。うさぎ(http://tabelog.com/tokyo/A1303/A130301/13041115/)は良いものです。 HTML5では、これまでのtext, passwordの他にmonth, color, emailなどのinput typeを定義しています。 この指定により、特にスマートフォンサイトでは、ブラウザが適…

ウェブカメラに映った自分の姿にグリッチをかけてみた(WebRTC getUserMedia + glitch-canvas + WebAudio API)

web

こんにちは。目がちかちかします。きたけーです。 この前のキタソンでつくったやつ(http://kitak.hatenablog.jp/entry/2014/11/23/175021)を応用して、ウェブカメラに映った自分の姿にグリッチをかけるアプリをつくってみました。 マイクから音をとって、音…

サードパーティオリジンの LocalStorage の挙動を調べてみた

こんにちは。花金だ! きたけーです。 サードパーティオリジンの LocalStorage の挙動をChromeとSafariで調べてみたのでメモ。 やりたいこと iframeで別オリジンのページを読み込み、元のページからiframeのwindowに値を送ってLocalStorageに値を保存したい…