🐘

【PHP】サーバーのIPアドレスでローカル環境と本番環境を判定して、CSSの主力方法を調整する

2024/02/17に公開

WordPressサイトで、Sassで記述したスタイルをstyleタグ(インライン)でまとめて出力するようにしたのでメモ。

そもそも<link rel="stylesheet" ...>で読み込むとPSIやLighthouseで、レンダリングを妨げるリソースとして怒られてしまいます。この点、styleタグで主力すれば、この警告は解消されました。

しかし、ローカル環境で開発している時に、styleタグで出力すればdevツールを使っても、どこにそのスタイルが書かれているか分からない(ソースマップが機能しない)ので、開発時にはとても非効率です。

なのでPHPでサーバーのIPアドレスを特定して、下記のようにCSSの出力方法を変えてみました。

  • ローカル環境なら通常通り、<link>タグでcssファイルを読み込む
  • 本番環境(ローカル以外)ならstyleタグでまとめてインラインで出力
<?php
    $ip = '';
    // PHP環境変数があるか確認
    if (getenv('SERVER_ADDR') !== false) {
        // 現在のスクリプトが実行されているサーバ ーのIPアドレス
        $ip = $_SERVER['SERVER_ADDR'];
    }
    // ローカル環境
    if (false !== strpos($ip, '::1')) {
        // 予め定義した、通常通り<link>タグでCSSファイルを読み込む関数
        load_css_file();
    // 本番環境
    } else {
        // インクルード処理をバッファリング(出力させず溜める)
        ob_start();
            require_once "{$base_uri}/assets/css/style.css";
            // テンプレートごとのスタイルを読み込んで合体
            if(is_front_page()) {
                require_once "{$base_uri}/assets/css/front-page.css";
            }
            if(is_page('contact')) {
                require_once "{$base_uri}/assets/css/contact.css";
            }
            $style = ob_get_contents();
        ob_end_clean();
        echo "<style>{$style}</style>";
    }
?>

Discussion