blog

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

    • Ryuichi Nonaka
    この記事は書かれてから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でタイトルタグを手軽に設定する

    参考

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック