Yesod入門 (3) Handler の作成から Shakespearean Templates による View の作成まで

こんにちは、鈴木です。

Yesod 入門の第 3 回です。

今回は Handler の作成方法から始めて、各種テンプレート言語を使って簡単なページを作成するところまで行いたいと思います。

yesod add-handler による Handler の生成

yesod コマンドの引数に add-handler を指定して実行すると Handler を生成することができます。

Ruby on Rails における scaffold のようなものです。

yesod add-handler

1	yesod add-handler

実行すると作成する Handler の名前を求められますので、「Hello」と入力して先に進みましょう。

Name of route (without trailing R): Hello

1	Name of route (without trailing R): Hello

ちなみに Yesod では Handler の名前は「R」で終わる決まりがあります（「Resource」の「R」です）。

続けて URL のパスを求められますので、「/hello」と入力します。

Enter route pattern (ex: /entry/#EntryId): /hello

1	Enter route pattern (ex: /entry/#EntryId): /hello

最後に許可する HTTP のメソッドの指定です。ここでは「GET」を指定します。

Enter space-separated list of methods (ex: GET POST): GET

1	Enter space-separated list of methods (ex: GET POST): GET

ここまで入力すると、実際にコード生成が行われます。

作成: Handler/Hello.hs
変更: config/routes
変更: Application.hs
変更: hello-yesod.cabal

Handler/Hello.hs は作成した Handler のコードが含まれるファイルです。

config/routes にはルーティング情報が追加されます。

Application.hs と hello-yesod.cabal には Handler/Hello.hs で定義されるモジュールをインポートするコードが追加されます。

Handler

Handler/Hello.hs を開いてみると、以下のようになっています。

module Handler.Hello where

import Import

getHelloR :: Handler Html
getHelloR = error "Not yet implemented: getHelloR"

module Handler.Hello where

import Import

getHelloR :: Handler Html

getHelloR = error "Not yet implemented: getHelloR"

コード生成直後の実装は「getHelloR = error "Not yet implemented: getHelloR"」となっています。

この状態でサーバを起動（yesod devel）し、ブラウザで確認すると「Not yet implemented: getHelloR」と書かれた画面が表示されます。

Handler/Hello.hs を以下のように変更します（最後の行を変更します）。

module Handler.Hello where

import Import

getHelloR :: Handler Html
getHelloR = defaultLayout $(widgetFile "hello")

module Handler.Hello where

import Import

getHelloR :: Handler Html

getHelloR = defaultLayout $(widgetFile "hello")

最後の 1 行を「defaultLayout $(widgetFile "hello")」に変更しました。

これで templates/hello.hamlet を使用して画面が生成されるようになります（templates/hello.hamlet は後ほど作成します）。

View

Yesod では View に関するテンプレートファイルを templates ディレクトリ内に配置します。

Shakespearean Templates

View には「Shakespearean Templates」または「Shakespearean ファミリーのテンプレート言語」と呼ばれるテンプレート言語を使用します。

Shakespearean Templates は全部で 4 種類あります。

Hamlet
HTML 用のテンプレート言語です。
インデントによってタグの入れ子を表現します。
Cassius
CSS 用のテンプレート言語です。
インデントによって入れ子を表現します。
Lucius
こちらも CSS 用のテンプレート言語です。
Cassius とは異なり、CSS のスーパーセットとなっています。
Julius
Javascript 用のテンプレート言語です。
ほとんど Javascript と同じですが、変数補間をサポートしています。

上記テンプレート言語はどれも、変数補間（Haskell 側で定義した変数の値をテンプレートに埋め込む機能）をサポートしています。

また、CSS 用のテンプレート言語は Cassius と Lucius の 2 つあります。どちらを使用しても良いですが、Lucius は CSS のスーパーセットなので、既存の CSS を取り込む場合は Lucius を選択すると良いでしょう。

Hamlet (HTML)

それでは HTML のテンプレートファイルを作成します。

templates/hello.hamlet というファイルを作成し、以下の内容を記述します。

<h1>世界の言語で挨拶します

<h2>出会いの挨拶
<ul>
    <li class="english">Hello
    <li class="chinese">ニーハオ
    <li class="hindi">ナマステ
    <li class="japanese">こんにちは

<h2>別れの挨拶
<ul>
    <li class="english">Goodbye
    <li class="chinese">再見
    <li class="hindi">ナマステ
    <li class="japanese">さようなら

<h1>世界の言語で挨拶します

<h2>出会いの挨拶

<ul>

<li class="english">Hello

<li class="chinese">ニーハオ

<li class="hindi">ナマステ

<li class="japanese">こんにちは

<h2>別れの挨拶

<ul>

<li class="english">Goodbye

<li class="chinese">再見

<li class="hindi">ナマステ

<li class="japanese">さようなら

HTML 用のテンプレート言語「Hamlet」では、タグの入れ子構造をインデントによって表現します。

そのため、閉じタグ（「<li>」に対する「</li>」）は必要ありません。

この状態でブラウザで確認すると、このように表示されるはずです。

Cassius (CSS)

次に CSS でデザインを変更してみましょう。

CSS 用のテンプレート言語は「Cassius」と「Lucius」の 2 つありますが、ここでは Cassius を使用します。

templates/hello.cassius を作成し、以下の内容を入力します。

ul
    li.english
        color: blue;
    li.chinese
        color: green;
    li.hindi
        color: brown;
    li.japanese
        color: red;

li.english

color: blue;

li.chinese

color: green;

li.hindi

color: brown;

li.japanese

color: red;

Cassius も Hamlet と同様に、インデントで入れ子構造を表現します。

国別に文字色を変えてみました。

ブラウザで確認すると、次のように表示されます。

Lucius

ちなみにもう一つの CSS 用テンプレート言語である「Lucius」で書くと、以下のようになります。

ul {
    li.english {
        color: blue;
    }
    li.chinese {
        color: green;
    }
    li.hindi {
        color: brown;
    }
    li.japanese {
        color: red;
    }
}

ul {

li.english {

color: blue;

}

li.chinese {

color: green;

}

li.hindi {

color: brown;

}

li.japanese {

color: red;

}

Cassius とは異なり、入れ子構造はインデントではなく「{ ... }」を使用します。

Lucius は CSS のスーパーセットなので、次のように CSS をそのまま記述することもできます。

ul li.english {
    color: blue;
}
ul li.chinese {
    color: green;
}

ul li.hindi {
    color: brown;
}

ul li.japanese {
    color: red;
}

ul li.english {

color: blue;

}

ul li.chinese {

color: green;

}

ul li.hindi {

color: brown;

}

ul li.japanese {

color: red;

}

Lucius で書く場合は、templates/hello.lucius という名前で作成します。

Julius (Javascript)

最後に Javascript 用のテンプレート言語、「Julius」を使用してみましょう。

templates/hello.julius を作成し、以下の内容を入力します。

document.write("Written by Javascript!".fontsize(5));

1	document.write("Written by Javascript!".fontsize(5));

ブラウザで確認すると、次のように表示されます。

まとめ

Handler の作成から、各種テンプレート言語まで見てきました。

テンプレート言語は 4 種類もあるのでややこしいですね。

とりあえず単純なページは作成することができるようになりました。

とはいえ、リクエストパラメータの扱い方や複数ページ間のリンク方法などはまだ知りません。

次回以降にぼちぼち調べていきたいと思います。

Enjoy Yesod!