2010年12月 : WEB 職人

<< 2010年11月 | TOP | 2011年01月 >>

- 1 2 3 >>

2010年12月21日

CSS : 文字の回転と反転 ( matrix )

IE だけ勝手が違います。
そもそも、IE のMatrix は、IE5.5 の時からあるので、
座標系が CSS3系 とは違うようです。でも、IE9 を使えない OS をまだ
当分使わないといけないので、このようになるのは仕方無いと思います。

海	▼	海を90度回転しています
海	▼	海を180度回転しています
海	▼	海を270度回転しています
海	▼	海を横反転しています
海	▼	海を横反転して90度回転しています
海	▼	海を横反転して180度回転しています
海	▼	海を横反転して270度回転しています
海	▼	海を45度回転しています

<style type="text/css">
.mtx {
	display:block;
	font-size:16px;
	width:16px;
}
.rotation90 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, 1, 0, 0, 0);
	-o-transform:matrix(0, -1, 1, 0, 0, 0);
	transform:matrix(0, -1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotation180 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
	-o-transform:matrix(-1, 0, 0, -1, 0, 0);
	transform:matrix(-1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotation270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.mirror {
	/* 横反転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
.mirror90 {
	/* 横反転90 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1,mirror=1);
}
.mirror180 {
	/* 横反転180 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(1, 0, 0, -1, 0, 0);
	-o-transform:matrix(1, 0, 0, -1, 0, 0);
	transform:matrix(1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
}
.mirror270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, -1, 0, 0, 0);
	-o-transform:matrix(0, -1, -1, 0, 0, 0);
	transform:matrix(0, -1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3,mirror=1);
}
.rotation45 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-webkit-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-o-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,Dx=-2,Dy=8);
}
</style>

<table>
<tr>
<td><span class='mtx rotation90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を90度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を180度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を270度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転しています</td>
</tr>
<tr>
<td><span class='mtx mirror90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して90度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して180度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して270度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation45'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を45度回転しています</td>
</tr>
</table>

文字回転CSS ( 含IE9 ) では、IE9 に対応したSPAN を使った文字列内
の一部分回転を行っています。

posted by at 2010-12-21 15:51 | 小ネタ |

google.load で円グラフ

API キーに関しては以下のようにあるので、公開時は取得して下さい。
( テスト時には無くても動くので本番サイト以外のキーを取得しなくてもいいです )
Warning: You need your own API key in order to use the Google Loader. 
Without your own key, examples won't work.

<script src="http://www.google.com/jsapi?key=APIキー" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});
</script>

<div id="chart_div" style="width: 300px; height: 240px;"></div>

<script type="text/javascript">

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 300, height: 240, is3D: true, title: '円グラフのタイトル'});

</script>

posted by at 2010-12-21 11:08 | 小ネタ |

2010年12月20日

縦書きCSS

mootools で縦横スライド( core のみ google.load ) を使って
縦書きを横スライドさせています。
( 何故か、縦のスライドは動きませんでした )
IE に関しては、標準モードでないと、「ー」が回転しなかったりしていますので注意です。

まず、縦書き用スタイルシート : 縦書きWebページプロジェクト - freefielder.jp
から css を取得して WEB 上に設置します。

ブログで設置できる事を確認しているものに関してはこちらを参照して下さい。

次に、縦書き変換スクリプト : 縦書きWebページプロジェクト - freefielder.jp
で通常のテキストを変換して DIV に縦と横幅を与えて、その中に変換した 
HTML をセットします。

この内容が縦に消えたり出現したりします。

ｈｔｔｐ：／／ｍｏｏｔｏｏｌｓ．ｎｅｔ／ｍｏｒｅ／　で、Ｆｘ．Ｓｌｉｄｅ　をチェックしてラ

イブラリ

をビルドして追加実装して使用します

ｌｉｎｅａｒ

Ｑｕａｄ．ｅａｓｅＩｎ／Ｑｕａｄ．ｅａｓｅＯｕｔ／Ｑｕａｄ．ｅａｓｅＩｎＯｕｔ

Ｃｕｂｉｃ．ｅａｓｅＩｎ

Ｃｕｂｉｃ．ｅａｓｅＯｕｔ

Ｃｕｂｉｃ．ｅａｓｅＩｎＯｕｔ

Ｑｕａｒｔ．ｅａｓｅＩｎ

Ｑｕａｒｔ．ｅａｓｅＯｕｔ

Ｑｕａｒｔ．ｅａｓｅＩｎＯｕｔ

Ｑｕｉｎｔ．ｅａｓｅＩｎ

Ｑｕｉｎｔ．ｅａｓｅＯｕｔ

Ｑｕｉｎｔ．ｅａｓｅＩｎＯｕｔ

Ｐｏｗ

「縦と横は必ず非表示したなら表示してから切り替え無いと。」

「動かなくなるようです。」

「以下の効果は、不規則な動きをするのでテストしてからで無いと。」

「エラーになる可能性もあります。」

ページ全体を使ったサンプル

<link type="text/css" rel="stylesheet" href="http://lightbox.on.coocan.jp/tate-style.css"/>

posted by at 2010-12-20 22:10 | 小ネタ |

2010年12月19日

mootools で縦横スライド( core のみ google.load )

horizontal :

この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します

linear
Quad.easeIn or Quad.easeOut or Quad.easeInOut.
Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
Quart.easeIn or Quart.easeOut or Quart.easeInOut.
Quint.easeIn or Quint.easeOut or Quint.easeInOut
Pow

縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです。

以下の効果は、不規則な動きをするのでテストしてからで無いと
エラーになる可能性もあります

Expo.easeIn or Expo.easeOut or Expo.easeInOut.
Circ.easeIn or Circ.easeOut or Circ.easeInOut.
Sine.easeIn or Sine.easeOut or Sine.easeInOut.
Back.easeIn or Back.easeOut or Back.easeInOut.
Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.3.0");
</script>
<script src="http://lightbox.on.coocan.jp/js/mootools-fxSlide.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
window.addEvent('domready', function() {

	var myVerticalSlide1 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.linear
	});
	$('v_toggle1').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide1.toggle('horizontal');
		}
		else {
			myVerticalSlide1.toggle();
		}
	});

	var myVerticalSlide2 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeIn
	});
	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide2.toggle('horizontal');
		}
		else {
			myVerticalSlide2.toggle();
		}
	});

	var myVerticalSlide3 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeOut
	});
	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide3.toggle('horizontal');
		}
		else {
			myVerticalSlide3.toggle();
		}
	});

	var myVerticalSlide4 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide4.toggle('horizontal');
		}
		else {
			myVerticalSlide4.toggle();
		}
	});

	var myVerticalSlide5 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Pow
	});
	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide5.toggle('horizontal');
		}
		else {
			myVerticalSlide5.toggle();
		}
	});

});
</script>

<input id="v_toggle1" type="button" value="linear">
<input id="v_toggle2" type="button" value="Quad.easeIn">
<input id="v_toggle3" type="button" value="Quad.easeOut">
<input id="v_toggle4" type="button" value="Quad.easeInOut">
<input id="v_toggle5" type="button" value="Pow">
<br>
horizontal : <input id="horizontal" type="checkbox">

<pre id="vertical_slide">
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します
</pre>

jsapi?key=APIキーを書けと Google では書かれていますが、他のサイトのキーを書いても
動いてしまうので( というか書かなくても動きます )。本来この処理でキーを書く事のメ
リットは、「問題が生じた時に Google からの連絡が可能ですよ」という内容です。他の
API では、以前「任意です」と書かれていたものもあったのですが、今は消えています

posted by at 2010-12-19 22:45 | 小ネタ |

onmouseover で、画像を透過して隠していたメッセージを表示する

画像の後ろに画像でもいいと思います。

こんにちは

<div style='position:relative;height:320px;'>

<div style='position:absolute;padding:20px;font-size:20px;font-weight:bold;'>
こんにちは<br>
</div>

<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;position:absolute;'
	onmouseover='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=30)";
	}
	else {
		this.style.opacity=.3;
	}
	'
	onmouseout='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=100)";
	}
	else {
		this.style.opacity=1;
	}
	'
>

</div>

posted by at 2010-12-19 20:58 | 小ネタ |

- 1 2 3 >>

Seesaa の各ページの表示について

Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>

この記述は、以下の場所で使用します

	Seesaa のスマホページで表示される広告が左に寄りすぎでみっともないので CSS( 属性セレクター ) で調整する
	MSXML2.XMLHTTPでファイルをPOSTする
	PHP の関数での環境情報取得( phpinfo の代替え )
	MSXML2.(Server)XMLHTTPでファイルをアップロードする
	テンプレートでその記事の編集画面に直接リンクする
	Seesaaブログのテンプレート内で使用できる page_name 変数を JavaScript で使用する
	『カーソル下の画像用HTMLの取得』を行うIE拡張をダイアログを表示して行う
	IE 拡張を作成する為の基本仕様
	ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得
	ブラウザ上のテキストをレジストリデータのエクスポートである .reg として保存させる JavaScript のコード
	Google Visualization API の円グラフと通常テーブルの表示を jQuery のプラグインで作成する
	Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト
	【改造】雪を降らす snowstorm.js に風向きを外部から設定できるオプションを追加しました
	Google MAP API V3 + Google AdSense は、2015年11月2日(日本時間では3日) で廃止されていたようです。
	allow_url_fopen と allow_url_include
	DIV に入れて、ドロップシャドウ( inline-block で、縦のスペースを取り去る方法 )
	Seesaa のテンプレートのタイトル部分 ( 2015年2月現在 ) ☀
	WEB アーカイブと Google ウェブマスターツール / ペンギンアップデート以来不明なリンク切れエントリが急増
	Seesaa が『この広告は1年以上更新がないブログに表示されております。』という広告を表示しています。
	Cron の代替え : VBScript でタイマー処理