開発– category –

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先月公開したエントリーでもご紹介した通り、PR TIMESのフロントエンドは現在CSS Modulesを使用してスタイリングを行っています。 https://developers.prtimes.com/2025/05/09/migrate-from-emotion-to-css-modules/ 上記のエントリーではhappy-css-modulesを使用してCSS Modulesの型定義ファイルを生成していましたが、先日css-modules-kitに移行したのでご紹介します。 【】 css-modules-kitはCSS Modulesを便利にするためのツールキットで...

こんにちは、PR TIMESのバックエンドエンジニアのSongです。今回はPR TIMESにおけるメールの一部をSendGridで送信するようにしたことについて紹介します。 【背景】 PR TIMESにおけるメールはPrTimesMailerというメール送信機能から送信され、Postfixを利用してSMTP経由で外部のメールサービスに送信して、実際の配信は外部のメールサービス経由で行っています。 PrTimesMailerが作成された話については、以下の記事をご覧ください。 https://developers.prtimes.com/2022/11/28/refactoring-email-sending-featur...

こんにちは、バックエンドエンジニアの永井です。今回は本番運用されているPostgreSQLのテーブルのカラムに対して、安全にNOT NULL制約を追加する流れを書いていきます。 【背景】 以前、バックエンドの実装していたときに「このカラムはNOT NULL」と思い込んでコードを書いてしまい、インシデントを起こしてしまったことがありました。また、そのカラム以外にも意味的には必須なのに、NULL許容のままになっているカラムがいくつか見つかりました。テーブルのスキーマ定義をちゃんと確認することも大切ですが、NOT...

こんにちは、フロントエンドエンジニアの小張（@kobari41257）です。 PR TIMESのフロントエンドはpnpm workspaceを用いたモノレポ（以下prtimes-frontend）で開発されていますが、ほぼ全てのworkspace packageでpackage.jsonのtypeが指定されていませんでした。 そのため、Next.jsがCommonJSランタイムで実行されていたり、モジュール解決に不要なコストが発生するリスクを抱えていました。 今回全てのpackage.jsonに"type": "module" を指定し、上記のようなCommonJSに依存した挙動をなくし、モジュール解決の不...

こんにちは。フロントエンドエンジニアの古園です。 PR TIMESでは日々エディターの機能開発を行っています。 今回はそんな中から多くのユーザーから要望があり、開発がスタートした見出し（ハイライト）機能をTiptapのExtensionを使用して開発した件について解説します。 【Tiptapについて】 まず解説の前提となるエディターライブラリ、Tiptapについて軽く触れておきます。 Tiptapはモダンなリッチテキストエディタの基盤として使用されているヘッドレスフレームワークで Extensionという数多くの拡張機能が用意...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 PR TIMESではプレスリリース配信のエディターにTiptapというヘッドレスエディターフレームワークを使用しています。 2025年2月にTiptapのバージョンをv2.0.0-betaからv2.10.5まで上げ、3月に最新版までバージョンアップを実施したことを今回は話そうと思います。 【Tiptapのバージョンアップが滞っていた要因】 弊社では月に1回リファクタリングデーを実施していて、リファクタリングデーのタイミングでrenovateを使い依存して...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまでEmotionを使ってスタイリングを行っていましたが、2024年6月からCSS Modulesへの移行作業を進めており、先日その作業がすべて完了しました。本エントリーでは、移行の背景や技術選定、移行作業中に発生した問題などについてご紹介します。 【移行の背景】 社内の一部機能を2024年3月頃にRemix SPA Modeへ移行しようとしましたが、Emotionが動作しなかったため断念し、その経験からCSS Modulesへの移行を...

こんにちは。PR TIMESでインターンをしている笹山雷雅です。 この記事では、Fastly Next-Gen WAFのログをBigQueryで分析するためにGoogle Cloud Functionsでサーバーレスアプリケーションを実装したので、紹介します。 【この記事で話すこと】 Next-Gen WAFのログを取得する実装（Go） サーバーレスな分析サービスの構築例 【背景・実現したいこと】 PR TIMESでは、データ分析にBigQueryを用いています。BigQueryを用いた他の活用事例は以下の開発者ブログにてご覧いただけます。 https://developers.prtimes.com/...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はエディターの機能の導線改善でリスト機能の利用数が上がった話をしようと思います。 【リスト機能とは？】 「リスト機能」は4分割サイズの画像を最大4つまで横並び表示できる画像装飾機能です。 画像の下の欄にはテキストを入れることができます。 PR TIMESは横並びで表示できる画像装飾機能として画像タイルという機能も存在していますが、画像タイルとの違いとしては以下があります。 画像が固定サイズで横並びで配置...

こんにちは　PR TIMES開発本部のインターンの Chanoknan です。 PR TIMESエディターのフロントエンドテスト戦略開発の一環として、エディターのPlaywright統合テストをPage Object Model（POM）パターンを使ってリファクタリングしました。このブログでは、このリファクタリングについて話したいと思います。 PR TIMESエディターのフロントエンドテスト戦略については、以下の記事で詳しく読むことができます。 https://developers.prtimes.com/?page_id=7762 【問題点】 最初は、テストを直接テストファイルに記...