社内認証パスワードレス化のすゝめ
パスワードレスとは 「パスワードレス」とは言葉通り「パスワードが要らない」という意味です。パスワードにはたいてい「英数字・記号を含む8文字以上の複雑な文字列にしてください」「一年ごとに変更をしてください」といった煩わしい制約が存在します。利用者にしてみれば毎回違うパスワードを考えたり覚えたりするのは負担ですし、結局簡単なものや同じようなパスワードを使いまわしがちになり、管理者としても望んだ結果ではないという問題があります。パスワードレスはそういった煩わしさから利用者・管理者双方を解放します。 ヤフーの社内認証事情 ヤフーには一万人を超える社員が在籍しており、毎日一回以上認証の機会があります。 社員が社内ツールにアクセスすると、まずはじめに共通の入口である内製の社内認証基盤へとリダイレクトされます。そこで社員は実際のログイン手段として以下の三種類の認証方式から選択します（図1）。 社内ID/
ユーザー体験を向上！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は上記のような
2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
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スキー
表示速度を飛躍的に向上させる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
MySQLの物理削除によるパフォーマンスの悪化とその回避策について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!ショッピングでシステム開発を担当している村上です。 Yahoo!ショッピングでは数億件にのぼる商品が日々更新されています。 今回はそれを支える巨大なDBの運用の中で遭遇したMySQLのアンチパターンと、回避した方法について紹介いたします。 特定のテーブルをJoinするとすごく遅くなる Yahoo!ショッピングでは商品を出品するためのツールがあります。 商品情報には「商品名」「価格」といった、任意で設定可能な項目のほか、「ブランド」「商品種別」など、製品ごとに入力する内容が決まっている項目を、マスター情報としてテーブルで管理しています。 このマスター情報を利用して、出品の際に入力情報が正確であるかどうか確か
圧縮効率のよいカラムナフォーマット 〜 Yosegi や ORC のエンコード方式調査
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めまして、2019年8月にヤフーのデータプラットフォームチームのインターンシップに参加した山添です。今回はインターンで検証を行ったカラムナフォーマットにおけるエンコーディング方式について紹介します。本ブログでは、特に数値型のエンコーディング方式について、データ圧縮率への効用を確認します。 カラムナフォーマットとは 昨今のデータ社会では、ログデータや購買データ、位置情報データなどさまざまなデータがものすごいスピードで生み出されています。企業ではそのような大規模なデータを蓄えておく必要があります。 私たち学生の間で最も親しみのあるファイルフォーマットは、JSON や CSV などのテキストフォーマットだと思います。これらのフォーマッ
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
クリック・タッチを無効化する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プロパティーやその使い道を
高速ファイル/メッセージ転送 K2HFTFUSE の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Technical Yahoo の中谷です。 今回は、Yahoo! JAPANからオープンソースとして公開した高速ファイル/メッセージ転送システムの K2HFTFUSE の紹介をします。 K2HFTFUSEは、確実で高速なファイル/メッセージ転送を低コストで実現するために開発されたシステムです。 K2HFTFUSE（K2Hash File Transaction by FUSE-based file system）とは、FUSE（Filesystem in Userspace）によるユーザースペースでのマウント機能を利用したファイル/メッセージ転送システムです。 K2HFTFUSEは、仮想ファイルシステムを提供し、マウ
知っておきたい7つのID連携実装パターン
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ID連携担当のくら（@kura_lab）です。 みなさんはYahoo! JAPANのWeb APIや認証、エンドユーザーの属性取得APIを実装したことがありますか。これらを利用するためにはYahoo! ID連携を用いてアクセストークンの取得やログインの実装が必要になります。単にアクセストークンの取得、ログインの実装といってもWebアプリ、ネイティブアプリにおいていろいろなパターンがあります。 SDKを用いる場合ほとんど意識せずに実装もできますが、提供するサービスのUXやシステムの環境に合わせてより最適な実装をするためには、それぞれの特徴を理解し適切なパターンを選択する必要があります。 Yahoo! ID連携はOAuth
Caffeで手軽に画像分類
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部 データソリューション本部の宮崎です。 最近ディープラーニングと呼ばれる技術の話題を耳にすることが増えてきました。 この記事ではディープラーニングの手法を実装し画像認識系の用途で便利に使えるCaffeというツールの使い方を紹介します。 Caffeの概要 Caffeは、C++で実装されGPUに対応した高速なディープラーニングのライブラリです。 大規模画像認識のコンテストILSVRCで2012年にトップとなった畳込みニューラルネットワークの画像分類モデル[1]がすぐに利用できるようになっています。 Caffeは、カリフォルニア大学バークレー校のコンピュータビジョンおよび機械学習に関する研究センターであるBV
もうファイル管理で困らない！ デザイナーのためのSubversion/TortoiseSVN入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、Yahoo!検索のデザイナー担当の竹内美帆と申します。 今Yahoo! JAPANでは、プロジェクト毎にバージョン管理システムを使い分けていますが、Subversionを使用しコードを管理しているプロジェクトもあります。2011年1月～3月には、デザイナーが所属する部署でもデザイナーが作成するHTML・CSS・JavaScriptファイルなどをバージョン管理システムであるSubversion（サブバージョン）で管理しようという動きがありました。 デザイナーにとってはとっつきにくい印象がある「バージョン管理」ですが、うまく利用すれば「あのファイルどこいった？（汗）」「いつこのファイル書きかえたっけ？（汗）」「
「ぽ地図」をダシに考えるウェブ地図の明後日
LatLongLabでデザイン等を担当しているinuroこと河合 太郎です。今日も座り心地の悪いイスに座ってモニターを眺めてる皆様、少し背伸びをして体をほぐしてみてはいかがでしょうか。 今回はLatLongLabの提供するサービスのひとつ「ぽ地図」を紹介させていただこうと思います。 何ですかそれは？ 「ぽ地図」という名前の由来はぽちっと押せる地図です。ではよく分かりませんね。 地図には「六本木ヒルズ」「ホテルアイビス」といったように建物の名前が書き込まれています。これらを地図用語では注記と呼びますが、通常は注記は単なる「絵」です。さわってもたたいても何も起こりません。 「ぽ地図」はこれら地図上の注記を直接クリック可能にしたインタラクティブな地図です。注記の上にマウスカーソルが重なると青くハイライトされ、クリックすると左側の情報ペインに建物や店舗の詳細情報が表示されます。情報ペインには店舗の
JSONPを使ってJavaScriptだけでマッシュアップ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!地図の開発を担当しています前田博敏です。 今回は、JavaScriptから外部サイトのWeb APIを直接呼び出すことができる、JSONPという手法について紹介させていださきます。 JSONPとは JSONPとは、JavaScriptの外部ファイル読み込み（「script」タグとその「src」指定）を利用して、ドメインの異なる外部サイトのデータを読み込む手法のことを言います。 JSONPを利用するには、呼び出される側のWeb APIがJSONP形式に対応している必要があります。 Yahoo!デベロッパーネットワークでは、現在のところローカルサーチAPIとショッピングAPIが、JSONP形式に対応しています。
YUI Testを使ったJavaScriptユニットテストのすすめ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、検索事業部の角田です。 私が担当しているプロジェクトではPHPUnitとSeleniumを使ってテストを行っています。そして、最近YUI TestというJavaScriptによるユニットテストライブラリを使い始め、JavaScriptのユニットテストがとてもいい感じに思えてきたのでご紹介します。 YUI Testは、Yahoo! Developer Networkにて公開されているYahoo! UI Libraryの数多くあるコンポーネントの中の一つです。その名の通り、JavaScriptのユニットテストを行うライブラリです。JavaによるJUnitやPHPによるPHPUnitを使ったことのある方であれば、すぐに使い方
オークションシステムの簡単紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部開発部のLiuです。 今回は「ヤフオク」のサービスを支えているオークションシステムについて、 以下3つのテーマに分けて簡単に紹介します。 システム構成 データの同期処理 データ構造 1. システム構成 以前の記事Yahoo!オークションからのご挨拶にも書かれてあるように、ヤフオクは Yahoo! JAPANの中でも最大級のサービスです。これだけ大きな規模のシステム を支えているのが、およそ数千台のFreeBSDサーバーになります。この数千台のサーバーは、 基本的に機能毎に分かれていて、独立性をたもちながら互いに連携し合い、結果的に 一つの大きなオークションシステムを構成しています。 ヤフオクは、お客様
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Seleniumを使用したテスト自動化の取り組みを紹介します