HTML5での新しいWeb表現とコンテンツ開発事例【セミナーメモ】

DNP 森川裕美

HTML5&OSS-DB Festival ~2014 Spring~

日時 2014年04月11日（金）
主催 LPI-Japan

---


## 広義のHTML5

- セマンティクス
- オフラインとストレージ
- デバイスアクセス
- コネクティビティ
- マルチメディア
- グラフィック・エフェクト
- パフォーマンス
- CSS3

#### どこまでがHTML5？
領域は広がり続けている

#### HTML5はいつ「使える」のか
仕様の示す機能に対し、２種類以上のブラウザによる実装があると勧告へ。

#### 分断化が進むスマートデバイス
複数スクリーンサイズ、解像度への対応が求められる。

### 新しいWeb表現技術と開発事例
#### グラフィック表現

**これまで**

- フォントはデバイスに依存
- 共通のフォントが無くバラバラ

**CSS3 WebFonts**

- サーバ上のフォント
- 指定した共通のフォント表示

###### 閲覧環境に依存しないフォント表示が可能
##### @font-face

````css
@font-face {
  font-family : 'MyFontFamilyName;
  src : url(`fonts/MyFont.otf') formart(~opentype');

.myClass {
  font-family : "MyFontFamilyName';
}
````

##### iconFonts
アイコンにWebFontsを応用

##### メリット
**製作者**

- 製作コストの軽減
  - 画像化したテキストの更新の手間
  - 解像度対応
- マルチデバイス対応への柔軟性
  - デバイスの幅に合わせた文字改行
- SEO対策

**ユーザ**

- アクセシビリティ向上
  - スクリーンリーダーでも読み上げ可能
- ユーザビリティ
  - コピー＆ペースト
  - 拡大・縮小してもぼやけない
  - リクエスト数の削減による体感速度向上
  
##### 問題点
ブラウザに酔って対応フォント形式が異なる
フォントのライセンス
日本語フォントのデータ量#表示までのタイムラグがある

**Webフォントサービスで解決する**

#### Webフォントサービス
ブラウザに応じたフォント形式
環境に応じた複数のフォーマットを配信
フォントのライセンス
PV数、サイト数、サイト規模
表示に必要なフォントのみサブセット表示

##### writing-mode

文字表示の方向を指定する。

````css
.myClass {
  writing-mode : vertical-rl; //縦書き
  text-orientation : upright; //横組用の文字を正立させる。
}
````

##### Text-Shadow

テキストに影をつける

````css
.myClass {
  text-shadow : 5px 5px 3px #cccccc;
              /* 横方向のずれ　縦方向のずれ　ぼかし具合　影の色 */
}
````
##### Gradient

グラデーションを表現する

````css
.myClass {
  background-image :
      linear-gradatient(45deg, white, blue 40%, red);
      /* 角度、開始色、途中色、終了色 */
}
````

##### Canvas, Canvas API

図形を描画する
HTML Canvas 2D Context

````html
<canvas id + document.getElementById('drawarea');
````

````javascript
var ctx = canvas.getContext('2d');

ctx.beginPath();      // 線を描くと宣言
ctx.moveTo(20, 120);  // 書き始める場所
ctx.lineTo(20, 120);  // 線の終点
ctx.closePath();      // 描いた線を閉じる
ctx.stroke();         // 線を描画する。
````

##### getImageData

canvasのピクセルデータの取得

````javascript
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

拡大・縮小・移動・回転などを行う

````html
<div class="myContainar">
   <div class="myClass"></div>
</div>
````


````css
.myCOntainar {
  //奥行き
  perspective: 300;
}
.myClass {
   transform: rotateY(270deg)
              translateZ(400px);
   //Y軸の回転、Z軸方向への移動
````


#### 開発上の問題

レガシーブラウザ対応が課題。

##### 新技術を取り入れる際の考え方

- プログレッシブエンハンスメント
- 基準：古い環境 + 新しい環境も視野に入れる
- グレイスフルグラデーション
- 基準：新しい環境　+ 古い環境はレベルを落とす
- ポリフィル
- 基準：新しい環境　＋古い環境を新しい環境に近づける

Modernizr：機能の実装有無を調査するためのJavaScriptライブラリ

**ブラウザの機能の実装有無で判別する**

#### レスポンシブウェブデザイン
画面サイズに応じて表示を対応させる

#### レスポンシブウェブデザイン

- 各画面サイズでどのようなレイアウトが適切か検討が必要
  - コンテンツのいち関係
  - ３つの画面の構成を平行して検討
- CSSだけではなくJavaScriptも必要
  - 動的な操作を伴うUIの切り替え
  - 他ライブラリとの連携
    - アコーディオンUI
    - インナースクロール
- CMSのコンテンツの配慮

**様々な側面を考慮してデザインする必要がある**

### モバイル環境に適した情報提供のための技術

#### 位置情報の利用
##### GeoLoacation API
位置情報を扱う

文字表示の方向を指定する。

````javascript
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の知識が必要となる**