ブラウザの戻る/進むを高速に！ヤフーにおけるBFCache有効化に向けた取り組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11/12代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）と、Yahoo!ニュースのエンジニアの喜楽（@gladenjoy）です。今回は、ヤフーで対応をすすめてきた、BFCacheの有効化にむけた取り組みについてお話しします。BFCacheとはそもそも何か、有効化のボトルネックには何があるか、そして調査方法などの具体的な手法などを交えてご紹介します。 ヤフーではこれまでスムーズなユーザー体験を実現するべく、高速にページを表示できるBFCache技術の検証と、BFCacheの有効化率を上げる取り組みを行ってきました。その結果、Yahoo!ニュースでの検証では、PVが+2％向上、広告
ヤフーのIE11 サポート終了の進め方
ヤフー株式会社は、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や記事などで触れていた
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
OAuth2.0拡張仕様のPKCE実装紹介 〜 Yahoo! ID連携に導入しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。 サービス統括本部の都筑(@kazuki229_dev)です。 新卒4年目で普段はYahoo! ID連携のサーバーサイド、iOSのSDKの開発などを担当しています。 Yahoo! ID連携とは、Yahoo! JAPANのシングルサインオンやユーザーの属性情報を取得するID連携の仕組みです。 Yahoo! ID連携とは このYahoo! ID連携ではPKCEというOAuth2.0の拡張仕様を実装しました。 https://developer.yahoo.co.jp/changelog/2019-12-12-yconnect.html そこで、PKCEの基本的な話と、実装の際に調査したことをまとめてみました。 PKCEとは
ドメイン駆動設計で保守性をあげたリニューアル事例 〜 ショッピングクーポンの設計紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ Yahoo!ショッピングクーポンチームの小倉です。 前回のフロントエンド技術刷新の話とは打って変わり、今回は2019年に行ったバックエンド技術刷新の話です。 刷新前のシステムはノンフレームワークPHPのモノリスでしたが、現在は主にJava/Spring Bootでマイクロサービス化しています。今回は、その中でもっとも仕様が複雑だったマイクロサービスにおいて、ドメイン駆動設計(Domain Driven Design:DDD)を実践した話をご紹介します。 ショッピングクーポンの自由度を知る みなさんは、ショッピングの商品が割引になるクーポンをご存じでしょうか？ 実は、クーポンには、ヤフーが予算をだして発行する「モールク
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまでは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 こんにちは、YJ-CSIRTの中村です。 皆さんはCSIRT（シーサート/Computer Security Incident Response Team）という組織名を耳にしたことがありますか。 CSIRTは、組織内の情報セキュリティインシデントを専門に扱う、インシデント対応チームです。 CSIRTについては、7/11のtechblog記事「守れサイバーセキュリティ～SOCとは？ ヤフーにおけるその役割」でも紹介されています。 こちらの記事では、CSIRTと関わりが深いSOCについての説明をしていますので、ぜひご一読ください。 ヤフーの組織内CSIRTであるYJ-CSIRTでは、情報セキュリティインシデントが発生したときだけでは
SXG（Signed HTTP Exchanges）始めました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション本部でCDNの仕事をしている大津と申します。他にも社内セキュリティガイドラインの作成や、Node.jsのサポートもしています。 今週、4月17・18日に東京で開催するAMP Conf 2019 において、「Maximize Yahoo! JAPAN 's UX with AMP and Signed HTTP Exchanges」（AMPとSigned HTTP Exchangesを使ってYahoo! JAPANのUXを最大化する）という発表を行います。プレゼンでは、最初に駒田がYahoo! JAPAN全体とYahoo!トラベルの取り組みについて、次に私がSXGシステムの技術解説、最後に宗像がYahoo!検索の
守れサイバーセキュリティ～SOCとは？ ヤフーにおけるその役割
はじめまして。 ヤフーSOCの中村です。 みなさんは、SOCという言葉をご存じでしょうか？ サイバーセキュリティの重要性が強く求められるようになった近年、このSOCという言葉を耳にすることも多くなっているように思います。 その一方で「SOCとは何か」「具体的に何をしているのか」といった部分は、まだあまり知られていないように感じています。 今回は「SOCとは何か」、そして「ヤフーSOCでは具体的にどんな活動をしているのか」を少しでもみなさんに知ってもらえるよう、ご紹介したいと思います。 SOCとは ヤフーSOCの話をする前に、一般的なSOCについてお話ししましょう。 「Security Operation Center」の頭文字を取って、SOC（ソック）と読みます。 近頃、その重要性が注目され、さまざまな企業で設置・構築が進められているセキュリティ組織の1つです。 なぜSOCは注目されている
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
Yahoo! JAPANでの生体認証の取り組み（FIDO2サーバーの仕組みについて）
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 目次 はじめに Yahoo! JAPANが対応したWebAuthnとは WebAuthnとFIDO認証について WebAuthnの処理について 登録と認証の流れ 削除機能 ブラウザーでの実装 navigator.credentials.create()について navigator.credentials.get()について サーバーでの実装 登録（公開鍵の登録） /attestation/optionsの処理 リクエストパラメーター navigator.credentials.create()の引数に必要な値 /attestation/resultの処理 CBORについて attestationObjectについて 公開鍵を作成す
サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
highWaterMarkから探るNode.jsのStreamの仕組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Node.js 言語サポートチームの柄澤史也 (@fmy) です。 12/6のエントリ「今年のうちに対応したい、Node.jsのBufferに潜む危険性」に引き続き、社内での Node.js Core API 勉強会の内容を紹介します。 1. Stream API の重要性 Node.js 界隈の有名な言葉に次のようなものがあります。 「Stream を制するものは、 Node.js を制す」 Node.js 最大の特徴は何と言っても非同期 I/O です。 そしてその非同期 I/O の実装こそが stream モジュールなのです。 HTTP サーバのリクエスト・レスポンス gulp のようなタスクランナー TCP ソケ
高速ファイル/メッセージ転送 K2HFTFUSE の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Technical Yahoo の中谷です。 今回は、Yahoo! JAPANからオープンソースとして公開した高速ファイル/メッセージ転送システムの K2HFTFUSE の紹介をします。 K2HFTFUSEは、確実で高速なファイル/メッセージ転送を低コストで実現するために開発されたシステムです。 K2HFTFUSE（K2Hash File Transaction by FUSE-based file system）とは、FUSE（Filesystem in Userspace）によるユーザースペースでのマウント機能を利用したファイル/メッセージ転送システムです。 K2HFTFUSEは、仮想ファイルシステムを提供し、マウ
今年のうちに対応したい、Node.jsのBufferに潜む危険性
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Node.js言語サポートチームの加藤佑典です。 普段はYahoo!ブックストアの開発/運用を主にしています。 先日、同じチームの柄澤がNode学園祭 2016の発表でも少し触れていますが、今期から社内でNode.jsの言語サポートチームが発足しました。 本日はそのチームメンバー+有志で行っているNode.js Core APIの勉強会で話題になった、Buffer APIの変更点について触れたいと思います。 本記事はNode.js v6.9.1 Documentationをベースに書いています。 1. はじめに 勉強会は、以下のようにAPIをカテゴリ分けし、基礎的なAPIであるカテゴリー1のものから順に進めています。
Obj-C → Swift コンバータをオープンソースで公開しました！
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog どうも、ヤフーの佐野（ @taketo1024 ）です。先日引っ越しをしまして、張り切って自分でタンスを運んだりして今とても筋肉痛です。 皆さんは Objective-C から Swift への移行は進んでいますか？弊社ではまだ Obj-C で書かれているプロジェクトは多くあります。世に出ている iOS アプリも多くはまだ Obj-C で作られているんじゃないかと思います。 Swift もオープンソース化され、この先その進化のスピードはさらに増してくるはずです。そこでチーム内で開発を進めていた Obj-C → Swift コンバータ を大幅に改良しオープンソースで公開することにしました！この記事ではその導入と活用の方法を説明します
次世代認証プロトコルFIDOの動向
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、近藤裕介と申します。 みなさま、Yahoo! JAPANにログインしてサービス利用していますでしょうか？ Yahoo! JAPANに限らずログインが必要なウェブサービスやアプリケーションを利用して、ヘビーユーザーになってくると他人に見られたくないデータが増えたりなりすましされて困るようになりますよね。そうならないための対策としてパスワードを長く難しくしたり、2要素認証を設定したりする必要がありますが利便性が下がってしまいます。 そんなパスワードにまつわる課題を解決する、FIDOアライアンスの策定している認証プロトコルであるU2FとUAFの仕様が昨年12月に正式公開され、2015年にはいくつものサービスで採用さ
JavaScript で実装してみる Deep Learning
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、安藤義裕と申します。ヤフー株式会社データ＆サイエンスソリューション統括本部ソリューション本部でプログラマーをしております。趣味はカミさんの手料理です。 機械学習で用いられるアルゴリズムの一つにニューラルネットワークがあります。ニューラルネットワークは脳細胞の働きにヒントを得て考えられたものです。今回扱う多層ニューラルネットワークはニューラルネットワークの中間層と呼ばれる部分を多層化したものです。近年話題に上ることの多い Deep Learning ではこの多層ニューラルネットワークが利用されています。 多層ニューラルネットワークは用途に応じて異なるネットワークが利用されます。画像処理では畳込みニューラルネッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
