m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

Mojoliciousの学習

今日は疲れている

なんか体調が優れない…体力が戻るまでちょっとずつやろう

勉強用のいけにえ

http://guarded-coast-9763.herokuapp.com/

テンプレートを外部ファイル化

全体構成
.
|-- README.md
|-- app.psgi
|-- cpanfile
|-- lib
|-- public
|   |-- css
|   |   |-- app.css
|   |   |-- bootstrap-theme.min.css
|   |   |-- bootstrap.min.css
|   |   |-- docs.css
|   |    -- pygments-manni.css
|   |-- fonts
|   |   |-- glyphicons-halflings-regular.eot
|   |   |-- glyphicons-halflings-regular.svg
|   |   |-- glyphicons-halflings-regular.ttf
|   |    -- glyphicons-halflings-regular.woff
|    -- js
|       |-- app.js
|       |-- bootstrap.min.js
|       |-- html5shiv.js
|       |-- jquery-1.10.2.min.map
|       |-- jquery.js
|       --- respond.min.js
--- templates
    |-- index.html.ep
    |-- layouts
    |    -- default.html.ep
     --- rsslist.html.ep
templatesにファイルを作成する

index

 layout 'default';

            <div class="row-fluid">
                <div class="col-12">
                    <div>
                        <div>
                            デザインセンスが破滅的に変だけどとりあえず、形にだけしておく
                        </div>
                        <ul>
                            <li><a href="/rsslist">RSSの一覧を表示</a></li>
                        </ul>
                    </div>
                    <hr />
                    <div>
                        <div>
                            履歴
                        </div>
                        <ul>
                            <li>はろーわーるどを配置</li>
                            <li>RSSリストを追加</li>
                            <li>テンプレート化してファイルを分割</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

rsslist

% layout 'default';

            <div class="row-fluid">
                <div class="col-12">
                    <div class="list">
                        <div class="list_area">
                    % for my $item(@$rssList){
                        <a target="_blank" href="<%= $item->{url} %>">
                            <div class="bookmark_link">
                                <p>
                                    <%= $item->{title} %>
                                </p>
                                <em><%= $item->{count} %> users</em>
                            </div>
                        </a>
                    % }
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>

        </div>
共通テンプレートは「templates/layouts」へ配置
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title><%= $title %></title>

        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
<!--        <link href="/css/docs.css" rel="stylesheet"> -->
<!--        <link href="/css/pygments-manni.css" rel="stylesheet"> -->
        <link href="/css/app.css" rel="stylesheet">

        <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
        <script src="/js/respond.min.js"></script>
        <![endif]-->

    </head>
    <body data-twttr-rendered="true">

        <div class="navbar navbar-inverse bs-docs-nav">
            <div class="container">
                <a href="/" class="navbar-brand"><strong><%= $title %></strong></a>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="col-12">
                    <h2>
                        <%= $description %>
                    </h2>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-12">
                    <div>
                        <h4><%= $subTitle %></h4>
                        <a target="_blank" href="<%= $github %>">Github</a>
                   </div>
                </div>
            </div>

            <!-- content start -->
            <%= content %>
            <!-- content end   -->

        </div>

        <div class="footer">
                Created By <a target="_blank" href="https://twitter.com/m_shige1979">@m_shige1979</a>
        </div>

        <script type="text/javascript" src="/js/jquery.js"></script>
        <script type="text/javascript" src="/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>

    </body>
</html>
app.psgiはテンプレート名を指定
#!/usr/bin/env perl
use strict;
use warnings;

use Mojolicious::Lite;
use XML::FeedPP;
use URI;
use utf8;
use Encode;

get '/' => sub {
    # パラメータを取得
    my $self = shift;

    # 変数をセット
    my $title = 'Mojoliciousのテストサイト';
    my $description = 'm_shige1979がなんかいろいろやる目的のテストサイト';
    my $sub_title = 'テスト一覧';
    my $github = "https://github.com/mshige1979/heroku-perl-test01";

    # テンプレート変数をセット
    $self->stash('title', $title);
    $self->stash('description', $description);
    $self->stash('subTitle', $sub_title);
    $self->stash('github', $github);

    # indexを割り当て
    $self->render('index');

};

get '/rsslist' => sub {
    # パラメータを取得
    my $self = shift;

    # 変数をセット
    my $title = 'Mojoliciousのテストサイト';
    my $description = 'm_shige1979がなんかいろいろやる目的のテストサイト';
    my $sub_title = '今回のやることはRSSを読み込んでリストを表示';
    my $github = "https://github.com/mshige1979/heroku-perl-test01";

    # 最初は配列をリファレンスで定義
    my $rss_list = [];

    # rssを取得
    my $rss_url = "http://b.hatena.ne.jp/entrylist/it?sort=hot&threshold=&mode=rss";
    my $feed = XML::FeedPP->new($rss_url, utf8_flag => 1)
      or die XML::Feed->errstr;

    # リストに格納
    for my $entry($feed->get_item()){

        push @$rss_list, {
            title => ( $entry->title),
            url => $entry->link,
            count => $entry->get("hatena:bookmarkcount")
        }
    }

    # テンプレート変数をセット
    $self->stash('title', $title);
    $self->stash('description', $description);
    $self->stash('subTitle', $sub_title);
    $self->stash('github', $github);
    $self->stash('rssList', $rss_list);

    # indexを割り当て
    $self->render('rsslist');
};

app->start;

確認すること

・templateを使用する場合は「templates」ディレクトリを作成して「hogehoge.html.ep」で作成する
・複数のテンプレートで共通のテンプレートを使用したい場合は「templates」配下に「layouts」ディレクトリを作成して配置

確認していないこと

・templates配下に別のサブディレクトリなどを作成してテンプレートを作成できるか?

とりあえず

外部ファイルでレイアウトを配置できるようになったのでapp.psgiファイルがでかくならないで済んだ
Mojoliciousはかなり精度の良いフレームワークのような感じがする。
なんかPHPよりよくね?と思い始めてきた
次はTwitterでログインしているユーザーのホームタイムラインを表示してみよう