チュートリアル1~テンプレートの利用と、JavaScript・スタイルシートのコンパイル、バンドル

さて、この章では簡単なTODOアプリを作ることで、Pine Frameworkがどれほど簡単にWEBアプリを構築できるのか体験していきましょう。

入力フォームを準備する

まず初めにやることは、TODOを入力するためのHTMLフォームを作成することです。

ここまでで既にpine_siteの雛形のインストールは終わり、/home画面へのアクセスは出来るようになっていると思います。

この/home画面を構成しているテンプレートは、/sites/pine_site/module/home/views/templatesの中にあるget_index.twigというTwigテンプレートファイルです。これはGETメソッドhomeコマンドindexアクションにアクセスした際に利用されるテンプレートという意味です。

indexアクションはHTMLにおけるindexページと同じで、そのコマンドの基本となるアクションの事です。

Pine FrameworkはテンプレートエンジンにSymfonyプロジェクトのプロダクトであるTwigを採用しています。Twigはとても便利なテンプレートエンジンで、HTMLタグの自動エスケープや他のテンプレートのincludeがとても簡単に行なえます。

なお、Pine Frameworkではエンジニアが頻繁に更新するであろうファイルは/module/logic内に、デザイナーが頻繁に更新するであろうファイルは/module/views内に配置されており、エンジニアとデザイナーがそれぞれの役割に専念できるように配慮されています。

それでは、get_index.twigにHTMLフォームを記述してみましょう。

get_index.twig
<h1>タスク一覧</h1>
<a href="/home/new_task"><button type="button" id="new-task">新規タスクの作成</button></a>
<table id="tasks">
    <thead>
        <tr>
            <th>編集</th>
            <th>タイトル</th>
            <th>状態</th>
            <th>期限</th>
            <th>削除</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/home/edit?task_id="><button type="button" class="edit">編集</button></a></td>
            <td>サンプルタスクその1</td>
            <td><span class="status not-started">未着手</span></td>
            <td>2019-01-01 00:00:00</td>
            <td><a href="/home/delete?task_id="><button type="button" class="delete">削除</button></a></td>
        </tr>
    </tbody>
</table>

レンダリングされたテンプレート

次に、簡単なスタイルシートを適用します。

Pine Frameworkではスタイルシートの記述用語として、CSSのメタ言語であるSCSSを採用しています。

/sites/pine_site/module/home/views/stylesheets/get_index内のget_index.scssが、現在作成しているページの基本スタイルシート定義ファイルです。

ここで、1つ上の階層/sites/pine_site/module/home/views/stylesheets/にあるimport.scssを見てみましょう。

@import "get_index/get_index.scss";

という記述があり、get_index.scssが読み込まれているのがわかると思います。

また、/sites/pine_site/module/home/views/scripts/ディレクトリの中にあるindex.jsxを見てみましょう。コメント文の間に、

import "../stylesheets/import.scss";

という記述があって、先程のimport.scssが読み込まれているのがわかると思います。

Pine Frameworkでは複数のJavaScriptファイルやCSSファイルをひとまとめにする(バンドルする)高機能なモジュール・バンドラー『webpack』と、最新のECMAScript6や7で書かれたJavaScriptを古いブラウザ用でも動作するコードに変換するトランスパイラ『Babel』を採用しています。

上で見た、import.scssやindex.jsxは、webpack+Babelでのバンドルとトランスパイルを行う際に、複数のファイルを管理するためのファイルとなっています。

これからwebpack+Babelを使ったバンドルファイルの自動生成を試してみるのですが、その前にまず/sites/pine_site/public/homeディレクトリのjsフォルダとcssフォルダの中に、何もファイルが無いことを確認しておきましょう。この後で自動バンドルが行なわれると、ここに.jsファイルと.cssファイルが自動で作成されます。

まだ空のcssフォルダとjsフォルダ

それでは、JavaScriptファイルとSCSSファイルのコンパイル・バンドルが自動で行なわれるようにwebpackに少し設定をしましょう。

Pine Frameworkのルートディレクトリにあるdevelopment.jsを開いて

const site_id       = "****";

にサイトIDであるpine_siteを設定してください。

これで、モジュールバンドルとトランスパイルの準備は完了です。

そうしたら、このdevelopment.jsのあるディレクトリでシェルを開き、

npm start

を実行してみましょう。シェル上にタスクのログが表示されます。エラーがなければ、先ほど空だった/sites/pine_site/public/homeディレクトリのjsフォルダとcssフォルダの中に、bundle.min.cssbundle.min.jsファイルが生成されます。

生成されたcssとjsファイル

なお、この.cssと.jsファイルは.minとついていますがミニマイズされていません。

これはwebpackの設定でWEBPACK_ENVdevelopmentの場合にはミニマイズを行なわないように設定してあるからです。

製品として公開する際はnpm startではなく、

npm run build-prod

として、プロダクト用の設定でnpmを実行する事で、ミニマイズされたファイルを書き出す事ができます。

さて、webpack+Babelで自動コンパイル・バンドルが行える事が確認できたら、SCSSファイルに簡単なスタイルを記述してみましょう。npm startを行うとファイルの変更が監視されるので、SCSSファイルやJSファイルを保存するたびに自動でバンドルが行なわれます。

/sites/pine_site/module/home/views/stylesheets/get_index/get_index.scss
button#new-task {
    width:          100%;
}
table#tasks {
    width:          100%;

    tbody {
        tr {
            td {
                span.status {
                    box-sizing:         border-box;
                    display:            inline-block;
                    padding:            2px 6px;
                    border-radius:      4px;
                }

                span.not-started {
                    background-color:   red;
                }

                span.started {
                    background-color:   green;
                }

                span.done {
                    background-color:   dimgray;
                }
            }
        }
    }
}

このようになりました。

生成されたcssとjsファイル

次の章では、bambooコマンドを使ってデータベースにテーブルを作成し、新規タスクを登録できるようにアクションを作っていきます。

>> チュートリアル2~データベースの利用とアクションの作成