前回からの続き。

今回は、アップロードしたファイルを表示できるようにする。
具体的には、音楽ファイルをアップロードしたら、HTML5 Audioタグを用いて再生できるような機能を実装する。

Controller を編集

DB に格納されたファイル情報を基に、アップロードされたファイルの表示をする。 そのため、DB からレコード一覧を取得する処理を Controller に記述。

1
2
3
4
5
6
7
8
9

class UploaderController {
    ...
    def upload = {
        ...
    }
    def list = {
        [tableData: Uploader.list()]
    }
}

前回ドメインクラスとして Uploader を定義したので、list() メソッドを呼び出すだけでレコード一覧を取得することができる。 取得したレコード一覧を tableData に設定すると、view 側で tableData から自由にレコードを取り出すことができる。

View の作成

tableData は配列（連想配列？）の形で渡されるので、<g:each> タグを使って要素を 1つずつ取り出して表示させる。
具体的には次のように記述した。

1
2
3
4
5
6
7
8
9
10
11

<div class="list">
    <g:each in="${tableData}" status="i" var="record">
        <p>${record.filename}</p>
        <g:if test="${record.filename}">
            <p>
                <audio src="${createLinkTo(dir:'data/', file:''+record.filename)}" controls>
                </audio>
            </p>
        </g:if>
    </g:each>
</div>

grailsタグの意味は、それぞれ以下の通り。

• <g:each> タグ：配列から要素を 1つずつ取り出す
• <g:if>タグ：ファイルが存在するかの判定
• createLinkTo() メソッド：ファイルへのリンクを生成

以上で、アップロードしたファイルを表示/再生することができる。

今回は、HTML5 Audioタグを使っているので音楽ファイルがアップロードされていれば、音楽ファイルを再生することができる。

Grails を初めて使ってみたけど、結構楽に基本的なアップローダの機能は実装できたと思う。 まだまだ、MVCな考え方に慣れてないので、もう少し Grails 触ってみようかなと思ったり思わなかったり…。