yoo-s.com

Chromeでパスワード自動入力阻止

HTML5 2015/01/28

通常inputタグで「autocomplete="off"」とすると、自動入力が阻止できる。ただChromeでは（バージョン 40.0.2214.93現在）この設定が反映されず自動入力されてしまい、思わぬトラブルになってしまう。

クライアント側のChrome設定で阻止するのも何だか。力技ですが、HTMLにダミーのパスワードタグを記述しておくと回避できる模様。

[Flotr2]使ってみる

HTML5 2014/06/19

HTML5のグラフライブラリ「Flotr2」を使ってみる。

JavaScriptは「flotr2.min.js」を読み込み、表示する要素のあとにグラフ実行スクリプトを記述する。 ※データはあらかじめスクリプト等で、多次元配列を生成 ※getElementById()にidを指定 ※canvasを利用するので、グラフ表示幅、高さを指定

(function function_name(container, horizontal) { var graph = Flotr.draw(container, graph_data, {options}); })(document.getElementById(id));

HTML

  
    
    
    
        .graph {
            margin: 5px;
            width: 400px;
            height: 200px;
        }
    

    
        var pie_values = [
        {data : [[0, 64800]], label : &#039;データ1&#039;},
        {data : [[0, 712800]], label : &#039;データ2&#039;},
        {data : [[0, 447120]], label : &#039;データ3&#039;},
        {data : [[0, 231594]], label : &#039;データ4&#039;},
        {data : [[0, 108000]], label : &#039;データ5&#039;}
        ];

        var bars_values = [
        {data : [[5, 32400],[4, 32400]], label : &#039;データ1&#039;},
        {data : [[6, 237600],[5, 237600],[4, 237600]], label : &#039;データ2&#039;},
        {data : [[6, 149040],[5, 149040],[4, 149040]], label : &#039;データ3&#039;},
        {data : [[6, 77198],[5, 77198],[4, 77198]], label : &#039;データ4&#039;},
        {data : [[5, 54000],[4, 54000]], label : &#039;データ5&#039;}
        ];

graph.js

(function basic_pie(container) {
    var graph;

    graph = Flotr.draw(
        container,
        company_sales_graph_values,
        {
            HtmlText : false,
            grid : {
                verticalLines : false,
                horizontalLines : false
            },
            xaxis : { showLabels : false },
            yaxis : { showLabels : false },
            pie : {
                show : true, 
                explode : 6
            },
            mouse : { track : true },
            legend : {
                position : 'ne',
                backgroundColor : '#ffffff'
            }
        }
    );
})(document.getElementById("values1-graph"));

(function bars_stacked(container, horizontal) {
  var graph, i;

  graph = Flotr.draw(
    container,
    month_sales_graph_values,
    {
        legend : {
            backgroundColor : '#D2E8FF' // Light blue 
        },
    bars : {
        show : true,
        stacked : true,
        horizontal : horizontal,
        barWidth : 0.6,
        lineWidth : 1,
        shadowSize : 0
    },
    xaxis : {
        noTicks : 12,
        tickFormatter : function (n) {
            n = Math.round(n);
            return n + '月';
        },
        min: 1,
        max: 12 
    },
    mouse : { track : true },
    grid : {
      verticalLines : horizontal,
      horizontalLines : !horizontal
    },
    legend : {
        position : 'ne',
        backgroundColor : '#ffffff'
    }
  });
})(document.getElementById("values2-graph"));

グラフ種類

lines
bars
candles
pies
bubbles
radar

DOM操作の最適化によるJavaScriptチューニングにチャレンジ！

HTML5 2013/09/26

HTML5エキスパートで有名な吉川さん（同性w）からCodeIQの問題があったので挑戦！

「DOM操作の最適化によるJavaScriptチューニングにチャレンジ！」

オリジナル

    var button = document.querySelector('button'),
        ul = document.querySelector('#output'),
        itemCount = 0;

    function addItems() {
      for ( var i = 0; i < 10; i++ ) {
        itemCount++;
        ul.innerHTML += ''
                      + 'アイテム' + itemCount + ''
                      + '詳細' + itemCount + ''
                      + '';
      }
    }

30分くらいでざっとコーディングして提出

提出コード

    var button = document.querySelector('button'),
        ul = document.getElementById('output'),
        itemId = 0;

    var itemTemplate = '';
    var addCount = 10;
    var output = document.getElementById("output");

    function createItem() {
        itemId++;
        var item = new Object();
        item.title = 'アイテム' + itemId;
        item.detail = '詳細' + itemId;
        return item;
    }

    function loadItemTemplate(item) {
        var li = document.createElement('li'); 
        var article = document.createElement('article');
        var h1 = document.createElement('h1');
        var p = document.createElement('p');

        article.setAttribute('class', 'item');
        h1.setAttribute('class', 'title');
        p.setAttribute('class', 'detail');

        h1.textContent = item.title;
        p.textContent = item.detail;

        article.appendChild(h1);
        article.appendChild(p);
        li.appendChild(article);
        return li;
    }

    function addItems() {
      for ( var i = 0; i < addCount; i++ ) {
        itemTemplate = loadItemTemplate(createItem());
        document.getElementById('output').appendChild(itemTemplate);
      }
    }

テンプレートのHTML生成がループしてるので無駄だなと思いつつ、この程度だと計測時間が変わらなかったのでとりあえず。

丁寧にアドバイスを頂きました。

Document Fragmentを経由
getElementById()は高コストなのでキャッシュする

提出コード

    var button = document.querySelector('button'),
        ul = document.getElementById('output'),
        itemId = 0;

    var template;
    var addCount = 10;
    var li;
    var article;
    var h1;
    var p;

    loadItemTemplate();

    function createItem() {
        itemId++;
        var item = new Object();
        item.title = 'アイテム' + itemId;
        item.detail = '詳細' + itemId;
        return item;
    }

    function loadItemTemplate() {
        template = document.createElement('li'); 
        article = document.createElement('article');
        h1 = document.createElement('h1');
        p = document.createElement('p');

        article.setAttribute('class', 'item');
        h1.setAttribute('class', 'title');
        p.setAttribute('class', 'detail');

        article.appendChild(h1);
        article.appendChild(p);
        template.appendChild(article);
    }

    function bindItem(item) {
        h1.textContent = item.title;
        p.textContent = item.detail;
        var itemRow = template.cloneNode(true);
        ul.appendChild(itemRow);
    }

    function addItems() {
      for ( var i = 0; i < addCount; i++ ) {
          bindItem(createItem());
      }
    }

cloneNode()を利用してみたけど、なんかViewの分離がちょっと汚くなっちゃたかな？ insertNode()とかを使って、ツリーを操作した方がスムーズなのかも。

WebGLとミュージックビデオ

HTML5 2013/01/16

ROMEのデモサイトで、HTML5 x WebGLを使ってミュージックビデオを作ろうというプロジェクトらしいです。

ライブラリは「Three.js」をメインに使っている模様。

WEBGL EXAMPLESにいくつかのサンプルがあります。これとか凄い質感。ソースどうやって吐き出してるんだろうか？

いちおう、サンプルコードは
3-dreams-of-blackからダウンロードできるみたいです。

HTML5ネタ

HTML5 2012/12/01

HTML5 の Canvas を使用して作成したゲームでユーザー入力を処理する

Play Sound on Hover – Web Audio API Edition

・THREE.CubeGeometry ・THREE.CylinderGeometry ・THREE.ExtrudeGeometry ・THREE.IcosahedronGeometry ・THREE.LatheGeometry ・THREE.OctahedronGeometry ・THREE.PlaneGeometry ・THREE.SphereGeometry ・THREE.TorusGeometry ・THREE.TorusKnotGeometry ・THREE.BinaryLoader ・THREE.UTF8Loader

だいたい名前で想像がつくが、今回は直方体の CubeGeometry を利用。

MeshLambertMaterial() で光反射のマテリアルを作成。元の3Dオブジェクトとマテリアルを引数に、Mesh()でCubeオブジェクトを作成し、Sceneに追加します。（Three.jsの場合、Cubeオブジェクトというよりメッシュと言った方が通じるか？）

var geometry = new THREE.CubeGeometry(50, 50, 50);
var params =  {
    color: 0xffffff,
    shading: THREE.FlatShading,
    overdraw: true
};
var material = new THREE.MeshLambertMaterial(params);
var cube = new THREE.Mesh(geometry, material);
cube.scale.y = Math.floor(Math.random() * 2 + 1);
cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);

SceneにLightを追加

Lightを追加する事で、3Dに影をつけて奥行き感を出します。

var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.x = 0.5;
directionalLight.position.y = 1.5;
directionalLight.position.z = 3.5;
directionalLight.position.normalize();
scene.add(directionalLight);

var ambientLight = new THREE.AmbientLight(0x10);
scene.add(ambientLight);

Lightには以下のものがある。

・THREE.AmbientLight ・THREE.DirectionalLight ・THREE.PointLight ・THREE.SpotLight

どう違うかは、後に調べてみよう。。。

レンダリングする

Renderer系には以下の種類があるようだが、今回は無難に CanvasRenderer を利用する。

・CanvasRenderer ・WebGLRenderer ・DOMRenderer ・SVGRenderer

CanvasRenderer.domElement をcontainer(HTML要素)に追加後、Scene と Camera をレンダリングする。

renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);

とりあえず3D静止オブジェクトが描画される。

アニメーションさせる

アニメーションさせる場合は requestAnimationFrame() で時間軸をつけてやる。

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var timer = Date.now() * 0.0001;
    camera.position.x = Math.cos(timer) * 200;
    camera.position.z = Math.sin(timer) * 200;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

animate() でrequestAnimationFrame()を連続で呼び、render()で状態に応じてレンダリング処理している。

Demo・サンプルソース

Demo



    
        Cube Sample
        
        
        
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        
    
    

        

        
        

        
            var container, stats;
            var camera, scene, renderer;

            init();
            animate();

            function init() {
                container = document.getElementById(&#039;container&#039;);

                addCamera();
                addSecne();
                addGrid();
                addMaterial();
                addLight();
                addRenderer();
                //addStatus();

                window.addEventListener(&#039;resize&#039;, onWindowResize, false);
            }

            function addCamera() {
                var left = window.innerWidth / -2;
                var right = window.innerWidth / 2;
                var top = window.innerHeight / 2;
                var bottom = window.innerHeight / -2;

                camera = new THREE.OrthographicCamera(left, right, top, bottom, -2000, 1000);
                camera.position.x = 200;
                camera.position.y = 100;
                camera.position.z = 200;
            }

            function addSecne() {
                scene = new THREE.Scene();
            }

             function addGrid () {
                var geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3(-500, 0, 0 ));
                geometry.vertices.push( new THREE.Vector3(500, 0, 0));

                for ( var i = 0; i <= 20; i ++ ) {
                    var parameters = { color: 0x000000, opacity: 0.2 };
                    var line = new THREE.Line(geometry, new THREE.LineBasicMaterial(parameters));
                    line.position.z = ( i * 50 ) - 500;
                    scene.add( line );

                    var line = new THREE.Line(geometry, new THREE.LineBasicMaterial(parameters));
                    line.position.x = ( i * 50 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;
                    scene.add( line );
                }
            }

            function addMaterial () {
                var geometry = new THREE.CubeGeometry( 50, 50, 50 );
                var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } );

                for ( var i = 0; i < 100; i ++ ) {
                    var cube = new THREE.Mesh( geometry, material );
                    cube.scale.y = Math.floor( Math.random() * 2 + 1 );
                    cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
                    cube.position.y = (cube.scale.y * 50) / 2;
                    cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
                    scene.add( cube );
                }
            }

            function addLight () {
                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.x = 0.5;
                directionalLight.position.y = 1.5;
                directionalLight.position.z = 3.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);

                var directionalLight = new THREE.DirectionalLight(0xcccccc);
                directionalLight.position.x = 0.5;
                directionalLight.position.y = 1.5;
                directionalLight.position.z = 3.5;
                directionalLight.position.normalize();
                scene.add(directionalLight );

                var ambientLight = new THREE.AmbientLight(0x10);
                scene.add(ambientLight);
            }

            function addRenderer () {
                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild(renderer.domElement);
            }

            function addStatus() {
                stats = new Stats();
                stats.domElement.style.position = &#039;absolute&#039;;
                stats.domElement.style.top = &#039;0px&#039;;
                container.appendChild(stats.domElement);
            }

            function onWindowResize() {
                camera.left = window.innerWidth / - 2;
                camera.right = window.innerWidth / 2;
                camera.top = window.innerHeight / 2;
                camera.bottom = window.innerHeight / - 2;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                stats.update();
            }

            function render() {
                var timer = Date.now() * 0.0001;
                camera.position.x = Math.cos(timer) * 200;
                camera.position.y = Math.sin(timer) * 200;
                //camera.position.z = Math.sin(timer) * 200;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
            }

Chrome環境で、テクスチャーをつけてないので結構スムーズに動きます。何となく、Papervision3Dに近い気がしました。ただ、これだけのサンプルだと何のイベントもないので「で？」ですねw 次は、イベント使ったサンプルを調べてみよう。

メモ：モデル

iClone Real-time Filmmaking

HTML5 Filesystem API ドラッグ＆ドロップ

HTML5 2012/08/24

HTML5 Filesystem APIと「input type="file"」利用してドラッグ＆ドロップを実現するサンプル input[type="file"]とFileSystem APIを連携する方法

HTML5フレームワーク

HTML5 2012/07/08

http://dev.classmethod.jp/ria/javascript-mvc-frameworks/

HTML5実行・共有サービス

HTML5 2012/07/08

フロントエンドエンジニアのためのブラウザ上でHTML5コーディング・実行・共有できるサービス一覧 JS do JS Fiddle JS bin Dabllet Thimble Fiddlesalad Codepen Adobeオープンソース「Brackets」

とりあえず、投稿されたサンプルを観てるだけでも参考になりますね。

画像を高速化

HTML5 2012/07/08

最近、HTML5を高速化する方法が流行ってますね。

HTML5でアプリ！と言ってもやはりネイティブに比べると格段に遅いです。とくに相対的にスマホやタブレットアプリの処理では顕著だと思います。ブラウザベースなので、基本どうやってもネイティブには勝てないと思いますが、それでも現状より速くする手法は色々ありますよね。

サイバーエージェントの中の人、「HTML5 Web Applicationのつくりかた」の記事も参考にちょっとメモしてみました。

小さな画像はbase64で直接埋め込み

小さな画像はCSSに直接画像をbase64で埋め込む。

みたいな

画像をbase64に変換するには、プログラミングするもよし、ツールを使うもよし。

ちなみにPHPだったら、

?php
$img = file_get_contents( &#039;画像URL&#039; );
if ( $img !== false ) {
    $img = base64_encode( $img );
}
?

CSS Sprite

いわゆる１枚画像で座標を指定して、画像をパーツを表示する手法ゲームのテクスチャでよく使われる手法ですね。

ちなみに、Adobe Fireworks CS6からは標準で書き出し機能が搭載されました。（それ以前は機能拡張で対応） CSSスプライト書き出し機能の使い方

Canvasタグ

これは言わずもがな。ただ、高機能な分面倒かな？と

var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '画像URL';
$("#sample").attr('width', img.width);
$("#sample").attr('height', img.height);
ctx.drawImage(img, 0, 0, img.width, img.height);