ツイキャス専門店『コメ欄』Lite: アプリ内表示画面設定ガイド

このメモは、Androidスマホでツイキャスのコメント欄を表示出来る、配信支援アプリのツイキャス専門店『コメ欄』Liteのアプリ内表示画面の設定ガイドです。


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

『コメ欄 (Comme Lan)』は、ツイキャス公式アプリのスクリーン配信機能によってデバイスの画面をそのまま配信するのが前提のアプリの為、

配信中は、誤って個人情報を画面に表示しない

という一般的なスクリーン配信に共通する注意掛けが必要になります。


まず、ホーム画面表示モードを使う場合は、ホーム画面上に個人情報が含まれていないか配信を始める前に確認する必要があります。

アプリ内表示モードでは、配信画面の背景画像を設定出来ますが、表示したい画像を選択する際は、画像の一覧として表示したくない画像もデバイスの画面に表示される可能性もあるので、設定を絶対に配信中には行わず、アプリ内表示モードで表示したい背景画像などの配信用コンテンツはすべて配信の前にプリセットとして設定しておく必要があります。

今回は「ツイキャス専門店『コメ欄 (Comme Lan)』Lite (ライト)」のアプリ内表示画面設定についてメモしておきます。



アプリ画面の流れ (画面展開フロー/画面遷移図)

ツイキャス専門店『コメ欄』Liteのスタート画面からの「アプリ内表示画面」と「設定画面」への流れを図解にすると次の様になります。

『コメ欄』Liteの画面遷移図

アプリの「スタート画面」が図の中央上部の方に配置されていますが、配信に使えるアプリ内表示モードのコンテンツ画面は、「スタート画面」の右にある緑色の縦の点線の右側に表示されています。

アプリ内表示コンテンツ

「アプリ内表示画面」は、「スタート画面」からだと:

  • 「スタート画面」右下に表示される ▶ボタンをタップするか (①)、
  • 「スタート画面」のタイトルバーにあるナビゲーションメニューボタン () をタップする (②) と左からスライドして開くドロワーで「▶ コメント欄を表示」を選択する (③)

と表示されます。

また、「アプリ内表示画面」内にあるツールバーの ボタンをタップすると表示されるドロワー (④) 内の項目をタップする (⑤) 事で、該当する設定のプリセット選択ダイアログが表示されるので、そこで表示したいプリセットを選ぶ事が出来ます。

上の図解の例⑤は、ドロワーで「背景色」をタップした場合で、背景色のプリセットを選ぶダイアログが表示されています。

プリセット設定

一方で、プリセットを設定するには、スタート画面のドロワー (②) で「設定」を選択する (⑥) と表示される「設定画面」にある「アプリ内表示画面設定」内の項目をタップすると該当するプリセットの設定画面が開きます。


設定画面

アプリ内表示画面設定 (設定画面)

アプリ内表示画面の各プリセット設定は、「設定画面」の「アプリ内表示画面設定」にリストされています。


プリセット設定では、スマホやパッドに保存されている画像などを選択する場合もあり、その過程で個人情報を含むなど配信には適さない画像が画面上に表示されしまう可能性もある為、配信中のボタン操作間違いで設定画面が突然表示されたりしない様に、意図的にスタート画面に戻ってからこの「設定画面」を開かないとアクセス出来ない仕様になっています。


プリセット設定は必ず配信の前に完了させて、配信中はこの設定画面にはアクセスしない事をお勧めします。



アプリ内表示画面設定

現バージョンでは「アプリ内表示画面設定」には

  • 背景色
  • 背景画面

の二つのプリセット設定が有効になっています。


各アプリ内表示画面設定は同じ様なデザインになっているので、例として「背景色」の設定を次にメモしておきます。


背景色設定画面

背景色設定画面ではアプリ内表示画面の背景色のプリセットを設定/変更する事が出来ます。

背景色設定画面

プリセット設定の一覧

画面の一番上に表示されているタイトル「背景色の設定」の直ぐ下には、プリセット設定のプレビューが横一列に表示されます。

プリセット設定の一覧

背景色のプリセット設定は全部で5つで、各プリセットには１から5までの番号が付いています。


この一覧の下のには、プリセット設定 (背景色設定) が表示されますが、上の一覧のプリセット設定のどれか一つをタップして選択すると、選択したプリセットの設定値が表示される仕様になっています。

因みに、選択されているプリセット設定の番号は「設定:」の後に表示される番号になります。


背景色設定

背景の塗りの種類

背景色: 塗りの種類

「種類」をタップすると、背景色の設定で有効な背景を塗る方法 (Fill) として次の選択肢が表示されます:

  • 単一色
  • 線形グラデーション
  • 放射グラデーション
  • 未設定


単一色

背景を単一色で埋めます (ベタ塗り)。

  • 色は「グラデーションの開始/終了位置」にあるカラーボックスで選択

線形グラデーション

背景を線形グラデーションで埋めます。

線形グラデーションの例: 開始点の色は黄、終了点の色は赤になっています。
  • 「線形グラデーションの方向」で開始点から終了点の方向を選択します。
  • グラデーションの開始点と終了点の色は「グラデーションの開始/終了位置」にあるカラーボックスで選択

放射グラデーション

点を中心に放射状のグラデーションで埋めます。

放射グラデーションの例: 開始点の色は黄、終了点の色は赤になっています。
  • グラデーションの中心点と半径色は「グラデーションの開始/終了位置」にあるカラーボックスで選択
  • グラデーションの半径は「グラデーションの開始/終了位置」にあるスクロールバーで設定
  • グラデーションの中心の位置は「放射グラデーションの中心点」にあるスクロールバーで設定

未設定

背景色を無効にします。


線形グラデーションの方向

方向の選択 (線形グラデーション)

「種類」で「線形グラデーション」が選択されている時に有効になる設定で、グラデーションの方向を選択します。


グラデーションの開始/終了位置


放射グラデーションの中心点


カラーピッカー

カラーピッカー

「グラデーションの開始/終了位置」にあるカラーボックスをタップすると、カラーピッカーが開くので、色を、RGB、カラーコードまたは、HSVで指定する事が出来ます。

色を選択した後はピッカーの下の方にある「OK」ボタンをタップすると背景色設定画面に戻ります。




ツイキャス専門店『コメ欄』Lite (ライト)

『コメ欄』✚ (プラス)

コメント

コメントを投稿