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
1.1k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
260
26新卒_総合職採用_会社説明資料
livesense
PRO
0
4.7k
株式会社リブセンス会社紹介資料 / 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
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.7k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
360
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
350
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
530
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
130
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Speed Design
sergeychernyshev
27
810
Making Projects Easy
brettharned
116
6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Why Our Code Smells
bkeepers
PRO
336
57k
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を利用しているかを管理す る必要があるかも
次回