Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5を使ってみる #TechLunch
Search
Livesense Inc.
PRO
April 23, 2014
Technology
0
86
HTML5を使ってみる #TechLunch
2012/05/30(水) @ Livesense TechLunch
発表者:島田 喜裕
Livesense Inc.
PRO
April 23, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
76
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
14
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.8k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
27k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
280
asken AI勉強会(Android)
tadashi_sato
0
120
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
460
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
140
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
280
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
430
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
150
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
The Invisible Side of Design
smashingmag
300
51k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Docker and Python
trallard
44
3.4k
Fireside Chat
paigeccino
37
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Navigating Team Friction
lara
187
15k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
HTML5を 使ってみる
モダンブラウザ対応 HTML5をサポートしているブラウザの普及は まだまだ。 ↓ よほどの理由がない限り、 HTML5をサポートする。 ↓ HTML5を使用する事は 時期尚早ということは ない。
機能実装の方向性 開発アプローチ • Regressive Enhancement • Graceful Degradation • Progressive
Enhancement
Regressive Enhancement 古いブラウザには、同等の機能をあらゆる手段を 使って気合いでエミュレート
Progressive Enhancement • 必要最小限の機能を用意。UAの能力に応じて 機能を拡張。 • 機能実装のスタイルとして、レガシーブラウザを 含む、すべてのブラウザに対し最低限動作する 機能を実装し、より高水準のモダンブラウザに は、よりリッチな機能を提供するような実装。
• 一般的なブラウザを基準としてデザインするけ ど、新しいブラウザでは積極的に進歩したデザ インを取り入れていく方法。
Graceful Degradation • デグレードして代替え機能を提供。 • 実装する機能をモダンブラウザーを基本水準と し、古いレガシーブラウザーに対しても、同等で はないものの、Polyfill (ポリフィル) を使うなどし
て、類似の機能を提供するような実装。 • 新しいブラウザを基準としてデザインし、古いブ ラウザではデザインのレベルを下げる方法。
機能実装の方向性 • 三者択一ではない。 • いずれも目的は同じ。すべての対象に必要な情報 を確実に提供。 • どこまで対応するか。対象ユーザーとコストとの兼 ね合い。
機能実装の方向性 • これまではRegressive Enhancementアプロー チで、同じ体験を実現するために、多大な苦労 を費やしてきた。 • HTML5 をはじめとした Open
Web の流れが加 速する今日、Regressive Enhancement というア プローチは、必ずしも理にかなった選択といえな い。 • Progressive Enhancement の考え方が重要。 例)Yahoo!JAPANのようにIE6で閲覧すると警告。
実装 HTML5からinput要素に追加された新属性から以 下を試す。 • autofocus・・・指定した入力欄にカーソルを自動 的にフォーカス • required・・・指定された入力項目が入力必須と なる •
placeholder・・・入力欄に初期値として表示 Ex.): 転職会議トップ
感想 ブラウザ毎に挙動が異なる点が若干気に なったが非常に便利。
Web Storage HTML5では、クッキーに代わるデータ保存の仕組 みとして、「Web Storage」と呼ばれる機能を利用で きる。 Web Storageは、ブラウザ側でKey-Value型で データを保存する機能のことで、現在のインター ネットを取り囲む環境に対応した「クッキーの後継
技術」ともいえる。
Web Storage • Web StorageとCookieの機能の差異 • 主要ブラウザはほぼ実装されている。 Cookie Web Strage
保存容量 4KB 5MB データの有効期限 あり なし セキュリティ サーバにデータを自動送 信 自動で送信しない IE Firefox Safari Chrome Opera Android iPhone 8~ 3.5~ 4.0~ 4.0~ 10.5~ 2.0~ 2.0~
2種類のWeb Storage • sessionStorage ウィンドウごとのセッションで有効なストレージ。ウィ ンドウ/タブ間では異なるsessionStorageとなり、 共有はできない。 • localStorage Webアプリケーション利用者のブラウザ内に永続
的にデータを保存するストレージ。 「ドメイン:ポート番号」の「オリジン」単位で共有。
The Storage interface • length … 保存されているデータの数を返す • key(n) …
保存されているn番目のkeyを返す • getItem(key) … keyに対応するvalueを取得す る • setItem(key, value)… keyとvalueのペアでデー タを保存する • removeItem(key) … keyに対応するvalueを削 除する • clear() … データをすべてクリアする
実装 要件 • sessionStorageが使えない場合には何もしな い。 • localStorage→cookieを使う。 • cookie、sessionStorage、localStorageを単独で も使える。
Ex.) • 相談板 • オススメ求人一覧
感想 • やっぱり便利。使いやすい。 • 利用するシーンによってはCookieは必要 • どこで、どうStorageを利用しているかを管理す る必要があるかも
次回