放送ツール覚え書き

Tips 時計を表示したい

2017/08/31 05:28 投稿

  • タグ:
  • 登録タグはありません
  • タグ:
  • 登録タグはありません

加筆修正 2017年08月31日 Tipsから独立ページに移動
初版投稿 2016年08月12日



時計を表示したい

・BrowserSourceの有無を確認


BrowserSourceのあるなしを
確認・無ければ下記の「BrowserSourceを追加する」を参考にインストールをします















OBS Studioビルドツール作者であるVTF氏が放送に乗せる時計を公開しました
http://variedtastefinder.jp:3000/root/clock-source.git




clock-sourceのダウンロードと解凍をして 任意の場所に置きます




OBS StudioのソースにBrowserSourceを置きます




















この時点で時計など任意の名前にしてもよいでしょう















・設定

Local fileにレ点を入れ 任意に置いたclock-sourceのindex.htmlを指定します
Width(幅)とHeight(高さ)は任意です 好みで調整してください
FPSは30ですが PC環境次第で20まで落とすこともあるかもしれません

文字色の変更は 下記のCSSのA/BどちらかをCSS欄に置くか フィルタ>色補正で行います




・CSS

A: HTMLのカラーコードカラーネーム を置くことで文字色の指定ができます
CSS欄に #time { color: purple; } のように色を指定して置いてください
例)黒文字は #time { color: #000000; }
  白文字は #time { color: #FFFFFF; } になります

B:詳細な設定をしたい方向けに CSSを置いておきます
----------------ここから----------------

/*
* style.css
*/

body {

}

#time {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
/* font-size: 80px;*/
font-size: 7.2vw;
color: #●●●●●●;
font-weight: bold;
font-family: Sans-serif;
text-align: center;
/*-webkit-text-stroke-width: 3px;*/
/*-webkit-text-stroke-color: black;*/
}

----------------ここまで----------------



・フィルタ

ソースからフィルタへ進みます


+をクリックして「色補正」を選択します
写真に載せていませんが 「クロップ」で上下左右の余白を切り落としてもいいでしょう



任意の色を指定します コントラストなど変えて好みの表現にしてください




・code.jsの編集

code.jsをhtml編集することで文字列の変更調整ができます
基本的に ニコ生用htmlタグ編集 と同じでいいと思います
弄る前のcode.jsを適当なところに保存しておいて 色々と変えてみましょう


デフォルト(初期状態)



日付の区切りを変更



曜日の削除



日付と時間の間を半角スペースで空けてみましたが変化はありません


ハイフンを入れてみました


brタグを入れて改行しました


日付と曜日を並べ 下に時間を置きました


三段にしました


曜日の「dddd」からdをひとつ削ると文末のdayが消えます









BrowserSourceを追加する


OBS StudioのソースにBrowserSourceの有無を確認します
















BrowserSourceがないときは 新規でBrowserSourceを内蔵したOBS Studioをインストールするか BrowserSourceだけ追加します

・新規でBrowserSourceを内蔵したOBS Studioをインストール

Windows環境で公式版の環境は OBS Studioダウンロードページ からOBS-Studio-0.XX.X-Full のどちらかをダウンロードします
インストーラー・ZIP解凍どちらでもかまいませんが ZIP解凍では注意点があります
下記の解説を読み解凍ソフト導入を避けたいときは インストーラーを選択してください



Windows環境でOBS-Studio-X.XX.X-Full.zipを解凍するときの解凍ソフトは
7-ZIP(無料)WinRAR(有料) でないと解凍に失敗します Lhaplusなどの解凍ソフトやエクスプローラーで解凍はできません


・OBS-Studio-0.XX.X-SmallにBrowserSourceを追加

ビルド版でBrowserSourceがない場合も同様です
こちら からBrowser Source v1.XX.zipをダウンロードし解凍します
OBS Studioが起動していたら 終了します
解凍して現れたbit数フォルダをOBS-Studio-0.XX.X-Small\obs-pluginsフォルダにドラッグします



OBS Studioを起動して ソースの追加にBrowserSourceがあるか確認してください





















コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事