enechain Tech Blogを支える技術

2024/11/19 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」で登壇した資料です。
enechain Tech Blogを支える技術について紹介しています。

Transcript

1. 0 enechain Tech Blogを支える技術 株式会社 enechain 中山晶平 (@nakker1218) Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
2. 1 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • 株式会社enechain • 中山晶平 (Shohei Nakayama) • @nakker1218 • 札幌在住 󰪟 🏕 • ソフトウェアエンジニア ◦ Webアプリケーション ◦ フロントエンド中心 • 技術広報
3. 2 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Agenda ◦ enechain Tech Blogについて ◦ テックブログの媒体選定 ◦ enechain Tech Blogを支える技術 ◦ まとめ
4. 3 enechain Tech Blogについて Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 https://techblog.enechain.com/
5. 4 enechain Tech Blogについて • 2023年1月から開始 • 目的 ◦ 会社として技術コミュニティに対する貢献をする ◦ エンジニアの成長や個人ブランディングを支援する ◦ “副次効果として ”会社の技術ブランディングに繋がる • 記事数: 72記事 ◦ 月3-4記事ペース • 執筆者数: 44人 • MAU(UU): 12,000超え • Mediumを使って公開していた ◦ はてなブログに移行 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
6. 5 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Agenda ◦ enechain Tech Blogについて ◦ テックブログの媒体選定 ◦ enechain Tech Blogを支える技術 ◦ まとめ
7. 6 移行にあたって目指す状態 • 執筆時の課題や不満を改善 ◦ 課題を洗い出し ◦ 執筆・レビュー体験の向上を目指す • テクノロジーを使って運営メンバーなしでも執筆・公開ができる状態にする ◦ 公開前の定型的な作業や公開作業の自動化 ◦ 記事作成からレビュー・公開までのプロセスを整備し仕組みに落とし込む Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
8. 7 • 見た目を再調整する手間が発生 ◦ 表が使えず、画像として貼り付ける必要がある • レビューで指摘した内容が公開時に正しく反映されているかわかりにくい • 「てにをは」などの毎回同じ指摘に時間を取られる • 執筆者にMediumへのアクセス権が必要 • ヘッダー画像をFigmaで都度作成する必要がある（ Figmaの編集権限が必要） • 執筆者にアクセス数などの数値を共有しにくい 移行前に感じていたブログ公開までの課題 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 執筆者 レビュワー 運営チーム
9. 8 ブログの媒体に求めること • マークダウンで記事の執筆ができる -> 見た目を再調整する手間を解消 • GitHub上で記事の管理 /公開ができる -> 執筆者が自分で記事の作成、公開まで可能に -> GitHubの権限と共有になり、執筆者へのアクセス権の付与が楽に ◦ PR上でのレビュー -> レビューで指摘した内容が公開時に正しく反映されているかわかりやすく ◦ CI上でtextlintを使った「てにをは」のチェック -> 毎回同じ指摘に時間を取られる ◦ CIを使ったヘッダー画像の自動生成 -> ヘッダー画像をFigmaで都度作成する必要がなくなる • GAを埋め込める -> ダッシュボードを整備 -> 執筆者にアクセス数などの数値を共有できるように Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 執筆者 レビュワー 執筆者 レビュワー 運営チーム 運営チーム 運営チーム 執筆者 執筆者 執筆者
10. 9 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Agenda ◦ enechain Tech Blogについて ◦ テックブログの媒体選定 ◦ enechain Tech Blogを支える技術 ◦ まとめ
11. 10 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)が作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
12. 11 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)が作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
13. 12 GitHub上で記事を作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
15. 14 GitHub上で記事を作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • workflow dispatchでGitHub Actionsをトリガー ◦ はてなブログ上に新規記事を作成 ◦ 執筆用のブランチと PRを作成 ◦ ヘッダー画像の作成 • HatenaBlog Workflows Boilerplateをもとにカスタマ イズするとよい
16. 15 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)が作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
17. 16 はてなブログ上にドラフト記事が作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • blogsyncを使ってdraft記事を作成 • blogsyncとは？ ◦ はてなブログ用の CLIクライアント ◦ はてなブログの AtomPub APIを利用 ◦ 記事の作成 , 変更, 公開ができる ◦ actionsも公開されている
18. 17 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)を作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
19. 18 執筆用のブランチと PRを作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
20. 19 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)が作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
21. 20 ヘッダー画像の作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Cloudinary CLIを利用してヘッダー画像を生成 • Cloudinaryとは？ ◦ 画像のクラウドストレージサービス ◦ アップロードした画像を配信 ◦ 画像URL上でリサイズや文字を乗せるなど加工がで きる
22. 21 ヘッダー画像の作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 1. 記事内で使用している画像を背景に 2. ブルーを乗算でのせる 3. 記事タイトル、執筆者名、 enechainロゴを配置 画像生成用URL
23. 22 ヘッダー画像の作成 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
24. 23 公開までのシン手順 1. GitHub上で記事を作成 a. はてなブログ上にドラフト記事が作成 b. 執筆用のブランチ (PR)が作成 c. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
25. 24 好きなエディタで執筆 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Repositoryをpullすれば、好きなエディタで執筆が可能 ◦ VS Code, IntelliJなど ◦ Copilotの支援も受けられる • github.devを使えばgitに慣れていなくても執筆可能 • Markdown記法なので執筆中の previewも可能 ◦ VS Code用のPlugin Blogview を使えばはてなブロ グの見た目で previewもできる
26. 25 好きなエディタで執筆 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • pushをトリガーに CI実行 • はてなブログ上のドラフト記事を更新 ◦ ローカルにある画像を Cloudinaryに アップロード ◦ 記事を更新 • 文章校正の実行 ◦ textlintの実行 ◦ reviewdogでPRに指摘内容をコメント
27. 26 はてなブログ上のドラフト記事を更新 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • ローカルにある画像をサーバーにアップロード ◦ 画像はローカルのパスでははてなブログ上で 表示することができない ◦ CIでCloudinaryにアップロード ▪ HatenaBlog Workflows Boilerplate には てなフォトライフにアップロードするscript があるのでいまはこちらを使うとよさそう ▪ 当時はなかったのでヘッダー画像と合わせ てCloudinaryをつかっている ◦ CIでリンクを置き換え • blogsyncを使って記事を更新
28. 27 文章校正の実行 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • textlintで「てにをは」など日本語の校正を自動 で実施 ◦ 技術文書用の textlint ルール preset-ja-technical-writingを導入 ◦ ルールの大部分は読みにくさを排除してシン プルな文章にするためのものが中心 • reviewdogを使ってPR上でコメント ◦ Commit Suggestionも使ってくれる
29. 28 公開までのシン手順 1. GitHub上で記事を作成 a. 執筆用のブランチ (PR)が作成 b. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 　 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
30. 29 PR上でのレビュー Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • PRでのレビューの良さ ◦ どの行に対する指摘かがわかりやすい ◦ Commit suggestionを使えば具体的な指 摘内容を伝えやすい • レビューが通らないとマージされない設定 -> レビューした内容が修正されたかがわかりやすい
31. 30 公開までのシン手順 1. GitHub上で記事を作成 a. 執筆用のブランチ (PR)が作成 b. ヘッダー画像を自動で作成、反映 2. 好きなエディタで執筆 3. PR上でレビューを行う 4. PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」
32. 31 PRをマージ = 公開 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • マージをトリガーに記事を公開する CIが走る ◦ blogsyncは予約投稿に対応していない • Approveをトリガーに Draft状態を解除 するCIが走る ◦ レビューが通っていない状態で意図せず公開されることを防ぐ
33. 32 Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」 • Agenda ◦ enechain Tech Blogについて ◦ テックブログの媒体選定 ◦ enechain Tech Blogを支える技術 ◦ まとめ
34. 33 まとめ • enchainではテクノロジーを使ってブログ執筆の課題を解決しています • エンジニアが執筆しやすい環境を整えることで、執筆のハードルを下げる事がで きた ◦ 記事を書く人が一番偉い ▪ 記事を書いてくれる社内メンバーに感謝 ◦ 執筆のモチベーションが下がらないように工夫が必要 • 最近使った技術や知識の整理ができたというフィードバックも • 同時に運用上の改善や、なぜ Tech Blogをやっているか目的の整理も行った -> 不定期に月 1-2記事程度 -> 月3-4記事 -> 安定して定期的に公開できるように • 記事が増えたことで SEO的に強くなり閲覧数も向上 ◦ Jagu'e'r Tech Writers Meetup #9「技術ブログを支える技術」