はじめにZennでは、CIテストとして以下の3種類のテストを実行しています。フロントエンドのユニットテスト（Vitest）バックエンドのユニットテスト（RSpec）フロントエンドとバックエンドを統合したE2Eテスト（Playwright）このうち、RSpecとPlaywrightについては、CIの実行時間を短縮するためテストの並列化を導入しており、ローカル環境では気づきにくいFlakyテストが存在していました。調べてみると、1/26〜1/30の5日間で、テスト実行100回中11回が失敗していました。これはFlakyテスト以外の失敗も含みますが、体感と大きなずれはありま...

はじめに@dyoshikawaです。2026年1月に「Zennが実践する！AIが生成する成果物の質と安全性を担保するコツ 〜スピードと安全性の両立したAI Coding Agent活用〜」というタイトルで登壇しました。本記事はその内容をベースに、AI Coding Agentを活用した開発におけるセキュリティリスクと対策についてまとめたものです。AI Coding Agentを活用すると開発効率が大幅に向上しますが、同時にセキュリティ上のリスクも意識する必要があります。本記事では、そのバランスをどう取るかについてお伝えします。!本記事はClaude Codeを使用する前提に...

Zennでは、チームの健康状態をはかるために、アプリケーションのデプロイ回数をひとつの参考情報にしています。https://cloud.google.com/blog/ja/products/gcp/using-the-four-keys-to-measure-your-devops-performanceZennのアプリケーションは Google Cloud で稼働しており、デプロイ回数を可視化するにあたっては、ログシンクでCloud RunのイベントをCloud Logging からBigQueryへ流しておけばだいたいOKです。Looker Studio でグラフにするとか。...

現在、「新しいエディタ」としてご提供している記事編集ページのエディタでは、2カラムレイアウトでプレビューがリアルタイムに確認できるようになっています。しかし、プレビューの生成がサーバー側で行われているため、編集内容が反映されるまでに一定のラグがありました。そこで、プレビューの生成（MarkdownからHTMLへの変換）を行っている zenn-markdown-html をブラウザ上で実行するように変更し、プレビュー反映の高速化を実現しました。ちょっと前に、60fpsでの変換を見て、「Zennのエディタももっと速くしたい」と、感化されたというのもあります。 CSP (Content...

タイトルの通り、Zennのシンタックスハイライターを Prism.js から Shiki に移行しました。シンタックスハイライターとは、Zennの記事などにコードブロックを記述したときに、そのコードブロックの言語にあわせて文法や変数などに色を付けるためのライブラリです。例えば以下のようにコードブロックに言語を指定すると言語の文法に合わせた色付けがされます。```jsconsole.log("Hello world");```↓ ハイライトを適用console.log("Hello world");Shiki への移行については、以前からご提案いただいていましたが、移行にかか...

はじめに従来の Zenn のエディタは、プレビューを確認するためにエディタとプレビューを切り替える必要がありました。今回対応した新しいエディタでは、切り替えなしに常にプレビューが表示され、ほぼリアルタイムでエディタの内容が反映されます。また、エディタのスクロール位置に合わせてプレビューのスクロール位置も同期されます。実はこの機能、Zenn 本体よりも先に、有志の方により VSCode 拡張の方に対応していただきました。https://github.com/zenn-dev/zenn-vscode-extension/pull/115この時の対応で、エディタのテキスト（M...

はじめに@dyoshikawaです。2025年11月、zenn-editorの依存パッケージを全面的に最新化しました。必要なことと重々承知しつつ、どうしてもサービス本体の機能追加・改善にリソースをとられてなかなか手が回っていなかった……のですが、この度ようやく実施することができました。Claude Codeの力を借りることでだいぶ楽に進められたので、そのあたりも含めて実施内容を紹介していきます。 とりあえずClaude Codeに好きに作業させてみるまず、Claude Codeがパッケージ刷新にどこまで使えるかわからなかったので、効果検証として雑にアップデート作業を依頼し...

はじめに@dyoshikawaです。私の2025年6月ごろからの取り組みとして、Claude CodeによるVibe CodingでRulesyncというOSSツールを公開しました。そこでかなり自由にClaude Codeでいろんな手法を試すことができましたので、AIコーディング全般のTipsをお伝えできればと思います。一方で（人間の介入が少なすぎる）Vibe Codingの弊害としてコードベースやドキュメントが崩壊し、途中で開発がストップした場面もありました。ここのプロセスの反省と、どのように開発可能に復帰させたかという点も紹介します。最後に人間の役割、AIの役割、ソフト...

先日開催された、DevelopersIO 2025 Sapporo にて、「生成AIを活用したZennの取り組み事例」というタイトルで発表しました。本発表では、生成AIを活用したZennの取り組みの中から、レコメンド機能についての紹介を行いました。Zennのレコメンド機能は、これまで3つのフェーズを経て進化してきました。6次元ベクトルによる類似検索（βリリース）Embeddingsによる類似検索（検証のみ）トピックベースの類似検索（現在）1の「6次元ベクトルによる類似検索（βリリース）」については、以下の記事で詳しく説明しています。https://zenn.dev/t...

背景Zennのダークモード対応については、リリース当初より望まれていた機能でした。https://github.com/zenn-dev/zenn-community/issues/267このissueは2023年に一度クローズしました。当時はZennチームにデザイナーが不在だったこともありデザインシステムやガイドラインのようなものは整備されておらず、数十のページ・数百のコンポーネントにダークテーマを適用していくことは、工数の見積もりすら不可能な状態でした。しかし、その後も多くの要望が寄せられていたことと、その後にZennチームに加わったデザイナーのfujisawaさんの貢献...

はじめにZennではこれまで、独自の集計方法により新着記事のランキング（Trending）を提供してきました。Zennの読者にはWeb開発系のユーザーが多く、TrendingにはWeb開発系の記事が上位になりやすい傾向がありました。昨年実施したユーザーアンケートでは、「Trendingが自分にマッチしていない」という意見が一定数寄せられ、レコメンド機能を求めるユーザーが75%に上ることが判明しました。読者層の多様化に伴う新たなニーズに応えるため、記事のレコメンド機能（For you）を開発することにしました。左が Trending、右が For you本記事では、Zenn...

Zenn は Google Cloud をメインで利用しています。Claude Code を Vertex AI 経由で利用することで、Google Cloud の認証・課金体系を活用できそうだと思いました。今回は、ローカルで利用する claude コマンドと、GitHub リポジトリで動く Claude Code Action を Vertex AI で使ってみます。 対象この記事は以下の方を対象としています：macOSのマシンを利用しているGoogle Cloud プロジェクトを持っているローカル環境で Claude Code を試したいGitHub Actions ...

@dyoshikawaです。先日、以下のリリースでZennのサイト内検索の高速化を行いました。https://info.zenn.dev/2025-05-26-search-speedup結論を先に述べるとCDNキャッシュやPostgreSQLの全文検索インデックスを活用して対応しました。この記事では本パフォーマンス改善の取り組みについて紹介します。 Zennの構成ZennはGoogle Cloud上に構築されており、フロントエンドNext.jsとバックエンドRailsをそれぞれCloud Run上にホスティングしています。上の図では省かれていますが、CDNにはCloudf...

dyoshikawaです。Zenn（Railsバックエンド+PostgreSQL+Google Cloud）において、ローカル開発環境での効率的なデバッグ・検証を可能にする目的でPostgreSQL Anonymizer拡張を導入しました。https://postgresql-anonymizer.readthedocs.io/en/stable/先に全体構成です。Cloud Run Jobを起動し、ダンプ用のCloud SQLクローンを作成し、クローンDBのデータをマスクしてダンプを出力するという構成になります。以下、PostgreSQL Anonymizer自体の簡単な紹介...

@dyoshikawaです。先月、社長にお願いしてZennチームに試験的にDevinを導入することができました。導入して約1ヶ月ほど経ったので、Devin含むAIコーディングエージェントの活用や課題、そして生成AI時代におけるエンジニアの役割について思うところを書いてみようと思います。 Devinとは自律性の高いAIコーディングエージェントです。Cognition社（Devin開発元）いわく「最初のAIソフトウェアエンジニア」。AIモデルが独立した動作環境（Linuxサーバ）、コーディングエディタ（VSCode。拡張機能も入れられる）、ブラウザを持っており、それらを自由に操作...

はじめにZenn のプロジェクトでは、フロントエンドに Next.js を使っています。実行環境は Google Cloud の Cloud Run で、ビルドは Cloud Build で行っています。以降、すべてステージング環境の話となります。Cloud Build は、GitHub の 特定のブランチの push をトリガーとして、Next.jsのビルドを行い Dockerイメージを作成し、リポジトリに push します。その後、Cloud Run に新しいリビジョンを作成し、新しいDockerイメージをデプロイします。この一連の処理に、平均して 8 分程度かかっていま...

この記事は、Google Cloud Champion Innovators Advent Calendar 2024 19 日目の記事です。こんにちは。Zennチームでは、おもに開発メンバー向けの内部ドキュメントがあり、そこで仕様やアーキテクチャ記録しています。あまり手間はかけたくないが、ソースコードと一緒にGitHubでバージョン管理できると嬉しい、という理由から Docusaurus を利用しています。https://docusaurus.io/docsお作法にしたがって Markdown ファイルをかけば、マニュアル向けのHTMLとしてビルドでき、Node.js での se...

はじめに2024年11月21日にクラスメソッド株式会社の札幌オフィスで行われた「クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング」で登壇しました。資料と簡単なレポートをお届けします。 資料発表資料です。 感想登壇の場数を踏みたくて軽い気持ちでエントリーしたのですが、思いのほか参加者が多くて緊張しました。普段業務でやっていることを改めて理解する意味も込めて資料作りをしましたが、自分の中で理解が浅いことが多々あることが分かり、いい経験になりました。今度はもっと深い内容で発表したいです。最後の告知で盛り上がっていただくなど、会場のみなさんがとても暖...

Zennチームのdyoshikawaです。オープンセミナー広島2024にて、「エンジニア向けコミュニティZennの開発チームを支える自動化の仕組み」というタイトルで登壇させていただきました。https://osh.connpass.com/event/324736/参加者は上記Connpassより57人でした。イベントのテーマが「XRE - エンジニアを支える組織」とのことで、他の登壇者はSREの方が多く、SREでない自分は何を話そうかなと考えていたのですが、主催よりすごく広く捉えて「エンジニアを支える何か」みたいなテーマに収まっていれば大丈夫ですよとのことだったので、こ...

はじめにZennチームの吉川（dyoshikawa）です。2024年6月頃より、Zennにいわゆるスパム投稿が急増したため、LLM（生成AI）を活用してのスパム投稿自動検出の仕組みを構築しました。目的の性質上、あまり詳細については開示できないのですが、技術的な知見の共有のため、そして可能な限りコミュニティへ運営チームの取り組みをオープンにしたいという思いがあり本件の概要を紹介したいと思います。 課題2024年6月頃より、Zennにスパム投稿が急増しました。それに伴いユーザの違反報告が増加したことで我々Zennの運営メンバーも事態を認識することになりました。スパム投稿が読...