hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

Plack::Middleware::Bootstrapというのを作った

社内のプロジェクトで,JSON APIのドキュメントをHTMLでレンダリングして,api.example.com/doc とかで開発中に見れる,というのを作って使ってる.
ドキュメント見れるのは便利なのだけど,スタイルの当たってないHTMLで,見た目が悪かった.
とりあえずBootstrapでも当てとくかと思ったので,HTMLにBootstrapを当てて配信してくれるPlack Middlewareを書いた.


GitHub - hitode909/Plack-Middleware-Bootstrap: A Plack Middleware to prettify simple HTML with Botstrap design template


CPANにも上げた.
Plack::Middleware::Bootstrap - A Plack Middleware to prettify simple HTML with Bootstrap design template - metacpan.org

Perlでホームページを作りたくなったら,以下のようなコードを書くと思う.

use strict;
use warnings;
use Plack::Builder;

my $app = sub {
    return [ 200, [ 'Content-Type' => 'text/html; charset=utf-8' ], [ <<HTML ] ];
<h1>こんにちは!!</h1>
<p>ようこそ!!ここは僕のホームページです!!</p>
<p>今日は<code>Perl</code>を書きました!!</p>
<p>以下は僕の趣味と特技です</p>
<table>
  <tr><th>趣味</th><td>マリンスポーツ</td>
  <tr><th>特技</th><td>排水溝のぬめり取り</td>
</table>
HTML
};

builder {
    $app;
};

これでもいいけど,どこか見た目が悪い.どこかジオシティーズを思い出す.

f:id:hitode909:20141215193509p:plain


そこで,Plack::Middleware::Bootstrapをロードします.enableするだけ.

use strict;
use warnings;
use Plack::Builder;

my $app = sub {
    return [ 200, [ 'Content-Type' => 'text/html; charset=utf-8' ], [ <<HTML ] ];
<h1>こんにちは!!</h1>
<p>ようこそ!!ここは僕のホームページです!!</p>
<p>今日は<code>Perl</code>を書きました!!</p>
<p>以下は僕の趣味と特技です</p>
<table>
  <tr><th>趣味</th><td>マリンスポーツ</td>
  <tr><th>特技</th><td>排水溝のぬめり取り</td>
</table>
HTML
};

builder {
    enable "Bootstrap";
    $app;
};

f:id:hitode909:20141215193510p:plain
このとおり,見た目がしゃきっとした.コードはちゃんとコードと分かるような色がついている.
Bootstrapの力でiPhoneでもいい感じに見れる.
f:id:hitode909:20141215194719p:plain

実装

レスポンスのHTMLをTreeBuilderでパースして,headとbodyを取り出して,Bootstrapのテンプレートに突っ込んで返す,という作戦を展開している.
もともとあったbodyのクラスとかなくなるけど,bodyにクラス振りたいような場合は,こんなのを使わず普通にBootstrap読み込めばよいと思う.