表示速度を飛躍的に向上させる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
熱いスライド勢ぞろい！ ヤフー名古屋 Tech Meetupのコンテナ技術勉強会
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ヤフーの名古屋オフィスで働くデザイナーの吉川です。 2019年5月28日（火）に、第2回となる「ヤフー名古屋 Tech Meetup」を開催しました。 今回のテーマは 「コンテナ技術」。初開催だった前回に比べると話題を絞っての開催でしたが、エントリー開始当日に定員がすべて埋まるうれしい事態を受け、急きょ参加枠を増やしての実施となりました。 この記事では、初回に引き続き盛況のうちに終わった本イベントの様子を、運営スタッフの目線でレポートしていきます！ 1.キーノート「Yahoo! JAPANのマネージド Kubernetes サービスを支える技術」 初めに、弊社内のKubernetesスペシャリストである黒帯 須田一輝よ
Yahoo! JAPAN Tech Conference 2019 のスライドを公開しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN Tech Conference 2019 (YJTC19) 運営事務局です。 Yahoo! JAPAN Tech Conference 2019 を1月26日に開催しました。多くの方にご参加いただき、大盛況のうちに終了することができました。ありがとうございました。 セッションの資料は当日中に公開させていただいておりますが、改めてまとめました。 基調講演 スライド / 動画 Room A A-1 もう道に迷わない！ Yahoo! MAPにおけるAR体験 A-2 ライブクイズ「ワイキュー」を生み出した”内因的モチベーションドリブン” / ワイキューが目指した”楽しい時間を作るデザイン” A-3 ユ
Caffeで手軽に画像分類
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部 データソリューション本部の宮崎です。 最近ディープラーニングと呼ばれる技術の話題を耳にすることが増えてきました。 この記事ではディープラーニングの手法を実装し画像認識系の用途で便利に使えるCaffeというツールの使い方を紹介します。 Caffeの概要 Caffeは、C++で実装されGPUに対応した高速なディープラーニングのライブラリです。 大規模画像認識のコンテストILSVRCで2012年にトップとなった畳込みニューラルネットワークの画像分類モデル[1]がすぐに利用できるようになっています。 Caffeは、カリフォルニア大学バークレー校のコンピュータビジョンおよび機械学習に関する研究センターであるBV
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
Sensu と Graphite による大規模インフラの監視
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション本部の渡邉です。 サイトオペレーション本部はデータセンタ・ネットワーク・サーバー・OS・ストレージといった全社的なインフラの管理運用や調査検証などを担当しています。 今回は、2013年に全社のプライベートクラウドとして導入した OpenStack の監視基盤として、OSS の Sensu と Graphite を採用した事例についてご紹介したいと思います。 採用に至るまで サイトオペレーション本部では、もともと 2011 年から内製のプライベートクラウドを開発運用していました。 プライベートクラウドでは VM のホストとなるハイパーバイザを大量に運用する必要がありますが、その監視基盤として社内で一般的に利用され
JSONP WebAPIを爆速で使いこなせるフレームワーク
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSONPに対応しているものがいくつかあります。ショッピング、オークション、YOLP、震災関連情報などです。 JSONPについて詳しくは過去記事を見てください。 他の形式に比べると、サーバーを準備しなくてもブラウザーだけで動かすことができ、古いブラウザーでも動くという、JSONPにしかないメリットがあります。夢のような形式！なのです。 …そのは
ヤフーにおけるパッケージ管理 - 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
