ブラウザバック時の表示を最適化する 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」の紹介とともに、フロントエンド部分におけるデザインシステム
GYAO!トップページの表示パフォーマンス改善 〜 GraphQLアーキテクチャへの移行
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、映像サービスプロダクト本部の浜田（@narirow）です。 GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。 GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー
プッシュ通知のタイミングを制御する話 〜 ユーザーの空気を読む通知
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN研究所 坪内と申します。今日は通知の話です。 プッシュ通知に気づかなかったり、タイミングが悪くてイラっとしてしまうことはないでしょうか？ 最適なタイミングで通知する研究結果をご紹介します。 みなさんが目にする、ヤフーの広告の表示や、オススメの情報は、パーソナライズされています。つまり、過去のユーザーの行動履歴から「この人は釣りが趣味の人だ」と推測し、釣りに関するニュースや、釣竿のレコメンデーションをしています。これはプッシュ通知もしかりです。プッシュ通知は表示できる文字数や送信できる通知数に制限があります。ユーザーの興味などから、この人にはこの通知だ！ というのを送ります。ここまでは、広告やレコメンデーショ
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
ヤフーにおけるJava事情を軽くご紹介します
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。第8代黒帯〜プログラミング言語（Java）〜 の森下と申します。 ヤフーでは、最近はJavaで書かれたさまざまなOSSの利用や貢献がされていたり、サービス開発でもJavaが使われることが増えてきているなど、社内でのJava利用が拡大してきています。 その背景には、ヤフーにおける標準言語の一つとしてJavaが位置付けられていることや、システムが大規模になるにつれて静的型付けやコンパイルなどできっちり作れるという利点が活きてくる点、また社内で利用できるPaaS環境（Pivotal Cloud Foundry）でもSpring Bootベースのアプリケーションがサポートされていて親和性があるといったことからだと思い
乗換案内アプリのCI/CDの取り組みについてのご紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。乗換案内のiOSアプリの開発を担当している田中 (@tattn)です。 ここ最近、アプリの品質を担保するための手段として継続的インテグレーション (CI: Continuous Integration)や、アプリのリリースコストを削減するための継続的デリバリ (CD: Continuous Delivery) が注目されています。 そこで今回は、自分が担当している乗換案内のiOSアプリで活用しているCI/CDの仕組みをご紹介したいと思います。 まずはiOSアプリの開発フロー自動化ツールのデファクトスタンダード fastlane について簡単に触れます。乗換案内もfastlaneを活用しています。 fastlane ht
分散システムの一貫性に関する動向について
ヤフー株式会社は、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
「iOSエンジニア・UI/UXデザイナー勉強会」の資料を公開します #yxdena
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、弊社の社員食堂「BASE 6」にて、DeNAさんと合同でiOS・UI/UXの勉強会を行いました。 ・http://dena.com/campaign/2014/yahoo_dena/ 資料をまた見たいという声を多く頂戴しましたので、 ヤフー側で発表した5つのセッションの資料、動画を公開いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧いただければと思います。 ▼動画アーカイブ（一部編集された部分があります） 前半：https://www.youtube.com/watch?v=3enJehass3E 後半：https://www.youtube.com/watch?v=QhLZIZMFMzo なお、当日
iOS 7勉強会 全セッションの資料と動画を公開します！ #ios7yahoo
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、iOS 7に関する勉強会をヤフーで開催しました。 http://connpass.com/event/3497/ 世界の注目するiOS 7がテーマということもあり、250席があっという間に満席。 Ustream配信でも多くの方に見ていただき、大盛況の勉強会となりました。 参加者の方からのリクエストをいただきましたので、全セッションの発表スライド、ソースコードをまとめて公開致します！ ▼発表を見逃した方はUstアーカイブをぜひご覧下さい！ Ustream前半：//www.ustream.tv/recorded/39618130 Ustream後半：//www.ustream.tv/recorded/39619493 Toget
レプリケーションを使わないMySQLの冗長化
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、DBMSチームの三谷です。 ヤフーでは多くのサービスでMySQLを利用しています。MySQLはヤフーを支える重要な技術の1つです。 私のチームではヤフーのさまざまなサービスのデータベースを集約して管理・運用しています。 集約することでコストの削減やノウハウの蓄積といった効果を生み出しています。 今回はこの集約環境の冗長化方法についてご紹介します。 集約環境の構成 集約環境ではマスターの冗長化にレプリケーションを利用せず、エンタープライズ向けの共有ストレージを利用したアクティブ・パッシブ型のHA構成を採用しています。 データファイルを共有ストレージに置き、どのマスターサーバーからでも同じデータに対してアクセスできるように
JSONP WebAPIを爆速で使いこなせるフレームワーク
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSONPに対応しているものがいくつかあります。ショッピング、オークション、YOLP、震災関連情報などです。 JSONPについて詳しくは過去記事を見てください。 他の形式に比べると、サーバーを準備しなくてもブラウザーだけで動かすことができ、古いブラウザーでも動くという、JSONPにしかないメリットがあります。夢のような形式！なのです。 …そのは
ヤフーネットワーク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を使う利点がわからない など疑問に思っている方はぜひ見ていた
ヤフーにおけるインプットバリデーション「何も信じるな」 (Yahoo! JAPAN Tech Blog)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術 セキュリティスペシャリストの戸田 薫です。 今回は、私たちが普段からヤフーのシステムに対する入力にどのような注意を払っているのか、そのいくつかをご紹介致します。 入力とは? Webサイトを運営している場合、どのような入力があるでしょうか？ たとえば、Webサービスには、以下の入力があります。 Cookie URL GET/POSTのデータ ファイルのアップロード その他リクエストヘッダ そのほかにもいくつもあります。 環境変数 設定ファイル クローラが取得したデータ パートナー企業のAPIから取得したデータ（XMLやJSONなど） パートナー企業の入稿用 F
ヤフーにおけるWebサービスのアクセスコントロール
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術 セキュリティスペシャリストの戸田 薫です。 今回は、ヤフーにおけるWebサービスのアクセスコントロールについてご紹介します。 ヤフーでは、会社組織やWebサービスの運営面でいろいろなアクセスコントロールを行っています。 アクセスコントロールをする目的には、いくつも理由がありますが、たとえば、以下の理由が挙げられます。 お客様やパートナーの情報を守らなければなりません。 サーバの制御を奪われ、攻撃に利用されてはいけません。 システムの不正な利用を予防しなければなりません。 今回は、ヤフーのWebサービスにフォーカスして説明をします。 インターネットからヤフーへ
ヤフーにおけるフィッシング対策
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術の戸田 薫です。 本稿は、経済産業省とフィッシング対策協議会が主催して行われた「フィッシング対策セミナー」（2010年1月28日（木）東京会場）で発表した内容と一部を除き、同様です。 フィッシング対策協議会 Council of Anti-Phishing Japan フィッシング対策セミナー開催のご案内 フィッシング対策セミナー資料公開のお知らせ 世の中には、いろいろな犯罪やイタズラなどの問題があります。ウェブの世界でも同様の問題があります。ヤフーでは、ウェブサービスを安心して利用して頂けるように、さまざまな不正利用の対策を行っています。 ヤフーには数多くの
Silverlightのパフォーマンスを向上させるための10のヒント
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、制作本部の藤川です。 みなさん、Silverlightで何か作ってみようとしたことはありませんか。 Silverlight開発の経験のあるかたなら一度は悩んだことがあるのがパフォーマンスの問題ではないでしょうか。 Silverlightは新しい技術であり、パフォーマンスについては、前例や参考文献も少ないのが現状です。 そこで今回は、Silverlight開発で得た経験や知識から、パフォーマンスを向上するためにはどうすればいいか、ヒントをご提供できればと思います。 また、このページの最後に参考リンクを貼っていますのでこちらもあわせてご参照ください。 パフォーマンスを向上させることによってどんなメリットがあるでし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Seleniumを使用したテスト自動化の取り組みを紹介します
