MojolicousとBootstrapの連携方法のまとめ - 鈍足ランナーのＩＴ日記

現在css フレームワークのデフォクトスタンダートといえば Twitter Bootstrap ですよね。 Amon2だと標準でついてきて便利でいいなーと思っていましたが。 Mojoliciousも負けていません？

便利なgenerateコマンドが 2013/2/20にリリースされていました。先日ですねー。 (私も作りたいなぁとは思っていましたが、なにぶんモジュールを書くほどの技量がなくて、先駆者がいてくれてラッキーでした）

その名もMojolicous::Command::generate::bootstrapです。このモジュールをcpanmでインストールしましょう。

使い方は至って簡単です。解説しましょう。最初にアプリケーションの雛形をつくります。皆さんも使ってますよね。

mojo generate app Hoge

そうすると自動的にファイルが作られますよね。こんな感じになりますが

Hoge
├─lib
│  │  Hoge.pm
│  │
│  └─Hoge
│          Example.pm
│
├─log
├─public
│     index.html
│  
│
├─script
│      hoge
│
├─t
│      basic.t
│
└─templates
    ├─example
    │      welcome.html.ep
    │
    └─layouts
            default.html.ep

続いて、generate bootstrapを実行

cd Hoge
mojo generate bootstrap

そうすると

Hoge
├─lib
│  │  Hoge.pm
│  │
│  └─Hoge
│          Example.pm
│
├─log
├─public
│  │  index.html
│  │
│  ├─css
│  │      bootstrap.min.css
│  │
│  ├─img
│  │      glyphicons-halflings-white.png
│  │      glyphicons-halflings.png
│  │
│  └─js
│          bootstrap.min.js
│
├─script
│      hoge
│
├─t
│      basic.t
│
└─templates
    ├─example
    │      welcome.html.ep
    │
    └─layouts
            default.html.ep
            bootstrap.html.ep <-0.02から作成されると思います。

なんと、ブートストラップのファイルが取り込まれるのですｗｗこれで、いちいちダウンロードしてきてファイルを置いてというルーチンワークから解放されます。

作者の方に、templates/layoutsの下にbootstrap.html.epファイルも作ってくれませんかと要望しておきましたら、0.02で取り込みますと返事がありました。近日公開されるでしょう！！。公開されたことを前提に以下に手順を書きますと。

welcome.html.epの１行目に取り込むlayoutファイルを指定するのですが、

% layout 'default';
% title 'Welcome';
<h2><%= $message %></h2>
This page was generated from the template "templates/example/welcome.html.ep"
and the layout "templates/layouts/default.html.ep",
<a href="<%== url_for %>">click here</a> to reload the page or
<a href="/index.html">here</a> to move forward to a static page.

このように、変えてあげれば連携完了となります。

% layout 'bootstrap';
% title 'Welcome';
<h2><%= $message %></h2>
This page was generated from the template "templates/example/welcome.html.ep"
and the layout "templates/layouts/default.html.ep",
<a href="<%== url_for %>">click here</a> to reload the page or
<a href="/index.html">here</a> to move forward to a static page.

そして、@minikomiさんのBootStrap Form Builder をカスタマイズしました私作のMojoHel でドラッグ＆ドロップにてフォームのソースを作成しちゃえます。

★2013/3/1。ツールIEでないと動かないど云うバグがありました ★2013/3/2。修正しました

生成したソースをwelcome.html.epなどの、適当な場所に貼り付けてやれば、簡単に綺麗なフォームが表示ができるようになります。デザイン力がない私もこれならＯＫ。