ローカルで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という名前にしました。