yoo-s.com

Labs

Chromeでパスワード自動入力阻止 (2015/01/28)

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

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

[Flotr2]使ってみる (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.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チューニングにチャレンジ！ (2013/09/26)

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

「」

オリジナル



    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()とかを使って、ツリーを操作した方がスムーズなのかも。

<< 最初 < 前ページ次ページ > 最後 >>

ページの先頭に戻る