DNP 森川裕美
HTML5&OSS-DB Festival ~2014 Spring~
日時 2014年04月11日（金）
主催 LPI-Japan
広義のHTML5
- セマンティクス
- オフラインとストレージ
- デバイスアクセス
- コネクティビティ
- マルチメディア
- グラフィック・エフェクト
- パフォーマンス
- CSS3
どこまでがHTML5？
領域は広がり続けている
HTML5はいつ「使える」のか
仕様の示す機能に対し、２種類以上のブラウザによる実装があると勧告へ。
分断化が進むスマートデバイス
複数スクリーンサイズ、解像度への対応が求められる。
新しいWeb表現技術と開発事例
グラフィック表現
これまで
- フォントはデバイスに依存
- 共通のフォントが無くバラバラ
CSS3 WebFonts
- サーバ上のフォント
- 指定した共通のフォント表示
閲覧環境に依存しないフォント表示が可能
@font-face
@font-face {
font-family : 'MyFontFamilyName;
src : url(`fonts/MyFont.otf') formart(~opentype');
.myClass {
font-family : "MyFontFamilyName';
}
iconFonts
アイコンにWebFontsを応用
メリット
製作者
- 製作コストの軽減
- 画像化したテキストの更新の手間
- 解像度対応
- マルチデバイス対応への柔軟性
- デバイスの幅に合わせた文字改行
- SEO対策
ユーザ
- アクセシビリティ向上
- スクリーンリーダーでも読み上げ可能
- ユーザビリティ
- コピー＆ペースト
- 拡大・縮小してもぼやけない
- リクエスト数の削減による体感速度向上
問題点
ブラウザに酔って対応フォント形式が異なる
フォントのライセンス
日本語フォントのデータ量#表示までのタイムラグがある
Webフォントサービスで解決する
Webフォントサービス
ブラウザに応じたフォント形式
環境に応じた複数のフォーマットを配信
フォントのライセンス
PV数、サイト数、サイト規模
表示に必要なフォントのみサブセット表示
writing-mode
文字表示の方向を指定する。
.myClass {
writing-mode : vertical-rl; //縦書き
text-orientation : upright; //横組用の文字を正立させる。
}
Text-Shadow
テキストに影をつける
.myClass {
text-shadow : 5px 5px 3px #cccccc;
/* 横方向のずれ 縦方向のずれ ぼかし具合 影の色 */
}
Gradient
グラデーションを表現する
.myClass {
background-image :
linear-gradatient(45deg, white, blue 40%, red);
/* 角度、開始色、途中色、終了色 */
}
Canvas, Canvas API
図形を描画する
HTML Canvas 2D Context
<canvas id + document.getElementById('drawarea');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 線を描くと宣言
ctx.moveTo(20, 120); // 書き始める場所
ctx.lineTo(20, 120); // 線の終点
ctx.closePath(); // 描いた線を閉じる
ctx.stroke(); // 線を描画する。
getImageData
canvasのピクセルデータの取得
var imageData = ctx.getImageData(0, 0, 100, 100);
/* 開始x座標, 開始y座標, 取得範囲の幅, 取得範囲の高さ */
imageData.with // imageDataの幅
imageData.hight // imageDataの高さ
imageData.data //rgbaの値
その他
- 図形を描画する
- 画像を組み込む
- 文字の描画
- 合成
- フィルター
ブラウザ上で多彩なグラフィックス操作が可能に
Web標準技術のアニメーションの種類
- SMIL(SVG)アニメーション
- CSS3アニメーション
- Canvasアニメーション
- JavaScriptでの段階的な属性値変更
CreateJS
- インタラクティブコンテンツの製作をサポートするJavaScriptライブラリ
- オープンソース(MITライセンス)
- AdobeやMicroSoftがスポンサー
- FlashからアニメーションのHTML5変換
- Canvasベース
- Canvasの描画処理のハンドリング
- パーツに対するインタラクションをサポート
ツールの助けを借りれば、Flashコンテンツ開発の経験も生かせる
tansform
拡大・縮小・移動・回転などを行う
<div class="myContainar">
<div class="myClass"></div>
</div>
.myCOntainar {
//奥行き
perspective: 300;
}
.myClass {
transform: rotateY(270deg)
translateZ(400px);
//Y軸の回転、Z軸方向への移動
開発上の問題
レガシーブラウザ対応が課題。
新技術を取り入れる際の考え方
- プログレッシブエンハンスメント
- 基準：古い環境 + 新しい環境も視野に入れる
- グレイスフルグラデーション
- 基準：新しい環境 + 古い環境はレベルを落とす
- ポリフィル
- 基準：新しい環境 ＋古い環境を新しい環境に近づける
Modernizr：機能の実装有無を調査するためのJavaScriptライブラリ
ブラウザの機能の実装有無で判別する
レスポンシブウェブデザイン
画面サイズに応じて表示を対応させる
レスポンシブウェブデザイン
- 各画面サイズでどのようなレイアウトが適切か検討が必要
- コンテンツのいち関係
- ３つの画面の構成を平行して検討
- CSSだけではなくJavaScriptも必要
- 動的な操作を伴うUIの切り替え
- 他ライブラリとの連携
- アコーディオンUI
- インナースクロール
- CMSのコンテンツの配慮
様々な側面を考慮してデザインする必要がある
モバイル環境に適した情報提供のための技術
位置情報の利用
GeoLoacation API
位置情報を扱う
文字表示の方向を指定する。
navigator.geolocation
.getCurrentPosition(success, error);
function success(position){
var latitude = position.coords.latitude; //緯度
var longitude = position.coords.longitude; //軽度
function error(){
//エラー処理
}
PCとスマートフォンではユーザの使用目的や状況、環境が異なる
- PC(例)
- 自宅やオフィスで仕様
- 休日行きたい展示を探す
- スマートフォン（例）
- 屋外で使用
- 近くで開催されている展示を探す
よりユーザコンテキストに応じた情報を提示できる
まとめ
- CSSで多彩な表現が可能に
- フォント、文字組、グラデーション、効果などのグラフィック表現
- これまで画像で対応していたものをCSSで
- マルチデバイス対応
- 多彩なグラフィック操作
- インタラクティブな操作
- アニメーション表現
- ユーザーの利用状況に応じたコンテンツの提供
- スクリーンサイズに応じたレイアウト
- 位置情報を利用した情報表示
魅力的な表現とより良い体験を支えるための技術
HTML5はすでに使える技術
- 関連技術は広がり続けている
- 使えるところから取り入れる
- 安定している仕様
- 先行実装はベンダープレフィックスが必要
- ツールやライブラリの助けを借りる
- クライアントと合意をとる
- 対象ブラウザ
- 未対応のブラウザの扱い
デザイン領域とエンジニアリング領域のオーバーラップが必要
- これまでのPSDベースの製作フローでは無理が生じる
- どのような見せ方が効果的か、素材作りの段階から試行錯誤が必要
- アニメーションの過程まで考えなければならない
- デザイナーとコーダーの協業
- お互いの分野の知識が必要
- 技術的な裏付け
- プロトタイピング
- 早めにテストをして早期に問題に対応する
様々な職種でHTML5の知識が必要となる