ウェブアプリのパフォーマンスに対する共通の捉え方を持つ - kitak blog
最近、一緒に仕事をしている企画者に「ブラウザAでページBを開いたら重かったです」と言われたことがあって、そのときに思ったこと。 「重かったです」と言ってくるということは何か良からぬことが起きている気がするけれど、それだけだと何が起きているのか、何が問題なのかがよく分からないので、以下のような質問で原因で探っていく。 ページの表示が遅いのか 操作(スクロールやクリック)の反応が悪いのか アニメーションが滑らかでないのか このような質問をしていて思ったのは、ウェブアプリのパフォーマンスに対する捉え方を啓蒙したり、互いに共通の捉え方を持つといいのかもしれない、ということ。例えば、上記の質問は、自分が知っている RAIL というパフォーマンスモデルに基いて行った質問だった。RAIL はウェブアプリのパフォーマンスをユーザーの体験から4つの側面で捉えたモデルで具体的な内容は RAIL モデルでパフォ
複数のgitリポジトリを履歴を残したまま統合する - kitak blog
引き継いだプロジェクトが、foo_pc, foo_sp, foo_commonみたいなかんじでリポジトリが分かれていて、同じ機能の開発やっているのにそれぞれにPullReqだしたり、リリースノートを書いたりするのがしんどいので、統合した。以下に統合した時の手順をまとめておく。 まず、新しくリポジトリを用意して、以下のように統合したいリポジトリ毎にディレクトリを作成して(.gitkeepとか用意して)、コミットする。 foo ├── foo_common ├── foo_pc └── foo_sp 次のようなスクリプトを実行する。git 2.9 から無関係なヒストリもってるブランチ同士をマージするときは --allow-unrelated-histories つけないとエラーになるのがハマりどころ。 for repo in foo_pc foo_sp foo_common; do git r
ポケモンGOプレイ雑記 - kitak blog
以下のように楽しみにしていたポケモンGOがリリースされて、プレイしてみたので色々書いておく。ちなみに自分は普段ゲームを全くやらない。大体のゲームは始めて30分くらいで飽きる。がっつり何かのゲームをプレイするのはかなり久しぶりでおそらく中学以来。 ポケモンGOをプレイする日を楽しみに今日も生きる— きたけー (@kitak) July 11, 2016 ポケモンにハマってた小学生の頃の思い出が最近蘇ってきていて、心の若返りを感じる— きたけー (@kitak) July 15, 2016 現状、レベル21で以下のようなかんじ。 決意(初日) 先週の金曜日。リリースされた瞬間にインストールして、プレイ開始。ちょっとやってみて、すぐにハマってしまった。ポケモンがマップにボワッと現れるのも楽しいし、それを捕まえることができたら、さらに楽しい。仕事中なので適当なところでアプリのプロセスを落とす。 そ
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
ウェブフロントエンドのパフォーマンス改善のひとつの日常 - kitak blog
ひとつの日常 この間、仕事でちょっとしたハイブリッドアプリ(ネイティブアプリのWebViewの上で動くWebアプリ、とここでは定義しておく)をリリースした。 そのアプリにはタブがあって、(当たり前だが)タブでコンテンツが切り替わる。 リリースして3日くらい経って、企画の人から「なんか、ここのタブ、反応悪くない？」という話が来た。たしかにタブに触れても、すぐには反応しなくて1~2秒経ってからタブが切り替わる。しかも、切り替えたタブのコンテンツが表示されるのにも1~2秒かかっている、うへー... 改善するぞ！ ということは、クライアントの開発をおこなっていると、ちょくちょくあるのではなかろうか。意識、あるいは無意識におこなっている改善の手順について、先の問題の改善に至るまでの具体的は話、ツールも含めながら書く。 計測する 「計測するまでは速度のための調整をしてはならない」という有名な格言がある
Chrome DevTools の「Enable paint flashing」を使う - kitak blog
Chrome DevToolsに「Enable paint flashing」という機能があって、画面で描画が行われた箇所をハイライト表示してくれます。 DevTools を立ち上げて、下のペインの「Rendering」タブを選択するとあります。下にペインがない場合、右上の「︙」から「Show console」を選ぶとペインが表示されるはずです。 「Enable paint flashing」は、少し前まで「Show paint rectangles」という名前だったし、今後ひょっとしたらまた名前が変わるかもしれません。名前だけでなく、DevToolsのUIはChromeのバージョンアップによって変わっていくので、上の説明はあくまで参考程度にしてください。 描画が行われた箇所がハイライトされて、なにがうれしいのかというと、不要な描画を検知し、除くことで、ブラウザのレンダリング処理を改善して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
