タグ

ブックマーク / techblog.yahoo.co.jp (24)

  • 「使いやすい&運用しやすい」を目指したデザインシステムのSketch管理

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの今河、田嶋です。 以前、「社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介」という記事で、社内のデザインシステム「SAYA」を紹介しました。 今回は、「SAYA」のリソースの1つである「UIkit」の作り方のtipsや運用方法について詳しく紹介します。 UIkitとは、デザインシステムで定義されているカラーやコンポーネントなどをUIアセットとして、1つのデザインファイルにまとめたものです。 世の中にはSketchやAdobe XD, Figmaなどを筆頭にさまざまなデザインツールがありますが、SAYAではSketchをメインに使っています。

    「使いやすい&運用しやすい」を目指したデザインシステムのSketch管理
  • Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌(@kzms2)と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PCYahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか? なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基的にはコードの継ぎ足しで修正を加えている状態でした。 (参照;Yahoo! JAPAN トップ

    Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
  • UICollectionViewでレスポンシブUIを実現するためのコードをOSSとして公開しました - Yahoo! JAPAN Tech Blog

    こんにちは、iOSアプリ黒帯の林(@kazuhiro494949)です。 先日、ヤフーのiOSアプリ内で利用されているコードを一部切り出してOSSとして公開しました。 https://github.com/yahoojapan/UICollectionViewSplitLayout このOSSを使うと、リストやグリッドで表示されているデータを画面サイズに合わせてレスポンシブに並べることができます。 iOSのユニバーサルアプリ1で上記のようなデザイン要件を受け、既存の仕組みでは実現することが難しかったため開発しました。記事では、その技術的な課題を解説し、解決策としてのOSSを紹介したいと思います。 UICollectionViewとUICollectionViewLayout はじめに、UICollectionViewというiOSアプリ開発において重要なクラスのひとつを簡単に説明します。

    UICollectionViewでレスポンシブUIを実現するためのコードをOSSとして公開しました - Yahoo! JAPAN Tech Blog
  • ヤフーの社内システムを紹介します

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 弊社は10月に社を東京ミッドタウンからガーデンテラス紀尾井町へ移転しました。 情報システム部では社移転に合わせ4つの社内システムをリリースしました。 今日はこちらのシステムについて紹介をさせていただこうと思います。 社内位置情報システム(pozzy) このシステムは社内のWi-Fiにつながっている端末を検出し、人の位置情報を検索できるようにします。 ヤフーでは全社員にPCiPhoneを貸与しています。これらの端末は各端末に発行された証明書によって社内のWi-Fiに自動で接続されるように設定されています。 この情報を利用し

    ヤフーの社内システムを紹介します
  • ハイパフォーマンスでスケーラブルなメッセージングシステム:Pulsarの紹介

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに Pub-Subとは 用語の定義 システム構成 Hello World おわりに 緊急告知 参考 はじめに こんにちは。システム統括部プラットフォーム開発部の栗原と申します。 2016年9月、Yahoo! Inc.からPulsarがOSSとして公開されました。Pulsarは高い配信信頼性/パフォーマンス/スケーラビリティを誇るPub-Subメッセージングシステムです。Yahoo! Inc.において開発され、これまでYahoo! Inc.のメール、ファイナンス、スポーツなど主要サービスにおいて、メッセージを高速かつ消失することなく配信するために利用されて来ました。 Pulsar開発者によって書かれた技術ブログ:Open-

    ハイパフォーマンスでスケーラブルなメッセージングシステム:Pulsarの紹介
    heavenshell
    heavenshell 2016/10/13
    "ハイパフォーマンスでスケーラブルなメッセージングシステム:Pulsarの紹介"
  • ひとりの開発者から始まった、ヤフーのヒートマップとは

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、データ&サイエンスソリューション統括部、企画の舩水です。 私は社内で開発された分析ソリューションの利用推進やサポートを行う業務を担当していました。その分析ソリューションの1つにヒートマップという分析ツールがあります。ヒートマップとは、ウェブサイト上でのユーザーの行動をサーモグラフィによる温度分布のように色の濃淡で可視化して表す分析手法です。ご存じのとおり、サーモグラフィとは物体の表面温度の高い部分を赤、低い部分を青とし画像化されたものを指しますが、分析におけるヒートマップでは、ウェブサイト上でよく利用される部分を赤、利用されていない部分を青としてデータ処理し、色によって可視化したものを指します。下の図を見ていただくと

    ひとりの開発者から始まった、ヤフーのヒートマップとは
  • 分散システムの一貫性に関する動向について

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括部アーキテクト室 今野です。 昨年は、Twitter,Facebookを始めとするクラウド各社で新規の分散システム開発のプロジェクトが相次いで発表された年でした。これらの新しい分散システムを開発する理由や、その背景にあるものは何なのでしょうか? 今回は、昨年末に開催された高信頼性分散システム系の国際学会であるSRDS 2014[1]の発表内容に関連する論文の話題も踏まえて、昨今のクラウド各社の分散システムの動向について整理してみます。 分散システムにおけるクラウド各社の動向 近年の分散データベースの世界では、AmazonのDynamo[2]やFacebookのCassandra[3]などを代表とする結果整合性(Eve

    分散システムの一貫性に関する動向について
  • 世界最強のソフトウェアアーキテクト

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは! マーケティングソリューションカンパニー(MSC)開発部の小川雄大です。 昨年11月に子会社のクロコスからヤフーに移りまして、現在はヤフーで開発を行っています。みなさまどうぞよろしくお願いします。 MSC開発部では、ヤフーが世界最強を目指してどう取り組んでいくかについて議論する会を毎週開催しています。今回はそこで今年の1月に僕が発表した「世界最強のソフトウェアアーキテクト」について公開したいと思います。 今回はヤフーに入ってはじめての発表ということもありテーマをどうしていくかはかなり悩んだ部分なのですが、テクニックよりもアーキテクトが持つべきマインドを共有することが次につなげていく上で大切になると考えたので、多少抽

    世界最強のソフトウェアアーキテクト
  • Riak Meetup Tokyo #4 その後の運用の話

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog データソリューション部の名嘉 真之介です。 現在は入社二年目で、レコメンデーションシステムの開発と運用周りを担当しています。 仕事内容に関しては期ごとに変化が多かったのですが、その中でRiakの運用を1年間続けています。 その結果、少しずつ運用のノウハウがたまってきており、今回のAdventCalendarがアウトプットの良い機会と考えて参加しています。 この記事の対象者 細かい説明を省くため、ある程度のRiakの知識があることを前提にしています。 主な対象者としては、Riakの運用に興味が有る方や実際に運用に携わっている方を想定しています。 Riak Meetup Tokyo #04 (2014/06/04) まず、題に入る

    Riak Meetup Tokyo #4 その後の運用の話
  • 知っておきたい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

    知っておきたい7つのID連携実装パターン
  • リアルタイム検索アプリでの通知の取り組み

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog リアルタイム検索アプリを担当しています、八木(@connvoi_tyou) と言います。 リアルタイム検索アプリバックエンドについて、 特にPush通知について書いていこうと思います! 通知機能 お気に入りワード通知というこのアプリの特徴的な機能があります。 これはキーワードを登録しておくとそれがTwitter上で急上昇すると通知が来る機能です(便利!)。 電車の路線、好きなサッカー選手などを登録しておくと、遅延が起きたり、ゴール決めた時に通知をしてくれる優れものです。 もともと、Twitterの検索アプリだったので、ユーザーが特定のキーワードをブックマークしたり、履歴からたどってどんどん検索していたという土壌があったので、検索せ

    リアルタイム検索アプリでの通知の取り組み
  • Sensu と Graphite による大規模インフラの監視

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション部の渡邉です。 サイトオペレーション部はデータセンタ・ネットワーク・サーバー・OS・ストレージといった全社的なインフラの管理運用や調査検証などを担当しています。 今回は、2013年に全社のプライベートクラウドとして導入した OpenStack の監視基盤として、OSS の Sensu と Graphite を採用した事例についてご紹介したいと思います。 採用に至るまで サイトオペレーション部では、もともと 2011 年から内製のプライベートクラウドを開発運用していました。 プライベートクラウドでは VM のホストとなるハイパーバイザを大量に運用する必要がありますが、その監視基盤として社内で一般的に利用され

    Sensu と Graphite による大規模インフラの監視
  • StormとKafkaによるリアルタイムデータ処理

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、鈴木カズです。 社内向けの監視システム構築のため、StormやKafkaを利用して開発を行っていました。 そのときの経験をもとに、まずStormによる実際のシステムがどんなものかということを紹介し、KafkaSpoutの処理内容、カスタマイズ方法、Stormのメッセージ処理などを説明したいと思います。 読者としては、StormやKafkaについて興味があり記事を読んだりしたことがあるがもう少し具体的な話を知りたい方、これから開発予定があるような方を想定しています。 StormとKafka Stormは簡単に言うと、リアルタイムに流れてくる大量のデータを処理するための分散システムです。Twitterのメッセージの分析など

    StormとKafkaによるリアルタイムデータ処理
  • 爆速JSONPをオープンソース化しました

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、ブログパーツ作成フレームワーク 爆速JSONP をGitHubにて公開しました。2012年8月にYahoo! JAPANのソフトウェアガイドラインをライセンスとするバージョンを公開しましたが、オープンソース化に伴い、CDNで配布しているファイルもGitHub版に差し替えています。(インターフェースは互換性を保っています) yahoojapan/bakusoku-jsonp · GitHub CDN版: https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js CDN版(圧縮済み): https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp

    爆速JSONPをオープンソース化しました
  • JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか? シェルスクリプトの場合(同期) たとえばシェルスクリプトで素直に書くと、次のようになります。

    JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
  • JSONP WebAPIを爆速で使いこなせるフレームワーク

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSONPに対応しているものがいくつかあります。ショッピング、オークション、YOLP、震災関連情報などです。 JSONPについて詳しくは過去記事を見てください。 他の形式に比べると、サーバーを準備しなくてもブラウザーだけで動かすことができ、古いブラウザーでも動くという、JSONPにしかないメリットがあります。夢のような形式!なのです。 …そのは

    JSONP WebAPIを爆速で使いこなせるフレームワーク
  • ヤフーにおけるパッケージ管理 - Yahoo! JAPAN Tech Blog

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R&D統括部 開発推進室 セキュリティプラットフォーム技術の戸田 薫です。 個人的に自宅では、 FreeBSD でよく遊んでいて、FreeBSDのパッケージ管理には、portsnap、portupgrade を利用していますが、ヤフーでは独自の方法で行われます。 その背景としてヤフーには、平均15億以上のPVを支えるためやサービスの付加価値のために何万台ものサーバがあり、サービスやシステムごとに大規模なシステムを構成する必要があるため、一般的なパッケージ管理システムよりもより柔軟で効率的なパッケージ管理が必要となっています。 今回は、ヤフーにおけるパッケージの管理についてご紹介します。 ヤフーインストーラ ヤフーでは

    ヤフーにおけるパッケージ管理 - Yahoo! JAPAN Tech Blog
  • 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を使いこなす(1)
  • Hadoopで、かんたん分散処理 (Yahoo! JAPAN Tech Blog)

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、地域サービス事業部の吉田一星です。 今回は、Hadoopについて、Yahoo! JAPANでの実際の使用例を交えながら書きたいと思います。Hadoopとは、大量のデータを手軽に複数のマシンに分散して処理できるオープンソースのプラットフォームです。 複数のマシンへの分散処理は、プロセス間通信や、障害時への対応などを考えなければならず、プログラマにとって敷居が高いものですが、 Hadoopはそういった面倒くさい分散処理を一手に引き受けてくれます。 1台では処理にかなり時間がかかるような大量のデータも、複数マシンに分散させることで、驚くべきスピードで処理を行うことができます。 例えば、今まで1台でやっていた、あるログ集計処理

    Hadoopで、かんたん分散処理 (Yahoo! JAPAN Tech Blog)
  • PHPでYahoo!のOAuth対応APIにアクセスしてみよう!

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、IDプラットフォーム技術の近藤です。 前回の記事ではYahoo! JAPAN のOAuthが採用しているSession Extensionについて簡単に紹介をしました。 そこでSession Extentionの一連のフローを開発者が意識することなく、OAuthに対応したYahoo! JAPANのAPIを使ってWebアプリを実装できるようにYahoo! JAPANデベロッパーネットワーク上にPHP SDKを公開しました。 今回はSDKを利用してマイ・オークション表示(ウォッチリスト・開催中のオークション)APIにアクセスする簡単なサンプルコードを作っていきたいと思います。 はじめに,Yahoo!デベロッパーネットワーク

    PHPでYahoo!のOAuth対応APIにアクセスしてみよう!