「フロントエンドっぽいカフェ祭りフェス」参加レポート

Post : 06.22.2015 at 18:00

by Nakashii

晴れ渡った天気の2015/06/13（土）、弊社オフィスにて、「フロントエンドっぽいカフェ祭りフェス」が開催されました。

このイベントは、フロントエンドで一日かけてとりあえず何か作ってみる、というリラックスした雰囲気のハッカソンです。

この日集まったのはフロントエンジニア、プログラマー、コーダーや学生など14人。福岡だけでなく、宮崎や大分など遠方からも参加していました。

テーマはフロントエンド

名刺交換後、主催者の宮崎ひびさんから趣旨説明がありました。

フロントエンド（今回はHTML、CSS、JavaScriptなど狭義のテクノロジー）を用いて、昼休み1時間を除いた約５時間という時間の中で、おのおの自分の作りたいものを作り最終的に作品を発表するというもの。

なお、今回はバックエンドをいくら頑張っても評価対象外です。

そして発表された作品にみんなで投票し、優勝者を決めることになりました。

制作開始

天気のいい日の室内で、リラックスした雰囲気で制作を開始。

事前にしっかりしたアイデアを持ってやる人もいれば、新しいことを試すためにその場ではじめて制作開始する人などそれぞれでした。

交流タイムと午後の作業

交流を深めるため、昼食はあみだくじで3チームにわけて移動。初めて会う人もいましたが、同じ業界のため、話も盛り上がりました。

昼食後、制作を再開。残り時間が迫りはじめたため、言葉数が少なくなり始めます。

作品のPRタイム＆優勝者発表

16:30に制作終了し、発表の順番をくじで決めました。

スマホのスワイプの技術や、GoogleMapを駆使したゲーム、WordPressと連携したグラフ生成など、フロントエンドの技術を駆使し、それぞれ自分の持ち味を活かした個性的な作品が発表されました。

その後参加エンジニア全員の投票で優勝者を決めました。

優勝者にはスマホでスワイプが可能なライブラリを作った方が選ばれ、主催企業である株式会社アラタナ様より賞品が授与されました。

実際に制作した作品

優勝は逃しましたが、弊社のエンジニアがこのイベントで制作した作品をご紹介します。

Webページの要素をクリックすると、その要素が落下していくというスクリプトです。

ブラウザによりやり方が少し異なりますが、下記スクリプトを全てコピーしてコンソールにペーストすると実行しますので、是非一度試してみてください。

■Chromeの場合

メニューバーの表示→開発/管理→JavaScriptコンソール→コンソールにスクリプトをペースト→エンターキーで実行

■Safariの場合

メニューバーの開発→エラーコンソールを表示→コンソールにスクリプトをペースト→エンターキーで実行
※メニューバーに開発がない場合、Safariの環境設定→詳細→メニューバーに開発メニューを表示にチェック

■Firefoxの場合

メニューバーのツール→Web開発→Webコンソール→コンソールにスクリプトをペースト→エンターキーで実行

(function() {
	var nodeAll = document.querySelectorAll('*');
	var objectAll = {};

	for (var i = 0, n = nodeAll.length; i < n; i++) {
		var node = nodeAll[i];
		var tagName = node.tagName.toLowerCase();

		if (tagName == 'html' || tagName == 'head' || tagName == 'title' || tagName == 'meta'
		|| tagName == 'link' || tagName == 'script' || tagName == 'style' || tagName == 'body') {
			continue;
		}

		if (tagName == 'iframe' || tagName == 'object' || tagName == 'video') {
			var mask = document.createElement('div');
			mask.style.width = '100%';
			mask.style.height = '100%';
			mask.className = 'blcNodeDropMask_' + i;
			mask.style.position = 'absolute';
			mask.style.top = '0';
			mask.style.left = '0';
			var position = node.parentNode.style.position;

			if (position != 'relative' && position != 'absolute') {
				node.parentNode.style.position = 'relative';
			}

			node.parentNode.appendChild(mask);
			mask.addEventListener('click', clickListener);

			objectAll[mask.className] = {
				mask: mask,
				node: node.parentNode
			};
		}

		node.style.cursor = 'pointer';
		node.addEventListener('click', clickListener);
	}

	function clickListener(event) {
		if (event.target.className.indexOf('blcNodeDropMask') != -1) {
			objectAll[event.target.className].node.dispatchEvent(new Event('click'));
		}

		var wrap = null;
		var thisNode = event.target;
		var clone = thisNode.cloneNode(true);
		clone.style.position = 'relative';

		if (thisNode.parentNode.className != 'blcNodeDropWrap') {
			wrap = document.createElement('div');
			wrap.className = 'blcNodeDropWrap';
			wrap.style.position = 'relative';
			thisNode.parentNode.replaceChild(wrap, thisNode);
			wrap.appendChild(thisNode);
		} else {
			wrap = thisNode.parentNode;
		}

		thisNode.style.visibility = 'hidden';
		thisNode.style.display = 'none';

		wrap.appendChild(clone);
		moveTo(clone, wrap, thisNode, window.innerHeight);

		event.preventDefault();
		event.stopPropagation();
		return false;
	}

	function moveTo(clone, wrap, thisNode, targetY) {
		var speed = 1.5;
		var nowDate = new Date() * 1;
		var timeID = null;

		timeID = setInterval(function() {
			var t = ((new Date() * 1) - nowDate) / 1000;
			var y = easeInQuad(t, 0, targetY, speed);

			clone.style.top = y + 'px';

			if (t >= speed) {
				clearInterval(timeID);
				clone.style.transition = 'opacity 0.5s ease';
				clone.style.opacity = 0;

				setTimeout(function() {
					wrap.removeChild(clone);
					thisNode.style.display = 'block';
				}, 500);
			}
		}, 20);
	}

	function easeInQuad(t, b, c, d) {
		return c * (t /= d) * t + b;
	}
})();

(function() {

var nodeAll = document.querySelectorAll('*');

var objectAll = {};

for (var i = 0, n = nodeAll.length; i < n; i++) {

var node = nodeAll[i];

var tagName = node.tagName.toLowerCase();

if (tagName == 'html' || tagName == 'head' || tagName == 'title' || tagName == 'meta'

|| tagName == 'link' || tagName == 'script' || tagName == 'style' || tagName == 'body') {

continue;

}

if (tagName == 'iframe' || tagName == 'object' || tagName == 'video') {

var mask = document.createElement('div');

mask.style.width = '100%';

mask.style.height = '100%';

mask.className = 'blcNodeDropMask_' + i;

mask.style.position = 'absolute';

mask.style.top = '0';

mask.style.left = '0';

var position = node.parentNode.style.position;

if (position != 'relative' && position != 'absolute') {

node.parentNode.style.position = 'relative';

}

node.parentNode.appendChild(mask);

mask.addEventListener('click', clickListener);

objectAll[mask.className] = {

mask: mask,

node: node.parentNode

};

}

node.style.cursor = 'pointer';

node.addEventListener('click', clickListener);

}

function clickListener(event) {

if (event.target.className.indexOf('blcNodeDropMask') != -1) {

objectAll[event.target.className].node.dispatchEvent(new Event('click'));

}

var wrap = null;

var thisNode = event.target;

var clone = thisNode.cloneNode(true);

clone.style.position = 'relative';

if (thisNode.parentNode.className != 'blcNodeDropWrap') {

wrap = document.createElement('div');

wrap.className = 'blcNodeDropWrap';

wrap.style.position = 'relative';

thisNode.parentNode.replaceChild(wrap, thisNode);

wrap.appendChild(thisNode);

} else {

wrap = thisNode.parentNode;

}

thisNode.style.visibility = 'hidden';

thisNode.style.display = 'none';

wrap.appendChild(clone);

moveTo(clone, wrap, thisNode, window.innerHeight);

event.preventDefault();

event.stopPropagation();

return false;

}

function moveTo(clone, wrap, thisNode, targetY) {

var speed = 1.5;

var nowDate = new Date() * 1;

var timeID = null;

timeID = setInterval(function() {

var t = ((new Date() * 1) - nowDate) / 1000;

var y = easeInQuad(t, 0, targetY, speed);

clone.style.top = y + 'px';

if (t >= speed) {

clearInterval(timeID);

clone.style.transition = 'opacity 0.5s ease';

clone.style.opacity = 0;

setTimeout(function() {

wrap.removeChild(clone);

thisNode.style.display = 'block';

}, 500);

}

}, 20);

}

function easeInQuad(t, b, c, d) {

return c * (t /= d) * t + b;

}

})();

ハッカソンの面白さ

フロントエンドと言っても人によって、いろいろなアプローチがあります。

自分では思いつかない新しい技術やアイデアをその場で見ることができるのが、ハッカソンならではの面白さだと思います。

ハッカソンは様々な場所で開催されていますので、ご興味ある方は一度参加されてはいかがでしょうか？