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
75
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.
EM候補者向け転職会議説明資料
livesense
PRO
0
6
コロナで失われたノベルティ作成ノウハウを復活させた話
livesense
PRO
0
73
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
360
転職会議でGPT-3を活用した企業口コミ要約機能をリリースした話
livesense
PRO
0
1k
株式会社リブセンス マッハバイト_プレイブック
livesense
PRO
0
410
Tech Award 2021 選出方法
livesense
PRO
0
1k
株式会社リブセンス エンジニアリング組織を支える風土と制度
livesense
PRO
0
530
株式会社リブセンス・マッハバイト 採用候補者様向け資料
livesense
PRO
0
210
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
2k
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
580
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
490
Building Dashboards as a Hobby
egmc
0
110
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
500
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
MapLibreとAmazon Location Service
dayjournal
1
150
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
290
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
280
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Optimizing for Happiness
mojombo
370
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Fireside Chat
paigeccino
21
2.6k
Agile that works and the tools we love
rasmusluckow
325
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
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を利用しているかを管理す る必要があるかも
次回