はじめに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の運営メンバーも事態を認識することになりました。スパム投稿が読...

Zenn のボタンの機能・役割の再定義を試みました。目標は「ボタン」に関するコンポーネントの適切な使用法を明確に定義することで、エンジニアが画面を実装する際に迷わずにそれらを選択できるようになることです。 「ボタン」 における課題Zennにおけるボタンは大きく分けて２種類の外観があります。テキストの外観のボタンテキストとそれを囲む矩形の外観のボタンテキストとそれを囲む矩形の外観のボタンの見た目は、ステレオタイプのボタンのイメージかもしれません。一方で、テキストの外観のボタンはメトロUIやフラットデザインの登場と共に一般に普及したと考えることができます。主な課題は、こ...

ZennのMarkdownエディタにテキスト検索機能を実装しました。本記事では、CodeMirrorの@codemirror/searchをベースに、ミニマムな検索機能の実装方法を解説します。 なぜ検索機能を実装したのかきっかけは、以下のIssueでした。https://github.com/zenn-dev/zenn-community/issues/605ZennのMarkdownエディタに使われているCodeMirrorは、パフォーマンスの最適化のため仮想スクロールと呼ばれるテクニックを使いDOMを描画しています。仮想スクロールは可視範囲以外はDOMが表示されていないの...

先日、ZennのMarkdownエディタにEmojiの入力補完機能を追加しました。本記事では、この機能の実装方法を解説します。また、記事中ではCodeMirrorのソースコードを紹介します。CodeMirrorについては、以前に「CodeMirror v6によるZennのMarkdownエディタの作り方」という記事で紹介していますので、あわせてご覧いただければ理解の助けになるかと思います。 入力補完機能の仕様本機能は、SlackやGitHubなどでおなじみの、:から入力を開始することでEmojiの候補が表示される機能です。:の後に続く文字により、Emojiの候補がインクリメンタル...

はじめにZennではOGPを利用したリンクカードの埋め込み表示にopenGraphScraperというパッケージを使っています。https://github.com/jshemas/openGraphScraperまさに上記のGitHubリンクカードもopenGraphScraperが使われています。そして先日、Zennの課題に対処するためにopenGraphScraperにプルリクエストを出したところ、マージしてもらうことができました。https://github.com/jshemas/openGraphScraper/pull/206本記事ではZennが抱えていたo...

Google Cloud の Cloud Build はアプリケーションをビルドするためのサービスです。Cloud Run や GKE へアプリケーションをデプロイする現場では、使用頻度の高いサービスかと思います。そんなCloud Buildのデフォルトの動作に変更が入ります。2024年の4月29日以降に新しく作成された Google Cloud のプロジェクトでは、Cloud Build トリガー作成時に自動で関連づけられるサービスアカウントがCloud Build サービスアカウントから、Compute Engine サービスアカウントに変更されます。https://cloud.g...

Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめにCodeMirror...

はじめに2023年にZennチームにJoinしたdyoshikawaです。このたびZennのE2Eテスト基盤をリプレイスしました。このような下回りの改善はユーザへの価値提供との距離が近い機能開発と比べてどうしても後回しになりがちな中、Publication Proという大きなリリースを迎えて少し開発が落ち着いたタイミングであり、E2Eテストを拡充できる土台を整えることで今後より安心して機能を追加していけるようにするために必要だということで実施しました。各テストを独立実行可能にすることによる開発体験向上、CI（GitHub Actions）の実行時間短縮、そして将来を見据えてのC...

デザインガイドラインは、Web アプリのデザインをより一貫したものにするために役立ちます。一方、すでに運用しているサービスがあり、後発でデザインガイドラインを定めた場合、既存のコンポーネントを修正する必要があります。本稿では、デザインガイドラインを使って既存のコンポーネントをアップデートする方法について、Zenn を例に具体的な手順を解説したいと思います。 TL;DR修正する対象を絞り、そのテーマについてソースコードを検索し、ヒットしたすべての項目について修正内容をレビュー・検討して反映します。 背景・経緯ご存知の方がほとんどだと思いますが、Zenn はもともと catnos...

ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。https://zenn.dev/team_zenn/articles/ba9245ff5b92f3 角丸とは「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。角丸...

はじめにZennのRailsプロジェクトのローカル開発時において、RSpecとRuboCopの実行で少し待たされる感じがあったので、高速化を試みた備忘録です。結果的にRSpecの起動時間が約4.8倍、RuboCopの実行時間が約3.5倍高速化できました。 環境rspec-rails 6.0.1rubocop 1.51.0 やったこと RSpecjonleighton/spring-commands-rspecRSpecでやったことはspring-commands-rspecを導入するだけです。正確には導入してあったのですが使われていない状況でした。bu...

はじめに & 自己紹介はじめまして、2023年10月よりZenn運営のデザインを部分的に担当しているfujisawaです。Zennのデザインに関する施策を継続的に当Publication（Zenn Tech Blog）で発信し、運営としての改善・新規施策・悩んだ部分・その解決策をお伝えしていきます。立ち上げ人のcatnoseさんとプロジェクト関係者が育てたZennが、エンジニアリング従事者にとってより不可欠な情報インフラとして活用されていくことが、私がプロジェクトに参加しているモチーべションです。Zennは現在、利用者の皆様がより快適にご利用いただけるように、デザイン...

この記事についてZenn では長らく通信処理に Axios を使っていました。https://github.com/axios/axiosしかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は！！！って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しよ...

この記事について先日、Zenn では Content Security Policy を導入しました。https://info.zenn.dev/2023-07-18-cspこの記事では Content Security Policy を Next.js ( Pages Router ) で導入する方法を解説するともに、Zenn の実例を紹介したいと思います。 Content Security Policy とは？そもそも Content Security Policy を知らない人が居るかもしれません。Content Security Policy ( 以後 CSP ...

!Generative AI App Builder の Enterprise Search は、現在許可リストに登録されたユーザーの一部が利用できます（Trusted Tester Program）。ブログにするのは問題ないとのことで執筆しています。記事内で掲示しているスクリーンショットやコマンドは、GA時とは異なる可能性があります。2023年6月、Generative AI App Builder の Enterprise Search（以下、Enterprise Search）に関するブログが投稿されました。https://cloud.google.com/blog/pro...

先日、統計ダッシュボード機能(β)をリリースしました。記事をひとつでも公開している場合、Zennにログインすればどなたでも統計情報を表示できます。執筆頻度の確認や閲覧回数の参考にお役立てください。https://info.zenn.dev/2023-06-01-stats-dashboard-beta本稿ではどのように実現したかについて課題とともに記録します。 TL;DR投稿ページの表示イベントは Google Analytics から BigQuery へ連携しており、イベントデータ（BigQuery）と記事データ（Cloud SQL）をどうJOINさせるかが課題外部接続...