映源とは別にPIAというソフトを開発しています。
PIAは映源とは違い、ただのVJソフトです。
ソフトの構成です。
リアルタイムテンポアナライザー
キーボード振り分け
どれ押してもポン出し機能
いろんなフィルタ機能
多次元ミキサー
ミキサー
フレーム操作
プレイリスト機能
インターフェイスモード/黒子モード
何処でも配置ウィンドウ
プレイ録画機能
サーバー連携機能
ピアトゥピアで他の人とプレイできる機能
ウェブカメラインプット機能
これらを選択的に表示できる機能
現状はアナライザーの開発中です。たぶん後日技術的なこと追記します。
動画の記号化が出来るウェブ上で扱う動画ソフトの開発をしようと思い立ちました。
いつまで続くか分かりませんが、なんとか形にしていきたいです。
動画の記号化とは、いわば動画版のMIDIの事です。
しかしながら、多くの障害があります。ハードウェアやソフトウェアで音源を用意するのと同じように様々な動画をスムーズにかつ既存の規格で提供しなければなりません。
ハードウェアを作る知識はまったくありませんので、ソフトウェアを選択しました。
また、ソフトウェアはFlash、html5、Javaの何れかで薦めたいと思います。
映像との親和性、インターフェイスなどの作りやすさから開発はFlashから始めたいと思います。
プロジェクト名は「映源」としました。
ソーシャルメディアのボタンを追加しました。これで当ブログも時代の波に乗り、「いいね！」やツイートができるようになりました。
一生懸命作りましたがページビューがいまいちなのでこちらに載せます。
Photoshop CSの研究 其の一、ブラシ
良いデザインのランディングページを発見！
ウイルスバスター
面白い写真を撮ってるフォトグラファーを発見。
モデルの衣装や化粧とかシチュエーションが何かエロいです。
インベカヲリ★
写真はプログラミングのインクリメントに似ていて、撮る時のセンスと撮った後に現れる新しいセンスという発展性のある作業で素敵だなと思います。
面白い画像を作成している方を発見。
LSD
DOMParserをネットで検索すると結構苦戦してる方が居るみたいなので、自分へのメモも兼ねて使い方を解説します。
ポイントは、値を文字列で渡すという点です。ActionscriptにあるXML()メソッドに使い方が似ていますので合わせて解説します。
XML()メソッドは、ストリングで、
var data:XML = new XML("<data>リンゴ</data><data>メロン</data>");
のように設定すると変数dataにXMLノードが格納されます。
拡張が必要ですが同じようにDOMParserでも、メソッドに値をストリングで設定するとXMLノードが取得できる仕組みです。以下のコードではparseFromStringというメソッドを拡張しString to XMLNodeを実現しています。
このコードの出典元サイト：erik.eae.net DOMParser
//DOMParser
if (typeof DOMParser == "undefined") {
DOMParser = function () {}
DOMParser.prototype.parseFromString =
function (str, contentType) {
if (typeof ActiveXObject != "undefined") {
var d = new ActiveXObject("MSXML.DomDocument");
d.loadXML(str);
return d;
} else if (typeof XMLHttpRequest != "undefined") {
var req = new XMLHttpRequest;
req.open("GET", "data:"
+ (contentType || "application/xml")
+ ";charset=utf-8,"
+ encodeURIComponent(str), false);
if (req.overrideMimeType) {
req.overrideMimeType(contentType);
}
req.send(null);
return req.responseXML;
}
}
}
使うときは以下のようにインスタンス化すると便利です。
//String to XML var str = "<data>リンゴ</data><data>メロン</data>"; var contentType = "application/xml"; var _xml = new DOMParser(); var _xmlnodes = _xml.parseFromString(str, contentType);
ちなみに以下のようにするとHTMLデータを取得できます。こうするとinnerHTMLなどで書き出し作業を行わずにDOMの変更が行なえます。すなわちブラウザが重くなる事を避けることができます。
以下のコードを動かすにはHTML2XHTML Converterが必要です。
<html>
<head>
<title>DOMParser</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="HTML2XHTMLConverter.js"></script>
<script type="text/javascript">
if (typeof DOMParser == "undefined") {
DOMParser = function () {}
DOMParser.prototype.parseFromString = function (str, contentType) {
if (typeof ActiveXObject != "undefined") {
var d = new ActiveXObject("MSXML.DomDocument");
d.loadXML(str);
return d;
} else if (typeof XMLHttpRequest != "undefined") {
var req = new XMLHttpRequest;
req.open("GET", "data:" + (contentType || "application/xml") + ";charset=utf-8," + encodeURIComponent(str), false);
if (req.overrideMimeType) { req.overrideMimeType(contentType);}
req.send(null);
return req.responseXML;
}
}
}
try{
(function(output){
if ('undefined' !== typeof addEventListener) { addEventListener('load', output, false);
} else if ('undefined' !== typeof attachEvent) { attachEvent('onload', output);
} else { throw new Error('Error');
}
})(function(event){
function request(){
var dp = new DOMParser();//DOMParser create
var _xmlstr = '<div>Apple Orange <strong>Banana</strong></div>';
var xmlCode = dp.parseFromString(_xmlstr, 'application/xhtml+xml');
//DOM edit code
var code = get_xhtml(xmlCode, 'ja');//HTML2XHTML Converter
document.getElementById('xml').innerHTML = code//String data;
}
document.getElementById('results').onclick = request
});
}catch(e){alert(e.message);}
</script>
</head>
<body>
<button id="results">click</button>
<div id="xml"></div>
</body>
</html>
この記事を書き終えて見つけた記事です。
[JSAN] XML.ObjTree - XML～JavaScriptオブジェクト変換クラス
思わず「聞いてないよ～」が頭をよぎる。
お絵かき掲示板のコードをフラッシュやJSで解析する方法としてHTML2XHTML Converter 1.0を試しに使ってみました。
HTML2XHTML Converterはhtml4．0のコードをxhtmlへ変換するというライブラリです。
このライブラリの特徴はXMLやDOMのノードデータを受け取ってXML形式で返してくれます。したがって、XMLに一度コードを変換する必要があります。
そこでDOMParserという関数を使いストリングをXMLに変換しました。
この関数の嬉しい機能は、content-typeを簡単に付加できる点です。
通常は、XMLHttpRequestでcontent-typeの無いXMLを受け取ってresponseXMLを使いXMLノードを取得しようとするとNULLが返ってしまいます。
しかしDOMParserはcontent-typeをクロスブラウザで安全に付加できるのでとても便利です。
//DOMParser
if (typeof DOMParser == "undefined") {
DOMParser = function () {}
DOMParser.prototype.parseFromString =
function (str, contentType) {
if (typeof ActiveXObject != "undefined") {
var d = new ActiveXObject("MSXML.DomDocument");
d.loadXML(str);
return d;
} else if (typeof XMLHttpRequest != "undefined") {
var req = new XMLHttpRequest;
req.open("GET", "data:"
+ (contentType || "application/xml")
+ ";charset=utf-8,"
+ encodeURIComponent(str), false);
if (req.overrideMimeType) {
req.overrideMimeType(contentType);
}
req.send(null);
return req.responseXML;
}
}
}
//XML
if(window.ActiveXObject||typeof window.XMLHttpRequest == "undefined") {
//ie
try { httpRequest = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { httpRequest = new ActiveXObject('Microsoft.XMLHTTP');}
} else if(window.XMLHttpRequest) {
//ff
httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType(mimetype_str);
}
function request(){
httpRequest.open('GET', url_str, true);
httpRequest.onreadystatechange = function() {
if(httpRequest.readyState == 4) {
if(httpRequest.status == 200) {
var dp = new DOMParser();
var xmlCode = dp.parseFromString(httpRequest.responseText, 'application/xml');
var code = get_xhtml(xmlCode, 'ja');
document.getElementById('sw_text').value = code;
}else if(location.protocol.match('file') && httpRequest.status == 0){
var dp = new DOMParser();
var xmlCode = dp.parseFromString(httpRequest.responseText, 'application/xml');
var code = get_xhtml(xmlCode, 'ja');
document.getElementById('sw_text').value = code;
}
}
}
httpRequest.send(null);
}
new DOMParser()でインスタンスを作ってparseFromStringメソッドにソースとcontent-typeをどちらもストリングで指定すると簡単にXMLが返ってきます。
ところが
プログラムはうまく動いたのですが元のコードにパースエラーが出てしまいました。
HTML2XHTML Converterはコンバータであってバリデータでは無いのでした。
仕方が無いので一番初めに手作りしたプログラムを使うことにしました。
p要素の閉じが無かったり、小文字a要素が大文字a要素で閉じられている物を修正し、さらに属性など要らない文字列を全て消し去るプログラムです。
このプログラムはPOOお絵かき掲示板でしか通用しない物なので少し納得が行きませんが
手作り感がこのRBのよい所なので採用することにしました。
レインボーブリッジのキーポイントである、window.onloadやそれと同等のスクリプトが使えない問題を完璧に解消できました。
大きな障害となっていたのはページがロードし終わったあとにインラインからwindow.onloadにファンクションを代入してもスクリプトが動かない点でした。
これは、window.onloadやaddEventListenerなどで登録した関数は、ページが読み込みが完了したそのただ一度しか実行されないからです。
OKWAVEで聞いてみたところ以下の方法でうまく行くことが分かりました。
(function(test){
if('undefined' !== typeof document.getElementById('test7')){
//document.getElementById('test7')は最終エレメントと仮定
test();
} else if ('undefined' !== typeof addEventListener) {
addEventListener('load', test, false);
} else if ('undefined' !== typeof attachEvent) {
attachEvent('onload', test);
} else {
throw new Error('#test7 is not found.');
}
})(function(event){
alert(document.getElementById('test7').firstChild.nodeValue);
});
やっていることの内容は、イベントから関数を実行した時にwindowがonload済みか否かを調べページ読み込み中ならonload時に、ページ読み込みが終わっていたらイベントの発生源から関数を実行というプロセスをとります。
良く考えてみると当たり前の事に全く気づきませんでした。
RBの開発を続ける上で気づいた事ですが、XHTMLストリクトでないコードならば
こちら側でコードをバリデートしてしまえば良かったんですね。
このプロセスを踏むことでいかなる汚いコードでもRSSやそのデータを活用した新しいコンテンツを作ることが可能になります。
例えば記事を束ねてブログの大きなブログ版が作れそうです。検索エンジンで探してきて一枚開いて一枚閉じるなんて事が不要になります。
ブックマークの概念に似てます。
辞書の切れ端をノートに貼り付けていき新しい自分の辞書が完成するわけです。
レインボーブリッジのキーポイントである、window.onloadやそれと同等のスクリプトが使えない問題をちょっとだけ解消できました。
大きな障害となっていたのはページがロードし終わったあとにインラインからwindow.onloadにファンクションを代入してもスクリプトが動かない点でした。
これは、window.onloadやaddEventListenerなどで登録した関数は、ページが読み込みが完了したそのただ一度しか実行されないからです。
そこでページのエレメントを数えるスクリプトを作成しました。
ロードの速度は一定ではないのでエレメントの数の増加が止まったら、その都度完全に読み込まれたかチェックを繰り返すようにしました。
そのチェックが完了後に本編のスクリプトを実行させます。
傾向としてページが重くても軽くても正常に動きますが、通信速度が不安定な場合読み込みに失敗する可能性が高いです。
以下がコードです。
var elementCheck_Number = 0;
var count_Number = 0;
var countMax_Number = 5;
var timerID_Number = 0;
function elmCheck(){
var ial = document.getElementsByTagName("img").length +
document.getElementsByTagName("a").length;
if(elementCheck_Number < ial){
//alert(elementCheck_Number + ":" + ial);
elementCheck_Number = ial;
count_Number = 0;
}else if(elementCheck_Number == ial
&& count_Number < countMax_Number){
elementCheck_Number = ial;
count_Number++;
//alert("count " + count_Number);
}else if(count_Number >= countMax_Number){
var el=document.createElement('script');
el.setAttribute('src','js file');
document.body.appendChild(el);
//alert("clearInterval");
clearInterval(timerID);
}
}
timerID = setInterval("elmCheck()",500);
序
Oekakibbs.comの記事をピクシブみたいに使うためのプラグイン的なJSを開発中です。
名前はレインボーブリッジ。
新しい未来へ繋ぐ虹の架け橋になるようネーミングしました。
使う技術はRSSのようなものを想定しています。
やりたい事
１．と２．を現在進行中。
ただスライドショーで見れるだけならURLを改変するスクリプトをライトボックスに読み込めば良いって話になってしまうので
これは１と掛け合わせようかと思ってます。
心配なのは文字数の制限とhtmlのタイプが古い事によって起こる弊害です。
コンバーターを１．に搭載すると絶対文字数を超えてしまいそうです。
現在の進捗状況
ツイッターに投稿出きるものを作って見て試している所です。
お楽しみに。
LAVAの詰め合わせ