ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、プラットフォームエンジニアの中山です。 Web サイトにはしばしば 3rd-party JavaScript を導入することがあります。たとえば Web 解析ツール、いいねボタンのような SNS 連携機能、広告掲載や効果測定目的のコードスニペットなどは多くの Web サイトで導入されています。 その一方で 3rd-party JavaScript は Web サイトを閲覧するユーザーに対して悪影響を及ぼしかねないため、導入とあわせたリスク対策も必要となります。 そこで、今回は Content Security Policy（以降 CSP）を活用した 3rd-party JavaScript のリスク対策について、ヤフー

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11/12代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）と、Yahoo!ニュースのエンジニアの喜楽（@gladenjoy）です。今回は、ヤフーで対応をすすめてきた、BFCacheの有効化にむけた取り組みについてお話しします。BFCacheとはそもそも何か、有効化のボトルネックには何があるか、そして調査方法などの具体的な手法などを交えてご紹介します。 ヤフーではこれまでスムーズなユーザー体験を実現するべく、高速にページを表示できるBFCache技術の検証と、BFCacheの有効化率を上げる取り組みを行ってきました。その結果、Yahoo!ニュースでの検証では、PVが+2％向上、広告

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部 クラウドプラットフォーム本部の早川です。 私が所属する部署では、ヤフー社内のサービス開発者向けのプライベートクラウドを開発、運用しています。昨年の後半頃から「Platform Engineering」という言葉が聞かれるようになってきていますが、私たちは以前から、その理念に近い取り組みを行っています。 本記事では、「Platform Engineering」の概要と、私たちがKubernetesを活用して実現しているプラットフォーム開発、運用の取り組みについて詳しく紹介します。私たちの経験と知見が、これからプラットフォームの開発に取り組む皆様の一助になれば幸いです。 Platform Engineer

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所でインタラクション分野の研究をしている山中です。 UI操作のユーザ実験では通常、スピードと正確さのバランスをとって操作してもらいます。が、これをわざと雑に操作してもらったり、逆にゆっくり操作してもらうことで、より多くの知見を引き出せるようになります。 この記事では、マウスクリックやタッチの操作支援手法をユーザ実験で評価するとき、より多くの知見を得られるようにする実験方法論について解説します（国内会議インタラクション2023で発表した研究成果です [1]）。 従来のユーザ実験はバランスよくニュートラルにと誘導 ユーザインタフェース（UI）の研究分野では、マウスでのクリック操作や、スマートフォ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めに こんにちは、Yahoo!知恵袋でシステム開発を担当している村上です。 Yahoo!知恵袋（以下、知恵袋）では利用者の皆さまに快適なサービス体験をしていただくため、日々改善が行われています。しかし、サービスができる事が増える度に、コードベースや連携先が増えていくのは常であり、その変化の影響でシステムトラブルが起きることもあります。 今回は、拡張されていくシステム構成という視点で、万が一のシステムトラブルが発生した時に備えて、被害を最小限に食い止める方法を紹介します。 背景 知恵袋では、以下のようなサービス構成を取っています。 フロントエンドシステムは基本的にAPIを通じて複数のバックエンドシステムと疎通することでサービスを提

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。サイエンス統括本部でデータ分析による社内サービスの課題解決支援をしている関口です。 ヤフーではたくさんのABテスト（※1）が常に行われており、サービス改善に活かされています。しかしながら実際には、さまざまな理由からABテストができないことがよくあります。本記事では、そのような場合にどのようにして施策の効果を評価・推定するかについて、具体的なケースからアイデアを紹介していきます。 なお今回はYahoo!ショッピングを題材にしたケースばかりですが、アイデア自体は汎用的なものとなっています。 ※1： ABテストはウェブサービス上のUI改善、機械学習モデル改善、機能追加etc.といったさまざまな施策が、KPIにどれくらいのイン

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。MS統括本部の宋です。自然言語処理分野において、GPT-3やChatGPTなどの大規模言語モデルが次々開発され自然な文書が生成できることで話題になっています。私が所属するデータインテリジェンス部では大規模言語モデルを使った広告文の自動生成に取り組んでいます。本記事では広告文自動生成の仕組みと業務で活用できるように工夫した点についてお話しします。 取り組みの背景 検索連動広告（検索したキーワードに連動して表示される広告）を利用している広告主はユーザーが興味を持ってくれる広告文を日々考え、改善しています。私たちのチームは広告効果の改善を目的としたソリューションをData Marketing Solution（DMS）として

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPANアプリのトップページの上部には、編集者によってピックアップされた「トピックス」と呼ばれるトップニュースが6本並んでいます。編集者が選定した質の高い記事を提供していますが、必ずしも各ユーザーの興味に適した記事が表示されているとは限りません。そのため、スクロールすると、記事推薦システムによって各ユーザーの好みを考慮した記事が自動で表示される仕組みになっています。 ニュース記事の推薦で特に重要なのは「即時性」です。ニュース記事では、情報が更新されると古い記事は役に立ちません。そのため、入稿された記事がいち早く推薦対象になることが重要になります。 たとえば、事前にユーザーごとの推薦記事一覧（レコメンドリスト）を作成

本記事は2022年11月に開催した「Tech-Verse 2022」で発表したセッションを要約したものです。アーカイブ動画を文末に掲載しています。質疑応答の様子も収録されていますのでぜひご覧ください。 ヤフーショッピングのフロントエンドを支える共通配信技術について、「共通UI配信サービス誕生までの経緯」と「共通UI配信サービスを支える技術」の2部構成で紹介します。 共通UI配信サービス誕生までの経緯 ヤフーショッピングには、トップ、検索、商品詳細、カート、レビュー、問い合わせ、製品、キャンペーン、ランキング、注文履歴などさまざまな画面があり、それに合わせてさまざまな開発チームが存在しています。 各チームでアプリケーションは独立していて、それぞれリンクで接続されています。共通UIのHTMLもアプリケーションが異なれば、それぞれに記述されます。同じアプリケーション内で共通UIを実装するのは簡単

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告にてデータアナリストをしている國吉です。 ヤフーでは、「Yahoo!広告」という広告出稿サービスを提供しており、それに付随して、広告を出稿するクライアントを支援するためのソリューションを提供しています。本記事では、私が開発に携わっている「Yahoo! JAPAN 予測ファネル」（以下、予測ファネル）という広告配信ソリューションについてご紹介します。予測ファネルを開発するにあたっては、ビッグデータを用いて機械学習モデルの作成と推論をするため以下の課題がありました。 学習時のメモリリソースの確保、推論時間の短縮が必要 ソリューションのリリース後には数多くのモデルが作成されモデルの管理が煩雑になる 本記事では

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

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフートラベルと宿泊予約サイトの一休.comにおいて、システムリニューアルを行い統合したプロジェクトについて紹介します。 これはヤフートラベルと一休.comのシステムを統合した後の画面です。左がヤフートラベル、右は一休.comです。サイトは2つですが、バックエンドもフロントエンドも、1つのシステムで2つのブランドのサービスを配信しています。そのため、一見するとデザインが似ています。 ですが、細かいところをよく見ると、ホテルの表示カードのデザインは横幅と縦幅が違いますし、当然ロゴとかバナー表示するコンテンツも異なります。ヤフートラベルの方はYahoo! JAPAN IDでログインでき、一休.comの方は一休.comのIDでログインな

みなさまこんにちは。ヤフーでデータソリューション事業のUI/UXデザインを担当している、横内です。 2022年11月に弊社が運用するデータ可視化ソフトウェアのDS.INSIGHTで人流データを分析できるPlace機能を大幅アップデートしました。その際使用したOOUIという設計手法から得られた学びをプロジェクトの実例を交えながらご紹介します。 OOUIとは そもそもOOUIとは何者でしょうか。OOUIとは、Object Oriented User Interfaceの略語で、通称オブジェクト指向UIと呼ばれています。 オブジェクトとはその名の通り「役割を持ったモノ」を指す言葉です。例えばお店で買うクロワッサンや、ECサイトでカゴに入れる衣服など、その場の実体あるなしにかかわらず、私たちがモノとして認識できる対象のことを指しています。 この、ユーザーが認識できるモノ（オブジェクト）を起点にUI

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ヤフーで自然言語処理の研究開発をしている颯々野です。ヤフーでは、Yahoo!デベロッパーネットワークでテキスト解析Web APIを公開・提供しています。まず社内向けAPI、次いでこの公開APIと段階的に新インターフェースに移行し、2022年12月からは全てJSON-RPC 2.0に基づくものになりました。 2年前に言語処理APIのインターフェーズ共通化プロジェクト「Azuki」を進めていることを紹介しました。今回は、このプロジェクトがどうなったのかと、共通化によって得られたメリットなどをご紹介します。 インターフェース共通化を推進するプロジェクト「Azuki」 まず簡単にどんなものだったか振り返っておきます。詳細は前回

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ スクラムマスターの中原（PayPayカード株式会社）、岩井（ヤフー株式会社）、そしてアジャイルコーチの荒瀬（ヤフー株式会社）です。 私たちは、PayPayカードの会員サービス開発を大規模スクラムで進めています。PayPayカードとは、クレジットカード加盟店で通常のクレジットカード決済ができることに加え、PayPayアプリと併用することによってPayPay加盟店であと払い決済が利用できるサービスです。「圧倒的No.1のサービスをすべてのお客さまに！」というビジョンを掲げており、ユーザーファーストにサービスを提供することを心掛けています。 より早く質の高いプロダクトをお客様に提供するために、ヤフーとPayPayカードの2

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告SDKチームの高木です。 みなさんが開発するプロダクトでは、しっかりとテストを書いているでしょうか？自信を持ってYESと言えるプロダクトもあれば、そうではないプロダクトもあるかと思います。私が所属する広告SDKチームでは、自動テストを書くモチベーションは強くある一方で、実装はあまりされていないという状況でした。 本記事では、そのようなチームにテストを書く文化が根付いていった過程についてお話しします。 Yahoo!広告SDKとは Yahoo!広告SDKとは、Yahoo!広告のディスプレイ広告をネイティブアプリへ簡単に表示できる、Yahoo!サービス内およびパートナーネットワークのアプリへ配布しているSDK

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayフリマのデザイナー加藤です。 PayPayフリマはCtoCのフリマサービスです。PayPayで簡単・安心に売り買いできるだけでなく、ユーザー同士が交流・情報交換できる投稿機能や新たな製品情報をユーザー自身が登録できる機能といった他のサービスにはない独自の機能も提供しています。 今回はインターフェースデザインツールFigmaの活用でどのようにUIコンポーネントの管理保守を効率化したのか、PayPayフリマにおけるプロダクト内デザインデータ運用の工夫をご紹介します。 旧Figma運用フローの課題 現在PayPayフリマでは、プロダクト内の画面UIやコンポーネントのデザインデータを、近年リリースされたFigmaの

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで画像処理エンジニアをしている吉橋です。この記事ではヤフーのさまざまなサービスで使われている独自の画像文字認識（OCR）技術と、特に最近のPayPayフリマ「本棚一括持ち物追加機能」での活用事例をご紹介します。 画像文字認識とは 皆さん、ウェブサイトを見ていて「このキーワード気になるな……よしコピーしてヤフーで検索してみよう！　と思ったらこれ画像じゃん、コピーできないよ……」なんて困ったことはありませんか？ ウェブで私たちが目にする情報は“テキスト”と“画像”の2種類が主なものです。 テキスト： 文字列としての情報を保持したデータであり、コピーやウェブ検索に利用したり解析したり、容易に活用できます。 画像データ：

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告 ディスプレイ広告エンジニアの下村です。広告配信システムの開発を担当しています。 ヤフーの広告システムは巨大なトラフィックを捌いていることやステークホルダーが多いことから、小さなバグも大きな事故になり得ます。加えて、目まぐるしく変わる法律やステークホルダーの方々からいただいた要望への対応を迅速に行うため、日々の開発速度も高い水準が求められます。しかし、以前は一度のPull Request（以下PR）に含まれる変更量が多く、レビューの時間が長引いて機能開発に時間がかかったり、大規模なコンフリクトが発生してバグが混入しやすい状態になっていました。そこで、継続的インテーグレションのプラクティスの適用を目指した