SlideShare a Scribd company logo
Developing for TV: その2
(テレビの判別)
デイビス ダニエル
Opera Software
Developing for TV: その2
(テレビの判別)
デイビス ダニエル
Opera Software
前回:
bit.ly/tvdev
前回:
bit.ly/tvdev
テレビ用の開発
は難しい
テレビ用の開発
は難しい
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
細かく言うと…細かく言うと…
3つの問題、
3つの解決方法
3つの問題、
3つの解決方法
Problem 1:
色
Problem 1:
色
Problem 2:
ナビゲーション
Problem 2:
ナビゲーション
キーコード
の確認:
bit.ly/keydown
キーコード
の確認:
bit.ly/keydown
Problem 3:
空間
Problem 3:
空間
overscan
モバイルウェブと
同じじゃないか!
モバイルウェブと
同じじゃないか!
さようでござる。さようでござる。
結論…結論…
理想:
テレビ専用の
ページ
理想:
テレビ専用の
ページ
妥協:
モバイル専用
ページのテレビ化
妥協:
モバイル専用
ページのテレビ化
方法:
Media Queries
(メディアクエリー)
を使う
方法:
Media Queries
(メディアクエリー)
を使う
わかった、わかった。
事例を見せてよ…
わかった、わかった。
事例を見せてよ…
はい、はい。はい、はい。
じゃ、ズームしたら
いいんじゃない?
じゃ、ズームしたら
いいんじゃない?
body {
-o-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
body {
-o-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
body {
font-size: 2em;
}
body {
font-size: 2em;
}
body {
font-size: 3em;
}
body {
font-size: 3em;
}
「tv」 Media Type
(メディアタイプ)が
テレビに
使われていない
「tv」 Media Type
(メディアタイプ)が
テレビに
使われていない
だから
メディアクエリ
だから
メディアクエリ
メディアクエリ:
CSSの「if」分
メディアクエリ:
CSSの「if」分
@media (条件) {
風通のCSS
}
例えば:
@media (max-width: 600px) {
body {
font-size: 2em;
}
}
@media (条件) {
風通のCSS
}
例えば:
@media (max-width: 600px) {
body {
font-size: 2em;
}
}
シンタックス
および: and
または: ,(カンマ)
シンタックス
および: and
または: ,(カンマ)
ザ・パーフェクト
テレビ用のメディ
アクエリ…
ザ・パーフェクト
テレビ用のメディ
アクエリ…
(多分)(多分)
@media tv,
(width: 1920px) and
(height: 1080px),
(width: 1280px) and
(height: 720px) {
body {
font-size: 2em;
}
}
@media tv,
(width: 1920px) and
(height: 1080px),
(width: 1280px) and
(height: 720px) {
body {
font-size: 2em;
}
}
bit.ly/tvdev
デイビス ダニエル
Opera Software
bit.ly/tvdev
デイビス ダニエル
Opera Software

More Related Content

More from ourmaninjapan

testharness.js の基礎
testharness.js の基礎testharness.js の基礎
testharness.js の基礎
ourmaninjapan
 
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?ourmaninjapan
 
W3C Widgets: Why should I care?
W3C Widgets: Why should I care? W3C Widgets: Why should I care?
W3C Widgets: Why should I care? ourmaninjapan
 
Widgets in theory and in practice
Widgets in theory and in practiceWidgets in theory and in practice
Widgets in theory and in practiceourmaninjapan
 
Mobile web development without developing a mobile site
Mobile web development without developing a mobile siteMobile web development without developing a mobile site
Mobile web development without developing a mobile siteourmaninjapan
 
実際のウェブページコーディング
実際のウェブページコーディング 実際のウェブページコーディング
実際のウェブページコーディング ourmaninjapan
 
HTML5: New capabilities, new markup
HTML5: New capabilities, new markupHTML5: New capabilities, new markup
HTML5: New capabilities, new markup
ourmaninjapan
 
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
ourmaninjapan
 
スマートTVへの アプローチと制作
スマートTVへの アプローチと制作スマートTVへの アプローチと制作
スマートTVへの アプローチと制作ourmaninjapan
 
「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時
ourmaninjapan
 
Presentation Skills
Presentation SkillsPresentation Skills
Presentation Skills
ourmaninjapan
 

More from ourmaninjapan (12)

Web payments
Web paymentsWeb payments
Web payments
 
testharness.js の基礎
testharness.js の基礎testharness.js の基礎
testharness.js の基礎
 
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?
 
W3C Widgets: Why should I care?
W3C Widgets: Why should I care? W3C Widgets: Why should I care?
W3C Widgets: Why should I care?
 
Widgets in theory and in practice
Widgets in theory and in practiceWidgets in theory and in practice
Widgets in theory and in practice
 
Mobile web development without developing a mobile site
Mobile web development without developing a mobile siteMobile web development without developing a mobile site
Mobile web development without developing a mobile site
 
実際のウェブページコーディング
実際のウェブページコーディング 実際のウェブページコーディング
実際のウェブページコーディング
 
HTML5: New capabilities, new markup
HTML5: New capabilities, new markupHTML5: New capabilities, new markup
HTML5: New capabilities, new markup
 
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
 
スマートTVへの アプローチと制作
スマートTVへの アプローチと制作スマートTVへの アプローチと制作
スマートTVへの アプローチと制作
 
「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時
 
Presentation Skills
Presentation SkillsPresentation Skills
Presentation Skills
 

Recently uploaded

FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 

Recently uploaded (16)

FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 

テレビのウェブ開発:その2