ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
こんにちは、お久しぶりです。ウェブデベロップメント黒帯を務めております、HTMLやCSSやJavaScriptが大好きな岡部 和昌（@kzms2）と申します。 最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。 最近の活動 東大の坂本 大介先生と弊社の坂本 竜基、鈴木 健司（@kensuzuk）と一緒にFix & Slideというタッチデバイスにおける選択のUIについての論文を投稿し、UIST 2015やmobileHCI 2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。 上記の論文に関しましては、また別の機会でご紹介できたらと考えております。 それでは本題に入ります。 pointer-eventsについて 皆様はpointer-eventsというCSSプロパティーやその使い道を
今年のうちに対応したい、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のものから順に進めています。
ヤフーの画像配信システム（CDN）の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部プラットフォーム開発本部の新部（@osa2be）です。 CDNの運用を担当しています。 先日、知り合いの技術者と話していてヤフーのバックエンドがどうなっているのか興味があると聞かれましたので、社内にいくつかあるCDNのうち2つとIDCフロンティアのサービスをご紹介します。 はじめに ヤフーには多くのサービスが存在していますが、様々な理由により突発的にリクエストが増加することがあります。 そのようなリクエストに対応するためにサービスごとに大きな配信システムを持つことは、インフラの準備や運用工数など高いコストが必要になります。 そのため、共通のCDNを準備して各サービスのサーバ負荷を平滑化しています。 以前は、社外のC
HTTP/2 入門
ストリームによる多重化 2つ目の特徴は「ストリーム」です。従来のHTTPでは、リクエストとレスポンスの組を1つずつしか同時に送受信できないことが、パフォーマンス上のボトルネックになっています。この問題を改善するべくHTTP/1.1では新たにパイプラインが導入されましたが、一部のレスポンスに時間がかかるような場面でレスポンスが詰まってしまう問題などがあり、広く使われてはいません。そこで、HTTP/2では1つの接続上にストリームと呼ばれる仮想的な双方向シーケンスを作ることでこの問題に取り組んでいます。 1つの接続上に作られた複数のストリーム上では、複数のフレームを同時並行で転送できます。例えば、あるストリーム上ではリクエストにあたるフレームが送信中でも、別のストリームではレスポンスにあたるフレームを受信するといったことが可能になります。これにより、全体的なパフォーマンスが向上します。 ヘッダー
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
JSONP WebAPIを爆速で使いこなせるフレームワーク
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSONPに対応しているものがいくつかあります。ショッピング、オークション、YOLP、震災関連情報などです。 JSONPについて詳しくは過去記事を見てください。 他の形式に比べると、サーバーを準備しなくてもブラウザーだけで動かすことができ、古いブラウザーでも動くという、JSONPにしかないメリットがあります。夢のような形式！なのです。 …そのは
東京Node学園祭 2011 開催レポート
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。そろそろ種子島にロケットの打ち上げを見に行きたいエンジニアの石澤 (@summerwind) です。すっかり遅くなってしまいましたが、10月29日(土)に弊社11Fセミナールームで開催されました、アジア最大のNode.jsイベント「東京Node学園祭 2011」の開催報告をさせていただきます。今回のイベントは、Node.jsの開発者であるRyan Dahl氏と、Node.jsでWebSocketを扱うための有名なライブラリ「Socket.IO」の作者であるGuillermo Rauch氏を海外からお招きしての開催となりました。 Ryan Dahl氏による基調講演 イベントはまず、Ryan Dahl氏の基調講演からスター
ヤフーネットワーク10年
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、ヤフーでネットワーク設計に携わって早10年の松谷と申します。 今回はヤフーネットワーク10年と題し、ヤフーの重要配信インフラの一部であるネットワークについて、過去の課題と共にご紹介していきたいと思います。 2000年 この頃のヤフーでは検索やオークションといったサービスのウェブサーバーへ、大量のアクセスが集中し高負荷になる事が多々ありました。当時、ほとんどのサービスが皆さんご存じのDNS Round Robin（以下DNSRR）で運用していました。DNSRRは非常にシンプルで優れた機能ですが、サーバー障害時にはAレコードを手動で抜く作業が必要です。またDNSの512byte問題でAレコードを束ねるのが限界にな
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
サーバ節電について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R&D 統括本部 プラットフォーム開発本部の吉原 哲です。 東日本で発生した未曾有の震災の影響で、多くの発電施設が影響を受けており、政府及び電力会社から節電の協力が要請されています。一日本国民として、一技術者として、できることがないか検討してみました。あわせて現在までに把握している ヤフーにおける節電に対する取り組みをまとめましたので、節電を検討する際に役立てていただければと思います。 節電方法 一般的にサーバは稼働している際に一定の電力を消費し、CPU 使用率に比例して消費電力が上昇します。またサーバは動作しているときは常に発熱してます。データセンタの空調設備ではこれを取り除くため、サーバの熱量に比例して使用電力が増
Yahoo!知恵袋に質問や回答を投稿できるAPIを公開しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R&D統括本部の袋谷です。 今回、Yahoo!知恵袋に質問や回答を投稿できるAPIを公開しました。 例えば、質問投稿APIを利用して、 「猫は原付並みの速さで走れるって本当ですか？」などの質問を投稿すると、Yahoo!知恵袋に回答受付中の質問として表示されます。 質問には写真や地図（緯度経度）をつけて投稿できます。 また、投稿するカテゴリは指定がない場合は質問文から自動的にカテゴリ判定を行います。 ほかにも、投稿されたばかりの新着質問を表示するためのAPIや、質問の詳細を表示するためのAPIなどを公開しました。 各APIで、できることについて詳しくはこちらをご覧ください。 ・Yahoo!知恵袋のAPI一覧（提供終了）
Yahoo!地図 SDK for iPhone ＆ Androidを公開しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 プラットフォーム開発本部の入山です。 iPhoneアプリ、およびAndroidアプリを開発されている皆さま、ビッグニュースです！ 本日、YJDNにて、Yahoo!地図 SDK for iPhone、並びに、Yahoo!地図 SDK for Android（以下、合わせてYahoo!地図 SDK）を公開しました。 Yahoo!地図 SDKは、iPhoneではMapKitフレームワーク、Androidではcom.google.android.maps ライブラリに基本準拠した仕様となっておりますので、これから地図を使って開発したい方はもちろん、今まで地図を使って開発されていた方にも大変使用しやすくなっており
ヤフーにおけるWebサービスのアクセスコントロール
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術 セキュリティスペシャリストの戸田 薫です。 今回は、ヤフーにおけるWebサービスのアクセスコントロールについてご紹介します。 ヤフーでは、会社組織やWebサービスの運営面でいろいろなアクセスコントロールを行っています。 アクセスコントロールをする目的には、いくつも理由がありますが、たとえば、以下の理由が挙げられます。 お客様やパートナーの情報を守らなければなりません。 サーバの制御を奪われ、攻撃に利用されてはいけません。 システムの不正な利用を予防しなければなりません。 今回は、ヤフーのWebサービスにフォーカスして説明をします。 インターネットからヤフーへ
Silverlightのパフォーマンスを向上させるための10のヒント
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、制作本部の藤川です。 みなさん、Silverlightで何か作ってみようとしたことはありませんか。 Silverlight開発の経験のあるかたなら一度は悩んだことがあるのがパフォーマンスの問題ではないでしょうか。 Silverlightは新しい技術であり、パフォーマンスについては、前例や参考文献も少ないのが現状です。 そこで今回は、Silverlight開発で得た経験や知識から、パフォーマンスを向上するためにはどうすればいいか、ヒントをご提供できればと思います。 また、このページの最後に参考リンクを貼っていますのでこちらもあわせてご参照ください。 パフォーマンスを向上させることによってどんなメリットがあるでし
ヤフーにおけるパッケージ管理 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術の戸田 薫です。 個人的に自宅では、 FreeBSD でよく遊んでいて、FreeBSDのパッケージ管理には、portsnap、portupgrade を利用していますが、ヤフーでは独自の方法で行われます。 その背景としてヤフーには、平均15億以上のPVを支えるためやサービスの付加価値のために何万台ものサーバがあり、サービスやシステムごとに大規模なシステムを構成する必要があるため、一般的なパッケージ管理システムよりもより柔軟で効率的なパッケージ管理が必要となっています。 今回は、ヤフーにおけるパッケージの管理についてご紹介します。 ヤフーインストーラ ヤフーでは
iPadでHTML5でWebアプリを作ってみました。
こんばんは。LatLongLabの河合（@inuro）です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz（ゆびちず） 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字（大塚家具、とか紀伊國屋書店、とか）をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
Yahoo!検索プラグイン開発ツールを使った表示用プラグイン開発の流れ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、検索開発部の西条です。 Yahoo!検索では4月13日にYahoo!検索プラグイン開発ツールをリリースしました。これによりどなたでも自由にYahoo!検索プラグインを開発することで、検索結果をカスタマイズできるようになりました。今回は開発ツールの中から、検索結果の表示内容をカスタマイズする表示用プラグインの開発の流れについて説明していきます。 ■ 表示用プラグインの開発に必要なもの それでは早速、開発ツールにアクセスしてみましょう（提供終了）。開発に必要なものはYahoo! JAPAN IDのみですべての開発はWeb上でできますので、ほかに準備するものはありません。もし自分で管理しているサイトをお持ちであれば、メタデー
OpenID AXによるYahoo!プロフィール情報の取得
「mixiのOpenIDを使うとニックネームが取れるのにYahoo!だと何で取れないの？ムキー」って言う人もこれで安心ですね！ サンプル 前回はサンプルコードをPHPで作成しましたが、今回はPythonのWebフレームワークであるDjangoを用いて作成します。 Djangoを使ってOpenIDを扱うにはdjango-openidやDjango-Socialauthといったライブラリがありますが、今回はYahoo!Incが提供するライブラリ 2 を元に実際に動かせるサンプルを作成しました。以下からダウンロードできます。 ZIPファイルダウンロード(26KB)（提供終了） 動かしてみる 以下のサンプルは以下のような環境で動作確認を行いました。 Python2.6.5 Django1.1 SQLite3 これらのインストールは完了しているものとして今回は話を進めさせていただきます。 サンプルの
OAuthの仕様について 〜署名？それっておいしいの？〜
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、IDプラットフォーム技術の近藤裕介です。 OAuthを使ったアプリを実装している方の多くは特にパラメータの署名まわりの部分で少し詰まることが多いように見受けられます。署名はOAuthのキモとなる仕組みなので今回はこれに関する記事を書いてみようと思います。 署名の仕組み OAuth（以後OAuth Core）の仕様では、一般的な署名の仕組みを使ってリクエストの内容の改ざんや送信者のなりすましをされにくくしています。いまのところ以下の３つの署名方式に対応しています。 HMAC-SHA1 Service Provider(以後SP)側でConsumerkeyとSecret(秘密鍵)のペアをConsumerに発行し、APIリク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
