タグ別アーカイブ: tips

jQueryとAngularJSにおけるAjaxの微妙な違い

AngularJS の勉強、始めました。

最初はそのプログラミングに関する独特のお約束事項にイラッとしましたが、キモであろう DI を「疎な関係のクラスを(実行時に)結びつけるのに必要な仕組み」と割り切り、DI – 猿でも分かる! Dependency Injection: 依存性の注入 で引用されている ITpro 記事クラス図 をコードから想像できるようになったところで、それなりに面白くなってきました。

何より「jQuery が要らなくなる!」のがとっても快感なんです 😉 (つらい時もあるけど…)。

さて今回は、jQuery まみれのページを AngularJS で書き換えた時に気付いた Ajax の動作 − 非同期通信の戻り値をいつどこで DOM に反映するか − に関する話題を書いてみます。

続きを読む

Sample Site

GradeAの先行くWordPress高速化 – 必ず結果の出る実践的HTTPリクエスト削減法

WordPress は、プラグインで手軽に機能が拡張できる反面、あちこちに css や js が散乱し、放っておくとベスト・プラクティスからは程遠い状態になりがちです。

もちろんこういった問題の解決を図るプラグインも多数リリースされていますが、ページ単位の処理なので、サイト全体の構成を通して最適にはなりません。

そこで第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」、第2部「サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス」では、数あるベスト・プラクティスの全体を俯瞰し、個々の Tips やテクニックからは見え難い、最適化の考え方や道筋を提案しました。

その総仕上げとして今回は、WordPress サイトを例題に、必ず結果の出る HTTP リクエストの削減方法を提案したいと思います。

続きを読む

ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得

zenback の読み込みコードが非同期化され、かつ 平均20%+の速度アップが図られた そうで、ユーザーとしては嬉しい限りです。

zenback に限らずソーシャルメディアの導入は、必然的に外部サービスを多用することになります。どのサービスも、スクリプトや画像、トラッキング用コードなどのリソースを、その特性に合わせて 2〜4 程度のホスト/ドメインに分散させているのが普通です。

こういった分散化は並列に読み込みめるリソース数を増やし、クッキーのあり/なしを区別できるので高速化に寄与します。が、利用するサービス数が多くなると、いわゆる「DNS ルックアップ」にかかる時間が無視できなくなり、さすがにデメリットの方が目立ってきます。

例えば本サイトの場合、最終的に25以上の異なるホスト/ドメインから 有象無象 のリソースを読み込んでいるのですが、「DNS ルックアップ」の合計だけで1秒を超えることなどザラにあることが分かりました。

今まで「大して効果ないんじゃない?」と「DNS プリフェッチ」の導入は見送っていましたが、この1秒を消し去ってくれれば幸せになれるかも…と思い直し、導入することにしました。

ということで、今回は twitter や facebook などのソーシャルボタンに DNS プリフェッチを導入した時の効果を報告したいと思います。

続きを読む

そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集

sitepoint から「本当にjQueryが必要ですか?」とタイトルのついた3本の記事を紹介します。

言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。

また JavaScript 初学者の人も、jQuery が内部でどう苦労しているのか知るのも良いと思います。私自身の勉強も兼ね、その他の情報も色々と補っていますので、良かったら見ていって下さい 😀 。

続きを読む

サイト速度とonload再考

単にウケ狙いなら「革新的!GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」(笑)とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。

プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。

しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化版 frame-in-frame 法” を見い出しましたので、その方法を共有し、それがもたらす結果について掘り下げてみたいと思います。

まずは、デモからご覧ください 😀 。

続きを読む

WordPressプラグインのコーディングでありがちな10の間違いと設計時に考慮すべきこと

WordPress のプラグインを作って公開すべく、基礎からみっちり学習しています。

Codex 日本語版プラグインの作成 の項には、外部リソースとして Ozh さんの2009年記事 「WordPress プラグインのコーディングでよくある10個の間違い」 が紹介されています。

Professional WordPress Plugin Development の著者でもある Ozh さんは、WordPress プラグイン・コンペティションの審査員を努めて来た関係上、今までに相当数のプラグインをレビューしているそうです。

私も色々なプラグインのコード・リーディングをしてみましたが、古いけど良質なこの記事が、必ずしも広く認知されてるわけではないことを感じています。

ということで、古くなっている部分を新しい情報で補いながら、この記事を翻訳で共有してみたいと思います。

続きを読む

たった1行でケータイやスマホ用ページを高速化するQuick CacheのTips

WordPress の WPtouchKtai Style とキャッシュ系プラグインを 併用 する場合には、キャッシュさせないように設定するのが一般的でした。なぜなら、同じ URL のページを、デスクトップ用とモバイル用のキャッシュに分ける事が難しく、両者が混在しちゃうという問題が発生するからです。当然、ケータイやスマートフォンは、キャッシュの恩恵が受けらないですよネ。

ところが Quick Cache なら、オプションでたった1行のコードを設定すれば、それぞれのページを別々にキャッシュできちゃうんです。

ということで、前回記事 では wp-config.php にコードを追記しましたが、今回はもっとスマートに、Quick Cache 側に設定する Tips として紹介したいと思います。
続きを読む

GitHub Pagesホスティングサービス(ほぼ)完全活用ガイド

GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。

ただ、同種サービスの Google CodeBitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクトの成果を世界にアピールする − GitHub Pages は、そんなことのできるサービスです。

2008年12月の GitHub Blog の記事 には、次のような GitHub Pages の紹介があります。

You can put anything here you like. Use it as a customizable home for your Git repos. Create a blog and spread your ideas. Whatever you want!
(GitHub Pages 上にはお好みで何でも置くことができます。Git リポジトリのホームページとしてカスタマイズしても良し、ブログを設置してあなたのアイディアを広げても良し。あなた次第です!)

ということで今回は、この GitHub ページの活用方法をまとめてみたいと思います。

目次

  1. GitHub Pagesの概要
  2. かんたん、カッコいいGitHub Pagesの作り方
  3. GitHub Pagesプロジェクト・ギャラリー

続きを読む

脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術

GitHub README

README がキチッと書かれているプロジェクトって、どんなに小さくても立派に見えますよネ。

GitHub の場合、大抵はマークダウン記法で書かれた README.md とか README.markdown とかいう名前のファイルが、HTML に変換 (マークアップ) されて表示されていることはご存知でしょう。

マークダウン記法自体はとても簡単なのですが、GitHub では GitHub Flavored Markdown (略して GFM) という GitHub 用にアレンジされたマークダウン・エンジンが採用されていて、一般のマークダウン・エディタでチェックしてからコミットしても、意図通りの見た目にならないことが多々あります。私 (もちろん GitHub 初心者です!) の場合、README ファイルだけで10回以上もコミットしてしまいました。「マークアップ (レンダリング) を気にして書くマークダウン」 なんて、何ともナンセンスですよネ。

ということで、私の二の舞にならないよう、スマートに README ファイルをコミットする方法を共有してみたいと思います。
続きを読む

jsFiddleをとことん楽しむために知っておくと良い15の事

jsFiddle

fiddle」 には、「いじくる, もて遊ぶ」 とか 「暇・時間をつぶす」 などの意味があるようです。「jsFiddle」 はご存知の通り、HTML + CSS + Mootools、jQuery、Prototype、Dojo などの各種 JavaScript フレームワークで、遊んでみようというサイトです。日本には、「jsdo.it」 という、楽しいサイトもあるのですが、jsFiddle はまだαバージョン。次のβバージョンでは機能追加が数多く予定されており、個人的には期待大なのです。また jsdo.it にはない機能もありますので、必要に応じて使い分けるのが吉だと思います。

今回はそんな魅力が伝えられるよう、まとめてみたいと思います。
続きを読む