slide.js 4日目

JavaScript

だめだ・・・うまくいかねーすorz
getElementsByTagNameとかgetElementByIdしたのをinnnerHTMLできないのはわかったんだけど、
「発見した！」と思ったappendChildでもうまくいかない。
階層があるDOM ElementはappendChildできない？
ヽ（`Д´）ノウワァァァン


あと、今日はIDEを使い始めた。
採用したのはAptana。
Railsに対応しているのと、コード補完時に対応ブラウザが出るから。
eclipseベースだから慣れた環境で使いやすい。

slide.js

/*
 * slide.js
 * @version:	2007/05/06
 * @author:	futa23
*/

// Slide class
function Slide() {
    this.initialize.apply(this, arguments);
}

Slide.prototype.initialize = function() {
	this.main;
	this.contents = new Array();	
	this.page = 0;
};

Slide.prototype.start = function(){
	//load slide base element
	this.main = document.getElementById('main');
	
	document.getElementById('startBtn').disabled = true;

	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			this.contents.push(divPages[i]);
			divPages[i].innerHTML = '';
		}
	}
};

Slide.prototype.next = function() {
//	if(!main) this.main = document.getElementById('main');
//	alert(this.contents.length);
	if (this.page < this.contents.length) {
		
		//うまくいかねーす
		this.main.appendChild(this.contents[this.page++]);
		
		//last action
		if (this.page == this.contents.length) {
			document.getElementById('nextBtn').disabled = true;
		}
	}
}

Slide.prototype.quit = function() {
	if (typeof(this.main) != 'undefined') {
		for(var i=0; i<this.contents.length; i++) {
			//うまくいかねーす
			this.main.appendChild(this.contents[i]);
		}
	}
}

//app
var slide = new Slide();

呼び出すHTML側

変更なし。

参考

slide.js 3日目

JavaScript


うまくいかねーす。
スライド1ページ対応するdiv要素の中身をそのままinnerHTMLにしたいだけなのに
[object HTMLDivElement]になるorz
誰か助けて。




テストを楽にするために、早速ショートカットを実装。
自分で1から実装するのはめんどいから、shortcuts.jsを使った。
shortcuts.jsを使ったのは、KeyTypeListener.jsより軽かったから。
HTML側のJavaScriptコードはできるだけ取り除き、動的に注入予定。


slide.js

/*
 * slide.js
 * @version:	2007/05/05
 * @author:	futa23
*/

//	Slide class
function Slide() {
    this.initialize.apply(this, arguments);
}
// Slide class
Slide.prototype.initialize = function() {
	this.main;
	this.contents = new Array();	
	this.page = 0;
};

Slide.prototype.start = function(){
	//load slide base element
	this.main = document.getElementById('main');
	
	document.getElementById('startBtn').disabled = true;

	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			this.contents.push(divPages[i]);
			divPages[i].innerHTML = '';
		}
	}
};

Slide.prototype.next = function() {
//	if(!main) this.main = document.getElementById('main');
//	alert(this.contents.length);
	if (this.page < this.contents.length) {
		this.main.innerHTML = this.contents[this.page++];
		
		//last action
		if (this.page == this.contents.length) {
			document.getElementById('nextBtn').disabled = true;
		}
	}
}

Slide.prototype.quit = function() {
//	var normalContent = '';
//	if (typeof(this.main) != 'undefined') {
//		for(var i=0; i<this.contents.length; i++) {
//			normalContent += this.contents[i];
//		}
//		alert(normalContent);
//		this.main.outerHTML = normalContent;
//	}
}

//app
var slide = new Slide();

呼び出すHTML側

ちょっと見栄えをよくするために、内容をテキトーに付加。

<html>
<head>
<title>プレゼンツール</title>

<STYLE TYPE="text/css">
<!--
A:link
  { color:#0ac0ff; text-decoration:none; }
A:visited
  { color:#5080e0; text-decoration:none; }
A:hover
  { color:#2ae0ff; text-decoration:underline;}
-->
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<script type="text/javascript" language="JavaScript" charset="utf-8" src="shortcuts.js"></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="slide.js"></script>

<script type="text/javascript">
	//add keybind
	shortcut('s', function(){slide.start();});
	shortcut('n', function(){slide.next();});
	shortcut('q', function(){slide.quit();});
</script>

</head>

<body bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333">

<input type="button" value="start!" id="startBtn" onclick="slide.start()">
<input type="button" value="next!" id="nextBtn" onclick="slide.next()">

<div id="main" class="main" onClick="slide.next()">
next
</div>

<div id="1" class="page">
<h3>自己紹介</h3>
<ul>
	<li>名前：futa23
	<li>職業：SEでもプログラマーでもないIT系
	<li>装備：Java（普通に）, PHP（並以下）, Perl（並以下）, Ruby（初心者）
</ul>
</div>

<div id="2" class="page">
<h3>slide.js</h3>
スライドショーアプリ。
<ul>
	<li>oopなJavaScriptを書いてみたかった。
	<li>作るなら実用的なもの。
	<li>他のライブラリも使ってエフェクトも掛けたい。
	<li>ショートカット厨なので、ショートカット機能は必須実装機能。
	<li>HTML表示モードとプレゼンモードの切り替えができるように。
</ul>
</div>

</body>
</html>

参考

slide.js 2日目

JavaScript

グローバルな領域を汚さないように、oop化してみた。
そしたらなぜかIEでもエラーにならなくなった(つ´∀｀)つ
でもなんでだろう。
まぁいいか。


DOMで抽出するより、CSSのクラス切り替えのほうがメモリ食わなくていいかもなぁ。

とにかく、oop化してちょっと（自己）満足。

slide.js

//	slide.js
//	@version:	2007/05/03
//	@author:	futa23

function Slide() {
	this.initialize.apply(this, arguments);
}
// Slide class
Slide.prototype.initialize = function() {
	this.main = null;
	this.contents = new Array();	
	this.page = 0;
};

Slide.prototype.start = function(){
	//load slide base element
	this.main = document.getElementById('main');
	
	document.getElementById('startBtn').disabled = true;

	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			this.contents.push(divPages[i].firstChild.nodeValue);
		}
		divPages[i].innerHTML = '';
	}
};

Slide.prototype.next = function() {
//	if(!main) this.main = document.getElementById('main');
//	alert(this.contents.length);
	if (this.page < this.contents.length) {
		this.main.innerHTML = this.contents[this.page++];

		//last action
		if (this.page == this.contents.length) {
			document.getElementById('nextBtn').disabled = true;
		}
	}
}

//app
var slide = new Slide();

呼び出すHTML側

<html>
<head>
<title>プレゼンツール</title>

<STYLE TYPE="text/css">
<!--
A:link
  { color:#0ac0ff; text-decoration:none; }
A:visited
  { color:#5080e0; text-decoration:none; }
A:hover
  { color:#2ae0ff; text-decoration:underline;}
-->
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript" src="slide.js"></script>

</head>

<body bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333">

<input type="button" value="start!" id="startBtn" onclick="slide.start()">
<input type="button" value="next!" id="nextBtn" onclick="slide.next()">

<div id="main" class="main" onClick="slide.next()">
start
</div>
<div id="1" class="page">
test1
</div>

<div id="2" class="page">
test2
</div>

</body>
</html>

参考

slide.js 1日目

JavaScript

久しぶりに日記を書いてみる。


2日前から1日1,2時間かけて、JavaScriptでスライドショーアプリを作ってる。
名づけてslide.js。
やりたいのはid:amachangさんとかma.laさんが作っているようなアレ。
あんなすごいのを作れないだろうけど、とりあえずシンプルなやつ作ってみる。

実装したい機能

  • とりあえず、oopなJavaScriptで実装
  • スライドショーモードと通常モード（Webページ閲覧）の切り替え機能
  • ショートカット厨なので、ショートカットは必須
  • レイアウトはもちCSS駆使
  • レイヤー重ねて、インデックスも実装できるといいな（パワポのctrl+sみたいなやつ）


久しぶりにコーディングするのと、JavaScript書くのをほぼ初めてなので時間かかるかかる。
CSSもあんま詳しくないし。
まぁまったりやります○o｡.-y(´Д｀)y-.｡o○ﾌﾞﾊｰ


できあがっていく様子を貼ってみます。
突っ込んで頂けるとありがたいです。
もちろん応援も^ ^;

というわけで、まず1日目（5月1日）。
firefoxでは動くのに、IEではなぜか動かなかったorz
デバッグ文とかもそのまま載せちゃうｗ

slide.js

var main = null;
var contents = new Array();	
var j = 0;

function start(){
	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			contents.push(divPages[i].firstChild.nodeValue);
		}
		divPages[i].innerHTML = '';
	}
}
function next() {
	if(!main) main = document.getElementById('main');
//	alert(contents.length);
	if (j < contents.length) {
		main.innerHTML = contents[j++];

		//last action
		if (j == contents.length) {
			document.getElementById('nextBtn').disabled = true;
		}
	}
}

これを呼び出すHTML側

<html>
<head>
<title>プレゼンツール</title>

<STYLE TYPE="text/css">
<!--
A:link
  { color:#0ac0ff; text-decoration:none; }
A:visited
  { color:#5080e0; text-decoration:none; }
A:hover
  { color:#2ae0ff; text-decoration:underline;}
-->
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript" src="slide.js"></script>
<SCRIPT type="text/javascript">
<!--
// -->
</SCRIPT>

</head>

<body bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333">

<input type="button" value="start!" id="startBtn" onclick="start()">
<input type="button" value="next!" id="nextBtn" onclick="next()">

<div id="main" class="main">
start
</div>
<div id="1" class="page">
test1
</div>

<div id="2" class="page">
test2
</div>

</body>
</html>

ってか、はてな記法にすらまだ慣れてないｗ

参考にした書籍

http://images-jp.amazon.com/images/P/4798016039.09.MZZZZZZZ.jpg
詳解JavaScript&Dynamic HTML辞典 第3―Ajax対応 半場 方人
作者: 半場 方人
出版社/メーカー: 秀和システム
出版日: 2007/03
売り上げランキング: 20327位







“WiiでRimo見たい！”
Wii当たるといいな。

テスト勉強しないと・・・

Yahoo!ニュース - 産業 - 日刊工業新聞
http://headlines.yahoo.co.jp/hl?a=20031127-00000007-nkn-ind
「一方で海外販売は北米が12％増の約16万9,100台、欧州が18％増の7万2,100台、中国が74％増の7,600台、その他アジアが35％増の4万8,200台といずれも高い伸びとなった。」

トヨタすごすぎ。
ほんとにいつかGMを抜いて世界一になるな。

最近の趣味は、便利なソフトを入れまくること。
Charu3, 2xExplorer, TrayDevil, SuperTagEditorなどなど
しかし、Sleipnirの拡張性は最強だな！