SlideShare a Scribd company logo
Developing for TV: その1
(テレビの判別)
デイビス ダニエル
Opera Software
Developing for TV: その1
(テレビの判別)
デイビス ダニエル
Opera Software
テレビで遊んだ
:-)
テレビで遊んだ
:-)
いろいろ学んだ
:-(
いろいろ学んだ
:-(
•文字入力が楽ではない•文字入力が楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
あらっ、
ちょっと待った…
あらっ、
ちょっと待った…
モバイルウェブと
同じじゃないか!
モバイルウェブと
同じじゃないか!
さようでござる。さようでござる。
結論…結論…
理想:
テレビ専用の
ページ
理想:
テレビ専用の
ページ
妥協:
モバイル専用
ページのテレビ化
妥協:
モバイル専用
ページのテレビ化
方法:
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

論文紹介: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
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
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
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / 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
 
【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
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
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
 
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.
 
論文紹介: 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
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
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
 
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
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 

Recently uploaded (16)

論文紹介: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...
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
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
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / 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...
 
【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
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
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 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の勉強会で発表されたものです。
 
論文紹介: 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
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
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 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
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 

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