Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon Chromeでパスワード自動入力阻止 (2015/01/28)
通常inputタグで「autocomplete="off"」とすると、自動入力が阻止できる。
ただChromeでは(バージョン 40.0.2214.93現在)この設定が反映されず自動入力されてしまい、思わぬトラブルになってしまう。

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




icon [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

icon DOM操作の最適化によるJavaScriptチューニングにチャレンジ! (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()とかを使って、ツリーを操作した方がスムーズなのかも。
    << 最初 < 前ページ 次ページ > 最後 >>