タグ

ブックマーク / tokkono.cute.coocan.jp (9)

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

    WordPress のプラグインを作って公開すべく、基礎からみっちり学習しています。 Codex 日語版 の プラグインの作成 の項には、外部リソースとして Ozh さんの2009年記事 「WordPress プラグインのコーディングでよくある10個の間違い」 が紹介されています。 Professional WordPress Plugin Development の著者でもある Ozh さんは、WordPress プラグイン・コンペティションの審査員を努めて来た関係上、今までに相当数のプラグインをレビューしているそうです。 私も色々なプラグインのコード・リーディングをしてみましたが、古いけど良質なこの記事が、必ずしも広く認知されてるわけではないことを感じています。 ということで、古くなっている部分を新しい情報で補いながら、この記事を翻訳で共有してみたいと思います。 タイトルにある通り、

  • GitHub Pagesホスティングサービス(ほぼ)完全活用ガイド | ゆっくりと…

    GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。 ただ、同種サービスの Google Code や Bitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクト

  • 脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…

    README がキチッと書かれているプロジェクトって、どんなに小さくても立派に見えますよネ。 GitHub の場合、大抵はマークダウン記法で書かれた README.md とか README.markdown とかいう名前のファイルが、HTML に変換 (マークアップ) されて表示されていることはご存知でしょう。 マークダウン記法自体はとても簡単なのですが、GitHub では GitHub Flavored Markdown (略して GFM) という GitHub 用にアレンジされたマークダウン・エンジンが採用されていて、一般のマークダウン・エディタでチェックしてからコミットしても、意図通りの見た目にならないことが多々あります。私 (もちろん GitHub 初心者です!) の場合、README ファイルだけで10回以上もコミットしてしまいました。「マークアップ (レンダリング) を気にして

  • 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 は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです

  • scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

    Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり/なしによる、ページの読み込み/表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が

  • WP MinifyでCSS/JavaScriptをまとめて軽量化、ページの応答速度を向上させる | ゆっくりと…

    2014年2月26日 緊急追記! 2013年7月23日、体の minify エンジン が脆弱性のため 2.1.7 に更新されています。記事で紹介している WP Minify 1.2.0 の最終更新日が2012年6月4日なので、体を差し替えてのご利用をお勧めします(サポート・フォーラムでも指摘されています が、改善されていません)。 以前 「WordPressテーマ “iNove” のYSlow的サイト最適化」で総合的にページの読み込みを軽量化する方法についてまとめましたが、今回は CSS/JavaScript ファイルの読み込み数が多い Arras Theme を例に、WordPress プラグインの WP Minify で複数のCSSJavascriptファイルを1つにまとめて軽量化する方法を紹介したいと思います。 まずはそのコアとなる Minify のおさらいですが、次のような

  • WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…

    WordPress の運営を始めて1年後にしてようやく(満を持して!)、キャッシュ・プラグインを使い始めています。とは言っても、最初は 「アレが速い」 とか 「コレが良い」 などといった記事に目移りして、何をどう使えばよく分かりませんでしたが、ここらで私が理解出来ていることをまとめてみたいと思います。 下図は、サイト閲覧者 ~ WordPress 間の主要なキャッシュ機構とそれをサポートするプラグインの関連です。サーバーのファイルシステムや、メモリ/ハードディスクなどの I/O レベルのキャッシュなどは割愛します。 図を見れば分かる通り、W3 Total Cache がその名の通り全てのキャッシュをカバーしています。さらにメモリ・キャッシュ、CDN へのアップロード機能、各種 PHP アクセラレータ (ACP、eAccelerator、XCache)、HTTP アクセラレータ (Varni

    deeeki
    deeeki 2010/11/25
    WordPress高速化
  • Syntax Highlighter 系プラグインの比較と高速化 | ゆっくりと…

    このサイトではHTMLCSSPHPなどのコードを紹介するため Syntax Highlighter をよく使います。この時気になるのがページの読み込み開始から表示の終了までにかかる時間ではないでしょうか? 勿論環境やプラグインの種類にもよりますが、コード部分に <pre> タグが適用された状態で一旦表示され、その後きれいに再描画されるのを目撃したことがあるでしょう。このような振る舞いは見た目にもあまり好ましくなく、サイトレスポンスの遅さを目立たせます。 そこで今回は WordPress.org に多数登録されている Syntax Highlighter 系プラグイン を、デザインや機能に加え、ページ要求から表示までのレスポンスという観点で比較・整理をしてみたいと思います。 そして最後に、ブラウザでのレンダリング速度を改善する提案をしてみたいと思います。 機能とスタイルによる分類 Syn

  • ソーシャルブックマーク登録ボタン用 WordPress プラグイン比較 | ゆっくりと…

    ソーシャルブックマークを組み込んでみようと思い立ち、せっかくだから比較をまとめてみました。 wp-hatena拡張版 作者 名称 表示のためのPHPコードを自分で記述します。index.phpとsingle.phpに記述すればよいでしょう。私はポストメタ情報の行に組み込んでいます。以下はindex.phpへの組み込み例です(クラス名 “postmeta” はテーマによって異なりますのであしからず)。現在10のSBMに対応しています。組み込まないSBMは#などでコメントアウトするか削除して使います。 <div class="postmeta"> ...(中略) <span style="margin-left:5px"> <?php if(isset($wph)) { $wph->adddelicious(); $wph->addLivedoor(); $wph->addYahoo(); $

  • 1