テックブログ

ペパボテックブログのアップデート 2022

テックブログ

執行役員 VP of Engineering 兼技術部長の @hsbt です。ついにモンスターハンターライズのサンブレイクの発売月である6月になったので、万全の体制で臨むべく月末までに時期を早めることが可能なタスクをひたすら消化し続けています。

このテックブログについて、昨年から取り組んでいた内部的なアップデートがいくつかあるのでそれらをまとめて紹介します。

テンプレートを slim から erb に統一

テックブログはローンチした当初は slim で書かれていました。当時の意思決定としては高速に変換ができる、タグを閉じる必要がなくエンジニアにとって書きやすいという理由から選択を行いました。

しかし、時は立ちテックブログのデザインを行うメンバーもエンジニアだけではなくデザイナ中心になり、新規に作成されるページは erb を用いることが多くなりました。そのため、テンプレートエンジンが混在し、新規にページを作成するときも意思決定や開発速度に影響が出始める状況となりました。また、slim というテンプレートエンジンの開発も活発ではなくなるなど状況の変化を考慮して、2022年5月に slim のテンプレート全てを erb に変換しました。

変換は、slim に付属している slim/erb_converter.rb を用いました。以下が Rakefile に用意した .slim な拡張子のファイルを .erb として変換するコードです。

task :slim2erb do 
  Dir.glob("**/*") do |file|
    if file.end_with?("slim")
      require "slim/erb_converter"
      erb = Slim::ERBConverter.new.call(File.read(file))
      File.open(file.sub(/\.slim$/, ".erb"), "w") do |f|
        f << erb
      end
      File.unlink file
    end
  end
end

Slim::ERBConverter で変換した erb ファイルはそのままでは、middleman の front matter と呼ばれるメタデータ付与の機能を用いている箇所が以下のように erb としては壊れます。

<% --
 %><pageable><true> 
</true></pageable><% --

このようなコードは以下のように middleman が期待する front matter 形式に書き直す必要があります。

---
pagerble: true
---

また、変換直後の erb ファイルは Temple::Util.escape_html によって二重にエスケープされているため、そのままでは利用できません。erb っぽくないコードとなりますが ::Temple::Util.escape_html をファイルから全て消すことで最低限動作する erb コードが作成されます。

erb っぽくないコードのままで良い場合はここで作業は終了となりますが、継続的なメンテナンスをしていくために同僚の @shikakun と以下の作業を行いました。

  • HTML らしいコードになるように、変換の過程で生じた唐突な改行や不揃いのインデントをタグ単位で揃える
  • 文字列評価とブロックを伴うコードが変数 slim_controls に代入表示されているものを全て直接表示するように書き換え
  • 削除した Temple::Util.escape_html に付属していた不要な () を全て削除

現在は全てのテンプレートが erb となりました。HTML と比較したときに習得までに要する時間が少ない erb に統一したことで今後の新しいコンテンツ開発の速度も向上することを期待しています。

著者ページを作成

ペパボテックブログは普段の仕事の成果を発信する場所として位置付けていますが、執筆者にとってカジュアル面談や社内外での自己紹介の場で「自分はこういう仕事をしているものです」という名刺の代わりとなるような著者ページを生成するようにしました。私のページは https://tech.pepabo.com/authors/hsbt です。

このページは bellycard/middleman-blog-authors: A Middleman extension to add author profile pages to a blog をベースに、最新バージョンの middleman で動作するように必要な箇所を全て書き換えた pepabo/middleman-blog-authors によって生成されてます。この先、発表資料や登壇情報なども掲載して賑やかにしていきたいと思います。

AMP ページの終了

テックブログを AMP 対応しました - ペパボテックブログ から 4 年にわたって提供していた AMP ページも役割を終えたと考え、2021/12 を最後にページの提供を終了しました。技術的な検証が目的だったため、ちょうど良い時期だったのではないかと思います。

Dart Sass の導入

@hsbt さんの同僚の、デザイン部の @shikakun です。テックブログをはじめとしたコーポレートサイトの開発・運用を担当しています。

ペパボでは全社で利用できる共通基盤デザインシステム「Inhouse」の開発を進めています。なお、ペパボのデザインシステムへの取り組みについては、以下の記事や、カンファレンスでの発表の動画で詳しく紹介していますので、ぜひご覧ください。

Inhouse ではガイドラインの実装として、Sass のコンポーネントライブラリを提供しています。このライブラリは Dart Sass でコンパイルすることを要件としているため、ペパボテックブログでも Dart Sass を導入することにしました。

middleman は v4 よりコアからアセットパイプライン機能が削除され、その代わりに 外部パイプライン が提供されるようになりました。そこで、これまで /source/stylesheets に置いていた SCSS ファイルを、リポジトリのルートに用意した /frontend/src/styles のような middleman がビルドする対象外のディレクトリへ移動したうえで、 config.rb で以下のように設定することで、middleman がビルドするタイミングで webpack を実行し Dart Sass によるコンパイルを実現しています。

activate :external_pipeline,
  name: :webpack,
  command: build? ? "npm run build" : "npm run dev",
  source: "frontend/build",
  latency: 1

まとめ

以上、昨年から今年にかけてのテックブログの変更点を紹介しました。

テックブログを運営するにあたっては SaaS などブログサービスを用いるという手段もありますが、ペパボでは自分達が手慣れた道具を使って試す場としても活用しており、こういうものがほしい、と思った時にすぐ発信できることを重視して今でも内製でメンテナンスし続けています。

書いた人

  • hsbt

    Ruby commiter, OSS programmer

  • shikakun

    デザイン部コーポレートデザインチーム デザイナー