2010.1

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

2010.01.09 / Labs

CSS
CSS3

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

.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 */
}

.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

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

.text-shadow {

text-shadow: #cccccc 3px 3px 5px;

}

テキストを光らせる

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

Text Glow

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

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

.opacity {

width: 150px;

height: 200px;

text-align: center;

color: #666666;

background: #ffffff;

opacity:0.5;

}

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

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

function flashTrace($str) {

alert($str);

}

</script>

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

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

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

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サーバをローカル環境に構築する必要があります。

jQueryのプラグインでFLASHの埋め込み。

2010.01.05 / Notes

jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。

<!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" />
<title>jQuery FLASH</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>
</head>
<body>

<div id="flash">
<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>
</div><!-- flash -->

</body>
</html>

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

<head>

<title>jQuery FLASH</title>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

</head>

<body>

<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>

</div>

</body>

</html>

<head>タグ内にjQuery本体とjquery.flash.jsを読み込んで、div#flashに対して埋め込みの記述をします。
最低限必要なのはSWFファイルのパスのみで、width、heightは省略できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

FLASHにパラメータを渡す場合は、次のようにflashvarsをオブジェクトで追加します。

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

1	$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

jquery.flash.jsプラグインページ

Drupalでよく利用しているモジュール。

2010.01.04 / Notes

Drupalでサイト構築の際に、よく利用しているモジュールです。

Administration menu: 管理者でログインした際に、ページ上部にプルダウン式の管理セクションのメニューが追加されます。
Backup and Migrate: データベースのバックアップ、リストアが行えます。サイトの引越しの時に便利です。
Calendar: カレンダー機能を追加します。CCK、Viewsと組み合わせて使います。
Content Construction Kit (CCK): コンテンツタイプにテキストや整数など項目を追加します。
Content Templates (Contemplate): コンテンツタイプごとにテンプレートをカスタマイズできます。
Date: CCKのフィールドに日時を追加します。Calendarモジュールで必要です。
FCKeditor: 本文の入力フォームにWYSIWYGエディタを追加します。
FileField: CCKのフィールドに添付ファイルを追加します。
IMCE: 高機能なファイルブラウザを追加します。
Imce CCK Image: CCKのフィールドに画像アップロードを追加します。
Menu per Role: メニュー項目ごとにロールを割り当てます。
Nodeaccess: ノード、コンテンツタイプごとにロールを割り当てます。
Poormanscron: 定期的なcronの実行を管理できます。
Printer, e-mail and PDF versions: ノードごとに印刷用ページ、メール送信、PDF出力が行えます。
Rules: サイトのイベントに対して、アクションを実行できます。Trigger＋Actionを強化したようなモジュールです。
Token: 置換パターンの文字列を入力することで、実際のデータに展開して出力します。例えば、［site-url］と入力するとサイトのURLを出力します。
Upload path: ファイルのアップロードパスを変更することができます。パスの指定にはTokenを利用できます。
Views: ノードの表示方法を柔軟にコントロールできます。
Views Custom Field: ViewsのフィールドにPHPなどを扱える、カスタムフィールドを追加します。
Webform: 項目を自由に作成できる、メール送信フォーム用のコンテンツタイプを追加します。

Codaのプラグイン作成。

2010.01.04 / Labs

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

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

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

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

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

作成したスクリプトファイルには、このように記述しています。（<p>で囲む場合）

#!/usr/bin/php
<?php
$fp = fopen('php://stdin', 'r');
echo '<p>'.fgets($fp, 1024).'</p>';
fclose($fp);
?>

#!/usr/bin/php

<?php

$fp = fopen('php://stdin', 'r');

echo '<p>'.fgets($fp, 1024).'</p>';

fclose($fp);

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

Almondlab

2010.1

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

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

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

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

Text Shadow

テキストを光らせる

Text Glow

ボックスを透過させる

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

jQueryのプラグインでFLASHの埋め込み。

Drupalでよく利用しているモジュール。

Codaのプラグイン作成。