表示速度を飛躍的に向上させる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
ヤフーの社内システムを紹介します
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤（@koh110）です。 社内システムの開発、運用を担当しています。 弊社は10月に本社を東京ミッドタウンからガーデンテラス紀尾井町へ移転しました。 情報システム本部では本社移転に合わせ4つの社内システムをリリースしました。 今日はこちらのシステムについて紹介をさせていただこうと思います。 社内位置情報システム（pozzy） このシステムは社内のWi-Fiにつながっている端末を検出し、人の位置情報を検索できるようにします。 ヤフーでは全社員にPCとiPhoneを貸与しています。これらの端末は各端末に発行された証明書によって社内のWi-Fiに自動で接続されるように設定されています。 この情報を利用し
ヤフーの画像配信システム（CDN）の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部プラットフォーム開発本部の新部（@osa2be）です。 CDNの運用を担当しています。 先日、知り合いの技術者と話していてヤフーのバックエンドがどうなっているのか興味があると聞かれましたので、社内にいくつかあるCDNのうち2つとIDCフロンティアのサービスをご紹介します。 はじめに ヤフーには多くのサービスが存在していますが、様々な理由により突発的にリクエストが増加することがあります。 そのようなリクエストに対応するためにサービスごとに大きな配信システムを持つことは、インフラの準備や運用工数など高いコストが必要になります。 そのため、共通のCDNを準備して各サービスのサーバ負荷を平滑化しています。 以前は、社外のC
Today ウィジェットの実装方法～導入から Tips まで #ios8yahoo
こんにちは。ヤフーで新規アプリ開発をしています田邉裕貴です。 この記事では、iOS 8 から導入された Today ウィジェットの開発の仕方についてご紹介します。 具体的な内容は以下のとおりで、iOS 8/Swift 勉強会で発表させていただいた「iOS 8 Widget ～ 導入から Tips まで」に添って説明します。スライドだけでは伝わらない部分を補完できればと思っています。 Today ウィジェットとは Hello world ウィジェットの作り方 詰まりどころと Tips 集 Today ウィジェットとは まずは簡単に Today ウィジェットの説明をします。 Today ウィジェットとは、iOS 8 から新たに通知センターに追加された Today タブ内のコンテンツです。 Today という名前の通りリアルタイム性の高いコンテンツが並びます。 Apple のプリインストールされ
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
FlashCacheでI/Oのボトルネックを解消させよう
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 皆様こんにちは。ストレージアーキテクトの矢澤祐司です。 Yahoo! JAPANにて利用されているマルチペタバイトなストレージ達と仲良く過ごしている私なのですが、今回はFlashCacheを用いたI/Oの最適化について検証した結果の一部を皆様にご紹介させていただきます。 FlashCacheとは SSD製品が安価に調達できるようになった昨今であっても大容量なストレージを構築する際はHDDに頼らざるを得ず、さすがにフルSSDで大容量なストレージを構築してしまうとコスト過多で現実的ではないと判断される方が大半かと思います。確かにSSDを利用することによってI/O性能が課題だったシステムを改善された事例はたくさんあるものの、大
デザイナーのためのSubversion/TortoiseSVN入門2 -Subversionでのフォルダーの命名・構成とTortoiseSVNの便利な使い方-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに Yahoo!検索のデザイナー担当の竹内美帆です。前回の記事「もうファイル管理で困らない！ デザイナーのためのSubversion/TortoiseSVN入門」では、「Suvbersionの概要」と「TortoiseSVNのインストールから基本操作」を解説いたしました。今回はさらに一歩踏み込んで、Subversion初心者の多くが疑問を持つ「Subversionのフォルダーの命名と構成」と「TortoiseSVNの便利な使い方」をご紹介します。 目次 Subversionのフォルダーの命名と構成 基本的なフォルダーの命名と構成 柔軟な構成を考えてみる TortoiseSVNの便利な使い方 変更履歴を見る 前回のリビジョンと
業種マスターAPI をリリースしました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、R&D統括本部プラットフォーム開発本部西日本開発部に勤める格闘家の西です。 Yahoo!デベロッパーネットワークにて、業種マスターAPIを公開しましたので、ご紹介させていただきます。 業種マスターAPIとは、Yahoo! Open Local Platform（略称：YOLP）で使用される業種コードや業種名を階層構造状に取得できるAPIです。このAPIにより、Yahoo! JAPAN で利用されている業種名のリストを取得して表示できます。 さらに、業種マスターAPIは、YOLP ローカルサーチAPIと組み合わせたときに、その真価を発揮します。つまり、このAPIで取得できる業種コードを利用して、業種を絞り込んだ検索をY
復興支援にあなたのコードを！「電気予報API」と「災害ボランティア検索API」を公開しました。
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!デベロッパーネットワークの鎌田です。 東日本大震災が発生してから後、私たちYahoo! JAPANはインターネットの力で被災地の復興支援、最新情報の提供を実施してきました。その中で復興支援に自分の力を役立てたいと思う全国のエンジニアの皆さまの力にもなれるよう、「Hack for Japan」へのAPI提供。 また、先日には「電力使用状況API」を公開いたしました。 そして昨日と今日、新たに2つのAPIをリリースしましたのでご紹介いたします。 1．電気予報API １つ目は電力の最大供給量と使用量の予測値を取得できる「電気予報API」です。 さきほど、Yahoo! JAPANのトップページはこれまで表示されてい
HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ「えほんのじかん」（iPad版）の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの「えほんのじかん」の元祖は、「テレビ版」でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
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
オープンソースカンファレンスの講演資料を紹介します
3月4日、5日の2日間開催された「オープンソースカンファレンス2011 Tokyo/Spring」にて、 Yahoo! JAPANはスマートフォン向けサービスの開発について講演させていただきました。多くの方にご参加いただきありがとうございます。 ここでは、当日講演で使用したプレゼン資料を紹介させていただきます。
HTML+CSSコーディングが10倍速くなるZen Coding
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 今までZen Codingの基本（マークアップ効率化 - zen-codingでコーディングを倍速に）、Zen Codingの応用（Zen-Codingの応用でもっと超速に- 原稿ありきの変換について）と二つの記事を書いてきましたが、今回もまたZen Codingについての記事となります。 Zen Codingしか知らないわけではないのですが......立て続けの内容ご容赦いただければと思います。 今回は今までの記事とは違って、11月26日（金）発売予定の「HTML+CSSコーディングが10倍速くなるZe
サーバーの熱は冷まさなくても良い？
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、運用技術本部 サイトオペレーションズ部の秋山と申します。 Yahoo! JAPANには日本一のサイトを支えるたくさんのネットワーク機器、サーバー、ストレージがあります。 日々増え続ける、インフラ機器の運用管理に頭を悩ませている、管理者も多いかと思います。 悩むポイントは機器管理、コスト等いくつかあるかと思いますが、今回は「サーバーの熱」に焦点を絞り、話をします。 普段使っているパソコンなどもそうですが、情報技術（IT）機器全般に電源投入後は熱を持ち、 内部のファンで、たまった熱をケース外に吐き出す構造のものがほとんどです。 パソコン1台ですと、暖かい風が出てくるだけ。というイメージが多いかと思いますが、 データセンタの
Hadoopを使いこなす(1)
まず、 1 の入力ファイルを分割する方法は、InputFormatクラスの、getSplits関数を上書きすることで、カスタマイズできます。 また、 3 のInputSplitから、KeyとValueを抽出する処理も、InputFormatクラスを通じてカスタマイズできます。 InputFormatのgetRecordReader関数を通じて、RecordReaderクラスを生成するのですが、これに任意のRecordReaderクラスを指定すればOKです。 2 のMap処理ですが、ユーザが指定したMapperクラスの処理を実行します。 Mapperクラスは、MapRunnerクラスを通じて、初期化処理、map関数を繰り返す過程、終了処理といった一連の流れを実行します。 MapRunnerクラスをカスタマイズすれば、こうした流れを制御することができます。 0.20.0からの新しいMapRed
Hadoopを使いこなす(2)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、 前回のHadoopの記事 に引き続き、MapReduceのカスタマイズポイントを解説していきます。 前回の記事の図や、表などを参照しながら読み進めていただければと思います。 MapperやReducerの流れの制御 Mapperの実行の流れは、デフォルトでは、初期化処理を行った後、map関数を繰り返し実行し、終了処理を行うようになっていますが、この流れ自体を制御することができます。 古いAPIでは、MapRunnerを通じてこの流れを制御できますが、0.20.0からの新しいAPIでは単純にMapperクラスのrun関数をオーバーライドすることで、行えます。 デフォルトのrun関数は以下の通りです。 public vo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
