スマートフォン向けサービスにおける、Yahoo! JAPANのオープンソース活用事例
>100 Views
March 07, 11
スライド概要
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
スマートフォン向けサービスにおける、 Yahoo! JAPANのオープンソース活用事例 2011/3/4 ヤフー株式会社 木村 尚敬 ヤフー株式会社 藤木 裕介 Copyright (C) 2011 Yahoo JAPAN Corporation
概要 サマリー ‣ サービス開発における、User Interfaceの実装部分についての OSS導入事例、気をつける部分などを、Yahoo! JAPANの開発現 場から紹介します。 対象者 ‣ マークアップエンジニア、フロントエンドエンジニア 対象部分 ‣ User Interfaceの実装部分 対象技術 Copyright (C) 2011 Yahoo JAPAN Corporation
内容 はじめに ‣ 自己紹介、組織、サービス、トレンド OSS導入事例紹介 ‣ スマートフォン版Yahoo! JAPAN ‣ スマートフォン版Yahoo! クリップ 社内での取り組み ‣ 品質を保証し、効率的にプロダクトアウトするために まとめ Copyright (C) 2011 Yahoo JAPAN Corporation
はじめに Copyright (C) 2011 Yahoo JAPAN Corporation
自己紹介 木村尚敬 ‣ 制作本部 ウェブデベロップメント部 制作5 リーダー ‣ 2004年ヤフー株式会社入社 ‣ 検索系サービス担当 藤木裕介 ‣ 制作本部 ウェブデベロップメント部 制作5 ‣ 2007年ヤフー株式会社入社 ‣ iPhone版Yahoo! JAPAN UI実装担当 Copyright (C) 2011 Yahoo JAPAN Corporation
組織紹介 会社概要：ヤフーの組織 http://hr.yahoo.co.jp/outline/organization/ index.html Copyright (C) 2011 Yahoo JAPAN Corporation
組織紹介 R&D統括本部 制作本部：ウェブデベロップメント部 ‣ HTML、CSS、JavaScriptなどの 言語の実装を担う部門。 ‣ PCのブラウザに限らず、携帯電 話、スマートフォン、テレビなど、 さまざまなデバイスに向けたウェブ アプリケーション開発におけるUI実 装を担当。 Copyright (C) 2011 Yahoo JAPAN Corporation
制作の役割、本日の領域 Copyright (C) 2011 Yahoo JAPAN Corporation
UIの定義 サービス提供者 お客さま • 提供する「サービス」と、利用する「お客様」の、境界面 がUI Copyright (C) 2011 Yahoo JAPAN Corporation
企画〜制作 具体的 抽象的 要件 構造 戦略 骨格 表層 制作職（設計） 企画職 ユーザーニーズ調査 サイト目的策定 機能仕様策定 インタラクションデザイン 情報アーキテクチャ ビジュアルデザイン ユーザーエクスペリエンスの五段階：Jesse James Garrett著:ウェブ戦略としての「ユーザーエクスペリエンス」より Copyright (C) 2011 Yahoo JAPAN Corporation
制作〜開発 <! DOCTYPE html> <html> <head> --------- ------- -------- ---------- ------ -------- -- <? php --- ----- ------ ----- -------------- ------------- ----- ----------------- WD 表層 Web Developing DB DB DB PF FE Frontend Engineering Platform Engineering 開発職 制作職（実装） システム開発 Web標準 パフォーマンス アクセシビリティ SEO Copyright (C) 2011 Yahoo JAPAN Corporation データベース設計 ログ解析 パフォーマンスチューニング
本日の領域 <! DOCTYPE html> <html> <head> --------- ------- -------- ---------- ------ -------- -- <? php --- ----- ------ ----- -------------- ------------- ----- ----------------- WD 表層 制作〜開発 Web Developing DB DB DB PF FE Frontend Engineering Platform Engineering 開発職 制作職（実装） システム開発 Web標準 パフォーマンス アクセシビリティ SEO Copyright (C) 2011 Yahoo JAPAN Corporation データベース設計 ログ解析 パフォーマンスチューニング
トレンド Copyright (C) 2011 Yahoo JAPAN Corporation
PVトレンド 2010/07 2010/08 2010/09 2010/10 2010/11 2010/12 2011/01 Mac OS docomo au SoftBank Copyright (C) 2011 Yahoo JAPAN Corporation スマートフォン
スマートフォントレンド iPhone (iOS 4.x) Xperia(SO-01B) iPod touch 3.0 iPod touch 2.0 Desire(X06HT) iPod touch iPhone (iOS 3.x) iPod touch 4.0 iPhone 2.0 HT-03A GALAXY S(SC-02B) PVシェア(2010年10月) iPhone (iOS 4.x) iPod touch(iPod touch/4.0) IS03 LYNX 3D(SH-03C) Xperia(SO-01B/2.1) iPod touch(iPod touch/3.0) iPhone (iOS 3.x) Xperia(SO-01B/1.6) GALAXY S(SC-02B) GALAPAGOS(003SH) T-01C iPhone (iOS 2.x) Desire(X06HT) HT-03A IS06 Libero(003Z) iPod touch(iPod touch/2.0) Desire HD(001HT) iPod touch(iPod touch/1.0) DELL Streak(001DL) PVシェア(2011年1月) Copyright (C) 2011 Yahoo JAPAN Corporation
サービス、活用事例紹介 Copyright (C) 2011 Yahoo JAPAN Corporation
スマートフォン版 Yahoo! JAPAN • HTML5 – Local Storage – GeoLocation API – Touch Event • CSS3 – CSS Transform – CSS Gradient – CSS Media Queries • 「マルチデバイス時代に向けての Yahoo! JAPANの取り組み」 Copyright (C) 2011 Yahoo JAPAN Corporation
スマートフォン版Yahoo! JAPANでは… • 現在主に利用されているOSSはYUIのみ • しかもYUIの一部のAjaxモジュールしか使っていな い • OSSを積極的に使っているとは言えない Copyright (C) 2011 Yahoo JAPAN Corporation
なぜOSSをあまり使っていないか • 開発当初は対応端末がiPhone OS 1.x〜3.xと、サ ポート端末が少なく、検証も容易だった • そのためYUIやjQuery導入によるファイルサイズ増 加と実行速度の低下にネガティブな要素があった • DOM操作などほとんどの機能は、YUIやjQueryよ りも機能をしぼって軽量化した独自ライブラリを開 発して実装されている Copyright (C) 2011 Yahoo JAPAN Corporation
Androidの発売で状況が変わった • Android対応をする際に独自ライブラリにも改修が 入った • Android新機種の発売/バージョンアップのたびに 仕様が増え、都度調整している • 今後のシェア次第ではWindows Phone / Opera Mini / Firefox Mobileもサポートするかも？ • 多種多様な仕様が出てきた時に、独自ライブラリに 依存するのは限界がある Copyright (C) 2011 Yahoo JAPAN Corporation
今後 • もっとOSSの使用を進めていく予定 • 検討しているOSS ‣ YUI3 ‣ jQuery ‣ jQuery Mobile ‣ Closure Library Copyright (C) 2011 Yahoo JAPAN Corporation
Yahoo! UI Library • 米Yahoo!で開発されているJSライブラリ • YUI2からメジャーバージョンアップされ、より高 速化、柔軟な設計になっている • 機能ごとにモジュールが細かく分割されており、見 通しのよいコードが書ける • YUI 3.2.0からサポートブラウザにスマートフォン も含まれるようになった Copyright (C) 2011 Yahoo JAPAN Corporation
jQuery • 世界でも人気の高いJavaScriptライブラリ • $(ʻ#wapper>div>span:first-childʼ).css(...) のような直感的な記述で開発ができる • ライブラリに全機能が含まれているので便利 • その半面、使わないモジュールの分データの転送量 がもったいない Copyright (C) 2011 Yahoo JAPAN Corporation
jQuery Mobile • モバイル環境のサイト実装に最適化されているjQuery プラグイン • モバイルUIに適したUIパーツがいくつも用意されている • ネイティブのように横にアニメーションしてページング する機能も容易に実装できる • jQueryに加え、jQuery Mobileのソースも必要なの で、読み込む容量が大きい • ページのUIをJavaScriptでレンダリングしているた め、挙動がすこし重い Copyright (C) 2011 Yahoo JAPAN Corporation
Closure Library • Googleの開発しているJavaScriptライブラリ • YUI以上にモジュールが細分化されており、必要な ものをrequireして利用する • コンパイラがついており、実行すると最適化・最小 化されたコードが生成される • コンパイラにあわせたJavaScriptコードを記述す る必要がある Copyright (C) 2011 Yahoo JAPAN Corporation
今後 • スマートフォンのシェア拡大に合わせ、近々OSSを 使ったウェブアプリケーションとして構築しなおす 予定 • 大きなシェアを頂いているスマートフォン向けサイ トとして、開発時のナレッジはこれからもOSSコ ミュニティに還元していきたい Copyright (C) 2011 Yahoo JAPAN Corporation
Yahoo!クリップ • デバイス間をまたいで Webページをクリッピ ングできるサービス • iPhone / Android対 応 • ネイティブアプリのよう な操作感を実現 Copyright (C) 2011 Yahoo JAPAN Corporation
実は • 実はOSSは使われていない • 米Yahoo! で開発されたスマートフォン用の JavaScriptライブラリが使われている Copyright (C) 2011 Yahoo JAPAN Corporation
米Yahoo!製スマートフォンライブラリ • 米Yahoo!（yahoo.com）のトップページを始め、 配下の多くのスマートフォン向けページでこのライ ブラリが使われている • モバイル向けプラットフォームの一部として組み込 まれている Copyright (C) 2011 Yahoo JAPAN Corporation
米Yahoo!製スマートフォンライブラリ • OSSとしては公開されていない • 実装のベースはYUIと似ており、そのコードの一部 が YUI 3.2.0 に移植された Copyright (C) 2011 Yahoo JAPAN Corporation
YUI3.2.0 • YUI 3.2.0以降ではスマートフォンへのサポートが 強化されている • タッチイベントサポート • タッチイベントによるDrag&Drop • フリックUI • スクロールビュー • CSSトランジション（アニメーション）サポート Copyright (C) 2011 Yahoo JAPAN Corporation
YUI3.3.0 • YUI 3.3.0から、Androidもサポートブラウザに含 まれた Copyright (C) 2011 Yahoo JAPAN Corporation
今後 • できるタイミングでインターナルなライブラリか ら、OSSへ切り替えをする • OSSを利用してより多くのブラウザをサポートでき るようにしていきたい Copyright (C) 2011 Yahoo JAPAN Corporation
社内での取り組み Copyright (C) 2011 Yahoo JAPAN Corporation
品質の保証、効率的なプロダクトアウト ルール サービスブランディング トーン＆マナーの統一 振る舞いの一貫性 コーディングルール 品質の高い UIパーツ UI設計 端末の特性 画面の大きさ タッチＵＩの有無 UI実装 機種固有の実装手法 ナレッジ Copyright (C) 2011 Yahoo JAPAN Corporation
UI設計のガイドライン ポリシー ‣ サービスを提供するときに必ず守るべきことと、より良いサービ スの提供やよりヤフーらしさを表現することを記載 対象項目 ‣ サポート環境、画面解像度、プラグイン、ページ容量、ページレイ アウト、フォント、カラー、文字、ヘッダー、フッター、UIブ ロック別規定、UI構成要素別規定、表記、表現に関する規定 Copyright (C) 2011 Yahoo JAPAN Corporation
UI設計のガイドライン 例：サポートブラウザ URL ‣ http://help.yahoo.co.jp/help/jp/common/sys/sys-01.html モバイル・テレビサポートデバイス ‣ キャリア、画面サイズ、キャッシュサイズ、マークアップグループ などで分類 ‣ 900余りの端末をサポートしてグループ別に最適化 サポート基準 ‣ 一定のシェアを超えた場合にサポート（推奨環境）する。 ‣ 現在サポートしている環境は、日本の利用者のほぼすべてをカ バーしている。 Copyright (C) 2011 Yahoo JAPAN Corporation
UI実装のガイドライン 対象項目 ‣ HTMLマークアップガイドライン ‣ CSSコーディングガイドライン ‣ モジュール命名ガイドライン ‣ モバイル実装ガイドライン ‣ SEO実装ガイドライン ‣ アクセシビリティガイドライン ‣ メタ情報付与による文書の論理構造化 Copyright (C) 2011 Yahoo JAPAN Corporation
品質の高いUIパーツ スマートフォン共通テンプレート 概要 ‣ iOS/Androidなどのスマートフォンにて表示の最適化をおこなえ るテンプレートシステム ‣ 10月中旬より順次ヤフーサービスのiPhone版、Android版で実装 してリリース 特長 ‣ HTML5/CSS3/JavaScript ‣ WebstorageにてJavaScriptソースをキャッシュ、高速化 ‣ UI仕様設計のためのビジュアルライブラリなども同時提供 ‣ UI設計のガイドラインに準拠、統一されたインタラクション Copyright (C) 2011 Yahoo JAPAN Corporation
品質の高いUIパーツ スマートフォン共通テンプレート 対象項目 ‣ デフォルトマークアップテンプレート ‣ ヘッダ/フッタモジュール ‣ ナビゲーションモジュール ‣ 共通のJavaScript関数 ‣ CSSで環境判定をする共通CSSを実装 ‣ 対応サービスにおける命名規則の統一 ‣ その他 Copyright (C) 2011 Yahoo JAPAN Corporation
まとめ Copyright (C) 2011 Yahoo JAPAN Corporation
PVトレンド 2010/07 2010/08 2010/09 2010/10 2010/11 2010/12 2011/01 Mac OS docomo au SoftBank Copyright (C) 2011 Yahoo JAPAN Corporation スマートフォン
スマートフォントレンド iPhone (iOS 4.x) Xperia(SO-01B) iPod touch 3.0 iPod touch 2.0 Desire(X06HT) iPod touch iPhone (iOS 3.x) iPod touch 4.0 iPhone 2.0 HT-03A GALAXY S(SC-02B) PVシェア(2010年10月) iPhone (iOS 4.x) iPod touch(iPod touch/4.0) IS03 LYNX 3D(SH-03C) Xperia(SO-01B/2.1) iPod touch(iPod touch/3.0) iPhone (iOS 3.x) Xperia(SO-01B/1.6) GALAXY S(SC-02B) GALAPAGOS(003SH) T-01C iPhone (iOS 2.x) Desire(X06HT) HT-03A IS06 Libero(003Z) iPod touch(iPod touch/2.0) Desire HD(001HT) iPod touch(iPod touch/1.0) DELL Streak(001DL) PVシェア(2011年1月) Copyright (C) 2011 Yahoo JAPAN Corporation
スマートフォン版 Yahoo! JAPAN • HTML5 – Local Storage – GeoLocation API – Touch Event • CSS3 – CSS Transform – CSS Gradient – CSS Media Queries • 「マルチデバイス時代に向けての Yahoo! JAPANの取り組み」 Copyright (C) 2011 Yahoo JAPAN Corporation
今後 • スマートフォンのシェア拡大に合わせ、近々OSSを 使ったウェブアプリケーションとして構築しなおす 予定 • 大きなシェアを頂いているスマートフォン向けサイ トとして、開発時のナレッジはこれからもOSSコ ミュニティに還元していきたい Copyright (C) 2011 Yahoo JAPAN Corporation
Yahoo!クリップ • デバイス間をまたいで Webページをクリッピ ングできるサービス • iPhone / Android対 応 • ネイティブアプリのよう な操作感を実現 Copyright (C) 2011 Yahoo JAPAN Corporation
今後 • できるタイミングでインターナルなライブラリか ら、OSSへ切り替えをする • OSSを利用してより多くのブラウザをサポートでき るようにしていきたい Copyright (C) 2011 Yahoo JAPAN Corporation
品質の保証、効率的なプロダクトアウト ルール サービスブランディング トーン＆マナーの統一 振る舞いの一貫性 コーディングルール 品質の高い UIパーツ UI設計 端末の特性 画面の大きさ タッチＵＩの有無 UI実装 機種固有の実装手法 ナレッジ Copyright (C) 2011 Yahoo JAPAN Corporation
質問 Copyright (C) 2011 Yahoo JAPAN Corporation
ありがとうございました。 Copyright (C) 2011 Yahoo JAPAN Corporation