MiddlemanでOGPデータをyamlを使って極力少ない労力で書く

アドベントカレンダー2013 2日目の記事です。
Middleman Advent Calendar 2013 - Adventar

---

ogpを書くにあたって、重複しまくりなものをできるだけ重複しないようにyamlで書いてみよう！わたしたち人間は怠惰だから！

今北産業

• yamlのアンカーとエイリアスを使う → Rubyist Magazine - プログラマーのための YAML 入門 (初級編)
• でも、エイリアスでは文字列の連結ができない → YAMLのアンカー&エイリアス
• yamlをdata/opg.ymlに置くと、slim側でdata.ogp.descriptionと書けば使える

以下ソース

重複しないように、と思ったけど、これではあまり意味がない感じがする。
が、使用するslim側ではあまりデータの意識をせずにline.textなどと書けるのでよしとしよう。でも、やっぱり使いにくい。

ogp.yml

url: &url
  'http://www.hoge.com/hoge/?jp=日本語'
title: &title
  'titleです'
description: &description
  'descriptionです'
keyworkds: &keyworkds
  'key,words'

&test: 1

twitter:
  lang: 'ja'
  hashtags: 'middleman'
  site: *title
  text: *title
#  text: "#{*title} #{*description}" # 無理
#  text: *title + ' | ' + *description # 無理
line:
  text: *title
  link: *url
fb:
  app_id: '1234'
og:
  locale: 'ja_JP'
  images: ['http://hoge.com/ogp.jpg']
  url: ''
  title: *title
  site_name: *title
  description: *description

_meta.slim

meta name="keywords" content="#{data.ogp.keywords}"
meta name="description" content="#{data.ogp.description}"

meta property="og:type" content="company"
meta property="og:locale" content="ja_JP"
meta property="og:url" content="#{data.ogp.og.url}"
meta property="og:title" content="#{data.ogp.title}"
meta property="og:site_name" content="#{data.ogp.og.sitename}"
meta property="og:description" content="#{data.ogp.og.description}"
- data.ogp.og.images.each do |image|
  meta property="og:image" content="#{image}"
meta property="fb:app_id" content="#{data.ogp.fb.app_id}"


/Twitter
meta name='twitter:card', content='summary_large_image'
meta name='twitter:domain', content='hoge'


link href="/favicon.ico" rel="shortcut icon"

_social_btn.slim

.socialBtns
  ul
    / fbはiframe版のもの
    li.facebook
      - encodedFBUrl = URI.escape(data.ogp.url)
      iframe.fb-like src='//www.facebook.com/plugins/like.php?href=#{encodedFBUrl}&send=false&layout=button_count&width=130&show_faces=false&font&colorscheme=light&action=like&height=21&appId=#{data.ogp.fb.app_id}', scrolling='no', frameborder='0', style='border:none; overflow: hidden; width:130px; height:21px;', allowtransparency='true'
    li.twitter
      a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="#{data.ogp.url}" data-text="#{data.ogp.title} #{data.ogp.description}" data-hashtags="#{data.ogp.twitter.hashtags}"
    li.line
      - lineURL = URI.escape(data.ogp.line.text + ' ' + data.ogp.line.link)
      a href="http://line.naver.jp/R/msg/text/?#{lineURL}": img src="img/sp/linebutton_88x20.png" width="88" height="20" alt="LINEで送る"