ツイキャス専門店『コメ欄』Lite クイックセットアップ ガイド

ツイキャス専門店『コメ欄』Lite アイコン

ツイキャスのコメント欄をAndroid端末でカスタム表示出来るアプリ、ツイキャス専門店『コメ欄Lite (ライト)が、Googleプレイで公開され始めたので、クイックセットアップガイドをここにメモしておきます。

このアプリはツイキャスの配信用アプリのスクリーン配信機能と合わせて使うと、ツイキャスのPC配信で良くある配信画面にコメント欄を合成した配信が可能になります。

コメント欄の表示には、ツイキャスの「配信ツール向けオーバーレイ」の設定が必要なるので、PC版配信でオーバーレイの設定をした事がない人には少しハードルが高いかもしれませんが、この設定ガイドをゆっくり読みながら設定を進めてもらえたらと思います。


『コメ欄』Liteのもう少し詳しいセットアップ(設定)と他の機能については「サポートページ」を参照して下さい。


『コメ欄』Lite の設定中に端末からこのページを閲覧している場合: Googleプレイの『コメ欄』Lite のプロダクトページにある「このアプリについて」の最後に、このページ (クイックセットアップ ガイド) へのリンクがあるので、パソコンや別端末などのブラウザでリンクを開いて、このページを確認しながら設定をすると良いかもしれません。


Ⅰ. インストール

最新版の「ツイキャス専門店 『コメ欄』Lite」はGoogle Playからインストール出来ます。

対応機種:   アンドロイド6.0 Marshmallow (API 23)以降
動作環境:
  • Chromeブラウザ又はAndroid System WebViewが使用可能な状態
  • ホーム画面表示には「他のアプリに重ねて表示」権限の許可が必要
  • アプリ内表示モードのカメラ機能の使用にはカメラ権限が必要

このページで紹介している『コメ欄』LiteはAndroid限定公開になりますが、Liteの表示機能を強化した、『コメ欄』 (プラス)もGoogleプレイで公開中です。
(👉『コメ欄』✚サポートページ)

『コメ欄』✚は、『コメ欄』Liteよりもインストールに必要なストレージ容量が増えますが、iOS対応の他 ()、複数のシーンの切り替えに対応している他、動画背景やバナーの表示もサポートしています。



ツイキャス専門店『コメ欄』Lite (ライト) 『コメ欄』 (プラス)
ホーム画面に表示
シーン切り替え
背景色の設定
背景画像の設定
カメラ画像背景の設定
背景動画の設定
テキストバナーの設定
移動可能な静止画

Ⅱ. 初期設定

『コメ欄』Lite インストール直後のスタート画面

ツイキャス専門店『コメ欄』Lite をインストールした後に、ツイキャスのコメント欄をホーム画面上に表示するには次の設定が必須になります。



「他のアプリの上に重ねて表示」権限の許可

システム権限確認のダイアログ
※「有功」×ではなく「有効」です。

アンドロイドのOSのバージョンによりますが、『コメ欄』Lite をインストール後初めて起動した時に、の様なダイアログが表示される場合があります。

このダイアログには

  • ①「設定画面を開く
  • ②「ホーム画面表示を無効にする

の二つのボタンがあります。

ホーム画面にコメント欄を表示したい場合は、①を選択して、「他のアプリの上に重ねて表示」又は「フローティング表示」というタイトルの設定画面内のボタンをオンにしてホーム画面でのコメント欄の表示を許可する必要があります。

②を選択した場合は、この設定をスキップしてアプリのスタート画面に進みます。 この場合は、コメント欄の表示がアプリ内の専用画面での表示(アプリ内表示モード)に制限されます (後で変更可)。


「他のアプリの上に重ねて表示」システム画面

「他のアプリの上に重ねて表示」又は「フローティング表示」の画面の設定を変更した後、スマホ画面下部に表示されるナビゲーションバー◀    ●    ■バックボタン(◀)をタップするとアプリのスタート画面に移動します。 (ジャスチャーナビゲーションが有効になっている端末の場合はこれらのボタンが表示されないので、画面下部で指を脇から中央にスライドしてみて下さい。)

Androidのバージョンにもよるみたいですが、ページ左上に「UPボタン」という左矢印()が表示される場合、この矢印をタップしてもアプリのスタート画面には移動せず、システムの設定画面に移動してしまう場合があるので注意が必要です。



コメントオーバーレイURLの設定

次に、ツイキャスのサイトで取得出来る「コメントオーバーレイのURL」をアプリに追加する必要があります。

コメントオーバーレイURLは、ツイキャスのサイトにユーザーとしてログインした後にアクセス出来る『ツール・ゲームズ配信』ページ内にある『配信ツール向けオーバーレイ』からコピー出来るURLで、(PC配信の時に良く使われる) OBSでコメント欄を表示する際に使うURLと同じものになります。

👇この項での設定の流れを動画に収録したので参考にしてみて下さい。


『コメ欄』Lite スタート画面
『コメ欄』Liteのスタート画面

インストール直後などの、まだURLが設定されていない状態では、アプリのスタート画面上部のコメントオーバーレイボタンの下の部分には「URL/スクリーンID」という欄だけが表示されます。

「コメントオーバーレイ」ボタンをタップすると、非表示になっているコメントオーバーレイのURL設定用のボタンが、表示/非表示になる仕様になっているので、このボタンを1回タップして非表示になっているボタンを表示させます。


1. オーバーレイ表示用のURLをサイトからコピー

コメントオーバーレイ設定部

初期設定の場合だと「URL/スクリーンID」の右上にURL追加用の「追加」ボタンが一つ、左下に ツール・ゲームズ配信ページボタンの二つしか表示されませんが、コメントオーバーレイの設定が追加された後には、他に「編集」「削除」と「クリップボードにコピー」のボタンも表示されます。


オーバーレイ用URLをコピーするのには、「URL/スクリーンID」の下にある、 ツール・ゲームズ配信ページボタンをタップしてツイキャスの『ツール・ゲームズ配信』ページを開きます。

ツール・ゲームズ配信ページ

(ツイキャスのユーザーアカウントへのログインが必要な場合は配信に使うアカウントでログインして下さい。)


ページ内の ツールとの連携設定ボタンをタップ。


「ツールとの連携設定」ダイアログ

「ツールとの連携設定」というダイアログが開くので『配信ツール向けオーバーレイ』タブを選択。



『配信ツール向けオーバーレイ』タブ

「コメントを配信画面に表示」という見出しの下にURLがあるので右にある「コピー」をタップするとURLがクリップボードへコピーされます。


ツイキャスのサイトの「配信する」ボタン

アプリ内のボタンからではなく、PCなどのブラウザでコメントオーバーレイ用のURLを確認したい場合は、ツイキャスのサイトにログイン後、ページの右上に表示される「配信する」ボタンから「ツール・ゲームズ配信」を選択します。

移動先のページ内のライブ配信画面の下にある ツールとの連携設定ボタンをタップすると👇次の様なダイアログが開きます。

「ツールとの連携設定」ダイアログ

右側の「配信ツール向けオーバーレイ」選択すると「コメントを配信画面に表示」の下にオーバーレイのURLがあるので「コピー」とある部分をタップするとURLがクリップボードにコピーされます。

このダイアログでコピーした値を👇以降に説明する「2. オーバーレイ表示用のURLをペースト」で「ペースト」ボタンをタップしてペーストします。

👉関連メモ: 「配信ツール向けオーバーレイ」のURLを探せ??


2. オーバーレイ表示用のURLをペースト

『新しいURL/スクリーンIDを追加』ダイアログ

「URL/スクリーンID」の右上の「追加」ボタンをタップすると左下の様な『新しいURL/スクリーンIDを追加』というダイアログが開くので、(覚え易い) 適当な名前を入力してからOKボタンをタップすると、「コメントオーバーレイ」設定ページに移動します。


URL設定ページ

ボタンの機能

  • クリップボードへコピー
  • キャンセルして戻る
  • クリップボードからペースト
  • 保存して戻る

この設定ページで、「ペースト」ボタンをタップすると、クリップボードへコピーしたツイキャスのページからの値が、URL/スクリーンIDとしてペーストされます。

「保存」ボタンをタップすると、新しく入力したURLが保存されて、スタート画面に戻ります。


3. 設定したURLの確認

URL追加後のスタート画面

正しいフォーマットのURLが保存された場合は画面右下にボタンが表示されます。

このボタンをタップするとコメント欄が表示される画面に移動しますが、このボタンが表示されるのはあくまでも、設定したURLのフォーマットが正しい場合で、実際には存在しないURLでもフォーマットが正しい場合でもボタンは表示されます。

設定したURLが正しいかどうか確認するのに、同じ画面下部のプレビューの下にある 読み込みボタンをタップすると実際にURLで指定されたコメント欄のオーバレイがプレビューとして読み込まれます。

正しいユーザー情報を含むコメント欄のページが読み込まれた場合は:

  • 読み込みボタン横のマークが緑色のマークに替わって、
  • 「コメントオーバレイ」の下に読み込まれたコメントの欄のアカウントのアイコンが表示されます。

裏技:

「URL/スクリーンID」に設定する値ですが、正規の「配信ツール向けオーバーレイ」のURLではなく、ツイキャスのIDを入力するだけでもコメント欄を表示する事が出来ます。 但し、正規の方法ではない為、いつもコメントが正しく表示されるとは限らないのと、同時に使うカスタムCSSによっては表示が違ってくる場合もあるので了承願います。


[追記: ]
現時点では簡易URLでも下記のログインメッセージは表示されなくなっているみたいです。

[追記: ]
ツイキャスのIDを入力するだけの場合はコメント欄の頭に、次の様なログインを促すメッセージが表示される場合がある様です。

ログインメッセージ

この場合はコメント欄を表示したときに同時に表示される「ツールバー」上にある「 対話ボタン」を選択してログインをするか、「URL/スクリーンID」にツイキャスのIDを入力するのではなくツイキャスのサイトからの正規のURLを入力してください。



Ⅲ. コメント欄の表示

ボタンをタップするとコメント欄が表示される画面に移動しますが、『コメ欄』Lite には、

  • アンドロイドのホーム画面にコメント欄を「オーバーレイ」として重ねて表示するホーム画面表示モード
  • アプリ内でコメント欄を表示するアプリ内表示モード

の二つのモードがあります。


ドロワ―メニューの『ホーム画面に表示』ボタン

このモードを切り替えるのにはスタート画面で、右上にある「」メニューボタンをタップするか、画面の左端から右へとスワイプすると開くドロワ―メニュー(引き出しメニュー)内の『ホーム画面に表示』ボタンで切り替える事が出来ます。


・ホーム画面表示モード

『ホーム画面に表示』ボタンが選択されている場合は、コメント欄とコメント欄の表示位置や大きさなどを調節出来るボタンが付いたツールバーがアンドロイドのホーム画面上に表示されます。

ホーム画面表示モードの場合は、ツールバー右端にあるボタンをタップするとオーバーレイ表示モードを終了します。


・アプリ内表示モード

『ホーム画面に表示』ボタンが非選択の場合は、コメント欄とツールバーはアプリ内の専用画面に表示されます。

アプリ内表示モードの場合は画面下部のバックボタン(◀)でスタート画面に戻る仕様になっています。

又、ツールバー上のボタンをタップするとドローワ―メニューが開いて、背景色や背景画像を選択出来るメニューが表示されます。


Ⅳ. ツールバー

ツールバー上のボタンの各機能は次の様になっています。

  • ツールバー縮小・移動ボタン: ボタンをタップする事でツールーバーを縮小/標準表示の切り替えが出来き、ボタン外側の緑の部分をドラッグする事でツールバーの表示位置を移動出来ます。
  • ドロワ―メニューボタン: アプリ内表示時にドロワーメニューを開きます。
  • コメント欄
    • ロックボタン
    • 対話ボタン: コメント欄の表示コンテントをタップ出来ます。
    • 移動ボタン: コメント欄の表示位置を調節出来ます。
    • サイズ変更ボタン: コメント欄の表示サイズを調節出来ます。
    • 再読み込みボタン: コメント欄の表示内容を再読み込みします。
  • EXITボタン: ホーム画面表示モードを終了します。(ホーム画面上表示時のみ表示されます。)

各ボタンの詳しい機能については「サポートページ」の説明を参照して下さい。



コメント