## 自己紹介
- 仕事: 組み込み系
- Twitter: @techno_neko
- 所属: Hokkaido.pm
## 今日お話すること
- lite_appとappの違い
- 用意したlite_appの概要
- 分割してみる
## lite_appで作る例
```Bash
$ mojo generate lite_app my_lite_app.pl
```
## appで作る例
```Bash
$ mojo generate app MyApp
```
## appで作る例
- フォルダ構成はこんな感じ
``` bash
my_app
├── lib
│ ├── MyApp
│ │ └── Example.pm
│ └── MyApp.pm
├── log
├── public
│ └── index.html
├── script
│ └── my_app
├── t
│ └── basic.t
└── templates
├── example
│ └── welcome.html.ep
└── layouts
└── default.html.ep
```
## 用意したlite_appの概要
``` perl
#!/usr/bin/env perl
use Mojolicious::Lite;
# Documentation browser under "/perldoc"
plugin 'PODRenderer';
get '/' => sub {
my $self = shift;
$self->stash( gen_cmd => '$ mojo generate lite_app my_lite_app' );
$self->render( 'index' );
};
app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Welcome';
こんにちは！
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
</head>
<body>
<p id="greeting"><%= content %></p>
これは、<code><%= $gen_cmd %></code>で作りました。
</body>
</html>
```
## CSSを追加する
``` perl
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<style type="text/css">
body {
background-color: #ccffcc;
color: #000000;
}
</style>
</head>
<body>
<p id="greeting"><%= content %></p>
これは、<code><%= $gen_cmd %></code>で作りました。
</body>
</html>
```
## JavaScriptを追加する
- もちろん、jQueryも！
- あれ？どこに配置したらいいの？
## 静的配信は"public"フォルダに
- 例） JavaScript
- "public/js/xxx.js"
- scriptタグのsrcには"js/xxx.js"を書く
- 例） CSS
- "public/css/xxx.css"
- linkタグのhrefには"css/xxx.css"を書く
``` bash
├── my_lite_app.cgi
└── public
├── css
│ └── xxx.css
└── js
├── jquery-2.1.1.min.js
└── xxx.js
```
## "*.ep"は"templates"フォルダに
- "@@ index.html.ep"の次の行から"@@ layouts/default.html.ep"の手前までを、"index.html.ep"というファイルで格納
- "@@ layouts/default.html.ep"の次の行から最後までを、"default.html.ep"というファイルで格納
``` bash
├── my_lite_app.cgi
├── public
│ ├── css
│ │ └── xxx.css
│ └── js
│ ├── jquery-2.1.1.min.js
│ └── xxx.js
└── templates
├── index.html.ep
└── layouts
└── default.html.ep
```