React– tag –

こんにちは。PR TIMES でエンジニアをしている岩元 (@yoiwamoto) です！ プレスリリース配信サイト PR TIMES のフロントエンドは、一昨年ごろまでほぼ全てのページが Smarty + jQuery on PHP で実装されており、直近1、2年は機能追加・改修に合わせてこれらを順次 React 実装にリプレイスを進めています。 このような取り組みをどのような技術構成で行っているか、2023年の振り返りの意味も込めてざっくりと紹介します！ 【リポジトリ構成】 React 実装は、これまでメインのバックエンドサーバーとのモノリスで構...

こんにちは！開発本部のエンジニアのトゥ(codyzard)です。 今回は数ヶ月前にリリースされたプレスキット一括ダウンロードの機能を話したいと思います。 【背景】 2022年2月にプレスキット機能をリリースしました。興味があれば以下の記事を参考してください。 https://developers.prtimes.com/2022/03/09/react-presskit/ https://developers.prtimes.com/2022/03/04/upload-files-using-s3-and-lambda/ しかし、それまでのプレスキットでは１つ１つの素材しかダウンロードできませんでした。いくつも欲しい素材が...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、【月間9000万PV】プレスリリース掲載ページの Next.js 移行でやったこと、という記事が公開されました。こちらのブログの最後に軽く触れられていますが、プレスリリース掲載ページより前にキーワード検索ページのNext.js移行を行っていました。 https://developers.prtimes.com/2023/12/13/replace-press-release-page-with-nextjs/ 本エントリーではキーワード検索ページをNext.js移行したモチベーションなどは割愛させていただきま...

こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 【まとめ】 ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました...

こんにちは！開発本部のレーホアントゥです。 先日PR TIMESがサムネイル画像をPDFの１ページ目から自動生成し、その画像が資料とガイドラインのサムネイルとして使用されるという新機能をリリースました。なので、今回PDFの1ページ目からサムネイル画像を作成する方法を紹介したいと思います。 【やりたいこと】 現在、プレスキットの編集画面ではロゴ、画像、資料などのプレスキットの素材となるファイルをアップロードできる機能があります。ロゴ、画像はそれぞれの画像ファイルを変換したサムネイルが表示され...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 今年（2022年）の4月頃に、PR TIMESのフロントエンド開発基盤の構築を行い、各プロジェクトのリポジトリに散らばっていたReactで実装しなおした Frontend のコードベースを一つのリポジトリに集約することができました。 https://developers.prtimes.com/2022/04/14/web-front-end-development-enviroment-in-prtimes-inc/ しかし、この時点では Frontend のコードベースを一つにまとめただけで、各プロジェクトで共通のコンポーネントやスタ...

はじめまして。2022新卒で PR TIMES に入社し、フロントエンドエンジニアをしている岩元 (@yoiwamoto) です。 先日、PR TIMES の全ての React プロジェクトで React 18 へのバージョンアップを行ったので、この記事ではその経緯や学べたこと等を共有します。 【モチベーション】 今回のバージョンアップのモチベーションは一言で言うと、「まだコードベースが小さいうちに早めにやっておきたいね」です。 弊社のフロントエンドは、去年までほとんど全てバックエンドリポジトリ内でテンプレートエンジン + jQuery ...

【Introduction】 This article discusses the process of choosing a new React-based editor library for PR TIMES's press release editor. 【Background】 At PR TIMES, press release publishing is one of the core services that we provide, therefore, we strive to provide the best possible editing experience to our users so that they can express their ideas better. However, our current editing page is built with legacy codes that have not been well maintained over the past several ...

こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。 昨年PR TIMESでは企業ページをフルスクラッチでReactにリプレイスするプロジェクトを行い、モダンなフロントエンド技術を導入することができました。 https://developers.prtimes.com/2021/11/10/replace-react/ また現在、別プロジェクト（リポジトリ）でもReactを用いてフロントエンドを実装するようになり始め、PR TIMES全体のフロントエンドのReact化が進行しています。 しかし、現状のフ...

こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。2022年2月、企業ページにプレスキット機能を追加するリリースしたので、そのお話をしようと思います。 企業ページおよびプレスキットについては下記の PR TIMES MAGAZINE の記事をご覧ください https://prtimes.jp/magazine/corporate/ https://prtimes.jp/magazine/prtimes-press-kit/ 【新機能「プレスキット」とは】 「プレスキット（または、メディアキット）」とは、メディア関係者向けに作成する、企業や事業...