ウィンドウサイズによって、モーダルウィンドウがリサイズするようにした。
モバイルサイズまでは90％でそれ以上は固定値。
リサイズ中何度も処理がよばれないようにしている。
予期したとおりに動いたからきっとこれでいい。。
なんか間違ってる気もするけどこれでいい。。

$(function(){
	var resizeTimer = null;
	$(window).on('resize', function(){
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function(){
			var w = $(window).width();
			var x = 767;
			if (w <= x){
				$.colorbox.resize({width:"90%", height:"90%"});
				$(".inline").colorbox({maxWidth:"90%",maxHeight:"90%"});
			}else{
				$.colorbox.resize({width:"750px",height:"500px"});
				$(".inline").colorbox({maxWidth:"750px",maxHeight:"500px"});
			}
		}, 200);
	});
});

隊員紹介のページはちっちゃいウィンドウをサイズ指定で開かせていたんですが、
今回はモーダルウィンドウで開かせるようにしたいと思います。

モーダルウィンドウできるプラグインがいっぱいあるようで色々まよったんですが、
まぁ、使ってみないとわかんないので、colorboxっての使ってみることにします。

その他迷ってたのは
* prettyphoto
* magnific-popup
* fancybox
* photoswipe
とか。
みんな、画像をクリックしたら拡大表示されたりギャラリー表示されたりするプラグインなんだけど、
やりたいのは、画像クリックしたら軽い説明分と画像を表示させること。
colorboxでできるよね・・？

はずれじゃないといいな。

ちまたでは1ページもののスクロールページがはやっているようなので、
それにのっかて新しいサイトを作成しています。
うにょぺそといったらやっぱりへそクリックでINだよね！
ということで、TOPにへそ画像をおいて、
へそクリックしたら次のセクションにスムーズスクロールするようにすることに。

へそクリックされる対象はAdobe FLASHでちょっとした動きをつけることにした。
swfはすたれてきてるようなので、HTML5 Canvasでパブリッシュ。
SVGアニメを使いたかったんだけど、どうもうまく動かなかったよ・・。

へそクリックINでスムーズスクロールできるようにjavascriptをちょこっといじった。

jquery.jsよみこんできてうごかしたのがこれ。

this.koti_peso.addEventListener("click", fl_MouseClickHandler_koti.bind(this));

function fl_MouseClickHandler_koti(){

	var speed = 500;

	var target = $("#about");

	var position = target.offset().top;

	$("html, body").animate({scrollTop:position}, speed, "swing");

	event.preventDefault();

};

動きがちょっと悪いので、jquery.easing.min.js追加でうごかしたのがこれ。

this.koti_peso.addEventListener("click", fl_MouseClickHandler_koti.bind(this));

function fl_MouseClickHandler_koti(){

	$('html, body').stop().animate({scrollTop: $("#about").offset().top}, 1500, 'easeInOutExpo');

	event.preventDefault();

};

とまぁ、自分のために覚書。
Javascriptいじったことないから色々つらいよね。

それはそうと、ソースコードのせるなら、なんかMTにプラグイン導入したほうがいいね。

SVGだとwidthとheightを消すだけで、レスポンシブ対応できる。
ちなみにSVGを最適化・軽量化できるWebアプリを使っとくとステキ。
「SVGOMG - SVGO's Missing GUI」
SVG対応してないブラウザのために、インラインSVGの代替テキスト代わりとしても埋めとくとやさしい。

pngとかはBootstrapの場合、下記のように書くだけでいけるらしい。
img src="images/dummy.png" alt="dummy" width="300" height="200" class="img-responsive"

手持ちのfontをwebフォントにして使える。
下記サイトなどで変換できるよう。
http://www.fontsquirrel.com/tools/webfont-generator

SCSS(Sass)とLESS
CSSを拡張したメタ言語の一つ。
入れ子表記できるので、CSSを効率よく記述できる。

FLASHでホームページを作り直して、当時はそれなりに満足していたんだけど、
iphoneからじゃページみれなかったり、時代おくれもはなはだしくなってしまっているので、手直しする決意表明。

ちょいちょい調べたことをメモっていきます。

OGP
「Open Graph protocol」の略称。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。