サイト高速化の「戦略」と「戦術」- GradeAのその先へ | ゆっくりと…
サイト高速化をネタにした記事は星の数ほどありますし、YSlow や PageSpeed、あるいは両方同時にチェックできる GTmetrix のおかげで、アドバイスに従って問題点を一つ一つ潰し込んでいけば、着実にスコアを「Grade A」に近づけられるようになりました。 またベスト・プラクティスなんて知らなくても、「CloudFlare 導入、一発 OK！」なんていうお手軽なサービスもあります。 一方、これら個々の Tips、テクニックを断片的に積み上げていくアプローチやブラックボックス方式では、サイト全体を通して「本当に最適なの？」という疑問も生じます。 別な言い方をすれば、「Grade A は取ったけど… その先は？」に対する処方箋が必要なんじゃないかと思っています。 そこで今回は、「スコア」だけでは見えてこない、サイト高速化の「戦略」と「戦術」の話にチャレンジしてみたいと思います。これ
サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…
タイトル、少し変えました 😉 。 第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。 また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。 今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。 ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。 リソース配置を決める戦術 基本的な戦術 第1部 では、css や js
IPアドレスの地理的位置情報が引ける無料RESTful API集 | ゆっくりと…
IP アドレスからサーバーの地理的位置情報（Geolocation）を調べてくれるオンライン・サービスは、ちょっと検索すればすぐに見つかりますし、有料のサービスも山ほどあります。が、サーバーから任意の IP アドレスが引ける無料のサービスとなると、ちょっと時間をかけて検索しなければなりません。 今回は、海外からのコメント・スパムをブロックする WordPress プラグインを作りたくて、タイトルの様なサービスを調べてみました。 IP Geolocation の歴史も調べてみましたので、雑学系としてもご覧ください。 IP Geolocation の歴史 IP アドレスから ISP の位置情報を推定する技術は、1990年後半から研究されていました。DARPA がメインスポンサーの非営利団体 CAIDA（インターネット・インフラの発展のために、産学官が管理面・技術面で協力し合う非営利団体）が N
WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ | ゆっくりと…
ここ最近、jekyll に関する記事を目にする事が多くなりました。 以前から WordPress でオリジナルなブログを作ってみたいと思いながらも、なかなか重い腰が上がらなかった私が、なんとなく jekyll でブログを作り始めてみたら、以外にオモシロかった、という話をまとめてみたいと思います。 本来生まれも育ちも違う、WordPress と jekyll を比べる こと自体はナンセンスなので、jekyll でどこまでできるかが本記事のメイン・テーマです。 大抵は 「ブログなら、最低このぐらいの機能が欲しいよネ」 というのがあると思います。例えば、私も使っている Octopress では、カテゴリとタグを使い分けることが出来ません。またカテゴリを階層化したい人もいるでしょう。「続きを読む」的な機能だって、欲しいですよネ。 一方海外では、「WordPress から jekyll に乗り換えま
ブラックホールサーバーによるフロントエンドSPOF分析のすすめ | ゆっくりと…
SPOF と聞いて、すぐに 「あぁ、Single Point of Failure （単一障害点） のことネ」 と分かる人は、まじめにシステム工学を勉強した人か、ハードウェアを含む情報システム設計に知見のある人だと思います。 では、「フロントエンド」 が付くと、いったい何を指すのでしょうか？ 現代の Web サイトの多くは、自分が管理する （あるいは借りている） サーバーで全てのサービスを賄うのは、Yahoo や Google などの超大手以外ではほとんどないんじゃないかと思うほど、サードパーティが提供するサービスを取り込んでいると思います。Facebook、Twitter、flickr、YouTube はもちろん、jQuery などのライブラリ CDN、WebFont、アクセス解析なんかもありますネ。 もしこういったサービスを提供するサードパーティのサーバーがダウンした時、あなたのサイト
document.writeを使った遅いブログパーツ（例えばzenback）を非同期化してサイトを高速表示する方法 | ゆっくりと…
広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペット や LABjs、HEAD JS などの非同期ローダーが有名なところでしょう。 ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既
GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…
GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。 ただ、同種サービスの Google Code や Bitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクト
実践GitHub Pages運用のユースケースとワークフローの詳細 | ゆっくりと…
前回、GitHub Pages 活用の概要を書きましたが、実際に運用していくと、master と gh-pages をどう使い分けるか、また両者の同期をどう行うかなど、いくつかの課題が浮かび上がってくると思います。 そこで今回は、実際に GitHub Pages 上で運用されている Dive Into HTML5 をよく知る立場から書かれた記事 「GitHub Pages Workflow and deleting git’s `master` branch – Oli.jp」 の翻訳を中心に、関連するいくつかの記事から、ユースケースと運用のシナリオ、及びそれに応じたワークフローをまとめてみました。 以下は、その参考記事です。 Git post-commit hook to keep master and gh-pages branch in sync by Paul Irish 2011
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…
README がキチッと書かれているプロジェクトって、どんなに小さくても立派に見えますよネ。 GitHub の場合、大抵はマークダウン記法で書かれた README.md とか README.markdown とかいう名前のファイルが、HTML に変換 （マークアップ） されて表示されていることはご存知でしょう。 マークダウン記法自体はとても簡単なのですが、GitHub では GitHub Flavored Markdown （略して GFM） という GitHub 用にアレンジされたマークダウン・エンジンが採用されていて、一般のマークダウン・エディタでチェックしてからコミットしても、意図通りの見た目にならないことが多々あります。私 （もちろん GitHub 初心者です！） の場合、README ファイルだけで10回以上もコミットしてしまいました。「マークアップ （レンダリング） を気にして
IPアドレスからアクセス元サーバーの位置情報を調べるjQueryプラグイン | ゆっくりと…
2000年代前半、荒らし や 掲示板スパム に悩まされていた頃、JPNIC やら RIPE やらの WHOIS データベースで IP アドレスの出所を調べ、「また関西からだよ」 とか 「お、役所からだゾ、串刺されてんのかな」 とかやっていたわけですが、アクセス元を調べたところで結局のところ IP を弾くイタチゴッコを続けていたものでした。当時は、WHOIS にわざわざ アドレスをコピペしてクリック じゃなく、自サイトからオンラインで調べられたら便利だなぁと思っていました。 さて今もそんなニーズがあるのかわかりませんが、jQuery Plugins にそんな思いを実現してくれる jqIpLocation というプラグインが紹介されていたので、試してみました。 実はこのプラグイン、IPInfoDB が無料で提供する DB サービスを利用して、IP アドレスからアクセスポイントの位置情報を引っ張
CCV.jsで顔検出 | ゆっくりと…
CCV.js （C-based Computer Vision Library） は、オープンソースな画像処理ライブラリ OpenCV の純粋なアルゴリズム部分を一部 JavaScript に移植したライブラリです。しかも元のライブラリではかなりの仮想化・階層化されていた画像処理用メモリ管理部分を簡素化し、Canvas で扱えるようにしてありますので、現在のモダンブラウザでも動作する軽量なライブラリとなっています。 ライブラリとはいうものの、現時点はまだ物体検出のアルゴリズムしか移植されていないようなのですが、顔検出のサンプルがありましたので試してみました。 サンプル CCV.jsで顔検出 – jsdo.it – share JavaScript, HTML5 and CSS JavaScriptライブラリの中身 ccv を GitHub から落とすと、js ディレクトリに顔検出のサンプル
ブラウザ動作の理解－レンダリングツリーの構築と描画のタイミング | ゆっくりと…
HTML5 の Web Worker やら GPU でハードウェア・アクセラレートされる IE9 のレンダリングなど、今年もブラウザの進化が激しくなりそうですネ。一方でフロント･エンド改善によるページ表示の高速化 Tips や Hack も百花繚乱、出尽くした感がありますが、やはり原理原則を知らないと 「どれが正しくて筋が良いか」 中々判断が効かないと思いませんか？ そこで最も基本的な 「ページの読み込みから表示まで、ブラウザって何をどうやってるの？」 を理解していきたいなと思っています。 一番の厳密かつ王道は、ブラウザ間の違いを極力少なくするように注意深く書かれている HTML5 の仕様書 を理解だと思いますが、イキナリではハードルが高いので、まずは周辺を漁っています。そんな中から、ちょっと古いですが、2004年5月の記事 「Testing Page Load Speed」 を今回、翻訳
オブジェクト指向なJavaScriptプログラミングのススメ(2) | ゆっくりと…
前回 に引き続き、Microsoft のコンサルタント兼トレーナー （であるらしい） で、本も出版している （らしい） Dino さんの記事 Functional vs. Object-Oriented JavaScript Development の後半を要約してみたいと思います。 今回は、jQuery の関数型プログラミング的な側面とオブジェクト指向プログラミング的な側面、そして JavaScript で OO プログラミングをする時の2つの手法 － クロージャーとプロトタイプについてです。 私の理解不足とヘタクソな翻訳を補うため、Dino さんの論点を先にまとめると、次の様になるかと思います。 jQuery は モナド のコンセプトを採用し、表に見えるところでは関数型のメリットを最大限生かしている。一方、拡張性を重視し、内部はオブジェクト指向で作られている。 JavaScript で
Ajax(XHR)如きにjQueryは重過ぎ!!な時の軽量ライブラリ集 | ゆっくりと…
WP Super Cache の導入にあわせて、人気の記事をカウントしてくれるプラグインを Popular Posts + Post-Plugin Library から WordPress Popular Posts に変えてみました。 理由は、Popular Posts がキャッシュ化されたページではカウントしてくれなかったからです。その点 WordPress Popular Posts は、Ajax (XHR) でカウントしてくれるので、静的ページでも OK です。 ところが WordPress Popular Posts は、高々ページの ID を送るだけなのに jQuery （もちろん min 版ですが） を読み込みます。それだけならもっと簡単なスクリプトでもいいんじゃない？ということで、自分の勉強を兼ねて調べたことを共有してみたいと思います。 vX – A Super-Light
jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと…
jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。 記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。 Deferred や Promise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです
jQueryのDeferredとPromiseで応答性の良いアプリをー実践編 | ゆっくりと…
前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと／何がうれしくて／どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。 今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに タブや をクリックせずに、 タブ
jQuery DeferredとHTML5 Web Workersでオブジェクト指向な並列プログラミングを | ゆっくりと…
「jQueryのDeferredとPromiseで応答性の良いアプリをー実践編」 で述べましたが、Deferred には次の様なうれしさがあります。 非同期な処理をする部分と、その結果をインターフェースする部分を分離する事によって、（特にアプリケーションに近い部分で） コードの可読性が高まる 複数の Deferred オブジェクトをまとめて監視出来る 一方 Web Workers には、window オブジェクトや DOM へのアクセスが出来ないなど、ちょっと引いてしまう制限がありますが、考えようによっては、表示やマウス入力を扱う ユーザー・インターフェースな処理 と、その中身の 純粋にデータ的な部分を扱う処理 とを分離して Web アプリを作るという、オブジェクト指向的な考え方と極めて親和性が良いのではないかと思います。 ということで今回は、「Deferred と Web Workers
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…