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
250
26新卒_総合職採用_会社説明資料
livesense
PRO
0
4.5k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
13k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
8.1k
中途セールス職_会社説明資料
livesense
PRO
0
200
EM候補者向け転職会議説明資料
livesense
PRO
0
86
コロナで失われたノベルティ作成ノウハウを復活させた話
livesense
PRO
0
210
転職会議でGPT-3を活用した企業口コミ要約機能をリリースした話
livesense
PRO
0
1.3k
Other Decks in Technology
See All in Technology
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
300
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
1
200
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
660
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
220
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
500
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
610
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A Modern Web Designer's Workflow
chriscoyier
693
190k
GraphQLとの向き合い方2022年版
quramy
44
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Adopting Sorbet at Scale
ufuk
74
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Scaling GitHub
holman
459
140k
Docker and Python
trallard
44
3.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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を利用しているかを管理す る必要があるかも
次回