クリック・タッチを無効化する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プロパティーやその使い道を
今は、もう、動かない、その User-Agent 文字列
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか？ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
保守性と生産性を両立する分析用SQL構造化の4原則 〜 構造化プログラミングの考え方をSQLに適用する
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告のデータマーケティングソリューション（以下、DMS）を開発しているデータアナリストの薄田です。 みなさんは、中間テーブル同士が複雑に絡み合い変更しようにも影響範囲を推定できず、手がつけられない分析パイプラインの保守で苦労された経験はないでしょうか？ 私のチームでは数千行におよぶ分析用SQLをリファクタリングして、保守性と生産性を両立する分析パイプラインに生まれ変わらせることができました。 この記事ではリファクタリングを通して確立した、分析用SQLを構造化するための4原則を紹介します。4原則を意識しながらSQLを書くことで、高凝集・疎結合な分析パイプラインを作ることができます。 この記事では凝集度と結合度
25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
ヤフー全社横断「Webパフォーマンス改善」の取り組み (Core Web Vitalsスコアの向上)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
クラウドネイティブ環境におけるJavaチューニングの進め方 〜 20,000rpsをさばく超PayPay祭の事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ショッピング統括本部の川口です。 本記事では、2022年2月から3月にかけて開催された超PayPay祭の事例をもとに、クラウドネイティブ環境におけるJavaチューニングの進め方について解説します。 本記事の内容は2022年6月19日に開催された、JJUG 2022 Springで発表した内容をベースにしています。 Yahoo!ショッピングにおける超PayPay祭は高負荷 超PayPay祭は全国のPayPay加盟店とオンラインショップでお得に買い物をお楽しみいただける大規模キャンペーンです。Yahoo!ショッピングにおいても、PayPayポイントがもらえるキャンペーンなどさまざまなお得な施策が実施されます。超PayPay
ヤフーの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」の紹介とともに、フロントエンド部分におけるデザインシステム
社内勉強会で専門的技術力を高めるには
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション本部に所属している大津と申します。普段CDNとNode.jsサポートの仕事をしていて、第9代黒帯（ヤフー内のスキル任命制度／ネットワーク・セキュリティ）に任命していただいています。1 先日ヤフー社内で黒帯LT会が開催されました。お題目は事前に指定された「専門的技術力を極めるための極意」ということで、10分ほど話をしました。しかし、これまでみたいにセミナールームで大勢の前で話すわけではなく、最近代わり映えしない自宅デスクからのオンラインLTは、正直勝手が違いました。時間配分もミスって中途半端に終了です。と思いきや数日前、このYahoo! JAPAN Tech Blog担当者から「いやー、よかったですよ。そのネタ書
WebAPIにおける「TLS 1.0」「TLS 1.1」のサポート終了について
※サービス環境とは、Yahoo!デベロッパーネットワークが提供し、通常お使いいただいているWebAPIの環境です。 「TLS 1.0」と「TLS 1.1」のサポート終了後は、サービス環境も検証環境と同じ動作となります。 検証環境の使い方 hostsの設定 検証環境のご利用にあたっては、以下のようにhostsの設定を変更してお試しください。 LinuxやFreeBSDであれば、 /etc/hosts を編集してください。 resolve オプションを利用できる curl コマンドで確認する場合は、 hosts の設定は不要です。 下記のhostsの設定は、ご自身の検証環境でお試しいただくことをお勧めいたします。サービスインしている本番環境での検証は、意図しない事故を伴う恐れがあります。 #ヤフーの検証環境のIPアドレス APIのFQDN 182.22.25.252 s.yimg.jp 183
閉塞感を改善する為のチームビルディング
今回はこの中の「自己紹介ピッチ」「ドラッカー風エクササイズ」の内容を共有できればと思います。 自己紹介ピッチ なぜいまさら自己紹介…と思われるかもしれませんが、もちろん後から入った人の自己紹介はよくやります。ただ、以前からいるメンバーはする機会もなく意外とその人を知らない事が多いです。あまり肩肘貼らずにできるように以下のテンプレで自己紹介ピッチをしてもらいました。 # 名前 # 出身とか年齢とか # 好きなこと # 嫌いなこと # 実は〇〇改めて機会を設けて意外な経歴を知れたり、好きなことや嫌いなこと、実は〇〇等で「Aさんって〇〇なのか!!」のイメージも残りやすくちょっとした会話のキッカケや印象に残るのでコミュニケーション上プラスにあたらく事を狙いました。 実際にやってみたところ、 この人は幅広く技術領域を経験してきている 好きなこと、嫌いな事を聞くことで価値観を垣間見れた チームメンバー
ヤフーの分散オブジェクトストレージ Dragon について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、データ＆サイエンスソリューション統括本部所属の後藤泰陽（@ono_matope）です。少し時間があいてしまいましたが、9月19日にお茶の水女子大学で開催された WebDB Forum 2017 において、分散オブジェクトストレージ “Dragon” について講演しました。良い機会なので、本エントリでもDragonについてご紹介させていただきたいと思います。 発表資料 WebDB Forumでの発表資料については以下をご覧ください（講演時の内容と一部異なります）。 日本語版 Dragonとは？ Dragonは、ヤフー・ジャパンで開発された分散オブジェクトストレージシステムです。Amazon S3互換のWeb APIを実装
WEB+DB PRESS vol.99から連載が始まりました＆webpack3の補足
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。エンジニアの穴井(@pirosikick)です。去年の10月よりヤフー黒帯制度にて、JavaScriptの黒帯をやっています。普段はヤフーの社内ベンチャー制度からできたリッチラボで福岡で働いていますが、ご飯がおいしすぎて太りました。痩せたい！ ここからが本題ですが、今月24日発売されましたWEB+DB PRESS vol.99より、ヤフーのフロントエンドエンジニアによる連載が始まりました！連載タイトルは「どんとこい！フロントエンド開発」です。ヤフーのフロントエンドエンジニアで、流れの速いWebフロントエンドで使われる技術を分かりやすく解説していきますので、どうぞよろしくお願いします！ 初回は「入門webpack2」を寄
ヤフーの画像配信システム（CDN）の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部プラットフォーム開発本部の新部（@osa2be）です。 CDNの運用を担当しています。 先日、知り合いの技術者と話していてヤフーのバックエンドがどうなっているのか興味があると聞かれましたので、社内にいくつかあるCDNのうち2つとIDCフロンティアのサービスをご紹介します。 はじめに ヤフーには多くのサービスが存在していますが、様々な理由により突発的にリクエストが増加することがあります。 そのようなリクエストに対応するためにサービスごとに大きな配信システムを持つことは、インフラの準備や運用工数など高いコストが必要になります。 そのため、共通のCDNを準備して各サービスのサーバ負荷を平滑化しています。 以前は、社外のC
Yahoo! JAPAN における HTTP/2 への取り組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。システム統括本部 プラットフォーム開発本部 エンジニアの大久保諒です。 Yahoo! JAPAN のサービス利用者の皆様に、より高速にコンテンツをお届けするためのキャッシュ・プロキシサーバー関係の開発業務に携わっております。 本記事ではオープンソースの HTTP キャッシュ・プロキシサーバー Apache Traffic Server で HTTP/2 通信を可能とする為の機能追加を行いましたので簡単にご報告致します。 HTTP/2 の基本的な解説に関しては 前回の記事 にまとまっています。ぜひそちらをご覧の上で本記事をご覧ください。 本件の実装は Apache Software Foundation にパッ
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
細かすぎて伝わらないSSL/TLS
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「細かいと言うより長いよね」 はじめに こんにちは。ATS の脆弱性を発見した小柴さんや ATS に HTTP/2 の実装を行っている大久保さんと同じチームの一年目、匿名社員M さんからいじられている新人です。今回ありがたい事に、こういったすごい方々を含めモヒカン諸先輩方より「何か書かないの？」「いつ書くの？」という数々のプレッシャーお言葉をいただきました。 というわけで、SSL/TLS の Session 再開機能に関して書いていこうかと思います。 SSL/TLS は機密性、完全性そして真正性に対して安全な通信を行うための仕組みです。しかし、この仕組みは暗号技術を多用し特に接続において複雑なプロトコルを用い、Client, Se
サーバーサイド実装を1行もせずにバックエンドと連携するiOSアプリを開発する
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーで iOS エンジニアをやってます平松（@himara2）です。 最近 BaaS, MBaaS という言葉を良く耳にします。 アプリエンジニアのみでサーバーサイド込みの開発もできる、ということで以前より個人的に興味がありました。 実際に触ってみると想像以上に使いやすいものだと感じたので、その感想を紹介してみようと思います。 最近のモバイルアプリ開発事情と BaaS 最近のモバイルアプリはクライアント側で完結するものは少なく、サーバーサイドと連携して動くものがほとんどです。 サーバーサイド側で必要な機能としては、ユーザー管理、各種データAPI、Push通知機能、画像や動画のストレージなどがありますが、これをアプリ開発の度に毎回
レプリケーションを使わないMySQLの冗長化
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、DBMSチームの三谷です。 ヤフーでは多くのサービスでMySQLを利用しています。MySQLはヤフーを支える重要な技術の1つです。 私のチームではヤフーのさまざまなサービスのデータベースを集約して管理・運用しています。 集約することでコストの削減やノウハウの蓄積といった効果を生み出しています。 今回はこの集約環境の冗長化方法についてご紹介します。 集約環境の構成 集約環境ではマスターの冗長化にレプリケーションを利用せず、エンタープライズ向けの共有ストレージを利用したアクティブ・パッシブ型のHA構成を採用しています。 データファイルを共有ストレージに置き、どのマスターサーバーからでも同じデータに対してアクセスできるように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
