CloudFlare 導入記

当サイトに、CloudFlare 導入しました。その際に公開側と編集側のアドレスを別々にすることによって、キャッシュを回避する方法を紹介します。

この文章は、ホスティングで複数ドメインの管理や DNS の基本操作、PHPの初級者程度の知識、concrete5 の初級知識を有している人向けです。

■ 私の英語ブログ
http://en.katzueno.com/2011/06/14/using-cloudflare-for-concrete5/
■ 本家のフォーラム
http://www.concrete5.org/community/forums/customizing_c5/using-cloudflare/

にも書きました。取り急ぎ、やり方だけを書いておきます。どなたか、詳しい解説をお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ CloudFlare と ホストのサブドメイン設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CloudFlare では「EXAMPLE.COM」のサイトをCloud化して、底のページにアクセスするとくアッシュ化された情報がダウンロードされます。

サイトのデザインなどをしている場合、キャッシュされたくない場合があります。

そんな時、CloudFlareでは「direct.EXAMPLE.COM」という、サブドメインを、CloudFlare のサービスをバイパスするサービスとして使うのはどうかという提案をしています。

ですので、「direct.EXAMPLE.COM」などのサブドメインなどを使って、正常に concrete5 サイトにアクセスできる方法を紹介します。

この方法は、確認する限り、

・Plesk
・cPanel
・さくらインターネット
・ロリポップ
・CORESERVER

でできるとおもいます。サブドメインでも、メインドメインのディレクトリーにアクセスできるように設定をしておいてください。

以下のサンプルコードは、サブドメインを「direct」としたケースで紹介します。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ /config/site.php 変更
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下のコードを入れてください。<?php ?> タグがきちんと囲まれているかいないかで、付けるか付けないかの判断をお願いします。

<?php
if (strpos($_SERVER['HTTP_HOST'],'direct') !== FALSE) {
define('REDIRECT_TO_BASE_URL', false); }
?>

if (strpos($_SERVER['HTTP_HOST'],'direct') !== FALSE) ?>
<meta name="robots" content="noindex, nofollow">
<?php } else { ?>
<meta name="robots" content="index, follow">
<?php } ?>

Re: 【重要】公式サイトに CloudFlare を導入?

みなさん、ありがとうございました。

それでは、CloudFlare に移行してみました。

静的なコンテンツをダウンロードするときに最適化されるはずです。
速度はどうなったかな〜。

MAMP: Mac OS X で隠れファイル「.htaccess」等を表示する方法

Mac では、「MAMP」というソフトを使うと、レンタルサーバーをわざわざ借りることなく、concrete5 を含め、様々な CMS をインストール出来ます。

昨日、名古屋ユーザーグループミーティングで、とある方が、concrete5 が上手く起動しないトラブルに直面されていました。「concrete5/」フォルダーの中にファイルをコピーし、ブラウザーで「localhost/concrete5/」でアクセスしてもファイルが見つからないのです。

原因は、MAMP のトップフォルダー「/アプリケーション/MAMP/htdocs/」の中に、隠れ設定ファイル「.htaccess」がいつの間にか保存され、それが下位フォルダーの concrete5 に悪さしいたのです。プロでも、見えない隠れファイルが悪さしているなんて分かるのが難しいです。

concrete5 のトラブルではありませんが、Mac や Windows を使って、concrete5 をローカルでテスト構築される方は、隠れファイルを常に表示されるのた良いでしょう。

Mac OS X で隠れファイルを表示させる方法です。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
その1：ウィジェットを使う
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ダッシュボードで、簡単に、隠れファイルの表示、非表示を切り替えられます。
http://www.apple.com/downloads/dashboard/developer/hiddenfiles.html



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ターミナルで、コマンドを入力して行う
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ウィジェットをインストールするのが面倒くさい方はこちら。

・アプリケーション - ユーティリティー - ターミナルを起動する
・以下のコマンドを入力

defaults write com.apple.finder AppleShowAllFiles TRUE

defaults write com.apple.finder AppleShowAllFiles FALSE

ページリスト・カスタムテンプレート：縮小画像や Twitter、Facebook ボタンを表示

2011年6月、名古屋 concrete5 勉強会で話した、ページリストに、縮小画像を表示するためのサンプルです。

取り急ぎ、サンプルだけ置いておきます。

だれか、解説して〜(￣ー￣)ﾆﾔﾘ

縮小画像「page_thumbnail」属性の画像を300x250に強制的にリサイズして表示。
ページリストのリンク先の Twitter のツイート、Facebook の「いいね」の数を表示。

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$textHelper = Loader::helper("text");
// now that we're in the specialized content file for this block type,
// we'll include this block type's class, and pass the block to it, and get
// the content

if (count($cArray) > 0) { ?>
<div class="ccm-page-list">
<div class="divider"></div>
<?php
for ($i = 0; $i < count($cArray); $i++ ) {
$cobj = $cArray[$i];
$title = $cobj->getCollectionName();
$lfb = LibraryFileBlockController::getFile($cobj->getAttribute('page_thumbnail')->fID);
$YokosoPageListThumbnail300 = $lfb->getThumbnail(300,250)->src;
if ($YokosoPageListThumbnail300) { ?>
<div class="ccm-page-list-thumbnail">
<a href="<?php echo $nh->getLinkToCollection($cobj)?>">
<img src="<?php echo $YokosoPageListThumbnail300 ?>" alt="<?php echo $title ?>" />
</a></div>
<?php
} else {
?>
<div class="ccm-page-list-thumbnail">
<a href="<?php echo $nh->getLinkToCollection($cobj)?>">
<img src="<?php echo BASE_URL . DIR_REL;?>/themes/japanexp_simple/images/pagelistnoimage300.gif" alt="" width="300" height="250" />
</a>
</div>
<?php }
?>
<div class="ccm-page-list-social">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo BASE_URL . DIR_REL . $nh->getLinkToCollection($cobj)?>" data-text="<?php echo $title?>" data-count="horizontal" data-via="YokosoNews">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><fb:like layout="button_count" font="arial" href="<?php echo BASE_URL . DIR_REL . $nh->getLinkToCollection($cobj)?>"></fb:like>
</div>
<h3 class="ccm-page-list-title"><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
<div class="ccm-page-list-date"><?php echo $cobj->getCollectionDatePublic ('M jS, Y'); ?></div>
<div class="ccm-page-list-date">Posted by <?php
$YokosoPageAuthor = User::getByUserID($cobj->getCollectionUserID());
print $YokosoPageAuthor->getUserName();
?></div>
<div class="ccm-page-list-description">
<?php
if(!$controller->truncateSummaries){
echo $cobj->getCollectionDescription();
}else{
echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars);
}
?> <a href="<?php echo $nh->getLinkToCollection($cobj)?>">Read More</a>
</div>
<div class="divider" style="clear:both"></div>
<?php }
if(!$previewMode && $controller->rss) {
$btID = $b->getBlockTypeID();
$bt = BlockType::getByID($btID);
$uh = Loader::helper('concrete/urls');
$rssUrl = $controller->getRssUrl($b);
}
?>
</div>
<?php }

if ($paginate && $num > 0 && is_object($pl)) {
$pl->displayPaging();
}

?>

Google+1 を concrete5 に埋め込む方法

＜参考＞

■ Twitter 「ツイートする」ボタンと Facebook App を埋め込む方法
http://concrete5-japan.org/community/forums/development/post-908/





6月1日より、サービス開始となった、Google+1ボタンを、当 concrete5 公式サイトに、入れてみました。

今回 concrete5 公式サイトは、既に作られているページがたくさんあるため、テーマファイルに直接コードを埋め込みましたが・・・下書き共通ブロックとして、HTMLブロックを作成し任意のページに配置するのもいいでしょう。





【Step 1】Javascript のコードを取得する
http://www.google.co.jp/webmasters/+1/button/
より、任意のオプションを選びます。





【Step 2】Javascript を読み込むコードを <body> タグの前に設置します。

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>

Re: 【重要】公式サイトに CloudFlare を導入?

賛成に1票。

【重要】公式サイトに CloudFlare を導入?

一週間ちょっと、

http://yokosonews.com/
http://ja.katzueno.com/

の concrete5 サイト、WordPress サイトで、 CloudFlare というサービスを導入し、運用してみました。

特に、WordPress には「W3 Total Cache」というプラグインを入れ、CloudFlare のサービスを使うとかなりスピードアップが可能です。

1週間、実際に運用を重ねて、スピードアップが図れることが分かりましたので、CloudFlare を、concrete5-japan.org で導入してみたいなと考えるようになりました。

http://www.cloudflare.com

ただし、CloudFlare は、新興CDNサービスですので、何か問題が発生した場合、数日間 concrete5 日本語サイトにアクセス出来ない状態が続いてしまう可能性があります。

また、データを CloudFlare を通じてやり取りし、キャッシュすることになり、
つまり、ログインID、Passなども、一度、CloudFlare のサーバーを介することになります。



2週間ぐらい、意見募集して、CloudFlare への移行するかを決定したいと思います。



考えられる長所

・サーバーのスピードが早くなる
・クラウド・CDNを concrete5 日本語サイトを通じでテストが出来る
・セキュリティー対策もしっかりしているっぽい
・元々 DDoS や SPAM攻撃などをネームサーバーレベルで予防するために作られたサービス



考えられる短所

・CloudFlare に問題があった場合、日本語サイトが数日にわたりダウンするかも
・CloudFlare を介してすべての情報が送られます（ユーザーのID & ログインデータも含む）
・Amazon のクラウドサービスなどのように、他のクラウドサービスではシステムダウンのニュースが何かと多い
・これもクラウドサービスなので、サイトがダウンする可能性がある

サイトのステータスでも、毎日のように問題がレポートされている
https://www.cloudflare.com/system-status.html



総合的な観点から、短所よりも得られる長所のほうが大きいかな・・・ということと、concrete5 日本語サイトは、常に新しいことに挑戦し続けたいという思いもありますので、導入をしてみたいかなと思います。

また、これを機会に、concrete5用のアドオンでも開発してもいいんじゃないかなといった感じです。



今から2週間（6/12ぐらいまで）、ここのスレッドで、意見を募集します。

基本的に多数決で行いたいと思いますので、よろしくお願いします。

Re: Tomoacさんの作成された機能拡張フォームについて

Tomoac さん。

そろそろ、本家のマーケットプレイスに出展ですね〜。

もしもよろしければ、週刊 concrete5 で公開出展作業なんていかがですか〜(￣ー￣)ﾆﾔﾘ

Re: 公式サイトトップページ ワイヤーフレーム

それでは、金曜日早朝に告知したとおり、公式サイトリニューアル・トップページのワイヤーフレームを決定しちゃいますが、よろしいでしょうか？

ワイヤーフレームに関してツッコミを入れるのは今日まででござんすよ〜(￣ー￣)ﾆﾔﾘ

何もなかったら、進めていきます。

Re: 公式サイトトップページ ワイヤーフレーム

このワイヤーフレームで意見がある方は、どんどん

・勝手に変更
・シートをコピーして、変更を加えて代替案を立てる

などを週末までにお願いします。

月曜日までにご意見がない場合は、このワイヤーフレーム案を採用して、デザイン作業に入ります。

ひとまず、週刊 concrete5 放送中に、Hissy さんがデザインをひとまず興すということになりました。

他にも、デザインを考えてくださる方・・・コラボをどうやってするかが課題になるのですが・・・例えば、参加者がSkype 会議室などを使ってファイルをやり取りするなどの作業が考えられます。

Hissy さんの他に、デザインコンプの作業に参加していただける方がいらっしゃいましたら、よろしくお願いします。

目標は、来週木曜日の放送終了までに、トップページの大体のデザインを決めるです

よろしくお願いします。

改めて、デザイン作業に尽力を尽くしていただいてくださっている皆さま、本当にありがとうございます。