サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
developers.prtimes.jp
こんにちは、開発本部のソンです。最近、PR TIMESのPHPバージョンアッププロジェクトに参加していて、PR TIMESにおけるメール送信機能のリファクタリングを行いました。これを通して、クラス設計やテストしやすいコードの書き方など様々な技術を身に付けました。 この記事では、なぜメール送信機能のリファクタリングを行ったかと、それを実装した話について書きたいと思います。 なぜメール送信機能のリファクタリングを行ったのか？ PR TIMESのPHPバージョンアップを行うにあたって、レガシーコード上の多くの問題に直面しています。 メール送信機能はその１つです。この機能は様々な問題を抱えていましたが、次のようにまとめられます。 送信する方法が沢山あった メール送信機能はPEARのMailライブラリ、PHPMailer、mb_send_mail など沢山の送信する方法を使っていました。そのため、メ
# ベクトルを表示 print(model.wv['國'][:10]) print(model.wv['国'][:10]) # [-0.7325802 -0.62632436 -0.841284 0.7578425 0.2539938 0.2262604 # 0.3874282 0.17596856 -0.44506177 -0.04973697] # [ 0.18717308 1.0561227 0.16029984 0.84652656 -1.5607154 -2.0747993 # 0.18328437 0.69604254 文章を分析する際に単語ベクトルを使用するため、この結果は文章をベクトル化した時にも影響します。 以上のように、データに新旧字体が混ざっていて解析結果に影響が出ていることが判明したので、統一することにしました。 新旧字体の互換表の作成 当初は異体字セレクタを使って
AWS Session Managerとは AWS Session ManagerとはAWSのリソースを管理するための機能であるAWS Systems Manager(旧SSM)の中の機能の一部です。 Session Managerを使うとパブリックサブネット内に踏み台サーバーを構築したりユーザーごとに秘密鍵を作成したりセキュリティグループで22番ポートを解放したりすることなく、プライベートサブネット内のEC2インスタンスに対して安全に接続することができるようになります。 また、Session Managerを使うことで接続中のセッションの一覧表示や強制切断、サーバー上で実行されたコマンドの記録なども簡単にできるようになります。 Session Managerを使うための準備 Session Managerを使うためには以下の準備を行う必要があります。 接続先EC2インスタンスからインター
こんにちは、バックエンドエンジニアの江間です。 先日、テスト駆動開発（TDD）の日本での第一人者として知られる和田卓人(@t_wada)さんをお招きして、オンラインでテスト駆動開発ワークショップを開催しました。 抱えていた課題感 もともとPR TIMESには自動テストを書いていく文化がありませんでした。2022年初頭あたりから徐々に自動テストを追加するようになって来ましたが、テストを書く経験が浅いメンバーが多く、何となくテストコードを書いている状況でした。 メンバーとしては、テストを書こうとしても、何をテストすればいいのか？どうやって書いていけばいいのか？などが分かっておらず、テストを書くことへのスキル不足が課題となっていました。 また、 PHP のエキスパートとしてジョインしている uzulla さんが「テストの書けるコードがいいコード」と伝えてきましたが、テストの経験が浅いメンバーにと
こんにちは、普段PR TIMES STORY（以下STORY）の開発リーダーをしている岩下(@iwashi623)です。 本記事ではPR TIMESで稼働しているAWS ECSやFargateで採用中のおすすめの設定について書いていきます。なお、PHPカンファレンス 2022のスポンサーLT で話した内容と重複しますので、興味がある方はスライドやYouTubeの動画も覗いてみてください。 おすすめ設定１ ECS Exec まずおすすめしたいのは、ECS Execです。 以下AWSドキュメントより抜粋 Amazon ECS Exec を使用すれば、最初にホストコンテナのオペレーティングシステムとやり取りしたり、インバウンドポートを開いたり、SSH キーを管理したりすることなく、コンテナと直接やり取りできます。ECS Exec を使用して、Amazon EC2 インスタンスまたは AWS Fa
PR TIMESにおけるフロントエンド開発基盤の構築 こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。 昨年PR TIMESでは企業ページをフルスクラッチで... しかし、この時点では Frontend のコードベースを一つにまとめただけで、各プロジェクトで共通のコンポーネントやスタイルを一元管理するまでには至っていませんでした。 今回、Yarn Workspacesを利用してMonorepoを構築し、共通コンポーネント・スタイルの共有を行ったのでご紹介します。 本エントリーでは、Yarn Workspacesの機能を使用して、1つのリポジトリで複数のプロジェクトを管理している構成のことをMonorepoと指します。
Storybookとは？ StorybookとはUIのカタログ作成ツールです。コンポーネントというUIのパーツ単位での挙動が確認でき、開発面ではコンポーネント単体での開発を可能にしてくれます。Storybookでは、以下の画像のようにそれぞれのコンポーネントごとにデザイン・挙動を確認できます。 実際の動作は以下の公式で紹介されているStorybookを参考にしてください。 どのように導入をしたのか Storybookの導入は、デザインチームとフロントチーム共にメインで行っている業務の合間で行うため小さく導入していく方針になりました。 Storybook導入のゴール設定 最初はデザインで意図されていた挙動と実装されたコンポーネントの挙動に乖離がないかを確認できれば良いとチームで合意したため、「すでに実装されているコンポーネントのみ最低限のストーリーを書くこと」を導入のゴールにしました。 今後
こんにちは。2022年5月に入社した開発本部のレー・ホアン・トゥです。 今回、6月16日に社内で AWS 勉強会に参加した感想をご紹介いたします。 PR TIMES に入社してから、新しい技術を調べたり共有したりするため、技術共有会や勉強会などをよく行っている印象を受けました。 AWS は初心者で調べてばかりであるため、AWS の人とのミーティングによく参加しています。しかし、実際に触れた経験があまりないので、共有会で取り上げられた内容がまだ理解できないことがあります。 そのためAWS アカウントチームから初心者向け AWS 勉強会を開催していただきました。 AWS 勉強会とは 勉強会は6月16日に開催されました。AWS からは講師としてソリューションアーキテクトの苅野さん、サポーターとしてアカウントマネージャの濱岡さん、テクニカルアカウントマネージャの加須屋さんに支援いただきました。PR
はじめまして、PR TIMESの開発本部でインターンをさせて頂いている永井と申します。 現在はパフォーマンス改善のタスクをしています。 はじめに 自分は今回のタスクをやるまでSQLをあまり書いたことがありませんでした（ORマッパーしか使っていませんでした）。しかし、今回のタスクをやることで直接SQLを書くことが多くなりSQLはもちろんPostgreSQLの構造はどうなっていて、何がメモリを消費しているかなどについての理解も深まりました。本当に良い経験をさせて頂きました。 なぜ削減することになったのか PostgreSQLのストレージがとても逼迫していました。さらにPostgreSQLはオンプレの物理サーバーで動いていてストレージの増設も難しいため、AWSに移行するまでの延命措置としてデータ量を削減することになりました。 まずは状況確認 一番容量を使っているテーブルはどれか 以下のクエリで、
こんにちは、開発本部のバックエンドエンジニアのThai（タイ）です。クローラ改善プロジェクトを行い、Puppeteerを使って新しいクローラを作りました。今回の記事ではPuppeteerで開発したクローラについて紹介したいと思います。 Puppeteerとは Googleで開発されて、DevToolsプロトコルを介してChromiumやChromeを制御するための高レベルなAPIを提供するNodeライブラリです。 参照: https://devdocs.io/puppeteer/ クローラとは インターネット上の様々なWebページをスクレイピングするツールです。 なぜPuppeteerを使ってクローラを作るのか？ これまでインターネット上の記事を収集するために、PHP-curlで開発したクローラを使ってきました。PHP-curlは静的なページを問題なくクロールできますが、SPAページ(Si
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 PR TIMESでは、これまでReact/TypeScriptのコードをビルドする際にWebpackを使用していましたが、コード量が増えるごとにビルドにかかる時間が増えてきました。 そこでesbuildを導入し、ビルド時間の短縮に取り組んだのでご紹介いたします。 esbuildとは esbuildはGo言語で実装されたJavaScript/TypeScriptのビルドツールで、公式ドキュメントには従来のビルドツールと比べて10~100倍速くビルドできると書かれています。 esbuildが提供している主な機能は以下の通りです。（2022/05/30 現在） キャッシュなしでの高速なビルドES6 と CommonJS をサポートES6 の Tree shaking 対応（利用されていないコードの除去）JavaSc
こんにちは、普段PR TIMES STORY（以下STORY）の開発リーダーをしている岩下(@iwashi623)です。 PR TIMES STORYは弊社のMissionである「行動者発の情報が、人の心を揺さぶる時代へ」をそのまま体現したようなプロダクトで、「創業ストーリー」や「開発秘話」などの行動者の熱量をそのまま配信して、企業とメディア、生活者のより良い・多くのリレーションが生まれることを目的としています。 PR TIMES STORYトップページ 本記事では、私も今月から2年目となったので新卒の時よりさらにチームに貢献していきたい！と思っていたところ、STORYの現状の環境では開発速度が出しづらい状況を抱えていたので、そちらを解消するためにチームで行ったことを書いていきます。 現状 STORYは一部PR TIMESとは別リポジトリ、別インフラで独立して管理されており、独立している部
Editor library comparison table The above table tells us that while Tiptap is the only editor that has all the requirements checked, the other editors are not far off. Slate: Aside from having 1 No for Japanese input support, Slate is the one that comes real close to Tiptap. I feel like Tiptap and Slate are almost the same, especially their plugin/extension based concept. Both are also inspired by
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を導入することができました。 旧デプロイフロー しかし、この構成には以下の課題がありました。 フロントエンドの実装が一つのリポジト
また、AMPページをこのまま残してしまうと、非AMPページを修正した際、AMPページも修正する必要があり、機能改修時の開発工数が上がってしまいます。 これもAMPを削除する大きな理由だと言えます。 始めるにあたって AMPを知らない、インターンが始まって数日で、PRTIMESのソースコードに触れるのは本件が初めてでした。色々わからないことがありましたが、調べたり教えていただきながら進めました。どなたが何の担当の方かもわからず誰に聞けばいいかを聞くことから始まりました。 特に気をつけたのは、PRTIMESは常に動いており、PV数やパフォーマンスなどはユーザーに直接影響を与えます。そのため事前に情報を洗い出し、調査を行い進めて行きました。 Googleが「AMPページを削除する方法」を提供しているのでそれに基づいて進めました。 実際にAMPを削除する FAQより Q: What else do
<? include("abc.php"); include("def.php"); include("conf.php"); include("db.php"); include("some.php"); include("what.php"); Define("NUM", 100); class super_calc extends great_calc { /* * * * コンストラクタ * * * * */ public function super_calc($initial_num){ $this->db = DB::getDb(DSN); $this->initial_num = $initial_num; } /* * * * チェック * * * * */ public add_ok($add_num){ $res = $this->addable($add_num);
新機能「プレスキット」とは 「プレスキット（または、メディアキット）」とは、メディア関係者向けに作成する、企業や事業に関するプロモーション用の資料や画像・動画素材などをまとめたもの です。 まずプレスキットとは何かというと冒頭で紹介した記事にもあるように、上記のようなものになります。これを機能として提供するにあたって、ユーザーが閲覧できる公開画面と、企業が設定するための管理画面を実装しました。 公開画面については、実際に PR TIMES の企業ページにプレスキットが設定されているので下記URLからご覧いただけます。 株式会社PR TIMESのプレスリリース｜PR TIMES ただ管理画面については、企業としてログインしているユーザーしか閲覧することができないので、弊社の設定画面を例として紹介していきます。 どのあたりがリッチなのか プレスキットの管理画面には従来の PR TIMES の管
こんにちは、21新卒のフロントエンドのTepy（テッピー）です。 お読み頂いた方がいるかもしれませんが、先日こちらのReactの便利なライブラリーを紹介する記事を書きました。今回もReact業界での良いライブラリーをもう一つ紹介したいと思います。 本記事で紹介したいのは Reach UI という UI ライブラリーです。PR TIMESの企業詳細ページリプレイスプロジェクトにReach UIを利用していくつかのコンポーネントを作成しました。利用するきっかけや実装中の感想などの経験をお伝えらればと思います。 Reach UIとは？ Reach UI seeks to become the accessible foundation of your React-based design system. Reach UIのサイトから引用すると、Reach UIはReactベースのデザインシステム
こんにちは、21新卒の岩下です。 今回は私が普段開発を担当しているPR TIMES STORYのDBデータをBigQueryへ転送したので、そちらについての話を書いていきたいと思います！ はじめに PR TIMES STORY（以下、STORY） では、データベースにMySQL互換のAmazon Auroraを使用しています。 本記事の目標はAuroraに蓄積されているデータをBigQueryへ転送して、データ分析に使用できる状態にすることです。その過程で、AWS Glueを使ったETL処理や、RDSのシステムスナップショットなど色々と学ぶことがありました。 やりたいこと 単純にいまDBに保存されているデータを全てBigQueryに転送するだけでは、プライバシーの観点から転送してはまずいデータなどが入り込んでしまいます。そのため、そういったカラムにはAWSのGlue といったETL処理がで
こんにちは、21新卒エンジニアの柳です。 この度、プレスリリースのサムネイル画像とプレスリリース詳細ページ内で掲載されている画像の画質改善を行いました。 今回行った画質改善の対象となる条件は以下の通りです。 12月中旬以降にアップロードして頂いた画像サイズが十分に大きい画像トップページ（https://prtimes.jp） で表示されているプレスリリースのサムネイル画像プレスリリース詳細ページで表示されている画像 画質改善前のプレスリリース画像の問題点 PR TIMESでは画像をエディタからアップロードしたときに、実際に画面に表示されるサイズと同じサイズにリサイズ処理をして、生成したサムネイル画像や詳細ページの画像をそのまま配信していました。PR TIMESのサービス開始時点であれば、画面に表示されるサイズと同じサイズの画像を配信することが画像の最適化として良い対応でした。 しかし昨今、
こんにちは、業務委託でエンジニアの採用サポートをしている山岡（@hiro_y）です。 2020年度に新卒でエンジニアとして入社した、植江田さん、江間さん、鈴木さんの3人と一緒に開発本部の様子や、日々どのように業務と向き合っているのかを座談会の形式で話してみました。少し長くなりましたので、前編・後編に分けてお届けします。 まずは自己紹介から 山岡：まず自己紹介をお願いします。 鈴木：2020年新卒で入社しました。入社当時から主にPR TIMESサービスのフロントエンドエンジニアをやっています。 植江田：私は今、Webクリッピングというプロダクトの開発リーダーをしています。主な業務は、新しくスタートする業務の設計方針や、どう設計し実装していくかというフローを決めることです。実際に実装することもありますし、いろいろやっています。 江間：私はバックエンドでPHPを書いています。入社してからはずっと
本件は実装に漏れがあった状態で放置してしまっていました。お客様に多大な迷惑をかける前に防ぐことができず、申し訳ございませんでした。 今回の事象が発覚してすぐに総点検・改修プロジェクトが開始され、調査と改修を行っていきました。 こういったことが起こった時にすぐに調査できるようにBigQueryの導入を進めていたり、リファクタリングデーの設定により古いソースコードにも目を触れる機会を作っていこうとしていたのですが、いずれも間に合わず、かなり悔しい思いをしました。 しかしそんな中でも各メンバーが頑張り、1つずつ問題を解消していき、何とか終わらせることができました。こんな大変な状況でも対応をし続けてくれた人には本当に感謝の気持ちでいっぱいです。 セキュリティ対策で唯一間に合ったと言えるのはKENROの導入でした。 KENROは新卒＋希望者の人に受けてもらいましたが、KENROで得た知識を今回のプロ
こんにちは、業務委託でエンジニアの採用サポートをしている山岡（@hiro_y）です。今年7月にはイベント「PHPバージョンアップkickoff」を執行役員CTOの金子さん、uzullaさんと開催しました。その後、PR TIMESでは着々とコードの修正・改善が進んでいます。リファクタリングの進め方についてはuzullaさんが詳細な記事を書いてくださったので、是非ご覧ください。 採用サポートとは さて、私はPHPエンジニアでもあるのですが、PR TIMESには「採用サポート」という一風変わった肩書きで携わっています。具体的に何をしているかというと、エンジニア採用における、エンジニアでないとわからない部分をサポートする役回りです。 例えばレジュメ（経歴書や転職サイトに記載されたプロフィール情報）を見るとき、技術要素と技術の歴史について知識がないと、その方の経歴を正確に知ることはできません。当然エ
こんにちは、業務委託でPR TIMESにJOINしているuzulla (”うずら”, twitter, GitHub)です。本エントリではPR TIMESで行っているリファクタリングデーについてお話したいと思います。 リファクタリングデーとは？なぜ必要か？ PR TIMESは歴史あるサービスです。サービス・機能は追加され、削除され、結果古いコードが大量に存在します。今後もスピード感を維持しつつ成長を続けるためにはそれらの整理・改善・削除、つまりリファクタリングが重要なことはいうまでもありません。 日々の業務においてリファクタリングが行われていれば問題ありませんが、日々サービスの成長にフォーカスしていくとやはり後回しになりがちで、タイミングを失います。 その為に「リファクタリングデー」という「リファクタリング作業を定期的に実施する日」をとりきめて実施しています。現在は月に一回程度開催され、３
こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。 2021年10月に2020年新卒の僕と2021年新卒の2人の計3人で企業ページのフロントエンドをレガシーなコードから React.js にリプレイスしたものをリリースしたので、そのお話をしようと思います。 企業ページがどういったページかについては下記の PR TIMES MAGAZINE の記事をご覧ください。 リプレイスに至った背景 リプレイス前の企業ページのフロントエンドの技術スタックは以下のようになっていました。 jQueryJavaScript (ES5以前)JavaScript (ES6以降)Vue.jsSCSS このようにひとつのページの中でも複数の技術が混在していました。また、ディレクトリ構造や記述ルールも整備されていませんでした。 そのために、コードのキャッチアッ
こんにちは、21新卒エンジニアの柳です。 先日、PR TIMESの企業ページをSmartyというテンプレートエンジンからReactへリプレイスを行いました。その際にOpenAPIを社内のプロジェクトで初めて導入したので、OpenAPIのメリットや活用方法について書きたいと思います。 プロジェクトの背景 OpenAPIの説明に行く前に、企業ページをReactへリプレイスするに至った背景について少しお話しします。 企業ページをReactへリプレイスを行うことになった背景は以下の2点です。 現状使用されている JavaScript, jQuery では今後の機能追加に応えることが困難PR TIMES全体のフロントエンドのレガシー改善プロジェクトの最初の一歩として 企業ページは企業の様々な情報を1つにまとめたページになっているためデータ量も多く、また非同期通信によるLoad Moreやアニメーショ
株式会社PR TIMES 執行役員CTOの@catatsuyこと金子です。 私が今年の4月に入社してから半年ほど経ちました。入社してから取り組んでいることのひとつとして、月に数回程度、CTO通信という名前で不定期に私が考えていることや、やろうとしていることを社内のNotion上で発信しています。 基本的に私の考えや開発本部の方針に関することを発信しており、今回はそのCTO通信の内容を一部公開します。 完全に社内向けの文章なのでコンテキストが分かりにくかったり、社外の人から見るとポエムにしか見えない内容もありますが、どういったことをやろうとしているのか、生に近い情報を少しだけ共有できればと考えています。引用した内容の中で現在ではアップデートされている情報もあるので、「続報」を追記するかたちで補足していきます。 今回はNotion上のスクリーンショットを貼り、代替テキストにNotion上の本文
株式会社PR TIMES 執行役員CTOの@catatsuyこと金子です。今回は先日私が作ったGo製のCLIを社内で利用した話を紹介します。 旧ストレージサーバー廃止失敗 現在のPR TIMESの主要なシステムはデータセンター上にあり、ストレージサーバーはアプライアンスのシステムを使用し、アプリケーションサーバーからはNFSでマウントされています。 PR TIMESは日々様々なプレスリリースが配信されており、当然それに伴い画像などのストレージに保存されるファイルが日々増えています。そのためいつかストレージサーバーのディスク容量が枯渇してしまいます。ディスク容量が枯渇すれば当然新しいストレージサーバーへの移行が必要です。 弊社も先日旧ストレージサーバーの容量が枯渇してしまい、新ストレージサーバーに移行する必要がありました。しかしここで問題が発覚します。それは 1つのディレクトリにものすごい量
PR TIMESで定期開催されている社内勉強会。先日は執行役員CTO金子達哉主催で、社内のPHPバージョンアップkickoffイベントを開催しました。今回は本編後半に実施したCTO金子達哉、山岡広幸氏、uzulla氏の座談会の記録をお届けします。 不平不満をオブラートに包んで、情報として共有していく uzulla：スライドでも話しましたが、まずは、精神論をします。僕は「PHPの新しい機能を使いたいから、絶対バージョンアップしてやる！」みたいな、無限のモチベーションにプッシュされる人間ですから、モチベーションは自己回復していくタイプです。無茶なスケジュールを切らなければなんとかこなしていける。 それでも、レガシーシステムの改善ってあまり高くは評価されないし、デプロイで壊せば落ち込みます。それを「気にするな」と言うのは無理な話なんです。「辛いな」と思った時に、うまく「辛い」という感情を共有して
次のページ
このページを最初にブックマークしてみませんか？
『PR TIMES 開発者ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
