先日、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の立ち上げ人であるcatnoseさんよりデザイン周りのタスクを実質的に引き継ぎました。Zennのデザインに関する施策を継続的に当Publication（Zenn Tech Blog）で発信し、運営としての改善・新規施策・悩んだ部分・その解決策をお伝えしていきます。立ち上げ人のcatnoseさんとプロジェクト関係者が育てた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させるかが課題外部接続...

はじめに昨年、ZennのバックエンドサーバーであるRailsアプリケーションの実行環境を、Google CloudのApp EngineからCloud Runに移行しました。https://zenn.dev/team_zenn/articles/migrate-appengine-to-cloudrunその際、DBマイグレーションやRakeタスクだけはCloud Runでは解決できず、Cloud BuildやApp Engineを実行環境としていました（詳細は👆の記事を参照してください）。今回、これらの実行環境をCloud Run Jobsに移行しましたので、その様子を紹介しま...

ふだんの開発では、Ruby on Rails のアプリをコンテナイメージとしてビルドし、それを Cloud Run へデプロイして動かしています。イメージへはタグをつけており、デプロイのたびに新しく生成されます。こうなるとイメージの数がおおくなり、保管料が無視できなくなってきます。Artifact Registry の料金 - Storage https://cloud.google.com/artifact-registry/pricing?hl=ja#storageおおよそ100GB程度使っており、それでも$10なのでまだ慌てる時間ではないですが、節約できるものは積極的に削りま...

どういうこと？少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇https://zenn.dev/ubie_dev/articles/c2cdbf76f4d432これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪検証環境パッケージ名バージョンnext13.2.4react18.2.0react-dom18.2.0typescript4.9.5...

この記事についてみなさん、こんにちは。”狸” か ”穴熊” なら、私は ”貉” 派。uttk です。リリースローの構築って、すごく悩みますよね。自動化しつつ柔軟性も持たせるとなると、要件にもよりますが、大体は妥協する感じになると思います。特にバージョニングのところが個人的に苦労していて、前々から色々と試していたんですが、今回、 ﾁｮｯﾄｲｲ 感じのバージョニングフローを構築ができたので、この場を借りて共有していこうかなと思います 💪ちなみに、今回紹介するバージョニングフローは以下のリポジトリで活用しています 👇https://github.com/zenn-dev/zen...

この記事についてみなさん、こんちにちは。好きな絶滅動物はアルゲンタヴィス。uttk です。先日、zenn-editor の Monorepo 構成を Lerna から pnpm + Turborepo + lerna-lite に変えたので、この記事でその構成について解説していこうと思います 💪https://github.com/zenn-dev/zenn-editor/pull/410 なんで、その構成？zenn-editor では Lerna を使って Monorepo 環境を構築していましたが、実際に Lerna を使っている部分はビルド時とリリース時のみで、ほ...

確約利用割引（CUD: Commited Use Discount）は、一定の期間、一定の量のリソースを利用することを確約（コミットメント）することで適用される割引です。今回は、Zennで利用している Cloud Run と Cloud SQL で確約利用割引を購入してみましたので、記事にしたいと思います。 確約利用割引とは改めて、確約利用割引とはどんなものかを説明します。確約利用割引とは、一定の期間、一定の量のリソースを利用することを確約（コミットメント）することで適用される割引です。期間と割引率については、サービスによって異なります。例えば、Cloud Runの場合、1年または...

💬 この記事についてどうも皆さん、こんにちは。Zenn でお手伝いさせてもらっています uttk です。今回は、先日公開された github.dev で Zenn のコンテンツを表示するための VSCode 拡張（β）の簡易版を作って VSCode Web Extension に入門してみようと思います 💪https://info.zenn.dev/release-vscode-extension!全ての機能を作ると冗長になってしまうため、この記事では記事コンテンツのみを扱う機能に絞って実装します。あらかじめご留意ください 🙏あと、参考までに使用する環境は以下の通りで...