Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon [bower]インストール (2016/07/25)

npm(Node.jsパッケージ管理)インストール

# aptitude install npm
# ln -s /usr/bin/nodejs /usr/bin/node

bowerインストール

# npm install -g bower

bower確認・アップデート

$ bower -v
1.7.9
$ bower update
bower jquery#^3.1.0             cached https://github.com/jquery/jquery-dist.git#3.1.0
bower jquery#^3.1.0           validate 3.1.0 against https://github.com/jquery/jquery-dist.git#^3.1.0

bowerでパッケージインストール

$ bower install jquery
$ bower list
bower check-new     Checking for new versions of the project dependencies...
yoo /home/yoo
└── jquery#3.1.0 extraneous

$ bower install bootstrap
bower bootstrap#*           not-cached https://github.com/twbs/bootstrap.git#*
bower bootstrap#*              resolve https://github.com/twbs/bootstrap.git#*
bower bootstrap#*             checkout v3.3.6
bower bootstrap#*             resolved https://github.com/twbs/bootstrap.git#3.3.6
bower jquery#1.9.1 - 2      not-cached https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower jquery#1.9.1 - 2         resolve https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower jquery#1.9.1 - 2        checkout 2.2.4
bower jquery#1.9.1 - 2        resolved https://github.com/jquery/jquery-dist.git#2.2.4

Unable to find a suitable version for jquery, please choose one by typing one of the numbers below:
    1) jquery#1.9.1 - 2 which resolved to 2.2.4 and is required by bootstrap#3.3.6
    2) jquery#^3.1.0 which resolved to 3.1.0 and is required by yoo

Prefix the choice with ! to persist it to bower.json

? Answer 1
bower jquery#1.9.1 - 2         install jquery#2.2.4
bower bootstrap#^3.3.6         install bootstrap#3.3.6

jquery#2.2.4 bower_components/jquery

bootstrap#3.3.6 bower_components/bootstrap
└── jquery#2.2.4
icon 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" />

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

<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

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