almondlab. » labs

Google Mapsで住所、緯度・経度を取得。

almondlab. — Fri, 27 Jan 2012 14:01:28 +0000

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>
 
 
 
<div id="map" style="width:500px; height:500px;"></div>
 
 
 
<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>
 
 
 
</body>
</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
 
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
 
 
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
 
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
 
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
 
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}

CakePHP 2.0でユーザーのアクセス権限をチェック。

almondlab. — Sat, 08 Oct 2011 08:57:10 +0000

CakePHP 2.0 RC3でブログのサンプル、ACLを設定した後に、各コントローラーでアクセス権限をViewのテンプレートファイル内（View/Posts/index.ctpなど）でチェックするためのコードメモです。

ブログのサンプル、ACLについてはCakePHPマニュアルページの中にあるチュートリアルを参考に設定してみました。（ACLチュートリアルの説明は難解ですね。かなり苦戦しました・・・。）
CakePHPブログチュートリアル（英語）
ACL を制御するシンプルなアプリケーション（英語）

チュートリアルで作成したブログのコントローラ「PostsController.php」のbeforeFilter()の中に下記のコードを記述することで、閲覧しているユーザーのアクセス権限をチェックし、「create」「read」「update」「delete」の各アクションの権限の有無を配列にして、Viewへ渡すデータにセットするようにしています。

function beforeFilter() {
	$acl = array();
	$action = array('create', 'read', 'update', 'delete');
	foreach ($action as $value) {
		$acl[$value] = $this->Acl->check($this->Auth->user('username'), 'posts', $value);
	}
	$this->set('acl', $acl);
}

Viewのテンプレート上では次のように利用できます。

1
2
3

if ($acl['create']) {
	echo $this->Html->link('Add Post', array('action' => 'add'));
}

ユーザーの権限によって、編集や削除のリンクを、表示／非表示にしたい場合などに使えるかなと思います。
他にもっと良い方法があるかもしれませんが・・・。

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

almondlab. — Wed, 15 Jun 2011 05:54:11 +0000

マウスのロールオーバー時に、ビットマップの透過ではない部分でのみ判定をする方法です。
通常ビットマップのマウス判定には矩形エリア全体が対象になるので、透明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);
				}
			}
		}
	}
}

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

almondlab. — Mon, 23 May 2011 12:15:15 +0000

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

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

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

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

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

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


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」にて、上記で渡された変数を出力します。

1	print $alter_name; ?>

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

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

almondlab. — Sat, 21 May 2011 08:44:42 +0000

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でアンカーポイントまでスクロール。

almondlab. — Fri, 01 Apr 2011 13:26:33 +0000

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

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

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

almondlab. — Sat, 05 Mar 2011 04:39:06 +0000

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


<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>

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

function countField(target) {
	$(target).after("\"count\">
");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();
 
	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}

外部SWFファイルからフォントの埋め込み。

almondlab. — Sun, 02 Jan 2011 03:56:25 +0000

ActionScriptで外部のSWFファイルに登録してあるフォントを、動的に埋め込む方法です。
初めにフォント情報をリンケージとして登録するためのSWFを作成します。
新規でflaファイルを作成して、ライブラリパネル上で右クリックから表示されるコンテクストメニューで「新しいフォント…」を選択します。

フォント名を入力して、埋め込みたいフォントと文字を選択します。
ここでのフォント名は後から参照することはないので、自由な名称で構いません。

続いて「ActionScript」タブからリンケージの「アクションスクリプト用に書き出し」にチェックを入れて、クラス名を入力します。
このクラス名は埋め込みの際にActionScriptから参照します。

これでライブラリパネルに、リンケージとしてフォントが登録されました。
この状態でSWFファイルを書き出して、ファイル名を「fonts.swf」としておきます。

次に、作成した外部SWFを読み込み、フォントを埋め込むActionScriptファイルを作成します。
下記のようなスクリプトを記述します。

package {
 
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;	
	import flash.system.ApplicationDomain;
	import flash.text.AntiAliasType;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class Main extends Sprite {
 
		public function Main() {
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(new URLRequest("fonts.swf"));
 
			function onComplete(event:Event):void {
				var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
				var HelveticaRegular:Class = domain.getDefinition("HelveticaRegular") as Class;
				var field:TextField = new TextField();
				var format:TextFormat = new TextFormat();
				var helvetica_regular:Font = new HelveticaRegular();
				Font.registerFont(HelveticaRegular);
				format.font = helvetica_regular.fontName;
				field.defaultTextFormat = format;
				field.embedFonts = true;
				field.antiAliasType = AntiAliasType.ADVANCED;
				field.text = "Font embedded via external swf file.";
				stage.addChild(field);
			}
		}
	}
}

上記はドキュメントクラスとして記述した場合の例です。

16
17
18

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("fonts.swf"));

初めに作成した外部SWFファイルを読み込みます。

21
22

var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
var HelveticaRegular:Class = domain.getDefinition("HelveticaRegular") as Class;

外部SWFファイルにリンケージとして登録したフォント（クラス）を利用可能にするために「ApplicationDomain」を登録します。
フォントクラス「HelveticaRegular」として登録します。

26	Font.registerFont(HelveticaRegular);

先ほど登録したフォントクラスを、グローバルフォントに登録します。

27	format.font = helvetica_regular.fontName;

フォントクラスから作成したオブジェクトをもとに、テキストフォーマットにフォント名を指定します。

29	field.embedFonts = true;

フォントの埋め込みを有効にします。

30	field.antiAliasType = AntiAliasType.ADVANCED;

フォントクラスから埋め込みの際のテキストフィールドは、アンチエイリアスが「NORMAL」の状態で、あまりきれいではないので「ADVANCED」に変更します。

jQueryでモーダルウィンドウを作成。

almondlab. — Thu, 23 Dec 2010 10:45:17 +0000

ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。（2011.12.02）

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common/js/init.js" type="text/javascript"></script>
<title>modal window</title>
</head>
<body>
 
 
 
<div id="modal">
<div class="background"></div>
<div class="container"></div>
</div>
 
 
 
<ul>
<li><a href="test-01.html" class="modal">ウィンドウ1</a></li>
<li><a href="test-02.html" class="modal">ウィンドウ2</a></li>
<li><a href="test-03.html" class="modal">ウィンドウ3</a></li>
</ul>
 
 
 
</body>
</html>

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

@charset "utf-8"; 
 
 
 
html,
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
div#modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
}
div#modal div.background {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
}
div#modal div.container {
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #ffffff;
}

CSSでは、モーダルウィンドウの背景を黒（#000000）の透明度75%としています。

$(function() {
	setModal();
})
 
function setModal() {
 
	//HTML読み込み時にモーダルウィンドウの位置をセンターに調整
	adjustCenter("div#modal div.container");
 
	//ウィンドウリサイズ時にモーダルウィンドウの位置をセンターに調整
	$(window).resize(function() {
		adjustCenter("div#modal div.container");
	});
 
	//背景がクリックされた時にモーダルウィンドウを閉じる
	$("div#modal div.background").click(function() {
		displayModal(false);
	});
 
	//リンクがクリックされた時にAjaxでコンテンツを読み込む
	$("a.modal").click(function() {
		$("div#modal div.container").load($(this).attr("href"), data="html", onComplete);
		return false;
	});
 
	//コンテンツの読み込み完了時にモーダルウィンドウを開く
	function onComplete() {
		displayModal(true);
		$("div#modal div.container a.close").click(function() {
			displayModal(false);
			return false;
		});
	}
}
 
//モーダルウィンドウを開く
function displayModal(sign) {
	if (sign) {
		$("div#modal").fadeIn(500);
	} else {
		$("div#modal").fadeOut(250);
	}
}
 
//ウィンドウの位置をセンターに調整
function adjustCenter(target) {
	var margin_top = ($(window).height()-$(target).height())/2;
	var margin_left = ($(window).width()-$(target).width())/2;
	$(target).css({top:margin_top+"px", left:margin_left+"px"});
}

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。

Drupal 7をローカル環境にインストール。

almondlab. — Sat, 16 Oct 2010 14:15:42 +0000

先日公開されたDrupal 7のベータ版をローカルのテスト環境（MAMP）にインストールしてみました。
インストールの流れは、おおむねDrupal 6のときと同じでした。日本語の言語ファイルはDrupalのTranslateサイトのものを利用させていただきました。

言語ファイルの取り込みは、ダウンロードしたpoファイルを「profiles/standard/translations/」ディレクトリに配置してインストールを行えばよいという認識だったのですが、インストール実行中にエラーが表示され進めることができなかったので、一旦英語版の状態でインストールを完了し、管理画面の「環境設定　＞　インターフェースの翻訳」よりpoファイルをインポートして、日本語の言語ファイルを取込みました。
インポートには、予めコアモジュール「Locale」を有効にしておく必要があります。

デフォルトのフロントページはこんな感じです。
テーマは新しく導入された「Bartik」というテーマです。

Drupal 6に比べて大きく違うのは、上部に管理メニューが表示されていること、デフォルトテーマが変わったことです。
従来のテーマ「Garland」も含まれているので、メニューの「テーマから」変更することもできます。

管理画面も大きく変わり、通常ページに対してレイヤーで表示されるようになりました。
非同期通信で管理画面を遷移していくので、体感的には表示がクィックになったように思います。

Drupalで最も重要なモジュールの一つ「Views」も、Drupal 7用の開発版が利用可能です。
ViewsのインターフェイスはDrupal 6のものと大きな違いはありません。機能的な部分はまだ触っていませんが、見た感じは若干項目が整頓されています。

Drupal 7になってCCKモジュールは本体に統合されました。フィールドのタイプも、ファイル、画像などが追加されて、より使いやすくなっています。
ノード参照、ユーザー参照が含まれていないようですが、これはベータ版だからかな？

ちなみに管理画面のレイヤー表示はコアモジュールの「Overlay」を無効にすることで、これまで通りの表示に戻すことができます。

レイヤー表示では上下左右に余白ができるので、小さなディスプレイでは使いにくいという場合には、こちらの方がよいかもしれません。

軽く触ってみた感じでは、管理画面のメニューが整頓されたり、レイヤー表示であったりと、サイトの更新においてずいぶん使いやすくなったと思います。
CCKが統合されたことで、これからDrupalを始める方にとっても、Drupalの拡張性の高さを直ぐに感じることができるのではないでしょうか。
現在はまだベータ版なので、バグのようなものも若干見られます。
しばらくはテーマ作成など取り組んでみて、2011年の前半あたりに正式版の登場を期待したいです。

drupal.org

Google Mapsを簡単に設置。

almondlab. — Wed, 22 Sep 2010 12:31:38 +0000

Google Maps API Version 3になってからAPIキーが不要になり、ホームページへ手軽に設置できるようになりました。
基本的なGoogle Mapsを設置するためのコードを、コンパクトにまとめてみました。
サンプルはこちら


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function() {
setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});
});
 
function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}
</script>
<title>Google Maps</title>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

最初に、Google Maps APIを読み込みます。

5	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Google Mapsを設置するための関数を呼び出します。引数にはオブジェクトで、表示するためのDIV要素のID、緯度、経度、ズーム、ウィンドウのテキストを入れています。

9	setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"東京駅"});

関数はセンターにマーカーを表示して、クリックでウィンドウが開くシンプルな構成です。

function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}

PHPで祝日表示付きカレンダーの作成。

almondlab. — Sun, 16 May 2010 05:17:51 +0000

PHPのPEARライブラリを使って、祝日の表示を加えたカレンダーの作成方法です。
カレンダーの作成には「Calendar」ライブラリ、祝日の取得には「Date_Holidays_Japan」ライブラリを利用しています。
サンプルはこちら


require_once("Calendar/Month/Weekdays.php");
require_once("Date/Holidays.php");
 
$current_year = date("Y");
$current_month = date("n");
$calMonth = new Calendar_Month_Weekdays($current_year, $current_month, 0);//第3引数の0は週の最初を日曜に
$calMonth->build();
$ja = "data/Date_Holidays_Japan/lang/Japan/ja_JP.xml";
$dh = &Date_Holidays::factory("Japan", $current_year, "ja_JP");
$dh->addTranslationFile($ja, "ja_JP");
$holidays = array();
 
//祝日の月日をキーに祝日名を配列に格納
foreach ($dh->getHolidays() as $value) {
	$holidays[$value->getDate()->format("%m%d")] = $value->getTitle();
}
 
echo "".$current_year."年".$current_month."月"."
\n";
echo "\"calendar\">\n";echo"\n";echo"\n";echo"\n";echo"\n"; 
 
while($day=$calMonth->fetch()){if($day->isFirst()){echo'';}if($day->isEmpty()){echo"";}else{$date=sprintf("%02d",$day->thisMonth()).sprintf("%02d",$day->thisDay());if(array_key_exists($date,$holidays)){echo"";}if($day->isLast()){echo"\n";}}echo"\n";echo" 
  
 日 月 火 水 木 金 土 
  
      
	  
		 
	
	   
		  
	   
		  
		   
			 \"holiday\">";//祝日のとき
		} else if ($day->isFirst()) {
			echo " \"sun\">";//週の最初（日曜）のとき
		} else if ($day->isLast()) {
			echo " \"sat\">";//週の最後（土曜）のとき
		} else {
			echo " ";
		}
		echo "\"day\">".$day->thisDay()."";
 
		//祝日に該当する月日の場合、祝日名を出力
		if (array_key_exists($date, $holidays)) {
			echo "\"holiday\">".$holidays[$date]."";
		}
		echo "
	 
	   
		 
	 
 
 
 
\n";
?>

あらかじめ祝日の月日、名称を配列に格納しておき、カレンダー生成のループの中で、祝日の判定を行っています。

PEAR Calendar
PEAR Date_Holidays_Japan

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

almondlab. — Sun, 25 Apr 2010 11:46:44 +0000

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

index.html


<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>
 
 
 

 
<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>
 
 
 
<div id="container">
<div id="general">
 
 
 

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

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

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

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

 
<div id="panel-05" class="inner">
<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;
}

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

almondlab. — Sun, 28 Feb 2010 15:00:17 +0000

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

photo by : chantrybee

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

almondlab. — Tue, 16 Feb 2010 14:36:24 +0000

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の関数を実行。

almondlab. — Sat, 06 Feb 2010 15:00:29 +0000

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;
			}
		}
	}
}

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

PHPファイル「functions.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で受け取ることができます。

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

almondlab. — Sun, 10 Jan 2010 15:00:47 +0000

縦横に複数のページを持つフィールドを、ウィンドウ内でスクロールします。グリッド状に縦横にページを作成して、方向キーの操作でページをスクロールします。
サンプルはこちら
（方向キーを有効にするには、一度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});
				}
			}
		}
	}
}

CSS3から扱えるエフェクト機能。

almondlab. — Fri, 08 Jan 2010 16:03:52 +0000

CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。

ボックスのコーナーを丸くする

ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。

Box Round

.box-round {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #ffffff;
	background: #999999;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* safari, Chrome */
}

ボックスにシャドウを付ける

ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。

Box Shadow

.box-shadow {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #cccccc;
	border: 1px solid #e6e6e6;
	background: #ffffff;
	-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */
	-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */
}

テキストにシャドウを付ける

X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。

Text Shadow

1
2
3

.text-shadow {
	text-shadow: #cccccc 3px 3px 5px;
}

テキストを光らせる

テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。

Text Glow

.text-glow {
	color: #ffffff;
	text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;
}

ボックスを透過させる

要素に対して透明度を0〜1の間で指定できます。

Opacity

.opacity {
	width: 150px;
	height: 200px;
	text-align: center;
	color: #666666;
	background: #ffffff;
	opacity:0.5;
}

ブラウザ上でActionSctiptの簡易デバッグ。

almondlab. — Thu, 07 Jan 2010 14:50:27 +0000

ブラウザでFLASHを再生中、デバッグのためにパラメータなどを出力する方法です。
ActionScriptを制作中によく利用するtraceですが、ブラウザで再生中には実行することができません。そこでJavaScriptとの連携を利用して同様のことを実現します。
はじめにHTML内にJavaScriptで、引数を受け取りダイアログで表示するスクリプトを記述します。関数名は「flashTrace」としておきます。

<script type="text/javascript">
function flashTrace($str) {
alert($str);
}
script>

次にActionScriptでは、JavaScriptの関数を実行するたスクリプトを記述します。引数の一つ目がJavaScriptの関数名で、二つ目が出力したいパラメータです。

1	ExternalInterface.call("flashTrace", "デバッグのテスト");

これでブラウザで再生中に、ダイアログでActionScript内のパラメータを出力することができます。
ですが、このままだとFLASHで制作中のときには、traceも併記する必要が出てしまいます。その場合、下記のようにブラウザで再生かどうかを判定して、どちらか実行する関数にしておくと便利です。

ft("デバッグのテスト");
 
function ft(str:String):void {
 
	//サーバへのアクセスを判定してJavascript、またはtraceを実行
	if (loaderInfo.url.indexOf("http") == 0) {
		ExternalInterface.call("flashTrace", str);
	} else {
		trace(str);
	}
}

ちなみにサーバへのアクセス（http://）ではなく、ブラウザで直接HTMLファイルを開いた場合（file://）には、FLASHのセキュリティでJavaScriptが実行されません。外部サーバではなくローカルで実行するには、Webサーバをローカル環境に構築する必要があります。

Codaのプラグイン作成。

almondlab. — Mon, 04 Jan 2010 03:39:46 +0000

Codaで制作効率をアップさせる、ちょっとしたプラグインの作成方法です。
プラグインを作成するには専用のツールが必要になります。Panicサイトの Codaデベロッパゾーンで「Coda Plug-in Creator」が配布されているので、こちらをダウンロードします。サンプルプラグインも同時に配布されていて、初めてプラグインを作成する際に参考になります。

「Coda Plug-in Creator」を起動すると新規ウィンドウが開かれます。

今回はシンプルに、選択したテキストに対して

、

などの任意のタグで囲むだけのプラグインを作成します。実は、サンプルプラグインにも同様のものが含まれていて、それをもとに作成しています。
CodaのプラグインのスクリプトそのものはPHP（またはCocoa）で書かれていて、上記のウィンドウではそれらを管理し、プラグインを構成していきます。

プラグイン編集中のウィンドウです。編集の大まかな流れは以下のようになります。

コマンドの作成
プラグイン内のコマンドを作成します。作成したコマンドは左ペインに登録されて、右ペインで編集が可能になります。左ペインの「Shortcut」の箇所をクリックしてショートカットを設定することもできます。
スクリプトの作成、または編集
作成したコマンドを選択すると、「Script」がアクティブになり、スクリプトを作成することができます。すでに作成されていると編集になります。スクリプトファイルはプラグインファイルに内包されます。
入力テキスト
入力テキストの扱いを指定します。選択テキストのみ、ドキュメント全体、選択なしなど。
出力テキスト
スクリプトを実行した後の、出力テキストの扱いを指定します。選択テキストを置き換え、ドキュメント全体を置き換えなど。
ポインターの位置
スクリプトを実行した後の、テキストポインターの位置を指定したい場合にチェックします。その場合スクリプト内に記述する「$$IP$$」にポインターが移動します。

作成したスクリプトファイルには、このように記述しています。（

で囲む場合）

#!/usr/bin/php

$fp = fopen('php://stdin', 'r');
echo ''.fgets($fp, 1024).'
';
fclose($fp);
?>

プラグインの作成が完了したら、保存して書き出されるプラグインファイルを「Application Support/Coda/Plug-ins」フォルダに入れます。これでメニューの「Plug-ins」から実行可能になります。