Gaiax TechEgg's Blog

非エンジニアがエンジニアを目指すブログ

基礎① 9. Amon2 入門 第1部 をやってみた

今回は実際にスケジュール管理アプリを作成していきます!

Amon2の構成を中心に見ていくAmon2第1部です!

github.com

Perl入学式のこちらの資料に基づいて勉強しています。どうぞご参考に!


エンジニア基礎①
1. Perl環境基礎
2. Hello,world!
3. Perl基礎
4. 配列・for文
5. ハッシュ
6. リファレンス
7. サブルーチン
8. 正規表現
9. ⭐️ Amon2 入門 第一部 ⭐️
10. Amon2 入門 第二部

ゴール🏁(めやす:60分)


  • WAFについて理解する
  • Amon2の準備・構成の理解

おさえておきたいこと


WAF(Web Application Framework)

WAF(ワッフ)とは、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたものです。Web開発で用いられる共通した作業に伴う労力を軽減することを目的としています。例えば、データベースへのアクセスのためのライブラリや、セッション管理ができるものがあります。PerlでかけるWAFはいくつか存在し、Mojolicious、Mojoliciousをより簡易的な構造にしたMojolicious::Lite、そして今回のAmon2、Amon2をより簡易的にしたAmon2::Liteなどがあります。Rubyで書けるWAFはRuby on Railsなどが有名です。

Amon2

今回使用するAmon2はPerl製WAFのひとつです。Amon2は、ウェブアプリケーションを作っていく最低限の機能は備えており、とてもシンプルな構造になっています。初心者にとってわかりやすいのです!それゆえ自分で拡張することによって様々な機能を追加することができます。 Amon2は、クライアントサイドのJavaScriptもライブラリが読み込まれています。一通り使えるようになっているので、無駄な手間がかかりません。 今回はAmon2を使って、スケジュール管理アプリ「Scheduler」を作っていきます。

ではスタート!


1.Amon2のインストール

以前にCPANをインストールしているとおもいます。

gaiax-techegg.hatenablog.com


cpanmコマンドでAmon2をCPANコマンドでインストールしましょう。

$ cpanm Amon2


$ amon2-setup.pl ディレクトリ名でディレクトリに雛形を作ります。

$ amon2-setup.pl Scheduler


これで、Schedulerというディレクトリができました。

2.基本的なAmon2 Webアプリケーションの構成

Amon2は以下のようになっています。

Build.PL
builder
config
cpanfile
cpanfile.snapshot
db
lib
minil.toml
script
sql
static
t
tmpl
xt

主に使うものだけ解説します。

  • config:Amon2全般の設定ファイルになります。
  • cpanfile:cpanmモジュールを管理します。追加削除ができます。変更したら、carton installして差分を読み込みます。
  • db:RDBMSとしてSQLiteのデータを置きます。
  • lib:lib下のWeb/Dispatcher.pmでcontrollerにあたる部分になります。
  • sql:DBでのschemaの設置をします。
  • static:静的ファイル(css/javascript/imgなど)を置きます。
  • tmpl:index.txinclude/layout.txではviewにあたる部分の機能になります。

    「view」「controller」にあたる部分について詳しく見ていきましょう。

$ vi lib/Scheduler/Web/Dispatcher.pm

をすると、cdでディレクトリを移動しなくてもファイルを直接編集できます。


Controller

lib以下をみるとこのようになっています。

package Scheduler::Web::Dispatcher;
use strict;
use warnings;
use utf8;
use Amon2::Web::Dispatcher::RouterBoom;

any '/' => sub {
    my ($c) = @_;
    my $counter = $c->session->get('counter') || 0;
    $counter++;
    $c->session->set('counter' => $counter);
    return $c->render('index.tx', {
        counter => $counter,
    });
};

post '/reset_counter' => sub {
    my $c = shift;
    $c->session->remove('counter');
    return $c->redirect('/');
};

post '/account/logout' => sub {
    my ($c) = @_;
    $c->session->expire();
    return $c->redirect('/');
};

1;

packageでこのlib/Scheduler/Web/Dispatcher.pmをひとまとまりとして、Scheduler::Web::Dispatcherという名の関数として扱えます。use モジュール名;で依存モジュールをこのDispatcher内で使えることができます。any '/' => sub {...}post '/' => sub {...}などのサブルーチン、コンテキストの解説は、papixさんの資料(https://github.com/perl-entrance-org/Perl-Entrance-Textbook/blob/master/amon2/1.md#controller) がとても詳しく書いているので、ぜひ参考にしてみてください。

View

では次にviewにあたる部分です。viewにあたる部分はtmplのなかのindex.txと、include/layout.txになります。また、Amon2はText::Xslateというテンプレートエンジンを使用しており、シンタックスはデフォルトのKolonを使用しています。詳しくはドキュメントを参照してください。


ではまずはlayout.txからみていきましょう。

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title><: $title || 'Scheduler' :></title>
 
      ... 中略 ...

    <div class="container">
        <div id="main">
            <: block content -> { } :>
        </div>
        <footer class="footer">
            Powered by <a href="http://amon.64p.org/">Amon2</a>
        </footer>
    </div>
</body>
</html>

HTMLの書かれた中に<: block content -> { } :>があります。これはtmpl: override content -> {...}に記された内容を読み込みます。これによってtmplが複数に渡って書かれていても必要によって組み合わせることができるわけです。

tmpl/index.txをみてみましょう。

: cascade "include/layout.tx"

: override content -> {

<h1 style="padding: 70px; text-align: center; font-size: 80px; line-height: 1; letter-spacing: -2px;">Hello, Amon2 world!</h1>

    ... 中略 ...

<h2>Session counter demo</h2>

<p>You seen this page <: $counter :> times.</p>

<form method="post" action="/reset_counter">
    <input type="submit" name="Reset counter." class="btn btn-default">
</form>

: }

1行目の: cascade "include/layout.tx"は、2行目以降の: override content -> { ... :}で書かれている内容をinclude/layout.tx<: block content -> { } :>に渡すという意味です。


モジュールのインストール

まずは、アプリケーションに必要なモジュールをインストールしましょう。

以前紹介したCPANモジュールはアプリケーションで使用します。時間を表したい時は、Time::Pieceや、バリデーション(エンジニア基礎③で登場します)をしたい場合はFormValidator::Liteなどをつかいます。

Cartonは、Webアプリケーションの依存モジュールを管理してくれるアプリケーションです。cpanmコマンドでインストールしたモジュールとは別に管理してくれます。
Cartonは、cpanmモジュールなので、インストール時はcpanmコマンドでインストールしましょう。Cartonを利用する時は、cpanfileがあるディレクトリに移動してcarton installすると、使用できるようになります。

$ cpanm Carton
$ cd Scheduler
$ carton install

これで、必要なモジュールはcartonによってインストールされました!
インストールすると、localというディレクトリを生成し、この中に依存モジュールをインストールして管理しています。

インストールしたモジュールを利用しながら、Perlスクリプトを動かすには、carton execを利用します。今回のSchedulerの場合は、amon2-setup.plで雛形を生成した際にscript/scheduler-serverという起動用スクリプトが生成されているのでこれを使って、アプリケーションを起動します。

$ carton exec -- perl -Ilib script/scheduler-server
Scheduler: http://127.0.0.1:5000/


起動したら、ブラウザでlocalhost:5000に接続すると、Schedulerがでてきます!

参考:
Perl Advent Calendar Japan 2011 Teng Trac

第18回 Amon2によるWebアプリケーションの高速開発(2):Perl Hackers Hub|gihyo.jp … 技術評論社


今回は第一部としてAmon2の構成を中心にみていきました。
コンテキストへの理解と、全体的に変数やテンプレートをどう渡しているのかの流れを理解するのが大切です。
もし、わからないことがあれば ORM((O/Rマッパ, Object-Relational Mapper)は、RDBMSから取得した単一行のデータを特定のクラスと紐付けてオブジェクト化してくれる仕組み)ではTeng、tmplではText::XslateのKolonのドキュメントをみてみてください。
次回ではSchedulerを作っていきましょう。