こんにちは。逆から読んでもきつつきです。

先日、リバースプロキシしてメモリキャッシュしないといけないことがあったのですが、どうもキャッシュがうまく働いてくれず四苦八苦しておりました。

google先生も設定方法は教えてくれるのですが、動かなかった場合の具体的な対処方はなかなか見つからず、ログと戦う羽目になってしまいました。

そんなわけで今回は、Apacheのリバースプロキシ(mod_proxy_balancer)とメモリキャッシュ(mod_mem_cache)のお話。

リバースプロキシの設定

まずはmod_proxy_balancerの設定。
Webサーバ側は特に何もせず、プロキシサーバ側でBalancerMemberにWebサーバを指定します。

ProxyRequests Off
ProxyPass / balancer://cluster/
<Proxy balancer://cluster/>
    BalancerMember http://**** loadfactor=10
    BalancerMember http://**** loadfactor=10
    BalancerMember http://**** loadfactor=10
</Proxy>

これは色々なサイトにもあるものなので、細かい説明は割愛させていただきます。

Apacheプロセスの設定

メモリキャッシュをつかうのでApacheプロセスをworkerで起動するように設定変更をします。
/etc/sysconfig/httpdを開き、下記1行がコメントアウトされていたので解除。

HTTPD=/usr/sbin/httpd.worker

メモリキャッシュの設定

mod_cacheおよびmod_mem_cacheの設定です。
一般的な設定では、こんな感じでしょうか。画像の多いサーバなので、キャッシュサイズは多めに設定してあります。

<IfModule mod_cache.c>
    CacheIgnoreCacheControl On
    CacheIgnoreNoLastMod On
    CacheStoreNoStore On
    CacheStorePrivate On
    CacheEnable mem /
</IfModule>

<IfModule mod_mem_cache.c>
    MCacheSize 1310720
    MCacheMaxObjectCount 100000
    MCacheMinObjectSize 1
    MCacheMaxObjectSize 1310720
    MCacheMaxStreamingBuffer 1310720
</IfModule>

動作チェック

以上を設定してapacheの再起動をしてみましたが、うまく動いてない模様でした。
サーバがさくらインターネットのサーバだったので管理画面から転送量グラフを眺めてみましたが、送信と受信で転送量に差が見受けられませんでした。
(今回はたまたまグラフで確認できましたが、ツール等が入っていない場合は/proc/net/devあたりを監視することになると思います。)

そこで、httpd.confのLogLevelをwarnからdebugに。そうするとエラーログに以下のようなメッセージが出ていました。

[debug] cache_storage.c(257): cache_select_url(): Vary header mismatch.

ヘッダがおかしいからキャッシュできませんよ、ということみたいです。
そこで、httpd.confの<IfModule mod_cache.c>～</IfModule>の間に次の1行を追加。

CacheIgnoreHeaders Set-Cookie User-Agent Vary

apacheを再起動したところ、無事にキャッシュが機能していました。

mod_cacheの設定についてはまだまだ改良の余地があるかと思いますが、apacheサーバ1台で簡単にキャッシュもとれるというのは、やはり魅力的だと思います。

おひさしぶりです。ぬいぐるみです。

かのうです。
もう夏です！暑いです！アイスは太らないっていう噂を信じて今年の夏は食べまくりで乗り切ろうと思います。

さて、今回はCSS3についてのお話です。
CSS3を使えば今まで画像で作成してきたボタンやアイコンをなんとCSSだけで表示することができます。
ブラウザでフォントサイズを変更したときも同じく拡大縮小するのでよいですよね。
懸念としてはやっぱりIEだと正常に表示がされないこと。
世の中から一掃されるか、CSS3対応になることを願うばかりです。

ボタン

イメージ

デモページ

HTML

<a class="button" href="#">Rounded</a>

CSS

.button {
　　　background:-moz-linear-gradient(center top , #FAA51A, #F47A20) repeat scroll 0 0 transparent;
　　　border:1px solid #DA7C0C;
　　　color:#FEF4E9;
　　　-moz-border-radius:2em 2em 2em 2em;
　　　-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
　　　cursor:pointer;
　　　display:inline-block;
　　　font:14px/100% Arial,Helvetica,sans-serif;
　　　margin:0 2px;
　　　outline:medium none;
　　　padding:0.5em 2em 0.55em;
　　　text-align:center;
　　　text-decoration:none;
　　　text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
　　　vertical-align:baseline;
}
.button:hover {
　　　text-decoration: none;
　　　background:-moz-linear-gradient(center top , #F88E11, #F06015) repeat scroll 0 0 transparent;
}
.button:active {
　　　position: relative;
　　　top: 1px;
　　　background:-moz-linear-gradient(center top , #F47A20, #FAA51A) repeat scroll 0 0 transparent;
　　　color:#FCD3A5;
}

CSS3 Gradient Buttons

アイコン

イメージ

デモページ

HTML

　　　<div id="rss_icon_main" class="inside">
　　　　　　<a href="http://rathersplendid.net"><span class="outer_ring"><!/span>
　　　　　　<span class="middle_ring"></span>
　　　　　　<span class="circle"><!/span></a>
　　　</div>

CSS

#rss_icon_wrapper {
　　　-moz-border-radius:1.5em 1.5em 1.5em 1.5em;
　　　background:-moz-linear-gradient(center bottom , #FF6B1C 12%, #FF9F29 100%) repeat scroll 0 0 transparent;
　　　border:0.3em solid #C63E0D;
　　　height:10em;
　　　overflow:hidden;
　　　position:relative;
　　　width:10em;
}
#rss_icon_main.inside {
　　　left:10%;
　　　top:10%;
}
#rss_icon_main {
　　　height:80%;
　　　overflow:hidden;
　　　position:relative;
　　　width:80%;
}
#rss_icon_main.inside span {
　　　border-color:#FFFFFF;
}
.outer_ring {
　　　-moz-border-radius:10.5em 10.5em 10.5em 10.5em;
　　　height:170%;
　　　right:0;
　　　top:0;
　　　width:170%;
}
.middle_ring {
　　　-moz-border-radius:8em 8em 8em 8em;
　　　height:110%;
　　　position:absolute;
　　　right:32%;
　　　top:32%;
　　　width:110%;
}
.circle {
　　　-moz-border-radius:4em 4em 4em 4em;
　　　background-color:#FFFFFF;
　　　bottom:0;
　　　height:30%;
　　　left:0;
　　　width:30%;
}
.outer_ring, .middle_ring, .circle {
　　　position:absolute;
}
.outer_ring, .middle_ring {
　　　border:1.5em solid #FFFFFF;
}

Rather Splendid

レインボー！

CSS

style="background-image: -moz-linear-gradient(left center , red, orange, yellow, green, blue, indigo, violet); border: 1px solid black;"

MDC

ぽこ太です。

世間でも社内でもiPadが話題です。
あんな板で色々出来るなんて、すごい世の中になったなぁと思います。
すごいですよね。
今日は検索の仕方を紹介します。

Googleの検索コマンド

Google検索をする際に、「site:http://www.cybridge.jp/」と検索したら
Googleにインデックスされているページが出るといったやつです。

意外と大量にあります。
そのうちいくつか便利なものを紹介してみます。

・intitle:[キーワード]

ページタイトル、テキストに含まれるキーワードを検索（複数語の指定可）
例　intitle:猫

全てのキーワードが含まれるもののみを検索する
「allintitle:」というのもあります。
例　allintitle:猫　鍋

・site:[URL] キーワード

URLに限定してキーワードを検索する（サイト内検索。複数語の指定可）
例 site:http://jukunavi.com/ 東京

・cache:[URL]

指定したURLのGoogleキャッシュを表示
例 cache:http://jukunavi.com/ 東京

他にも色々あるみたいなので調べてみてください。

アドレスバーに直接打ち込む方法

「g サイブリッジ」のようにアドレスバーに打ち込むとGoogle検索されます。
Firefox、Operaなどでできます。

他にも便利なのが、英和と和英の辞書検索です。

・英和 eiwa [英単語]

・和英 waei [英単語]

Firefoxでできます。
結果はYahoo!辞書だったり、エキサイト辞書だったり、Weblio辞書だったりします。

ショートカット(Firefox)

弊社代表の水口がよく言うのが、
ショートカットひとつ覚えるだけで、年間でみたら結構な業務効率化！

検索に使いそうなショートカットを紹介します。

アドレスバーにフォーカスする

・Alt+D

・Ctrl+L

ドメイン自動入力

・[Ctrl] + [Enter]→".com"

・[Shift] + [Enter]→".net"

・[Shift] + [Ctrl] + [Enter]→".org"

Googleの新検索

最近検索結果画面変わりましたね。
新しくついた機能の中で「おー」と思ったものをいくつか紹介します。

・検索の期間指定

たとえばニュース検索ですが、期間指定が出来るようになっています。
日付順にソートもかけれます。
最新のニュースを確認したいときによいですね。

・画像のサイズ指定

画像検索の際に、サイズや解像度を指定できるようになってます。
他にも線画などのこだわり検索も！
ほしい画像がピンポイントで探せるようになってますね。ありがたいです。

・その他指定

数ある書籍の中から、いろいろなオプションを指定できるようになっています。
表示されている内容、書籍の種類、期間など。

他にも動画の再生時間や字幕指定、
ワンダーホイールなど、新しい機能がついていますね。

Google先生にお世話になることがこれからも多そうです。はい。

おはようございます。昨日、iPad が予約受付始めましたね。
新卒の営業のアップル信者さんが、お昼休みにソフトバンク表参道店に行ったら行列がすごくて途中で諦めて帰ってきてました。iPad 熱すごいですね。自分も欲しいです！

さて今日はとても便利に使える CSS プロパティの、display: inline-block; について書きたいと思います。

inline-block とは？

インライン要素とブロック要素の特徴をいいところを足して２で割ったような display プロパティの値です。
ブロック要素のように幅・高さが指定でき、インライン要素のように改行されることなく同じ行内に並びます。
img, input, textarea などのような置換要素と似た振る舞いをします。
誤解を恐れずに言うと「テーブルセルっぽくつかえるブロック要素」でしょうか。
大きく特徴を書き出すと、

1. ボックスに対しても vertical-align プロパティが使用可能！
2. 連続するボックス要素を中央寄せにできる（ページャーなどに便利！）
3. 幅・高さが中身の要素に応じて可変するので、px 指定などで決め打ちしなくてOK

サンプル

• 1
• 2
• 3
• 4
• 5

HTML

<ul class="pager">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

CSS

.pager {
	margin: 20px 0 0 -3px;
	text-align: center;
}

.pager li {
	display: -moz-inline-box;　/* Firefox2 に対応 */
	display: inline-block;
	margin-left: 3px;
	padding: 3px 5px;
	border: 1px solid #CCC;
	line-height: 1;
	*display: inline;	/* IE6,7 に対応 */
	*zoom: 1;	/* IE6,7 に対応 */
}

ざっくりですが上記のような感じで割とシンプルにページャーが作れます。

ブラウザ対応状況

モダンブラウザは display: inline-block; に対応しているのですが、Firefox2 だと未対応なので、独自拡張の -moz-inline-box を一番上に指定します。
また IE6, 7 についても inline-block に未対応なのですが display が inline、hasLayout が true の状態だと同じような効果が得られます。

inline-block を適用したい要素には

.inline-block {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

など用意して class="inline-block" と指定してあげると、簡単・便利に inline-block を使いこなせると思います！
また対応ブラウザは

• IE 6 ～ 8
• Firefox 2 ～ 3
• Google Chrome
• Safari 2 ～ 4
• Opera 9 ～ 10

は網羅しており、業務レベルにでも問題なく使える範囲だと思いますので是非活用していきましょう。