<?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/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>gaspanik weblog &#187; development</title>
	<atom:link href="http://blog.gaspanik.com/tag/development/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.gaspanik.com</link>
	<description>beat one's brain</description>
	<lastBuildDate>Thu, 15 Jul 2010 03:21:05 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/tag/development/feed" />
	<atom:link rel='hub' href='http://blog.gaspanik.com/?pushpress=hub' />
<cloud domain='blog.gaspanik.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>Googleさんが立ち上げたHTML5Rocks</title>
		<link>http://blog.gaspanik.com/google-launched-html5rocks</link>
		<comments>http://blog.gaspanik.com/google-launched-html5rocks#comments</comments>
		<pubDate>Tue, 22 Jun 2010 22:04:07 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=3524</guid>
		<description><![CDATA[皆さんいつ来るかわからない未来に向けてスマートフォン用のサイト制作に活かそうかな？ってな感じでHTML 5のお勉強真っ盛りでしょうか？
先日AppleでHTML 5はこんなんだぜ！みたいなページが公開されていましたが、今 [...]]]></description>
			<content:encoded><![CDATA[<p>皆さん<del datetime="2010-06-22T21:58:00+00:00">いつ来るかわからない未来に向けて</del>スマートフォン用のサイト制作に活かそうかな？ってな感じでHTML 5のお勉強真っ盛りでしょうか？</p>
<p>先日AppleでHTML 5はこんなんだぜ！みたいなページが公開されていましたが、今度はGoogleが「<a href="http://www.html5rocks.com/">HTML5Rocks</a>」というHTML 5のリソースサイトを公開されたようですね（って、これも今知った）。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/06/html5rocks.png" alt="html5rocks" title="html5rocks" width="450" height="253" class="alignnone size-full wp-image-3515" /></p>
<p>中身についてはまだ見れてませんが、Twitterを眺めていたら目に入ったので簡単にお知らせまで。頑張りましょう（何を）。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/google-launched-html5rocks/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/google-launched-html5rocks" />
	</item>
		<item>
		<title>GTmetrixでパフォーマンスチェック</title>
		<link>http://blog.gaspanik.com/performance-check-by-gtmetrix</link>
		<comments>http://blog.gaspanik.com/performance-check-by-gtmetrix#comments</comments>
		<pubDate>Tue, 22 Jun 2010 21:57:08 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=3510</guid>
		<description><![CDATA[最近Webサイトのパフォーマンス改善がうんたらなことばっかりな気がするこもりです、おはようございます。FirefoxにYSlow!やPage Speedを入れてるのはいいんですが、いちいち個別にチェックするのもなんだかな [...]]]></description>
			<content:encoded><![CDATA[<p>最近Webサイトのパフォーマンス改善がうんたらなことばっかりな気がするこもりです、おはようございます。FirefoxにYSlow!やPage Speedを入れてるのはいいんですが、いちいち個別にチェックするのもなんだかなぁと思っていたのですが、「<a href="http://gtmetrix.com/">GTmetrix</a>」なる素敵サイトがあることをたった今知りました…。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/06/gtmetrix.png" alt="gtmetrix" title="gtmetrix" width="450" height="253" class="alignnone size-full wp-image-3513" /></p>
<p>こちらのサイトにURLを入れてチェックすると、YSlow!とPage Speedでのチェック結果が表示されます。それに加えてHTTPリクエストの数やロード時間、ウォーターフォールチャートも出るわで至れり尽くせりです。チェック項目の解説なんかも用意されています。</p>
<p>便利です。ありがとうございます（笑）。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/performance-check-by-gtmetrix/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/performance-check-by-gtmetrix" />
	</item>
		<item>
		<title>Load Impactでパフォーマンステストしてみた</title>
		<link>http://blog.gaspanik.com/web-site-load-test-by-load-impact</link>
		<comments>http://blog.gaspanik.com/web-site-load-test-by-load-impact#comments</comments>
		<pubDate>Wed, 10 Mar 2010 09:16:32 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[webservices]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=2925</guid>
		<description><![CDATA[先日の（というか昨日ですが）WordPressのパフォーマンス改善的なネタがどうやら人気らしく、ReTweetしていただいてる数はもちろんですが、うちのブログにしては珍しくはてなやDeliciousなどでも多くブックマー [...]]]></description>
			<content:encoded><![CDATA[<p>先日の（というか昨日ですが）WordPressのパフォーマンス改善的なネタがどうやら人気らしく、ReTweetしていただいてる数はもちろんですが、うちのブログにしては珍しくはてなやDeliciousなどでも多くブックマークしていただいてるようです（ありがとうございます）。</p>
<p>今朝方「そう言えば…」と思い出して、外部からパフォーマンスチェックができるサービスの一覧へのリンクを入れておきました。で、改めてお礼といってはなんですが、そこにも追加した「<a href="http://loadimpact.com/">Load Impact</a>」さんをちょっと紹介しておこうかな、と。</p>
<p>こちらにも無償で利用できるパフォーマンスチェックツールがありますので、それとあわせてここのサイトのサービスを使えばどういうことが確認できて、どういう対処の仕方があるのかを簡単に書いてみましょう。</p>
<p><span id="more-2925"></span></p>
<h3>同時接続数を変えてロード時間を計測できるLoad Impact</h3>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-001.png" alt="" title="loadimpact-001" width="450" height="253" class="alignnone size-full wp-image-2920" /></p>
<p>Load Impactは、スウェーデンのとある会社が提供しているオンラインのロードテストサービスです。こちらの主なサービスは、同時に複数のクライアントで接続して負荷をかけてロード時間の平均や使用帯域を計測することができるのが特徴です（お試し版は同時接続数50クライアントまでで一日3サイトまでかな？）。</p>
<p>大規模なアクセスがあるサイトなんかはロードバランサーなんか入ってて負荷分散されてたりするんでしょうが、中小規模のサイトではそうはいきません。とはいえ、プレスリリースやテレビに紹介されたとかで一時的にアクセスが増えてしまうことも考えられます。ホスティングの共用サービスだとサーバのチューニングなんかはできないでしょうけど、ちょっとした負荷でも問題なくアクセスできるようなサイトにしておくことも時には必要になります。備えあれば嬉しいな、です（違）。</p>
<p>インフラが全然ダメなのにいきなり10MBのコンテンツとかダウンロードさせてたら、サーバとクライアントのコネクションがなかなか開放されず、すぐ一杯一杯になることは容易に想像できます（どことは言わんけど 笑）。かといって、新しい接続のためにリソースが確保できるかって言うとそこにも限界がありますから、自分とこで対応できる限界を知っておくこともまた大事なわけです。</p>
<h3>いろんなUAをシミュレートできるPage Analyzer</h3>
<p>この類のサービスを専門にされている会社さんは、大体無償で利用できるパフォーマンス計測ツールを公開されています。Load Impactさんでも「<a href="http://loadimpact.com/pageanalyzer.php">Page Analyzer</a>」なる計測ツールがあります。</p>
<p>ここのツールの特徴は、他のとこよりも格段に豊富なUser Agentsをシミュレートすることができることでしょうか。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-002.png" alt="" title="loadimpact-002" width="450" height="253" class="alignnone size-full wp-image-2921" /></p>
<p>IEはもちろん、FirefoxやChrome、Safariなどのいろいろなバージョンが用意されています（ブラウザ毎にコネクション数とか違いますからね *1）。おそらくストックホルムからのアクセスになるはずですが、比較的レイテンシも少なくて良い感じです。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-003.png" alt="" title="loadimpact-003" width="450" height="253" class="alignnone size-full wp-image-2917" /></p>
<p>うちのヘボいトップで大体3秒前後。Chartbeatを使って国内からアクセスされている皆さんの様子を見てる感じでは、平均2秒いくかいかないかぐらいですのでまぁ良しと。秒数うんぬんより、<strong>UAのシミュレートができる</strong>ということで便利です。</p>
<h3>段階的に同時接続数をあげ、負荷をかけてロード時間を計測する</h3>
<p>いよいよ本題に入りましょう。単なるサーバの設定などを確認する負荷テストであれば、専用のツールなどがあるのでそれを使えばいいわけですが、コンテンツの表示にかかる時間となるとどっかからやんないとなかなかわかりません。</p>
<p>が、しかし。このLoad Impactさんのサービスを使えば、段階的に同時接続数をあげて負荷を与えつつ、表示までにかかってる時間をチェックすることができるんですね。しかも同時接続数50までなら無償でチェック可能！、250まで接続数を上げてもたった$9！ってなわけです（どこの通販だと 笑）。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-004.png" alt="" title="loadimpact-004" width="450" height="253" class="alignnone size-full wp-image-2918" /></p>
<p>ま、そんなわけでですね、とりあえず同時に50クライアントまで増やしながらテストしてみるには無償でも可能です。Webサイトのトップにある入力欄にURL入れて、上の図の左のFreeテストに進めばチェックできます。</p>
<p>ただし、チェック結果の保存にはアカウントの登録が必要だったかな？ アカウント登録しても最初はFree版なので大丈夫ですけどね。</p>
<p>有償版は同時接続数をもっと増やしたり、細かな設定をした上でテストが可能になっています。画面見ただけだとちょっとわかりにくいのですが、$9/per dayってなってるのは「24時間内にテストする」ワンタイムフィーみたいなもんです（他にもオプションがあります）。</p>
<p>有償でもそんなビックリする値段じゃないですし、ある程度の規模での同時アクセスが見込まれるコンテンツなどを制作されている方にはいいかもしれません。自分の作ってるコンテンツの限界点を知るためにも、とりあえず試してみるのが一番（笑）。</p>
<h3>とりあえず試してみたらこうなった</h3>
<p>いや、実はちょっと前からWordPressの設定やサーバの設定をいじってはチェックしていたんですけど、今回同時に100クライアントまで増やしてロード時間を計測してみました。一番安いプランではスウェーデンのストックホルムからしか計れなかったので、とりあえずそれで。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-006.png" alt="" title="loadimpact-006" width="450" height="253" class="alignnone size-full wp-image-2919" /></p>
<p>テストにはそれなりに時間がかかりますので、コーヒー飲んでたりしてればそのうち終わります（テスト数による）。この図は、10クライアントから段階的に10ずつ増やし、最終的に100クライアントの同時アクセスまでの結果です。</p>
<p>グラフの線は、できるだけ横方向に同じような状態が良いのは言うまでもないですかね。グラフの縦は表示までの秒数になっています。80クライアントのとこでちょっとだけあがってますけど、広い目で見ればストックホルムからでほぼ3秒前後なので良しとしましょう。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-007.png" alt="" title="loadimpact-007" width="450" height="253" class="alignnone size-full wp-image-2923" /></p>
<p>例えばグラフがこういうことになったら、サーバ側の設定をちょっと変更したりする必要があるかな？と。40クライアントが同時アクセスしてきたらガクッと時間がかかり始めたとか、そういうことがわかるわけです。このグラフの形によって意味があるので、それはフォーラムで解説されています（英語だけど 笑）。</p>
<h3>最後に。ちゃんとアクセスされてます（笑）</h3>
<p>「ホントにアクセスされてんの？」とか疑う方もいらっしゃるかもしれないので（笑）、うちのサーバを監視してる「<a href="http://munin-monitoring.org/">MUNIN</a>」の画面を出しておきます。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/loadimpact-008.png" alt="" title="loadimpact-008" width="450" height="253" class="alignnone size-full wp-image-2924" /></p>
<p>上の図はApacheのプロセスの数を表示したグラフです。左側の縦2つのグラフの右端がガクッとあがってますが、この時がLoad Impactで負荷テストをしている時間です（50と100と2回やってるので2箇所だけ急激にあがってますね）。</p>
<p>WebサーバのApacheはアクセスが増えれば自動的にプロセスを増やす仕組みになってるので良いとはいえ、テストしたらある数値から急激に時間がかかってる場合などは、サーバ側の設定やらコンテンツの作り方などもろもろを見直したりした方がいいかもしれませんね。</p>
<p>サーバの設定をいじるなんてみんながみんなできるわけではありませんし、システムのチューニングは餅は餅屋で任せた方が良いとは思います。でもまぁ、一応こういう負荷テストを使って、コンテンツの弱点を探すってのもありじゃないかな？と思ったので簡単にご紹介まで。</p>
<p>うちもとりあえず「100人乗っても大丈夫」のようです。</p>
<p>*1: ブラウザのバージョン毎の仕様は<a href="http://www.browserscope.org/?category=network">こちら</a>が詳しいです</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/web-site-load-test-by-load-impact/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/web-site-load-test-by-load-impact" />
	</item>
		<item>
		<title>「標準ウェブ制作完全ガイド」が発売されました</title>
		<link>http://blog.gaspanik.com/standardized-web-production-complete-guide</link>
		<comments>http://blog.gaspanik.com/standardized-web-production-complete-guide#comments</comments>
		<pubDate>Wed, 24 Feb 2010 04:56:12 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[notice]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[books]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=2878</guid>
		<description><![CDATA[ちょっと前に軽く紹介していた『標準ウェブ制作完全ガイド ~ プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座（MdN刊）』が書店に並び始めたようです。

 [...]]]></description>
			<content:encoded><![CDATA[<p>ちょっと前に<a href="http://blog.gaspanik.com/mdn-standard-web-production-complete-guide">軽く紹介</a>していた『標準ウェブ制作完全ガイド ~ プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座（MdN刊）』が書店に並び始めたようです。</p>
<p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/02/swpcg.jpg" alt="standardized-web-production-complete-guide" title="standardized-web-production-complete-guide" width="450" height="253" class="alignnone size-full wp-image-2877" /></p>
<dl>
<dt>標準ウェブ制作完全ガイド 〜 プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座。</dt>
<dd>松岡清一 監修／MdN編集部 編</dd>
</dl>
<p>で、肝心の内容はといいますと…、</p>
<p><span id="more-2878"></span></p>
<h3>「Web業界で一流を目指す、すべての方に」といった感じで</h3>
<blockquote cite="http://www.mdn.co.jp/di/book/6102/"><p>Web制作に関わるすべての方に向けて、プロとして必要な最先端の知識を1冊にまとめました。プランニングからデザイン、そしてシステム構築まで、 Web制作の「現場」の仕事で必要とされる常識や仕事の流れを解説しています。PLAN［設計・プランニング］→DO［制作・実装・デザイン］→SEE［効果・検証・解析］の3段階の構成でWeb業界の「現在」がトータルにわかる、プロフェッショナルのための教科書。</p>
<p><cite>http://www.mdn.co.jp/di/book/6102/</cite></p></blockquote>
<p>こんな感じで、Webサイトの企画立案的なことから制作や開発、公開後の話にいたるまで。いまどきのWeb制作において「これぐらいは知っておきたい」といったことを総合的にまとめたようなものです。</p>
<p>これからWeb業界に飛び込みたい方、今もう働いているけど次へのステップアップを考えてる方などに最適かと。分業化が進んでいる時代ですので、自分の担当する職域以外がどのようなことをしているのかなどもわかるんじゃないかと思います。</p>
<p>&rarr; <a href="http://www.mdn.co.jp/di/book/6102/">標準ウェブ制作完全ガイド</a>（MdN Design Interactive: 目次あり）<br />
&rarr; <a href="http://direct.ips.co.jp/book/Template/Goods/go_Bookstempmdn.cfm?GM_ID=6102&#038;CM_ID=004053031&#038;SPM_ID=2&#038;HN_NO=00405&#038;PM_No=&#038;PM_Class=">標準ウェブ制作完全ガイド</a>（impress Direct: 見本・目次あり）<br />
&rarr; <a href="http://www.amazon.co.jp/dp/4844361023/">標準ウェブ制作完全ガイド</a>（Amazon.co.jp）</p>
<h3>実は半年間の…（笑）</h3>
<p>実はこちら著者名にこそ出ておりませんが、わたくしも企画段階から参加させていただいておりまして、本書には半年超の思い入れがあるのです…。巻末に執筆者のリストとともに担当パートが記載されていますが、まぁ340Pもある分厚い書籍で執筆いただいてる方も多いので、軽く自身の担当分を明記しておきます。</p>
<p>執筆は、主にPart 2の制作・実装・デザイン的なパートを担当しております。私ひとりでやってる項目と各Partで本文の執筆協力をしている項目がいくつかあるので結構な量になっております（笑）。※担当箇所は項目番号です</p>
<dl>
<dt>Part 1</dt>
<dd>025（すべて）／050-055（本文執筆協力）</dd>
<dt>Part 2</dt>
<dd>089-115（すべて）／116-123（本文執筆協力）</dd>
<dt>Part 3</dt>
<dd>140-142（本文執筆協力）</dd>
</dl>
<p>というわけで、本屋さんでお見かけの際にはお手にとって<del datetime="2010-02-24T04:47:25+00:00">そのままレジへ</del>、パラパラと内容等をチェックしていただければ幸いです。340P、読み応えあります。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/standardized-web-production-complete-guide/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/standardized-web-production-complete-guide" />
	</item>
		<item>
		<title>Googleさんの動きが気になる、今日この頃</title>
		<link>http://blog.gaspanik.com/recent-google-activity</link>
		<comments>http://blog.gaspanik.com/recent-google-activity#comments</comments>
		<pubDate>Fri, 04 Dec 2009 05:05:19 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=1585</guid>
		<description><![CDATA[最近Googleさんの動きがいろんな意味で活発です。Chrome OSやら日本語入力やらといった部分はもちろんですが、Webサイト制作やSEO的な部分にも深く関わりそうな動きもあります。
11月の半ばぐらいに「Googl [...]]]></description>
			<content:encoded><![CDATA[<p>最近Googleさんの動きがいろんな意味で活発です。Chrome OSやら日本語入力やらといった部分はもちろんですが、Webサイト制作やSEO的な部分にも深く関わりそうな動きもあります。</p>
<p>11月の半ばぐらいに「Googleの検索結果表示のアルゴリズムの一指標としてページの表示速度も加味するかもね」的な発言（<a href="http://www.webpronews.com/topnews/2009/11/13/google-page-speed-may-be-a-ranking-factor-in-2010">元ソースはこれかな</a>）があったり、Webをさらに速くするための技術にあたる「<a href="http://www.chromium.org/spdy">SPDY</a>（スピーディって読むらしい）」についてアナウンスしたり、やたらと表示スピード（パフォーマンス）に関するものが増えてきました。</p>
<p><span id="more-1585"></span></p>
<h3>気になる気になる、あー気になる（笑）</h3>
<p>さらに追い打ちをかけるように12月に入って早々、今度はGoogle Analyticsのコードを非同期モードで動作させる改良版のコードが公開されたり（まだβ版です。<a href="http://googlecode.blogspot.com/2009/12/google-analytics-launches-asynchronous.html">元ソースはこちら</a>）、<a href="http://www.google.com/webmasters/">Google Webmaster Tools</a>の中にWebサイトの表示速度の統計が出るようになってます（下図）。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/12/performance-view.jpg" rel="lightbox"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/12/performance-view-240x159.jpg" alt="performance-view" title="performance-view" width="240" height="159" class="alignnone size-medium wp-image-1593" /></a></p>
<p>こんな感じでGoogleからアクセスした場合の数ヶ月間の平均ロード時間が表示されます。ちなみにこのサイトは、今日現在1.7秒と出てます（*1）。</p>
<p>前述のGoogle Analyticsのコードは、実際Webサイト表示のボトルネックになってる場合があって、最近特にそれで引っかかってたのも事実です。うちは試しに変更してみましたけど、喉のつっかえが取れた感じで速くなりました。</p>
<p>さらにさらに昨日今日の話ですが、DNSのルックアップ時間の短縮という名目で「<a href="http://googlecode.blogspot.com/2009/12/introducing-google-public-dns-new-dns.html">Google Public DNS</a>」の登場です（現在はアメリカ国内向けっぽいけど）。とまぁ、11月の半ばの発言を後押しするかのような動きなんですよね…。</p>
<p>検索のもう一つの巨頭、Yahoo!さんも以前からWebサイトの表示速度の改善には力を入れてるわけで、Firefoxのアドオンである「YSlow!」やドキュメントがかなり前から公開されてます。この辺はGoogleさんも同じように「PageSpeed」というアドオンとドキュメントをリリースしてます。</p>
<p>ちなみにAmazonさんの関連企業である<a href="http://www.alexa.com/">Alexa</a>では、<a href="http://www.alexa.com/topsites">TOP100のサイト</a>の情報ページにサイトの平均ロード時間が表示されてまして、「1秒以下だと超速い。2秒以下だと速い。3秒以下で平均、それ以降は話にならない（嘘、遅いとか超遅いです 笑）」的な表示が出るようになっています。</p>
<p>別に脅すつもりはないですが、皆さんのWebサイト大丈夫ですか？ いや、正直なところ。8秒ルールとかあれもう古すぎますから。今3秒以下ですよ…。</p>
<p>ま、そんなわけでうちのブログで4月のエイプリルフールに冗談交じりで上げたクソみたいな<a href="http://blog.gaspanik.com/how-to-optimize-website-performance-for-designer">エントリー</a>があるのですが（笑）、これをもう少し真面目に解説するエントリーを近々あげようかと思ってます、という予告のためのエントリーです。</p>
<hr />
<p>*1: うちはWordPressを使ったブログですから、PHPがページを作ってブラウザに送るまでの時間がマシンパワーなんかに左右される部分もあったり、自宅サーバで回線が細いうえにいくつかのWebサイトが動いてるため、できるかぎりパフォーマンスをあげるためのアレコレをやってます（試行錯誤の様子が上のグラフにも出てますね 笑）。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/recent-google-activity/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/recent-google-activity" />
	</item>
		<item>
		<title>CSS Nite vol.39 フォローアップ</title>
		<link>http://blog.gaspanik.com/follow-up-css-nite-vol-39-photoshop</link>
		<comments>http://blog.gaspanik.com/follow-up-css-nite-vol-39-photoshop#comments</comments>
		<pubDate>Sat, 19 Sep 2009 14:36:59 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[works]]></category>
		<category><![CDATA[cameraraw]]></category>
		<category><![CDATA[cssnite]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[lightroom]]></category>
		<category><![CDATA[photos]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[raw]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=1184</guid>
		<description><![CDATA[こちらの記事を先日の「CSS Nite vol.39」のフォローアップとさせていただきます。
スライドの方は別途公開ということで、フォローしておいた方が良さそうなカラーマネジメント系の話とモニタの調整の手順（Window [...]]]></description>
			<content:encoded><![CDATA[<p>こちらの記事を先日の「<a href="http://cssnite.jp/archives/post_1624.html">CSS Nite vol.39</a>」のフォローアップとさせていただきます。</p>
<p>スライドの方は別途公開ということで、フォローしておいた方が良さそうなカラーマネジメント系の話とモニタの調整の手順（Windows / OS X）、あとおまけで講演時に使ったトマトの写真の元写真からCamera RAWを使った補正の手順をざっくりと書き記しておきます（元ファイルはダウンロード可）。</p>
<p>（追記: 2009.09.25）スライドと音声を<a href="http://cssnite.jp/archives/post_1630.html">CSS Nite</a>さんの方で公開していただいたようです。なお、スライドのみSlideShareでも公開しておりますので、オンラインで確認したい方は<a href="http://www.slideshare.net/gaspanik/css-nite-vol39-komori">こちら</a>からどうぞ。</p>
<p>非常に長いエントリーになるので気合いを入れてください（笑）。</p>
<p><span id="more-1184"></span></p>
<h3>ブラウザのカラーマネジメント的なこと</h3>
<p>まず、ブラウザを介して見る自身の環境の状態からいってみましょう。ICCのWebサイトの<a href="http://color.org/version4html.xalter">こちらのページ</a>でカラーマネジメントの状態を確認することができます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/color_org.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/color_org-240x159.jpg" alt="color_org" title="color_org" width="240" height="159" class="alignnone size-medium wp-image-1222" /></a></p>
<p>ブラウザでそのページをみると一番上に写真がありますが、ICCのColor ProfileのVer. 4に対応していれば普通に表示されるはずです（Safari）。Ver. 2までの対応であれば下半分が正常な状態（Firefox 3.5）になり、全然カラーマネジメントと縁がなければ4箇所がバラバラの色になるはずです（IEとか）。</p>
<p>Firefoxも3.0まではカラーマネジメントを有効にすると全部同じになってたような気がしますが、3.5だとおそらく下半分だけ有効になるんじゃないかと。まぁ、それでも十分です。</p>
<p>ICCのWebサイト以外にも、miyahan.comさんの方でカラーマネジメントに関する非常に詳細な記事とテストルームなどが公開されています（まとめるのが面倒な話を丁寧にまとめられていますので、一度は目を通しておくと良いのではないでしょうか）。</p>
<p>&rarr; <a href="http://miyahan.com/me/report/computer/070125_WUXGA_LCD/ColorManagement.html">miyahan.com | 液晶ディスプレイとカラーマネジメント</a><br />
&rarr; <a href="http://miyahan.com/me/report/computer/070125_WUXGA_LCD/ColorManagement_test.html">miyahan.com | 液晶ディスプレイとカラーマネジメント テストルーム</a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/ff3window.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/ff3window-240x153.jpg" alt="ff3window" title="ff3window" width="240" height="153" class="alignnone size-medium wp-image-1195" /></a><br />
こちらはカラーマネジメントが有効なFirefox3.5</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/ie8window.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/ie8window-240x153.jpg" alt="ie8window" title="ie8window" width="240" height="153" class="alignnone size-medium wp-image-1210" /></a><br />
こちらはカラーマネジメントのないInternet Explorer 8</p>
<p>いずれもmiyahan.comさんのテストルームでの表示です。<br />
こちらのテストルームは、下の方までバーッといろいろテストできるので、キャリブレーションの前と後でチェックしてみると、いかに何もしてない状態が「…」なのかよくわかるのではないかと。</p>
<h3>Firefoxでのカラーマネジメントオプション</h3>
<p>Firefoxのカラーマネジメントの設定についてですが、3.5からはデフォルト有効で3.0.xまでは手動で有効にするとお話ししました。設定の確認は、ブラウザのURLバーのところに「<strong>about:config</strong>」と入力し隠されている設定情報を表示します。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption1.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption1-240x150.jpg" alt="firefox-cmoption1" title="firefox-cmoption1" width="240" height="150" class="alignnone size-medium wp-image-1221" /></a></p>
<p>ページの上部にある「Filter（日本語版だとフィルタとかですかね）」に「gfx」と入力して、カラーマネジメントに関する項目だけに絞り込みます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption2.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption2-240x150.jpg" alt="firefox-cmoption2" title="firefox-cmoption2" width="240" height="150" class="alignnone size-medium wp-image-1220" /></a></p>
<p>ここに出てきた「gfx_colormanagement.mode」がカラーマネジメントのオンオフの設定です。Firefox 3.0.xまでは「0」か「1」でオンオフを切り替えたはずですが、Ver. 3.5からは「0」でオフ、「2」が初期設定（写真だけカラーマネジメントを有効）です。「1」はページ全体にカラーマネジメントを効かせるみたいな感じだったかと。</p>
<p>「gfx_colormanagement.display_profile」は、モニタのプロファイルを指定する箇所なのでブランクでも構わない気もします。一応ダブルクリックすれば.iccもしくは.icmのファイルまでのパス（場所）を指定できます。</p>
<p>Windowsならキャリブレートしたモニタの.icmファイルかsRGBの.icmファイルを指定すれば良いのではないでしょうか。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption3.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/firefox-cmoption3-240x150.jpg" alt="firefox-cmoption3" title="firefox-cmoption3" width="240" height="150" class="alignnone size-medium wp-image-1219" /></a></p>
<p>WindowsのsRGBの.icmは「C:\\WINDOWS\\system32\\spool\\drivers\\color\\sRGB Color Space Profile.icm」あたりにありますかね…。この後解説するCalibrizeを実行したあとに生成される.icmファイルは「C:\Users\ユーザ名\Documents\My ICC Profiles\ほげほげ.icm」という感じで、ドキュメントフォルダに保存されます。</p>
<p>OS Xの場合はColor Profileが保存される場所が何カ所かあるので、ライブラリの中や自分のホームディレクトリのライブラリにある「ColorSync」などを探してみましょう。「/Library/ColorSync/Profiles/Displays/ほげほげ.icc」みたいな感じで指定します（空欄でいいかと）。</p>
<p>あとは再起動すればオッケーです。</p>
<h3>モニタのキャリブレーション &#8211; Windows</h3>
<p>Windowsの場合、昔からAdobeさんのソフトを使ってらっしゃる方は「Adobeガンマ」というのがコントロールパネルにあるのでそれを使っても構いません。ここ数年でリプレイスした方なんかは入ってないので、「Calibrize」というソフトをありがたく使わせていただきます。</p>
<p>&rarr; <a href="http://calibrize.com/">Calibrize</a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize1.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize1-240x191.jpg" alt="calibrize1" title="calibrize1" width="240" height="191" class="alignnone size-medium wp-image-1217" /></a></p>
<p>公式サイトからダウンロードし起動するとこのような画面が出てきます。とりあえず中央右の「Next」 をクリックして次の画面へ。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize2.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize2-240x191.jpg" alt="calibrize2" title="calibrize2" width="240" height="191" class="alignnone size-medium wp-image-1215" /></a></p>
<p>モニタの明るさとコントラストを調整して、黒と白のそれぞれの中に●がみえるような感じにしましょう。下にあるのは明るすぎとか暗すぎのサンプルです。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize3.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize3-240x191.jpg" alt="calibrize3" title="calibrize3" width="240" height="191" class="alignnone size-medium wp-image-1214" /></a></p>
<p>RGBそれぞれのスライダが出てきたら、先日お話ししたように2mぐらい離れて目のピントをあわせないようにしてボーッとしながら各色背景と中央の●が区別できないように調整してください。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize4.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/calibrize4-240x191.jpg" alt="calibrize4" title="calibrize4" width="240" height="191" class="alignnone size-medium wp-image-1213" /></a></p>
<p>で、最後に保存してお終いです。前述したようにこのファイルは、ご自身のディレクトリの「ドキュメント」の中にあります。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/wcs.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/wcs-239x212.jpg" alt="wcs" title="wcs" width="239" height="212" class="alignnone size-medium wp-image-1196" /></a></p>
<p>WCSが導入されたVistaの場合は、コントロールパネルを開くと「色の管理」ってのがありますので、そちらを開いて自分のディスプレイのプロファイルとします。おそらく読めない謎の文字が出てるんじゃないかと（笑）。XPの場合は、カラーマネジメントなんてものはないに等しいはずなのですが、「画面」とかその辺でひょっとしたら追加できるのかもしれません。</p>
<p>モニタの状態が良くなったかどうかは、先ほど紹介したmiyahanさんのテストルームで確認してみましょう。IE 8でみるとカラーマネジメント効かないので、FirefoxとかSafariで見た方がいいですかね。</p>
<h3>モニタのキャリブレーション &#8211; OS X</h3>
<p>OS Xの場合は、システム環境設定の「ディスプレイ」にあるカラーを開いて「補正&#8230;」をクリックして「ディスプレイキャリブレータ・アシスタント」を開きます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate1.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate1-240x183.jpg" alt="osx-calibrate1" title="osx-calibrate1" width="240" height="183" class="alignnone size-medium wp-image-1209" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate2.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate2-240x170.jpg" alt="osx-calibrate2" title="osx-calibrate2" width="240" height="170" class="alignnone size-medium wp-image-1208" /></a></p>
<p>調整の仕方はほぼ一緒で、中央に表示されたリンゴとその背景が区別できないように左右のスライダを使って調整します。これを6回ぐらい繰り返します（笑）。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate3.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate3-240x170.jpg" alt="osx-calibrate3" title="osx-calibrate3" width="240" height="170" class="alignnone size-medium wp-image-1205" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate4.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/osx-calibrate4-240x170.jpg" alt="osx-calibrate4" title="osx-calibrate4" width="240" height="170" class="alignnone size-medium wp-image-1189" /></a></p>
<p>さらにモニタのガンマ値を設定し（Snow Leopardから2.2という話ですね）、モニタの色温度を設定します。モニタの色温度は、環境によって異なるものなのですが、一般的には6500℃にされていることが多いです（印刷が対象の場合は5000℃とか）。ようは白いものが白いように見える状態にすると。</p>
<p>で、最後に保存してお終いです。<br />
Windows同様、miyahanさんのテストルームで確認しましょう。</p>
<h3>おまけ。RAWファイルを使った現像処理</h3>
<p>先日「時間が余ったらRAWからもやろうかな」と一応準備だけしていたのですが、大方の予想通り駆け足でも時間オーバーになったのでこちらにおまけとして一連の処理を書き記しておきます（元ファイルは一番下からダウンロードしてください）。</p>
<p>中川さんの講演やAdobeさんのフォローでもお話がありましたが、RAWは非破壊データになります。なので、元ファイルを維持しながら変更点だけが別に保存されて、いつでも撮影時の状態に戻せるという優れものです。失敗したと思った写真も、別にあとから露出を変更したりすることができますので（限界はありますが）非常に便利です。</p>
<p>RAWはカメラによって違いますが、大体12bitや14bitのデータになっていて、白く飛んでしまったようなハイライトや暗く潰れてしまったシャドウ部分にも撮影した生のデータが記録されています（どこまで記録されているかは、メーカーやカメラのお値段にも… 笑）。なので、後からハイライトを抑えたりシャドウを持ち上げたりできると。だから、モニタのキャリブレーションも必須ってわけですね。</p>
<p>ということで、先日の写真を使ってRAW現像してみましょう。</p>
<p>※今回使うRAWファイルは、NEFというNikonの独自形式です。一応AdobeさんのCameraRAWやLightroomでも開いて処理することが可能ですが、RAWに記録された公表されていないメーカー独自の設定などが飛んでしまいます。それじゃ困るって方は、メーカーが出してる現像ソフトの方が良いでしょう。Adobeさんの提唱するDNGというRAWの形式をサポートしているカメラも多いので、気にしたくない方はそちらを買っておくといいですね（ちなみにボクはRICOHのGRDとPENTAXのK-mはDNGで撮って、Lightroomで処理しています）。</p>
<h4>まずは、CameraRAW（Lightroom）で開く</h4>
<p>まず最初にお断りしておくと、今回はCameraRAWにしましたが、CaramaRAWでもLightroomでも基本的な画面構成というか処理系等は一緒ですので、どちらでやっても同じように作業できます。CameraRAWにはバージョンがあるので、古いバージョンでは最新のカメラのRAWが開けない（というか対応していない）とかあるかもしれません。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-001.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-001-240x165.jpg" alt="raw-postprocess-001" title="raw-postprocess-001" width="240" height="165" class="alignnone size-medium wp-image-1188" /></a></p>
<p>右側にパネルがいろいろ並んでいます。上に並んだボタンをおして適宜処理を選ぶという感じです。Lightroomはこれが単純に縦にバーッと並んでいます。</p>
<p>今回は作業の前にカメラのキャリブレーション（カメラプロファイル）を「Adobe Standard」に変更しました。メーカーさんによっていくつか出てくるものが異なると思います。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-002.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-002-240x165.jpg" alt="raw-postprocess-002" title="raw-postprocess-002" width="240" height="165" class="alignnone size-medium wp-image-1187" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-003.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-003-240x165.jpg" alt="raw-postprocess-003" title="raw-postprocess-003" width="240" height="165" class="alignnone size-medium wp-image-1190" /></a></p>
<p>で、Adobeさんの初期設定だと「明るさ」と「コントラスト」がそれぞれ「+50」「+25」になっているので、これを一旦「0」に戻してみます。別に戻さなくても構わないんですが、まぁどうせやるならゼロからということで。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-004.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-004-240x165.jpg" alt="raw-postprocess-004" title="raw-postprocess-004" width="240" height="165" class="alignnone size-medium wp-image-1218" /></a></p>
<h4>ホワイトバランスを調整する</h4>
<p>撮影時にホワイトバランスのことを何も考えずに撮った場合には、状況によって白が白くなかったりしますが、それは後から「色温度」で調整可能です。今回はちょっと黄色いので、まず色温度を「2250℃」まで下げてみました。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-005.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-005-240x165.jpg" alt="raw-postprocess-005" title="raw-postprocess-005" width="240" height="165" class="alignnone size-medium wp-image-1216" /></a></p>
<h4>露出を後から調整する</h4>
<p>続いて思い切り暗く撮れているので、これを「露光量」で調整します。露出を適正に近くなるぐらいまであげてみます。ここで活躍するのが上にあるヒストグラムです。明るくすればヒストグラムの山がずれていくのが確認できるでしょう。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-006.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-006-240x165.jpg" alt="raw-postprocess-006" title="raw-postprocess-006" width="240" height="165" class="alignnone size-medium wp-image-1212" /></a></p>
<p>露出の調整はこのように後から調整できますが、カメラによってはやり過ぎるとノイズが出たりしますので「-2.0〜+2.0」の範囲で収めておきましょう。ちなみに露光量の下にある「白とび軽減」は飛んでしまったハイライト部分を抑えてくれます。</p>
<h4>全体の明るさを調整</h4>
<p>写真全体の明るさを調整するなら「明るさ」を使うと便利です。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-007.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-007-240x165.jpg" alt="raw-postprocess-007" title="raw-postprocess-007" width="240" height="165" class="alignnone size-medium wp-image-1191" /></a></p>
<p>露光量はあくまでも露出の調整です。前述したようにやり過ぎるとノイズやらが出てきます。露出補正は一定レベルで抑えておいて、全体の明るさを調整する時はこちらがいいんじゃないかと。</p>
<h4>黒レベルと補助光効果</h4>
<p>「黒レベル」はシャドウ（0）の位置を調整できます。「0」に近づけばシャドウの位置が左にずれ明るくなり、増やせば右にずれてより暗くなります。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-008.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-008-240x165.jpg" alt="raw-postprocess-008" title="raw-postprocess-008" width="240" height="165" class="alignnone size-medium wp-image-1207" /></a></p>
<p>写真はどうしてもそのままでは人間の目に見えてるようには保存してくれません。「補助光効果」は、今時でいうとこの「ダイナミックレンジ補正」に近いというか、シャドウ部分を持ち上げて暗く潰れ気味になるシャドウの部分を明るくすることができます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-009.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-009-240x165.jpg" alt="raw-postprocess-009" title="raw-postprocess-009" width="240" height="165" class="alignnone size-medium wp-image-1206" /></a></p>
<p>皿の下の部分とかが明るくなり、ちょっとだけ見た目に近づいたのがわかると思います。人間の目は優秀なんですね。</p>
<h4>コントラストや彩度を調整する</h4>
<p>あとは適宜コントラストや彩度などを調整すればまぁ大体のトコが終わりです。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-010.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-010-240x165.jpg" alt="raw-postprocess-010" title="raw-postprocess-010" width="240" height="165" class="alignnone size-medium wp-image-1193" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-011.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-011-240x165.jpg" alt="raw-postprocess-011" title="raw-postprocess-011" width="240" height="165" class="alignnone size-medium wp-image-1204" /></a></p>
<p>トーンカーブも用意されているので、ちょっと明るい部分と暗い部分のカーブを使ってコントラストを付けたい場合はそちらを使いましょう。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-012.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-012-240x165.jpg" alt="raw-postprocess-012" title="raw-postprocess-012" width="240" height="165" class="alignnone size-medium wp-image-1192" /></a></p>
<p>とまぁ、RAW現像が面倒とか思われてる方が非常に多いのですが、実際のところこないだPhotoshopだけでやった補正の作業というか手順と何ら変わりません（笑）。</p>
<h4>色範囲を個別に調整する</h4>
<p>さらにCameraRAWやLightroomでは、色の成分というか色相毎に色の強さをコントロールしたり彩度を調整することも可能です。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-013.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-013-240x165.jpg" alt="raw-postprocess-013" title="raw-postprocess-013" width="240" height="165" class="alignnone size-medium wp-image-1203" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-014.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-014-240x165.jpg" alt="raw-postprocess-014" title="raw-postprocess-014" width="240" height="165" class="alignnone size-medium wp-image-1202" /></a></p>
<h4>あとはPhotoshopで開いてリサイズとか色空間の変更を</h4>
<p>こんな感じでRAWの現像が終わったら、Photoshopで開きます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-015.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-015-240x165.jpg" alt="raw-postprocess-015" title="raw-postprocess-015" width="240" height="165" class="alignnone size-medium wp-image-1201" /></a></p>
<p>写真では画面ショットの撮影の関係で「オブジェクトとして開く」となっていますが、標準は「開く」になっています。その左にある「Adobe RGB〜」ってとこをクリックすると開く際のファイルサイズなどが設定可能です。ここでは16bitのAdobe RGBの画像として開いてみます。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-016.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-016-240x132.jpg" alt="raw-postprocess-016" title="raw-postprocess-016" width="240" height="132" class="alignnone size-medium wp-image-1200" /></a></p>
<p>埋め込まれたプロファイルで開きましょう（笑）。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-017.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-017-216x240.jpg" alt="raw-postprocess-017" title="raw-postprocess-017" width="216" height="240" class="alignnone size-medium wp-image-1194" /></a></p>
<p>Photoshopでの修正後8bitに変更します。写真の色補正だけならもう何にもすることはないんですが…（笑）。</p>
<p>で、使用用途にあわせてプロファイルを変更します。<br />
ここではネット用ということでsRGBにしましょう。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-018.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-018-217x240.jpg" alt="raw-postprocess-018" title="raw-postprocess-018" width="217" height="240" class="alignnone size-medium wp-image-1199" /></a></p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-019.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/raw-postprocess-019-240x118.jpg" alt="raw-postprocess-019" title="raw-postprocess-019" width="240" height="118" class="alignnone size-medium wp-image-1198" /></a></p>
<p>最終的にできたファイルがこれです。</p>
<p><a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/tomato-fix.jpg" rel="lightbox[cssnite39follow]"><img src="http://blog.gaspanik.com/wp-content/uploads/2009/09/tomato-fix-159x240.jpg" alt="tomato-fix" title="tomato-fix" width="159" height="240" class="alignnone size-medium wp-image-1197" /></a></p>
<p>と、このような感じです。<br />
他にもアンシャープマスクみたいな処理や色収差を補正したりノイズを除去したりといろんなことができます。非破壊データで壊れることもなく、後からいくらでも変更可能でさらにこれらの調整をコピーして他の同じような写真に適用できるなんて便利以外の何ものでもありません。<strong>使わないのはあまりにももったいない</strong>。</p>
<p>JPGで保存しておくと数年後あの写真使いたいと思っても、小さいサイズかつ加工されて保存されてもうどうしようもないとかありますからね。思い出はいつまでも綺麗なままで残しておいた方が良いかと（笑）。</p>
<p>ということで、おまけの方が長くなりましたが、こちらでCSS Niteのフォローアップとさせていただきます。</p>
<p>&rarr; <a href="http://blog.gaspanik.com/wp-content/uploads/2009/09/tomato_rawdata.zip">RAWデータのダウンロードはこちらから</a>（著作権なんて放棄しますのでご自由に）</p>
<p># Lightroomはハイブリッド版でお安いので、「写真の補正だけで終わりだよ」って方はこちらの方が最新版のカメラへの対応もCameraRAWのバージョンに影響しないのでいいんじゃないですかね。ボクは普段こっちです。</p>
<p># あ、あとNik Softwareから出ている「ColorEfex Pro」ってのがあると、写真の現像処理に関するあんなことやこんなことをフィルタ的に適用できます。最近Photoshopだけでなく、Lightroomにも対応したようです（ボクはNikonのソフトの方で使ってます）。</p>
<p>&rarr; <a href="http://www.amazon.co.jp/gp/product/B001CHLZ7M?ie=UTF8&#038;tag=gaspanik-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=B001CHLZ7M">Adobe Photoshop Lightroom 2.0</a><img src="http://www.assoc-amazon.jp/e/ir?t=gaspanik-22&#038;l=as2&#038;o=9&#038;a=B001CHLZ7M" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />（Amazon.co.jp）<br />
&rarr; <a href="http://www.amazon.co.jp/gp/product/B001AM3SEW?ie=UTF8&#038;tag=gaspanik-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=B001AM3SEW">Nik Color Efex Pro 3.0J Complete Edition</a><img src="http://www.assoc-amazon.jp/e/ir?t=gaspanik-22&#038;l=as2&#038;o=9&#038;a=B001AM3SEW" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />（Amazon.co.jp）</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/follow-up-css-nite-vol-39-photoshop/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/follow-up-css-nite-vol-39-photoshop" />
	</item>
		<item>
		<title>MacBookにMacPortsでAMPな環境を作る</title>
		<link>http://blog.gaspanik.com/set-up-web-development-environment-on-macbook</link>
		<comments>http://blog.gaspanik.com/set-up-web-development-environment-on-macbook#comments</comments>
		<pubDate>Tue, 02 Jun 2009 06:36:04 +0000</pubDate>
		<dc:creator>[cipher]</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[scribbling]]></category>
		<category><![CDATA[apache]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[environment]]></category>
		<category><![CDATA[macports]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://blog.gaspanik.com/?p=1001</guid>
		<description><![CDATA[たびたびこもりです、こんにちは（謎）。
そういえば、先週、先々週のことになるのですが、自分ちのMacBookのHDDがぶっ飛んでからやってなかったWeb制作環境の構築を「やるか！」と思い立ちまして、その時の作業記録をWi [...]]]></description>
			<content:encoded><![CDATA[<p>たびたびこもりです、こんにちは（謎）。<br />
そういえば、先週、先々週のことになるのですが、自分ちのMacBookのHDDがぶっ飛んでからやってなかったWeb制作環境の構築を「やるか！」と思い立ちまして、その時の作業記録を<a href="http://wiki.gaspanik.com/">Wiki「CipWiki」</a>にまとめてみました（というより、ただローカルから持ち出しただけ）。</p>
<p>ローカルにWeb制作環境を構築するとなると、サーバのことがわからない場合は一般的に「<a href="http://www.mamp.info/en/index.html">MAMP</a>」とか「<a href="http://www.apachefriends.org/jp/xampp.html">XAMPP</a>」を使うと思うんですが、制作環境の自由度を高めるために私は「<a href="http://www.macports.org/">MacPorts</a>」を使っています（簡単に言うと、OSとは別にUnix環境を一個作っちゃう）。</p>
<p>Wikiに書いてあることを順おって確実にやっていけば環境構築はできると思うのですが、ちょっとしたミスが原因でエラーになったりして、どうしていいか途方に暮れることになりかねません（エラー対応するにも基礎がないと大変です 笑）。</p>
<p>自由自在にコントロールできる制作環境を作りたいとか、MacPortsを使ってみたいけどどうすればいいかわからない人は、UnixのコマンドリファレンスとかApacheの解説書なんかを片手にチャレンジしてみてはいかがでしょうか。</p>
<p>※一応、自分のメモ代わり兼、知りたい人に面と向かって説明するために用意したものなので、隅から隅まで丁寧には解説してません。しかもUnixコマンドの解説などを除いた抜粋版ですので、あしからず。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gaspanik.com/set-up-web-development-environment-on-macbook/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/set-up-web-development-environment-on-macbook" />
	</item>
	</channel>
</rss>

<!-- Served from: blog.gaspanik.com @ 2010-07-30 15:17:14 by W3 Total Cache -->