PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ
{ "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test --update-snapshots", "serve": "ts-node -r tsconfig-paths/register server.ts", "test": "pnpm run _docker
フロントエンドのLintツールをXOに統一した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 PR TIMESではこれまでLintツールとしてESLintを使用していましたが、2023年9月からXOを使うようにし始めました。本エントリーでは、XOを導入した経緯や進め方、そして導入した結果についてご紹介します。 導入をした経緯 これまでPR TIMESでは .eslintrc.jsを自分たちで一から作り、ESLintルールを運用していました。しかし、その設定は最初期の環境構築時に色々なドキュメントを見ながら、つぎはぎで作成したものになっており、なぜこのルールが入っているのかや、このルールは必要なのかなどの疑問がありました。 そのような状況であったため、各々がESLintの設定を自由に変え、本来であればエラーになって欲しいルールもoffにされていたりしました。 そこでアドバイザーとして入って頂いている 1
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
こんにちは！PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 背景と目的 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページでバックエンド生成の HTML + jQuery の実装が残っています。 ご利用企業様のプレスリリースを掲載するプレスリリースページ（下スクリーンショット）もその一つで、機能追加や改修のニーズはありながら、大きな変更を行うことが難し
PR TIMESのCDNをCloudFrontからFastlyに移行しました | PR TIMES 開発者ブログ
こんにちは、インフラチームテックリードの櫻井です。 今回はプレスリリース配信サービスの prtimes.jp で使用しているCDNをCloudFrontからFastlyに移行したことについて紹介します。 CDNの基本的な情報は割愛するので、もしCDNについて基本的なことを知りたいという方はググるなりChatGPTるなりしてください。 なぜ移行する必要があったのか まずCloudFrontからFastlyに移行した理由について説明します。 prtimes.jp のプレスリリース詳細ページは現在SmartyテンプレートとjQueryというレガシーな技術で構成されています。 今後このプレスリリース詳細ページをReact化することでフロントエンドの開発スピードを向上させることを予定しています。 しかしReact化を行うと、検索エンジンのクローラーがJavaScriptを実行できない場合にページの内
CypressからPlaywrightに移行しました | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 なぜ移行したのか いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右されることがなく、全てのテストを並列で実行可能でした。しかし、Cypressは並列でテストを実行することができず、テストを直列で実行するしかなかったため、テストの完了までに時間がかかってしまう問題がありました。
Puppeteerを使ってクローラを作った話 | PR TIMES 開発者ブログ
こんにちは、開発本部のバックエンドエンジニアのThai（タイ）です。クローラ改善プロジェクトを行い、Puppeteerを使って新しいクローラを作りました。今回の記事ではPuppeteerで開発したクローラについて紹介したいと思います。 Puppeteerとは Googleで開発されて、DevToolsプロトコルを介してChromiumやChromeを制御するための高レベルなAPIを提供するNodeライブラリです。 参照: https://devdocs.io/puppeteer/ クローラとは インターネット上の様々なWebページをスクレイピングするツールです。 なぜPuppeteerを使ってクローラを作るのか？ これまでインターネット上の記事を収集するために、PHP-curlで開発したクローラを使ってきました。PHP-curlは静的なページを問題なくクロールできますが、SPAページ(Si
PR TIMESにおけるフロントエンド開発基盤の構築 | PR TIMES 開発者ブログ
prtimes ├── config ├── file-cache ├── frontend <-- 旧フロントエンドのコード(JS,jQuery,Vue.js,SCSS,etc...） ├── htdocs ├── replace <-- 新しいフロントエンドのコード（React） ├── scss ├── serviceworkers ├── tests ├── tmp ├── upload_files ├── uploads └── vendor この構成にすることで、PR TIMESの既存のフロントエンドコード（JavaScript,jQuery,SCSSなど）のデプロイフローをそのまま利用できるため、インフラや CI/CD を新しく構築せずにReactを導入することができました。 旧デプロイフロー しかし、この構成には以下の課題がありました。 フロントエンドの実装が一つのリポジト
ReactでリッチなUIの管理画面を開発した話 | PR TIMES 開発者ブログ
新機能「プレスキット」とは 「プレスキット（または、メディアキット）」とは、メディア関係者向けに作成する、企業や事業に関するプロモーション用の資料や画像・動画素材などをまとめたもの です。 まずプレスキットとは何かというと冒頭で紹介した記事にもあるように、上記のようなものになります。これを機能として提供するにあたって、ユーザーが閲覧できる公開画面と、企業が設定するための管理画面を実装しました。 公開画面については、実際に PR TIMES の企業ページにプレスキットが設定されているので下記URLからご覧いただけます。 株式会社PR TIMESのプレスリリース｜PR TIMES ただ管理画面については、企業としてログインしているユーザーしか閲覧することができないので、弊社の設定画面を例として紹介していきます。 どのあたりがリッチなのか プレスキットの管理画面には従来の PR TIMES の管
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
