難解なソフトウェアをデザインする人にこそお勧めしたいOOUI（オブジェクト指向UI）
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog みなさまこんにちは。ヤフーでデータソリューション事業のUI/UXデザインを担当している、横内です。 2022年11月に弊社が運用するデータ可視化ソフトウェアのDS.INSIGHTで人流データを分析できるPlace機能を大幅アップデートしました。その際使用したOOUIという設計手法から得られた学びをプロジェクトの実例を交えながらご紹介します。 OOUIとは そもそもOOUIとは何者でしょうか。OOUIとは、Object Oriented User Interfaceの略語で、通称オブジェクト指向UIと呼ばれています。 オブジェクトとはその名の通り「役割を持ったモノ」を指す言葉です。例えばお店で買うクロワッサンや、ECサイトでカゴに入
Yahoo! JAPAN がメールセキュリティ「BIMI」を導入するまでのお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。メッセージング技術領域における第11代黒帯（ヤフーでのスキル任命制度）の中村成陽と申します。エンジニアとしてYahoo!メールを担当しております。 今回の記事では、メールの比較的新しい認証規格である BIMI についてのご紹介、そしてその BIMI を Yahoo! JAPAN が導入することになりましたので、それまでの過程や実際の対応内容などについてご説明します。さらに、BIMI における今後の展望に関しても触れられればと思います。 フィッシングメール対策として、Yahoo! JAPANから配信するメールにアイコンが表示される規格「BIMI」を導入（プレスリリース） BIMI とは？ BIMI (Brand Indi
DNS over HTTPS（DoH）の気になる Web Browser 実装を確認
Firefox の通信キャプチャ シナリオ 1-1 の通信を確認します。 まずは最初の Web Browser → DoH リクエストです。 Host: TEST_SERVER Accept: application/dns-message Accept-Encoding: Content-Type: application/dns-message Content-Length: 128 Cache-Control: no-store, no-cache Connection: keep-alive Pragma: no-cache 0x00 0x00 0x01 0x00 0x00 0x01 0x00 0x00 | ....... 0x00 0x00 0x00 0x01 0x03 0x77 0x77 0x77 | ......ww 0x06 0x67 0x6f 0x6f 0x67 0x6c
デザインシステムを組織に浸透させる3つの心得
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーのデータソリューション事業のデザインを担当しています、水野 直と申します。 私は2020年にヤフーに新卒入社し、DS.INSIGHTというプロダクトを支えるDS.DESIGN SYSTEMの大規模改修を担当しました。 デザインシステムの難しさは、構築することよりも、プロダクトの成長に伴走してシステムを運用し、機能させ続けることにあります。サービスの改善のスピード、人の流動が激しい現代において、多くの組織がプロダクトを発展させていくため、車輪の再発明をしないようデザインの言語化、パターン化にリソースを注いでいるかと思います。 今回はNijibox主催「なぜデザインシステムが必要なのか」のイベントに登壇した際の内容をベースに、立
iOSのVision.framework活用事例 〜 PayPayフリマのクレカ番号読み取り機能実装例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayフリマでiOSアプリ開発を担当している伊藤(@shizuna_it)です。PayPayフリマYahoo! JAPAN Tech Blogの第二弾です！ PayPayフリマは、誰でも気軽に、安心して個人間取引ができるフリマアプリです。（PayPayアプリの中からも使えます） PayPayフリマのiOSアプリでは、Swift Package Manager(SwiftPM)でライブラリ管理を行うようにリファクタリングを進めています。その過程で私達はVision.frameworkを活用してクレジットカード番号読み取り機能を独自実装しました。この記事では、実際に起きていた技術負債とその解消のための実装をサンプルコ
「新しいおうち探し」のためのAIアシスト検索 〜 Yahoo!不動産の技術紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!不動産のフロントエンド、バックエンドの開発を担当しているアンドン聖司と申します。 Yahoo!不動産では、店舗での対面接客と同等の物件提案が体験できるようなサービスを目指し、AIがアシスタントとなってユーザーの物件探しをお手伝いをしてくれるような機能を提供しています。深層学習やクラスタリングといった技術・手法を用いて、このAIアシスト機能を提供しています。 先日のYahoo! JAPAN Tech Conference 2022の内容をベースに、これらの技術の紹介と、登壇で語りきれなかった内容をご紹介します。 AIアシスト検索とは 従来の不動産サイトでは、ユーザーが条件を設定して絞り込みを行い、物件の検索を行います。（
ヤフーの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!メールのDMARC導入事例紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。エンジニアの中村成陽と申します。Yahoo!メールを担当しております。 今回の記事ではなりすましメールについての説明と、その対策としてYahoo!メールに導入した送信ドメイン認証技術のひとつである「DMARC」についてご紹介します。そしてこれらを踏まえ、なりすましメール対策のために何ができるのかをご紹介しますので、参考になれば幸いです。 なりすましメールとは？ なりすましメールとは、送信者自身のものではない、うそのメールアドレスを詐称、つまり別のメールアドレスからのものであると偽って送られたメールのことです。 送信元メールアドレスには、手紙でいえば封筒に記載する差出人となる EnvelopeFrom アドレスと、中身の
ベストプラクティスなシステムデザインの作り方 〜 LINEギフトとヤフーショッピング連携における課題とその解決策
アクセス数は購入に近くなればなるほど少なくなります。 逆に購入に近ければ近い場所ほど、データの鮮度の重要度は上がります。 このようにまとめることで、アクセス数とデータの鮮度の重要性は反比例の関係にあることがわかり、以下の整理ができました。 TOP/検索結果はデイリーで連携した商品データを参照 商品詳細は、キャッシュを間に挟んだAPIで参照する 購入手続きはリアルタイムAPIを参照する この整理により、LINEギフトから商品データベースをリアルタイムで参照する線は格段に減り、ヤフーショッピングの商品データベースへの負荷や障害時の依存度の課題はほぼ解決できました。 このアーキテクチャに関しては、常に負荷と戦っているわれわれのナレッジを活かし、先んじて対策を打てた という点です。 導き出したベストプラクティス 当然、常に最新の商品データで表示できるパーフェクトプラクティスの方がUX的には優れてい
ヤフーのAIプラットフォーム紹介 〜 AI開発をより手軽に
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーでデータエンジニア兼マネージャーをしている安藤です。 社内で利用しているAIプラットフォームの構築、提供を担当しています。 ヤフーには100を超えるサービスがあり、各サービスのデータ＊1が蓄積されています。ヤフーではこれらのデータをマルチビッグデータと呼んでいます。マルチビッグデータを利用し、ユーザの利便性やサービスの質向上のため、AI、機械学習の導入が増えています。 今回は、社内で急速に利用が進んでいる内製のAIプラットフォームを紹介します。 ＊1 この記事で取り扱っているデータは、プライバシーポリシーの範囲内で取得したデータを個人が特定できない状態に加工しています。 AIプラットフォーム開発の目的 AIプラッ
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
機械学習で「似ているヘアスタイル」を見つける手法 〜 Yahoo! BEAUTYでの実装事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。CTO直下のR&D組織であるテックラボにて、メディア処理系の研究開発に取り組んでいる志賀と三浦です。本記事ではYahoo! BEAUTYにおける「似ているヘアスタイル」表示機能の性能を改善した方法を紹介いたします。 Yahoo! BEAUTYと「似ているヘアスタイル」 Yahoo! BEAUTYは「好みのヘアスタイルからスタイリストを探せて出会えるサービス」として2019年12月にスタート。ヘアスタイルに関する検索、ヘアスタイル写真、スタイリスト情報、ヘアサロン情報などの機能やコンテンツを提供しています。 ユーザーが好みのヘアスタイルを見つけるための機能のひとつとして提供されているのが、ヘアスタイル詳細画面で表示された
GYAO!トップページの表示パフォーマンス改善 〜 GraphQLアーキテクチャへの移行
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、映像サービスプロダクト本部の浜田（@narirow）です。 GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。 GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー
2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
数億商品を扱う出品ツールをマイクロサービス化 〜 解決した課題と開発の悩みについて
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ショッピングでシステム開発を担当している石田と村上です。 Yahoo!ショッピングでは数億件にのぼる商品が日々更新されています。 今回はそれを支える出品ツールをマイクロサービス化して解決した課題と、複数のチームで開発する中で課題に感じたことを紹介します。 出品ツール（ストアエディタ）について マイクロサービス化の話に入る前に、まずはYahoo!ショッピングの出品ツール（ストアエディタ）について紹介します。 ストアエディタとは、出店ストアの方々がYahoo!ショッピングに出品するためのツールです。 出品データは以下の図にあるフローで連携されます。 商品情報には以下の情報が含まれており、入稿された値が正しいかど
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
ヤフーのスクラム開発実践者の経験年数ごとの学習方法の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ アジャイルコーチの荒瀬です。 ヤフー、および関連会社のアジャイル開発支援や研修を担当しています。 今回はヤフーのスクラム実践者の学習方法についてお話しします。 イベントや研修の中で、スクラムの勉強方法をいろいろな方から質問されることが多かったので、記事にするとより多くの人の役に立つのではないかと思い執筆することにしました。 また、せっかく書くのであれば、ヤフーの中にいるさまざまなスクラム実践者の話も交えると、経験年数別に、より参考になりそうな書籍、セミナーや研修を紹介できるのではないかと考え、ヤフーのスクラム経験者にも協力いただいています。 スクラムを始めた頃の自身のことを考えながら、こういう記事があるといいのにと思
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
パスワードのないログインを目指して 〜 ヤフーのFIDO標準化活動
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所の大神 渉です。 パスワードの代わりに生体認証などを使うシンプルな認証技術「FIDO」の標準化活動に携わっています。 2020年6月4日に、FIDOアライアンスから私が著者として関わった「White Paper: Multiple Authenticators for Reducing Account-Recovery Needs for FIDO-Enabled Consumer Accounts」というホワイトペーパー（FIDOのベストプラクティスや標準技術の活用に関してFIDOアライアンスが発行する文書のこと）が発行されました。 本記事では、私の経験をもとにヤフーがパスワードレス認証
表示速度を飛躍的に向上させる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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
