サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ブラックフライデー
developers.prtimes.jp
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日 PR TIMES のフロントエンド環境に typescript-go を導入し、 tsgo（ typescript-go の実行コマンド […]
PR TIMESのCDNをCloudFrontからFastlyに移行しました こんにちは、インフラチームテックリードの櫻井です。 今回はプレスリリース配信サービスの prtimes.jp で使用しているCDNをCloudFrontからFastlyに移行したことについ... なお該当のAPI以外へのリクエストは正常に処理できていたため、PR TIMESへのリクエストが一律でブロックされている状況ではなかったと考えられます。 根本原因の仮説と検証 ここまでの調査でわかったことは以下です。 該当のお客様から行われたメディアリスト保存APIへのAJAXリクエストは、501エラーとしてNew Relicに記録されている。 該当のお客様から行われたメディアリスト保存APIへのAJAXリクエストは、PR TIMESシステムに到達していない。 該当のお客様から行われた他のAPIへのリクエストは、正常にレス
PR TIMESでCTOをやっている金子 (@catatsuy) です。 ソースコードの改竄を検知する仕組みを自作してOSSとして公開しました。 GitHub - catatsuy/kekkai: A lightweight Go tool for detecting file tampering by comparing content-ba... A lightweight Go tool for detecting file tampering by comparing content-based hashes stored securely in S3. - catatsuy/kekkai PR TIMESでは、レガシーなPHPアプリケーションをEC2で運用しています。セキュリティインシデントに備えて、ソースコードの改竄を検知する仕組みが必要でした。 既存のツールでは我々の要件に合
発生した事象 Jotai の atomFamily へ Recoil の atomFamily から移行した際、特定の条件下でコンポーネントが無限に再レンダリングされる問題が発生しました。 具体的には、以下のように atomFamily の引数としてオブジェクトリテラルを直接渡していたところ、該当のコンポーネントが再レンダリングされ続ける状態となりました。 import {atomFamily} from 'jotai/utils'; import {atom} from 'jotai'; type PagerParameters = { displayType: 'pc' | 'sp'; contentsId: ContentType; maxNumberPerPage: number; }; export const pagerState = atomFamily((parameter
EmotionからCSS Modulesに移行しました こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまでEmotionを使ってスタイリングを行っていましたが、2024年6... css-modules-kit とは css-modules-kitはCSS Modulesを便利にするためのツールキットで以下の機能を提供しています。 CSS Modulesの型定義ファイルを生成する機能 VS CodeやNeovimなどのエディタに言語機能を提供する機能 CSS Modules向けのESLint、Stylelintプラグイン happy-css-modulesは、上記の機能のうち型定義ファイルを生成する機能のみを提供していました。一方、css-modules-kitはそれに加えて、エディタの言語機能を拡張するTypeScr
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまでEmotionを使ってスタイリングを行っていましたが、2024年6月からCSS Modulesへの移行作業を進めており、先日その作業がすべて完了しました。本エントリーでは、移行の背景や技術選定、移行作業中に発生した問題などについてご紹介します。 移行の背景 社内の一部機能を2024年3月頃にRemix SPA Modeへ移行しようとしましたが、Emotionが動作しなかったため断念し、その経験からCSS Modulesへの移行を検討し始めました。 また、今後React Server Components（RSC）が主流になる可能性があることを想定すると、このままEmotionを使い続けるのはリスクだと感じるようになりました。Emotionによって開発者体験は確かに向上し
Markuplintとは Markuplintはマークアップ開発者のためのHTMLリンターです。 HTMLのタグが正しいか、Aria属性が適切に設定されているか等の適合性のチェックを行ってくれます。 Markuplint導入の背景 レビュー時に目視でHTML要素の使い方正しいかどうかを確認していくのは、レビュワーのHTML仕様の理解度に左右されてしまいます。 HTMLの品質を担保する場合に個々人のスキルで品質にブレが生じないようにするためにmakruplintを導入することにしました。 Markuplintの導入の進め方について Markuplintの導入は以下のフェーズで進めていきました。 Phase1 VS Code上やコマンドを叩いてMarkuplintが実行できるようにする+エラーになったルールを一旦無効化 Phase2 pre-commit+lint-stagedで実行できるよう
こんにちは、フロントエンドエンジニアインターンの髙橋（RYU）です。 一部のテストを Vitest の Browser Mode で実行するようにしました。その経緯と理由、効果についてご紹介します。 背景 これまで、フロントエンドのユニットテストには Vitest と jsdom を組み合わせて使用してきました。jsdom を利用することで、Node 環境下でもブラウザの DOM をエミュレーションでき、コンポーネントの単体テストなどが可能でした。
こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はPR TIMES社内でHTMLクライテリアを作成したのでその話をしようと思います。 つくろうと思ったきっかけ PR TIMES社内ではHTMLの品質に対するエンジニア間の共通の指標がなかったため、何を満たせば品質を担保していると言えるのかの指標やルールがありませんでした。 指標がないとlintを導入した際に何を入れると品質が向上できるのかがわからなかったり、HTMLの仕様理解が個々人ばらつきが生じ、プロダクトコードで品質を担保するのが難しくなります。 そこでPR TIMESの開発部のフロントエンドチームにおけるHTMLの品質を明文化するためにクライテリアを作成することにしました。 HTMLクライテリアのつくりかた 日本CTO協会が作成しているWebフロントエンド版DX Criter
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのReactリプレイス当初より Barrel file を作成するルールがありました。しかし、先日そのルールを廃止することに決めたため、その経緯についてご紹介します。 Barrel filesとは Barrel filesとは複数のモジュールを1つのファイル（Barrel file）にまとめてexportすることを指します。以下の例ではutils/test.ts 、utils/fuga.ts 、utils/hoge.ts で export されている定数を utils/index.ts で再exportしています。 // utils/test.ts export const test = 1; // utils/fuga.ts export const fuga = 2; //
プレスリリースを書くために設計されたPR TIMES新エディター公開 AIアシスタントなど新機能【PR TIMESリニ... 株式会社PR TIMESのプレスリリース（2023年12月19日 08時30分）プレスリリースを書くために設計されたPR TIMES新エディター公開 AIアシスタントなど新機能【PR TIMESリニ... エディターは、2024年12月現在、React、Tiptap（headlessエディターライブラリ）、TypeScriptという技術スタックで開発を行っています。 エディターは本文の入力部分（以下、本文エディターと称します）以外にも、ツールバー・サイドバーなど複数のUIが組み合わさって構成されていて、各UIから本文エディターに対してTiptapのコマンド関数を実行したり操作を行っています。 エディターのテストについて エディターという機能の性質上、前述の通り複数の
こんにちは、PR TIMESの開発部インターンの三宅です。PR TIMESではFAXを用いてプレスリリースの発信を行うことができます。今回、私はこれまで手動で送っていたFAXをWindows環境のC言語のCGIプログラムを作成し自動送信できる仕組みを開発しました。その内容について紹介します。 背景 PR TIMESには、「プレスリリースのFAX配信」というオプションサービスが用意されています。通常はメディアリストとして選定した各メディアにメールでプレスリリースを配信しています。そこにオプションサービスを付加することで、FAXでもリリース配信が行えるようになります。 FAXの送信はカスタマーリレーション部（CR）が手作業で送付しています。PR TIMESでのプレスリリースの配信数の増加に伴いCRの負担が増加していることが課題です。そこで、FAXの送付を自動で行えるようにするプロジェクトが立ち
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのスタイリングライブラリにEmotionを使用していましたが、4ヶ月ほど前からCSS Modulesへの移行作業を開始しました（移行の経緯などについては別エントリーで紹介する予定なので、本エントリーでは割愛させていただきます）。その際にhappy-css-modulesを使用してCSS Modulesの型定義を生成する選択を取りました。 しかし、happy-css-modulesには一つ改善したい点がありました。本エントリーではその点を解消するためにhappy-css-modulesに機能追加をし、実際にプロダクトで使った話を紹介します。 happy-css-modulesについては以下の記事にわかりやすくまとまっています。
こんにちは。コーポレートチームの大村です。 PR TIMESの情報システム部門を担当しています。 当社では社員個人に貸与しているPCの他に、イベントやカンファレンスなどで資料を投影したり、サービス画面のデモを行うために、持ち出し用のPCを貸してほしいというリクエストがたまに発生します。 2024年の初旬から、このような用途で社外に持ち出すPCをChromebookで運用することを始めました。 この記事では、Chromebookを社内で運用した感想や、利点や課題についてお話しします。 Chromebookでできること Chromebookは、Chrome OSを搭載したPCです。このOSに触れたことの無い人でも、ChromeブラウザやGoogleドライブを知っている人なら簡単に操作ができるはずです。 導入のきっかけとして着目したChromebookの特徴は、セキュリティ機能の強さと管理のしや
Technical Advisor の @1000ch です。私がジョインしたのが 2021-09 なので、気付けば PR TIMES に関わって丸 3 年が経過していました。3 年間という月日は組織や事業を変化させるには十分な時間です。普段は気が付きにくいですが、改めて 3 年前と今を比較すると大きな前進を感じますので、その変化に主観を交えて記事を書きます。 今日現在までの 3 年間で起こった出来事 PR TIMES はプレスやニュースの配信サービスとして広く利用されています。今も昔も開発部が PR TIMES のプロダクト開発を支えていることに変わりはありませんが、昔は（3 年前時点では少なくとも）組織としてもシステムとしても、今よりずっと不安定な状況でした。 古くアップデートできていない PHP に jQuery を使った Frontend 実装、ホストしているオンプレミス環境へのデ
ここんにちはPR TIMES開発本部のインターンの Chanoknan です。 PR TIMESについてフロントエンドのCI パイプラインを改善についてお話しします。 PR TIMESでは、Reactで書かれたすべてのフロントエンドのコードのコードはMonorepo として管理しています。 そのMonorepoのCI パイプラインは、システム全体のLint、Type Check、Test、Buildを行うようにCIパイプラインが設定されており、これにはかなりの時間がかかり、GitHub ActionsのBillable Timeにも影響を与えます。これを緩和するため、CI処理時間を減らすためのいくつかの戦略を実施しています。詳細については、以下の記事を参照してください。 改善できる点を特定する この作業に取り組む前、私はCIパイプラインやGitHub Actionsについて詳しくありません
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、PR TIMES上で企業アカウントを作成する際に情報を入力する企業登録申請フォームをReact + Viteにリプレイスしました。 企業登録申請フォームをリプレイスする難しさ 企業登録申請フォームは入力項目が30項目あり、データ量が多いフォームとなっています。このようなフォームをシングルページアプリケーションで実装する時に難しくなるのが、フロントエンドとバックエンドのバリデーションをどのように同期させるかです。すでに登録済みのメールアドレスかどうかを確認するバリデーションなどはフロントエンドだけでは完結することはできないため、フロントエンドのバリデーションがゆるくなるのが一般的だと思います。今回のリプレイスでもフロントエンドのバリデーションをバックエンドよりもゆるくする対応を行いましたが、そこでさらに問
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + jQuery から Next.js（Pages Router）にリプレイスしました。
import {css} from '@emotion/react'; import * as RadixPopover from '@radix-ui/react-popover'; import type {ReactNode} from 'react'; const defaultSideOffset = 4; type SideType = 'top' | 'right' | 'bottom' | 'left'; type AlignType = 'start' | 'center' | 'end'; type Props = { /** popoverを表示させるトリガー */ readonly trigger: ReactNode; /** popoverの中身 */ readonly children: ReactNode; /** popoverを開いた状態にするか否か *
CypressからPlaywrightに移行しました こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、... 前提 PR TIMESは、React + Vite製のアプリケーション（主に企業様の管理画面）とNext.js製のアプリケーション（SEOが重要なページ）が存在します。 本エントリーで紹介するのは、React + Vite製のアプリケーションに対するVRTとなります。 VRTの実行環境 VRT（Playwright）は公式のDocker Imageを用いて、Docker上で実行するようにしています。 { "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/
こんにちは、インフラチームテックリードの櫻井です。 今回はFluentdプラグインの暴走によってサーバーのストレージが枯渇しかけた話について紹介したいと思います。 アラート通知は突然に とある土曜日の夕方ごろ、1件のアラート通知がスマホに届きました。 “Filesystem % 90.19% > 90%” どうやら本番環境のバッチサーバーのストレージ使用率が90%を超えてしまったようです。 直近のストレージ使用量の推移を見てみると、朝の10時ごろからものすごいペースで増え続けており、あと30分ほどでストレージが枯渇してしまうという状況でした。 あいにく私は当時私用で外出中だったため手元にPCがなく、Slackで他のメンバーに助けを求めました。 するとちょうどPHPerKaigi 2024に参加中だったCTOの金子がこれに気づき、原因となっていたログファイルの削除などの対応をすることで、なん
こんにちは。開発本部で主にバックエンドの開発をしている ueeda です。 PR TIMES Webクリッピングというサービスで使用していた MongoDB を AWS のマネージドサービスである Amazon DocumentDB（以降 DocumentDB） に移行させるプロジェクトを進めていたのですが、先日移行が終了したので、紹介したいと思います。 PR TIMES Webクリッピング（以降クリッピング）とは様々なサイトから記事をクロールし、その記事にユーザーが設定したキーワードが含まれていればクリップしたりなど、メディア露出の調査・分析などが可能なWebアプリケーションです。
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 経緯 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビューに回すことができず、開発効率が落ちてしまっていました。 そこで現状の使い方を見直して、billable timeの削減に取り組むことになりました。 billable time削減の改善点を探す b
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 PR TIMESではこれまでLintツールとしてESLintを使用していましたが、2023年9月からXOを使うようにし始めました。本エントリーでは、XOを導入した経緯や進め方、そして導入した結果についてご紹介します。 導入をした経緯 これまでPR TIMESでは .eslintrc.jsを自分たちで一から作り、ESLintルールを運用していました。しかし、その設定は最初期の環境構築時に色々なドキュメントを見ながら、つぎはぎで作成したものになっており、なぜこのルールが入っているのかや、このルールは必要なのかなどの疑問がありました。 そのような状況であったため、各々がESLintの設定を自由に変え、本来であればエラーになって欲しいルールもoffにされていたりしました。 そこでアドバイザーとして入って頂いている 1
自己紹介 本名：金子達哉 株式会社PR TIMES開発本部長CTO 2021/4入社 達人が教えるWebパフォーマンスチューニング〜ISUCONから学ぶ高速化の実践（技術評論社）（通称：ISUCON本）の著者の1人 6章「リバースプロキシの利用」・7章「キャッシュの活用」・8章「押さえておきたい高速化手法」を担当 catatsuyというIDで各種SNSをやっています かたついと呼ばれることが多いです 数年前のPR TIMES デプロイは1週間に1度あるかどうかという頻度 リリース時のメンテナンスにより、大きな変更をリリース PHPのバージョンが非常に古く、ソースコードにも問題があり機能追加が困難で開発効率が低い フロントエンドもほぼすべて古いjQueryベースで作られており、バグ修正すらできていない ⇒開発速度向上のために、すべて変えたのでざっくり紹介 デプロイ頻度を上げる 小さいPRをど
こんにちは。PR TIMES でエンジニアをしている岩元 (@yoiwamoto) です！ プレスリリース配信サイト PR TIMES のフロントエンドは、一昨年ごろまでほぼ全てのページが Smarty + jQuery on PHP で実装されており、直近1、2年は機能追加・改修に合わせてこれらを順次 React 実装にリプレイスを進めています。 このような取り組みをどのような技術構成で行っているか、2023年の振り返りの意味も込めてざっくりと紹介します！ リポジトリ構成 React 実装は、これまでメインのバックエンドサーバーとのモノリスで構成していたリポジトリとは分けて、prtimes-frontend というリポジトリを使用しています。 PR TIMES STORY というサービスも自社で開発が行われていますが、実装は別リポジトリであり技術構成も異なるため、このエントリでは詳細に触
こんにちは、開発本部でインターンをしている田中 湧大です。 今回は認証機能をPR TIMES上で実装し、企業・事業主ユーザーとメディアユーザーでログインするときにJWTを発行するようにしたのでその紹介をします。 JWT（JSON Web Token）とは JSON Web Tokenは以下のようなドットで結合された文字列です。${HEADER}.${PAYLOAD}.${SIGNATURE}で構成されており、それぞれbase64エンコードされています。 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlRhbmFrYSIsInVybCI6InBydGltZXMuanAifQ. NVG3MT6djcCjv1Q39Q-QfdZafDA45YYzDiVeknO4KjM JWTはログインシステム、
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
次のページ
このページを最初にブックマークしてみませんか？
『PR TIMES 開発者ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
