日本の人口推移をHighchartsで表示

なんかふと日本の人口推移ってどうなってる?っていうのが気になり、ちょっくらHighchartsを使って表示してみました。

日本の人口推移

Highchartsはめちゃ高機能なんですが、商用利用の場合は有料($80〜)なので、仕事でちょっとしたグラフをjavascriptで表示したいときは、jqPlot(こちらはopen source)でよいかも。

にしても、男女比は49:51で女性がちょっと多いっていうのが戦後から変わってないんですね。なんか不思議。

ということで、お金も体力もないアラフォーのおじさんを拾ってくれる心優しい女性はおりませぬか。。。
見つけたありんこを踏まないようによけて、ちがうありんこを踏んでしまうぐらいの優しさはあります。

さあ、ねよう。。。

jquery.fadeMoverプラグインページを作成しました。

以前のjquery.fadeMoverプラグインの記事に不具合があった(というよりも単なるミスです。。。申し訳ないです。。。)ので、ちょっと機能アップを含め、別途ページを作成しました。

jquery.fadeMover – Fadein and Fadeout for jQuery

要素が複数あった場合に順番に処理する、という機能を新しくオプションでつけています。下記にデモページがあるんですが、ページ少し下の方にある「Box」と書かれている場所がぱらぱらとフェードインする、フェードアウトする感じになります。

jquery.fadeMover – demo4 順番にフェードイン
jquery.fadeMover – demo5 順番にフェードアウト

デモがわかりやすいように実行時間を長めに設定してるのでじれったい感じかもですが、もし利用の機会があれば、ご自身でスピードを変更して、いろいろ試してみてください。


あとページ読み込み時に全部表示されてからフェードインが実行されるのをなんとかしたい、という相談をいただいたんですが、Tipとして解決方法を掲載しています。もしお悩みの方がいらっしゃいましたら、下記「Tips」をお試しください。多少ましになるはずです。

jquery.fadeMover Tips

jQuery – メニューをスクロールに付随させてみる

最近国内のサイトでもちょくちょく目にするようになった「スクロールに付随するメニュー(「ユニクロ 特集/+J FINAL COLLECTION | MEN – ユニクロオンラインストア[store.uniqlo.com]」のページの少し下の方にあるメニュー一覧のような動きになるもの 2011年12月2日時点)」を実装してみます。

この実装はすごく簡単で、スクロール位置と固定する要素の位置を比べ、スタイルを書き換えるだけです。

jQuery メニューをスクロールに付随させてみるサンプル(headerFixedBoxを固定)
jQuery メニューをスクロールに付随させてみるサンプル(asideFixedBoxを固定)

サイドバーに固定要素を置く場合は、フッターにかぶってしまうことがあると思うので、それを回避するように条件を加えてみました。

$(function(){
floatBox("#headerFixedBox");
floatBox("#asideFixedBox", 1);

//ele=固定する要素、flag=サイドバーに固定する要素があり、フッターにかぶらないようにする場合に「1」を指定
function floatBox(ele, flag) {
	//固定する要素を取得
	var box = $(ele);
	//固定する要素の位置を取得
	var fixed_box_offset = box.offset();
	//固定する要素のサイズを取得
	var box_size = {"width": box.width(), "height":  box.height()};
	//フッター要素の位置を取得
	var footer_box_offset = $("#footer").offset();
	//スクロールイベントが発生したら実行
	$(window).scroll(function() {
		//スクロール位置を取得
		var scroll_val = $(this).scrollTop();
		//固定する要素の位置よりスクロール位置が大きくなれば...
		if(scroll_val > fixed_box_offset.top) {
			//固定する要素にtop:0が指定されていなければ...
			if(box.css("top") != 0) {
				//スタイルを追加
				box.css({
					"position": "fixed",
					"z-index": 999,
					"width": box_size.width,
					"height": box_size.height,
					"top": 0,
					"bottom": "auto"
				});
			}
			//フッターがあり、横メニューがかぶらないようにする場合は...
			if(flag == 1) {
				//フッターの位置よりスクロール位置が大きくなれば...
				if(scroll_val > (footer_box_offset.top - box_size.height)) {
					//スタイルを追加
					if(box.css("bottom") != 0) {
						box.css({
							"position": "absolute",
							"z-index": 999,
							"width": box_size.width,
							"height": box_size.height,
							"top": "auto",
							"bottom": 0
						});
					}
				}
			}
		//固定する要素の位置よりスクロール位置が小さければ...
		} else {
			//固定する要素のstyle属性を削除
			box.removeAttr("style");
		}
	});
}
});

あとは固定する要素の位置を取得するための、もととなる要素のCSSに「position: relative;」を指定します。

/*
#headerFixedBoxのもととなる要素
*/
#wrap {
	position: relative;
	margin: 0 auto;
	width: 900px;
}
/*
#asideFixedBoxのもととなる要素
*/
#aside {
	position: relative;
	float: right;
	width: 280px;
	min-height: 1600px;
	background: #111;
	color: #eee;
}

と、これでスクロールしてもついてくるメニューの完成です。

コピペですぐ使えるように関数化しているのですが、関数内にフッター要素のIDを直接していしている箇所があります。もし利用される場合は、関数内の「#footer」のところを、ご自身のサイトのフッターに割り当てているIDに変更してください。

	//フッター要素の位置を取得
	var footer_box_offset = $("ここを書き換え").offset();


今回はスクロールしてもついてくるメニューということで簡単なものをつくりましたが、これを元にして、ある一定箇所までスクロールしたら要素を表示させる、といったこともできます。

ソースをいじってテストできるようにJS Binにも置いておきました。いろいろ確認してみたい方はどーぞ。

JS Bin ソース確認用



Page 1 of 1012345...10...Last »