Labs

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

2011.01.02 / Labs

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

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

}

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

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

var loader:Loader = new Loader();

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

loader.load(new URLRequest("fonts.swf"));

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

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

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

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

Font.registerFont(HelveticaRegular);

1	Font.registerFont(HelveticaRegular);

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

format.font = helvetica_regular.fontName;

1	format.font = helvetica_regular.fontName;

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

field.embedFonts = true;

1	field.embedFonts = true;

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

field.antiAliasType = AntiAliasType.ADVANCED;

1	field.antiAliasType = AntiAliasType.ADVANCED;

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

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

2010.12.23 / Labs

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

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

<!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" />
<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><!-- modal -->



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

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

<head>

<title>modal window</title>

</head>

<body>

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

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

$(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をローカル環境にインストール。

2010.10.16 / Labs

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

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

デフォルトのフロントページはこんな感じです。
テーマは新しく導入された「Bartik」というテーマです。
Drupal 7
Drupal 6に比べて大きく違うのは、上部に管理メニューが表示されていること、デフォルトテーマが変わったことです。
従来のテーマ「Garland」も含まれているので、メニューの「テーマから」変更することもできます。
Drupal 7
管理画面も大きく変わり、通常ページに対してレイヤーで表示されるようになりました。
非同期通信で管理画面を遷移していくので、体感的には表示がクィックになったように思います。

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

Drupal 7になってCCKモジュールは本体に統合されました。フィールドのタイプも、ファイル、画像などが追加されて、より使いやすくなっています。
ノード参照、ユーザー参照が含まれていないようですが、これはベータ版だからかな？
Drupal 7
ちなみに管理画面のレイヤー表示はコアモジュールの「Overlay」を無効にすることで、これまで通りの表示に戻すことができます。

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

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

drupal.org

Google Mapsを簡単に設置。

2010.09.22 / Labs

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

<!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" />
<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>

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

<head>

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

</body>

</html>

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

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

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

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

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

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

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で祝日表示付きカレンダーの作成。

2010.05.16 / Labs

PEAR
PHP

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

<?php
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 "<h2>".$current_year."年".$current_month."月"."</h2>\n";
echo "<table class=\"calendar\">\n"; 
echo "<thead>\n"; 
echo "<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>\n"; 
echo "</thead>\n"; 
echo "<tbody>\n"; 

while ($day = $calMonth->fetch()) { 
	if ($day->isFirst()) {
		echo '<tr>';
	}
	if ($day->isEmpty()) { 
		echo "<td>&nbsp;</td>";
	} else { 
		$date = sprintf("%02d",$day->thisMonth()).sprintf("%02d",$day->thisDay());
		if (array_key_exists($date, $holidays)) {
			echo "<td class=\"holiday\">";//祝日のとき
		} else if ($day->isFirst()) {
			echo "<td class=\"sun\">";//週の最初（日曜）のとき
		} else if ($day->isLast()) {
			echo "<td class=\"sat\">";//週の最後（土曜）のとき
		} else {
			echo "<td>";
		}
		echo "<span class=\"day\">".$day->thisDay()."</span>";
		
		//祝日に該当する月日の場合、祝日名を出力
		if (array_key_exists($date, $holidays)) {
			echo "<span class=\"holiday\">".$holidays[$date]."</span>";
		}
		echo "</td>";
	} 
	if ($day->isLast()) { 
		echo "</tr>\n";
	} 
} 
echo "</tbody>\n";
echo "</table>\n";
?>

<?php

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 "<h2>".$current_year."年".$current_month."月"."</h2>\n";

echo "<table class=\"calendar\">\n";

echo "<thead>\n";

echo "<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>\n";

echo "</thead>\n";

echo "<tbody>\n";

while ($day = $calMonth->fetch()) {

if ($day->isFirst()) {

echo '<tr>';

}

if ($day->isEmpty()) {

echo "<td> </td>";

} else {

$date = sprintf("%02d",$day->thisMonth()).sprintf("%02d",$day->thisDay());

if (array_key_exists($date, $holidays)) {

echo "<td class=\"holiday\">";//祝日のとき

} else if ($day->isFirst()) {

echo "<td class=\"sun\">";//週の最初（日曜）のとき

} else if ($day->isLast()) {

echo "<td class=\"sat\">";//週の最後（土曜）のとき

} else {

echo "<td>";

}

echo "<span class=\"day\">".$day->thisDay()."</span>";

//祝日に該当する月日の場合、祝日名を出力

if (array_key_exists($date, $holidays)) {

echo "<span class=\"holiday\">".$holidays[$date]."</span>";

}

echo "</td>";

}

if ($day->isLast()) {

echo "</tr>\n";

}

echo "</tbody>\n";

echo "</table>\n";

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

PEAR Calendar
PEAR Date_Holidays_Japan