hitode909の日記

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

トップ > Plack::Middleware::Bootstrapというのを作った

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読み込めばよいと思う．