Labs

<< 最初 < 前ページ 次ページ > 最後 >>
HTML5 のトピック一覧 条件クリア
icon 2016/07/25 [bower]インストール

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

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


$ 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 2015/01/28 Chromeでパスワード自動入力阻止
通常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 2014/06/19 [Flotr2]使ってみる
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


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

このサイトについて

HTML5 & CSS3化しつつあるので、現在IEには対応してません。
できれば、Google Chromeやら Apple SafariのWebKit系をお勧めします。

DBからプログラムまで一応全て自作なので、バグってたらすいません。
実験でFlash版(Flex版)を先に作りましたが、ちょっと停止してます。

プロフィール

新宿近辺でSE & プログラマーしてます。
Webアプリの開発・設計とか、最近はiPhoneとか奮闘してます。
デザインはさっぱりです。

音楽は、昔からCubase打ち込み人間で、そっちの方が経歴は長いですが、最近はやる暇がないです。。。

今は、Gon's Privates ってバンドのキーボードやってます。
単発的に、なんちゃってジャズ系のライブもやってます。

名古屋生まれなのでドラゴンズ好きです。

Info && SNS

Gmail

 yohei.yoshikawa@gmail.com

Twitter

 http://twitter.com/yoo_yoo_yoo

あんまつぶやきませんが、一応技術系メインで使ってます。情報交換はこちらへ

FaceBook

 http://www.facebook.com/#!/profile.php?id=1439130626

海外の知り合いがいないので閑散としてます。

mixi

 http://mixi.jp/show_profile.pl?id=230072

音楽仲間とかはこっちメインでやってます。興味があればこちらへ