最近エンジニアということを忘れられることが多いですが、株式会社カイユウでエンジニアをやっていますキャベツこうべ（@cabbagekobe）です。
このエンジニアブログですがMiddleman。そして、その拡張のMiddleman Blogで運用しているということを以前書かせていただきました。→KAI-YOU LabはMiddlemanで運用していきます
Middleman自体のシンプルさもあり、そのままの運用では開発者ブログとしての要求に足りない部分もあり、細かい工夫をしています。
今回はその辺りについて書いていきます。
シンタックスハイライト（コードハイライト）
開発者ブログという性質上、記事内にソースコードを記述することは多くあります。
markdownでは半角スペース4個でコードブロックを表示できますが、やはり言語ごとにソースコードがハイライトされていた方がわかりやすいです。
というわけでMiddleman公式でリリースされているMiddleman-Syntaxを利用します。
使う為の準備
# Gemfileに下記を追加
gem "middleman-syntax"
Gemfileに追記後、bundle install を実行しgemをインストールします。
その後config.rbを編集して有効にします。
# config.rbに下記を追加する。
activate :syntax
有効にしただけではコードブロックにclassが割り振られるだけなので、ハイライト用のcssを作成します。
下記のコードをsyntax.css.erbなどと名前を付けて適当に読み込ませます。
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>
カラーリングは現在9種類用意されていて、上記の”Github”の部分を下記のテーマから選んだものに変更するとそれぞれで反映されます。
- Base16
- Base16::Solarized
- Base16::Monokai
- Colorful
- Github
- Molokai
- Monokai
- MonokaiSublime
- ThankfulEyes
実例
```php
<?php
for ($i = 1; $i <= 100; $i++) {
if ($i%15 == 0) {
echo "FizzBuzz";
} elseif ($i % 5 == 0) {
echo "Buzz";
} elseif ($i % 3 == 0) {
echo "Fizz";
} else {
echo $i;
}
echo "\n";
}
```
上記の記述から下記の方な表示が得られます。
<?php
for ($i = 1; $i <= 100; $i++) {
if ($i%15 == 0) {
echo "FizzBuzz";
} elseif ($i % 5 == 0) {
echo "Buzz";
} elseif ($i % 3 == 0) {
echo "Fizz";
} else {
echo $i;
}
echo "\n";
}
いい感じ！
YAMLを利用した複数人の著者設定・管理
会社で運用している開発者ブログということでこのブログは複数の著者がいます（開発部での持ち回りで書いています）。
というわけでその複数人いる著者のプロフィールをそれぞれの記事に直接書くのは現実的にツライです。まとめて管理したいところです。
MiddlemanではYAMLやJSONなどのファイル形式で記述された内容をデータベース代わりに情報を管理することができます。
プロジェクトのルートにdataというフォルダを作成し、authors.ymlというファイルを下記のような感じに作成します。
cabbage:
slug: 'cabbagekobe'
image: 'cabbagekobe.png'
name: 'キャベツこうべ'
description: |-
エンジニアをしております。神戸です。
インターネット上ではキャベツこうべという名前を名乗っていたりします。
KAI-YOUのエンジニアとして皆様によりポップなコンテンツを、良質な体験とともにお届けできるように日々改善＋新規開発をしております。
ninja:
slug: 'ninja'
image: 'ninja.png'
name: 'ニンジャ'
description: |-
デザイナー、エンジニアとして、ウェブの表示に関すること全般の仕事を担当中。
世に出てからずっと、サービスの開発を続けています。
次に記事の著者情報を設定します。
Middlemanではページ冒頭の3個のハイフン（-）に挟むFront Matterという記述方法でそのページの情報を記述することができます（正確に言うとハイフン3個でYAMLで記述でき、バッククオート(｀)三個で囲むとjsonで記述することになる）。
---
author: cabbage
---
上記のように記事の著者を設定します。
上記設定から著者情報を表示する
下記のコードをblogのレイアウトの下に追加しています（このブログではテンプレートエンジンにslimを使っていますのでslimで記述しています）。
ちなみにdataフォルダ以下はdata.filenameで、ページのFront Matterはdata.pageでアクセスできます。
下記の例だとdata.authorsにcabbageの記述があったらそれ以降のテンプレートを読み込むようになっています。
- if data.authors[data.page.author]
section.contents-author.cf
div.author-img
img src="/assets/images/authors/#{data.authors[data.page.author].image}" alt="#{data.authors[data.page.author].name}"
div.author-text
h5.author-name
= data.authors[data.page.author].name
p.author-description
= nl2br(data.authors[data.page.author].description)
このような記述と上記の著者データから
というプロフィール表示が手に入ります！
カイユウではエンジニア・デザイナー募集中です！
というわけで株式会社カイユウではMiddlemanを使って特設ページなどをめっちゃつくるマンであったり、メディアの開発に携わってみたかったり、技術ブログを書くのがめっちゃ好きだったりするエンジニアを募集しております！
よろしくお願いします！！╭( ･ㅂ･)و
