フロントエンドエンジニアもどきの備忘録

デザイナーやらコーダーを経てフロントエンドに落ち着きました。

Three.jsの初歩

Three.jsの勉強を始めようと思います。

まずは初歩。立方体をつくって、それぞれの面に画像を貼り付けて、適当に回転してみました。 (リビジョンは79です)

https://yossiy.github.io/study_three/1.html

// シーンを作成
var scene = new THREE.Scene();
// カメラを作成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// レンダラーを作成
var renderer = new THREE.WebGLRenderer();
// レンダラーを画面の大きさにセット
renderer.setSize( window.innerWidth, window.innerHeight );
// レンダラーをdomへ挿入
document.body.appendChild( renderer.domElement );
// 横幅 1 高さ 1 深さ 1 の立方体(頂点の集合)を作成
var geometry = new THREE.CubeGeometry( 10, 10, 10);
// マテリアル(表面)を作成
var materials = [];
var texloader = new THREE.TextureLoader();
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/1.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/2.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/3.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/4.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/5.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/6.jpg') } ) );
var material = new THREE.MeshFaceMaterial(materials);

// メッシュを作成
var cube = new THREE.Mesh( geometry, material );
// シーンにメッシュを追加
scene.add( cube );
// カメラの座標を手前へ 50 に設定(+で手前、-で前方)
camera.position.z = 50;
// ライトを作成
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 50, 50, 50 ).normalize();
scene.add(light);

// ライトを作成
var light2 = new THREE.DirectionalLight( 0x555555 );
light2.position.set( -50, -50, 50 ).normalize();
scene.add(light2);

// 動きの初期化
var angle = 0;
var xl = 20;
var zl = 20;
var yl = 20;
var radius = zl;

// アニメーション
var render = function () {
  requestAnimationFrame( render);

  // rotationで回転
  cube.rotation.x += 0.05;
  cube.rotation.y += 0.05;
  angle += 0.01;

  // 斜めに回転運動
  var cos = Math.cos(angle);
  var sin = Math.sin(angle);
  var x = xl + cos * radius;
  var y = yl + cos * radius;
  var z = zl + sin * radius;
  cube.position.x = x - xl;
  cube.position.y = y - yl;
  cube.position.z = z - zl;

  // レンダリング
  renderer.render(scene, camera);
}
render();

フロントエンドエンジニアになった

正確には今年の2月ぐらいからなってた。 いくつか受けて今の会社に拾ってもらってコードだけ書いてます。

実力不足なのは前々から感じてましたが、それをさらに痛感する日々。少しでもギャップを埋めるためにここ最近は結構仕事漬けになってしまってました。

以前は正直コーダーに毛が生えた程度でディレクターのようなデザイナーだったので、業務で保守のためにjQueryやらGlupやらをちょこちょこ弄るぐらい。前々職の制作会社時代の知識からあんまり進化せずにいました。

ダンなことをJSやHTMLでやり始めて初めて見えてきた周回遅れ感が半端ない。でもこっちの道へ進路変更できてよかったです。欲張らずにやりたいことをコツコツやってこうと思います。

あ、あとブログのタイトルはしばらくこのままでいこうと思います。まだまだなりたいのままの気持ちで頑張りたい。。

Webkit(Chrome/Safari)でtable内のcontent-boxが効かない

めったにハマらない罠だとは思うんですが、Webkitではtable直下の要素にcontent-boxが効かないです。

みたところcontent-boxを明示的に指定してもborder-boxな状態になっているようです。 Firefoxではこのようなことは起こりませんでした。

デモ

Chromeのデベロッパーツールでタッチイベントが効かない

皆さんもう気づかれてると思いますが、3月にデベロッパツールが新しくなってからタッチイベントをエミュレート設定できるチェックボックスが消えてますよね。 そして案の定タッチイベントが効きません。

JavaScriptでタッチイベント自体は存在するするのに、イベントが発火しなくて焦りますよね。 でも安心してください、Chromeのバージョン 49 のバグです。

↓ すでに修正がコミットされているようなのでそのうち治ると思われます。

https://codereview.chromium.org/1739533005

気長に待ちましょ〜...

iframe要素でclickなどのイベントが発火しない

iframeを含め以下の要素はマウスイベントとタッチイベントをサポートしていません。

<base> <bdo> <br> <head> <html> <iframe> <meta> <param> <script> <style> <title>

解決策としては、iframe要素のcontentDocumentプロパティからframe内の要素にアクセスできるので、以下のようにiframe内部にイベントを設定して対応します。

<iframe id="iframe" src="/" width="500" height="500"></iframe>
var iframeBody = document.getElementById('iframe').contentDocument.body;
iframeBody.onclick = function(){alert('clicked')}

デモ

ChromeとSafariでiframeにborder-radiusが効かない

解決策としては、外側をブロック要素で囲ってやって、それにborder-radiusoverflow:hiddenをかけてあげ、position:relativeを指定すると角丸に切り抜くことができます。

<div>
  <iframe src="hogehoge" width="500" height="500"></iframe>
</div>
div {
  position:relative;
  overflow:hidden;
  border-radius: 50%;
}

デモ

このバグ(?)はz-indexが関係しているらしくposition:staticでは切り抜けません。 逆にz-indexが効くrelativeabsolutefixedでも切り抜くことができるようです。

ちなみにiframe自体にborder-radiusをかけて内容を切り抜くことは現状無理そうでした。