JavascriptでsetIntervalでループさせて指定秒数後に停止する例

setIntervalで関数を回して、指定秒数後に止める例です。setInterval, clearInterval, setTimeoutの合わせ技です。いつも忘れるので備忘録的に残しておきます。

jsfiddle (developer toolを開いて実行してください) → https://jsfiddle.net/r94sowe4/

コード

<!DOCTYPE html>
<html>
    <head>
	<title>ボタンを押すと関数がsetIntervalで回され、指定秒数後に停止する例</title>
	<meta charset="UTF-8">
    </head>
    <body>
	<div>
	    <h2>ボタンを押すと関数がsetIntervalで回され、指定秒数後に停止する例</h2>
	    <p>Developer Toolを開いて、ボタンを押してください。</p>
	    <input type="number" name="time" id="time" value="3" min="1" max="100" required> (秒)
	    <br />
	    <input type="button" value="開始" onClick="start();">
	</div>

	<script>
	    var time;
	    var intervalID;

	    function start() {
		time = parseInt(document.getElementById('time').value, 10);

		intervalID = setInterval(loop, 0);
		setTimeout(function () {
		    clearInterval(intervalID);
		    console.log('loop has stopped after ' + (time) + ' sec!');
		}, time * 1000);
	    }

	    function loop() {
		console.log('I am the loop!');
	    }
	</script>
    </body>
</html>

コツとしては、clearIntervalを使いたい場合は、setIntervalを宣言的に使うって感じですかね。

JavaScriptのcanvasで複数の画像をロードするには

やりたいことは表題の通りです。
stackoverflowやらブログやらとなんかいろいろと情報が転がっていますが、

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

↑こちらのリンク先のコード一択だと思います(`・ω・´)
読みやすくて使いやすい!

人様の記事のグーグラビリティを上げるだけの記事でした。(グーグラビリティという単語が入っているとむしろ下がりそう)

ローカルでRTCDataChannelを使ってみる

スクリーンショット:
スクリーンショット 2014-09-17 18.21.47

動作例: http://jsfiddle.net/su5o99oa/
Chromeで開いて(Firefoxだと動きません!)、デベロパーツールを出して、右上の「Run」を押して、HTMLが表示されるので、その中のinput領域に何かを書いてsubmitボタンを押します。すると、下の方に入力した文字が出ます。デベロパーツールのコンソールでも確認が出来ます。ボタンをクリックすると、RTCDataChannelのsendメソッドにより文字列が送信されて、もう片方のRTCDataChannelがメッセージを受け取り、それをHTMLの領域に書き出します。

ソース:
ソースは↑こんな感じです。

input領域にファイル名、textarea領域に内容を入力して、ファイルをブラウザでダウンロード

表題のようなことをやりたかったのであれこれやりました。ChromeとFirefoxでは動作確認しました。

スクリーンショット:
スクリーンショット 2014-09-17 15.23.43

操作方法:
– ファイル名を入力
– テキストエリアに入力
– 「Click to download」をクリック

HTMLとJavascript:

参考URL:
http://hebikuzure.wordpress.com/2012/12/16/file-api-%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F-blob-%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B/

はまりどころ:
– onclick要素で、downloadという名前のメソッドにすると、エラーが出るようです。ですので今回はdownloadFileという名前にしました。

reveal.jsでページ番号とfooterを加える

reveal.jsというイケてるHTMLスライドソフト(ソースデモ)があります。諸事情により、ページ番号とfooterを入れる必要がありました。

ページ番号は、

added page number feature


↑のmohikanerさんのソースを利用させてもらい、footerは自力でcssで頑張りました。

こんな感じになります↓

reveal.js.slide-number_footer

以下、ソースのHTMLです。実際に実行する際は、公式からreveal.jsを落としてきて、index.htmlと同じ階層のディレクトリにindex2.htmlとでもして、↓をコピペするといいと思います。ちなみに私はHTMLもCSSもJavaScriptもjQueryもぜんぜん分からないので、いろいろと間違った記法をしている可能性があります。

<!doctype html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<title>Page Number and Footer in reveal.js</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reveal.min.css">
	<link rel="stylesheet" href="css/theme/default.css" id="theme">

	<!-- css for footer and page number -->
	<style type="text/css">
	    footer{
		clear:both;
		font-size:20px;
		color: red;
		height:75px;
		display:block;
		position:absolute;
		bottom:0;
		width: 100%;
	    }

	    footer div{
		margin:0 auto;
		text-align: center;
	    }

	    aside.slide-number{
		position:absolute;
		bottom: 25px;
		left: 25px;
		width: 100%;
	    }
	</style>
    </head>
    <body>
	<div class="reveal">
	    <div class="slides">
		<section>
		    <h2>Page Number and Footer in reveal.js</h2>
		    <p>Press right arrow key</p>
		</section>
	    </div>

	    <div class="slides">
		<section>
		    <h2>You can see the page number and footer. Yey!</h2>
		</section>
	    </div>

	    <div class="slides">
		<section>
		    <h2>This must be #2</h2>
		</section>
	    </div>
	</div>

	<footer>
	    <div>I am a footer!</div>
	</footer>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>
	<script>
	    Reveal.initialize({
		controls: true,
		progress: true,
		history: true,
		center: true,
		theme: 'default',
		transition: Reveal.getQueryHash().transition || 'default',
		transitionSpeed: 'default'
	    });
	</script>

	<!-- Page number -->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	    function currentPageFormatter(event) {
		var formattedStr;
		if (event.indexh === 0) {
		    return "";
		}

		formattedStr = event.indexh;

		if (event.indexv) {
		    formattedStr += "/" + event.indexv;
		}

		return formattedStr;
	    }

	    Reveal.addEventListener('ready', function(event) {
		$('<aside class="slide-number"></aside>')
			.text(currentPageFormatter(event))
			.appendTo('.reveal.center');
	    });

	    Reveal.addEventListener('slidechanged', function(event) {
		$(".slide-number").text(currentPageFormatter(event));
	    });
	</script>
    </body>
</html>