Mojolicious::LiteでCSSをHTML自体に埋め込む - M.C.P.C. (Mamesibori Creation Plus Communication)

Mojolicious::LiteでCSSをいつものように外部ファイルとしてlinkすると、CGIとして動かしたときにCGIが複数回走ってしまい、負荷が高くなるので、昔のi-modeページみたいにHTML自体にCSSを埋め込むことをやります。

戦略としては、Mojolicious::Liteの教科書通りCSSファイルとしてstyles.css に書いて %= stylesheet url_for('/public/styles.css') でlinkする、というのはやらないで、styles.css.html.ep にHTMLとして書いて、HTMLとしてIncludeします。

なお、Mojolicious::Liteは、ファイルとして配置せずに一つのファイル内にまとめてしまえるので便利です（__DATA__以降の@@ 行で指定します）。

#!/usr/bin/perl

use 5.010; # Mojolicious 1.9.8以降はPerl 5.10対応
use Mojolicious::Lite;
use utf8;

# ROOT
get '/' => sub {
  my $self = shift;
} => 'index';

app->start;

__DATA__

@@ index.html.ep
% layout 'default', title=>'テストページ';
      <section>
        <h1>Mojolicious::Lite CSS 埋め込みテスト</h1>
        <p>本文です。</p>
      </section>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
    <%= include 'styles.css' =%>
  </head>
  <body>
    <div>
      <%= content =%>
    </div>
  </body>
</html>

@@ styles.css.html.ep
  %# Yahoo UI Font Size
  %# ----------------
  %# |  px  |   %   |
  %# |--------------|
  %# |  10  |  77   |
  %# |  11  |  85   |
  %# |  12  |  93   |
  %# |  13  | 100   |
  %# |  14  | 108   |
  %# |  15  | 116   |
  %# |  16  | 123.1 |
  %# |  17  | 131   |
  %# |  18  | 138.5 |
  %# ----------------
  %= stylesheet 'http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css'
  %= stylesheet 'http://yui.yahooapis.com/3.8.1/build/cssfonts/cssfonts-min.css'
  %= stylesheet begin
  /* styles.css.html.ep 共通CSS */
  body {
    margin: 20px;
  }
  h1 {
    background-color: #ffc1c1;
    font-size: 138.5%;
    margin: 16px 0px;
    padding: 16px;
    color: #93252a;
    font-weight: bold;
    border-radius: 4px;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fff;
  }
  %= end

上記プログラムをCGIを通して実行するとこんな感じになります……

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
    <link href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css" media="screen" rel="stylesheet" />
    <link href="http://yui.yahooapis.com/3.8.1/build/cssfonts/cssfonts-min.css" media="screen" rel="stylesheet" />
    <style>/*<![CDATA[*/

    /* styles.css.html.ep 共通CSS */
    body {
      margin: 20px;
    }
    h1 {
      background-color: #ffc1c1;
      font-size: 138.5%;
      margin: 16px 0px;
      padding: 16px;
      color: #93252a;
      font-weight: bold;
      border-radius: 4px;
      text-shadow: 0 0 0 transparent, 1px 1px 0 #fff;
      position: relative;
    }
    
/*]]>*/</style>
        
  </head>
  <body>
    <div>
      <section>
        <h1>Mojolicious::Lite CSS 埋め込みテスト</h1>
        <p>本文です。</p>
      </section>
    </div>
  </body>
</html>

1回のCGI実行で、CSSまで埋め込まれます。ブラウザ側からのHTTPのリクエストも減ります。副次的なメリットとして、HTMLに出力されないコメント行表記 %# が使えるので便利だと思います。