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
83
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.
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
260
26新卒_総合職採用_会社説明資料
livesense
PRO
0
4.6k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
13k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
8.2k
中途セールス職_会社説明資料
livesense
PRO
0
200
EM候補者向け転職会議説明資料
livesense
PRO
0
87
コロナで失われたノベルティ作成ノウハウを復活させた話
livesense
PRO
0
210
転職会議でGPT-3を活用した企業口コミ要約機能をリリースした話
livesense
PRO
0
1.3k
Other Decks in Technology
See All in Technology
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
270
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.5k
Pwned Labsのすゝめ
ken5scal
2
460
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
190
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
Охота на косуль у древних
ashapiro
0
110
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
160
OPENLOGI Company Profile for engineer
hr01
1
20k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
490
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Code Review Best Practice
trishagee
67
18k
A better future with KSS
kneath
238
17k
RailsConf 2023
tenderlove
29
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Cult of Friendly URLs
andyhume
78
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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を利用しているかを管理す る必要があるかも
次回