SQLの窓

2015年12月24日


BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

BUTTONS


実際は、A 要素もボタンになるのですが、ここではアイコンボタンのみ考えます。ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

アイコンに関しては、Font Awesome よりダウンロードできますが、これも //netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css を使うことができます ( ライセンスページ )

アイコンの種類と名前に関しては、こちらを参照して下さい

画像として簡単に手にいれたい場合は、こちら(フリーフォントで簡単ロゴ作成)でダウンロードできます( フォントのライセンスは SIL Open Font License 1.1 です )

  
  


サイズ : button-tiny



サイズ : button-small / 色 : button-primary



サイズ : 指定なし / 色 : button-action



サイズ : button-large / 色 : button-highlight



サイズ : button-jumbo / 色 : button-caution



サイズ : button-giant / 色 : button-royal



表現方法 : button-3d



表現方法 : button-raised



表現方法 : button-longshadow-right



表現方法 : button-glow



表現方法 : button-3d と button-border



表現方法 : button-glow と button-border


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">

<button class="button button-square button-tiny"><span class="fa fa-glass"></span></button>
<button class="button button-box button-tiny"><i class="fa fa-music"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-search"></i></button>

<button class="button button-primary button-square button-small"><i class="fa fa-envelope-o"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-heart"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-star"></i></button>

<button class="button button-action button-square"><i class="fa fa-star-o"></i></button>
<button class="button button-action button-box"><i class="fa fa-user"></i></button>
<button class="button button-action button-circle"><i class="fa fa-film"></i></button>

<button class="button button-highlight button-square button-large"><i class="fa fa-th-large"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-th"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-th-list"></i></button>

<button class="button button-caution button-square button-jumbo"><i class="fa fa-check"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-remove"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-search-plus"></i></button>

<button class="button button-royal button-square button-giant"><i class="fa fa-search-minus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-power-off"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-signal"></i></button>

<button class="button button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-raised button-action button-box button-giant"><i class="fa fa-home"></i></button>
<button class="button button-raised button-highlight button-circle button-giant"><i class="fa fa-file-o"></i></button>

<button class="button button-longshadow-right button-caution button-box button-giant"><i class="fa fa-clock-o"></i></button>
<button class="button button-longshadow-right button-royal button-circle button-giant"><i class="fa fa-road"></i></button>

<button class="button button-glow button-box button-giant"><i class="fa fa-download"></i></button>
<button class="button button-glow button-primary button-circle button-giant"><i class="fa fa-arrow-circle-o-down"></i></button>

<button class="button button-border button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-border button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-border button-glow button-box button-giant"><i class="fa fa-arrow-circle-o-up"></i></button>
<button class="button button-border button-glow button-primary button-circle button-giant"><i class="fa fa-inbox"></i></button>


関連する記事

A 要素と CSS だけでボタンを表現する 『BUTTONS』



posted by lightbox at 2015-12-24 15:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2015年12月14日


FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する

デモページ


FileSaver.js を使って Canvas の保存を行うには、canvas-toBlob.js を読み込んで toBlob メソッドを canvas に対して実行する必要があります。( デモページでは、iframe 側に canvas があるので、iframe 側で canvas-toBlob.js を読み込みます )

デモページでは、canvas は iframe 内にあるので、jQuery を使って $( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob という参照になっています。
※ birds は iframe の id です

保存コード
	$("#getpng").on( "click", function(){
		$( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob(function(blob) {
			saveAs(
				blob
				, "three_fly.png"
			);
		}, "image/png");
	} );


関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存



タグ:javascript jquery
posted by lightbox at 2015-12-14 09:00 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月12日


Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ

デモページ

アニメーション開始は右上のボタン
※ リロードするとアニメーション前の初期状態に戻ります

▼ 飛翔画像


以前、v57 頃の時に作成した平面の『蝶』の画像を飛翔させるデモです。バージョンがかなり変わって前のままでは動作しなくなったものを少し修正してさらに使いやすくかつ解りやすくしました。『飛翔』そのもののコードは、Three.js 内で今も使われているもので昔から全く変わっていません。この部分は、boid.js として外部ファイルとして取り出してあります。

ただ、Canvas のレンダリング部分(CanvasRenderer.js)は v73 では外部ファイルとなって Three.js 本体からは外されていました。また、さらに実行の為に Projector.js というファイルも必要になっていました。

HTML 部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico">

<script src="three.min73.js"></script>
<script src="CanvasRenderer.js"></script>
<script src="Projector.js"></script>
<script src="boid.js"></script>

</head>
<body style="margin:0">
<div style="position:absolute;width:98%">
<input
	type="button"
	value="アニメーション開始"
	style="position:relative;float:right;"
	onclick="window.animate();this.style.display='none'"
	title="ページをリロード(再表示)するとアニメーションは止まります">
</div>
<div id="container"></div>

<script src="birds73.js"></script>

</body>
</html>


Three.js 実行環境部分(birds73.js)
// *************************************************
// Three.js の環境設定
// *************************************************
var SCREEN_WIDTH		= window.innerWidth * 0.98;
var SCREEN_HEIGHT		= window.innerHeight * 0.98;
var SCREEN_WIDTH_HALF	= SCREEN_WIDTH  / 2;
var SCREEN_HEIGHT_HALF	= SCREEN_HEIGHT / 2;

var camera, scene, renderer,
birds, bird;

var boid, boids;

var stats;

// お決まりの初期処理とアニメーション開始
init();
// animate 内の render が実行されても、init の処理が完了していないと描画されません
// なので、アニメーション無しの1回限りの描画は、setTimeout か、画像の最終イベント内で実行します
//animate();

function init() {

	camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
	camera.position.z = 450;

	scene = new THREE.Scene();

	birds = [];
	boids = [];

	// 背景画像・人物画像用ラッパー
	var parent = new THREE.Object3D();

	// *************************************************
	// 背景画像の読み込み
	// *************************************************
	var image = new Image()
	image.onload = function () {

		var texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

		// 平面
		var mesh = new THREE.Mesh(new THREE.PlaneGeometry(1200, 1200, 1, 1), material);

		// 画面奥
		mesh.position.z = -400;

		// 大きさ調整
		mesh.scale.x = 1.5;
		mesh.scale.y = 1.5;

		// 回転
		mesh.rotation.x = 0;
		mesh.rotation.y = 0;

		// ラッパーに平面追加
		parent.add( mesh );

		// *************************************************
		// 人物画像の読み込み
		// *************************************************
		var image = new Image()
		image.onload = function () {

			var texture = new THREE.Texture( this );
			texture.needsUpdate = true;
			var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

			// 平面
			var mesh = new THREE.Mesh(new THREE.PlaneGeometry(778, 623, 1, 1), material);

			// 画面前
			mesh.position.z = 300;

			// 表示位置調整
			mesh.position.x = 80;
			mesh.position.y = -42;

			// 大きさ調整
			mesh.scale.x = 0.3;
			mesh.scale.y = 0.3;

			// 回転
			mesh.rotation.x = 0;
			mesh.rotation.y = 0;

			// ラッパーに平面追加
			parent.add( mesh );

			// シーンにラッパー(画像2枚)追加
			scene.add(parent);

			// *************************************************
			// 飛翔画像の読み込み
			// *************************************************
			var image = new Image()
			image.onload = function () {

				texture = new THREE.Texture( this );
				texture.needsUpdate = true;
				material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
				material.side = 2

				// 200の飛翔物体
				for ( var i = 0; i < 200; i ++ ) {

					boid = boids[ i ] = new Boid();
					boid.position.x = Math.random() * 400 - 200;
					boid.position.y = Math.random() * 400 - 200;
					boid.position.z = Math.random() * 400 - 200;
					boid.velocity.x = Math.random() * 2 - 1;
					boid.velocity.y = Math.random() * 2 - 1;
					boid.velocity.z = Math.random() * 2 - 1;
					boid.setAvoidWalls( true );
					boid.setWorldSize( 500, 500, 400 );

					// 飛翔画像を貼り付けたマテリアルを平面に適用
					birds[ i ] = new THREE.Mesh( new THREE.PlaneGeometry(30, 30, 2, 1), material );

					// オリジナルの特殊処理
					bird = birds[ i ]
					bird.phase = Math.floor( Math.random() * 62.83 );

					// 飛翔物体単位でシーンに追加
					scene.add( bird );

				}

				// 初回表示
				render();
			};
			// 飛翔画像
			image.src = "002.png";
			
		};
		// 人物画像
		image.src = "girl.png";

	}
	// 背景画像
	image.src = "moon.jpg";


	renderer = new THREE.CanvasRenderer();
	renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	document.body.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth * 0.98, window.innerHeight * 0.98 );

	render();

}

// マウスによる、飛翔物体の反応処理
function onDocumentMouseMove( event ) {

	var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );

	for ( var i = 0, il = boids.length; i < il; i++ ) {

		boid = boids[ i ];

		vector.z = boid.position.z;

		boid.repulse( vector );

	}

}

// Three.js のお決まりの処理
function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	// 飛翔物体の処理
	for ( var i = 0, il = birds.length; i < il; i++ ) {

		boid = boids[ i ];
		boid.run( boids );

		bird = birds[ i ];
		// 旧版では無かった処理
		bird.position.copy( boids[ i ].position );

		// 飛翔物体の飛翔用の傾け処理
		bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
		bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );

		// 画像を x 軸で90度回転して、横に寝かせる
		bird.rotation.x = (180 * Math.PI / 180)/2;

		// オリジナルの特殊処理
		bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;

		// 平面画像のはばたき処理
		bird.geometry.vertices[ 0 ].z = Math.sin( bird.phase ) * 15;
		bird.geometry.vertices[ 2 ].z = Math.sin( bird.phase ) * 15;

		// 0  1  2
		// 3  4  5
		// セグメントが 2x1 なので、0番と 2番を動かすと、羽の先が動きます。
		// 羽全体を動かすのであれば、3番と5番も同時に値を変更してもいいです

	}


	renderer.render( scene, camera );

}



birds73.js も殆どは Three.js のサンプルと変わりませんが、Three.js では鳥に見立てた頂点を持つオブジェクトが使用されています。こちらでは、平面を 2 セグメントに分けて、頂点を6つ持ったオブジェクトの 0 番と 2番を 動かせて『飛翔』させています。
※ 詳細は、ソースコード内のコメントに書かれてあります

画像の配置

画像は全て canvas 内に配置しているので、Google Chrome や Firefox ならばそのまま保存して、その時の画像を取得する事ができます。月画像は奥に、人物画像は手前にありますが、飛翔物体がかなり手前に来た場合は人物を突き抜けるのはご愛嬌です。

画像のロードは 3種類あるので 3段階で行っています。背景 => 前景 => 飛翔画像と、各画像がロードされてから次の画像の処理へと移っています

Window サイズ変更時

全て Canvas 内なので Window サイズにあわせて表示は縮小されますが、アニメーションはそのまま実行されます。もともとは、IFRAME 内で表示する事を想定しており、お好きなサイズでページに埋め込む事ができます。



posted by lightbox at 2015-12-12 21:43 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり