配信者向け便利ツール

使い方

準備のしかたと、配信・OBS/サムネイル作成/スケジュール表作成の使い方です。

配信者向け便利ツールは現在公開準備中です。画面の名前や手順は、公開までに変わることがあります。

📑 目次

はじめに
配信・OBS
サムネイル作成
スケジュール表作成
1
準備するもの
2
インストールと起動
  1. ダウンロードしたZIPファイルを右クリックし、「すべて展開」で好きな場所に展開します。
  2. 展開した MizuLabStreamerTools フォルダの中の MizuLabStreamerTools.exe をダブルクリックします。
  3. ブラウザで「配信・OBS」の画面が開きます。
「WindowsによってPCが保護されました」と表示されたときは、「詳細情報」→「実行」を押すと起動できます。
画面の切り替え

画面の上のヘッダーに 配信・OBS・サムネイル作成・スケジュール表作成 が並んでいます。押すと、それぞれブラウザの別のタブで開きます。すでに開いているときは、そのタブに移ります(作りかけの内容はそのまま残ります)。

画面をもう一度開くとき

もう一度 MizuLabStreamerTools.exe をダブルクリックすると、「配信・OBS」の画面だけが開きます(アプリが二重に起動することはありません)。ブラウザで http://127.0.0.1:50580/settings を開いても同じです。

アプリを終了するとき

「配信・OBS」の画面の右上にある 終了 を押します。サムネイル作成・スケジュール表作成のタブを閉じても、アプリは止まりません(配信中にOBSの表示が消えないように、終了は「配信・OBS」の画面からだけにしています)。

📡 配信・OBS

配信予定の表示・自動BGM・配信の補助・配信枠の作成など

3
「配信・OBS」の画面の見かた
「配信・OBS」の画面は、使い終わったら閉じてください。開いたままにしておくと、配信中ページなどで変えた設定を、古い内容で上書きしてしまうことがあります。
4
YouTubeの配信予定を表示する

配信予定を読み込むために、Googleの「YouTube Data API」のAPIキーを使います。APIキーはご自身のGoogleアカウントで無料で作れます。「配信・OBS」の画面の 基本設定 → YouTube にも、同じ手順が書いてあります。

APIキーの作り方
  1. Google Cloud コンソール を開き、Googleアカウントでログインします。
  2. 画面上部のプロジェクトの選択から「新しいプロジェクト」を作ります(名前は自由。例:配信者向け便利ツール)。
  3. 「YouTube Data API v3」のページで、作ったプロジェクトが選ばれているのを確かめて「有効にする」を押します。
  4. 「認証情報」のページで「認証情報を作成」→「APIキー」を選ぶと、APIキーができます。
  5. (おすすめ)キーの編集画面で「APIの制限」を「キーを制限」にし、「YouTube Data API v3」だけを選んで保存します。
アプリに登録する
  1. 「配信・OBS」の画面の 基本設定 → YouTube で、APIキーを貼り付けます。
  2. チャンネルの欄に、YouTubeチャンネルのURL(youtube.com/@…)か、@ハンドル を入れます。
  3. 上の 保存 を押すと、予約している配信枠が読み込まれます(そのあとは「更新間隔」の分ごとに自動で読み込みます。初期は5分)。
APIキーは画面に表示されず、「登録済み(末尾4文字)」とだけ表示されます。APIキーは人に見せないようにしてください。「無視するタグ」に入れたタグは、ゲーム名・タグとして表示しません。
5
OBSに画面を追加する

アプリの画面は、OBSの「ブラウザソース」で表示します。配信画面 の 画面共通設定(開始前・次回予定のカード)と 個別ソース(部品ごと)に、表示ごとの「OBSへドラッグ」「URLをコピー」があります。

表示するものURLおすすめの大きさ
開始画面(まとめて表示)http://127.0.0.1:50580/overlay?view=start960×540
終了画面(次回の予定)http://127.0.0.1:50580/overlay?view=next960×540
部品ごとhttp://127.0.0.1:50580/overlay?part=部品名部品による

部品には、カウントダウン・開始時刻・ゲーム名・タイトル・タグ・サムネイル・次回の日時などがあります。「配信・OBS」の画面の「個別ソース」からドラッグするのがかんたんです。

OBSを「管理者として実行」していると、ドラッグ&ドロップが使えません。そのときは「URLをコピー」を使ってください。
見た目を変える

画面共通設定 で、配色のプリセット(8種類)・フォント・大きさ・色・カード背景・枠線と、部品の文字のふち取りを決めます。プレビューで「開始前」「次回予定」のカードを切り替えて確認でき、プレビューの下の「OBSへドラッグ」「URLをコピー」で、そのカードをOBSに置けます。

個別ソース では、開始画面・終了画面の部品ごとのフォント・大きさ・色・寄せ方などを、項目ごとに「文字の設定 → OBSソース → プレビュー」の順で決められます。CSSが書ける方は、OBSのブラウザソースの「カスタムCSS」でも変更できます。

6
OBSとつなぐ

自動BGM・録画の整理・配信の補助・配信の経過時間などは、OBSとつないで動きます。OBSに標準で入っている「WebSocketサーバー」を使います。配信予定の表示だけなら、この設定はいりません。

  1. OBSのメニュー「ツール」→「WebSocketサーバー設定」を開きます。
  2. 「WebSocketサーバーを有効にする」にチェックを入れ、右下の 「適用」を押します(押さないとつながりません)。
  3. 「接続情報を表示」を押し、サーバーパスワードをコピーします。
  4. アプリの 基本設定 → OBSとつなぐ にパスワードを貼り付けて 保存 します(ポートはOBSの初期値 4455 のままでOKです)。
つながると、状態が「OBSに接続しています」に変わります。OBSを後から起動しても自動でつながります。
7
OBSと一緒に起動・終了する

OBSのスクリプトを入れておくと、OBSを起動したときに便利ツールも裏で起動し、OBSを閉じると便利ツールも終了します。

  1. OBSのメニュー「ツール」→「スクリプト」を開きます。
  2. 左下の「+」を押し、便利ツールのフォルダ(MizuLabStreamerTools.exe と同じ場所)にある MizuLabStreamerTools_autostart.lua を選びます。
  3. これで完了です。次からOBSを起動すると、便利ツールも起動します(画面は開きません。開くときは MizuLabStreamerTools.exe をダブルクリックします)。
OBSを閉じると便利ツールも終了するので、サムネイル作成・スケジュール表作成のタブも使えなくなります。OBSを使わずにサムネイルなどを作るときは、MizuLabStreamerTools.exe をダブルクリックして起動してください。
8
カレンダーの予定

Googleカレンダーの、これからの予定を一覧で表示します(終了画面などに置く想定です)。時間が決まっている予定を表示し、くり返しの予定にも対応しています。

  1. 基本設定 の「カレンダーの予定:カレンダーのアドレス」に、Googleカレンダーの「iCal 形式の非公開アドレス」を貼り付けて保存します(アドレスの調べ方)。
  2. 配信画面 → カレンダーの予定 で、何日先まで・何件まで・表示の形・配信予定にしない文言を決め、OBSソースをドラッグして追加します。
カレンダーのアドレスはスケジュール表作成と共通です。どちらで登録しても同じアドレスを使います。予定は15分ごとに読み込み直します。
9
ソース調整
10
自動BGM

見張る音声(ゲーム音など)がすべて無音の間だけ、BGMをフェードインで流します。どれか1つでも音が出たら、フェードアウトします。

  1. OBSに、BGM用の「メディアソース」を作っておきます。
  2. 音声・録画 → 自動BGM で、BGMに使うソースと、見張る音声(ゲーム音など)を選びます。
  3. 音量メーターを見ながら、「無音とみなす音量」や「流し始めるまでの時間」を調整します。
プレイリストと曲名の表示

フォルダを選ぶと、その中の曲を順番かシャッフルで流します。曲名とクレジットはファイル名から読み取るので、曲名 - クレジット.mp3 の形で名前を付けておくと、画面に「♪ 曲名」とクレジットを表示できます。

11
休憩画面

表示用のOBSソースは、同じページの「OBSに追加する」からドラッグできます。休憩は配信中ページやStream Deckからも始められます。

12
カウンター・見どころマーカー・配信前チェック

どれも左のメニューの 配信の補助 にあります。

カウンター

デス数・勝ち数など、5つまで作れます。表示の形(例:{name}:{n})や、配信のたびに0に戻すかを選べます。

見どころマーカー

配信中に マーカーを付ける を押すと、配信開始からの時刻を記録します(押す少し前の時刻に合わせます)。配信が終わると、YouTubeの説明欄にそのまま貼れる目次の文章ができ、録画フォルダにも保存されます。マーカーの名前や時刻は、あとから直せます。

YouTubeの目次(チャプター)は、「0:00」から始まり、3つ以上・10秒以上の間隔が必要です。条件を満たさないときは画面でお知らせします。
配信前チェック

配信を始めたときに、次のことを自動で確認します(今すぐチェック でいつでも確認できます)。

問題があれば、OBSの操作パネル・Windowsの通知・警告音で知らせます(知らせ方はいくつでも選べます)。

13
配信中ページ・OBSの操作パネル・Stream Deck
配信中ページ

配信中に使うボタン(マーカー・休憩・カウンター・BGM・ミュート・シーンの切り替え・配信予定など)を、別のウィンドウに大きく並べたページです。「配信・OBS」の画面のメニューの ▶ 配信中ページを開く で開きます。

並べるパネルと順番、配信を始めたら自動で開くかどうかは、配信中ページの右上の ⚙ 設定 で選びます。

OBSの中の操作パネル

OBSのメニュー「ドック」→「カスタムブラウザドック」で、URLに http://127.0.0.1:50580/dock を入れると、OBSの中に小さな操作パネルを置けます。URLは アプリの設定 → Stream Deck・操作パネル にも出ています。

Stream Deck

Stream Deck の「Webサイト」アクションに、Stream Deck・操作パネル に表示される専用のURLを入れ、「GET request in background」にチェックを入れます。マーカー・配信前チェック・休憩・カウンター・BGMの次の曲などをボタン1つで操作できます。

専用のURLには合言葉が入っています。人に見せないようにしてください。合言葉を作り直す で変えられます。
14
録画の整理

OBSの「自動的にmp4に再多重化」でmp4ができたあと、残ったmkvを片付けます。

  1. OBSの「設定」→「詳細設定」→「録画」で、「自動的にmp4に再多重化」をオンにします。
  2. アプリの 音声・録画 → 録画の整理 で、片付け方を選びます。
    • ごみ箱へ:mkvをごみ箱に移します。
    • 削除予定フォルダへ:mkvをフォルダに移し、決めた日数(初期は7日)がたったら削除します。
片付けるのは、アプリの起動中に録画したmkvで、同じ名前のmp4がきちんとできたものだけです。mp4ができていないときや小さすぎるときは、mkvを残します。
15
配信枠の作成

YouTubeに配信枠を作るため、ご自身のGoogleアカウントでログインします。そのための「ログインの仕組み」(OAuthクライアント)を、Google Cloud で一度だけ作ります(10分ほど・無料)。利用回数の上限はご自身専用で、ほかの人と分け合うことはありません。

ログインの準備(最初の1回だけ)

「配信・OBS」の画面の 基本設定 → YouTubeへのログイン(配信枠の作成で使います) にも、同じ手順が書いてあります。

  1. Google Cloud コンソール で、プロジェクトを選びます(APIキーを作ったプロジェクトでOK)。YouTube Data API v3 が「有効」になっているか確かめます。
  2. 「Google Auth Platform」を開き、「開始」からアプリの情報を入れます(アプリ名は自由/対象は「外部」/連絡先はご自身のメールアドレス)。「ブランディング」のアプリのドメインなどは空欄のままで大丈夫です。
  3. 左の「対象」の「テストユーザー」で「ユーザーを追加」を押し、YouTubeチャンネルのGoogleアカウントを追加します。公開ステータスは「テスト中」のままで大丈夫です。
  4. 左の「クライアント」→「クライアントを作成」で、アプリケーションの種類を「デスクトップ アプリ」にして作成し、「JSONをダウンロード」を押します。
  5. アプリの 基本設定 → YouTubeへのログイン で、JSONファイルを選んで登録 からそのファイルを選びます(IDとシークレットを貼り付けることもできます)。
  6. Googleでログイン を押します。「このアプリは Google で確認されていません」と出たら、「詳細」→「(アプリ名)(安全ではないページ)に移動」を押し、YouTubeの管理を許可します(ご自身で作ったアプリなので問題ありません)。
「テスト中」の状態では、7日ごとにログインし直しが必要です。切れたときは「配信・OBS」の画面に案内が出るので、Googleでログイン を押してください。
配信枠を作る(作り方は4つ)

概要欄の定型文:説明の「開始の目印」〜「終わりの目印」(初期値は /_/_/_/_/_/_)の間を、いつも決めた文章に置き換えます。目印がなければ最後に足します(オフにできます)。

カレンダーから作るときは、作った配信枠の番号をカレンダーの予定に書き込みます(予定の画面に出ない欄)。予定のメモに配信ページへのリンク(「▶ YouTube: 番号」)も書くのは、作成の設定 → カレンダーの予定のメモに書く配信のリンク でチェックした公開範囲の枠だけです(初期値は「公開」だけ。限定公開・非公開の配信のアドレスが、公開しているカレンダーから見えないように)。「読み込む」たびに、そのときの公開範囲に合わせてメモを見直します。そのため、カレンダーへの書き込みのログイン(基本設定 → カレンダーへの書き込み)と、Google Cloud で「Google Calendar API」を有効にすることが必要です。

過去の配信を複製する
  1. YouTube → 配信枠の作成 を開き、一覧を更新 を押します。過去のライブ配信を読み込み、読み込み中でも届いた分から一覧に並びます。
  2. キーワードや日付で、複製したい配信を探して選びます。選んだ配信のくわしい情報(タグ・カテゴリ・サムネイルなど)を読み込みます。
  3. タイトル・開始予定の日時・サムネイル・再生リスト・ストリームキーなどを確認・変更して、この内容で配信枠を作る を押します。

収益化・チャットの設定・メンバー限定・年齢制限・字幕・終了画面などは複製できません。作成後にYouTube Studioで設定してください。

YouTube Data API には1日に使える量の上限(10,000)があります。一覧の読み込みは少しですが、配信枠1つの作成で約150を使います。
16
アップデートのお知らせとバージョン情報
確認のときは、このWebサイト(mizulab-app.com)にアクセスします。送るのはアプリのバージョンだけです。「新しいバージョンがあるか自動で確認する」をオフにすると、自動の確認は止まります。更新の内容は 更新履歴 でも見られます。

🖼️ サムネイル作成

ゲーム配信のサムネイルを作ります

17
サムネイル作成のはじめかた

ヘッダーの サムネイル作成 で開きます。左のタブで設定し、右のプレビューで確かめながら作ります。作りかけのデザインは自動で保存されます。

  1. メンバー タブで「配信者の画像フォルダ」を選びます(下の形のフォルダ)。
  2. + メンバーを追加 で、配信者と画像を選びます。名前の横のチェックで、何人かまとめて追加できます。
  3. 初期設定 タブで、画像の大きさ(1280×720 など)・テンプレート(ソロ/複数人)・全体の配色を選びます。
  4. タイトルなどの文字をプレビューでダブルクリックして直し、保存 か コピー を押します。
配信者の画像フォルダ

選んだフォルダの中に、配信者ごとのフォルダを作り、その中に立ち絵やアイコンの画像を入れておきます。フォルダの名前が配信者の名前になります。

配信者の画像フォルダ\
  水宮るおん\
    立ち絵.png
    アイコン.jpg
  星野ひかり\
    …
背景が透明なPNGは「透過」(立ち絵)、それ以外は「画像」(アイコンなど)として見分けます。画像がまだない人も、「画像なしの枠」で枠と名前だけ入れられます。元の画像を書き換えることはありません。
18
Discordから参加者を読み込む

MizuLabのDiscord BOTの /g02_chthumb で、チャンネル(スレッド)の参加者を、サムネイル作成用のテキストで出せます。

  1. Discordで /g02_chthumb を実行し、出てきた枠の中をコピーします。
  2. メンバー タブの Discord から読み込む に貼り付けます。
  3. 一人ずつ、どの配信者フォルダの人かが表示されます(DiscordのIDで一致・名前で一致・名前の一部で一致)。違うときや見つからないときは、表で選び直します。
  4. このメンバーにする を押すと、今のメンバーと入れかわり、テキストの順に並びます。サムネイルに出す名前はDiscordの名前になります。
19
枠・並べ方・文字・背景
20
保存・プリセット

🗓️ スケジュール表作成

Googleカレンダーの予定から、1週間のスケジュール表の画像を作ります

21
スケジュール表作成の画面の見かた

ヘッダーの スケジュール表作成 で開きます。

22
カレンダーを登録する(最初の1回だけ)

Googleカレンダーの「iCal 形式の非公開アドレス」を使って予定を読み込みます。Googleへのログインはいりません。

  1. パソコンのブラウザで Googleカレンダー を開き、右上の歯車から「設定」を開きます。
  2. 左の「マイカレンダーの設定」で、予定表に使うカレンダーを選びます。
  3. 「カレンダーの統合」にある 「iCal 形式の非公開アドレス」 をコピーします。
  4. スケジュール表作成の 予定 タブ(または「配信・OBS」の 基本設定)の「カレンダー」に貼り付けて、登録 を押します。
カレンダーのアドレスは「配信・OBS」のカレンダーの予定と共通です。どちらで登録しても同じアドレスを使います(「予定表に入れない文言」は、スケジュール表作成だけの設定です)。
「非公開アドレス」は、知っている人なら誰でもあなたの予定を見られるアドレスです。人に見せたり、配信の画面に映したりしないでください。もし知られてしまったら、Googleカレンダーの同じ場所でアドレスをリセットし、新しいアドレスを登録し直してください。

「公開アドレス」(…/public/basic.ics)は、カレンダーを一般公開していないと予定が取れません。「非公開アドレス」を使ってください。

23
予定を取得して直す
  1. 「期間」で開始日を選びます。今週・来週・◀ ▶ で切り替えられます(期間は7日です)。
  2. 予定を取得 を押すと、7日分の予定が入ります。
  3. 「予定の文言」で、時刻や文言を直します。+ 予定を追加 で予定を足したり、▲▼で並べ替えたり、✕で消したりできます。
  4. 「タイトル・期間」で、タイトル(Enterで改行)・期間の表示・ひとこと(メモ)を決めます。
「予定表に入れない文言」に、外したい予定のタイトルに含まれる言葉をカンマ区切りで入れると、その予定は取り込まれません(例:歯医者, private)。終日の予定も取り込まれ、何日も続く予定はかかる日すべてに入ります。
24
並び・大きさ

文字が入りきらないときは、マスごとに自動で小さくし、それでも入らなければ「…」で切ります。

25
デザイン
26
文字・日付
フォントファイルを使うときは、そのフォントの利用条件(画像に使ってよいか、配信や商用で使ってよいか)を確認してください。
27
素材(位置・画像の追加・重なり)
28
保存・コピー・Xに投稿
投稿の文章

出力 タブで決めます。{period}(期間)・{start}(開始日)・{end}(終了日)・{title}(タイトル)が入ります。{start:M/d(aaa)} のように日付の形も書けます。Xの数え方で文字数(/280)を表示します。

Xの投稿画面は、外から画像を付けた状態で開くことができないため、「画像をコピー → 投稿画面で貼り付け」の形にしています。

29
プリセット(デザインの保存)

今の見た目(配置・画像・色・文字・日付の形など)に名前を付けて保存できます。予定の文言とタイトルは含みません。

プリセットのファイルには、カレンダーのアドレスと予定の内容は入りません。画像やフォントは入るので、人に渡すときは利用条件に気をつけてください。

❓ よくある質問

起動しようとすると「WindowsによってPCが保護されました」と出ます
新しく配布されたアプリでよく表示される画面です。「詳細情報」を押すと出てくる「実行」ボタンで起動できます。
OBSの画面に何も表示されません
アプリが起動しているか確認してください。アプリを終了していると表示されません。ブラウザソースのURLが http://127.0.0.1:50580/ で始まっているかも確認してください。
配信予定が表示されません
基本設定 で、APIキーとチャンネルが登録されているか確認し、保存 を押してください(保存すると読み込み直します)。エラーがあれば画面に表示されます。予約している配信枠(公開・限定公開)がないときは、案内の文が表示されます。
OBSにつながりません
OBSの「WebSocketサーバー設定」で有効になっているか、チェックを入れたあと「適用」を押したか、パスワードとポートが合っているかを確認してください。設定画面にうまくいかない理由が表示されます。
OBSと一緒に自動で起動できますか?
できます。OBSのスクリプトを入れておくと、OBSと一緒に起動・終了します(OBSと一緒に起動・終了する)。
アンインストールのしかたは?
アプリを終了してから、MizuLabStreamerTools フォルダを削除してください。設定・追加した画像やフォント・プリセットも消す場合は、%APPDATA%\MizuLab\StreamerTools フォルダも削除します。OBSのスクリプトを入れていたら、OBSの「スクリプト」からも外してください。配信枠の作成でログインしている場合は、先に 基本設定 の ログアウト を押しておくと、Google側の許可も取り消されます。
サムネイル作成・スケジュール表作成のタブを閉じても大丈夫?
大丈夫です。作りかけの内容は自動で保存されていて、アプリも動いたままです。もう一度ヘッダーから開くと、続きから作れます。
前の「OBS便利ツール」「予定表メーカー」の設定はどうなりますか?
はじめて起動したときに、設定・プリセット・画像・フォントを自動で引き継ぎます(前のアプリのフォルダは消しません)。OBSのスクリプトは、新しい MizuLabStreamerTools_autostart.lua に入れ替えてください。
Xの投稿画面に画像が付いていません(スケジュール表作成)
画像はコピーされた状態なので、投稿画面の文章の欄をクリックしてから Ctrl+V を押してください。ブラウザが新しいタブを止めたときは、画面に出る案内を押すと投稿画面が開きます。