Labs

ウィンドウ内をスクロールするパネル。

2010.04.25 / Labs

jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("a.panel-01").click(function() {scrollGeneral(0)});
	$("a.panel-02").click(function() {scrollGeneral(1000)});
	$("a.panel-03").click(function() {scrollGeneral(2000)});
	$("a.panel-04").click(function() {scrollGeneral(3000)});
	$("a.panel-05").click(function() {scrollGeneral(4000)});

})
function scrollGeneral(pos) {
	$("div#container").animate({scrollLeft: pos}, {duration: 750, easing: "easeOutQuint"});
	return false;
}
</script>
<title>scroll-panel</title>
</head>
<body>



<!-- navi - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="navi">
<ul>
<li><a href="javascript:;" class="panel-01">01</a></li>
<li><a href="javascript:;" class="panel-02">02</a></li>
<li><a href="javascript:;" class="panel-03">03</a></li>
<li><a href="javascript:;" class="panel-04">04</a></li>
<li><a href="javascript:;" class="panel-05">05</a></li>
</ul>
</div><!-- navi -->



<div id="container">
<div id="general">



<!-- panel-01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-01" class="inner">
<p>panel-01</p>
</div><!-- panel-01 -->



<!-- panel-02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-02" class="inner">
<p>panel-02</p>
</div><!-- panel-02 -->



<!-- panel-03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-03" class="inner">
<p>panel-03</p>
</div><!-- panel-03 -->



<!-- panel-04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-04" class="inner">
<p>panel-04</p>
</div><!-- panel-04 -->



<!-- panel-05 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-05" class="inner">
<p>panel-05</p>
</div><!-- panel-05 -->



</div><!-- general -->
</div><!-- container -->



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function(){

$("a.panel-01").click(function() {scrollGeneral(0)});

$("a.panel-02").click(function() {scrollGeneral(1000)});

$("a.panel-03").click(function() {scrollGeneral(2000)});

$("a.panel-04").click(function() {scrollGeneral(3000)});

$("a.panel-05").click(function() {scrollGeneral(4000)});

})

function scrollGeneral(pos) {

$("div#container").animate({scrollLeft: pos}, {duration: 750, easing: "easeOutQuint"});

return false;

}

</script>

<title>scroll-panel</title>

</head>

<body>

<ul>

</ul>

</div>

<p>panel-01</p>

</div>

<p>panel-02</p>

</div>

<p>panel-03</p>

</div>

<p>panel-04</p>

</div>

<p>panel-05</p>

</div>

</div>

</div>

</body>

</html>

style.css

@charset "utf-8"; 



/* text -------------------------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}
html,
body {
	height: 100%;
}
html {
	overflow: hidden;
}



/* navi -------------------------------------------------------------------------------- */

div#navi {
	position: absolute;
}


/* container -------------------------------------------------------------------------------- */

div#container {
	overflow: hidden;
	width: 100%;
	height: 100%;
}



/* general -------------------------------------------------------------------------------- */

div#general {
	width: 6000px;
	height: 100%;
}
div#general div.inner {
	float: left;
	width: 1000px;
	height: 800px;
}
div#general div.inner p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 60px;
	color: #d9d9d9;
	padding: 30px 60px;
}



/* panels -------------------------------------------------------------------------------- */

div#panel-01 {
	background: #f8f8f8;
}
div#panel-02 {
	background: #ffffff;
}
div#panel-03 {
	background: #f8f8f8;
}
div#panel-04 {
	background: #ffffff;
}
div#panel-05 {
	background: #f8f8f8;
}

@charset "utf-8";

/* text -------------------------------------------------------------------------------- */

* {

margin: 0px;

padding: 0px;

}

html,

body {

height: 100%;

}

html {

overflow: hidden;

}

/* navi -------------------------------------------------------------------------------- */

div#navi {

position: absolute;

}

/* container -------------------------------------------------------------------------------- */

div#container {

overflow: hidden;

width: 100%;

height: 100%;

}

/* general -------------------------------------------------------------------------------- */

div#general {

width: 6000px;

height: 100%;

}

div#general div.inner {

float: left;

width: 1000px;

height: 800px;

}

div#general div.inner p {

font-family: Helvetica, Arial, sans-serif;

font-size: 60px;

color: #d9d9d9;

padding: 30px 60px;

}

/* panels -------------------------------------------------------------------------------- */

div#panel-01 {

background: #f8f8f8;

}

div#panel-02 {

background: #ffffff;

}

div#panel-03 {

background: #f8f8f8;

}

div#panel-04 {

background: #ffffff;

}

div#panel-05 {

background: #f8f8f8;

}

ActionScriptでイメージのスライス。

2010.03.01 / Labs

ActionScriptで読み込んだ一枚の画像を、グリッド状にスライスする方法です。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.net.URLRequest;	
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.DisplayShortcuts;  
	DisplayShortcuts.init();  
	
	[SWF(width="800", height="600", frameRate="30", backgroundColor="0xffffff")]

	public class Main extends Sprite {
		
		public function Main() {
			
			//スライス元のイメージを読み込み
			var loader:Loader = new Loader();
			var info:LoaderInfo = loader.contentLoaderInfo;
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
			loader.load(new URLRequest("image.jpg"));
			
			//読み込みが完了したとき
			function onLoaded(event:Event):void {
				var bmd_base:BitmapData = new BitmapData(info.width, info.height, true);
				var param:Object = new Object();
				bmd_base.draw(loader);
				
				//X軸・Y軸の分割数と、ピースの横幅・縦幅
				param.x = 8;
				param.y = 6;
				param.w = 100;
				param.h = 100;
				
				//Y軸のループ
				for (var i:uint = 0; i < param.y; i++) {
					
					//X軸のループ
					for (var j:uint = 0; j < param.x; j++) {
						var place:Sprite = new Sprite();
						var rect:Rectangle = new Rectangle(param.w*j, param.h*i, param.w, param.h);
						var bmd:BitmapData = new BitmapData(param.w, param.h, true);
						var bm:Bitmap = new Bitmap();
						
						//元のイメージから切り抜き
						bmd.copyPixels(bmd_base, rect, new Point());
						bm.bitmapData = bmd;
						bm.pixelSnapping = PixelSnapping.NEVER;
						bm.smoothing = true;
						
						//ピースの原点を左上から中心に移動
						bm.x = -param.w/2;
						bm.y = -param.h/2;
						place.x = param.w*j+param.w/2;
						place.y = param.h*i+param.h/2;
						
						place.addChild(bm);
						stage.addChild(place);
						
						//透明度、スケールを、それぞれ0から100％にアニメーション
						Tweener.addTween(place, {alpha:0, _scale:0});
						Tweener.addTween(place, {delay:((param.y*i)+j)*0.1, time:0.5, alpha:1, _scale:1});
					}
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.events.Event;

import flash.geom.Point;

import flash.geom.Rectangle;

import flash.net.URLRequest;

import caurina.transitions.Tweener;

import caurina.transitions.properties.DisplayShortcuts;

DisplayShortcuts.init();

[SWF(width="800", height="600", frameRate="30", backgroundColor="0xffffff")]

public class Main extends Sprite {

public function Main() {

//スライス元のイメージを読み込み

var loader:Loader = new Loader();

var info:LoaderInfo = loader.contentLoaderInfo;

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);

loader.load(new URLRequest("image.jpg"));

//読み込みが完了したとき

function onLoaded(event:Event):void {

var bmd_base:BitmapData = new BitmapData(info.width, info.height, true);

var param:Object = new Object();

bmd_base.draw(loader);

//X軸・Y軸の分割数と、ピースの横幅・縦幅

param.x = 8;

param.y = 6;

param.w = 100;

param.h = 100;

//Y軸のループ

for (var i:uint = 0; i < param.y; i++) {

//X軸のループ

for (var j:uint = 0; j < param.x; j++) {

var place:Sprite = new Sprite();

var rect:Rectangle = new Rectangle(param.w*j, param.h*i, param.w, param.h);

var bmd:BitmapData = new BitmapData(param.w, param.h, true);

var bm:Bitmap = new Bitmap();

//元のイメージから切り抜き

bmd.copyPixels(bmd_base, rect, new Point());

bm.bitmapData = bmd;

bm.pixelSnapping = PixelSnapping.NEVER;

bm.smoothing = true;

//ピースの原点を左上から中心に移動

bm.x = -param.w/2;

bm.y = -param.h/2;

place.x = param.w*j+param.w/2;

place.y = param.h*i+param.h/2;

place.addChild(bm);

stage.addChild(place);

//透明度、スケールを、それぞれ0から100％にアニメーション

Tweener.addTween(place, {alpha:0, _scale:0});

Tweener.addTween(place, {delay:((param.y*i)+j)*0.1, time:0.5, alpha:1, _scale:1});

}

photo by : chantrybee

Parallels desktop 5にFedora 12をインストール。

2010.02.16 / Labs

Parallels Desktop 5でゲストOSのサポートリストに入っていない、Fedora 12をインストールしてみました。
初めにFedoraオフィシャルサイトのダウンロードページから、DVDのISOイメージファイル「x86_64 – Install DVD」をダウンロードして利用しました。
（最初は「i386 – Install DVD」でインストールを進めてみたのですが、途中インストールうまくいかなかったので、切り替えました）

Parallels Desktop 5にはインストールを簡略化する機能があるのですが、今回は少しカスタマイズしたいので、その機能を使わずにインストールします。

Parallels Desktop 5のインストールアシスタントで、上記のようにマニュアルのセットアップにします。
アシスタントに従いそのまま続けて、バーチャルマシンでのFedora 12のインストールに進みます。

一番上の「Install or upgrade an existing system」を選びます。
そのまま言語設定、キーワード設定を進めると、「ハードディスクを初期化しますか？」という旨のメッセージが表示されます。

「Re-initialize drive」で仮想ハードディスクを初期化します。

ホストネームの入力では、とりあえずデフォルトのままで。

ハードディスクの使用スペースは全体にします。

オフィスケーアプリケーションは必要ないのでチェックを外し、インストールするソフトをカスタマイズしたいので、「customize now」にチェックを入れて進めます。

今回は最小構成にしたかったので、「Base System」の「Base」のみにチェックを入れます。デスクトップの外したので、インターフェイスはコマンドラインのみになります。
このまま進めるとインストールが始まります。10分くらい？かかります。
インストールが終わると、Fedora 12が起動してコマンドラインにて、ログインユーザー名の入力になります。

ログイン名は「root」で、パスワードはインストール中に設定したものを入れます。

とりあえずインストールはこれで完了です。
引き続きネットワークの設定、ソフトウェアのアップデートなどを行います。
ネットワークについては、Fedora 12での設定や、ネットワーク上の他のPCからもアクセスを考慮して、ブリッジの方が良さそうです。

Fedora Project

ActionScriptからPHPの関数を実行。

2010.02.07 / Labs

ActionScriptからPHPを実行するには、「URLLoader」を使ってPHPファイルにアクセスすることができます。その際に引数を渡すには「URLVariables」でGET、またはPOSTの変数を渡すことができます。
この方法では、アクセスするPHPファイル全体を実行します。

PHPファイル内の任意の関数のみを実行するには、ActionScriptからGET、またはPOSTの変数を経由し、PHPの関数名の文字列を変数で渡して、PHP側で文字列を関数名として評価することで任意の関数を実行できます。

ActionScriptでは、次のように記述します。（ドキュメントクラスに書いています）

package {
	
	import flash.events.Event;
	import flash.net.URLLoader;	
	import flash.net.URLRequest;	
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;
	import flash.text.TextField;

	public class Main extends Sprite {
		
		public function Main() {
			var url_variables:URLVariables = new URLVariables();
			var url_request:URLRequest = new URLRequest("functions.php");
			var loader:URLLoader = new URLLoader();
			
			//PHPリクエストのPOST変数にPHPの関数名を含める
			url_variables.function_name = "test";
			url_request.method = URLRequestMethod.POST;
			url_request.data = url_variables;
			
			//PHPを実行（読み込み）
			loader.addEventListener(Event.COMPLETE, onComplete);
			loader.load(url_request);
			
			//PHPの実行が完了したとき
			function onComplete(event:Event):void {
				
				//テキストフィールドを作成して、PHP関数の出力を表示
				var textfield:TextField = new TextField();
				stage.addChild(textfield);
				textfield.text = event.target.data;
			}
		}
	}
}

package {

import flash.events.Event;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.net.URLRequestMethod;

import flash.net.URLVariables;

import flash.text.TextField;

public class Main extends Sprite {

public function Main() {

var url_variables:URLVariables = new URLVariables();

var url_request:URLRequest = new URLRequest("functions.php");

var loader:URLLoader = new URLLoader();

//PHPリクエストのPOST変数にPHPの関数名を含める

url_variables.function_name = "test";

url_request.method = URLRequestMethod.POST;

url_request.data = url_variables;

//PHPを実行（読み込み）

loader.addEventListener(Event.COMPLETE, onComplete);

loader.load(url_request);

//PHPの実行が完了したとき

function onComplete(event:Event):void {

//テキストフィールドを作成して、PHP関数の出力を表示

var textfield:TextField = new TextField();

stage.addChild(textfield);

textfield.text = event.target.data;

}

PHPファイル「functions.php」にPOST変数で関数名「function_name」を文字列で渡します。PHPファイルの読み込み（実行）が完了したら「onComplete」にて、PHPで出力された文字列「event.target.data」を扱えるようになります。

PHPファイル「functions.php」には、次のように記述します。

<?php

//POST変数「function_name」の関数が存在したら実行
$function = $_POST['function_name'];
if (function_exists($function)) $function();

function test() {

	//文字列を出力（ActionScriptに渡す）
	echo "function test";
}
?>

<?php

//POST変数「function_name」の関数が存在したら実行

$function = $_POST['function_name'];

if (function_exists($function)) $function();

function test() {

//文字列を出力（ActionScriptに渡す）

echo "function test";

}

「$function」にPOST変数の「function_name」を代入して、同名の関数が存在していたら実行します。
PHPから出力された文字列は、そのままActionScriptで受け取ることができます。

ウィンドウ内をスクロールするフィールド。

2010.01.11 / Labs

縦横に複数のページを持つフィールドを、ウィンドウ内でスクロールします。グリッド状に縦横にページを作成して、方向キーの操作でページをスクロールします。
サンプルはこちら
（方向キーを有効にするには、一度FLASHエリアをクリックして、フォーカスを当てる必要があります）

package {
	
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import caurina.transitions.Tweener;

	public class Main extends Sprite {
		
		public function Main() {
			var piece:Rectangle = new Rectangle(0, 0, 800, 600); //ページのサイズ
			var current:Point = new Point(0, 0); //フィールド内のページ位置
			var pivot:Sprite = new Sprite(); //ステージの中心点
			var field:Sprite = new Sprite();
			pivot.addChild(field);
			stage.addChild(pivot);
			setPivot(pivot);
			
			//ステージのスケールを固定で、原点を左上に
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//横15×縦10のページでフィールドを作成
			makeField(new Point(15, 10));
			
			//フィールドを作成
			function makeField(grid:Point):void {
				for (var i:uint = 0; i < grid.y; i++) {
					for (var j:uint = 0; j < grid.x; j++) {
						
						//ページに矩形を描きランダムに彩色
						var shape:Shape = new Shape;
						shape.x = piece.width*j-piece.width/2;
						shape.y = piece.height*i-piece.height/2;
						shape.graphics.beginFill(Math.random()*0x1000000);
						shape.graphics.drawRect(piece.x, piece.y, piece.width, piece.height);
						shape.graphics.endFill();
						field.addChild(shape);
					}
				}
				stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress(grid));
			}
			
			//方向キーでスクロールの設定
			function onKeyPress(grid:Point):Function {
				return function(event:KeyboardEvent):void {
					switch (event.keyCode) {
						case 37: current.x--; break; //左キー
						case 38: current.y--; break; //上キー
						case 39: current.x++; break; //右キー
						case 40: current.y++; break; //下キー
					}
					
					//フィールドの端まで移動したとき
					if (current.x < 0) current.x = 0;
					if (current.x >= grid.x) current.x = grid.x-1;
					if (current.y < 0) current.y = 0;
					if (current.y >= grid.y) current.y = grid.y-1;
					
					Tweener.addTween(field, {time:0.75, x:-piece.width*current.x, y:-piece.height*current.y});
				}
			}
			
			//ステージサイズに合わせて中心点を移動
			function setPivot(pivot:Sprite):void {
				stage.addEventListener(Event.RESIZE, transfield);
				transfield();
				
				function transfield():void {
					Tweener.addTween(pivot, {time:0.75, x:stage.stageWidth/2, y:stage.stageHeight/2});
				}
			}
		}
	}
}

package {

import flash.display.Shape;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.events.KeyboardEvent;

import flash.geom.Point;

import flash.geom.Rectangle;

import caurina.transitions.Tweener;

public class Main extends Sprite {

public function Main() {

var piece:Rectangle = new Rectangle(0, 0, 800, 600); //ページのサイズ

var current:Point = new Point(0, 0); //フィールド内のページ位置

var pivot:Sprite = new Sprite(); //ステージの中心点

var field:Sprite = new Sprite();

pivot.addChild(field);

stage.addChild(pivot);

setPivot(pivot);

//ステージのスケールを固定で、原点を左上に

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

//横15×縦10のページでフィールドを作成

makeField(new Point(15, 10));

//フィールドを作成

function makeField(grid:Point):void {

for (var i:uint = 0; i < grid.y; i++) {

for (var j:uint = 0; j < grid.x; j++) {

//ページに矩形を描きランダムに彩色

var shape:Shape = new Shape;

shape.x = piece.width*j-piece.width/2;

shape.y = piece.height*i-piece.height/2;

shape.graphics.beginFill(Math.random()*0x1000000);

shape.graphics.drawRect(piece.x, piece.y, piece.width, piece.height);

shape.graphics.endFill();

field.addChild(shape);

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress(grid));

}

//方向キーでスクロールの設定

function onKeyPress(grid:Point):Function {

return function(event:KeyboardEvent):void {

switch (event.keyCode) {

case 37: current.x--; break; //左キー

case 38: current.y--; break; //上キー

case 39: current.x++; break; //右キー

case 40: current.y++; break; //下キー

}

//フィールドの端まで移動したとき

if (current.x < 0) current.x = 0;

if (current.x >= grid.x) current.x = grid.x-1;

if (current.y < 0) current.y = 0;

if (current.y >= grid.y) current.y = grid.y-1;

Tweener.addTween(field, {time:0.75, x:-piece.width*current.x, y:-piece.height*current.y});

}

//ステージサイズに合わせて中心点を移動

function setPivot(pivot:Sprite):void {

stage.addEventListener(Event.RESIZE, transfield);

transfield();

function transfield():void {

Tweener.addTween(pivot, {time:0.75, x:stage.stageWidth/2, y:stage.stageHeight/2});

}