目次
この記事は「サムザップ Advent Calendar 2025」の12/1の記事です。
こんにちは！
サムザップでエンジニア責任者をしています、北島です。
現在ご覧いただいているように、弊社はエンジニアブログを運営しています。
このブログは、弊社の技術やエンジニアの活動を皆様に知ってもらう技術広報の場、弊社エンジニアが日頃の技術チャレンジを発信するアウトプットの場として重要な役割を担っています。
そして、重要な役割を担っているからこそ様々な工夫をしながらエンジニアブログの運営をしています。
この記事では、その工夫をTIPS集としていくつか紹介させていただきます。
弊社と同じようにエンジニアブログを運営している方の参考になれば嬉しいです。
はじめに
弊社エンジニアブログは、「はてなブログ for DevBlog（以降、はてなブログ）」で構築されています。
以前、WordPressで構築していた時期もあったのですが、WordPress本体やPHP、導入しているPluginなどの定期的なバージョンアップなど運用コストがかかっていました。
それに比べ、はてなブログは運用コストが低く技術ブログに特化しているため非常に使いやすく助かっています。
この記事で紹介する運用TIPSは、はてなブログだからこそできる内容も多く含まれている点をご了承ください。
TIPS.1：Markdown形式で記事をGit管理
エンジニアブログの運営で大きなコストとなるもののひとつが記事のレビューです。
弊社エンジニアブログでは、記事の下書き → レビュー → 公開 の流れをなるべく楽にするため、Markdown形式で記事をGit管理する方針を取っています。
また、記事作成ワークフローをGitHub上で可能にする「Hatena-Blog-Workflows-Boilerplate」を導入し、以下のワークフローを実現しています。
- GitHub上で
create draftのActionを実行- 空記事のMarkdownファイルの入ったブランチができる
- はてなブログ上に下書き状態の空記事ができる
- できたブランチをローカルに持ってきて、Markdownファイルに記事を執筆
- ときどき執筆を
commitすることではてなブログ側に反映、プレビュー確認 - 記事ができたらpull request形式でレビュー
- mainブランチに
mergeすることで、はてなブログ上で記事を自動公開
TIPS.2：textlint + reviewdog で文章の校正
上記のように、Markdown形式で記事をGit管理することでレビューのしやすさはかなり改善します。
さらにレビューを楽にするため、弊社では textlint と reviewdog を使うことで文章の校正をしています。
これを実現すると、下記画像のようにpull requestで文章の指摘をしてくれるようになります。
以降はtextlintとreviewdogの導入方法を載せておきます。
対象のリポジトリに textlint をインストール
npm init -y
npm install --save-dev \
textlint \
textlint-rule-preset-jtf-style \
textlint-rule-preset-ja-technical-writing \
textlint-rule-spellcheck-tech-word \
textlint-rule-prh
npx textlint --init
弊社ではtextlint本体の他にいくつかのルールセットも導入しています。
textlint の設定
インストール時に下記ファイルができあがります。
- .textlintrc
- package-lock.json
- package.json
- node_modules/*
node_modules/*は.gitignoreに設定し、他はGit管理下に入れます。.textlintrcで各ルールの細かい設定が可能です。
下記は、preset-jtf-style/3.1.2.全角文字どうしのルールだけを無効にする設定例です。
▼.textlintrc
{
"plugins": {},
"filters": {},
"rules": {
"preset-ja-technical-writing": true,
"preset-jtf-style": {
"3.1.2.全角文字どうし": false,
},
"prh": {
"rulePaths": [
"./textlint_prh_rules.yml"
]
},
"spellcheck-tech-word": true
}
}
textlint-rule-prhですが、弊社では社外に公開したくない情報が含まれていないかのチェックに使っています。
下記は、文章内に社内限のプロジェクトコードが書かれている場合、タイトル名に置き換える指摘をするための設定例です。
▼textlint_prh_rules.yml
rules: - expected: 真 戦国炎舞 \-KIZNA\- pattern: 【プロジェクトコード】
GitHub Actions の設定
pull requestの際にtextlintを実行、reviewdogでコメントするように設定します。
▼.github/workflows/textlint.yaml
name: textlint on: pull_request: types: [ opened, synchronize ] jobs: main: runs-on: ubuntu-22.04 permissions: contents: read pull-requests: write timeout-minutes: 1 steps: - name: checkout uses: actions/checkout@v4 with: ref: ${{ github.event.pull_request.head.sha }} - uses: actions/setup-node@v3 with: node-version: 22 cache: npm - run: npm ci - name: install reviewdog shell: bash env: TEMP_DIR: ${{ runner.temp }} run: | curl -sfL https://raw.githubusercontent.com/reviewdog/reviewdog/fd59714416d6d9a1c0692d872e38e7f8448df4fc/install.sh | sh -s -- -b "${TEMP_DIR}/reviewdog/bin" latest - name: Fetch base branch run: git fetch origin main - name: Create target file list run: git diff origin/main HEAD --name-only |grep \.md$ > /tmp/textlint-target-list.txt - name: textlint env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} REVIEWDOG_DIR: ${{ runner.temp }}/reviewdog/bin LEVEL: error run: cat /tmp/textlint-target-list.txt | xargs npx textlint -f checkstyle | ${REVIEWDOG_DIR}/reviewdog -f=checkstyle -name=textlint -reporter=github-pr-review -level=${LEVEL}
TIPS.3：開発環境と本番環境
はてなブログでは、ひとつのアカウントで複数のブログを作ることができます。
弊社では限定公開に設定した上でもうひとつのブログを構築、それを開発環境として使っています。
そして、ブログのデザインを改良する際などは開発環境で問題ないことを確認した上で本番環境に反映するフローとしています。
TIPS.4：アイキャッチ画像の自動生成
「ブログ記事は書けたけど、アイキャッチ画像ができておらず記事の公開ができない」このような状況はよくあります。
そんな時は、はてなブログに備わっているアイキャッチ画像を自動生成する機能を使うのが便利です。
生成されるアイキャッチ画像は、HTMLで自由にカスタマイズも可能です。
弊社では下記画像のように汎用背景の中央に記事のタイトルが自動で入るようなデザインを設定しています。
そして、こだわったアイキャッチ画像を使いたい記事の場合は手動で設定、汎用的なアイキャッチ画像で良い記事の場合は自動生成したものを使うように設定と使い分けています。
さいごに
この記事では、弊社エンジニアブログを運用するに当たっての様々な工夫を紹介させていただきました。
少しでも弊社と同じようにエンジニアブログを運営している方などの参考になっていれば嬉しいです。
最後に、サムザップでは一緒に働く仲間をさがしています。
少しでも弊社に興味を湧いていただけた方は、のぞいていってもらえればと思います。
https://www.sumzap.co.jp/recruit/
元の記事を確認する
