yoo-s.com

Labs

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

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

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

<input id="user_password" name="user[new_password]" type="password" value="" autocomplete="off" />
<input id="user_password_dummy" type="password" value="" style="display:none" />

[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

<head>	
	<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="flotr2.min.js"></script>
	<style>
		.graph {
			margin: 5px;
			width: 400px;
			height: 200px;
		}
	</style>

	<script>
		var pie_values = [
		{data : [[0, 64800]], label : 'データ1'},
		{data : [[0, 712800]], label : 'データ2'},
		{data : [[0, 447120]], label : 'データ3'},
		{data : [[0, 231594]], label : 'データ4'},
		{data : [[0, 108000]], label : 'データ5'}
		];

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

	</script>
</head>
<body>

	<div id="values1-graph" class="graph"></div>
	<div id="values2-graph" class="graph"></div>

	<script type="text/javascript" src="graph.js"></script>
</body>

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 += '<li><article class="item">'
                      + '<h1 class="title">アイテム' + itemCount + '</h1>'
                      + '<p class="detail">詳細' + itemCount + '</p>'
                      + '</article></li>';
      }
    }

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

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

ページの先頭に戻る