2010.2

jQueryでイメージのロールオーバーの設定。

2010.02.27 / Notes

jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。

<img src="button.png" alt="ボタン" class="over" />

1	<img src="button.png" alt="ボタン" class="over" />

次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。

$(function(){
	imageOver();
})

//イメージのロールオーバー設定
function imageOver() {

	//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
	$("img.over").each(function() {
		
		//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
		var image = this.src;
		var extension = image.substr(image.lastIndexOf("."), image.length-1);
		var image_over = image.replace(extension, "-over"+extension);
		
		//ロールオーバー用イメージを読み込み
		new Image().src = image_over;
		
		//ロールオーバー、ロールアウト時のイメージURL設定
		$(this).hover(
			function(){this.src = image_over},
			function(){this.src = image}
		);
	});
}

$(function(){

imageOver();

})

//イメージのロールオーバー設定

function imageOver() {

//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行

$("img.over").each(function() {

//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成

var image = this.src;

var extension = image.substr(image.lastIndexOf("."), image.length-1);

var image_over = image.replace(extension, "-over"+extension);

//ロールオーバー用イメージを読み込み

new Image().src = image_over;

//ロールオーバー、ロールアウト時のイメージURL設定

$(this).hover(

function(){this.src = image_over},

function(){this.src = image}

);

});

}

上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。

Joomla!の記事内でPHPを出力。

2010.02.22 / Notes

Joomla!標準では記事の投稿フォーム内でPHPを実行することはできませんが、「Jumi」というプラグインで、PHPの出力を行うことができます。
使い方は、予め用意したPHPファイルをサーバにアップしておき、記事内からJumiの専用コードで、PHPファイル名と引数を記述して実行します。
WordPressのショートコードに似た使い方です。

{jumi[scripts/test.php][5][2]}

1	{jumi[scripts/test.php][5][2]}

上記の例ではJoomla!を設置しているルートディレクトリに「scripts」というディレクトリを作り、その中にPHPファイル「test.php」を置いてあります。二つ目以降の四角カッコが引数になります。
PHPファイルには次のように記述しておきます。

<?php
echo $jumi[0] * $jumi[1];
?>

<?php

echo $jumi[0] * $jumi[1];

「$jumi[n]」で順番に引数を受け取っていきます。上記のを実行した記事では「10」と出力されます。

またJumiにはモジュール版のあり、任意のブロックにPHPコードを出力することができます。

カスタムHTMLモジュールのPHP版のような使い方ができます。
Jumiプラグインページ

Tweenerでテキストを一文字ずつ表示。

2010.02.21 / Notes

ActionScriptのライブラリ「Tweener」を使って、テキストを一文字ずつ表示する方法です。
サンプルはこちら

package {
	
	import flash.display.Sprite;
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.TextShortcuts;  
	TextShortcuts.init(); //テキストショートカットを初期化

	public class Main extends Sprite {
		
		public function Main() {
			var types:String = "Tweenerを利用すると、簡単にテキストを一文字ずつ表示することができます。";
			
			//2秒間でtypesのテキストを一文字ずつ表示
			Tweener.addTween(text_field, {time:2, _text:types, transition:"linear"});
		}
	}
}

package {

import flash.display.Sprite;

import caurina.transitions.Tweener;

import caurina.transitions.properties.TextShortcuts;

TextShortcuts.init(); //テキストショートカットを初期化

public class Main extends Sprite {

public function Main() {

var types:String = "Tweenerを利用すると、簡単にテキストを一文字ずつ表示することができます。";

//2秒間でtypesのテキストを一文字ずつ表示

Tweener.addTween(text_field, {time:2, _text:types, transition:"linear"});

}

Tweener Documentation

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

EspressoでSugar、Themeのインストール。

2010.02.15 / Notes

Mac
Plugin

Macのコーディング用テキストエディタEspressoには、扱える言語を追加する「Sugar」と、テキスト表示のカラーリングを変更する「Theme」のプラグイン機能があります。
いずれもEspressoの特設サイト「Coffee House」からダウンロードできます。

「Sugar」のインストールにはファイルをダウンロードした後、圧縮ファイルを解凍します。解凍したファイル名が「derekr-php.sugar-803a828」といった感じになっているので、末尾の「-803a828」を取り除いて、拡張子が「.sugar」になるようにします。
そのファイルを
~/Library/Application Support/Espresso/Sugars/
に格納します。（Sugarsフォルダがない場合は作成します）
プラグイン
「Theme」の場合も同じくダウンロードしたCSSファイルを、Themesフォルダに格納します。
テーマ
たまには気分を変えてみるのもいいかもしれません。
Mac Rabbit
Coffee House