Posts Tagged ‘php’

MacBookにMacPortsでAMPな環境を作る

Tuesday, June 2nd, 2009

たびたびこもりです、こんにちは(謎)。
そういえば、先週、先々週のことになるのですが、自分ちのMacBookのHDDがぶっ飛んでからやってなかったWeb制作環境の構築を「やるか!」と思い立ちまして、その時の作業記録をWiki「CipWiki」にまとめてみました(というより、ただローカルから持ち出しただけ)。

ローカルにWeb制作環境を構築するとなると、サーバのことがわからない場合は一般的に「MAMP」とか「XAMPP」を使うと思うんですが、制作環境の自由度を高めるために私は「MacPorts」を使っています(簡単に言うと、OSとは別にUnix環境を一個作っちゃう)。

Wikiに書いてあることを順おって確実にやっていけば環境構築はできると思うのですが、ちょっとしたミスが原因でエラーになったりして、どうしていいか途方に暮れることになりかねません(エラー対応するにも基礎がないと大変です 笑)。

自由自在にコントロールできる制作環境を作りたいとか、MacPortsを使ってみたいけどどうすればいいかわからない人は、UnixのコマンドリファレンスとかApacheの解説書なんかを片手にチャレンジしてみてはいかがでしょうか。

※一応、自分のメモ代わり兼、知りたい人に面と向かって説明するために用意したものなので、隅から隅まで丁寧には解説してません。しかもUnixコマンドの解説などを除いた抜粋版ですので、あしからず。

CSS内部でブラウザ毎の値を切り替える、Conditional-CSS

Friday, March 13th, 2009

昨日ぼんやり海外のサイトのニュースを見ていたら、「Conditional-CSS」というサイトのリンクが載ってました。はて、それは何じゃらほい?と見てみると面白いことをされているじゃあーりませんか。

Web制作者の悩みの種といえば、ブラウザの種類が多いこと。
サイトの見え方を重要視した場合など、ターゲット次第ではCSSを切り替えたり、やれCSSハックだなんだと頭を抱えることにもなります。対応させるIEのバージョン次第ではコンディショナルコメントを使ったりされている方もいるのではないでしょうか(ボクはどちらもほとんど使わないのですが… 笑)。

そんなブラウザ毎に微妙に違う解釈を一つのCSSファイルで実現する方法として、このConditional-CSSってものが作られたようです。

これ、PHP版とかC版とかいろいろあるんですが、サイトの右側にあるコンパイラを使って必要なファイルを生成することができます。PHPならバージョンを選んで自分のCSSの名前を入れて「GO」ボタンを押せば、自動的に「c-css.php」なるファイルがダウンロードできます。

c-css-01

で、そのファイルをサーバにアップしてCSSの代わりにコイツを指示する、というのが基本的な導入方法のようです(サイトの説明ちゃんと読んでください 笑)。

Include the ‘c-css.php’ file as you would any CSS file on your web-pages using: @import “{path_to_}/c-css.php”; (or similar).

CSSの記述方法はサイトにも載ってますが、CSSの中にコンディショナルコメント的な書き方で適用させるブラウザ毎の値を入れておく感じです。

c-css-02

デモサイトをそれぞれのブラウザで見て、CSSの頭を見るとちゃんとそのブラウザ専用にCSSが生成されているようですね。そのオリジナルのCSSもサイトには用意されていますので、中を見てみると良いでしょう。

アクセスの多いサイトなんかだと、いちいちPHP呼び出して処理させるとどうかなぁ?と思ったりもしますが、ブラウザ毎に同じようなCSSを何枚も用意するよりは一個で完結できるのは制作者にとっては便利かもしれませんね。

ちなみに無駄に「font.css」だの「layout.css」だの複数のCSSを読み込んでいる場合(HTTP requestsの回数をあげるのが好きな方 謎)は、そのPHPの中の配列にCSSのファイル名を入れておけば良さそうですよ(ってことは、これを使えば統合できるんじゃないか?と思った)。

ま、面白そうだったのでお知らせまで。
使いたかったら、あとは皆さんが頭を使うだけです(笑)。

せっかくだから配信データも見直す

Tuesday, April 29th, 2008

Safariの開発メニューの素晴らしさについて一筆…と思ったついでに、ブラウザに送りつける配信データについても見直してみました。これまではデータをそのまま送りつけていたのですが、サーバ側で圧縮してクライアントに送るようにしようかなって話です。

よって、またしても異常に長い文章になっています…。Safariの開発メニューの使い方含め、その辺に興味のある方だけ先にお進み下さい(笑)。

(more…)

Performance Optimization WordPress Plugins by W3 EDGE