目次・あらすじ
大石制作ブログはMiddlemanの提供でお送りしています
このブログの記事は、基本的にMiddleman内でMarkdown記法(Readcarpet使用)で書いてます。
サクサク書けて良いのだけど、凄く便利で柔軟性の高いMiddlemand内で動かしているからこそ、たまに不便に思うことがあります。
Markdownでヘルパータグを使えない(?)のが悩み
Middlemanのレイアウトや記事内では便利なヘルパーメソッドを使うことができるけど、これをMarkdownで書いた記事では、通常使うことができません。
たとえば、Middlemanには記事中にHTMLコードをそのまま出力したいとき、めんどくさいHTMLの「<」とか「>」とか「&」の記号を自動で「<」とかにエスケープして出力してくれるヘルパ「escape_html」というものがあります。
ERB形式のファイルであれば、下記の様に書けば、期待通りにそのままエスケープして出力してくれるのだけど、Markdownのファイルに普通に書いただけでは、期待通りに出力してくれません。
<%= escape_html '<h1>
<a href="//blog.s0014.com">大石制作ブログ</a>は
<strong>スマート&クール&ビューティーだね！</strong>
<del>……そんな夢を見たんだ。</del>
</h1>' %>
……と書いた場合、通常こんなHTMLが出力されるのを期待します。
'<h1>
<a href="//blog.s0014.com">大石制作ブログ</a>は
<strong>スマート&クール&ビューティーだね！</strong>
<del>……そんな夢を見たんだ。</del>
</h1>'
ところが、実際はこんな出力になります。
大石制作ブログは
スマート&クール&ビューティーだね！
……そんな夢を見たんだ。
' %>
全くヘルパータグが仕事してくれませんね。そりゃそうか。
……で、色々試して見つかった方法はシンプルでした。
ERB→Markdown→HTMLの拡張子3連携発動でOK
Middleman blogの機能で「blog-title」という名前の記事を生成したとします。
$ middleman article blog-title
# "2017-06-17-blog-title.html.markdown"が生成される
拡張子が「.html.markdown」ファイルなので、Markdownで書いたファイルをHTMLに変換してくれる事になります。
同様にMiddlemanの優秀な変換機能は、対応するgemを有効にした上でテキストファイルの拡張子を調整するだけで任意の形式で出力してくれます。たとえば……
- 「.css.sass」ならSASSをCSSに。
- 「.html.slim」ならslimをHTMLに。
- 「.js.coffeescript」ならCoffeeScriptをJavaScriptに。
……と言う具合に、複数の拡張子が連なっている逆順から指定た形式の静的テキストファイルに変換してくれます。
なんと、これは1段階だけでなく、2段階の変換でもOKでした。
生成した記事の例だと、「2017-06-16-blog-title.html.markdown」のファイル名の末尾に「.erb」をつけるだけです。
「2017-06-16-blog-title.html.markdown」
↓
「2017-06-16-blog-title.html.markdown.erb」にファイル名を変更することで、Markdownとして処理される前に、MiddlemanがERBとして先に処理してくれます。
これでヘルパー機能使いたい放題ですね。
……つまりヘルパーが使えると言うことは、Markdown内にRubyコードも書けるわけです。
ほとばしるサンシャインをERBに込める!!!!
たとえば、Markdownを書いている最中、暑さにやられてサンシャインな気分になったとき、人はこんなフォントいじりをやってみたくなるものです。
Y H E E E E E E E E E E E E E E E E E E E E E E E ! ! !
空 前 絶 後 の オ オ オ オ オ オ オ オ オ オ オ オ オ オ ! ! ! !
J U U U U U U U U U U U U U U U U U S T I I I C E ! ! !
これをHTMLで書くと、こんなコードになります。
<div style='font-family: monospace; text-shadow: 0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white,0 0 10px white; line-height: 1;'>
<p style='margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;'>
<span style='font-size: 7.8rem; font-weight: bold; color: hsl(16, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>Y</span>
<span style='font-size: 7.199999999999999rem; font-weight: bold; color: hsl(24, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>H</span>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(32, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(40, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(48, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(56, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(64, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(72, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(80, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(88, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(96, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(104, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(112, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 0.0rem; font-weight: bold; color: hsl(120, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(128, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(136, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(144, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(152, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(160, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(168, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(176, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(184, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(192, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(200, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(208, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 7.199999999999999rem; font-weight: bold; color: hsl(216, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 7.8rem; font-weight: bold; color: hsl(224, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 8.4rem; font-weight: bold; color: hsl(232, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
</p>
<p style='margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;'>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(10, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>空</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(20, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>前</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(30, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>絶</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(40, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>後</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(50, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>の</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(60, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(70, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(80, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(90, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(100, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(110, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 0.0rem; font-weight: bold; color: hsl(120, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(130, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(140, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(150, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(160, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(170, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(180, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(190, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>オ</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(200, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(210, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(220, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(230, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
</p>
<p style='margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;'>
<span style='font-size: 7.8rem; font-weight: bold; color: hsl(16, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>J</span>
<span style='font-size: 7.199999999999999rem; font-weight: bold; color: hsl(24, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(32, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(40, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(48, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(56, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(64, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(72, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(80, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(88, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(96, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(104, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(112, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 0.0rem; font-weight: bold; color: hsl(120, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 0.6rem; font-weight: bold; color: hsl(128, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 1.2rem; font-weight: bold; color: hsl(136, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 1.7999999999999998rem; font-weight: bold; color: hsl(144, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 2.4rem; font-weight: bold; color: hsl(152, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>U</span>
<span style='font-size: 3.0rem; font-weight: bold; color: hsl(160, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>S</span>
<span style='font-size: 3.5999999999999996rem; font-weight: bold; color: hsl(168, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>T</span>
<span style='font-size: 4.2rem; font-weight: bold; color: hsl(176, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>I</span>
<span style='font-size: 4.8rem; font-weight: bold; color: hsl(184, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>I</span>
<span style='font-size: 5.3999999999999995rem; font-weight: bold; color: hsl(192, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>I</span>
<span style='font-size: 6.0rem; font-weight: bold; color: hsl(200, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>C</span>
<span style='font-size: 6.6rem; font-weight: bold; color: hsl(208, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>E</span>
<span style='font-size: 7.199999999999999rem; font-weight: bold; color: hsl(216, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 7.8rem; font-weight: bold; color: hsl(224, 100%, 50%); padding-top: 2%; transform: rotate(-10deg);; margin: 0 -0.5rem'>!</span>
<span style='font-size: 8.4rem; font-weight: bold; color: hsl(232, 100%, 50%); transform: rotate(10deg);; margin: 0 -0.5rem'>!</span>
</p>
</div>
空前絶後に面倒なHTMLというか、CSSですね。
ポテンシャルが高すぎてこんな事コードを書くように人から指示を受けたら命を狙われます。
しかし、今の僕はMarkdownのテキストであっても超絶怒涛のERBが使えるので、Rubyでこんな感じに書いてしまえるのです。
# 家族構成
- ガイア池崎
- ポセイドン池崎
- ともかず
<%=
blue_h = 240
shadow = Array.new( 10.times.map {"0 0 10px white"} ).join(",")
html = "<div style='font-family: monospace; text-shadow: #{shadow}; line-height: 1;'>\n";
["YHEEEEEEEEEEEEEEEEEEEEEEE!!!",
"空前絶後のオオオオオオオオオオオオオオ!!!!",
"JUUUUUUUUUUUUUUUUUSTIIICE!!!",].each{ |str|
line = ""
str.split("").reverse.each_with_index{ |chr, i|
size = ( (str.size / 2) - i ).abs * 0.6
divid = blue_h / str.size
color_h = blue_h - ( ( divid * (i + 1) ) )
if i % 2 == 0 then
odd_style = " transform: rotate(10deg);"
else
odd_style = " padding-top: 2%; transform: rotate(-10deg);"
end
line = " <span style='font-size: #{size}rem; font-weight: bold; color: hsl(#{color_h}, 100%, 50%);" +
"#{odd_style}; margin: 0 -0.5rem'>#{chr}</span>\n" + line
}
html += " <p style='margin-bottom: 0; display: flex; " +
" justify-content: space-between; align-items: center;'>\n" +
"#{line} </p>\n"
}
html += "</div>"
html;
%>Markdownテキストの中であってもRubyコードが入り込んでしまうなんて！
いやぁ、スマート&クール&ビューティーですね。
ジャスティス！