iframeでcolorboxを使ってみてるんだけど、内容が長くなった場合、下の方に入れた画像をタップするとページの上に戻るとかいうよく分からない現象が...。何でかなぁ。適当にぽいぽいスクリプトとかスタイルとかコピーしてページ作ってるからどれが原因か分からぬ！

ちょっとブログのデザインをいじろうと思います。
見てる人はいないとおもうけど、一応報告しておきますよっと。

jquery.min.js:6 
XMLHttpRequest cannot load 
file:///C:/********. 
Cross origin requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https, chrome-extension-resource.

Chromeではセキュリティ上の都合でローカルファイルへのAjaxリクエストはできないようになっているらしい。
それで管理者権限でコマンドプロンプト起動してChromeのパス --allow-file-access-from-filesでいけるらしい。

今使ってる掲示板はセキュリティー的に不安なので、
movabletypeのコミュニティ掲示板をつかってみようとさわってみたが、
サインインのところに不具合があるようで、→キャッシュにやられてサインインできない？
デバッグするのも面倒なので、やめました。
movabletypeはすたれ気味だし、ましてや掲示板なんてさっぱりメンテされないのね。

ウィンドウサイズによって、モーダルウィンドウがリサイズするようにした。
モバイルサイズまでは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();

};

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();

};

それはそうと、ソースコードのせるなら、なんか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からじゃページみれなかったり、時代おくれもはなはだしくなってしまっているので、手直しする決意表明。

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