top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1336

CSS と javascript をひとつに!:そうか!こんな方法で1つに出来るんだ!素晴らしい、cssを1つにする知恵。調子に乗って、javascriptも、ね。 ・・・ 【今日のTIPS】

 2010-04-30
 思いもかけぬ、当たり!
 素晴らしい・・・
 それとも知らぬは私だけ?

 ・複数のCSSファイルをサーバーでまとめてSEO対策しよう
  こちらのブログに流れ着いた私は、狂喜、狂喜。


 最近、Drupalでのサイト構築が多かったのですが、
 ソースに悩んでいたのです。
 便利なモジュールをどんどん加えると、
 (確かに機能は増えて有り難いのだけれど)・・・
   ★[Before]
   便利なモジュールをどんどん加えると、
    ※「創ったmetaboy
  ・汚いし、
  ・何のモジュール使ってるか直ぐわかるし
  ・負荷もあるだろうし
  ・SEO対策にもいいこと無いんだろうし・・・


 ちなみに、Drupalで構築されていることで有名な
 あの「米・ホワイトハウス」のサイトのソースは・・・
   米・ホワイトハウス
   ※おぉぉ、綺麗ですねぇ。
    Drupal利用していることはすぐわかるけれど、
    cssやjsファイルもひとつにまとめられてて・・・


 で、今回教えてもらった方法。
 こりゃほんと素晴らしいな。


  追記に  ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  CSS や JSファイルをひとつにまとめる
                 :今日のTIPS

************************************************


 さて・・・
 今回の方法、前述した
 ・複数のCSSファイルをサーバーでまとめてSEO対策しよう
  さんに、教えてもらった方法なのですが、
  (詳しくはそちらをどうぞ)


 要は、
  ・cssファイルをひとつにまとめるスクリプト
   用意しておいて
  ・特定のcssにアクセスした場合
   ・それが無ければ、そのスクリプトを呼び出し
   ・すでに作成されてればそのまま呼び出す
  ってこと。


  ・そのスクリプトでは、
   思惑の cssファイルをマージして
   吐き出す動作が書かれている。


 ・・・なぁ~んてシンプルなんだろう。
 言われてみればなぁ~んだ、ですが、そこに気づかない
 のは、随分頭が固くなってるんだろうな。


 【実装】
  ※「創ったmetaboy」でやってみました。


まず、教えていただいたように、cssファイル。
   ・面倒くさがり屋な私は、
    今後のことも考え,cssを指定するところは
    配列変数にしておきました。


   □まず、複数のcssをひとまとめにして、
    吐き出すスクリプトフアイル。
    css.php として、
<?php # 
header("Content-Type: text/css; charset=utf-8");

$dir = dirname($_SERVER['SCRIPT_FILENAME']);
$dir = strip_tags($dir);

$str = ''; $temparrays = array();
$temparrays = array("/modules/book/book.css",
"/modules/system/defaults.css",
"/modules/system/system.css",
"/modules/system/system-menus.css",
"/modules/user/user.css",
"/sites/all/modules/cck/theme/content-module.css",
・・・・・
"/css/thickbox.css",
"/css/common.css",
"/css/coda-slider20100125.css",
"/css/rater.css",
"/js/greybox/gb_styles.css"
);
foreach ($temparrays as $css) {
if (is_file($dir.$css)) $str .= file_get_contents($dir.$css);
}

if (!is_file("$dir/metaboy.css")) @file_put_contents("$dir/metaboy.css", $str);

echo $str;
?>
 ・こんな感じ
 ・吐き出すcssファイルは、metaboy.css と想定。

 

   □<head> ~ </head> の
    cssファイル記述部分に、
<?php #print $styles; ?>
<link rel="stylesheet" href="/metaboy.css" type="text/css" />
 として
    ・Drupalのcss吐き出す部分をコメントアウト
    ・(まだあるはずの無い)metaboy.css を設定

 

   □このままアクセスすると、file not found ですが、
    .htaccess で、
RewriteCond %{SCRIPT_FILENAME} .*metaboy\.css$
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^(.*)metaboy\.css$ $1css.php [L]
 としてやり
    ・metaboy.css にアクセスし、それが存在しない場合は,
     css.php を呼ぶように設定しておく。

   すると、css.php
    ・指定したcssファイルをマージし、
     ・metaboy.css を書き出した上で,内容を吐き出す。


   次からは、すでに metaboy.css は存在するので、普通に読み込む。


  ■早速実行
   上記、
   ・css.php を準備し
   ・.htaccesshead 部分を設定してアクセスすると
   > 何事もなく、サイトは表示され、
   何事もなく、サイトは表示され、
     ソースを確認すれば、
   ☆[After]
   ソースを確認すれば、
    おぉ、少し綺麗になったぞ・・・


  終り。


  ・・・では無いのです。
  欲張りモンの私は、「これって、jsファイルでもできるんじゃないの?」


  で、応用。(そのまま だけど)


  jsファイルも同じ方法で、スクリプト用意し、
<?php # 
header("Content-Type: text/javascript; charset=utf-8");

$dir = dirname($_SERVER['SCRIPT_FILENAME']);
$dir = strip_tags($dir);

$str = ''; $temparrays = array();
$temparrays = array("/misc/jquery.js",
"/misc/drupal.js",
・・・・・
"/sites/all/modules/ajax/ajax.js",
"/themes/waffles_201001/script.js"
);
foreach ($temparrays as $js) {
if (is_file($dir.$js)) $str .= file_get_contents($dir.$js);
}

if (!is_file("$dir/metaboy.js")) @file_put_contents("$dir/metaboy.js", $str);

echo $str;
?>
 ・こんな感じ
 ・Content-Typeを変更。

  実際は、読み込む順番などもあり、複数のスクリプト使ったが・・・


  js部分;
   ★[Before]
   [Before]
    ▼
   ☆[After]
   [After]
   おぉ、綺麗になった!
   ※ついで、jQueryでよく使う onload部分もひとまとめに。


 これは、使える。
 早速、顧客サイトや他のサイトに応用しなきゃ、な。


 > ・複数のCSSファイルをサーバーでまとめてSEO対策しよう
    (小田急沿線のプラグマティックサイト制作 さん)
   ありがとうございましたっ!

commentsコメント
こんにちは!
cssがごちゃついてるので、ぜひ活用させたいのですが、初心者なのでご教示ください!

idをつけているjsファイルやcssファイルは、どのように記述したらよいでしょうか?
【2010/12/08 18:46】 | kyojo #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1336-57a52b21
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。