<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Screw-Axis &#187; Tips</title>
	<atom:link href="http://screw-axis.com/category/tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://screw-axis.com</link>
	<description>flexible, elastic and principled.</description>
	<lastBuildDate>Thu, 08 Apr 2010 01:00:18 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>[Prezi] 日本語マニュアル公開</title>
		<link>http://screw-axis.com/2010/04/08/prezi-manual/</link>
		<comments>http://screw-axis.com/2010/04/08/prezi-manual/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 01:00:18 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Prezi]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=813</guid>
		<description><![CDATA[最近使う機会の増えているプレゼン作成ツール Prezi のチュートリアル(Preziアカデミー)とマニュアルを、公式に許可を得て日本語化してみました。
Prezi日本語マニュアル
Preziは、無料で使える新しいタイプの [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p><img src="http://screw-axis.com/wp-content/uploads/2010/04/prezi.jpg" alt="" title="Prezi" width="240" height="160" class="alignright size-full wp-image-814" />最近使う機会の増えているプレゼン作成ツール Prezi のチュートリアル(Preziアカデミー)とマニュアルを、公式に許可を得て日本語化してみました。</p>
<p><a href="http://dev.screw-axis.com/doc/prezi/">Prezi日本語マニュアル</a></p>
<p>Preziは、無料で使える新しいタイプのプレゼン作成ツールです。PowerPointとは発想が異なり、プレゼン全体を一枚の大きな模造紙のように見立てて、その中を移動して行くようなイメージです。<br />
<span id="more-813"></span><br />
最初に<a href="http://delicious.com/semooh/presentation">このツールを見た</a>のが2009年の1月でした。自分と仕事をしたことのある人は分かると思うのですが、ホワイトボードの前に陣取って全体像を描きながら説明するのがスタイルの自分には、非常にシックリくるツールです。当時は日本語が使えずに利用機会は無かったのですが、その後、限定的ではありますが日本語も使えるようになったので、徐々に利用が増えていきました。</p>
<p>単に「ちょっとカッコイイ感じのプレゼンが作れるツール」ではなく、ツールが思考の方を引っ張る好例ではないかと思っています。今自分はフリーで仕事をしていますが、以前のようにメンバーが居る立場であれば、ロジカルに物事を考える練習としてでも使わせてみたいななどと考えながらドキュメントを作りました。</p>
<p>興味を持ったら是非、ちょっと触ってあきらめずに、一本プレゼンを作ってみて下さい。<br />
きっと、プレゼンの組み立てそのものが変わると思います。</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2010/04/08/prezi-manual/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Chrome Extension] QuickSilver風の拡張機能</title>
		<link>http://screw-axis.com/2010/01/29/chrome-extension-mandlin/</link>
		<comments>http://screw-axis.com/2010/01/29/chrome-extension-mandlin/#comments</comments>
		<pubDate>Thu, 28 Jan 2010 15:10:42 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Chrome Extension]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[mandlin]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=781</guid>
		<description><![CDATA[ギャラリーにうまくアップロード出来なかった拡張機能ですが、グループの方で教えていただいたおかげで解決しました。messages.jsonをBOM付きUTF-8で保存していたためということで、大変助かりました。というわけで [...]


Related posts:<ol><li><a href='http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/' rel='bookmark' title='Permanent Link: [Chrome Extension] APIリファレンスの日本語訳'>[Chrome Extension] APIリファレンスの日本語訳</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://screw-axis.com/wp-content/uploads/2010/01/mandlin.jpg"><img src="http://screw-axis.com/wp-content/uploads/2010/01/mandlin.jpg" alt="" title="mandlin" width="240" height="160" class="alignright size-full wp-image-786" style="margin-left: 10px;" /></a>ギャラリーにうまく<a href="http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/">アップロード出来なかった</a>拡張機能ですが、<a href="http://groups.google.com/group/chromium-extensions-japan/browse_thread/thread/2bee59238ae0d034?hl=ja">グループの方で教えていただいた</a>おかげで解決しました。messages.jsonをBOM付きUTF-8で保存していたためということで、大変助かりました。というわけで、ようやくの(ほぼ)処女作です。</p>
<p><a href="http://dev.screw-axis.com/doc/mandlin/">Mandlin &#8211; QuickSilver風 ウェブナビゲーションツール</a></p>
<p><span id="more-781"></span><br />
詳しい使い方はリンク先を見ていただくとして、YubNub+QuickSilverといった風の、様々な検索エンジンをキーボードベースで操ることのできるツールです。</p>
<p>自分が欲しくて作ったものなので使い勝手にはそれなりに満足していますが、なにしろ呼び出しにマウスを持ってクリックしなければいけないのが、なんとも残念な点で。せめてポップアップを開くAPIがあればショートカットキーもどきも出来なくは無いのですが&#8230; ポップアップではなく、コンテント・スクリプトでウインドウから描画してタブのコンテンツ内で表示させることも考えましたが、他人の家にあがりこむような感じにちょっと抵抗があったので、とりあえず由としておきます。</p>
<p>作成にあたって気づいた点など、徐々に <a href="http://dev.screw-axis.com/doc/chrome_extensions/">リファレンス</a> の方で更新していければと思っています。</p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/' rel='bookmark' title='Permanent Link: [Chrome Extension] APIリファレンスの日本語訳'>[Chrome Extension] APIリファレンスの日本語訳</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2010/01/29/chrome-extension-mandlin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Chrome Extension] APIリファレンスの日本語訳</title>
		<link>http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/</link>
		<comments>http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/#comments</comments>
		<pubDate>Thu, 28 Jan 2010 04:28:38 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Chrome Extension]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=771</guid>
		<description><![CDATA[年明けからGoogle Chromeのエクステンション作りを始めてみたのですが、非常に手軽で、よく言われるようにFirefoxで言うところの &#8220;エクステンション&#8221; に対応するものではなく &#82 [...]


Related posts:<ol><li><a href='http://screw-axis.com/2010/01/29/chrome-extension-mandlin/' rel='bookmark' title='Permanent Link: [Chrome Extension] QuickSilver風の拡張機能'>[Chrome Extension] QuickSilver風の拡張機能</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://screw-axis.com/wp-content/uploads/2010/01/chrome.jpg"><img class="alignright size-full wp-image-772" title="Google Chrome" src="http://screw-axis.com/wp-content/uploads/2010/01/chrome.jpg" alt="" width="240" height="160" style="margin-left: 10px;" /></a>年明けからGoogle Chromeのエクステンション作りを始めてみたのですが、非常に手軽で、よく言われるようにFirefoxで言うところの &#8220;エクステンション&#8221; に対応するものではなく &#8220;Jetpack&#8221; だなという印象です。</p>
<p>今回、勉強がてら公式のAPIドキュメントを日本語訳してみたので、公開しておきます。</p>
<p><a href="http://dev.screw-axis.com/doc/chrome_extensions/">Google Chrome Extension API 日本語リファレンス</a><br />
<span id="more-771"></span><br />
馴染みのあるWeb技術ばかりで出来ているので、チュートリアルに沿ってひとつ作ってみれば、簡単に理解できました。あとはガイドを斜め読みしながら出来ることをおさえておき、作りながら必要にあわせてAPIリファレンスをひいてみる感じで。</p>
<p>まだ出来ることも限られていますが、プロセスが分かれていることもあり軽量で快適です。なかなかFFから移行できずにいたのが、おかげで最近はすっかりChromeメインで使っています。</p>
<p>というわけで幾つか作ってみたのですが、どうやら <a href="http://groups.google.co.jp/group/chromium-extensions/browse_thread/thread/ee763c880e4c48c8">ギャラリーページのバグ</a> でアップロードできず&#8230; いずれ問題が解決したら公開しようと思います。</p>
<p>作成途中で気づいたTipsなどもあるので、オリジナルのコンテンツも追加していく予定です。</p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2010/01/29/chrome-extension-mandlin/' rel='bookmark' title='Permanent Link: [Chrome Extension] QuickSilver風の拡張機能'>[Chrome Extension] QuickSilver風の拡張機能</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2010/01/28/chrome-extension-api-reference-japanese/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[Twitter] 呟きが検索結果に表示されなくなったら</title>
		<link>http://screw-axis.com/2009/12/08/twitter-spam-suspicious/</link>
		<comments>http://screw-axis.com/2009/12/08/twitter-spam-suspicious/#comments</comments>
		<pubDate>Tue, 08 Dec 2009 03:33:27 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=729</guid>
		<description><![CDATA[昨日、フォローいただいている人から「あなたの発言が検索結果に表示されないけど、どうして?」と指摘いただきまして。
Web学会の最中だったんですが、ちょっと試してみると確かにひっかからない。自分の発言はヒットしない作りなの [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p><img src="http://screw-axis.com/wp-content/uploads/2009/12/alone.jpg" alt="alone" title="alone" width="240" height="178" class="alignright size-full wp-image-730" style="margin-left: 5px;" />昨日、フォローいただいている人から「<a href="http://twitter.com/nao58">あなたの発言</a>が検索結果に表示されないけど、どうして?」と指摘いただきまして。<br />
Web学会の最中だったんですが、ちょっと試してみると確かにひっかからない。自分の発言はヒットしない作りなのかと、ログインしていないブラウザから試しても同様。それ以上調べている時間も無かったので、サポートにメールしてみました。<br />
その日の夕方、返ってきた答えは「ハッシュタグを使いすぎているから」とのこと。ちょっと驚きでした。<br />
<span id="more-729"></span><br />
要するにスパム判定の一種に抵触したようなのですが、<a href="http://jptwitterhelp.blogspot.com/search/label/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F">ヘルプ</a>を見てみると、このように記述されています。</p>
<blockquote><p>商業的利用やプロモーションのためにツイッターを利用する行為は許可されています。興味のあるユーザーとの間に、互いに価値のある関係を作るためにツイッターを利用する場合などです。ところが、自分のアカウントやサイトなどに注意を引くためだけに、ユーザーをフォローする行為はスパムとして扱われる可能性があります。まったく同じものを宣伝、または販売促進するためにたくさんのアカウントを登録することもスパムとして扱われる可能性があります。また本物ではない＠付きのつぶやきを投稿することや、検索結果に表示するためだけに投稿することもスパムとして扱われる可能性があります。さらに、つぶやきに関係のないリンクを貼ったり大勢のユーザーがあなたをブロックした場合などもスパムとして扱われる可能性があります。</p></blockquote>
<p>ここにはハッシュタグに関する記述はありません。</p>
<p>もう一息、英語の方のヘルプフォーラムを調べてみたところ、<a href="http://help.twitter.com/forums/10713/entries/42646">それらしいもの</a>を見つけました。これによると、次のような行為がイエローカードに当たるようです。</p>
<ul>
<li>同じ、或いは似たような呟きを繰り返す。</li>
<li>同じ、或いは似たようなリンクを繰り返し貼る。</li>
<li>同じ話題の単語、或いはハッシュタグを乱用する。</li>
<li>自動化された呟きや返信を送る。</li>
<li>キーワードを基にした似たようなメッセージを送るボットやアプリケーションを使う。</li>
<li>複数のアカウントから似たようなメッセージを投稿する。</li>
<li>頻繁にフォロー/フォロー解除を繰り返す。</li>
</ul>
<p>自分はハッキリは言われませんでしたが、ラグビー関連の話題を持ち出す際に慣例として使っていた #rugby が「同じハッシュタグの乱用」に当たったのではないかと思います。興味の無い人が読まなくて良いように呟きの先頭につけていたのですが、今後は止めにします。(アカウント分けた方が良いのかな&#8230;)<br />
なお、「状況を改善して欲しい」とお願いしたところ、今朝から検索にヒットするようになりました。</p>
<p>どうやらTwitter検索八分は、完全にスパムアカウントとして凍結する前の「執行猶予」のようなもののようです。<br />
「別に検索されなくてもいいや」としていると、場合によってはアカウント自体を停止されてしまうかもしれません。<br />
気になる人は、エゴサーチで自分の発言がヒットするか試してみることをお勧めします。</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/12/08/twitter-spam-suspicious/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[js] Ajax通信がF5で更新されない場合</title>
		<link>http://screw-axis.com/2009/08/12/ajax_xhr_f5/</link>
		<comments>http://screw-axis.com/2009/08/12/ajax_xhr_f5/#comments</comments>
		<pubDate>Wed, 12 Aug 2009 12:40:02 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Cache]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=689</guid>
		<description><![CDATA[画像やスクリプトなどの外部ファイル取り込みを高速化するために、キャッシュ制御は不可欠です。
しかし、設定をうっかりすると(あるいは、しないと)、キャッシュが強すぎて全くデータが更新されないような場合があります。
今回のキ [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm1.static.flickr.com/164/435720036_61f24af0d8_m.jpg" alt="fortuneteller" title="fortuneteller" width="240" height="178" class="alignright size-full" style="margin-left: 5px;" />画像やスクリプトなどの外部ファイル取り込みを高速化するために、<a href="/2009/06/06/web-google-page-speed%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%ab%98%e9%80%9f%e5%8c%961/">キャッシュ制御</a>は不可欠です。<br />
しかし、設定をうっかりすると(あるいは、しないと)、キャッシュが強すぎて全くデータが更新されないような場合があります。<br />
今回のキーワードは、「IE」と「F5キー」、そして「XMLHttpRequest」。<br />
「<a href="http://www.amazon.co.jp/gp/product/487311361X?ie=UTF8&#038;tag=paiitbla-22&#038;linkCode=as2&#038;camp=247&#038;creative=1211&#038;creativeASIN=487311361X">ハイパフォーマンスWebサイト</a>」の著者であるStevesSuders氏のblogで紹介された「<a href="http://www.stevesouders.com/blog/2009/08/11/f5-and-xhr-deep-dive/">F5 and XHR deep dive</a>」を検証してみます。<br />
<span id="more-689"></span></p>
<h5>「F5」でXHR通信結果が更新されない</h5>
<p>通常、キャッシュが設定された外部ファイル取り込みは、その期限が来るまでは再通信されません。しかしブラウザをF5やCtrl+rなどで明示的にリロードした場合はその限りではなく、ファイルの再取得が行われるのが一般的です。<br />
しかし、キャッシュ指定の条件によっては、XMLHttpRequestを用いた、いわゆるAjax通信時が発生しなくなってしまうと<a href="http://blog.httpwatch.com/2009/08/07/ajax-caching-two-important-facts/comment-page-1/">HttpWatchの記事</a>で伝えられました。<br />
これを検証するために、簡単なプログラムを作ってみます。</p>
<h5>検証プログラムの説明</h5>
<p>まずは、取り込まれるjsファイルを用意します。<br />
サーバサイドで毎回ジェネレートされる、現在時刻を指定された要素に出力するだけのスクリプトです。</p>
<p><a href="http://dev.screw-axis.com/sandbox/f5_cache/js.php?id=hoge" target="_blank">検証用スクリプト</a></p>
<p>呼び出す度に日時が更新されることが分かると思います。</p>
<p>そして必要なのはキャッシュコントロール。<br />
パケット監視などが出来る人は見ていただけばわかるのですが、パラメータに応じて次のようなヘッダを付与します。</p>
<dl>
<dt>cache=1</dt>
<dd>キャッシュ有効。Expiresを30日後にし、Cache-Controlのmax-ageも30日間に設定します。</dd>
<dt>cache=-1</dt>
<dd>キャッシュ無効。Expiresを30日前にし、Cache-Controlのmax-ageは0とします。</dd>
<dt>cache=0</dt>
<dd>キャッシュ指定無し。ExpireもCache-Controlも指定しません。</dd>
</dl>
<p>ついでに、画像も用意してみました。同様にサーバサイドで現在時刻の画像を作成して返します。キャッシュ制御も同じです。</p>
<p><a href="http://dev.screw-axis.com/sandbox/f5_cache/img.php">検証用画像</a></p>
<p>これを、テスト用のHTMLで取り込みます。<br />
スクリプトは、scriptタグによる単純な取り込みと、XMLHttpRequestによるAjax通信の2種類。画像はimgタグで指定しています。<br />
前述の3種類のキャッシュ制御を行うページは、次の通りです。</p>
<ul>
<li><a href="http://dev.screw-axis.com/sandbox/f5_cache/test.php?cache=-1">キャッシュ無効</a></li>
<li><a href="http://dev.screw-axis.com/sandbox/f5_cache/test.php?cache=1">キャッシュ有効</a></li>
<li><a href="http://dev.screw-axis.com/sandbox/f5_cache/test.php?cache=0">キャッシュ指定無し</a></li>
</ul>
<p>これで、ページを開いた時の時刻(正確には、サーバがリクエストを受け付けた時刻)が表示されるはずです。リロードや再訪問時に、キャッシュが効いていれば日時はキャッシュされた時のままになります。</p>
<p>順に見ていきましょう。</p>
<h5>キャッシュ無効の場合</h5>
<table class="grid" cellspacing="0" style="width: 400px;">
<tr>
<th></th>
<th colspan="3">通常遷移</th>
<th colspan="3">F5リロード</th>
</tr>
<tr>
<th></th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
</tr>
<tr>
<th>Chrome2</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.0</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.5</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Opera9</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Opera10</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>IE6</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>IE7</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>IE8</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Safari3</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
</table>
<p>いずれの場合も期待通り、キャッシュは全くききませんでした。<br />
ページ遷移を行った場合も、F5でリロードした場合も、全て最新に更新されます。</p>
<h5>キャッシュ有効の場合</h5>
<table class="grid" cellspacing="0" style="width: 400px;">
<tr>
<th></th>
<th colspan="3">通常遷移</th>
<th colspan="3">F5リロード</th>
</tr>
<tr>
<th></th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
</tr>
<tr>
<th>Chrome2</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.0</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.5</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Opera9</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>Opera10</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>IE6</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>IE7</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>IE8</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>Safari3</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
</table>
<p>動作が分かれました。<br />
通常にページ遷移を行った場合は、Opera10を除き一律にキャッシュが使われる期待通りの動作です。(Opera10はまだbetaのため、最終的にどういった仕様になるかは不明です)<br />
F5などでリロードを行うと、画像やscript要素で取り込んだものは、いずれも再読み込みされます。<br />
しかしXMLHttpRequestでの通信は、ChromeやFFでは再通信が行われるのに対し、IEとOpera9ではそのままキャッシュが有効になってしまいました。これはCtrl+F5のようなスーパーリロードを用いても、変わりません。</p>
<h5>キャッシュ指定無しの場合</h5>
<table class="grid" cellspacing="0" style="width: 400px;">
<tr>
<th></th>
<th colspan="3">通常遷移</th>
<th colspan="3">F5リロード</th>
</tr>
<tr>
<th></th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
<th>Image</th>
<th>Script</th>
<th>XHR</th>
</tr>
<tr>
<th>Chrome2</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.0</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>FF3.5</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Opera9</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
<tr>
<th>Opera10</th>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>IE6</th>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>IE7</th>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>IE8</th>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
<td>更新</td>
<td>更新</td>
<td>キャッシュ</td>
</tr>
<tr>
<th>Safari3</th>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
<td>更新</td>
</tr>
</table>
<p>かなり無軌道になっています。Operaに至っては、通常のページ遷移でも動作に違いが出てしまいました。</p>
<h5>ETagについて</h5>
<p>StevesSuders氏の検証ではETagについても含まれています。<br />
今回は検証結果を見やすくするために、レスポンス304については確認していません。<br />
氏のページによれば、Safari4はIf-Modified-Sinceを送らずに常に再送信されてしまうようです。</p>
<h5>まとめ</h5>
<ol>
<li>Expiresを指定しないことは、動作を全く制御しないのと同じこと。可能な限りきちんと、用途にあわせてキャッシュの制御を行うべきです。</li>
<li>Ajax通信でキャッシュをされたくない場合(多くの場合、この用途でしょう)、Expiresを過去に指定してキャッシュを無効にしましょう。</li>
<li>或いは、通信にエポックタイムのようなユニークなIDをパラメータに付与し、キャッシュできないようにするのも良い方法です。</li>
<li>Ajax通信をキャッシュしたい場合、Expiresをキャッシュしたい期間、きちんと指定しましょう。ただし、その際にはF5でリロードしても更新されないブラウザがいることを知っておきましょう。</li>
<li>Operaを対応ブラウザにするならば、バージョン10がどのような仕様になるか注意しておきましょう。</li>
</ol>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/08/12/ajax_xhr_f5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[PHP] パフォーマンス向上の心得</title>
		<link>http://screw-axis.com/2009/07/17/php-performance-hints/</link>
		<comments>http://screw-axis.com/2009/07/17/php-performance-hints/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 08:54:32 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=673</guid>
		<description><![CDATA[先だってのPHP高速化に関するポストの導入で、GoogleによるPHPのパフォーマンスTipsが物議をかもしている件を紹介しました。
先日、最初に疑問を投げかけたZendの技術者であるStanislav Malyshev [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full" style="margin-left: 5px;" title="hint" src="http://farm1.static.flickr.com/30/97787113_99d18c082f_m.jpg" alt="hint" width="240" height="160" />先だっての<a href="/2009/07/04/php-performance-superstitions1-reference/">PHP高速化に関するポスト</a>の導入で、<a href="http://code.google.com/speed/articles/optimizing-php.html">GoogleによるPHPのパフォーマンスTips</a>が物議をかもしている件を紹介しました。<br />
先日、最初に疑問を投げかけたZendの技術者であるStanislav Malyshev氏が、自身のblog&#8221;<a href="http://php100.wordpress.com/">PHP 10.0 Blog</a>&#8220;上で、前述のGoogleのそれに対するアンチテーゼとして&#8221;<a href="http://php100.wordpress.com/2009/07/13/php-performance/">More on PHP performance</a>&#8220;という記事を書いています。つい小手先のシンタックスなどを期待してしまいがちな高速化Tipsですが、「初心者向けにまず」としながら、極めて本質的なパフォーマンスチューニング方法をまとめています。<br />
とても良い記事だと思ったので、タイトルに沿ってまとめてみます。(翻訳ではないので注意して下さい)<br />
<span id="more-673"></span></p>
<h5>Bytecode cache</h5>
<p><em>バイトコードキャッシュを用いずしてパフォーマンスを語る無かれ(超意訳)</em></p>
<blockquote><p>If you care about performance and don’t use bytecode cache then you don’t really care about performance.</p></blockquote>
<p>というほど、まず重要としているのがこの部分。<br />
まずは(Zend社員としては当然) <a href="http://www.zend.com/en/community/zend-server-ce">Zend Server</a>の導入検討を奨めていますが、自分でPHPをコンパイルできる環境であるならば<a href="http://php.net/apc">APC</a>などを使えば良いでしょう。ちなみに、このblogを動かしているPHPもAPCを使っています。GUIの管理画面もあってステータス管理も簡単。キャッシュヒット率99.9%。プログラム中からmemcache的に変数を格納したりも出来るし、非常にありがたいモジュールです。</p>
<h5>Profiling</h5>
<p><em>最適化する前にプロファイルを!(意訳)</em></p>
<blockquote><p>Profile you code before you start optimizing it!</p></blockquote>
<p>どの関数がボトルネックになっているのか、ちゃんと把握してからチューニングしましょうということで。そのためのツールとして<a href="http://www.zend.com/en/products/studio/">Zend Studio/Debugger</a>や<a href="http://xdebug.org/">Xdebug</a>が挙げられています。</p>
<h5>Caching</h5>
<p><em>殆どのPHPは&#8221;shared nothing&#8221;でインストールされているわけで、リクエスト処理の終了と同時に作業内容は全部飛んでしまいます。これは処理の複雑さを回避するなどのメリットは大きいのですが、パフォーマンス的にはデメリットですよね。繰り返し処理はキャッシュに入れて、いいとこどりにしちゃいましょう。(意訳)</em></p>
<blockquote><p>Most PHP installations run in “shared nothing” mode where as soon as the request processing ends, all the data associated with the request is gone. It has some advantages, but also one big disadvantage – you can not preserve results of repeated operations. That is, unless you use caching.</p></blockquote>
<p>実際、DBへのアクセスや複雑な計算のような大きな処理はもちろん、XMLによる設定ファイルをパースしておくような簡易な処理でも、アクセス毎に発生するようであればDisk I/Oとあわせてトータルでかなりの軽量化になります。<br />
キャッシュ先としては <a href="http://jp2.php.net/manual/ja/book.memcached.php">memcached</a> や前述の APC などが挙げられます。用途によってはHDDでも良いでしょうが、基本的には高速なメモリでのキャッシュを考えるべきです。ポスト元では他にも、Zend Serverに含まれた<a href="http://framework.zend.com/manual/ja/zend.cache.html">Zend Frameworkによるキャッシュ機能</a>を奨めています。</p>
<h5>Optimize your data</h5>
<p><em>通常、PHPアプリケーションで最もコストのかかる処理は、データベースやファイルシステムのような外部データや、ネットワークにアクセスすることです。クエリーを減らすこと、データベース構造の改良、ファイルシステムへのアクセス減、データ取得のためのサービス呼び出しを複数回行わずに1度でまとめるなど、これらの最適化に注力しましょう。更に言えば、システムコールトレーサ(Unixであれば strace、Windowsであれば Process Explorer など)などを使い、スクリプトが呼び出しているシステムコールを減らせないかどうか検討しましょう。それらの全てを除くことは不可能だと思いますが、いくつかは検討の余地があるでしょう。(意訳)</em></p>
<blockquote><p>Usually the most expensive places of the PHP application are where it accesses external data – namely, database or filesystem or network. Look hard into optimizing that – reduce number of queries, improve database structure, reduce filesystem accesses, try to bundle data to make one service call instead of several, etc. For more advanced in-depth look, use tools like strace (Unix) and Process Explorer (Windows) to look into system calls your script produces and think about ways to eliminate some of  them. You would not be able to eliminate all of them but each of them is a worthy target.</p></blockquote>
<p>ほぼ、そのまま。<br />
下手にPHPでの処理をいじるより、RDBのチューニングを行った方が遥かに効果的なことは、非常によくあります。また、先述のキャッシュを使うような工夫は、ここにも繋がります。</p>
<h5>Don&#8217;t try to outsmart the engine</h5>
<p><em>世の中には&#8221;Tips&#8221;と呼ばれる「ああしたほうが速い」「こうすると遅い」というような話題があります。しかし特にビギナーのうちは、そういったものに惑わされない方がいいでしょう。十中八九は何も変わらず、残った1つも手持ちのコードに容易にあてることは出来ないか、費やした時間ほどの価値は無いというのがオチでしょう。確かにopcodesを軽くしたり、lookupsを減らしたりするような手法はありますが、他の全ての条件が整っていなければ無意味です。加えて、こういったアドバイスのいくつかは、寧ろコードを遅くしたり、堅牢性やセキュリティを失わせてしまったりします。特に初心者は、こういったトリッキーな手法に手を出さない方が良いでしょう。(意訳)</em></p>
<blockquote><p>There are a lot of “tips” floating around about which constructs in PHP are faster or slower than others. I think you can safely ignore all of these tips, especially if you’re a beginner. Odd are, 9 cases out of 10 they won’t give you any improvement at all, and in the remaining one case it will be either not applicable in your code or not worth the time spent on it. Yes, there are ways to save couple of opcodes and remove couple of lookups here and there – but unless you’ve already done with all of the previous steps it is not worth it. And some of the advice out there will actually make you code slower, less robust and less secure without you even noticing. So I think for the beginners is better to stay away from trying to outsmart the engine altogether.</p></blockquote>
<p>この辺が恐らく、Googleの(そして、その他「高速化Tips」と銘打つほぼ全ての)アドバイスに対する反発心に繋がっているのでは。<br />
王道をきちんとおさえるのが近道というのは、何にでも言えることですよね。</p>
<h5>Benchmark in real life</h5>
<p><em>ここまでに話題に挙げたアドバイスの多くは、証拠としてベンチマークを使っています。問題は、これらのベンチマークはいつも、ほんの数行の部分的なコードで書かれていることです。しかしながら、実際に実行されなければいけないコードは大きなアプリケーションで、そのような一行コードではありません。(意訳)</em></p>
<blockquote><p>Many of the advices I mentioned above have benchmarks as a proof. The problem is these benchmarks always test only a short piece of code. However, you would not be running that one-liner – you would be running the whole big application.</p></blockquote>
<p>これに続けて筆者は、「勝ち馬を予想するために真空状態でのモデルを使う科学者のジョーク」を引き合いにだしています。<br />
確かに条件が複合的に絡む場合は多く、数行のベンチマーク結果を妄信することを危惧する必要はあります。しかし、現実に「A/Bどちらの方法が速いのか?」と確かめるには、むしろ他の要因を取り払って調べる必要がある場合もあるように思います。ここに関しては、「最終的なパフォーマンスチューニングは、実際のアプリケーションを用いるべき」というアドバイスと捉えれば良いのではないでしょうか。</p>
<h5>Leverage the extensions</h5>
<p><em>あまりにも自明のことを言うようですが、それでもPHP extensionで可能となる機能を重複して作っているようなコードを数多く見かけます。PHPには多くの関数があるので、誰か他の人がやっていそうなものを作る前に、マニュアルをチェックしてみて下さい。DOM/SimpleXML拡張も、JSONパーサも、SOAP送受信のための拡張なども、利用することができます。serialize/deserialize関数が使えないのでなければ、独自のものを作ったりするのは止めましょう。<br />
もしパフォーマンスが非常に重要で、あなたがCプログラムを書けるなら(PHP初心者が、全てにおいて初心者だということを意味しませんよね)、独自のPHPエクステンションを作ることを検討してみてください。それは、それほど難しくはありません。(意訳)</em></p>
<blockquote><p>That seems too obvious, but I have seen a lot of code that duplicates functions available in some PHP extension. There are a lot of functions in PHP and if you do something that others may have done before, check in the manual. You have DOM/SimpleXML extensions for XML, JSON extension for JSON, SOAP extension for doing SOAP, etc., etc. Do not create custom serialization/deserialization if serialize()/deserialize() would work for you.<br />
If you have some very performance-sensitive bit of script and you can do C programming (beginner in PHP doesn’t mean beginner in everything  , consider even making your own extension, it’s not that hard.</p></blockquote>
<h5>Avoid extra notices/errors/etc.</h5>
<p><em>PHPでエラーを抑止することが大変だったとしても、noticeやstrict notice、warningなどが出ないコードを書くよう挑戦してみて下さい。その際、全てのエラーが出力されるように設定したいと思いますが、実運用環境ではエラー表示を決してしないようにしましょう。恥を大っぴらにするだけですから。(意訳)</em></p>
<blockquote><p>Even suppressed errors have cost in PHP, so try and write your code so it would not produce notices, strict notices, warnings, etc. You may want to enable logging of all errors to examine that. Never enable displaying errors in production though – it will only lead to a major public embarrassment.</p></blockquote>
<p>変数の未定義や配列に添え字が無い場合など、noticeエラーを出しておくことは、タイポなどの単純で気付きにくいバグを回避するのに有効です。ちゃんと無くしましょう&#8230;と心から思うのですが、一方で「それってスクリプト言語の手軽さ」を失うことでもあるのかなと考えてしまいます。<br />
いっそ変数型宣言必須の&#8221;strict mode&#8221;みたいなのが欲しいような。</p>
<h5>Use php.ini-production as a start</h5>
<p>もしphp.iniの設定をするのに、PHPのソースコードに含まれる php.ini-production を参考にしましょう。include pathなど幾つかの項目は変更が必要でしょうが、土台にするには最適です。(意訳)<br />
<em>If you need a set of php.ini settings which would not hurt your performance and not break anything, look into php.ini-production in PHP source. You may need to change a couple of details (e.g. include path) but it’s a good starting point.</em><br />
<a href="http://www.php.net/manual/ja/migration53.ini.php">マニュアル</a>によると、PHP5.3.0からはphp.ini-development(開発環境用)、php.ini-production(運用環境用)の2つが同梱されているようです。自分はまだPHP5.3を落としていませんが、以前のrecommendedなどとどの辺が違うのか、確認してみようと思います。</p>
<h5>Use big realpath cache</h5>
<p><em>リアルパス・キャッシュは、ファイル名や相対パスからユニークなフルパスを取得する際に非常に有用です。初期設定ではこのキャッシュサイズは16kですが、多くの長いパス名のファイルを扱うのであれば、この値を増やすのが良いでしょう。これはディスクアクセスという重い処理を軽減します。(意訳)</em></p>
<blockquote><p>Realpath cache is very useful for the engine when it tries to find the unique full name of the file from just filename or relative path. By default, it’s 16K but if you have a lot of files with long pathes, it’s better to increase the size – it would save the expensive disk accesses.</p></blockquote>
<p>この機能はPHP5.1から実装されたものですが、ちょっと大きい規模のアプリケーションになると、16kという値はすぐに超えてしまうかもという話は、よく聞きます。よほどメモリに困窮していなければ(そんな場合は既にパフォーマンスを云々言っていられないと思いますが)、64kくらい確保してしまうのが良いようです。</p>
<p>最後に、次のように締められています。</p>
<p><em>ここに挙げた以外にも、もっと多くのことが挙げられると思いますが、既にちょっと長くなりすぎました。一旦ここで終わりますが、あなたの考えをコメント欄で追加してくれると嬉しいです。</em></p>
<blockquote><p>There are probably more things that could be said, but this post is pretty long already, so I will end it here and you are welcome to add your opinion in comments. </p></blockquote>
<p>同じ言葉で、終わりたいと思います。</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/07/17/php-performance-hints/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[js] 外部ファイルロードを便利、高速に</title>
		<link>http://screw-axis.com/2009/07/15/js-degrading-script-tags/</link>
		<comments>http://screw-axis.com/2009/07/15/js-degrading-script-tags/#comments</comments>
		<pubDate>Wed, 15 Jul 2009 05:48:53 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=667</guid>
		<description><![CDATA[2週間ほど前に入手したSteve Sounders氏の新刊「Even Faster Web Sites」ですが、ようやく本格的に読み始めました。
前の「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」 [...]


Related posts:<ol><li><a href='http://screw-axis.com/2009/05/17/javascript%e3%81%aenull%e3%81%a8undefined%e3%81%a8false%e3%81%a80%e3%81%a8%e7%a9%ba%e6%96%87%e5%ad%97%e3%81%a8/' rel='bookmark' title='Permanent Link: [Javascript] nullとundefinedとfalseと0と空文字と'>[Javascript] nullとundefinedとfalseと0と空文字と</a></li>
<li><a href='http://screw-axis.com/2009/06/11/web-google-page-speed%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%ab%98%e9%80%9f%e5%8c%963/' rel='bookmark' title='Permanent Link: [Web] Google Page Speedでサイトを高速化(3)'>[Web] Google Page Speedでサイトを高速化(3)</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm1.static.flickr.com/170/467072434_c8c1e1468b_m.jpg" alt="tricky" title="tricky" width="240" height="160" class="alignright size-full" style="margin-left: 5px;" />2週間ほど前に入手したSteve Sounders氏の新刊「<a href="http://www.amazon.co.jp/gp/product/0596522304?ie=UTF8&#038;tag=paiitbla-22&#038;linkCode=xm2&#038;camp=247&#038;creativeASIN=0596522304">Even Faster Web Sites</a>」ですが、ようやく本格的に読み始めました。<br />
前の「<a href="http://www.amazon.co.jp/gp/product/487311361X?ie=UTF8&#038;tag=paiitbla-22&#038;linkCode=as2&#038;camp=247&#038;creative=1211&#038;creativeASIN=487311361X">ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール</a>」は発刊前にネット上で読んでいたのでスルーしてしまいましたが、今回はちゃんと購入。前のものが基本をしっかりと抑えた王道的内容だったのに比べて、比較的トリッキーなテクニックが増えているように思います。</p>
<p>今回は本書の5章から「へー」と思った、外部スクリプトを他のファイルのロードを妨げることなく取得し、なおかつそのファイルのロードが終わった際に後続のスクリプトが実行されるための方法(複雑)を確認してみます。<br />
<span id="more-667"></span></p>
<h5>SCRIPTタグを減らすテクニック</h5>
<p>この技法はまず、jQueryの作者であるJohn Resig氏のblogポスト <a href="http://ejohn.org/blog/degrading-script-tags/">Degrading Script Tags</a> に端を発します。<br />
まず、次のコードを見て下さい。</p>
<pre name="code" class="html">
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
  jQuery(document).ready(function($){
    $("div").text("loaded!");
  });
&lt;/script&gt;
</pre>
<p>これを、次のように書けたら幸せだよね、という話。</p>
<pre name="code" class="html">
&lt;script src="jquery.js"&gt;&lt;/script&gt;
  jQuery("div").text("loaded!");
&lt;/script&gt;
</pre>
<p>これなら、SCRIPTタグが少なくて済むし、コードの依存関係もハッキリする。srcに記述されたファイルのロードが失敗したら中身のコードが実行されない形なら、万が一の場合にもスクリプトエラーにならずに済むと。</p>
<p>次のようなコードを外部ファイル(この例で言えばjquery.js)の最後に加えれば、これが実装できます。</p>
<pre name="code" class="javascript">
(function(){
var scripts = document.getElementsByTagName("script");
var curScript = scripts[ scripts.length - 1 ];

if ( curScript.executed )
  return;

// ... jQuery ...

curScript.executed = true;
var script = curScript.innerHTML;
if ( script ) {
  jQuery(document).ready(function(){
    jQuery.globalEval( script );
  });
}
})();
</pre>
<p>もちろんこれは、jQuery以外のライブラリでも適用可能な、非常にクールな手法です。<br />
正直なところ、自分は最初のこのポストが投稿された際にはそれほど感銘を受けなかった記憶があります。それは「スクリプトのロードと実行が連動する」点に私が着目できていなかったからで、単にscriptタグを減らせるシンタックス程度の認識しかありませんでした。<br />
今回改めて読み返してみて、直観的な良い記述方法だなと思いました。</p>
<h5>他ファイルのロードブロック問題</h5>
<p>見たように素晴らしいテクニックなのですが、この方法にもまだパフォーマンスの観点から改善の余地があるとSteve Sounders氏は指摘しています。<br />
それが、<a href="/2009/06/11/web-google-page-speed%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%ab%98%e9%80%9f%e5%8c%963/">スクリプトのダウンロードが他の外部ファイルのダウンロードをブロックしてしまう問題</a>の回避についてです。</p>
<p>前述のテクニックはjsファイルのロードについては通常の方法であるため、ブロックは発生してしまいます。これを避け、なおかつロード完了とスクリプト実行がきちんと連動するように改良されたスクリプトが、<a href="http://stevesouders.com/efws/degrading-script-tag.php?t=1247630376">こちら</a>で紹介されています。</p>
<pre name="code" class="javascript">
function init(){
  jQuery("div").text("loaded!");
}

var domscript = document.createElement('script');
domscript.src = "jquery.js";
if ( -1 != navigator.userAgent.indexOf('Opera')){
  domscript.innerHTML = 'init();';
}else{
  domscript.text = 'init();';
}
document.getElementsByTagName('head')[0].appendChild(domscript);
</pre>
<p>この呼び出し方と前述のテクニックを組み合わせることで、高速な外部ファイル呼び出しと、そのロード完了に依存するスクリプトの記述が可能になります。</p>
<p>但し、この方法を使うには外部ファイル側に自要素の中身をコールバック(?)する仕組みを埋め込まなければならず、汎用的に使うのは難しくなってしまいます。<br />
将来的にこの記述をブラウザ側がサポートしてくれた場合であればまだしも、現時点では同書の別項で紹介されている<a href="http://stevesouders.com/efws/script-onload.php">Onload技法</a>の方が優れているとしています。<br />
こちらの検証は、また機会があれば。</p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2009/05/17/javascript%e3%81%aenull%e3%81%a8undefined%e3%81%a8false%e3%81%a80%e3%81%a8%e7%a9%ba%e6%96%87%e5%ad%97%e3%81%a8/' rel='bookmark' title='Permanent Link: [Javascript] nullとundefinedとfalseと0と空文字と'>[Javascript] nullとundefinedとfalseと0と空文字と</a></li>
<li><a href='http://screw-axis.com/2009/06/11/web-google-page-speed%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%ab%98%e9%80%9f%e5%8c%963/' rel='bookmark' title='Permanent Link: [Web] Google Page Speedでサイトを高速化(3)'>[Web] Google Page Speedでサイトを高速化(3)</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/07/15/js-degrading-script-tags/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[PHP] 高速化Tipsのオカルト(2) echoとprint</title>
		<link>http://screw-axis.com/2009/07/05/php-performance-echo-print/</link>
		<comments>http://screw-axis.com/2009/07/05/php-performance-echo-print/#comments</comments>
		<pubDate>Sat, 04 Jul 2009 15:35:18 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=651</guid>
		<description><![CDATA[高速化Tipsには、実践的に役立つものも多々ありますが、実際的にはほとんど役に立たないものも含まれていることが多いです。
知識として「ふーん」という以上には役立たないTipsの、PHPにおける最右翼はこのechoとpri [...]


Related posts:<ol><li><a href='http://screw-axis.com/2009/07/04/php-performance-superstitions1-reference/' rel='bookmark' title='Permanent Link: [PHP] 高速化Tipsのオカルト(1) 関数への参照渡し'>[PHP] 高速化Tipsのオカルト(1) 関数への参照渡し</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm4.static.flickr.com/3357/3515913165_723970550b_m.jpg" alt="fortuneteller" title="fortuneteller" width="240" height="160" class="alignright size-full" style="margin-left: 5px;" />高速化Tipsには、実践的に役立つものも多々ありますが、実際的にはほとんど役に立たないものも含まれていることが多いです。</p>
<p>知識として「ふーん」という以上には役立たないTipsの、PHPにおける最右翼はこのechoとprintの速度差問題ではないでしょうか。<a href="/2009/07/04/php-performance-superstitions1-reference/">前回</a>挙げた<a href="http://code.google.com/intl/ja/speed/articles/optimizing-php.html">Googleのページ</a>でも、公開当初はあったものの、後に消されたエントリの1つです。<br />
Smartyなどのレンダリングエンジンに慣れていれば、そもそもデバッグ時以外では使わない場合も多いこのステートメントの「速度差」が、果たしてどの程度のものなのかを確かめてみます。<br />
<span id="more-651"></span></p>
<h5>大きな文字列を出力</h5>
<p>1Mほどの大きな文字列を出力させてみます。</p>
<pre name="code" class="php">
$s = str_repeat('x', 1024 * 1024);
echo $s."\n";
print $s."\n";
print $s."\n";
echo $s."\n";
</pre>
<p>実行順序で結果が変わることがあるので、2回ずつ呼んでみました。</p>
<pre>
echo: 0.005774974823
print: 0.00450992584229
print: 0.0048840045929
echo: 0.00483393669128
</pre>
<p>誤差の範囲しか、違いを見出すことは出来ませんでした。</p>
<h5>繰り返し出力</h5>
<p>256bytesほどの文字列を、繰り返し出力させます。</p>
<pre name="code" class="php">
$s = str_repeat('x', 256);
$cnt = 10000;
for($i=0; $i&lt;$cnt; ++$i)
  print $s."\n";
for($i=0; $i&lt;$cnt; ++$i)
  echo $s."\n";
for($i=0; $i&lt;$cnt; ++$i)
  echo $s."\n";
for($i=0; $i&lt;$cnt; ++$i)
  print $s."\n";
</pre>
<pre>
print: 0.0117089748383
echo: 0.0106270313263
echo: 0.0104529857635
print: 0.0104429721832
</pre>
<p>こちらも、わずかに echo の方が速いと言えるかもしれない程度です。</p>
<h5>速度差を気にする必要は無い</h5>
<p>気にしなければならないほどの速度差は、無いと判断します。<br />
PHP自体のCのソースコードを読めば、printの方が少し余計な処理をしている分だけ遅いのが道理ですが、意識しなければいけないほどではありません。<br />
OSなど標準出力の機構によってはもう少し大きな差が出るケースがあるのかもしれませんが、基本的には動作・シンタックスの違いだけを気にしておけば良いと思います。(これすら、実際には使い分ける必要はまず無いと思いますが)<br />
一応、簡単に違いを挙げておきます。</p>
<h5>echoとprintの違い(1) 文法</h5>
<p>どちらも関数ではなく言語構造である点は共通しているので、括弧なしに呼ぶようなことが可能です。しかしprintの方が、比較的関数に近しい記述を許されています。<br />
例えば、次のような記述はechoでは出来ません。</p>
<pre name="code" class="php">
$ret = $flag ? print 'true' : print 'false';
echo "return code: $ret";
</pre>
<p>このコードは、標準出力が成功すれば$flagの値がどうあれ&#8221;1&#8243;を返します。</li>
<h5>echoとprintの違い(2) 引数</h5>
<p>echoは複数の引数を取り、これを連続して出力することが出来ます。</p>
<pre name="code" class="php">
echo "x", "y", "z";
print "x"."y"."z";
</pre>
<p>カンマで渡した方が、若干高速なようです。(これもよくきくオカルトですし、実際に<a href="http://pastie.org/523020">逆の検証結果</a>もあるようですが、自分の方で試した結果はやはり文字列結合より引数渡しの方が、やや速いようでした)</p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2009/07/04/php-performance-superstitions1-reference/' rel='bookmark' title='Permanent Link: [PHP] 高速化Tipsのオカルト(1) 関数への参照渡し'>[PHP] 高速化Tipsのオカルト(1) 関数への参照渡し</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/07/05/php-performance-echo-print/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[PHP] 高速化Tipsのオカルト(1) 関数への参照渡し</title>
		<link>http://screw-axis.com/2009/07/04/php-performance-superstitions1-reference/</link>
		<comments>http://screw-axis.com/2009/07/04/php-performance-superstitions1-reference/#comments</comments>
		<pubDate>Sat, 04 Jul 2009 09:09:26 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Performance]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=645</guid>
		<description><![CDATA[他の言語同様、PHPにも多くの高速化Tipsがあります。汎用で効果的なもの、守銭奴的で本質的に意義の乏しいものなど様々ですが、中には「全く無意味なこと」や「過去のバージョンの話」、「状況次第では逆効果になる」ようなものも [...]


Related posts:<ol><li><a href='http://screw-axis.com/2009/07/05/php-performance-echo-print/' rel='bookmark' title='Permanent Link: [PHP] 高速化Tipsのオカルト(2) echoとprint'>[PHP] 高速化Tipsのオカルト(2) echoとprint</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm4.static.flickr.com/3120/2384975035_230a0eac30_m.jpg" alt="superstition" title="superstition" width="191" height="240" class="alignright size-full" style="margin-left: 5px;" />他の言語同様、PHPにも多くの高速化Tipsがあります。汎用で効果的なもの、守銭奴的で本質的に意義の乏しいものなど様々ですが、中には「全く無意味なこと」や「過去のバージョンの話」、「状況次第では逆効果になる」ようなものも散見されます。</p>
<p>先日は、にわかに高速化づいているGoogleも、<a href="http://code.google.com/intl/ja/speed/">サイト高速化に関するコミュニティ</a>をオープンさせました。その中には、<a href="http://code.google.com/intl/ja/speed/articles/optimizing-php.html">PHPに関するパフォーマンスTips</a>も含まれています。ところが、これも「オカルト」に毒された<a href="http://groups.google.com/group/make-the-web-faster/browse_thread/thread/ddfbe82dd80408cc?pli=1">誤った内容が多く指摘</a>され、公開から僅か1週間で何度も書き直されるような事態になっています。</p>
<p>ここでは巷間に溢れるPHP高速化Tipsの幾つか怪しいものを検証してみます。<br />
※なお、検証に使ったPHPのバージョンは5.2.9です。<br />
<span id="more-645"></span></p>
<h5>大きな配列はポインタで渡す?</h5>
<p>PHPには厳密な意味でのポインタは無く、zvalのリファレンスということになりますが。<br />
関数内で元の変数を参照するだけの場合でも、変数のコピーが行われないように参照渡しにする開発者を見かけます。しかし、少しPHPの内部構造を学べば、copy-on-writeの仕組みによってその必要が無いということを知っていると思います。<br />
しかし、実際にはやはり値渡しとポインタ渡しは、値の変更が無かったとしても「同じ」ではありません。<br />
関数内での変数の扱い方によって、速度が変わることを確認してみましょう。</p>
<h5>foreach</h5>
<p>まずは、foreachを使って大きな配列にアクセスしてみます。</p>
<pre name="code" class="php">
function test1($a){
  $c = 0;
  foreach($a as $v){ if($v=='xxxxx') ++$c; }
}
function test2(&#038;$a){
  $c = 0;
  foreach($a as $v){ if($v=='xxxxx') ++$c; }
}
$x = array_fill(0, 1000000, 'xxxxx');
test1($x);
test2($x);
</pre>
<p>時間を測るあたりのロジックは割愛しますが、以下、結果です。</p>
<pre>
time: 0.627353906631
time: 0.374164819717
</pre>
<p>参照で渡した方が速くなっています。これは結局、test1でforeachが値のコピーを作る際に配列全体のコピーを行ってしまうためです。メモリ使用量を考えても参照渡しの方が優位ですが、これほどの巨大な配列でなければ気にするほどではないと思います。</p>
<h5>for</h5>
<p>次に、foreachではなくfor文を用いて、変数のコピーを行わずにアクセスするパターンを見てみましょう。</p>
<pre name="code" class="php">
function test1($a){
  $cnt = count($a); $c = 0;
  for($i=0; $i<$cnt; ++$i)
    if($a[$i]=='xxxxx') ++$c;
}
function test2(&#038;$a){
  $cnt = count($a); $c = 0;
  for($i=0; $i<$cnt; ++$i)
    if($a[$i]=='xxxxx') ++$c;
}
$x = array_fill(0, 1000000, 'xxxxx');
test1($x);
test2($x);
</pre>
<p>処理としてはforeachのものと同じです。結果は、次のようになりました。</p>
<pre>
time: 0.508368015289
time: 0.736795186996
</pre>
<p>処理速度が逆転してしまっています。これは逆にメモリコピーが行われなくなれば、リファレンスやfunction-stackの追跡が挟まる分だけ少し遅くなってしまうということです。</p>
<h5>for + count</h5>
<p>更に、もう1つ確認してみましょう。</p>
<pre name="code" class="php">
function test1($a){
  $c = 0;
  for($i=0; $i&lt;count($a); ++$i)
    if($a[$i]=='xxxxx') ++$c;
}
function test2(&#038;$a){
  $c = 0;
  for($i=0; $i&lt;count($a); ++$i)
    if($a[$i]=='xxxxx') ++$c;
}
$x = array_fill(0, 10000, 'xxxxx');
test1($x);
test2($x);
</pre>
<p>countをループの外に出さず、毎回評価しています。これも高速化Tipsの基本ですが、ついつい手抜きをして、このようなコードを書いてしまう人も多いのでは。<br />
この実行結果は、次の通りです。</p>
<pre>
time: 0.00851798057556
time: 20.5319070816
</pre>
<p>驚くべき結果になりました。<br />
実はこのテスト、前のものに比べて配列のサイズを2桁下げています。test1の所要時間が短くなっているのはそのためで、決してこちらの書き方が高速というわけではありません。<br />
それにしても、このtest2の眼を疑うような劣化ぶりは、どうしたことでしょうか。良かれと思ってわざわざ参照渡しにしたはずが、悲惨なまでにパフォーマンスを劣化させる結果になってしまいました。</p>
<p>結論としては、関数内で値を直接変更しなければいけないような必要性が無ければ、PHPのcopy-on-writeに委ねたコーディングをするのが正解だと思います。<br />
そして、countはちゃんとループの外に出しましょう <img src='http://screw-axis.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2009/07/05/php-performance-echo-print/' rel='bookmark' title='Permanent Link: [PHP] 高速化Tipsのオカルト(2) echoとprint'>[PHP] 高速化Tipsのオカルト(2) echoとprint</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/07/04/php-performance-superstitions1-reference/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Jetpack] 表示中ページのブックマーク数を自動表示</title>
		<link>http://screw-axis.com/2009/06/20/jetpack-social-screw/</link>
		<comments>http://screw-axis.com/2009/06/20/jetpack-social-screw/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 20:37:52 +0000</pubDate>
		<dc:creator>nao58</dc:creator>
				<category><![CDATA[Jetpack]]></category>
		<category><![CDATA[開発]]></category>

		<guid isPermaLink="false">http://screw-axis.com/?p=602</guid>
		<description><![CDATA[まだまだテスト段階のJetpackですが、折角なので遊ぶだけでなく、何か役に立つものを作りたいなと思いやってみました。
使ったのは、v.2から実装されたスライドバー。ここに、現在表示中のページに付けられているブックマーク [...]


Related posts:<ol><li><a href='http://screw-axis.com/2009/06/18/jetpack-v2-slidebar/' rel='bookmark' title='Permanent Link: [Jetpack] v.2リリース：スライドバー搭載'>[Jetpack] v.2リリース：スライドバー搭載</a></li>
<li><a href='http://screw-axis.com/2009/05/24/jetpack-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a8%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e6%ba%96%e5%82%99/' rel='bookmark' title='Permanent Link: [Jetpack] インストールと開発環境構築準備'>[Jetpack] インストールと開発環境構築準備</a></li>
<li><a href='http://screw-axis.com/2009/05/31/jetpack-screw%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%82%8b/' rel='bookmark' title='Permanent Link: [Jetpack] Screw!ボタンをつけてみる'>[Jetpack] Screw!ボタンをつけてみる</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm1.static.flickr.com/175/424031605_819c16cfd9_m.jpg" alt="bookmark" title="bookmark" width="240" height="161" class="alignright size-full" style="margin-left: 5px;" />まだまだテスト段階の<a href="/jetpack/">Jetpack</a>ですが、折角なので<a href="/2009/05/31/jetpack-screw%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%82%8b/">遊ぶ</a>だけでなく、何か役に立つものを作りたいなと思いやってみました。</p>
<p>使ったのは、<a href="/2009/06/18/jetpack-v2-slidebar/">v.2から実装されたスライドバー</a>。ここに、現在表示中のページに付けられているブックマークを表示します。<br />
「このページ、どのくらい注目されてるのかな？」と思った時に、割と手っ取り早く分かって便利なんじゃないかと。<br />
現時点で対応しているのは「<a href="http://b.hatena.ne.jp/">はてなブックマーク</a>」と「<a href="http://clip.livedoor.com/">livedoorクリップ</a>」だけです。<br />
<span id="more-602"></span></p>
<h5>概要</h5>
<p>Mozillaが開発中のFirefoxプラグイン、Jetpackを用いて作ってみたブックマーク表示ツールです。<br />
<a href="http://screw-axis.com/wp-content/uploads/2009/06/jetpack-ss-snap.png"><img src="http://screw-axis.com/wp-content/uploads/2009/06/jetpack-ss-snap-300x225.png" alt="jetpack social-screw" title="jetpack social-screw" width="300" height="225" class="aligncenter size-medium wp-image-606" /></a><br />
左側に開いているのグレーのエリアが、今回作ったFeature。ここに、現在のページのブックマーク数が表示されます。</p>
<p>自由に開け閉めできますが、開きっぱなしにもできます。タブの移動やページ遷移でもチェックに行くので、鬱陶しかったら閉じてしまうのが良いかと。</p>
<h5>インストール方法</h5>
<p>まず、なにはともあれ<a href="/2009/05/24/jetpack-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a8%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e6%ba%96%e5%82%99/">Jetpackをインストール</a>してください。</p>
<p>次に、<a href="http://dev.screw-axis.com/jetpack-social-screw/">Social-Screwをインストール</a>します。<br />
上記リンクを辿った先のページにFirefoxでアクセスすると、ページ上部にインストールを促すバーが表示されます。ここで&#8221;Install&#8230;&#8221;ボタンを押すだけです。<br />
しかし何分非公式のサイトなので、非常に危なそうな警告ページが表示されてしまいます。しかしここは気にせず、ページ下部の&#8221;I know what I&#8217;m doing. Install it!&#8221;をクリックしてください。</p>
<p>これで完了のはずです。<br />
プラグインの設定やタブの表示位置によって若干異なるのですが、概ね左上あたりに青い矢印が表示されているでしょうか？これがスライドバーの開閉スイッチになっています。<br />
マウスを近づけるかクリックすると、左端が少し開いてネジの頭が表示されると思います。(先ほどのスナップショットでも見えます)<br />
これをクリックすると、表示領域が開きます。閉じるには、先ほどの青い矢印をもう一度クリックします。</p>
<h5>コード</h5>
<p><a href="http://github.com/nao58/jetpack-social-screw/tree/master">githubにホスティング</a>しておいたので、興味のある人は見てみてください。<br />
試行錯誤しながらだったので綺麗なコードとは言いがたいですが、100行ちょっとの短いコードです。<br />
<a href="/jetpack/jetpack-api-referencejetpack-api-reference/">Jetpack APIリファレンス</a>や<a href="http://semooh.jp/jquery/">jQuery日本語リファレンス</a>などと併せて見れば、簡単に読めると思います。</p>
<h5>今後の展開</h5>
<p>本当はtomblooのような、ここから投稿まで出来るツールを作りたかったのですが、ID/PWDをセキュアに保存する良い方法が無かったので、断念しました。<br />
自分個人用ならjetpack.storage.simpleで保存してしまっても良いのですが、公開するとなるとさすがに&#8230;<br />
それこそtomblooのようにAPIを認証させて使うのではなくPostをエミュレートするような形で実装するのが良いのかもしれませんが、そこまでやるパワーは無く。</p>
<p>結局、単純にブックマーク数を表示するだけのものですが、これはこれでと思います。<br />
# これを作ってみて、<a href="http://b.hatena.ne.jp/entry/about:blank">世の中変な人が多い</a>ことに気づきました :-p</p>
<p>本当は<a href="http://delicious.com/">delicious</a>を入れたかったのですが、URLをJavascriptでMD5にするのがメンドウで、今回はパスしました。Y!は基本的にはAPI公開してないし。もし要望があれば考えます。</p>
<h5>注意事項</h5>
<p>冒頭でも書きましたが、Jetpackは未だ実験段階の機能です。<br />
動作の怪しい部分は多々ありますので、導入する場合はあくまで自己責任でお願いいたします。</p>


<p>Related posts:<ol><li><a href='http://screw-axis.com/2009/06/18/jetpack-v2-slidebar/' rel='bookmark' title='Permanent Link: [Jetpack] v.2リリース：スライドバー搭載'>[Jetpack] v.2リリース：スライドバー搭載</a></li>
<li><a href='http://screw-axis.com/2009/05/24/jetpack-%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a8%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e6%ba%96%e5%82%99/' rel='bookmark' title='Permanent Link: [Jetpack] インストールと開発環境構築準備'>[Jetpack] インストールと開発環境構築準備</a></li>
<li><a href='http://screw-axis.com/2009/05/31/jetpack-screw%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%81%bf%e3%82%8b/' rel='bookmark' title='Permanent Link: [Jetpack] Screw!ボタンをつけてみる'>[Jetpack] Screw!ボタンをつけてみる</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://screw-axis.com/2009/06/20/jetpack-social-screw/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
