Labs

ActionScriptで透過ビットマップのロールオーバーを判定。

2011.06.15 / Labs

マウスのロールオーバー時に、ビットマップの透過ではない部分でのみ判定をする方法です。
通常ビットマップのマウス判定には矩形エリア全体が対象になるので、透明PNGの透明部分でも判定されてしまいます。
それを回避する方法として、マウスのイベントリスナーを使うのではなく、マウス座標上にあるビットマップのピクセル色が透明かどうかを測定して、判定をするようにしています。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Main extends Sprite {
		
		public function Main() {
			var target:Sprite = new Sprite();
			
			//ライブラリ内の「Cloud」ビットマップクラス（透過PNG）インスタンスを作成
			var bitmap_data:BitmapData = new Cloud();
			var bitmap:Bitmap = new Bitmap(bitmap_data, PixelSnapping.NEVER, true);
			target.addChild(bitmap);
			stage.addChild(target);
			setBitmapRollOverOut(target, bitmap_data, targetOverTest, targetOutTest);
		}
		
		//ロールオーバー時
		private function targetOverTest(target:*):void {
			target.buttonMode = true;
			target.alpha = 0.5;
		}
		
		//ロールアウト時
		private function targetOutTest(target:*):void {
			target.buttonMode = false;
			target.alpha = 1;
		}
		
		//引数にロールオーバー時、ロールアウト時の関数を渡します
		private function setBitmapRollOverOut(target:Object, bitmap_data:BitmapData, rolloverFunction:Function, rolloutFunction:Function):void {
			var color:uint = 0;
			target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
			
			function targetOverEnter(event:Event):void {
			
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
				
				//ビットマップが透明でなければロールオーバー関数を実行
				if (color != 0) {
				
					//ロールオーバー関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールアウトのエンターフレームを再開します
					target.removeEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.addEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloverFunction(target);
				}
			}
			
			function targetOutEnter(event:Event):void {
			
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
				
				//ビットマップが透明だったらロールアウト関数を実行
				if (color == 0) {
				
					//ロールアウト関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールオーバーのエンターフレームを再開します
					target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.removeEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloutFunction(target);
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

public class Main extends Sprite {

public function Main() {

var target:Sprite = new Sprite();

//ライブラリ内の「Cloud」ビットマップクラス（透過PNG）インスタンスを作成

var bitmap_data:BitmapData = new Cloud();

var bitmap:Bitmap = new Bitmap(bitmap_data, PixelSnapping.NEVER, true);

target.addChild(bitmap);

stage.addChild(target);

setBitmapRollOverOut(target, bitmap_data, targetOverTest, targetOutTest);

}

//ロールオーバー時

private function targetOverTest(target:*):void {

target.buttonMode = true;

target.alpha = 0.5;

}

//ロールアウト時

private function targetOutTest(target:*):void {

target.buttonMode = false;

target.alpha = 1;

}

//引数にロールオーバー時、ロールアウト時の関数を渡します

private function setBitmapRollOverOut(target:Object, bitmap_data:BitmapData, rolloverFunction:Function, rolloutFunction:Function):void {

var color:uint = 0;

target.addEventListener(Event.ENTER_FRAME, targetOverEnter);

function targetOverEnter(event:Event):void {

//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定

color = bitmap_data.getPixel32(target.mouseX, target.mouseY);

//ビットマップが透明でなければロールオーバー関数を実行

if (color != 0) {

//ロールオーバー関数の実行を一度だけにするため、一旦エンターフレームを解除します

//同時にロールアウトのエンターフレームを再開します

target.removeEventListener(Event.ENTER_FRAME, targetOverEnter);

target.addEventListener(Event.ENTER_FRAME, targetOutEnter);

rolloverFunction(target);

}

function targetOutEnter(event:Event):void {

//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定

color = bitmap_data.getPixel32(target.mouseX, target.mouseY);

//ビットマップが透明だったらロールアウト関数を実行

if (color == 0) {

//ロールアウト関数の実行を一度だけにするため、一旦エンターフレームを解除します

//同時にロールオーバーのエンターフレームを再開します

target.addEventListener(Event.ENTER_FRAME, targetOverEnter);

target.removeEventListener(Event.ENTER_FRAME, targetOutEnter);

rolloutFunction(target);

}

Drupal 7でユーザープロフィールの項目をノード内に出力。

2011.05.23 / Labs

Drupal 7から標準で実装されたユーザープロフィールの項目を、ノードの投稿者情報に関連づけて出力する方法です。

一般的にユーザーアカウントの名前には英数字のみで構成されるので、それとは別に日本語での名前を、ユーザープロフィールに「field_name」として追加しています。

ユーザープロフィールを出力する一番簡単な方法は、ビューを使うことですが、今回はテーマに組み込む方法で出力を行います。

テーマに変更を加えるのは次の2つです。

「template.php」にpreprocess関数を追加
「node.tpl.php」にユーザープロフィール変数の出力コードを追加

テーマフォルダの中に含まれている「template.php」ファイルに、次のようにpreprocess関数を追加します。

<?php
function THEMENAME_preprocess_node(&$variables) {
	$value = db_query("SELECT field_name_value  FROM {field_data_field_name} where entity_id= :uid", array(':uid' =>$variables['uid']))->fetchField();
	$variables['alter_name'] = $value;
}
?>

<?php

function THEMENAME_preprocess_node(&$variables) {

$value = db_query("SELECT field_name_value FROM {field_data_field_name} where entity_id= :uid", array(':uid' =>$variables['uid']))->fetchField();

$variables['alter_name'] = $value;

}

関数名の「THEMENAME」の部分は、実際のテーマ名に置き換えます。
ここでは投稿者の「uid」からユーザープロフィール「field_name」を参照して、「node.tpl.php」に渡す変数の配列に値を追加しています。

次に「node.tpl.php」にて、上記で渡された変数を出力します。

<?php print $alter_name; ?>

1	<?php print $alter_name; ?>

「node.tpl.php」ファイルを書き換え後は、「パフォーマンス」でキャッシュのクリアをしないと、うまく反映していないかもしれません。

Drupal 7のスクラッチテーマ作成。

2011.05.21 / Labs

Drupal 7正式版が登場して5ヶ月あまり経ちますが、そろそろ主要モジュールも整ってきたので、Drupal 6からDrupal 7へ移行を進めています。
Drupal 7でサイトを構築するにあたり重要となるテーマ作成ですが、基本的な構成のみをまとめたスクラッチテーマを作成してみました。
Drupal 7のスクラッチテーマ

drupal 7ではテーマを継承してサブテーマを作ることができるので、上記の基本構成以外はサブテーマにて装飾を加えていくことで、効率的なサイト構築が可能です。

テーマ制作の流れは、おおむねDrupal 6の場合と変わっていないように感じました。
ただしテンプレートファイル内で利用するメソッド、パラメータには変更があったので、Drupal 6のテーマをDrupal 7用に書き換えるのは、少し大変かもしれません。

またDrupalオフィシャルサイトでは、テーマ作成のためドキュメントが充実しているので、とても参考になりました。
Theming Drupal 6 and 7 | drupal.org

jQueryでアンカーポイントまでスクロール。

2011.04.01 / Labs

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

function scrollToAnchor() {
	$("a[href*=#]").click(function() {
		var target = this.hash;
		var offset = $(target).offset().top;
		if (offset > $(document).height()-$(window).height()) {
			offset = $(document).height()-$(window).height();
		}
		$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});
		return false;
	});
}

function scrollToAnchor() {

$("a[href*=#]").click(function() {

var target = this.hash;

var offset = $(target).offset().top;

if (offset > $(document).height()-$(window).height()) {

offset = $(document).height()-$(window).height();

}

$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});

return false;

});

}

<a>タグのリンクからハッシュ（#の部分）のみを抽出して、ページ先頭からの高さを調べています。

テキストフィールドの文字数をカウント。

2011.03.05 / Labs

テキストフィールドに入力した文字数を、リアルタイムにカウントするためのスクリプトです。
サンプルはこちら

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	countField("textarea#field");
});

function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();

	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}
</script>
<title>Count Field</title>
</head>
<body>



<p>テキストエリアに入力した文字数がカウントされます。</p>
<form>
<textarea id="field" cols="100" rows="10"></textarea>
</form>



</body>
</html>

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

<head>

$(function() {

countField("textarea#field");

});

function countField(target) {

$(target).after("<div class=\"count\"></div>");

$(target).bind({

keyup: function() {

setCounter();

change: function() {

setCounter();

}

});

setCounter();

function setCounter(){

$("div.count").text("文字数："+$(target).val().length);

};

}

</script>

<title>Count Field</title>

</head>

<body>

<p>テキストエリアに入力した文字数がカウントされます。</p>

<form>

</form>

</body>

</html>

テキストエリア内でキーストロークがあった時、またはテキストエリアの内容が変更されたときに文字数をカウントして、表示を書き換えています。

function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();

	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}

function countField(target) {

$(target).after("<div class=\"count\"></div>");

$(target).bind({

keyup: function() {

setCounter();

change: function() {

setCounter();

}

});

setCounter();

function setCounter(){

$("div.count").text("文字数："+$(target).val().length);

};

}