外部APIを用いてMiddlemanで動的にページ生成する

Middleman には 動的ページ と呼ばれる機能があります。この機能は非常にパワフルでデータを元にして動的にページを生成することができます。

今回はこの機能を用いて外部 API からデータを取得しつつページを生成してみます。

外部 API を用意する

Lumenで簡単なAPI作ってみた で作成した API 機能を用いてテストしてみます。難しいことはなく単に次の画像のようなデータを JSON で返すだけです。データ自体は faker で作られています。

lumen-test-api response

この API をローカルの Vagrant 上で動作させています。

middleman-data_source を使って API からデータを取得する

API のレスポンスが YAML または JSON の場合, middleman-data_source が便利です。data.api_name のように データファイル で扱えるようにしてくれます。

まず Gemfile に gem を追加します。

gem "middleman-data_source"

追加したら忘れずに $ bundle update してください。

続いて config.rb に次の内容を追加します。

activate :data_source do |c|
  c.root  = "http://192.168.33.10"
  c.files = [
    "posts.json"
  ]
end

この設定によって http://192.168.33.10/posts.json からデータを取得し, data.posts でアクセスできるようになります。

動的ページの設定を追加する

データの取得ができてしまえば後は簡単ですね。まず config.rb に動的ページの追加を設定しましょう。

data.posts.each do |p|
  proxy "posts/#{p[:id]}.html", "templates/post.html", locals: { post: p }, ignore: true
end

取得したデータの id を元に posts/:id.html ページを生成します。また各ページに対して post オブジェクトを渡します。中身は JSON データの 1 件ごとのデータです。この設定によってページ内でオブジェクトを利用してコンテンツを作成できるようになります。

続いて設定中に書かれた templates/post.html に該当するファイルを作りましょう。ファイルは templates/post.html.erb です。

middleman-use-api-sample/post.html.erb at master · yterajima/middleman-use-api-sample

テンプレートの中では渡された post のハッシュを展開しているだけです。

build してみる

$ bundle exec middleman build を実行して build してみましょう。

build

posts/1.html の中身はこのようになりました。

posts/1.html

動的ページでできること

動的ページはパワフルな機能の 1 つです。元になるデータがあればページを生成することができます。データの形式がなんであれ動的ページの設定時にオブジェクトとして渡せれば問題ありません。

今回は自作の API を利用しましたがブログサービスの API を使ってページを作ることも可能です。例えばよく話題に挙がるのは Tumblr です。試してはいませんが WordPress の JSON REST API を使ってページを作ることもできるでしょう。

Static Site Generator 導入の問題の 1 つとして「管理画面がなくクライアントが更新できない」というものがあります。この部分を外部 API を用いて解決することが可能です。例えば「ニュース」のようなものをクライアント自身に更新してもらいたいような場合に便利ですね。build の自動化や git と組み合わせてどうするのかといった幾つかの面倒は残りますが。

追記

実際に動作させたものはこちらにあります。yterajima/middleman-use-api-sample

このサンプルには /index.html に投稿の一覧リンクを作成する処理も含まれます。