Skip to main content

ツイート一覧画面を作成する

では、早速ツイート一覧画面を作っていきましょう。

テンプレートエンジンの導入#

このまま src/main.rs に表示用のHTMLを書くことも可能ですが、ソースコードに見た目の記載があるとメンテナンスがしづらくなってしまうので、テンプレートエンジンという仕組みを導入します。

Rocketには始めからテンプレートエンジンを使うための仕組みが備わっています。使うためには rocket_contrib ライブラリをプロジェクト定義ファイルに追記します。

テンプレートエンジンのライブラリはいくつかありますが、今回はHandlebarsというものを使ってみます。

Cargo.toml
  [package]  name = "rustwi"  version = "0.1.0"  edition = "2018"    [dependencies]  rocket = "0.4.10"+ rocket_contrib = { version = "0.4.10", default-features = false, features = ["handlebars_templates"] }

テンプレートファイルの作成#

一旦そのままのHTMLを用意します。

templates/index.html.hbs
<!DOCTYPE html><html lang="ja"><head>  <meta charset="utf-8" />  <title>RusTwi</title>  <style>    .card {      border: 1px dashed gray;      padding: 8px;      margin-bottom: 8px;    }    .form {      padding: 16px 8px;      margin-bottom: 8px;    }    .account-name {      font-weight: 700;    }    .date {      font-size: 80%;      color: gray;    }  </style></head><body><div class="form">  <form>    <input name="message" placeholder="ここに内容を書いてください" />    <button type="submit">ツイート</button>  </form></div><hr /><div class="card">  <span class="account-name">はなこ</span>  2回目のツイート  <span class="date">2021220</span></div><div class="card">  <span class="account-name">はなこ</span>  はじめてのツイート  <span class="date">2021218</span></div></body></html>

このHTMLをレスポンス出力するようにメインプログラムを書き換えてみます。

src/main.rs
  #![feature(proc_macro_hygiene, decl_macro)]
  #[macro_use] extern crate rocket;+ extern crate rocket_contrib;
+ use std::collections::HashMap;+ use rocket_contrib::templates::Template;
  #[get("/")]- fn index() -> &'static str {-    "Hello, world!"+ fn index() -> Template {+    let context: HashMap<&str, &str> = HashMap::new(); // -- (1)+    Template::render("index", &context)  }
  fn main() {      rocket::ignite()          .mount("/", routes![index])+         .attach(Template::fairing())          .launch();  }

なお、(1) については、今はテンプレートに渡すデータがないため、便宜的に HashMap を生成して渡しています。

これで、アクセスするとツイート一覧画面が表示されるようになりました。しかし、今はHTMLファイルに直接ツイートが書かれているため、プログラムからツイートの内容を変更することができません!

次ページでは、ツイートをプログラムから指定できるように改良します。