").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),C.head.appendChild(r[0])},abort:function(){i&&i()}}});var Jt,Kt=[],Zt=/(=)\?(?=&|$)|\?\?/;ce.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Kt.pop()||ce.expando+"_"+jt.guid++;return this[e]=!0,e}}),ce.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Zt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Zt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=v(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Zt,"$1"+r):!1!==e.jsonp&&(e.url+=(At.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||ce.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=ie[r],ie[r]=function(){o=arguments},n.always(function(){void 0===i?ce(ie).removeProp(r):ie[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Kt.push(r)),o&&v(i)&&i(o[0]),o=i=void 0}),"script"}),le.createHTMLDocument=((Jt=C.implementation.createHTMLDocument("").body).innerHTML="
",2===Jt.childNodes.length),ce.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(le.createHTMLDocument?((r=(t=C.implementation.createHTMLDocument("")).createElement("base")).href=C.location.href,t.head.appendChild(r)):t=C),o=!n&&[],(i=w.exec(e))?[t.createElement(i[1])]:(i=Ae([e],t,o),o&&o.length&&ce(o).remove(),ce.merge([],i.childNodes)));var r,i,o},ce.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(ce.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},ce.expr.pseudos.animated=function(t){return ce.grep(ce.timers,function(e){return t===e.elem}).length},ce.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=ce.css(e,"position"),c=ce(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=ce.css(e,"top"),u=ce.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),v(t)&&(t=t.call(e,n,ce.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},ce.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){ce.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===ce.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===ce.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=ce(e).offset()).top+=ce.css(e,"borderTopWidth",!0),i.left+=ce.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-ce.css(r,"marginTop",!0),left:t.left-i.left-ce.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===ce.css(e,"position"))e=e.offsetParent;return e||J})}}),ce.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;ce.fn[t]=function(e){return M(this,function(e,t,n){var r;if(y(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),ce.each(["top","left"],function(e,n){ce.cssHooks[n]=Ye(le.pixelPosition,function(e,t){if(t)return t=Ge(e,n),_e.test(t)?ce(e).position()[n]+"px":t})}),ce.each({Height:"height",Width:"width"},function(a,s){ce.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){ce.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return M(this,function(e,t,n){var r;return y(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?ce.css(e,t,i):ce.style(e,t,n,i)},s,n?e:void 0,n)}})}),ce.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){ce.fn[t]=function(e){return this.on(t,e)}}),ce.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.on("mouseenter",e).on("mouseleave",t||e)}}),ce.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){ce.fn[n]=function(e,t){return 0
「webカメラ映像にニコニコ風コメントを描画するソフトを作ってみた」解説編
おもちゃ(その他)
2015.02.19
この記事は約5分で読めます。
先日HDD漁ったら元動画があったのでニコニコにしか上げてなかった動画をyoutubeにも公開しました。
それを記念して2年以上たった今になって軽く解説してみる。
簡易Q&A
Q:なぜニコニコにしか上げなかった?
A:コメントネタなので
「本物のコメントが入って初めて完成する」
という考えがあったから。
実際偽のコメントと本物のコメントが混じるのは見てて面白い。
Q:今更youtubeに上げた理由は?
A:せっかくなので世界に広がれ!!(ニコニコだと日本国内のアクセスでほとんど完結する。)
あと、こんなことをしたやつがいたという足跡。
Q:なんでyoutube公開まで2年もかかったの?
この動画について
はじめて編集して(ムービーメーカー)あげた動画なのでこの動画には特に思い入れがある。
3DSの「すれ違いマーケティング」にもこの動画を登録するくらいに。
3DSのカメラ機能あるんだから3DS版ニコニコにこんな機能付ければいいのに。
そもそもこのプログラムを書いた理由は。
・ニコニコがまだRCだったころにドハマりし、「いつか自分も動画を上げてみたいな」と思っていた。
・ニコニコできた当初から現実にコメントを流す系のネタをやってみたかった。
・初期案ではラップ(食品用)にひたすら白マジックでコメントを書き込んでスクロールさせるという案もあったけどいろいろ面倒で断念。
・プログラムをある程度齧ってやっとできる目途が立ったから。
・オブジェクト指向(クラス)の覚えかけだったので実際に何か作ってみたかった。
こんなところ。
ラップ版も材料揃えたはいいけど、やろうやろう思っているうちにあっという間に5年の歳月が経ってしまった。
プログラム版を作りきったのはプログラムの勉強という名目で堂々と作れたのが大きいかもしれない。
当時似たような発想のソフトを作っている人もいた。
でも、ランダム位置にコメントが流れるだけで、きちんとニコニコらしいコメントの流れ方を再現しているのはこれしかなかったと自負している。
他のコメントの機能(色サイズ)もつけようと思ったけど他にやることがあったので断念。
使用言語は「processing1.21」
1.21なのはプログラム製作当時のメジャーバージョンだったのと、1.5系や2.X 系だと日本語文字列の表示が少々異なり(当時は)対応しきれなかったから。
動画公開時にはメジャーバージョンが1.5に移ってくるくらいの時期だったので、ただ単にダウンロードしただけでは動かない恐れがあったので結局ソフトとして公開しなかった。
あと公開するアップローダーにいいのが無かった。
動画内容の解説
せっかくなので動画内容について軽く解説。
コメントの背景に流れている動画は全部その場で撮影。
玩具がうまく動かなかった場合はリテイクをしている。
今になって思うと潜在意識では玩具動画を作りたかったのかもしれない。
・イメージ図
散歩途中に撮影した河口湖のほとり。
例として書いたコメントは車載や自転車で日本一周する等旅系動画にありがちなものをチョイス。
・製作初期~爆丸
使用セットは「爆テクコロコロヴィクトリーデッキ」より
1回目は焔ドラガオンS(銀)、2回目は輝レオネスG(金)
当時はまだ慣れてなかったので上手くポップアウトせず地味に何度かリテイク。
何気に
爆丸シューターを使用。
プログラムはクラスを使ってとりあえずコメントを流してみました段階。
他の人の動画だと許可とか面倒なので、以前自分で上げた自作ブレイクボンバーの動画を使用。
一応ビーダマン枠。
・影つけ~落ちない寿司
影が付いて見やすくなったことを安定して長時間見せる為、
落ちない寿司を使用。
何故か1回落ちた。
この時に知った
文字をコピーして片方の色を変え、ずらして配置することで影を付ける方法は、割と簡単に出来るわりに見やすくなるので、これ以来多用してる。(最近だと
年賀画像)
・コメントの配置~Qステア
使った玩具は
タカラトミーのQステア。
ボディは
タミヤコラボのグラスホッパー。
無線操作する車トイ同士のなかなかレアなコラボ。このQステア知人に譲ったため手元にはない。
プログラムは正しいコメント配置になるように修正し、一応完成した段階。
意外とニコニコ動画のコメントの流れ方は奥が深い。
コメント量の増減も一緒に解説。
・配置の完成~ベイブレード
「ギャラクシー」ペガシスなので宇宙ヤバいをコメントとして流す。
誰も突っ込んでくれなかった・・・
・応用例①~カブトボーグ
当時はニコニコチャンネルでカブトボーグが配信されていたので定型的なコメントがあった。
アニメのノリを現実に持ちこんだらどうなるんだろう的なもの。
理由は初代ポケモンセリフをまとめたテキストがあったから。
(知人に譲ったため現存してない)
一回本当にヘットマウントディスプレイを持ち出してやった。
だけど、頭に固定するので歩行による縦の振動が酷すぎたので没。(人によっては酔う)
後、高価な借り物なので落とすのが怖くておどおどした感じになっていてつまらない。
目の位置に普通のカメラを固定し、
カメラの機能でブレ軽減させたものを画面に映して、
それをヘッドマウントディスプレイで再撮影
という少々回りくどい方法をしたものを動画では使用している。
縦揺れが無い以外は大体同じ感じ。
さいごに
というわけでいつか書くといったっきり書いていなかった「webカメラ映像にニコニコ風コメントを描画するソフトを作ってみた」の映っている内容の解説編でした。
この動画を作ってるころは数年後にここまで玩具動画を上げているとは思っていなかった。
今でもこのソフトはスカイプを使うときに、「ウインドウを相手に表示」機能を使って、ビデオ映像にコメントを流した感じにするときに活躍中。地味に便利!
余談
①画面を流れるもの試作。
クリックでペンビーからビー玉を発射するもの。
processingによる試作ミニゲーム版は変わりなく公開中!
この二つを踏まえると「ペンビー→ニコニコ風コメント→寿司弾」という一見謎な繋がりになる・・・
タイトルとURLをコピーしました
コメント