第4回は、第3回の続きとして、投稿アプリにWebアプリケーションテンプレートエンジンの「Tera」を導入し、見た目を整えていきます。
この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。
本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。
今回は、連載第3回までで作成したWebアプリケーションにテンプレートを導入し、見た目を整えていきます。テンプレートとはひな型のことで、アプリの各ページをHTMLファイルなどであらかじめ用意しておき、アプリはその一部(プレースホルダ)を書き換えるのみにすることで、デザインのしやすさと保守性を向上させる仕組みです。
連載第3回では一部にHTMLファイルを使ってはいましたが、各ページのコンテンツはコードによって生成していたので複雑なHTMLに対応するのは大変で、ミスも起きがちでした。テンプレートを導入することで、ページのデザインに幅を持たせて、かつコードはシンプルにしていくことができます。
RustおよびActix Webに対応したテンプレートエンジンは幾つかあり、それぞれ以下のような特徴を持っています。テンプレートエンジンなので、プレースホルダや制御式といった基本的な機能は共通で備えており、拡張性やテンプレートファイルの読み込み方法で差異があるようです。
今回は、更新も盛んでGitHubでの人気も高いTeraを使ってみます。Teraは、テンプレートファイルを実行時に読み込むため、テンプレートの変更に伴うアプリケーションのビルドが不要で、高い開発効率が期待できます。
ここからは、連載第3回で作成したアプリactix-postsをベースに、テンプレート化を進めていきます。まずは、Teraをプロジェクトに追加します。
% cargo add tera
今回のサンプルには、Teraの備える全ての機能は必要ないので、Cargo.tomlファイルの当該行をリスト1のように編集します(default-featuresをfalseにする)。除外される機能とは、truncate、date、filesizeformatなどのフィルターと、now関数です。これらの機能には多くの依存関係にあるクレートが必要になるので、バイナリファイルが大きくなるのを防ぐために不要な場合にはこのように除外することができます。
tera = {version = "1.19.1", default-features = false}
では、Teraによるテンプレート機能の概略を理解するために、投稿一覧ページからテンプレート化しましょう。
本稿では連載第3回までと同様に、投稿一覧ページ、投稿表示ページ、新規投稿ページを説明します。投稿編集ページについては作成ページとほぼ同じ流れになるので、削除機能ともども配布サンプルを参照してください。また、独自テンプレート用に用意していたHTMLファイルは不要になるので、staticフォルダごと削除してしまって問題ありません。
Copyright © ITmedia, Inc. All Rights Reserved.