ヤフーで全社を横断して行ってきたWebパフォーマンス改善の取り組みを紹介します。以下の表の数値は、ヤフーのWebサービスと競合のWebサービスのパフォーマンス速度を比較したとき、ヤフーのWebサービスのほうが高速であるサービスの割合を示しています。プロジェクトの実施前は62％でしたが、実施後は83％まで改善することに成功しています。 ■ヤフーのサービスと、その競合に当たるサービスをベンチマークとして比較したとき、ヤフーのほうが速い割合 実施前 実施後 下図のサーチコンソール画面を見てください。Yahoo!映画におけるWebパフォーマンスが良好であることを示す「緑色」が大幅に増えています。Yahoo!知恵袋に至っては、改善が必要な「黄色」の割合をほぼ0まで減少させることができています。 このような結果を出すことができたプロジェクトで実践してきた内容を、3つに分けて紹介します。 実施した背景

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ヤフーでエンジニアをしている大石純平です。 ソフトバンクイノベンチャー という新規事業提案制度を利用して事業化を目指して新規事業を1年半ほどやっていたのですが、残念ながらクローズすることになりました。その経験を後続の方に共有し、失敗した気持ちを供養するために筆を取っています。 以前私が書いたこちらの記事 ヤフーで働きながら新規事業に挑戦している話 - Yahoo! JAPAN Tech Blog の後日譚です。 今回の記事では「新規事業で扱った技術のこと」、「なぜうまくいかなかったのか」についてお話しします。 ソフトバンクイノベンチャーについて ソフトバンクグループ社員なら誰でも新規事業を提案できます。アイデアの実現に

ヤフー株式会社は、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 こんにちは。アジャイルコーチの荒瀬中人です。 スクラムガイドが約3年ぶりに更新されました。スクラムガイドとはスクラムについて書かれている唯一無二のガイドです。 スクラムの取り組みの中で活用できると思い、最新版のスクラムガイドに沿ったスクラムのフレームワークの各要素や目的をシンプルにまとめた1枚の概要図にしました。 私自身簡単に見直せるとともにセミナーなどでスクラム説明する際に活用しています。このブログを読んでくれている方のお役に立てればと思い、今回公開することにしました。 こちらからダウンロードください スクラム概要図ダウンロード（PDF 332KB） さて、今回のスクラムガイドの変更点に“指示的な部分を削減(*1)”、“幅広い読

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

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！　Yahoo!ショッピングクーポンチームの小倉です。 前回のフロントエンド技術刷新の話とは打って変わり、今回は2019年に行ったバックエンド技術刷新の話です。 刷新前のシステムはノンフレームワークPHPのモノリスでしたが、現在は主にJava/Spring Bootでマイクロサービス化しています。今回は、その中でもっとも仕様が複雑だったマイクロサービスにおいて、ドメイン駆動設計(Domain Driven Design:DDD)を実践した話をご紹介します。 ショッピングクーポンの自由度を知る みなさんは、ショッピングの商品が割引になるクーポンをご存じでしょうか？　実は、クーポンには、ヤフーが予算をだして発行する「モールク

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。サイエンス統括本部でYahoo!ショッピングやPayPayモールのおすすめ機能（レコメンドシステム）の開発を担当している正沢です。 この記事では、別々に作られた複数の機械学習のバッチジョブ管理システムをApache Airflow（以降、Airflowと記載します）に集約して、運用負荷を低減した事例を簡単なシステム構成とともに紹介したいと思います。 ※ レコメンドシステムの開発ではプライバシーポリシーの範囲内で取得したデータを用いて行っています Yahoo!ショッピングのレコメンドとは？ Yahoo!ショッピングやPayPayモールには、ユーザーがなにか商品を見ている時に、他にも興味を持ってもらえそうな商品を推薦するレ

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

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

実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの

これまでは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担当者から「いやー、よかったですよ。そのネタ書

先日アスクル/一休/PayPay/ヤフー/ZOZOテクノロジーズで共同開催した、企業内ハッカソンイベント「Internal Hack Day」参加者からの寄稿記事を紹介します。 イベントについてはこちらをご覧ください。 こんにちは。ヤフー株式会社 新卒エンジニアの池田 です。 先日、開催された社内ハッカソンイベント「Internal Hack Day」に同期と一緒に参加してきました！　初めてハッカソンに参加するメンバーも多いなか、オンラインでアプリ開発に取り組みました。そのような状況で、何を作ったのか、どう工夫してハッカソンに取り組んだのかについてまとめました。 チーム構成 私たちは入社前から仲の良かったヤフーの2020新卒の4人で参加しました。全員エンジニアで各メンバーのスキルやバックグラウンドは以下のようになっています。たまたまですが、iOSと機械学習に精通したメンバーが多かったため、

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部のWangです。 データウェアハウス（以下DWH）という言葉になじみのない方は検索していただいたほうがよいかもしれません。 検索するのがめんどい、という方は、かみ砕いた表現ができなくて恐縮ですが、 基幹系システムから抽出したデータを目的をもって再構成し、 使用可能な状態に保管されたデータの集合体、とお考えください。 オークションでは、具体的には出品、入札、落札などのトランザクションデータや、 それをいろいろな単位で集計したデータなどが該当します。 ここでいう単位というのはたとえば、日ごと、週ごと、月ごとや、以前の記事でも紹介されている カテゴリといったものになります。 こういったデータは、運用、運営、

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ システム統括本部の長谷部/渋谷/佐藤/榎本です。 前者の3人はヤフーの通知機能を担当するチームで開発をしています。 詳しくはこちら 新型コロナウイルスの影響で多くの方がリモートワークで仕事をされていると思います。 今まで同じ場所でチームとして仕事をしていたのにリモートワークになったら、個別作業になり、協力しての仕事がしづらくなったという話をよく聞きます。 僕らのチームも皆さんと同じように、突然全員のリモートワークが開始されました。 ただ、僕らはこのような状況下になる前からモブプログラミング（以下モブプロ）を導入していたため、生産性を落とさず、チームとしての協力体制を変えずに開発を続けることができています。 僕らがこの

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！　ヤフーでデータベースエンジニアをしている松浦です。 インターネットサービスを作る上で、そのデータの保持・管理を担うデータベースは重要なソフトウエアコンポーネントですが、今回のTech Blogでは、ヤフーにおけるデータベース技術の研究開発についてのお話をします。 ヤフー社内では、さまざまなデータベースを運用していますが、そのデータベースを最新のハードウエアに対応させる研究開発を行っています。 具体的には、不揮発性メモリを有効に活用するMySQLのストレージエンジン「Leo」の開発に取り組んでいます。 本日は、Leoについて簡単にご紹介をします。 不揮発性メモリとは？ まず、前段として、Leoのお話をする前に、不揮発性

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

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの今河、田嶋です。 以前、「社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介」という記事で、社内のデザインシステム「SAYA」を紹介しました。 今回は、「SAYA」のリソースの1つである「UIkit」の作り方のtipsや運用方法について詳しく紹介します。 UIkitとは、デザインシステムで定義されているカラーやコンポーネントなどをUIアセットとして、1つのデザインファイルにまとめたものです。 世の中にはSketchやAdobe XD, Figmaなどを筆頭にさまざまなデザインツールがありますが、SAYAではSketchをメインに使っています。

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。サイエンス統括本部でレコメンデーションエンジンの開発を担当している吉井と小出です。 今回は、レコメンデーションと横断データ活用の事例として、各種データからユーザーの意図を抽出し、レコメンデーションの性能改善につなげる取り組みについてご紹介します。 ※レコメンデーションエンジンの開発はプライバシーポリシーの範囲内で取得したデータを用いて行っています レコメンデーションとは レコメンデーションは、サービスの利便性を向上させるために欠かせない技術となっています。 代表的なレコメンデーションの利用事例としては、 今閲覧しているアイテムに関連するアイテムを提示する あるアイテムと一緒に買われやすいアイテムを合わせ買いアイテムとし

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーのプロダクションネットワークの設計・構築・運用を担当している津秦です。 ヤフーではオンプレミスで大量に物理サーバーを導入し、社内向けプライベートクラウドや、データ分析基盤などに利用しております。もちろんそのサーバーを接続するためのネットワークも、自分たちで設計・構築・運用を行っております。 今回はデータセンター内ネットワークの中でも、最近取り入れているClosネットワークというものに着目して、ヤフーのデータセンターネットワークをご紹介したいと思います。 なお、大量に物理サーバーを導入する点では、昨年末に同じくインフラを担当する藤見から、サーバーの調達に関する取り組みを紹介しました。合わせて参照いただければ、ヤフーのインフラ部