viewpoint

HTML5 Conferenceに行ってきた

Jan 25 2015

HTML5 Conferenceに行ってきた。面白そうなセッションがたくさんありましたが、僕が聞いたセッションは以下。

動画や資料はこちらにまとめられています。

プリンより滑らか。スムーズなアニメーションの作り方。

ブライアン・バートルズ: Mozilla Japan

ユーザーの目に届くまで何が行われているか

プロパティによってリフローが発生する

cssでアニメションさせる場合は、リフローを避ける。
marginを使うより、transformでアニメーションさせる。

リフローはDeveloper toolsで確認できる。

svgを使う場合

iframeやobjectで読み込むよりもimgで読み込むようが速い。

will-changeでレイヤー化

will-changeを使うと前もってレイヤー化することができる。 transform3d()よりもwill-changeのほうが良い。

CSS will-changeプロパティについて知っておくべきこと

コンポジター

とても理想的なアニメーションだが、transformとopacityしか対応していない。 ブラウザも限られる。

Web Animation API

現在はChromeにしか実装されていない。

まとめ

ブラウザの機能をしっかり把握して、リフローを発生させないことで滑らかなアニメーションを実装できる。

Web Componentsのアクセシビリティ

黒澤 剛志: 株式会社ミツエーリンクス

Webアクセシビリティとは

特定の環境に依存せずに見れる。
多様なデバイスに対応する。

Webアクセシビリティの3つのポイント

マシンがセマンティクスを理解。ユーザーの環境に合わせて情報・機能を提供。

Web Componentsとは

ページの構成要素をコンポーネント化にする。コンポーネントを組み合わせてページを構成。

Web Componentsとアクセシビリティ

コンポーネントのアクセシビリティを高めることが重要。
アクセシビリティの基本は同じ。

例:
プログレスバーであれば、音で作業率が分かる。
WAI-ARIAでセマンティクスを伝える。

Custom Elements

Shadow DOM

もともとのツリーとShadow DOMのツリーが合成されたものがページに表示される。

Shadow DOMでセマンティクスを指定するならば、適切なHTML要素を利用する。
適切なHTML要素が使えない場合、WAI-ARIAを利用する。

まとめ

コンポーネント単位でアクセシビリティを確保しやすくなる可能を持っている。
アクセシビリティの品質を維持・管理できる可能がある。
本質的にはWeb componentsを使わない場合と同じ。

2015年これからの日本のWebサイトパフォーマンスについて

HTML5 CONFERENCE パフォーマンス部パネルディスカッション 「2015年これからの日本のWebサイトパフォーマンスについて」

遅いと分かってからパフォーマンス改善すると、とても工数が掛かってしまい非効率。初めからパフォーマンスを意識して制作したほうが良い。

日本のWebパフォーマンスの現状

アメリカは1秒ほどでサイトが表示されるが、日本のサイトは7秒とかかかっている。 いろいろパフォーマンス改善できるツール(圧縮や結合など)が登場しているが、受託の場合運用などの問題で活用できていない。

パフォーマンス管理

パフォーマンスの計測は最低でも1週間はとる。
時間帯も気にする。昼よりも夜のほうがアクセスが集中するため、昼だけでなく夜のパフォーマンスも確認する。

今の高速化手法

ビジネスアプローチと技術的アプローチの双方が必要。

まとめ

とにかく通信料を減らすことがパフォーマンスに繋がる。
CSSスプライトもやりすぎない。適度にファイルを分割する。
画像を減らせるか、本当に必要な機能なのかをクライアントと話し合う。
PCは1MB、モバイルは100KB

【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現

WebGL + 3D models by using Three.js Blender Exporter

THREE.JSハンズオン

映画では要なものをTHREE.JSで考える。

初期設定

// レンダラーを生成
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 0.0);
renderer.setSize(window.innerWidth, window.innerHeight);

カメラの生成

new THREE.PerspectiveCamera(角度, アスペクト比, 手前, 奥行き)
camera.position.y = 100;
camera.position.z = 150;

ライトの設定

// 平行光源
new THREE.DirectionalLight(0xffffff);

シーンの生成

new THREE.Scene();

オブジェクトの生成

// 形
var planeGeometry = new THREE.PlaneBufferGeometry(縦横, 分割数.....);

// 材質
var planeMaterial = new THREE.MeshLambertMaterial({
  color: 0xdddddd
});

// 生成
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.position.y    = -100;
plane.rotation.x    = -Math.PI / 2;

キューブの生成

// 形
var boxGeometry = new THREE.BoxGeometry(50, 50, 50);

// 材質
var boxMaterial = new THREE.MeshLambertMaterial({
  color: cubeColor
});

// 生成
var cube = new THREE.Mesh(boxGeometry, boxMaterial);

シーンに追加

scene.add(plane);
scene.add(cube);
scene.add(light);

カメラの向き

camera.lookAt(cube.position);

アニメーション

(function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.005;

  render();
}());

THREE.JSとBlender

3Dモデルを作成したことがなくても、以外と緩いライセンスで色々な3Dモデルデータが配布されている。

3DモデルデータをWebGL用にコンパイルするためには、exporterを使う。

BlenderでTHREE.JSを使えるようにする

THREE.JSのAddonをBlender内のAddonにコピーします。
THREE.JSのAddonは、three.js/utils/exporters/blenderにあります。(io mesh threejsのような名前)

BlenderのAddonはアプリケーション/Blender.app/Contents/Resources/2.73/scripts/addonsにあるので、THREE.JSのAddonをコピーします。

次にBlenderを開いてfile/user Preferencesを開く。
Addonタブ内のfilderでthreeで検索する。
three.js formatg表示されるので、チェックを入れてSave User Settingsで保存する。これでBlenderでTHREE.JSが有効化される。

このエントリーをはてなブックマークに追加

Archive

© 2014- viewpoint N.K All rights reserved