ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ショッピング統括本部の川口です。 本記事では、2022年2月から3月にかけて開催された超PayPay祭の事例をもとに、クラウドネイティブ環境におけるJavaチューニングの進め方について解説します。 本記事の内容は2022年6月19日に開催された、JJUG 2022 Springで発表した内容をベースにしています。 Yahoo!ショッピングにおける超PayPay祭は高負荷 超PayPay祭は全国のPayPay加盟店とオンラインショップでお得に買い物をお楽しみいただける大規模キャンペーンです。Yahoo!ショッピングにおいても、PayPayポイントがもらえるキャンペーンなどさまざまなお得な施策が実施されます。超PayPay

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPANアプリの通知系バックエンドシステムを主に担当しているエンジニアの福盛です。 Yahoo! JAPANアプリの通知系バックエンドシステムについては、以下の記事でも紹介しています。もし興味があればこちらも参照ください。 チームのスキル向上にもつながるシステム刷新 〜 Yahoo! JAPANアプリ「お知らせ」機能の開発事例 Scalaで使うMessage Queue 〜 Yahoo! JAPANアプリのお知らせ送信でのApache Pulsarの活用 今回は開発とトラブルシュートの効率を大幅に向上する、アプリケーションログの埋め込みと活用方法について紹介いたします。 本記事では「JavaおよびScalaで構築さ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。第11代黒帯（Webフロントエンド／ヤフー内のスキル任命制度）の伊藤（@koh110）です。 普段はCTO室にあるWebフロント技術室で、全社のフロントエンドに関わる仕事をしています。 最近の仕事のひとつとして、IE11 の非推奨の案内 がありました。 Yahoo! JAPANでは、Internet Explorer 11を推奨ブラウザーとしていましたが、Microsoft社のInternet Explorerサポート終了に伴い、2021年9月7日をもってYahoo! JAPANにおけるInternet Explorer 11でのご利用を非推奨とさせていただきます。 この案内についてTwitterや記事などで触れていた

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で技術研修の設計・運営をしている酒井です。 ヤフーでは新入社員が配属後も業務で協力しあえるよう、同期同士の関係構築を研修のゴールのひとつとしています。しかし昨年は、新入社員の研修をフルオンラインで行ったために、そこに課題が残ってしまいました。今年は、いかに関係構築ができるよう改善できるか？　がポイントの1つでした。 この記事では、2021年4月から6月にかけて実施した2カ月半の研修での工夫を、カリキュラム内容と新入社員の声もまじえて紹介していきます。よかったら最後までお付き合いください！ 【目次】 狙いと課題 研修の流れとカリキュラム コミュニケーションのために工夫したこと 新入社員と運営が、ともに作る

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーの大岩です。 ヤフーが提供するYahoo!ショッピングやPayPayモールでは1年に1度大規模セールを行っています。 去年（2020/10/17～11/15）の対象期間は、超PayPay祭の開催に合わせて過去最大級の大規模セールとなっていました。特にセール最終日はグランドフィナーレと呼ばれ、ポイント還元率が年間を通して最大となる1年で最もお得な日となっていました。 集客の予測値は通常セールの数倍が見込まれており、セールの高負荷を乗り切るために、セール高負荷専用の対策チームが組まれ、そこを中心として高負荷対策を進めることになりました。 本記事では、大規模セールの高負荷に対して実際にどのような負荷対策を行ったかをサー

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で社内プラットフォームを開発・運用している本田です。普段は大阪オフィスで働いています。（新型コロナウイルスの影響でここ1年はずっと在宅ワークが続いておりますが） 私は2020年度後期の6カ月間、ヤフー大阪オフィスが運営しているオープンコラボイベント「Mix Leap」にスタッフとして初めて参加しました。そこで「フロントエンドのテストに関する勉強会」を企画から入って開催し、結果200人を超える参加応募がありました！ 今回はヤフーでのアソシエイトという働き方と、イベント企画から開催までを通した中での出来事や学んだことをお話しします。 ヤフーの技術コミュニティーとアソシエイト ヤフーでは東京、名古屋、大阪、福

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、映像サービスプロダクト本部の浜田（@narirow）です。 GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。 GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所の大神 渉です。 パスワードの代わりに生体認証などを使うシンプルで堅ろうな認証技術「FIDO」の標準化活動に携わっています。 2020年6月4日に、FIDOアライアンスから私が著者として関わった「White Paper: Multiple Authenticators for Reducing Account-Recovery Needs for FIDO-Enabled Consumer Accounts」というホワイトペーパー（FIDOのベストプラクティスや標準技術の活用に関してFIDOアライアンスが発行する文書のこと）が発行されました。 ヤフーのFIDOアライアンスでの標準化活動の一

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ショッピングでシステム開発を担当している石田と村上です。 Yahoo!ショッピングでは数億件にのぼる商品が日々更新されています。 今回はそれを支える出品ツールをマイクロサービス化して解決した課題と、複数のチームで開発する中で課題に感じたことを紹介します。 出品ツール（ストアエディタ）について マイクロサービス化の話に入る前に、まずはYahoo!ショッピングの出品ツール（ストアエディタ）について紹介します。 ストアエディタとは、出店ストアの方々がYahoo!ショッピングに出品するためのツールです。 出品データは以下の図にあるフローで連携されます。 商品情報には以下の情報が含まれており、入稿された値が正しいかど

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！　アジャイルコーチの荒瀬です。 ヤフー、および関連会社のアジャイル開発支援や研修を担当しています。 今回はヤフーのスクラム実践者の学習方法についてお話しします。 イベントや研修の中で、スクラムの勉強方法をいろいろな方から質問されることが多かったので、記事にするとより多くの人の役に立つのではないかと思い執筆することにしました。 また、せっかく書くのであれば、ヤフーの中にいるさまざまなスクラム実践者の話も交えると、経験年数別に、より参考になりそうな書籍、セミナーや研修を紹介できるのではないかと考え、ヤフーのスクラム経験者にも協力いただいています。 スクラムを始めた頃の自身のことを考えながら、こういう記事があるといいのにと思

今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、社内IaaS（Infrastructure as a Service）の構築・運用などを行っている奥野です。私たちのチームはヤフー内のIaaS基盤の開発及び運用を担当しています。 IaaSとはサーバーやストレージ、ネットワークといったインフラリソースを仮想的に定義し、ユーザーへ提供するサービスです。ヤフーのIaaS基盤は社内のユーザーやサービスに対して幅広く提供しており、ヤフーがエンドユーザーに対して公開している多くのサービス（Yahoo!ニュースや、ヤフオク!など）もこのIaaS基盤を利用しています。 本項では、「構築編」と「運用編」という前後編でこのヤフーのIaaS基盤についてご紹介します。 本記事では「運用編」と

これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション本部に所属している大津と申します。普段CDNとNode.jsサポートの仕事をしていて、第9代黒帯（ヤフー内のスキル任命制度／ネットワーク・セキュリティ）に任命していただいています。1 先日ヤフー社内で黒帯LT会が開催されました。お題目は事前に指定された「専門的技術力を極めるための極意」ということで、10分ほど話をしました。しかし、これまでみたいにセミナールームで大勢の前で話すわけではなく、最近代わり映えしない自宅デスクからのオンラインLTは、正直勝手が違いました。時間配分もミスって中途半端に終了です。と思いきや数日前、このYahoo! JAPAN Tech Blog担当者から「いやー、よかったですよ。そのネタ書

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN研究所 坪内と申します。今日は通知の話です。 プッシュ通知に気づかなかったり、タイミングが悪くてイラっとしてしまうことはないでしょうか？　最適なタイミングで通知する研究結果をご紹介します。 みなさんが目にする、ヤフーの広告の表示や、オススメの情報は、パーソナライズされています。つまり、過去のユーザーの行動履歴から「この人は釣りが趣味の人だ」と推測し、釣りに関するニュースや、釣竿のレコメンデーションをしています。これはプッシュ通知もしかりです。プッシュ通知は表示できる文字数や送信できる通知数に制限があります。ユーザーの興味などから、この人にはこの通知だ！　というのを送ります。ここまでは、広告やレコメンデーショ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！　Bonfire運営の春野です。 2020年2月5日（水）にヤフーのセミナールームにて「Bonfire Frontend #5」を開催しました！　そのイベントの様子をレポートします。Bonfire Frontendは、様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会です。 第5回となる今回のテーマは「テストと自動化」。 ヤフーからはトップページを担当している西村 宗親が登壇し、ゲストスピーカーとして株式会社ICSより森田 勝駿さん、株式会社ゆめみよりunotovive・おとべさんにお話しいただきました。どのようにテストを活用しているの

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、PayPayフリマバックエンド開発の三宅です。 今回、YJTC2019-shibuyaにてPayPayフリマのバックエンド設計について話して来ましたので内容を紹介したいと思います。 本記事ではセッション前半のバックエンド部分をメインに紹介させていただきます。よろしくおねがいします。 PayPayフリマとは PayPayフリマはフリマに特化したサービスとして10月7日にiOS版をリリースしました。PayPayの名前がつく通り、PayPayを利用してフリマの商品をかんたんに購入でき、買い手から価格の相談をできる機能などが特長です。 また、ヤフオク!とも連携し、ヤフオク!に出品されている固定価格商品の一部もユーザー体験に変わ