ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
ヤフー式新人研修 〜 フルオンラインでエンジニア研修を作った話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で技術研修の設計・運営をしている酒井です。 ヤフーでは新入社員が配属後も業務で協力しあえるよう、同期同士の関係構築を研修のゴールのひとつとしています。しかし昨年は、新入社員の研修をフルオンラインで行ったために、そこに課題が残ってしまいました。今年は、いかに関係構築ができるよう改善できるか？ がポイントの1つでした。 この記事では、2021年4月から6月にかけて実施した2カ月半の研修での工夫を、カリキュラム内容と新入社員の声もまじえて紹介していきます。よかったら最後までお付き合いください！ 【目次】 狙いと課題 研修の流れとカリキュラム コミュニケーションのために工夫したこと 新入社員と運営が、ともに作る
表示速度を飛躍的に向上させる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 サイトオペレーション本部に所属している大津と申します。普段CDNとNode.jsサポートの仕事をしていて、第9代黒帯（ヤフー内のスキル任命制度／ネットワーク・セキュリティ）に任命していただいています。1 先日ヤフー社内で黒帯LT会が開催されました。お題目は事前に指定された「専門的技術力を極めるための極意」ということで、10分ほど話をしました。しかし、これまでみたいにセミナールームで大勢の前で話すわけではなく、最近代わり映えしない自宅デスクからのオンラインLTは、正直勝手が違いました。時間配分もミスって中途半端に終了です。と思いきや数日前、このYahoo! JAPAN Tech Blog担当者から「いやー、よかったですよ。そのネタ書
ヤフーにおけるJava事情を軽くご紹介します
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。第8代黒帯〜プログラミング言語（Java）〜 の森下と申します。 ヤフーでは、最近はJavaで書かれたさまざまなOSSの利用や貢献がされていたり、サービス開発でもJavaが使われることが増えてきているなど、社内でのJava利用が拡大してきています。 その背景には、ヤフーにおける標準言語の一つとしてJavaが位置付けられていることや、システムが大規模になるにつれて静的型付けやコンパイルなどできっちり作れるという利点が活きてくる点、また社内で利用できるPaaS環境（Pivotal Cloud Foundry）でもSpring Bootベースのアプリケーションがサポートされていて親和性があるといったことからだと思い
ヤフーのクリエイターが読んでいる技術・デザイン書 〜 技術活動費用補助制度のデータから見る興味関心
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Developer Relations アドボケイトの山本です。 ヤフーにはエンジニアやデザイナーといったクリエイターの活動を支援する制度「My Polaris」があり、その中の1つにクリエイターが常に自身の技術力向上を図れるよう学習活動を支援するための「技術活動費用補助制度」というものがあります。 本記事ではこの制度の紹介と、この制度の活用状況のデータを集計してヤフーのクリエイターの興味関心を可視化します。 技術活動費用補助制度とは？ 冒頭でも触れましたが、エンジニアやデザイナーといったクリエイターの学習活動を支援する制度で、半年間で6万円を上限に、書籍、アプリ、デバイスなどの購入、セミナーや勉強会への参加、英語学習
データ分析を支える可視化ツールの作り方 〜 ヤフーのデータで紹介します
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめての○○特集3本目の記事です。 はじめまして。ヤフーで社内向けのデータ可視化ツールの開発を担当しているタムラです。 本記事では、ヤフーのデータ分析を支える可視化ツールについて紹介します。「若手エンジニアに贈りたい、はじめての○○特集」、ということなので、なるべくわかりやすく書いたつもりですが、いかんせんテーマがニッチなので、はたして日本に同じような仕事をしている人が何人いるのか、どれくらいの人に役立てる内容なのか、少し不安です。しかし、記事を通して、はじめて分析業務をされる方や、可視化ツールに限らず、はじめてプロダクト開発をされる方にも、少しは生かせるものになっていれば幸いです。 データ可視化ツールってなに？ データ可視化ツ
守れサイバーセキュリティ～SOCとは？ ヤフーにおけるその役割
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして。 ヤフーSOCの中村です。 みなさんは、SOCという言葉をご存じでしょうか？ サイバーセキュリティの重要性が強く求められるようになった近年、このSOCという言葉を耳にすることも多くなっているように思います。 その一方で「SOCとは何か」「具体的に何をしているのか」といった部分は、まだあまり知られていないように感じています。 今回は「SOCとは何か」、そして「ヤフーSOCでは具体的にどんな活動をしているのか」を少しでもみなさんに知ってもらえるよう、ご紹介したいと思います。 SOCとは ヤフーSOCの話をする前に、一般的なSOCについてお話ししましょう。 「Security Operation Center」の頭文字を取
脆弱性に対するヤフーの取り組みについて
ヤフー株式会社は、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では、情報セキュリティインシデントが発生したときだけでは
ありがとう、MYM 安らかに眠れ - Yahoo! JAPAN Tech Blog
特筆すべきはボット数かもしれません。ボットは何らかの操作を自動で行うために作られたプログラムで動作するアカウントなのですが、なんとそのボットの数（14,000）がユーザーの数（18,000）に迫りつつあります。MYMのボットは通常ひとつの部屋にリンクしているため、おそらく同じような機能を持ったボットが大多数だと思われますが、ボット数 14,000 はインパクトのある数字ですね。 興味深い部屋の数々 MYMはこの8年間で計150,000の部屋が生み出されました。業務系・技術系・雑談系を問わず、異彩を放つ部屋は数え切れないほどあります。ここでは数多くの部屋の中でも、ひときわ特徴的な部屋を紹介してみようと思います。 もちろんすべての部屋を把握しているわけではないため、あくまで把握している範囲内での紹介となることをご了承ください。 トピックス編集 Yahoo!ニュース トピックスの編集業務に活用さ
IPv6でのライブ配信とリクエスト傾向 〜 選抜高校野球大会の配信事例 #IPv6
こんにちは、Yahoo! JAPANのCDNを運用している佐藤です。 6月にプレスリリースが掲載されましたが、3月23日から4月3日にかけて第91回選抜高等学校野球大会が行われ、Yahoo! JAPANでは全試合のライブ配信をしていました。今回のライブ配信では弊社初の試みとしてIPv6を用いた動画配信を行いましたので、ライブ配信の構成やIPv6も含めたリクエスト傾向について紹介します。 ライブ配信に向けての準備 試合日程は3月23日から4月3日の11日間でしたが、ライブ配信は3月14日のキャプテントークや3月15日の組み合わせ抽選会でも行っていました。コンテンツの配信周りはCDNチームを始めとしたインフラ部門が担当しており、主にCDNチームが担当した内容は下記の通りです。 メディア部署との調整 新しいCDN環境の構築 高負荷時の負荷分散対策の準備 配信に向けてのCDN環境は、現在トップペー
Yahoo! JAPANトップで見るウェブデザインの歴史
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年 アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
Go 言語のプロファイル機能とネットワークコネクションにまつわるトラブルシューティング
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog インフラエンジニア見習いの森本です。これまで数年ほどサーバーサイドエンジニアとして開発ばかりをしてきた人が最近インフラエンジニアになりました。 3月末に開催された Go Conference 2017 Spring で開発チームの後藤から弊社で開発・運用している AWS S3 互換の分散オブジェクトストレージ Dragon についての発表がありました。 Goでヤフーの分散オブジェクトストレージを作った話 私は Dragon の運用を担うチームに所属しており、本稿ではその業務の中で発生したトラブルシューティングについて紹介したいと思います。 分散オブジェクトストレージ Dragon で発生していた課題 Dragon で gorout
Yahoo! JAPAN社内ISUCON「Y!SUCON」の問題をGitHubに公開しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Y!SUCON運営チームです。 前回に引き続き、2回目の社内ISUCONを開催いたしました。 前回はpixiv社内ISUCONの問題をお借りさせていただきましたが、今回はオリジナル問題を作成し、名前も「Y!SUCON」にリニューアルしました。 作成した問題、ベンチマーカー、ポータルサイトのソースコード及びそのプロビジョニングをGitHubに公開しております。ぜひご活用ください。 https://github.com/yahoojapan/yisucon 問題を作ってみて 今回初めてISUCONの問題を作ってみて、問題・ベンチマーカーを作る難しさを思い知りました。 ベンチマーカーのシナリオが不足していたり推測されやすいも
ヤフーの画像配信システム（CDN）の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部プラットフォーム開発本部の新部（@osa2be）です。 CDNの運用を担当しています。 先日、知り合いの技術者と話していてヤフーのバックエンドがどうなっているのか興味があると聞かれましたので、社内にいくつかあるCDNのうち2つとIDCフロンティアのサービスをご紹介します。 はじめに ヤフーには多くのサービスが存在していますが、様々な理由により突発的にリクエストが増加することがあります。 そのようなリクエストに対応するためにサービスごとに大きな配信システムを持つことは、インフラの準備や運用工数など高いコストが必要になります。 そのため、共通のCDNを準備して各サービスのサーバ負荷を平滑化しています。 以前は、社外のC
分散システム処理モデルに関する動向について（MapReduceからBorgまで）
詳細については後述しますが、MapReduceの処理モデルは、上記の通り各区分ごとにそれぞれ単純化（限定）されたモデルであったと言えます。 また、MapReduceの関数プログラミングおよびグラフ的な特徴も合わせて以下に整理してみます。 関数プログラミング的な特徴 MapおよびReduceフェーズは、それぞれ関数型プログラミングのMapおよびReduce処理をモデル化したものです。MapReduceは、参照透過性がある純粋な関数処理と言えます。参照透過性とは入力により出力が一意に決まる性質のことです。言い換えればMapReduceの処理は、大域などの処理に影響する外部の環境は持たず、内部的にも静的な一時変数などの状態も持たないことを意味します。 純粋な関数処理は複数の処理が同時に実行されても他の並列に動作している処理の状態には左右されないため、この参照透過性は並列化に向いている性質がありま
分散システムの一貫性に関する動向について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部アーキテクト室 今野です。 昨年は、Twitter,Facebookを始めとするクラウド各社で新規の分散システム開発のプロジェクトが相次いで発表された年でした。これらの新しい分散システムを開発する理由や、その背景にあるものは何なのでしょうか？ 今回は、昨年末に開催された高信頼性分散システム系の国際学会であるSRDS 2014[1]の発表内容に関連する論文の話題も踏まえて、昨今のクラウド各社の分散システムの動向について整理してみます。 分散システムにおけるクラウド各社の動向 近年の分散データベースの世界では、AmazonのDynamo[2]やFacebookのCassandra[3]などを代表とする結果整合性（Eve
細かすぎて伝わらないSSL/TLS
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「細かいと言うより長いよね」 はじめに こんにちは。ATS の脆弱性を発見した小柴さんや ATS に HTTP/2 の実装を行っている大久保さんと同じチームの一年目、匿名社員M さんからいじられている新人です。今回ありがたい事に、こういったすごい方々を含めモヒカン諸先輩方より「何か書かないの？」「いつ書くの？」という数々のプレッシャーお言葉をいただきました。 というわけで、SSL/TLS の Session 再開機能に関して書いていこうかと思います。 SSL/TLS は機密性、完全性そして真正性に対して安全な通信を行うための仕組みです。しかし、この仕組みは暗号技術を多用し特に接続において複雑なプロトコルを用い、Client, Se
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
