Macキーボードの特殊キーを文字に変換するコンバータ | ゆっくりと…
Mac のショートカットキーの説明をするとき、「option + command + A」 を 「⌥ + ⌘ + A」 と書けたら、ちょっとカッコ良い気がしませんか？ 今回は小ネタとして、そんなコンバータを紹介します。 Mac Kbd Converter どう使うの？ Mac Kbd Converter を開き、テキスト・エリアに 「shift + command + A」などと、ショートカットを入力します。キーとキーのつなぎには必ず 「+」 を入れて下さい。最後に 「Transform」 のボタンを押します。 すると、拡大されたシンボル （これも文字列です） と 「&#番号;」 で表される特殊文字番号に変換されますので、どちらかをコピーして使います。 変換できる特殊キーは？ あまり使わないものもありますが… 変換可能なキーの表記 表示 特殊文字番号
新参の超軽量JavaScript非同期ローダー3種を徹底比較 | ゆっくりと…
JavaScriptの読み込み・実行は、それより下にある画像など外部リソースの読み込みと表示をブロックするため、「ページ読み込み時間を短縮するJavaScriptローダー：LABjs」 や 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 で紹介したように、多数の JavaScript ローダーが開発されてきました。 これらのローダーは、「非同期スニペットのスタート ガイド – Google Analytics」 に代表される、script 要素を直接 DOM に挿入する方法が主流となっています。またそのタイプは、単一のスクリプト・ファイルを対象とした小規模なものと、Head JS、LABjs、ControlJS などに代表される、複数ファイルの依存関係をハンドリングする機能をもつものに大別されるかと思います。 後者のタイプは最小でも3KBytes
Safari5の環境変数でレンダリングの様子を可視化する裏技 | ゆっくりと…
ブラウザにとって、半透明をブレンドして表示するのは負荷が高いものです。特に、iPhone などのモバイル端末向けのコンテンツは、出来るだけページを軽くしておきたいものです。ページ中でこのような負荷の高いレンダリングが必要な箇所を色分けで表示してくれる便利な （!?） オプションが Safari5 にはあります。 上の図は、このオプションを指定して、アップルのスタート・ページ を表示させたときの様子です。transparent や iframe の allowtransparency が使われている箇所が赤く表示されています。 MacOS には Core Animation という、1種の アニメーション・フレームワーク が使われていて、こいつにデバッグ用のフラグを設定してやると、レンダリングの様子が色分けされたり、レンダリング・ツリーの情報がコンソールにダンプされたりするというものです。
"遅いブログパーツを高速表示する方法"を検証する | ゆっくりと…
かん吉さんの記事 「遅いブログパーツを高速表示する方法」、すばらしいですネ。アフィリエイトをやっている人にとっては、とても興味を引く記事だと思います。ですが、紹介されているスクリプトは、中級以上の方が対象 とあるように、私のような初級者が知っておくべきことがあるはずです。 そこでまず私自身が中級者以上となるために、過去3回に渡り自分なりにブラウザの動作を勉強してきました。 ブラウザ動作の理解－レンダリングツリーの構築と描画のタイミング ブラウザ動作の理解－リフローとリペイント及びその最適化 ブラウザ動作の理解－レンダリングの負荷を測る そこから見えてきたのが、レンダリング・ツリー の役割りです。ブラウザの本質は、ドキュメントとその見た目 （ビュー） の管理です。前者は、文書自体やその構成の管理に責任を負い、後者は、描画について責任を負う。そして、両者のコラボレーションによりユーザーに情報を
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
ページ中リソースのHTTPレスポンスヘッダを診断するツール | ゆっくりと…
REDbot は、 HTTP リソースの問題を、HTTP の定義や広く使われているルールに基づいて診断し、問題点があればそれらをどう改善すべきかの手助けをしてくれるオンライン・ツールです。 自作の PHP スクリプトで生成したレスポンス・ヘッダをチェックしたり、ページ中のリソースに対するキャッシュの状態をチェックしたりするのに役に立つと思います。 入力方法 Enter a http:// URI to check 欄に診断したい URL を入力し、リターンキーを押すだけですが、add a header で、リクエスト・ヘッダ中に含ませたいフィールドを追加することができます。例えば、User-Agent や Referer に応じてレスポンスが異なるページをチェックしたい場合に利用します。
HTTP/Ajaxのプロファイル分析が出来るProxy型オンラインツール | ゆっくりと…
サイトのパフォーマンスをチューニングするとき、Firefox には Firebug、Webkit 系の Google Chrome や Safari には開発者ツール、IE には dynaTrace AJAX Edition といった、各ブラウザ専用のツールを使うという選択肢があります。これらはブラウザと密着しているため、HTTP通信のブラウザ内部のキュー状態（例えば ブロッキング など）や JavaScript の動作をトレースすることが出来ます。 一方、クロスブラウザの検証には、ローカルPC上でプロキシとして動作する Visual Round Trip Analyzer や Fiddler2 などがありますが、ネットワークのポートを観測しているに過ぎないため、JavaScript をトレースするためには Firebug Lite と組み合わせるということになります。 今回はクロスブラウ
JavaScriptの"Lazy Loading"とレンダリング時間を検証する | ゆっくりと…
先日、YSlow が 2.1.0 にバージョンアップされました。リリースノートを見ると、主に次の2つが目に付きます。 img、link、script、iframe タグ、あるいは JavaScript の Image() オブジェクト等において、空の src や href 属性をチェックし減点する新たなルール 「画像に対する空の src は避けよ」 を追加した。 head タグ内に動的に script タグを挿入する Deferred Script は、レンダリングを妨げず、ページ内の他要素と平行にダウンロードされるため、ルール 「JavaScript はページの最後に」 の減点対象としないロジックを追加した。 1. は、空の src があった場合、ブラウザがこれを現在のページと解釈し再度リクエストしてしまう結果、トラフィックが倍になってしまうという問題に対するペナルティーとして追加されま
ウェッブサイトの表示速度を測定するフリーツール集 | ゆっくりと…
コンテンツの充実を図る、アクセシビリティに気を配る、サイトのレスポンスを上げる、どれをとってもまだまだのこのサイト。WordPressテーマinoveのカスタマイズを契機にCSS Spriteという技術を知ってから、まずはこの技術をもっと使ってレスポンスを上げよう！と考え、HTTPリクエストの削減効果と応答速度の変化を定量的に計ることができるツールを集めてみました。 一口にサイトの応答速度を計るといっても、予め何を計るべきかを決め、ツールが一体何を計っているのかを知っている必要があると思います。そこでクライアント〜サーバー間の回線速度は抜きに、 サーバーがWordPressのPHP処理を開始してからHTMLを生成し終えるまでの時間を計る。これにより処理負荷の重いプラグインの改善を図る。 ブラウザ（＝ユーザーエージェント）がHTML・CSS・Javascript・画像データなどをリクエストし
ページ読み込み時間を短縮するJavaScriptローダー：LABjs | ゆっくりと…
ブラウザは通常 Web サイトを訪れたとき、CSS や画像などのページ要素を幾つか並列で読み込みますが、JavaScript ファイルを読み込んでいる最中は、（JavaScriptやスタイルシート以外の） 他要素の読み込みをブロックします。それゆえ Yahoo! の 「Best Practices for Speeding Up Your Web Site」 では、それ以上他の要素を読み込む必要のないページ下端に JavaScript を置くことを推奨しているわけです。 これに対し 「ハイパフォーマンスWebサイト―高速サイトを実現する14のルール」 （今は35のルールですが） の著者 Steve Souders が Non-blocking JavaScript、つまり他のページ要素をブロックしないファイルの読み方を提唱しています。LABjs は氏の監修の下で作成されたオープンソースの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
