しまつの部屋

文章書いたり4コマ漫画描いたりしてます。よろしくお願いします。twitter→@Shimatsu916

ニコ生主っぽくなれる装置を発明

こんにちは。

皆さんはニコニコ生放送は見られますか?

 

実は私はあまり見ません。

YouTubeばっかり見てます。

 

私もネットで活動している者の端くれとしては動画投稿に興味がなくはないのですが、編集技術もないし、ブログに比べてなんとなく参入障壁が高そうな雰囲気があります。

 

そこで今回ニコ生主の気分だけでも味わえる装置を作ってみることにしました。

 

 

 

前の記事で使用したHTMLとjavascrpitを今回も使っていきます。

↓前回の記事 

shimatsu2.hateblo.jp

 

 

 

まずはhtmlでページ全体を作成します。

f:id:shimatsu2:20170530223809p:plain

 

つぎにjavascriptでカメラの映像を映す機能を追加します。

で、ただのhtmlなら作成したファイルをブラウザで開けばいいんですが、どうも今回はWEBサーバーがないとだめとのこと

 

そこでプログラミング言語Rubyを使ってlocalのWEBサーバーを立ち上げます。

僕も何を言っているのかよくわかりません。

 

ちなみにRubyMacであれば特に何もせずとも使えます。

Rubyもメモ帳に書き、ターミナル(Windowsでいうコマンドプロンプト)で実行します。

 

ということで試してみると・・

 

f:id:shimatsu2:20170530224323p:plain

 

カメラの映像が映し出されました。

今回はノートPCを使用しているため、本体のインカメの映像です。

 

次にニコ生の特徴である、流れるコメントの部分を作成します。

f:id:shimatsu2:20170530224548p:plain

 

 

htmlにこのように書くと

f:id:shimatsu2:20170530224711g:plain

 

このように文字が流れます。

このままではニコ生っぽくないので、文字の位置を指定して、動画に文字がかぶるようにします。

 

 

f:id:shimatsu2:20170530224909p:plain

というわけで見えづらいですが、映像に文字がかぶるようになりました。

 

 

 

ここまでくれば完成は間近です!

後は一文字だけでは寂しいので、文字を増やし、よりニコ生っぽく見えるようにフォントの色を変えます。

f:id:shimatsu2:20170530225058p:plain

 

また固定の文字しか出ないのも悲しいので・・・

 

 

 

 

 

 

 

f:id:shimatsu2:20170530225156p:plain

 

このようなテキストボックスを配置し

 

 

 

 

 

 

 

 

 

 

f:id:shimatsu2:20170530225315p:plain

好きな文字を打ち送信ボタンを押すと

 

 

 

 

 

 

 

 

 

 

f:id:shimatsu2:20170530225401p:plain

こんな感じで打った文字が反映される機能をつけました。

 

 

システム自体はこれで完成です!

それでは実際にこのシステムを使用してみた結果がこちらになります!

 

 

 

 

 

 

 

 

 

f:id:shimatsu2:20170530225536g:plain

※gif動画のコマの問題で文字が戻っているように見えますが、実際は右から左へ綺麗に動きます

 

 

 

 

 

カードキャプターさくら」のケルベロスの人形を置きました。

意図しなかったのですが、部屋の光の感じが妙にニコ生っぽいですね。

 

 

いかがだったでしょうか?

皆さんも是非配信者っぽい動画をつくってみてください。

私はこのシステムを作るので完全に燃え尽きました。

 

それでは。