作品集 Part.6

今まで個人的に製作した作品紹介  Part.6です。

『MediaRssViewer』

MediaRssViewer

▼作品内容
jsdo.it公式イベント『JAM -HTML5&Flash- Session2』投稿作品です。
MediaRSSを使用したビュワーを製作しました。
『JAM -HTML5&Flash- Session2 Silver受賞』
『Developers Summit 2011 – html5-developers-jpブース展示作品』
に選ばれました。
僕のいろんなコンプレックスを打ち消してくれた、お気に入りの作品です。

▼操作方法
ドラッグしながらマウスを動かすと写真が動きます。
手前側の写真をダブルクリックで写真を拡大。
拡大写真をダブルクリックで最初の状態に戻ります。

作品集 Part.5

今まで個人的に製作した作品紹介  Part.5です。
この作品は『HTML5』で製作しているので、『HTML5』に対応しているブラウザが必要となります。
面倒でなければ、『Firefox』や『Chrome』『Safari』『IE9』『Opera』などでご覧下さい。

『パーティクル時計』

パーティクル時計

▼作品内容
友人のFlash作品に刺激をうけ製作しました。
HTML5の『canvas』タグと『JavaScript』で、パーティクルを表現し時計にしています。

▼操作方法
パーティクル時計をクリックすると、『時計表示モード』と『テキスト表示モード』の切り替えができます。

作品集 Part.4

今まで個人的に製作した作品紹介  Part.4です。
この作品は『HTML5』で製作しているので、『HTML5』に対応しているブラウザが必要となります。
面倒でなければ、『Firefox』や『Chrome』『Safari』『IE9』『Opera』などでご覧下さい。

『HTMLテトリス』

HTMLテトリス

▼作品内容
テトリスを『canvas』タグと『JavaScript』で製作してみました。
デザインは製作途中です・・・
早くデザインも完成させないと・・・
あと、スマートフォンでプレイできないのもなんとかしないとな~

▼操作方法
スペースキーで右回転。
↑ キーで左回転。
→ キーでブロック右移動。
← キーでブロック左移動。
↓ キーを押しっぱなしでブロック落下。

一定の点数を超えるとレベルアップして、ブロックの落下スペードがあがっていきます。

『PHP』か『JavaScript』で指定した年月のd曜日は何日かを取得する方法

『PHP』か『JavaScript』で指定した年月のd曜日は何日かを取得する方法を紹介したいと思います。
例えば「2011年9月の金曜日」を指定したら、戻り値で「2・9・16・23・30」が返ってくるような感じです。

最初は、PHPのソースコードから。
▼PHP版

/**
 * $year	int	求めたい年を指定
 * $month	int	求めたい月を指定
 * $day		int	求めたい曜日。0〜6までの数字で指定
 */
function getDayOfMonth($year, $month, $day) {
	// 1・指定した年月の日数を取得
	$allDays = date("t", mktime(0, 0, 0, $month, 1, $year));

	// 2・指定した年月の最初の曜日を取得
	$firstDay = date("w", mktime(0, 0, 0, $month, 1, $year));

	// 3・求めたい曜日の第1週の日付けを計算する
	$day = $day - $firstDay + 1;
	if($day <= 0) $day += 7;

	// 4・指定した年月の最終日を越えるまで1週間を足す
	while($allDays >= $day) {
		$arrDays[sizeof($arrDays)] = $day;
		$day += 7;
	}

	return $arrDays;
}

次は、JavaScriptのソースコード。
▼JavaScript版

/**
 * year		int		求めたい日付の年を指定
 * month	int		求めたい日付の月を指定
 * day		int		求めたい曜日。0〜6までの数字で指定
 */
function getDayOfMonth(year, month, day) {
	// 1・指定した年月の日数を取得
	var date = new Date(year,month,0);
	var allDays = date.getDate();

	// 2・指定した年月の最初の曜日を取得
	date = new Date(year+"/"+month+"/1");
	var firstDay = date.getDay();

	// 3・求めたい曜日の第1週の日付けを計算する
	var day = day - firstDay + 1;
	if(day <= 0) day += 7;

	// 4・指定した年月の最終日を越えるまで1週間を足す
	var arrDays = [];
	while(allDays >= day) {
		arrDays[arrDays.length] = day;
		day += 7;
	}

	return arrDays;
}

これで、指定した年月・曜日の日付を取得することができます。
getDayOfMonth(2011, 9, 1)
と書けば、配列形式で
Array([0] => 5 [1] => 12 [2] => 19 [3] => 26)
と、結果が返ってきます。

【ソースコードの説明】
前回同様、PHPもJavaScriptも同じような処理をしているので、まとめて説明します。


1・まずは、指定された年月の総日数を取得します。


2・指定した年月の最初の曜日を取得。
PHPもJavaScriptも曜日を数値型で返すので、変数firstDayには曜日を表す数値が入ります。


3・求めたい曜日の第1週目が何日なのかを計算します。
引数dayが初日の曜日より前の曜日か後の曜日かを計算し、前の曜日なら1週間分足してしまいます。
(初日より前なら、指定した曜日は翌週にしかないから)


4・あとは、指定された年月の最終日を超えるまで1週間を足していき、日付けを配列に追加していきます。


5・日数を格納した配列を返して終了です^^


※もっとスマートなやり方があるような気もしますが・・・

次は、指定した年月日が第n d曜日なのかを判別する方法を書こうかな~?

jQuery 『Before/After Plugin』を使ってみた

前に見かけて気になっていた『Before/After Plugin』
気になっていたけど、使う機会がなかったので、
ブログで使ってみることにしました。
せっかくなので、実装方法も紹介したいと思います。

jQuery Before/After Plugin

jQuery 『Before/After Plugin』のデモ


▼まずは必要なファイルをダウンロード
まずは、『jQuery Before/After Plugin』をダウンロードします。
jQueryプラグインなので、『jQuery』をダウンロードします。
ビフォー・アフターを操作するバーをドラッグするために、『jQuery UI』もダウンロード。
(僕が『jQuery Before/After Plugin』をダウンロードした時は、『jQuery』と『jQuery UI』も一緒に圧縮されていました。)
ダウンロードするファイルは、以上で終了です。


▼『Before/After Plugin』を使用する準備
ダウンロードしたファイルを、読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>

▼HTMLを書く
HTMLは以下のような感じで書きます。

<div id="ID名">
    <div>
        <img alt="after" src="ba_02.jpg" width="550" height="367" />
    </div>

    <div>
        <img alt="before" src="ba_01.jpg" width="550" height="367" />
    </div>
</div>

注意するのは、使用する画像は同じサイズであること。
画像を「div」要素で囲み、その「div」要素をさらに「div」要素で囲むことです。
画像を囲んでいる「div」には、任意の「id」をつけてください。
この「id」が、『Before/After Plugin』が適用される画像となります。


▼JavaScriptを書く
JavaScriptを書きます。

$("id名").beforeAfter();

基本的には、たったこれだけで『Before/After』が使用できるようになります。
デモ01


▼オプション
オプションを指定することもできます。

animateIntro  -  ビフォー・アフターを操作するバーが最初から中央にあるか、右側から徐々に中央に移動するかをBOOL値で指定できます。デフォルトはfalseとなっていて、右側スタートしたい場合はtrueを指定します。
デモ02

introDuration  -  animateIntroにtrueを指定している場合のみ適用されるオプションで、バーが移動を開始する時間を指定することができます。ミリ秒で指定することができ、デフォルトは1000となっています。
デモ03

introDelay  -  このオプションもanimateIntroにtrueを指定している場合のみ適用されるオプションで、バーが移動するスピードを指定することができます。ミリ秒で指定することができ、デフォルトは1000となっています。
デモ04

showFullLinks  -  ビフォー・アフターの画像の下に、『Show only before』『Show only after』を表示するかをBOOL値で指定できます。デフォルトはtrueとなっています。
デモ05

imagePath  -  ナビゲーションで使用する画像(バーの画像など)のパスを指定することができます。デフォルトは“/js/beforeAfter/’となっています。


画像を用意するのが大変な気もしますが、
なにか面白いことができそうなプラグインですね。