[Middleman 3][blog]初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定するをベースにOGP画像を相対パスで指定できるように改良してみます。

config.rb

config.rbの設定を見直していきます。まず、site_urlにURLを設定します。次にOGP画像のパスを作るためにarticle_dir, article_image_url, article_image_secure_urlを作ります。site_urlはMiddleman-OGPのogp.base_url = site_urlに指定します。加えて画像をAsset Hashの対象外とするためoptions.ignore = [/^articles/]をconfigure :build doに指定します。

set :site_url, 'http://whiskers.nukos.kitchen'

########################
#
# Blog setting
#
########################
set :article_dir, 'articles'
set :article_image_url, 'http://whiskers.nukos.kitchen'
set :article_image_secure_url, 'https://whiskers.nukos.kitchen'

activate :blog do |config|
  # This will add a prefix to all links, template references and source paths
  # config.name   = "blog"
  # config.prefix = "blog"

  # Matcher for blog source files
  config.sources = article_dir + "/{year}/{month}/{day}/{title}/index.html"

  # Dist articles
  # config.permalink = "{year}/{month}/{day}/{title}.html"
  # config.summary_separator = /()/
  # config.summary_length    = 250
  # config.taglink           = "tags/{tag}.html"
  # config.year_link         = "{year}.html"
  # config.month_link        = "{year}/{month}.html"
  # config.day_link          = "{year}/{month}/{day}.html"
  # config.default_extension = ".markdown"

  # Layout and Template
  config.layout            = "post"
  config.tag_template      = "tag.html"
  config.calendar_template = "calendar.html"

  # Enable pagination
  config.paginate = true
  # config.per_page = 3
  # config.page_link = "page/{num}"
end

page "/feed.xml", layout: false


########################
#
# OGP setting
#
########################
activate :ogp do |ogp|
  ogp.namespaces = {
    og: data.ogp.og
  }
  ogp.base_url = site_url
  ogp.blog = true
end


########################
#
# Activate plugins
#
########################
configure :build do
  # activate :minify_css
  # activate :minify_javascript
  # activate :minify_html

  # Enable cache buster
  activate :asset_hash do |options|
    options.ignore = [/^articles/] # asset_hashの対象外にする
  end

  # Use relative URLs
  # activate :relative_assets
end

テンプレートを改良する

少し冗長になりますが、下記のようにOGP画像のURLを作ることができます。（さすがにクソコードなのでそのうち書き直します）ブログ記事にはOGP画像を指定していることを前提にしているので存在しない場合があるのであればその分の調整が必要です。。

<% ogp_tags do |name, value| %>
  <% base_url     = Middleman::OGP::Helper.base_url %>
  <% dir_path     = File.dirname current_path %>
  <% extname      = File.extname current_path %>
  <% article_slug = File.basename current_path, extname %>
  <% if name == "og:image" and value.present? and is_blog_article? %>
    <% image_path = File.join article_image_url, article_dir, dir_path, article_slug, value %>
    <meta name="<%= name %>" content="<%= image_path %>">
  <% elsif name == "og:image:secure_url" and value.present? and is_blog_article? %>
    <% image_path = File.join article_image_secure_url, article_dir, dir_path, article_slug, value %>
    <meta name="<%= name %>" content="<%= image_path %>">
  <% else %>
    <meta name="<%= name %>" content="<%= value %>">
  <% end %>
<% end %>

OGP画像のパスを相対パスに変更する

これでOGP画像のパスを記事ファイルが置かれているところから相対パスを指定できるようになります。

---
title: Entry Title
date: 2015-03-03 12:00:00 UTC+9
tags: Tag
ogp:
  og:
    description: 'This is my fixture Middleman site.'
    image:
      '': 'images/eyecatch/photo.png'
      secure_url: images/eyecatch/photo.png
      type: image/png
  twitter:
    card: summary
---

ビルド

ビルドすると以下のようになります。

    <meta name="og:locale" content="ja_JP">
    <meta name="og:locale:alternate" content="ja_JP">
    <meta name="og:site_name" content="Site Name">
    <meta name="og:description" content="This is my fixture Middleman site.">
    <meta name="og:image" content="http://whiskers.nukos.kitchen/articles/2015/03/03/example-01/images/eyecatch/photo.png">
    <meta name="og:image:secure_url" content="https://whiskers.nukos.kitchen/articles/2015/03/03/example-01/images/eyecatch/photo.png">
    <meta name="og:image:type" content="image/png">
    <meta name="og:image:width" content="400">
    <meta name="og:image:height" content="400">
    <meta name="og:type" content="article">
    <meta name="og:title" content="Entry Title">
    <meta name="og:url" content="http://example.com/2015/03/03/example-01.html">
    <meta name="twitter:card" content="summary">
    <meta name="article:published_time" content="2015-03-03T03:00:00Z">
    <meta name="article:tag" content="Tag">

このようにすることで、パスの指定の手間を大幅に省くことができます。 URLやファイル名・ディレクトリ構造の変化にも対応できるようになり、管理が非常に楽になります。

ヘルパー化する（追記）

上の方法ではまだ相対パスと絶対パスを切り替えることができません。この切り替えも簡単にできるようにヘルパーを作ってみます。

config.rbに下記のようにヘルパーを作ります。第一引数、第二引数にOGPのnameとvalue、第三引数に現在のページのURL、第四引数に相対パス指定にするかどうかを指定します。

helpers do
    def ogp_tag(name, value, current_url, relative = false)

      base_url     = Middleman::OGP::Helper.base_url
      dir_path     = File.dirname current_url
      extname      = File.extname current_url
      article_slug = File.basename current_url, extname


      if name === "og:image" and value.present? and is_blog_article? and relative
        content = File.join article_image_url, article_dir, dir_path, article_slug, value
      elsif name === "og:image:secure_url" and value.present? and is_blog_article? and relative
        content = File.join article_image_secure_url, article_dir, dir_path, article_slug, value
      else
        content = value
      end

      return "<meta name='#{name}' content='#{content}'>"
    end
end

あとはERB側でヘルパーを呼ぶように変更します。

<% ogp_tags do |name, value| %>
  <%= ogp_tag name, value, current_path, true %>
<% end %>

第4引数の相対パス指定はYAML Front Matterに指定を加えればページ単位で制御することもできるようになります。OGPの指定については以上です。

次回はMiddleman Titleを使ってページのタイトルを設定したいと思います。

次回：初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する

参考

Middleman(+ middleman-blog)のテンプレートで使える変数まとめ

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

初めての Middleman シリーズ初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する