<?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>KiRAMEX Developer&#039;s Blog</title>
	<atom:link href="http://developers.kiramex.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://developers.kiramex.com</link>
	<description>カウポンつくってる人たちのブログ</description>
	<lastBuildDate>Mon, 05 Sep 2011 01:35:14 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>サーバ増設のプラクティス その2</title>
		<link>http://developers.kiramex.com/413/</link>
		<comments>http://developers.kiramex.com/413/#comments</comments>
		<pubDate>Mon, 05 Sep 2011 01:03:30 +0000</pubDate>
		<dc:creator>tanaka</dc:creator>
				<category><![CDATA[システム]]></category>
		<category><![CDATA[インフラ]]></category>
		<category><![CDATA[サーバ]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=413</guid>
		<description><![CDATA[忘れた頃に更新されるキラメックス開発ブログ、前回に続き田中が担当します。 サーバ増設の事例紹介、その2です。 前回記事はこちら データベースサーバ、バッチサーバを順に整理してきましたが、いよいよウェブサーバです。 4.  [...]]]></description>
			<content:encoded><![CDATA[<p>忘れた頃に更新されるキラメックス開発ブログ、前回に続き田中が担当します。<br />
サーバ増設の事例紹介、その2です。</p>
<p>前回記事は<a href="http://developers.kiramex.com/329/">こちら</a></p>
<p>データベースサーバ、バッチサーバを順に整理してきましたが、いよいよウェブサーバです。</p>
<h3>4. ウェブサーバ</h3>
<p>ウェブサーバは3台になるので、いろいろとやることがあります。</p>
<h4>DNSラウンドロビンでアクセスをバランシング</h4>
<p>これまでkaupon.jpへのユーザアクセスは1台で受けていたので、DNSの設定も単純でしたが、今回から3台に振り分ける必要が出てきます。<br />
バランサ機器の導入や、Apacheのバランシングモジュールを入れるのも手ですが、手軽さを重視してDNSラウンドロビンを利用することにします。</p>
<p><span id="more-413"></span></p>
<p>DNSラウンドロビンは、簡単に言えばひとつのドメインに3つのIPアドレスを割り振ることで、アクセスをランダムに3台に振り分けます。<br />
手軽ではありますが、重み付けや障害時の対応等が十分ではない仕組みのため、将来的には別のやり方にしたいところです。</p>
<p><img class="alignnone size-full wp-image-450" title="DNS設定" src="http://developers.kiramex.com/wp-content/uploads/2011/09/d554e6495c06313b0a2d40fc14f91624.png" alt="" width="569" height="258" /></p>
<p>概略ですが、以下の紹介記事など参考になります（※利用のDNSサーバによって設定変わります）。</p>
<p><a title="ラウンドロビンDNSの設定" href="http://ash.jp/env/srv/rounddns.htm" target="_blank">ラウンドロビンDNSの設定</a></p>
<p>この手法でやる場合、Apacheの設定についてはこれまで通りで済みます。<br />
アプリケーション側についても、同じファイル群を各サーバに配置すればOKです。</p>
<h4>lsyncdでアップされた画像を同期</h4>
<p>次にユーザアクションによって、更新される情報の同期です。</p>
<p>DBにある情報、セッションデータについては1つのDBサーバに集約していますので、同期を意識する必要はありませんが、面倒なのが画像などのデータです。</p>
<p>ユーザがアイコン画像などをアップした際、単純にこれまで通り受け取ったウェブサーバのローカル上に配置しても、残り2台のウェブサーバには反映されません。<br />
これは問題があります。</p>
<p>対応として、画像のアップ先を1台に集約する手もありますが、アプリケーションにも改修が入るのと、画像アップ用に小さな仕組みをつくる必要が出てきます。<br />
手軽にやるのであれば、lsyncdというサーバがファイルの更新を検知すると同時にrsyncにより別サーバに瞬時に配布をおこなう仕組みがあります。</p>
<p><a title="lsyncdをつかって簡単にファイル同期を" href="http://d.hatena.ne.jp/wadap/20090913/1252839223" target="_blank">lsyncdをつかって簡単にファイル同期を</a></p>
<p>rsyncはアプリケーションデータの複数台配布やログバックアップなどにも活躍する、ファイル差分を見て同期してくれる仕組みです。</p>
<p><a title="rsync" href="http://ja.wikipedia.org/wiki/Rsync" target="_blank">rsync</a></p>
<p>この手法は、当時<a title="ロケスタ" href="http://rocketstart.co.jp/" target="_blank">ロケスタ</a>のwadapさんに教わりました。<br />
KAUPONでは当初サーバ間でNFSマウントによりファイルを共有しようとして、ウェブサーバのロード値が一瞬で100を超えた苦い思い出があります。<br />
NFSマウントは参照の度にマウント先のサーバを見にいくことになるので、性能のよいサーバや速度のでるネットワークがないと機能しないものでした。</p>
<p>その点、lsyncdは必要なファイルを差分のみサーバ間で受け渡すので、<br />
更新時に数秒のタイムラグはでるものの、参照はローカルなので1台運用の時と変わらないパフォーマンスが出せます。</p>
<p>lsyncdは相互のデータ更新はできないので、以下のような流れでデータを受け渡すようにしました。</p>
<p><img class="alignnone size-full wp-image-449" title="lsyncd" src="http://developers.kiramex.com/wp-content/uploads/2011/09/lsyncd1.png" alt="" width="644" height="447" /></p>
<p>ウェブサーバとバッチサーバにlsyncdをインストールし、設定をおこないます。</p>
<p>KAUPONでは、ユーザのアップする画像以外にも裏側で更新する静的なHTMLや、案件の入稿画像などにも同様の仕組みを用いて、サーバ間のファイル共有を実現しています。</p>
<h3>まとめ</h3>
<p>ざーっと整理してみましたが、いかがだったでしょうか。</p>
<p>さまざまなやり方がある中で、利用している環境や規模に合わせた増設をおこなうのは、アプリエンジニア出身の身としてはまだまだ難易度が高い部分ではあります。</p>
<p>事業予測とパフォーマンス予測を掛けあわせて、適切な増設計画を立てられればベストですが、なかなか計画通りに進まないのも現実です。<br />
今回は省略していますが、監視やパフォーマンスレポーティングの仕組みをうまく構築して、逐一サーバの状況を見ながら一歩先の増設計画を考えていくという作業が求められると思っています。</p>
<p>締めになりますが、以下のインフラ本は参考にさせてもらっています。<br />
内容が具体的でわかりやすく、MySQL設定項目などの詳細ものっているのでオススメです。</p>
<p><a href="http://www.amazon.co.jp/gp/product/4774135666/ref=as_li_ss_il?ie=UTF8&amp;tag=milkwortorg-22&amp;linkCode=as2&amp;camp=247&amp;creative=7399&amp;creativeASIN=4774135666"><img src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&amp;Format=_SL110_&amp;ASIN=4774135666&amp;MarketPlace=JP&amp;ID=AsinImage&amp;WS=1&amp;tag=milkwortorg-22&amp;ServiceVersion=20070822" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=&amp;l=as2&amp;o=9&amp;a=4774135666" border="0" alt="" width="1" height="1" /></p>
<p>今回はこのあたりで！</p>
<h3>引き続き採用強化中です！</h3>
<p>日々試行錯誤しながら、KAUPON開発メンバーは頑張ってます！<br />
KAUPONのインフラをもっとイケてる仕組みに変えたいという方、アプリ開発をがっつりやりたいという方、どちらの興味も歓迎ですので気になった方は以下もチェックしてみてください。</p>
<p><a href="http://www.kiramex.com/recruit/" target="_blank"><img class="alignnone size-full wp-image-325" title="夏採用開始！" src="http://developers.kiramex.com/wp-content/uploads/2011/08/summer_recruit.jpg" alt="" width="640" height="100" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/413/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>サーバ増設のプラクティス その1</title>
		<link>http://developers.kiramex.com/329/</link>
		<comments>http://developers.kiramex.com/329/#comments</comments>
		<pubDate>Mon, 29 Aug 2011 00:41:57 +0000</pubDate>
		<dc:creator>tanaka</dc:creator>
				<category><![CDATA[システム]]></category>
		<category><![CDATA[インフラ]]></category>
		<category><![CDATA[サーバ]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=329</guid>
		<description><![CDATA[こんにちは。 ひさびさの更新となりました、キラメックス開発ブログ。今回は田中が担当します。 個人の趣味的サービスにしても、ベンチャーが始めたサービスにしても、ユーザが増えてきたときに必ず直面するのがサーバ増設です。 1台 [...]]]></description>
			<content:encoded><![CDATA[<p>こんにちは。<br />
ひさびさの更新となりました、キラメックス開発ブログ。今回は田中が担当します。</p>
<p>個人の趣味的サービスにしても、ベンチャーが始めたサービスにしても、ユーザが増えてきたときに必ず直面するのが<strong>サーバ増設</strong>です。</p>
<p>1台のサーバでアクセスがさばききれなくなったとき、いずれは複数台化するタイミングがきます（きました）。</p>
<p>近年、VPS、クラウドなど、即時で立ち上げられるサービスも数多く出ていて、選択肢は広がっています。<br />
VPSであれば専用サーバよりも安く手軽に立ち上げられるし、クラウドであればコストを抑えながら日々変わるアクセス負荷に応じて、柔軟にサーバ増設や集約が可能なメリットがあります。</p>
<p>目的やコストに応じた選択が必要ですが、やり方はどうあれ、最初の増設は少々厄介です。<br />
当たり前と言われればそれまでですが、1台のサーバを2台にするのであれば、ユーザにはどちらのサーバでも同じコンテンツを見せる必要があります。</p>
<p>今回はそのあたりに軸をおいて、サービスのサーバ増設について整理してみました。</p>
<p>昨年末ごろに当時KAUPONで発生していたサーバダウンや処理遅延などの根本対策として、実際におこなった事例をベースにしています。<br />
最新のベストプラクティスではないかもしれませんが、いちサービスでの事例として参考になれば幸いです。</p>
<p><span id="more-329"></span></p>
<h3>環境について</h3>
<p>KAUPONはいわゆるLAMP環境です。</p>
<ul>
<li>Linux（CentOS）</li>
<li>Apache</li>
<li>MySQL</li>
<li>PHP</li>
</ul>
<p>多少詳しい環境についてはこちらの記事をご覧ください。</p>
<p><a href="http://developers.kiramex.com/1/">KAUPONつくってます</a><br />
<a href="http://developers.kiramex.com/273/">KAUPON開発で使ったオープンソース10個</a></p>
<h3>1. 分割単位を検討する</h3>
<p>増設にあたり、単純に同じシゴトをするサーバを増やすこともできますが、基本的には役割を分けて増設するやり方がスタンダードだと思います。</p>
<p>コンテンツを返すサーバはいっぱい必要だけど、データベース用のサーバは1個でいいよね、とかそういう話です。</p>
<p>役割を分けるために、どのようなシゴトがあるかを考えます。<br />
細かいモジュールまで見ていくとキリがありませんので、大きなシゴトのみ整理します。</p>
<ul>
<li>アプリケーション（PHP）</li>
<li>バッチ（PHP）</li>
<li>ウェブサーバ（Apache）</li>
<li>データベース（MySQL）</li>
<li>データキャッシュ（memcached）</li>
<li>メール送信（Postfix）</li>
</ul>
<p>大きくはこんなところでしょうか。</p>
<p>これを元に、増設後のサーバ構成を検討してみます。</p>
<h4>ウェブサーバ</h4>
<ul>
<li>アプリケーション（PHP）</li>
<li>ウェブサーバ（Apache）</li>
<li>メール送信（Postfix）</li>
</ul>
<h4>バッチサーバ</h4>
<ul>
<li>バッチ（PHP）</li>
<li>メール送信（Postfix）</li>
</ul>
<h4>データベースサーバ</h4>
<ul>
<li>データベース（MySQL）</li>
<li>データキャッシュ（memcached）</li>
</ul>
<p>今回、メール送信機能はDBサーバを除く各サーバに持たせることにしています。<br />
セッションデータや頻繁に参照されるデータをつっこむmemcachedはできれば別サーバにしたいところですが、コスト面を考慮してDBサーバに相乗りする形にしています。</p>
<p>ウェブサーバはアクセスを集中的に受けるため台数を調整して、以下の構成でサーバ増設を進めていくことにします。</p>
<p><a href="http://developers.kiramex.com/wp-content/uploads/2011/08/server.png" rel="lightbox[329]"><img class="alignnone size-full wp-image-369" title="サーバ増設前後" src="http://developers.kiramex.com/wp-content/uploads/2011/08/server.png" alt="" width="493" height="416" /></a></p>
<h4>before</h4>
<ul>
<li>サーバ×1</li>
</ul>
<h4>after</h4>
<ul>
<li>ウェブサーバ×3</li>
<li>バッチサーバ×1</li>
<li>データベースサーバ×1</li>
</ul>
<h3>2. データベースサーバ</h3>
<p>まずはデータベースサーバです。</p>
<p>データベースサーバを分けることにより、大量アクセスなどでCPU使用率やメモリ使用率があがった場合でも、MySQLやmemcachedに処理影響を与えにくい構成がとれるようになります。</p>
<h4>MySQLはソケット通信からポート通信に</h4>
<p>これまではサーバ内のDBを見ていましたが、今回から別のサーバのDBを見ることになるので、ソケット通信からポート通信に変わります。<br />
セキュリティを考慮して、標準ポートの変更、サーバのポート開放、ユーザアクセス権限をおこなっておきます。</p>
<p>ユーザアクセス権限については、ホスト単位でのアクセス制限などをおこないます。</p>
<p>具体的なSQL例などは以下のサイトにお世話になってます。</p>
<p><a title="MySQL講座 [Smart]" href="http://rfs.jp/server/mysql/" target="_blank">MySQL講座 [Smart]</a></p>
<p>よくはまるのでTIPSとして。<br />
権限変更時は反映のためのFLUSH文の実行を忘れずに。これが原因で権限反映できてないことに気づくと悲しくなります。</p>
<pre class="brush: sql; gutter: true; first-line: 1">FLUSH PRIVILEGES;</pre>
<p>アプリケーション側については、設定を切り替えるだけでよく、cakePHPであればapp/config/database.phpを編集して、ソケットファイルしてからポート番号指定に切り替えればOKです。</p>
<h4>memcachedはそのまま利用</h4>
<p>memcachedは、ローカルホストの接続でもポートを使用して通信していますので利用方法は基本的には変わらずです。<br />
MySQL同様、セキュリティを考慮し、標準ポートの変更、サーバのポート開放をおこないます。</p>
<h3>3. バッチサーバ</h3>
<p>次はバッチサーバです。</p>
<p>バッチサーバを分けることにより、集計処理やメルマガ送信時のバッチ処理などによりCPU使用率やメモリ使用率があがった場合でも、ユーザレスポンスに影響が及ばなくなります。<br />
今回はバッチサーバを1台としていますが、将来的な複数台化や処理時間が増加した際に同サーバ内での並列実行ができるように、それぞれのバッチを分割実行できる形にしておけると楽だと思います。</p>
<h4>バッチ処理をグループ化して実行しやすく</h4>
<p>KAUPONでは、例えばこんな感じでバッチ処理を引数でグループ化して、分割実行ができる形にしています。</p>
<pre class="brush: shell; gutter: true; first-line: 1">/hogehoge/shell_exec.sh daily_magazine 1
/hogehoge/shell_exec.sh daily_magazine 2
/hogehoge/shell_exec.sh daily_magazine 3
/hogehoge/shell_exec.sh daily_magazine 4
/hogehoge/shell_exec.sh daily_magazine 5</pre>
<p>グループ化にはIDをグループ数で割った余りをよく使います。</p>
<p>ユーザIDならユーザID%5+1とかすれば、日々IDが増えても均等に1～5のグループをつくることができます。</p>
<p>&nbsp;</p>
<p>今回はこのあたりで。次回は増設の肝となるウェブサーバを整理します。</p>
<h3>引き続き採用強化中です！</h3>
<p>日々試行錯誤しながら、KAUPON開発メンバーは頑張ってます！<br />
KAUPONのインフラをもっとイケてる仕組みに変えたいという方、アプリ開発をがっつりやりたいという方、どちらの興味も歓迎ですので気になった方は以下もチェックしてみてください。</p>
<p><a href="http://www.kiramex.com/recruit/" target="_blank"><img class="alignnone size-full wp-image-325" title="夏採用開始！" src="http://developers.kiramex.com/wp-content/uploads/2011/08/summer_recruit.jpg" alt="" width="640" height="100" /></a></p>
<p>また、デザイナーについても募集中ですのでご興味ある方はぜひ！<br />
<a href="http://www.find-job.net/list/j87536.html">ソーシャルコマースサイト「KAUPON」のWebデザイナー</a></p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/329/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>KAUPON開発で使ったオープンソース10個</title>
		<link>http://developers.kiramex.com/273/</link>
		<comments>http://developers.kiramex.com/273/#comments</comments>
		<pubDate>Wed, 03 Aug 2011 02:07:44 +0000</pubDate>
		<dc:creator>murata</dc:creator>
				<category><![CDATA[コラム]]></category>
		<category><![CDATA[OSS]]></category>
		<category><![CDATA[オープンソース]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=273</guid>
		<description><![CDATA[はじめまして、キラメックスの社長の村田です。 KiRAMEX Deveroper&#8217;s Blog 初投稿です。 個人的にはキラメックスの社長のブログというものでたまに思ったこととか書いたりしてるんですが、こちら [...]]]></description>
			<content:encoded><![CDATA[<p>はじめまして、キラメックスの社長の村田です。<br />
KiRAMEX Deveroper&#8217;s Blog 初投稿です。</p>
<p>個人的には<a href="http://murata.kiramex.com" target="_blank">キラメックスの社長のブログ</a>というものでたまに思ったこととか書いたりしてるんですが、こちらでは技術話やクリエィティブに関することを書いていって、誰かの役に立つといいなぁと思ってます。</p>
<p>さて第1回目の投稿ですが、「KAUPON開発で使ったオープンソース10個」というタイトルですが、KAUPONは2010年5月にローンチしてまして、当時キラメックスはまだ僕だけでお金もなく、学生のR君に一部手伝ってもらいながらもほぼ一人でシステムからプログラムにデザインと全部やる必要があったので、とにかくお金を掛けずに効率良くやることを心がけていました。格好良く言うとそうですが、まぁそうしないとビジネスとして成り立たたない状況でした。</p>
<p>そんな中、カウポンを作って行く上で陰の英雄とも言えるOSS（オープンソース）にはとてもお世話になりましてので、ここで感謝の気持ちも込めて、ローンチ当時利用していたOSSを紹介させていただこうと思います！</p>
<p><span id="more-273"></span></p>
<h3>システム編</h3>
<h4><a href="http://www.centos.org/" target="_blank">Linux (CentOS)</a></h4>
<p>Redhat系の方が個人的に慣れていて好きなので使っています。ありがとうございます。</p>
<h4><a href="http://www.apache.org/" target="_blank">Apache</a></h4>
<p>言わずと知れた世界中でもっとも使われているWebサーバソフトウェア。ありがとうございます。</p>
<h4><a href="http://www-jp.mysql.com/" target="_blank">MySQL</a></h4>
<p>こちらも言わずと知れた世界中でもっとも使われているオープンソースデータベース。ありがとうございます。</p>
<h4><a href="http://www.postfix.org/" target="_blank">Postfix</a></h4>
<p>使いやすいMTA。リリース当初はSendmail使ってたんですが、そっこうで重くなって落ちて焦ってPostfixに変更したのは今では良い思い出。ありがとうございます。</p>
<h3>プログラム編</h3>
<h4><a href="http://www.php.net/" target="_blank">PHP</a></h4>
<p>全てPHPで書いてます。利用者が多く、色々とドキュメントやソースが落ちていて独学でも勉強しやすいので僕にはピッタリ。ありがとうございます。</p>
<h4><a href="http://cakephp.jp/" target="_blank">CakePHP</a></h4>
<p>PHP用の高速開発フレームワーク。非常に高速に効率良く開発できて便利。普通に使うと重いですが色々とイジれば問題無し。ありがとうございます。</p>
<h3>デザイン編</h3>
<h4><a href="http://jquery.com/" target="_blank">jQuery</a></h4>
<p>JavaScriptライブラリ。実装しやすく軽くて便利。これだけでちょっとリッチなサイトにできます。ありがとうございます。</p>
<h4><a href="http://www.famfamfam.com/lab/icons/" target="_blank">FAMFAMFAM icon</a></h4>
<p>オープンソースではないですがMark Jamesさんのフリーアイコン集。種類が豊富でデザインもGoodなので多様させていただきました。いろんなサイトで見ますよね。ありがとうございます。</p>
<h3>番外編</h3>
<h4><a href="http://subversion.tigris.org/" target="_blank">Subversion</a></h4>
<p>バージョン管理システム。ミスってもすぐ戻せるので安心開発。ありがとうございます。</p>
<h4><a href="http://redmine.jp/ target=">Redmine</a></h4>
<p>プロジェクト管理ソフトウェア。忘れないようにタスク管理したり、進捗管理したり。ありがとうございます。</p>
<p>&nbsp;</p>
<p>以上がKAUPONローンチ当初利用していたOSS10個です。今でも使っているものが多数ですが、開始当初よりシステムの規模も大きくなり、それに合わせて変更や追加したものも多くなっています。そういうものはまた違うメンバーから紹介があるかもしれませんね。</p>
<p>このようにOSSを使うことでスタートアップでもお金を掛けずに素早くサービスが開発できます。ただそれにはOSSを作っている人たちの努力があるから、ということを忘れないようにしたいものです。これらがなければKAUPONは作れなかった！</p>
<h3>最後に</h3>
<p>上記のようなOSSを駆使しながら新しい価値を創るべく、KAUPON開発メンバーは日々頑張ってます！もしご興味があれば是非JOINしてほしいなぁと思っていますので、お気軽にご応募ください！</p>
<p><a href="http://www.kiramex.com/recruit/" target="_blank"><img src="http://developers.kiramex.com/wp-content/uploads/2011/08/summer_recruit.jpg" alt="" title="夏採用開始！" width="640" height="100" class="alignnone size-full wp-image-325" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/273/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS（特にCSS3）の指定方法を考察してみた</title>
		<link>http://developers.kiramex.com/251/</link>
		<comments>http://developers.kiramex.com/251/#comments</comments>
		<pubDate>Fri, 08 Jul 2011 08:50:53 +0000</pubDate>
		<dc:creator>kyamamoto</dc:creator>
				<category><![CDATA[デザイン]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=251</guid>
		<description><![CDATA[はじめまして、キラメックスでデザインやマークアップを担当している山本ケントです。 初めての投稿になりますが、今回は「CSSの指定方法、こうやれば使いやすいんじゃ？」というテーマで（短めに）お送りします。 例えば新たなWE [...]]]></description>
			<content:encoded><![CDATA[<p>はじめまして、キラメックスでデザインやマークアップを担当している山本ケントです。</p>
<p>初めての投稿になりますが、今回は「CSSの指定方法、こうやれば使いやすいんじゃ？」というテーマで（短めに）お送りします。</p>
<p>例えば新たなWEBサイトのコーディングで、.main-boxというクラスを作るとします。</p>
<pre class="brush: css; gutter: true; first-line: 1">.main-box {
	float: left;
	width: 500px;
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
}</pre>
<p>ちょっと寂しいですね、CSS3を使って装飾してみましょう</p>
<pre class="brush: css; gutter: true; first-line: 1">.main-box {
	float: left;
	width: 500px;
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}</pre>
<p>それっぽい感じになりました。その後コーディングを進めていくうちに、.sub-boxが必要になりました。</p>
<pre class="brush: css; gutter: true; first-line: 1">.sub-box {
	float: right;
	width: 250px;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
}</pre>
<p>これもちょっと寂しいですね、デザインを統一したいので.main-boxに合わせてみましょう</p>
<pre class="brush: css; gutter: true; first-line: 1">.sub-box {
	float: right;
	width: 250px;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}</pre>
<p>それっぽい感じになりました。</p>
<p>…て進めていくと、何回も同じプロパティを書く事になってファイルサイズも大きくなるし面倒ですよね。なので、class名をプロパティのまとまり的に切ってみました。<br />
<span id="more-251"></span></p>
<pre class="brush: css; gutter: true; first-line: 1">.main-box {
	width: 500px;
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
}
.sub-box {
	width: 250px;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
}
.leftcol {
	float: left;
}
.rightcol {
	float: right;
}
.radius5 {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.shadow3 {
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}</pre>
<p>こんな感じでどうでしょうか。HTMLは</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div class="wrapper clearfix"&gt;
	&lt;div class="main-box leftcol radius5 shadow3"&gt;
		some contents…
	&lt;/div&gt;
	&lt;div class="sub-box rightcol radius5 shadow3"&gt;
		some contents...
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p>的な感じでマークアップすれば良いですね。さらに分解してみます。</p>
<pre class="brush: css; gutter: true; first-line: 1">.border-box {
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
}
.plain-box {
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
}
.unit-500 {
	width: 500px;
}
.unit-250 {
	width: 250px;
}
.leftcol {
	float: left;
}
.rightcol {
	float: right;
}
.radius5 {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.shadow3 {
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}</pre>
<p>どうでしょうか。HTMLは</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div class="wrapper clearfix"&gt;
	&lt;div class="border-box unit-500 leftcol radius5 shadow3"&gt;
		some contents…
	&lt;/div&gt;
	&lt;div class="plain-box unit-250 rightcol radius5 shadow3"&gt;
		some contents...
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p>的な感じに。さらに</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div class="wrapper clearfix"&gt;
	&lt;div class="unit-500 leftcol"&gt;
		&lt;div class="border-box radius5 shadow3"&gt;
			some contents…
		&lt;/div&gt;
		&lt;div class="plain-box radius5 shadow3"&gt;
			some contents…
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="unit-250 rightcol"&gt;
		&lt;div class="plain-box radius5 shadow3"&gt;
			some contents...
		&lt;/div&gt;
		&lt;div class="border-box radius5 shadow3"&gt;
			some contents…
		&lt;/div&gt;
		&lt;div class="plain-box"&gt;
			some contents...
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p>やり過ぎかもしれませんがこんな感じで書いてくことが出来ますね。この「unit-500, unit-250」部分をCSSグリッドフレームワークと組み合わせたりすれば、より使い易くなりそうです。</p>
<p>あとは例えば、.search-boxとか先に作った後で「あー他のページで同じデザインの部分あったのにsearchとか名前付けちゃったから使い回し出来ない！」的な事もなくなりそうですね。</p>
<p>今回は以上です。では！</p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/251/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>コーディング規約のススメ</title>
		<link>http://developers.kiramex.com/184/</link>
		<comments>http://developers.kiramex.com/184/#comments</comments>
		<pubDate>Thu, 30 Jun 2011 01:35:21 +0000</pubDate>
		<dc:creator>yamamoto</dc:creator>
				<category><![CDATA[システム]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=184</guid>
		<description><![CDATA[みなさん初めまして。キラメックスで開発を担当している、山本ふみやです。 最初の投稿ということで、ゆるーいお話からさせていただこうかと思っています。 今回のブログのテーマは「コーディング規約」です。 #前回の田中の投稿で、 [...]]]></description>
			<content:encoded><![CDATA[<p>みなさん初めまして。キラメックスで開発を担当している、<a href="http://developers.kiramex.com/yamamoto/">山本ふみや</a>です。</p>
<p>最初の投稿ということで、ゆるーいお話からさせていただこうかと思っています。</p>
<p>今回のブログのテーマは<strong>「コーディング規約」</strong>です。<br />
<span style="color: gray;">#前回の<a href="http://developers.kiramex.com/tanaka/">田中</a>の投稿で、バッチエース(バッチを書くのが好きなだけです)とか言われたので、バッチについて書こうかとも思いましたが、それはまたそのうち。すんません。</span></p>
<p><span id="more-184"></span><br />
&nbsp;</p>
<p>プログラミング言語には、コーディング規約と呼ばれるものが存在します。基本的なコーディングスタイルや、命名規則についてまとめられた、コーディング時の決め事です。<br />
誤解を恐れずに言えば、コーディング時のちょっとした基準になる程度のものなので、そんなに強制力を持つようなものではありません。<br />
ただ、コーディング規約を知らないまま実装を進めてしまうと、とある問題が発生します。</p>
<p>それは、書く人によって、</p>
<p><span style="font-size: large;"><strong>違う言語で実装してるんじゃないか？</strong></span></p>
<p>と思うくらいに、別物に見えるソースコードになってしまう可能性があるということです。<br />
その結果、可読性が低下し、保守性が低下します。特に、現在のPHPのような、記述方法に強い強制力が無い言語では、それが顕著に表れます。</p>
<p>もちろんシステムとして稼働はしているのですが、<strong>動けばいい</strong>は、あまり美しいとは言えませんよね。<br />
上位のアーキテクトがきちんとしていれば、きっと誰が書いても同じようなソースコードになるはずです。そして、それが理想だと思っています。</p>
<p>例えば、一つ一つのコントローラーやバッチが、それぞれまったく違う記法で記述されていたら、なんとなく気持ち悪いじゃないですか。<br />
いや、動くんですけどね。動くんですけど。<span style="font-size: large;">動いてるんですけど。</span></p>
<p>ネジの色が一本一本違っていたら、気持ち悪いじゃないですか。そんなことないですか？</p>
<p>陶芸家は、<br />
<font size="5" color="red"><strong>ご飯食べれれば何でもいいだろ</strong></font></p>
<p>なんて言って茶碗を作るようなことはしないですよね【謎】</p>
<p>&nbsp;</p>
<p>ということで、「コーディング規約を守る」ということを、強く勧めたいのです。<br />
KAUPONでは主にPHPを使用しているので、PHPを例にお話してみますかね。</p>
<p>たとえば、<span style="font-size: small;"><strong>Python</strong></span>のソースコードは（えっ？）</p>
<pre class="brush: python; gutter: true; first-line: 1">def hoge(x):
    if x == 0:
        return 1
    else:
        return 0</pre>
<p>↑こんな感じです。</p>
<p>たとえば、<span style="font-size: small;"><strong>Haskell</strong></span>のソースコードは（えっ？）</p>
<pre class="brush: php; gutter: true; first-line: 1">main = do s &lt;- getContents
          putStr s</pre>
<p>↑こんな感じです。</p>
<p>上記の両方の言語に共通するコーディング規約があります。それはぼくの大好きなコーディング規約の一つで、<strong>「ブロック構造をインデントによって記述する」</strong>というものです。<br />
一見普通に見えるソースコードですが、上記のどちらも、<b>if文</b>や<b>do記法</b>のインデントが少しでも違っていたら動作しません。これによって、自然と、誰が書いても同じような雰囲気を持つソースコードになります。</p>
<p>では、<span style="font-size: small;"><strong>PHP</strong></span>はどうでしょう。</p>
<pre class="brush: php; gutter: true; first-line: 1">public function hoge($x)
{
    if ($x == 0) {
        return true;
    } else {
        return false;
    }
}</pre>
<p>↑これは正常に動きます。</p>
<pre class="brush: php; gutter: true; first-line: 1">function hoge($x) {
    if ($x == 0) return true;
    return false;
}</pre>
<p>↑これも正常に動きます。</p>
<pre class="brush: php; gutter: true; first-line: 1">public function hoge($x)
{
   if ($x == 0) {
   return true;
     }
   else {
   return false;
   }
}</pre>
<p>↑これも正常に動きます。</p>
<p><font size="6" color="red"><strong>おかしいだろ</strong></font></p>
<p>&nbsp;</p>
<p>そこで、コーディング規約の登場です。<br />
PHPでは主にPEARの<a href="http://pear.php.net/manual/ja/standards.php">コーディング規約</a>が使われます。Zendの規約もありますが、PEARコーディング規約の方が使用されるケースが多いかと思います。</p>
<p>コーディング規約を守ることで、複数人での実装時も、ソースコードに統一性が出ます。それによって、可読性や保守性が上がります。ソースコードの品質が上がるのです。</p>
<p>必ずしもPEARのコーディング規約に従わなければいけないというわけでもありません。プロジェクト内で独自のコーディング規約を設定するというのも良いかと思います。<br />
問題はあくまでも、実装に関するアーキテクトがきちんとしていないということです。</p>
<p>PHPは本当に様々な書き方ができます。それはメリットでもあり、デメリットでもあります。エンジニアをそのまま映す鏡とでも言っておきましょうか。（別にうまくねぇ）</p>
<p>ほんの少しだけ時間を取って、もう一度コーディング規約を読んでみませんか？新しい発見があるかもしれませんし。</p>
<p><font size="7" color="red"><strong>「switch文のdefault句で何も処理をしない場合は、あえて何も処理をしていない旨をコメントに残す。」</strong></font><br />
とかね。</p>
<p><span style="font-size: large;"><strong>まじなんだよそれそんなの知らねぇよ。</strong></span><br />
と思ったアナタ！コーディング規約を熟読しましょう。</p>
<p><span style="font-size: large;"><strong>そんなの知ってるよ。普通のこと言ってんじゃねぇよ。</strong></span><br />
と思ったアナタ！偉そうなことを言ってしまい、大変申し訳ございませんでした。次回はもう少しがんばります。</p>
<p>&nbsp;</p>
<p>PythonやHaskellのようにコーディング規約を守らないと、動作しないような言語であれば、誰が書いてもある程度は似たようなソースコードになります。だからPythonが好きだっていう人もいますしね（ぼくも）。</p>
<p>でも、PHPだってアーキテクトさえきちんとすれば、誰が書いても似たようなソースコードになるはずなんです。良いソースコードが書けるはずなんです。</p>
<p>PHPだったら、エラーレベルで<strong>E_STRICT</strong>を設定しておけば、PHP5の記述方法に準拠していない場合は、注意してくれます。これも良いかと思います。ある程度ソースコードに統一性が出ますので。</p>
<p>&nbsp;</p>
<p>いろんな人が参加するプロジェクトで、<br />
いくつもバッチがあって、<br />
それぞれ別の人が作っていて、<br />
それぞれがぜんぜん違うソースコード。<br />
ちょっと嫌じゃないですか？</p>
<p>もちろん冒頭でも述べた通り、コーディング規約にそこまでの強制力はありません。あくまでも、実装に対するアーキテクトの参考の一つです。<br />
まぁエンジニアであれば、人それぞれにこだわりはあると思いますし、このコーディング規約はどうなの？って思う規約もあるでしょうし、その辺りのアレ【謎】は、うまいことやってもらえれば。</p>
<p>なんていうか、やっぱり、ソースコード見て、<font size="3" color="red">エレガントだね</font>って言われたいじゃないですか。</p>
<p>と、そんな感じで今回は終わりにしたいと思います。<br />
次回はビッキビキデザイナー兼マークアップエンジニアの<a href="http://developers.kiramex.com/kyamamoto/">けんと氏</a>です。</p>
<p>&nbsp;</p>
<p>では、また。</p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/184/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>KAUPONつくってます</title>
		<link>http://developers.kiramex.com/1/</link>
		<comments>http://developers.kiramex.com/1/#comments</comments>
		<pubDate>Mon, 27 Jun 2011 00:00:30 +0000</pubDate>
		<dc:creator>tanaka</dc:creator>
				<category><![CDATA[システム]]></category>

		<guid isPermaLink="false">http://developers.kiramex.com/?p=1</guid>
		<description><![CDATA[はじめまして、田中です。 今日から、キラメックスでサービスをつくってる人たちのブログがスタートしました。 技術/デザインネタなどを中心に社内の開発メンバー持ち回りでゆるく更新していきますので、どうぞよろしくお願いします。 [...]]]></description>
			<content:encoded><![CDATA[<p>はじめまして、<a href="http://developers.kiramex.com/tanaka/">田中</a>です。</p>
<p>今日から、キラメックスでサービスをつくってる人たちのブログがスタートしました。</p>
<p>技術/デザインネタなどを中心に社内の開発メンバー持ち回りでゆるく更新していきますので、どうぞよろしくお願いします。</p>
<p>初めての記事ということで、今回はKAUPONで使っている技術の話をざっくりしたいと思います。</p>
<p><span id="more-1"></span></p>
<p>&nbsp;</p>
<p>言語はPHPを使っています。</p>
<p>PHPは型の扱いやエラー処理などがJavaなどと比べるとゆるめな言語ではありますが、その分柔軟で書きやすく、ネット上のドキュメントも豊富なため、とくに小さくサービスを立ち上げるには適した言語だと思っています。</p>
<p>PHPを扱えるエンジニアが世の中に多いのも魅力です。</p>
<p>&nbsp;</p>
<p>フレームワークはCakePHPを使っています。</p>
<p>フロントだけでなく、バッチでもしっかりと利用することができるので、かなり重宝しています。<br />
RubyのRailsを元にしているだけあって、記述ルールさえ守れば設定で悩まされることもなく、また自分たちで拡張もしやすいフレームワークです。</p>
<p>KAUPONの場合も、PC版、モバイル版、バッチその他で使い回したいモデルやライブラリ群を共通化するために構成を一部独自化して対応しています。</p>
<p>cakeは重い！という話も耳にしますが、ページキャッシュを利用したり、アクセスの多いページはcakeを通さないなど、独自の仕組みもかけ合わせることでパフォーマンスを担保しています。</p>
<p>フレームワークを使うと開発生産性が高い分、パフォーマンスが落ちてしまうのは仕方がないことなので、生産性とパフォーマンスを天秤にかけながら、必要なところにはちょっとだけ手を入れています。</p>
<p>&nbsp;</p>
<p>データベースはMySQLを使っています。</p>
<p>マスタ・スレーブの構成をとっていますが、現在はスレーブは分析用途としてサービスからは切り離した形で使っています。</p>
<p>DBアクセスを減らすために、フレームワーク側で参照データをmemcachedに格納させて使いまわしたり、参照条件は単純だけれどもアクセスが頻繁で大量なデータについてはCassandraにも持たせたりすることでDBに負荷が集中しない仕組みをつくっています。</p>
<p>特にマイフレンド機能や、買った人の顔を表示する機能の部分では、Cassandraが大活躍してくれています。</p>
<p>&nbsp;</p>
<p>現在はKAUPONや管理ツールなどを含め、専用ネットワーク＋専用サーバ数台で運用をしています。</p>
<p>トレンドから言えば、クラウド利用や仮想化サーバをもっと活用する手もあると思いますが、アプリ出身者中心でエンジニア人数も限られた状況で、あまり多くのサーバを運用するのは得策ではないという判断から、現在は専用サーバで安定した運用体制をとっています。</p>
<p>とはいえ、身軽さがベンチャーのうりでもあるので、状況やトレンドに応じて利用する技術やインフラ構成の見直しはしていきたいと考えています。</p>
<p>&nbsp;</p>
<p>だいぶざっくりとKAUPONで使っている技術の話をさせてもらいましたが、いかがだったでしょうか。</p>
<p>今後もう少し掘り下げた話や、具体的なサービス運用にまつわる話を書いていければと思いますので、よろしくお願いします。</p>
<p>&nbsp;</p>
<p>次回はキラメックスのバッチエース、<a href="http://developers.kiramex.com/yamamoto/">ふみや</a>が登場します。</p>
]]></content:encoded>
			<wfw:commentRss>http://developers.kiramex.com/1/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

