Labs

オンラインストレージの比較

2013.07.17 / Labs

Online Storage

近年は大容量化や同期機能など、充実したサービスを提供しているオンラインストレージ。仕事でも便利に使わせてもらっています。
そんなストレージの中で、使い勝手の良さそうなサービスを10点あげてみました。

オンラインストレージ無料会員の比較

サービス名	容量	紹介リンク	ファイルサイズ制限	同期機能	備考
Dropbox	2GB	500MB	無制限（Webからは300MB）	○
SugarSync	5GB	500MB	無制限（Webからは100MB）	○
Google Drive	15GB	—	10GB	○	Gmailなどの容量との合計で
Box	5GB	—	250MB	○
Copy	15GB	5GB	無制限	○
SkyDrive	7GB	—	2GB（Webからは300MB）	○
Amazon Cloud Drive	5GB	—	2GB	○
Pogoplug	5GB	—	無制限	○
Bitcasa	10GB	—	無制限	△	デバイス間の同期機能はなし
4sync	15GB	—	2GB	△	Mac用デスクトップアプリはなし

DropboxとSugarSyncは国内でも以前からサービスを提供していて、利用されている方も多いのではないでしょうか。PC用、スホ用アプリもこなれていて、使いやすいです。
Boxは海外では老舗の会社で、Webアプリケーションは良くできているように思います。1ファイルの容量制限が250MBというのがやや残念ですが・・・。
Copyはまだ新しいサービスで、無料会員の容量も15GBと大きいです。また紹介するごとに5GB増えていくのも嬉しいです。
Bitcasaは無料会員だと10GBですが、有料会員では容量無制限という魅力的なサービスです。

自分の環境では、デバイス間のデータの同期用にDropboxを、仕事でファイルを渡す際にはSugarSyncを、バックアップ目的にBitcasaを利用しています。
無料で使えるオンラインストレージの活用方法を考えてみるもの、なかなか楽しい作業です。

ウィンドウサイズに合わせて画像を全面に表示。

2012.08.10 / Labs

jQueryを使って、ウィンドウサイズに合わせて画像を拡大縮小し、全面に表示する方法です。
画像の縦横比率は保ったままに、ウィンドウの全面を覆うように拡大縮小を行っています。ウィンドウのリサイズの際には、画像もアニメーションでリサイズします。
サンプルはこちら

HTMLファイル内では、画像全面表示のための関数の実行と、ウィンドウリサイズ時の処理を記述しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adjust Image</title>
<link rel="stylesheet" type="text/css" href="common/css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.easing-1.3.min.js"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	var time = 1000;
	var time_resize = null;
	var image = $("div#image");
	$(window).bind("load", function() {
	adjustImage(image, 0);
		$(window).resize(function() {
			if (time_resize) {
				clearTimeout(time_resize);
			}
			time_resize = setTimeout(function() {adjustImage(image, time)}, 100);
		});
	});
});
</script>
</head>
<body>



<div id="image">
<div class="inner">
<img src="images/image.jpg" alt="" />
</div><!-- inner -->
</div><!-- image -->



</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Adjust Image</title>

$(function() {

var time = 1000;

var time_resize = null;

var image = $("div#image");

$(window).bind("load", function() {

adjustImage(image, 0);

$(window).resize(function() {

if (time_resize) {

clearTimeout(time_resize);

}

time_resize = setTimeout(function() {adjustImage(image, time)}, 100);

});

</script>

</head>

<body>

</div>

</div>

</body>

</html>

外部JavaScriptファイル「functions.js」に、画像全面表示のための関数を記述しています。
ウィンドウを覆い尽くすように画像サイズを拡大縮小して、センター表示にしています。

function adjustImage(image, time) {
	var image_width = image.find("img").width();
	var image_height = image.find("img").height();
	var width = 0;
	var height = 0;
	var margin_left = 0;
	var margin_top = 0;
	var ratio_outer = $(window).width()/$(window).height();
	var ratio_inner = image_width/image_height;
	if (ratio_outer > ratio_inner) {
		width = $(window).width();
		height = width/ratio_inner;
	} else {
		height = $(window).height();
		width = height*ratio_inner;
	}
	margin_left = Math.floor(($(window).width()-width)/2);
	margin_top = Math.floor(($(window).height()-height)/2);
	image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});
	image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});
}

function adjustImage(image, time) {

var image_width = image.find("img").width();

var image_height = image.find("img").height();

var width = 0;

var height = 0;

var margin_left = 0;

var margin_top = 0;

var ratio_outer = $(window).width()/$(window).height();

var ratio_inner = image_width/image_height;

if (ratio_outer > ratio_inner) {

width = $(window).width();

height = width/ratio_inner;

} else {

height = $(window).height();

width = height*ratio_inner;

}

margin_left = Math.floor(($(window).width()-width)/2);

margin_top = Math.floor(($(window).height()-height)/2);

image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});

image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});

}

画像表示のためのCSSの箇所は次のようになっています。

div#image {
	position: fixed;
	overflow: hidden;
}
div#image div.inner {
	position: relative;
}

div#image {

position: fixed;

overflow: hidden;

}

div#image div.inner {

position: relative;

}

フォーム項目の内容が変更された時のjQueryのイベントまとめ。

2012.07.05 / Labs

テキストフィールドや、ラジオボタンなど、フォーム項目の内容が変更された時に処理を行うための、jQueryによるイベントのまとめです。
サンプルはこちら

フォームは次のように、テキストフィールド、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスを作成します。

<form>

<!-- テキストフィールド -->
<input type="text" id="text" name="text" value="" />
<hr />

<!-- テキストエリア -->
<textarea id="textarea" name="textarea"></textarea>
<hr />

<!-- ラジオボタン -->
<label for="radio-01"><input type="radio" id="radio-01" name="radio" value="1" />ラジオ1</label>
<label for="radio-02"><input type="radio" id="radio-02" name="radio" value="2" />ラジオ2</label>
<label for="radio-03"><input type="radio" id="radio-03" name="radio" value="3" />ラジオ3</label>
<hr />

<!-- チェックボックス -->
<label for="checkbox-01"><input type="checkbox" id="checkbox-01" name="checkbox" value="1" />チェックボックス1</label>
<label for="checkbox-02"><input type="checkbox" id="checkbox-02" name="checkbox" value="2" />チェックボックス2</label>
<label for="checkbox-03"><input type="checkbox" id="checkbox-03" name="checkbox" value="3" />チェックボックス3</label>
<hr />

<!-- セレクトボックス -->
<select name="test[select]" id="select">
<option value="1">セレクト1</option>
<option value="2">セレクト2</option>
<option value="3">セレクト3</option>
</select>
<hr />

</form>

<form>

<hr />

<hr />

<hr />

<label for="checkbox-01"><input type="checkbox" id="checkbox-01" name="checkbox" value="1" />チェックボックス1</label>

<label for="checkbox-02"><input type="checkbox" id="checkbox-02" name="checkbox" value="2" />チェックボックス2</label>

<label for="checkbox-03"><input type="checkbox" id="checkbox-03" name="checkbox" value="3" />チェックボックス3</label>

<hr />

</select>

<hr />

</form>

上記のフォーム項目ごとに、内容が変更された時にイベントを取得して、別のDIVタグ内に変更内容を表示するようにしています。

$(function() {
	
	//テキストフィールド
	$("input#text").keyup(function() {
		$("div#value-text span").text($(this).val());
	});
	
	//テキストエリア
	$("textarea#textarea").keyup(function() {
		$("div#value-textarea span").text($(this).val());
	});
	
	//ラジオボタン
	$("input[name='radio']:radio").change(function() {
		$("div#value-radio span").text($(this).val());
	});
	
	//チェックボックス
	$("input[name='checkbox']:checkbox").click(function() {
		var array = new Array();
		$("input[name='checkbox']:checked").map(function() {
			array.push($(this).val());
		});
		$("div#value-checkbox span").text(array.toString());
	});
	
	//セレクトボックス
	$("select#select").change(function() {
		$("div#value-select span").text($(this).val());
	});
});

$(function() {

//テキストフィールド

$("input#text").keyup(function() {

$("div#value-text span").text($(this).val());

});

//テキストエリア

$("textarea#textarea").keyup(function() {

$("div#value-textarea span").text($(this).val());

});

//ラジオボタン

$("input[name='radio']:radio").change(function() {

$("div#value-radio span").text($(this).val());

});

//チェックボックス

$("input[name='checkbox']:checkbox").click(function() {

var array = new Array();

$("input[name='checkbox']:checked").map(function() {

array.push($(this).val());

});

$("div#value-checkbox span").text(array.toString());

});

//セレクトボックス

$("select#select").change(function() {

$("div#value-select span").text($(this).val());

});

テキストエリア、テキストボックスは、キーボードが押された時に、ラジオボタン、セレクボトックスは選択が変更された時に、チェックボックスはいずれかのチェックボックスが押された時にそれぞれイベントを取得しています。

変更内容の確認のための各DIVは、次のように記述しています。

<div id="value-text">テキストフィールドの値：<span></span></div>
<div id="value-textarea">テキストエリアの値：<span></span></div>
<div id="value-radio">ラジオボタンの値：<span></span></div>
<div id="value-checkbox">チェックボックスの値：<span></span></div>
<div id="value-select">セレクトボックスの値：<span></span></div>

<div id="value-text">テキストフィールドの値：<span></span></div>

<div id="value-textarea">テキストエリアの値：<span></span></div>

<div id="value-radio">ラジオボタンの値：<span></span></div>

<div id="value-checkbox">チェックボックスの値：<span></span></div>

<div id="value-select">セレクトボックスの値：<span></span></div>

DropboxでMAMP環境を同期。

2012.05.14 / Labs

Dropboxで複数のMacにMAMP環境を同期する方法です。
今回はMAMP通常版ではなく、PRO版を利用しています。（通常版とは管理画面と、MySQLのデータ格納先が変わります）
MAMP環境で同期を行いたいディレクトリは、ApatcheのドキュメントディレクトリとMySQLのデータを格納しているディレクトリの2点です。

Apatcheのドキュメントを格納している「htdocs」ディレクトリをDropboxで同期させるには、MAMPの管理画面からディレクトリを変更することができます。
MAMP
MySQLのデータを格納しているディレクトリは、PRO版ではルートのライブラリフォルダ内に保存されています。

/Library/Application Support/appsolute/MAMP PRO/db/mysql

1	/Library/Application Support/appsolute/MAMP PRO/db/mysql

この「mysql」ディレクトリをDropbox内に移動して、代わりに（Dropboxに移動したディレクトリの）シンボリックリンクをこちらに配置します。シンボリックリンクの作成には「MacDropAny」が便利です。

以上にて、Dropboxで複数のMacにMAMP環境を同期することが可能です。

Dropboxで同期する上で1点気をつけたいのは、MySQLがデータベース管理のために「ibdata1」というファイルを上記の「mysql」ディレクトリに作成するのですが、これはデータベースを作成するごとにファイルサイズが大きくなり、後にデータベースを削除してもファイルサイズは小さくなることはありません。
ですので、しばらく使っているうちに、すぐに数百メガにまで大きくなり、これをファイルの更新のたびにDropboxで同期するには、やや問題があります。

その対策として、「ibdata1」ファイルにはデータベースごとのデータを追加せず個別にファイルを作成するために、MySQLの環境設定ファイルで次の1行を追加します。

innodb_file_per_table

1	innodb_file_per_table

MySQLの設定ファイルはMAMP PROではメニューの「File ＞ Edit Template ＞ MySQL my.cnf」より編集が可能です。
これで、作成するデータベースごとにディレクトリが作成されて、さらに各テーブルごとのファイルとして保存してくれるので、必要最小限の容量のみをDropboxで快適に同期が行えます。

PHPで祝日／イベント対応のカレンダーを作成。

2012.05.12 / Labs

CakePHP
PHP

PHPではPEARなどのライブラリを利用すると簡単にカレンダーを作成できますが、CakePHPなどフレームワークをベースに開発している場合、あまり他のライブラリを利用したくないこともあります。
また祝日情報を含むイベント情報を簡単に組み込めるカレンダーとして、シンプルなカレンダーを作成してみました。
サンプルはこちら

機能としては指定月のカレンダーを生成し、イベント情報を配列として渡すことで、該当日にイベント内容を表示することができます。
祝日情報の取得の関数「getHolidays()」については、「Googleカレンダーから祝日情報を取得。」をご覧ください。

<?php
//カレンダーと祝日情報の生成用に年月日の変数を作成
$year = date('Y');
$month = date('n');
$day = 1;

//祝日情報の配列（「label」はクラス名として利用します）
$holidays = getHolidays($year);
$holidays['label'] = 'holiday';

//テストイベント情報の配列
$tests = array('label' => 'test', date('Ymd') => '本日です（イベントのテスト）');

//祝日情報とテストイベント情報を連想配列にまとめます
$events = array($holidays, $tests);

//カレンダーの出力
echo getCalendar($year, $month, $day, $events);



//指定月のカレンダーを生成
function getCalendar($year, $month, $day, $events) {

	//ヘッダー部分の曜日表示
	$days = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
	
	//本日を取得（20120512）
	$today = date('Ymd');
	
	//1行ごとの順番（1〜7）と、月全体の順番（1〜31（最大））
	$num_row = 1;
	$num_day = 1;
	
	//月の始まる曜日から、前月の空白分を取得
	$num_blank = date('w', mktime(0, 0, 0, $month, 1, $year));
	
	//月の合計日
	$total = $month == 2 ? ($year % 4 ? 28 : ($year % 100 ? 29 : ($year % 400 ? 28 : 29))) : (($month - 1) % 7 % 2 ? 30 : 31);
	
	//カレンダーのヘッダー部分
	$calendar = '<table class="calendar">';
	$calendar .= '<thead><tr>';
	while ($num_row <= count($days)) {
		$calendar .= '<th>'.$days[$num_row-1].'</th>';
		$num_row++;
	}
	$calendar .= '</tr></thead>';
	
	//カレンダーの本体部分
	$calendar .= '<tbody><tr>';
	$num_row = 1;
	
	//前月の空白分のセルを生成
	while ($num_blank > 0) {
		$label = '';
		$label = ($num_row == 1) ? $label.' sun' : $label;
		$calendar .= '<td class="'.$label.'"></td>';
		$num_blank--;
		$num_row++;
	}
	
	//1日〜31日（最大）までのセルを生成
	while ($num_day <= $total) {
	
		//「$label」は要素のクラス名として、「$content」は祝日などのイベント内容
		$label = '';
		$content = '';
		
		//イベントの配列を走査するためのキーとして、「20120512」の形式で文字列を生成
		$key = $year.sprintf('%02d', $month).sprintf('%02d', $num_day);
		
		//左端なら日曜日、右端なら土曜日のためのラベル（クラス）を付加
		$label = ($num_row == 1) ? $label.' sun' : $label;
		$label = ($num_row == 7) ? $label.' sat' : $label;
		
		//本日の場合もクラスを付加
		$label = ($key == $today) ? $label.' today' : $label;
		
		//イベントの配列があれば、配列を走査
		if (isset($events)) {
		
			//連想配列になっているイベントの配列（$event）の中の、各イベント配列ごとに処理
			for ($i = 0; $i < count($events); $i++) {
				$label_event = (isset($events[$i]['label'])) ? $events[$i]['label'] : '';
				
				//イベントの配列に一致するキー（20120512など）があれば、要素を付加
				if (array_key_exists($key, $events[$i])) {
					$label .= ' '.$label_event;
					$content .= '<div class="'.$label_event.'">'.$events[$i][$key].'</div>';
				}
			}
		}
		$calendar .= '<td class="'.$label.'">';
		$calendar .= '<div class="day">'.$num_day.'</div>';
		$calendar .= $content;
		$calendar .= '</td>';
		$num_day++;
		$num_row++;
		
		//1行の終わり（7日目）ごとに、新しい行を開始
		if ($num_row > 7) {
			$calendar .= '</tr><tr>';
			$num_row = 1;
		}
	}
	
	//月の最終日以降の空白分のセルを生成
	while ($num_row > 1 && $num_row <= 7) {
		$label = '';
		$label = ($num_row == 7) ? $label.' sat' : $label;
		$calendar .= '<td class="'.$label.'"></td>';
		$num_row++;
	}
	
	//カレンダーの終了
	$calendar .= '</tr></tbody></table>';
	
	//文字列として生成したカレンダーを返す
	return $calendar;
}
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<?php

//カレンダーと祝日情報の生成用に年月日の変数を作成

$year = date('Y');

$month = date('n');

$day = 1;

//祝日情報の配列（「label」はクラス名として利用します）

$holidays = getHolidays($year);

$holidays['label'] = 'holiday';

//テストイベント情報の配列

$tests = array('label' => 'test', date('Ymd') => '本日です（イベントのテスト）');

//祝日情報とテストイベント情報を連想配列にまとめます

$events = array($holidays, $tests);

//カレンダーの出力

echo getCalendar($year, $month, $day, $events);

//指定月のカレンダーを生成

function getCalendar($year, $month, $day, $events) {

//ヘッダー部分の曜日表示

$days = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');

//本日を取得（20120512）

$today = date('Ymd');

//1行ごとの順番（1〜7）と、月全体の順番（1〜31（最大））

$num_row = 1;

$num_day = 1;

//月の始まる曜日から、前月の空白分を取得

$num_blank = date('w', mktime(0, 0, 0, $month, 1, $year));

//月の合計日

$total = $month == 2 ? ($year % 4 ? 28 : ($year % 100 ? 29 : ($year % 400 ? 28 : 29))) : (($month - 1) % 7 % 2 ? 30 : 31);

//カレンダーのヘッダー部分

$calendar = '<table class="calendar">';

$calendar .= '<thead><tr>';

while ($num_row <= count($days)) {

$calendar .= '<th>'.$days[$num_row-1].'</th>';

$num_row++;

}

$calendar .= '</tr></thead>';

//カレンダーの本体部分

$calendar .= '<tbody><tr>';

$num_row = 1;

//前月の空白分のセルを生成

while ($num_blank > 0) {

$label = '';

$label = ($num_row == 1) ? $label.' sun' : $label;

$calendar .= '<td class="'.$label.'"></td>';

$num_blank--;

$num_row++;

}

//1日〜31日（最大）までのセルを生成

while ($num_day <= $total) {

//「$label」は要素のクラス名として、「$content」は祝日などのイベント内容

$label = '';

$content = '';

//イベントの配列を走査するためのキーとして、「20120512」の形式で文字列を生成

$key = $year.sprintf('%02d', $month).sprintf('%02d', $num_day);

//左端なら日曜日、右端なら土曜日のためのラベル（クラス）を付加

$label = ($num_row == 1) ? $label.' sun' : $label;

$label = ($num_row == 7) ? $label.' sat' : $label;

//本日の場合もクラスを付加

$label = ($key == $today) ? $label.' today' : $label;

//イベントの配列があれば、配列を走査

if (isset($events)) {

//連想配列になっているイベントの配列（$event）の中の、各イベント配列ごとに処理

for ($i = 0; $i < count($events); $i++) {

$label_event = (isset($events[$i]['label'])) ? $events[$i]['label'] : '';

//イベントの配列に一致するキー（20120512など）があれば、要素を付加

if (array_key_exists($key, $events[$i])) {

$label .= ' '.$label_event;

$content .= '<div class="'.$label_event.'">'.$events[$i][$key].'</div>';

}

$calendar .= '<td class="'.$label.'">';

$calendar .= '<div class="day">'.$num_day.'</div>';

$calendar .= $content;

$calendar .= '</td>';

$num_day++;

$num_row++;

//1行の終わり（7日目）ごとに、新しい行を開始

if ($num_row > 7) {

$calendar .= '</tr><tr>';

$num_row = 1;

}

//月の最終日以降の空白分のセルを生成

while ($num_row > 1 && $num_row <= 7) {

$label = '';

$label = ($num_row == 7) ? $label.' sat' : $label;

$calendar .= '<td class="'.$label.'"></td>';

$num_row++;

}

//カレンダーの終了

$calendar .= '</tr></tbody></table>';

//文字列として生成したカレンダーを返す

return $calendar;

}

CakePHPで利用する場合には、コンポーネントとして登録しておくと使い勝手が良いかもしれません。