<?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</title> <atom:link href="http://blog.gaspanik.com/feed" rel="self" type="application/rss+xml" /><link>http://blog.gaspanik.com</link> <description>beat one's brain</description> <lastBuildDate>Thu, 11 Mar 2010 07:35:26 +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/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>では、あらためてFlowdockを紹介しよう</title><link>http://blog.gaspanik.com/introduce-flowdock</link> <comments>http://blog.gaspanik.com/introduce-flowdock#comments</comments> <pubDate>Thu, 11 Mar 2010 02:53:57 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[collaboration]]></category> <category><![CDATA[management]]></category> <category><![CDATA[project]]></category> <category><![CDATA[tools]]></category> <category><![CDATA[webservices]]></category> <category><![CDATA[work]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2942</guid> <description><![CDATA[ひとつ前のエントリーで「仕事の仕方を変えるかもしれない」と紹介したFlowdock、いきなりの負荷に耐えきれずなのか正常稼働していませんでしたが、無事に復活しサインアップもできるようになっていたのであらためて紹介します（ [...]]]></description> <content:encoded><![CDATA[<p>ひとつ前のエントリーで「仕事の仕方を変えるかもしれない」と紹介した<a href="http://www.flowdock.com/">Flowdock</a>、いきなりの負荷に耐えきれずなのか正常稼働していませんでしたが、無事に復活しサインアップもできるようになっていたのであらためて紹介します（単に長くなるから分けただけ 笑）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-001.jpg" alt="" title="flowdock-001" width="450" height="253" class="alignnone size-full wp-image-2927" /><br /> &rarr; <a href="http://www.flowdock.com/">Flowdock</a>（現在はサインアップできます）</p><p><span id="more-2942"></span></p><h3>アカウントを取得してメンバーを招待してはじめよう</h3><p>アカウントの登録が終わったら自分のホーム画面に移動します。アカウント1つあれば、チームやプロジェクト毎に「Flow」と呼ばれる独立したワークスペース的なものを用意できます。使用するFlowをクリックするとそのDashboardが表示されますので、Flowに参加して欲しいメンバーをメールで招待しましょう。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-003.png" alt="" title="flowdock-003" width="450" height="253" class="alignnone size-full wp-image-2931" /></p><p>既にFlowdockのメンバーであれば、招待メールのリンクから自分のアカウントでログインすることが可能です（そうでない場合はサインアップ）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-004.png" alt="" title="flowdock-004" width="450" height="253" class="alignnone size-full wp-image-2932" /></p><p>招待された人がログインすればほぼリアルタイムでDashboardにあらわれます。Flowdockの右側に見えるペインでは、チャットしたりファイルを添付したりといったやりとりが可能です。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-005.png" alt="" title="flowdock-005" width="450" height="253" class="alignnone size-full wp-image-2933" /></p><p>このぐらいだったら別にFlowdockじゃなくてもいいわけですが（笑）、Flowdockはここからが違います。</p><h3>「Influx」にRSSやTwitter、メールなどを読み込む</h3><p>Dashboardの左に並ぶ3つのボタンの上から2番目「Influx」をクリックすると、外部のRSSや特定のTwitterのフィード、メールなどをストリームのような形で表示することが可能です。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-006.png" alt="" title="flowdock-006" width="450" height="253" class="alignnone size-full wp-image-2934" /></p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-007.png" alt="" title="flowdock-007" width="450" height="253" class="alignnone size-full wp-image-2935" /></p><p>フィードやTwitterのストリームの追加はこのダイアログから、メールはFlow毎に用意されるメールアカウントに対してメールを投稿することでここに表示されるようです。つまり、複数人が参加しているプロジェクトやグループ内での通知事項は、そのアドレスに投げておけば自動的にこの画面に現れると。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-009.png" alt="" title="flowdock-009" width="450" height="253" class="alignnone size-full wp-image-2937" /></p><p>Influxに流れてくるものは、個々にコメントをつけたりすることもできるようになっていますので、メンバー同士で意見を交わすみたいなことができます。なので、別に仕事じゃなくて特定の趣味のグループを作って、そこでワイワイやるといった使い方もありでしょう。</p><h3>特定の話題やファイルの検索は「Flowser」で</h3><p>チーム単位での仕事になるといろいろな事柄が毎日毎日起こっていくはずです。「あの話ってどうだったんだっけ？」みたいに過去を遡るのも大変です。Influxで流れる内容にはコメントだけでなくタグを付与することもできますので、それらを見つけるにはボタンの上から3番目の「Flowser」を使います。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-010.png" alt="" title="flowdock-010" width="450" height="253" class="alignnone size-full wp-image-2938" /></p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-011.png" alt="" title="flowdock-011" width="450" height="253" class="alignnone size-full wp-image-2939" /></p><p>特定のタグを検索したり、ファイルだけを表示したりすることも可能と。</p><h3>動作は軽快。仕事だけじゃなくても使えそう</h3><p>こんな感じでGoogle Waveと比較されそうな感じのFlowdockですが、できることが明快な上に動作も軽快です。チーム内のコラボレーションはもちろんですが、1つのアカウントでFlow自体は複数作れるので、Twitterなどで仲良くなった人たちとお出かけするためのグループミーティングみたいな場としても活用できるかもしれません。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-012.png" alt="" title="flowdock-012" width="450" height="253" class="alignnone size-full wp-image-2940" /></p><p>こんな感じで右側にある「＋」を押せば新しいFlowが作れます。</p><p>画面のインターフェイスは英語になりますが、できることが限られているので使い方に迷うようなことはないかな、と。日本語も通りますし。現在はまだパブリックβという扱いなので、今後の発展に期待したいと思います。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/introduce-flowdock/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/introduce-flowdock" /> </item> <item><title>Google Wave？、それともFlowdock？</title><link>http://blog.gaspanik.com/teamwork-revolution-flowdock</link> <comments>http://blog.gaspanik.com/teamwork-revolution-flowdock#comments</comments> <pubDate>Wed, 10 Mar 2010 19:20:32 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[collaboration]]></category> <category><![CDATA[management]]></category> <category><![CDATA[productivity]]></category> <category><![CDATA[tools]]></category> <category><![CDATA[webservices]]></category> <category><![CDATA[work]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2929</guid> <description><![CDATA[世の中にはいろんな仕事の仕方があります。複数の会社やチームのメンバーでプロジェクトを進行する場合などは、古くから使われてるメーリングリストやWikiなどのツール、チャットや音声通話が利用できるIMなどを使っている方も多い [...]]]></description> <content:encoded><![CDATA[<p>世の中にはいろんな仕事の仕方があります。複数の会社やチームのメンバーでプロジェクトを進行する場合などは、古くから使われてるメーリングリストやWikiなどのツール、チャットや音声通話が利用できるIMなどを使っている方も多いかもしれません。</p><p>最近では、高機能なプロジェクトマネジメントシステムだったり、Google Waveなんかも出てきちゃったりで、複数の会社をまたいだプロジェクトのマネジメントというか、制作チーム単位での工程管理というか、複数人でコミュニケーションを取りながら仕事を進めるスタイルにも変化の兆しがありますね。</p><p>Google Waveも鳴り物いりで登場した割には、全体的に重いからなのか使い道が思いつかないからなのか、近頃はあまりその話を目にする機会も少なくなりました（使っている方も多いとは思いますが）。が、ここにきて新しい仕事のやり方ができそうなコミュニケーションツールが登場です。その名も「<a href="http://flowdock.com/">Flowdock</a>」。</p><p><span id="more-2929"></span></p><h3>Flowdockは何やら良さそげですぞ</h3><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-001.jpg" alt="" title="flowdock-001" width="450" height="253" class="alignnone size-full wp-image-2927" /></p><p>このFlowdock、日本時間の3月11日未明にベータアカウントの登録が可能になっていました。サイトにあるビデオを見る限りGoogle Waveに似た感じもありますが、Twitterなどとも連携しているようで何やら良さそうな雰囲気です。</p><p>ここで「<strong>…いました</strong>」とか「<strong>良さそうな…</strong>」と書いてるのには実は訳がありまして…（笑）。なんだかんだで一気に広まって急激な負荷がかかっているのか、今のところ正常稼働できてないようです（中の人のつぶやきによると）。<del datetime="2010-03-11T02:06:11+00:00">で、残念ながら現在はインビテーションのリクエスト状態になっています。</del>どうやら復活したようで、現在はサインアップできるようになっています（2010.03.11午前の段階で）。</p><p>ボクは速攻でアカウントをいくつか作ったんで「紹介でもしとこうか」とパソコンに向かったのですが、こちらも残念ながらこの画面より先に進めません（笑）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/flowdock-002.jpg" alt="" title="flowdock-002" width="450" height="253" class="alignnone size-full wp-image-2928" /></p><p>追って使い方などを紹介できればと考えておりますが、そんなわけなので今日のところはこの辺で閉めたいと思います。<del datetime="2010-03-11T02:06:11+00:00">興味のある方はサイトの紹介ビデオを見るなり、β版のインビテーションリクエストを送るなりしておくと良いですね。</del></p><p>ひょっとしたら仕事の仕方が変わるかもしれません。</p><p><strong>（追記: 2010.03.11）</strong><br /> 復活していたので<a href="http://blog.gaspanik.com/introduce-flowdock">簡単に使い方を書いてみました</a>。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/teamwork-revolution-flowdock/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/teamwork-revolution-flowdock" /> </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>WPのパフォーマンスを改善してみようか</title><link>http://blog.gaspanik.com/wordpress-performance-optimization</link> <comments>http://blog.gaspanik.com/wordpress-performance-optimization#comments</comments> <pubDate>Tue, 09 Mar 2010 10:36:12 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[performance]]></category> <category><![CDATA[plugins]]></category> <category><![CDATA[tips]]></category> <category><![CDATA[wordpress]]></category> <category><![CDATA[wp]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2914</guid> <description><![CDATA[日本のWeb業界でもそろそろサイトの表示パフォーマンスをどうにかしなきゃなぁ…と考えている方もいらっしゃることでしょう（ごく一部かもしれませんが 笑）。いわゆる普通のWebサイトの表示パフォーマンスの改善については、ここ [...]]]></description> <content:encoded><![CDATA[<p>日本のWeb業界でもそろそろサイトの表示パフォーマンスをどうにかしなきゃなぁ…と考えている方もいらっしゃることでしょう（ごく一部かもしれませんが 笑）。いわゆる普通のWebサイトの表示パフォーマンスの改善については、ここでも年末から数回にわたって取り上げています。</p><ul><li><a href="http://blog.gaspanik.com/web-designing-102-and-websites-performance">Webサイトの高速化的な話をWD誌で</a></li><li><a href="http://blog.gaspanik.com/how-to-use-yslow-addon">YSlow!、使ってわかるあんなことこんなこと</a></li><li><a href="http://blog.gaspanik.com/how-to-use-page-speed">Page Speedでチェックついでに最適化</a></li><li><a href="http://blog.gaspanik.com/google-page-speed-16">Page Speedが1.6βになったようで</a></li></ul><p>ここのエントリーに挙げた以外に、ちょっと前にゲリラ的にUSTREAMでくっちゃべってみたところ反響も大きかったようです（最初の回は特に他のどこ探してもないことも言いましたしね、フフフ）。</p><p>で、今回はこのブログでも使っているWordPressのパフォーマンスをアップさせるためにできることをいくつか紹介したいと思います。「できる」「できない」は設置されている環境で異なりますのであしからず。</p><p>最後にどこでも設置できるプラグインも含めておりますので、最後までお読みいただければ幸いです。すんごい長いので気合い入れてくださいね（笑）。</p><p><strong>※一番最後にパフォーマンス計測のためのリンクを追加しました</strong></p><p><span id="more-2914"></span></p><h3>まずはWordPressの仕組みからおさらい</h3><p>CMSとしての活用事例も多いWordPressですが（海外ではね 笑）、「そもそも何故パフォーマンス改善が必要なのか」というところから話をはじめましょう。</p><p>WordPressは、基本的に静的なHTMLを生成するMovableTypeと違って、PHPを使ってリクエストのたびに動的にコンテンツを生成する仕組みです。ブラウザからのリクエストがWebサーバに届いたら、PHPがMySQLに格納されたデータを読み出し、テンプレートを使ってリクエストURLに応じたHTMLを逐一生成してる、と。</p><p>パフォーマンスチューニングされたホスティングにおいてあれば回線環境も処理速度も速いかもしれませんが、そういったケースばかりではありません。中には自宅サーバで運用されているうちみたいな貧弱な環境もあります。</p><p>そこで、Webサーバとその上で動いているPHPが処理する時間を改善し、さらにWebサイトの高速化のための手法を組み合わせることでパフォーマンスアップを図ろうじゃないか、ということですね。</p><p>閲覧側は高速なブロードバンド環境ばかりではありませんし、最近だとTwitter経由でiPhoneから閲覧することもあります。見にきてくれる人をいかに待たせないで、ストレスなく見てもらうかといったことも考えなければいけません。</p><p>ま、前振りはこれぐらいにして本編にいきましょう。</p><h3>PHPの処理をキャッシュさせて速くする</h3><p>VPS（バーチャル・プライベート・サーバ）やDedicated Serverみたいな比較的自由度の高いプランで契約されていれば、サーバの構成などを管理者側で設定できます。そのような環境に置かれていれば、PHPの処理そのものを高速化するといったことが可能です。このような処理をおこなうものに「<a href="http://eaccelerator.net/">eAccelerator</a>」や「<a href="http://pecl.php.net/package/APC">APC（Advanced PHP Cache）</a>」、「<a href="http://pecl.php.net/package/memcache">memcache</a>」などがあります。</p><p>ここでは詳しい話はしませんが、この辺りをサーバに突っ込んであげるだけでPHPの処理にかかる部分のパフォーマンスは大きく改善されるでしょう。ちなみにうちはAPCとmemcacheが入ってますが、それは後ほどあらためて。</p><h3>動的生成しないでHTMLをキャッシュさせる</h3><p>ここからがいわゆる普通のホスティングサービスでも採用できるかもしれない方法です。ここからはWordPressのプラグインを利用します。</p><p>先に述べたようにクライアント側からリクエストがあった場合、そのリクエストされたURLをWebサーバ側のWordPressが動的に生成します。この動的に生成している部分をMovableTypeのように静的なHTMLファイルとしてキャッシュしておいて、新たなリクエストがあった場合にはそれを送り返しちゃうと。</p><p>このような仕組みを実現できるプラグインはいくつかあるようなんですが、ここでは利用者の多い「<a href="http://ocaoimh.ie/wp-super-cache/">WP Super Cache</a>」と前述のPHPの高速化処理と組み合わせられる「<a href="http://www.w3-edge.com/wordpress-plugins/w3-total-cache/">W3 Total Cache</a>」の2種類を紹介しましょう。</p><p>いずれのプラグインもWebサーバ側で「mod_rewrite」的なURLの書き換え処理ができる環境でないといけないかな、たぶん。なので、サイトを運用する時は安いプランだけじゃなくて、自由度をある程度高くしておいた方が都合が良いのです（笑）。</p><h4>WP Super Cacheのインストールと注意事項</h4><p>では、まずはWP Super Cacheから。iidaのサイトもこれを採用されてる風。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-000s.png" alt="" title="wp-performance-000s" width="450" height="253" class="alignnone size-full wp-image-2902" /><br /> &rarr; <a href="http://ocaoimh.ie/wp-super-cache/">WordPress Super Cache</a></p><p>インストールは、プラグインの公開サイトからダウンロードしてもいいですし、WPの管理画面から直接インストールすることもできます。</p><p>次に紹介するW3 Total Cacheもそうなんですが、これらのプラグインのインストール時には、「wp-config.php」の中の<strong>「define(&#8216;ABSPATH&#8217;〜」の行の前</strong>あたりに以下の記述を追加しなければなりません。</p><p><code><strong>define('WP_CACHE', true);</strong></code></p><p>ついでと言ってはなんですが、あらかじめ「wp-content」のパーミッションを「777」にしておくと、有効化の時とかにいちいちアラートが出てこないので楽です（終わったら755なり、元のパーミッションに戻します）。</p><p>日本語版にインストールすれば日本語で設定項目が出てきますので、特に設定に困ることはないですかね。いくつか設定項目をピックアップしてみます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-001.png" alt="" title="wp-performance-001" width="450" height="253" class="alignnone size-full wp-image-2904" /></p><p>ま、こんな感じです。<br /> 一番上に「オン」「ハーフオン」「オフ」の切り替えボタンがありますので、そこでWP Super Cacheをの機能をオンにします。あとはWP Super Cacheの基本的な挙動のスイッチがありますので、必要に応じてチェックを入れましょう。</p><p>サイトによっては日本の携帯電話用にサイトをフォーマットしてくれる「Ktai-Style」やiPhone用の「WPtouch」などを利用しているかもしれません。そのような場合は「Mobile device support using」を必ず有効にしておきましょう。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-002.png" alt="" title="wp-performance-002" width="450" height="253" class="alignnone size-full wp-image-2907" /></p><p>WP Super Cacheは生成した静的なHTMLをGzip圧縮して送ることもできるようになっています。これを有効にすれば転送データ量を1/3程度に抑えられますが、必ずしもすべてのサイトでできるとは限りません（と書かれています 笑）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-003.png" alt="" title="wp-performance-003" width="450" height="253" class="alignnone size-full wp-image-2908" /></p><p>WP Super Cacheで生成される静的なHTMLは「cache」ディレクトリに保存されますので、リクエストがあった場合はそちらにリダイレクトする必要があります。その役目を果たすのが「mod_rewrite」なので、指定された場所にある.htaccessに表示されている内容を追加しましょう。</p><p>設定を変更した場合も何か変わってないかチェックしましょうね。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-004.png" alt="" title="wp-performance-004" width="450" height="253" class="alignnone size-full wp-image-2909" /></p><p>その他、除外するファイルやURIなどは別で設定可能です。あとは、ファイルの有効期限などを設定すれば終わりです。これ以下にもろもろ設定項目が並んでいますが、ほとんど使いませんかね、たぶん。</p><p>以上が、WP Super Cache編でした。</p><h4>W3 Total Cacheのインストールと注意事項</h4><p>W3 Total Cacheは、WP Super Cacheと同様、静的なHTMLをキャッシュしてクライアントに送ることができるプラグインです。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-000t.png" alt="" title="wp-performance-000t" width="450" height="253" class="alignnone size-full wp-image-2903" /><br /> &rarr; <a href="http://www.w3-edge.com/wordpress-plugins/w3-total-cache/">W3 Total Cache</a></p><p>厳密には同じではなくて、より高機能で設定項目も多く、サーバの仕様にあわせて細かくカスタマイズできるのが特徴です。ページのキャッシュだけでなく、Minify化したものやデータベースのキャッシュも保持できたり、CDN（コンテンツ・デリバリー・ネットワーク）の設定までできる優れものなんですね。余談ですが、開発者の人はTwitterでも話しかけてきます（笑）。</p><p>インストールは、WP Super Cacheと同じ手順でおこないます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-005.png" alt="" title="wp-performance-005" width="450" height="253" class="alignnone size-full wp-image-2910" /></p><p>残念ながらインターフェイスは日本語化されていませんが、「基本設定」「ページのキャッシュ設定」「Minifyの設定」「データベースのキャッシュ設定」「CDNの設定」といったところですね。</p><p>一番上のチェックボックスで機能のオン・オフを切り替えます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-006.png" alt="" title="wp-performance-006" width="450" height="253" class="alignnone size-full wp-image-2905" /></p><p>こちらのW3 Total Cache、単に静的なページをディスクにキャッシュするだけではありません。ページのキャッシュ、Minifyのキャッシュ、データベースのキャッシュにmemcacheやAPCを使うことができます（それらがなければ、ディスクです、たぶん）。オン・オフは個別に設定できます。</p><p>とある海外サイトのパフォーマンス計測結果によるとページのキャッシュは「Disk（enhanced）」にしておくとより高速化できるといったことが書かれていました。ディスクに溜め込むので、当然mod_rewriteが必要になります。</p><p>うちも長らくWP Total Cacheのお世話になってましたが、先日ふと思い立ってこちらに乗り換えました。現在の設定は、ページキャッシュを「Disk（enhanced）」、Minifyとデータベースのキャッシュを「APC」にしています。memcacheでもしばらく回してみたんですけど、どうにも不安定で結局この設定です。</p><p>で、携帯向けの対応をしている場合に注意点があります。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-007.png" alt="" title="wp-performance-007" width="450" height="253" class="alignnone size-full wp-image-2911" /></p><p>先のKtai-StyleやWPtouchが入っている場合、それらに対してページのキャッシュやMinify化をしない方が無難です。ページキャッシュの設定にある「Rejected User Agents」に除外対象を追加しましょう（※一番下にあるモバイルのUAをまるごとコピペすればいいです）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-008.png" alt="" title="wp-performance-008" width="450" height="253" class="alignnone size-full wp-image-2906" /></p><p>Minify化したキャッシュも同様。「Minify Setting」にあるリジェクトのところに先ほどの携帯端末のUA一覧を貼り付けておきましょう。ただし、iPhoneやiPod touchに対してはMinify化をかけても問題ないので、それから除外してもオッケイです（ボクの検証結果では）。</p><p>このW3 Total Cacheはかなり細かいところまで手が届くプラグインです。もちろん特定URlの除外やGzip圧縮などもサポートしています。WP Total Cacheに比べてmod_rewriteの記述も少ないですし、自由度の高い環境の方はこちらの方がいいかもしれません。</p><p>ただし、特定サイトのディレクトリ以下に配したマルチブログ的な環境だとうまくいかないかも（というか、うまくいかなかったｗ）。マルチブログ環境については、フォーラムにいろいろ書かれていました（WP次期バージョンに向けてどうこうとか）。</p><p>といった感じでW3 Total Cache編でした。</p><h3>キャッシュできなくても、別の部分を改善する</h3><p>「mod_rewriteとかそもそもなんなの？」とか「使えるかどうかわかんないしー」みたいな方でも、いくつかのプラグインに頼ることでWordPressの表示パフォーマンスは改善可能です（といっても、なんでも入れればいいってわけではない 笑）。</p><p>まずひとつめは、WordPressのプラグインなどに勝手に組み込まれるヘッダ内のJavaScriptなどの位置を変えて高速化を図る方法があります。</p><h4>Head Cleanerで表示速度の改善をする</h4><p>この類のプラグインもまたいくつかありますが、日本発の「Head Cleaner」が一度になんでもかんでも処理してくれるんじゃないでしょうか（ボクは入れたことはないんですが、かなりいろいろできるようです）。もちろんWP Super Cacheなどと併用することもできます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-000h.png" alt="" title="wp-performance-000h" width="450" height="253" class="alignnone size-full wp-image-2912" /><br /> &rarr; <a href="http://dogmap.jp/2009/02/20/head-cleaner/">Head Cleaner</a></p><p>何故このようなヘッダ内のお掃除が必要になるかというと、複数のJavaScriptの読み込みやscript要素の順番によっては、特定のブラウザでページの構成要素のダウンロードが妨げられたりします。</p><p>なので、複数のJavaScriptやCSSをひとつにまとめてリクエストを減らしたり、改行やコメントを取ってMinify化したりすることで転送量を減らすことができます。また、ページの描画に関係のないJavaScriptなどは&lt;/body&gt;の直前に配置したりすれば、なおよろしと。</p><p>うちは何でもかんでもプラグインに頼るのもなんなので、プラグインの数も抑えてhead要素内に組み込まれるものは手動でまとめています。</p><h4>WP Smush.itで画像を最適化する</h4><p>次にできること。表示速度はページ内に含まれる画像の数にも左右されます。何の気なしにPhotoshopなどで書き出したJPGやPNG画像には実はいらないデータが含まれていることもあります（特にJPG）。アップする画像も実はさらに最適化を施すことでデータ量をガクッと下げることができるんですね。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/wp-performance-000w.png" alt="" title="wp-performance-000w" width="450" height="253" class="alignnone size-full wp-image-2913" /><br /> &rarr; <a href="http://dialect.ca/code/wp-smushit/">WP Smush.it Wordpress Plugin</a></p><p>「WP Smush.it」は、アメリカのYahoo!の「Smush.it&#8482;」を経由してアップロード画像を最適化してしまうプラグインです。たまにミスることもありますが、その時はあらためて「Re-Smush」すれば大丈夫でしょう。最適化されたかどうかのチェックやRe-Smushは、メディアのライブラリで確認可能です。</p><p>すべての画像が最適化されるわけではなく、必要のあるものだけが最適化されます。JPGなんかはビックリするぐらいデータ量が減るかもしれません（笑）。ちなみにGIFとPNGだったら、PNGの方が軽いです。</p><p>とまぁ、キャッシュできなくても表示パフォーマンスアップのために役立つプラグインが公開されていますので、試してみてはいかがでしょうか。</p><h3>見てくれる人のことを考えてやれることはやりましょう</h3><p>以上で、WordPressのパフォーマンス改善のためのアレコレの紹介は終わります。まぁ、見に来てくれる人のことを考えれば、少しでも速く表示された方がいいわけです（自分だって他見る時そうでしょう？）。幸い、WordPressは仕様のせいもあってかこのようなプラグインが多数公開されています。制作者の方にお礼を述べつつ、使えるものは使ってみるといいかもしれません。</p><p>最後に。この辺の話はまたゲリラ的に<a href="http://ustre.am/4KY">USTREAM</a>で喋る予定です。ここに書いた内容を補足する感じになると思いますが、「文章じゃわかりづらいよ」って方はボクの<a href="http://twitter.com/cipher">Twitter</a>でもリストに入れておいてください（フォローするとうざい 笑）。</p><p><strong>（追記: 2010.03.10）</strong><br /> そういえば、パフォーマンスの計測ツールをご存じない方もいらっしゃるかもしれませんので、こちらで以前紹介していたリストのアドレスをご参考までに。</p><ul><li><a href="http://blog.gaspanik.com/website-performance-check-services">Webサイトのパフォーマンスチェックサービス</a></li></ul><p>新しく一個サービスを追加してあります。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/wordpress-performance-optimization/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/wordpress-performance-optimization" /> </item> <item><title>ShoutEmでプライベートなTwitter+Foursquareを</title><link>http://blog.gaspanik.com/create-private-social-networking-site-by-shoutem</link> <comments>http://blog.gaspanik.com/create-private-social-networking-site-by-shoutem#comments</comments> <pubDate>Mon, 08 Mar 2010 10:23:57 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[webservices]]></category> <category><![CDATA[websites]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2901</guid> <description><![CDATA[TwitterとFoursquareを足したサービス「ShoutEm」というのがありまして、先週末ぐらいにMashableで紹介されていました。単純に足しただけだと「また何かできたのか」ぐらいに思われるんですが、これが自 [...]]]></description> <content:encoded><![CDATA[<p>TwitterとFoursquareを足したサービス「<a href="http://www.shoutem.com/">ShoutEm</a>」というのがありまして、先週末ぐらいにMashableで紹介されていました。単純に足しただけだと「また何かできたのか」ぐらいに思われるんですが、これが自分専用のロケーションベースなソーシャルネットワーキングサイトが作れちゃうんです。しかも、ちゃんとiPhoneアプリなんかもあったりしてね。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/shoutem-001.png" alt="" title="shoutem-001" width="450" height="253" class="alignnone size-full wp-image-2896" /></p><p>いかんせんインターフェイスが英語になっちゃうので紹介するのはやめとこかと思ったのですが、使いようによってはクローズドなネットワークで使えるかもしれないので簡単に書くだけ書いてみます。</p><p><span id="more-2901"></span></p><h3>アカウントを作ればすぐ自分専用のサイトのできあがり</h3><p>サイトの真ん中ぐらいにある「Create network」をクリックしてアカウントを作ります。アカウント登録時にタイトルや見た目なんかを指定できます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/shoutem-002.png" alt="" title="shoutem-002" width="450" height="253" class="alignnone size-full wp-image-2897" /></p><p>完成すればこんな感じ。ほとんどTwitterです（笑）。</p><p>完全にプライベートモードにしたければ、これ自体をプライベートにしてTwitterとかFacebookと連動させないようにした方がいいですね。自分自身のアカウントもTwitterと連動できて同時投稿とかもできるんですが、それだとプライベートにはならないので注意が必要です（笑）。</p><p>PC用のサイトでは、参加メンバーの権限設定のようなこともできます。</p><h3>iPhoneアプリはTwitterクライアントとしても</h3><p>ShoutEmは既にiPhoneアプリが公開されています。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/shoutem-003.png" alt="" title="shoutem-003" width="450" height="253" class="alignnone size-full wp-image-2898" /></p><p>起動したら公開されているネットワークが表示されますが、それは無視してとりあえず先ほど作った自分のサイト名を入れて探します。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/shoutem-004.png" alt="" title="shoutem-004" width="450" height="253" class="alignnone size-full wp-image-2899" /></p><p>で、アカウントの情報を入れてログインしましょう。このアプリはTwitterのアカウントも別で登録できるので、Twitterクライアントとしても動作します（見た目は英語だけど、日本語も問題ありません）。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/shoutem-005.png" alt="" title="shoutem-005" width="450" height="253" class="alignnone size-full wp-image-2900" /></p><p>タイトルにあるように「Twitter+Foursquare」みたいなもんですから、チェックインの機能なんかもあります。つぶやく時は右にある「Shout」のボタンを押しましょう。あとは、写真を添付したり場所を添付したりとまぁ一通りのことができるようになっています。</p><p>とまぁ、大体こんな感じです。Twitterと連動させなければサイト自体を非公開にもできますから、趣味のグループなんかでの連絡とかにはいいかもしれませんね。果たして、Twitterとか他のものと併用するかどうかはわかりませんが（笑）。</p><p>以上、いざとなったらプライベートでロケーションベースのソーシャルネットワークサイトが作れるShoutEmの紹介でした。先々はプレミアムアカウントなんかもできて有料版もできるようです、はい。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/create-private-social-networking-site-by-shoutem/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/create-private-social-networking-site-by-shoutem" /> </item> <item><title>Google BuzzのiPhoneアプリ、Buzzie</title><link>http://blog.gaspanik.com/buzzie-app-for-google-buzz</link> <comments>http://blog.gaspanik.com/buzzie-app-for-google-buzz#comments</comments> <pubDate>Thu, 04 Mar 2010 13:01:05 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[apps]]></category> <category><![CDATA[buzz]]></category> <category><![CDATA[google]]></category> <category><![CDATA[googlebuzz]]></category> <category><![CDATA[iphone]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2895</guid> <description><![CDATA[Googleさんがリリースした「Buzz」使ってます？ 登場当初はプライバシーの問題があーだこーだ言われてましたが。Google Buzzはひとつのつぶやきに対してスレッド式でコメントが繋がっていく、以前Googleが買 [...]]]></description> <content:encoded><![CDATA[<p>Googleさんがリリースした「<a href="http://www.google.com/buzz">Buzz</a>」使ってます？ 登場当初はプライバシーの問題があーだこーだ言われてましたが。Google Buzzはひとつのつぶやきに対してスレッド式でコメントが繋がっていく、以前Googleが買収してほっぽらかした<a href="http://jaiku.com/">Jaiku</a>みたいなもんですね。iPhoneなんかでも普通にWebアプリとして動作してるんですが、いまいちロードが遅かったりもします。</p><p>そんなBuzzの使い勝手を解消してくれるサードパーティのiPhoneアプリ「Buzzie」が出たようです。あいにく無償ではなく230円になりますが（レートおかしいけど）、Webアプリよりはつぶやきやすいですし、フォロワーのつぶやきをみるのもコメントもしやすい感じですね。取り急ぎお知らせまで。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/buzzie.png" alt="" title="buzzie-for-iphone" width="450" height="253" class="alignnone size-full wp-image-2894" /></p><p>&rarr; <a href="http://bit.ly/9gXF5c">Buzzie</a>（iTunesStore）</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/buzzie-app-for-google-buzz/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/buzzie-app-for-google-buzz" /> </item> <item><title>Perchを使ってみたよ</title><link>http://blog.gaspanik.com/really-simple-cms-perch</link> <comments>http://blog.gaspanik.com/really-simple-cms-perch#comments</comments> <pubDate>Thu, 04 Mar 2010 04:32:50 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[works]]></category> <category><![CDATA[cms]]></category> <category><![CDATA[tips]]></category> <category><![CDATA[webdesign]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2892</guid> <description><![CDATA[また、半年以上前のネタをほじくり返してみたいと思います（笑）。去年の7月ぐらいにシンプルでお手軽そうなCMSが出てるんだけど…ってことで、「Perch」を紹介しました。なかなか実稼働するサイトに導入する機会がなかったので [...]]]></description> <content:encoded><![CDATA[<p>また、半年以上前のネタをほじくり返してみたいと思います（笑）。去年の7月ぐらいにシンプルでお手軽そうなCMSが出てるんだけど…ってことで、「<a href="http://grabaperch.com/">Perch</a>」を<a href="http://blog.gaspanik.com/little-cms-perch">紹介しました</a>。なかなか実稼働するサイトに導入する機会がなかったのですが、今回とあるサイトに導入してみたところあまりにも手軽すぎて泣けそうなので、あらためて導入手順などを簡単に書き記したいと思います。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/perchcms-000.jpg" alt="" title="perchcms-000" width="450" height="253" class="alignnone size-full wp-image-2890" /></p><p>1サイトあたり52USDの有償のCMSですが、サイトで動くかどうかの「Compatibility Suite」も用意されているので購入前に試すことが可能です。ちなみに動作に必要なシステム条件は、PHP 5.x以上、MySQL 4.1.x以上になっています。</p><p>では、簡単に導入までのプロセスを。</p><p><span id="more-2892"></span></p><h3>設置は簡単2分で終わる</h3><p>Perchのライセンスの購入は、必要事項を入力してPayPalで支払えば終わりです。自動的に自分のアカウントページに移動するので、そちらでライセンスの番号などを確認します（稼働サイトのドメインやテストサイトのドメインを入力する）。あとは配布ファイルをダウンロードして解凍後、中にある「perch」のディレクトリをサーバのルートディレクトリあたりに放り込むだけです。</p><p>放り込んだディレクトリにアクセスするとインストール作業の開始です。あらかじめDBを一個作ってMySQLの接続情報とPerchのシステムにログインするためのアカウント情報などを入力します。それが終われば、表示された初期設定のコードをconfig.phpにコピペしてお終い。setup用のディレクトは削除してしまいましょう。</p><h3>編集対象を追加する</h3><p>そのままPerchにログインしても何も表示されませんので、既存のサイトのコンテンツで編集対象を設定します。</p><p>.phpの拡張子だけでなく.htmlで利用したければ、.htaccessのAddTypeを使ってHTMLをphpとして動作させましょう。</p><p><code><strong>AddType application/x-httpd-php .php .phtml .html</strong></code></p><p>コンテンツにPerch側で編集可能なエリアを設定するには、対象ファイルの冒頭（HTMLだったら頭のDOCTYPEの前とか）に以下の記述を追加します。</p><p><code><strong>&lt;?php include('perch/runtime.php'); ?&gt;</strong></code></p><p>Perchのインストールディレクトリは適当に置き換えてください。で、上記のinclude文を追加したら、ページ内で編集対象にしたい箇所を以下の記述で置き換えます。</p><p><code><strong>&lt;?php perch_content('編集対象のラベル'); ?&gt;</strong></code></p><p>「編集対象のラベル」の部分が管理画面の中で編集対象のラベルになりますので、例えば「NewsSection」とか適当な名前に置き換えてください。これをページ内で編集対象にしたい箇所を必要な分だけこのコードに置き換えます。</p><p>設定はこれでお終い（笑）。</p><h3>編集対象ブロックを定義する</h3><p>Perchの管理画面にログインすると、編集対象に設定した箇所のリストが表示されて「New」のマークが表示されます。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/perchcms-002.png" alt="" title="perchcms-002" width="450" height="253" class="alignnone size-full wp-image-2888" /></p><p>この画面は設定後に撮ってしまったのですが、追加した編集対象のラベルをクリックすることでその部分に入るコンテンツの種別を設定し、中に入るテキストなどを編集して保存できるようになります。</p><p><img src="http://blog.gaspanik.com/wp-content/uploads/2010/03/perchcms-003.png" alt="" title="perchcms-003" width="450" height="253" class="alignnone size-full wp-image-2889" /></p><p>例えば、こんな感じで特定のdiv要素内をまとめてコードブロックとして設定してHTMLを書くこともできます。もちろん、こんな使い方ではなく、任意のタグの中のテキスト1文だけを編集可能にしたり、画像だけを差し替えるようなこともできます（何ができるかは<a href="http://docs.grabaperch.com/v1/gettingstarted/">マニュアル</a>で）。</p><p>また、この編集対象は特定ページだけで使う以外に、それをシェアすることでサイト内の複数ページにわたって内容を使い回すこともできるようになっています。ページの構成次第では一箇所変えれば、すべてに適用されるってことですね。</p><h3>これぐらいシンプルな方がいいでしょう、きっと</h3><p>MovableTypeやらWordPress、それ以外のCMSを導入するまでもないサイトはいっぱいあるはずです。かといって、Cotributeだと領域設定や使い方教えたりも必要になりますし、下手にFTPとか空けてガンブラーにやられても困るでしょう（笑）。既存のページの特定箇所だけを編集可能にするのはこれが一番簡単ですね。</p><p>サイトの更新をクライアントの担当者の方がおこなうと考えた場合、MTやWPのような複雑な画面だとContribute以上に操作説明が大変です。このぐらいシンプルな管理画面でやることが明確な方がいいですよね。PerchはAdmin権限とEditor権限の2種類のロール設定が可能なので、更新担当のアカウントはEditor権限にして必要な項目だけ表示させれば間違いもおきません。</p><p>インストールに2分、設定に3分で簡単なCMSができあがります。<br /> ものは使いようってことですね（笑）。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/really-simple-cms-perch/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/really-simple-cms-perch" /> </item> </channel> </rss>
<!-- This site's performance optimized by W3 Total Cache. Dramatically improve the speed and reliability of your blog!

Learn more about our WordPress Plugins: http://www.w3-edge.com/wordpress-plugins/

Minified using apc
Page Caching using disk (enhanced) (user agent is rejected)
Database Caching 12/15 queries in 0.007 seconds using apc

Served from: ns.gaspanik.com @ 2010-03-12 03:40:28 -->