CastBackgroundの紹介
SBC.オープンマイクのナンバー55、始まりました。 今回、CastBackgroundのつかいかたということで、お話をしていこうと思います。
今回の内容はですね、自分一人の回でございます。 CastBackground、うちのお団体で制作をして、SBC.オープンマイクですとかに使っているこのツールなんですが、
こちらの使い方を紹介しようということで、動画に収めておこうということで、今回やっていくことになりました。
内容としてはですね、基本的にはこちらのCastBackgroundのデモ、利用デモということで、いろいろとお話を進めさせていただいて、
その中でもし、コメントのほうで、YouTube、Facebook等のコメントで、何かこういうようなことどうなってますかとか、質問があれば、そちらのほうを受け付けて答えていければいいかなというふうに思っております。
もし、例えばYouTubeの配信を行いたいとか、あとはZoomで何かいろんなものを出したいんだけれども、そういうときに何かもうちょっといいツールないかなとか、探していらっしゃる方は、こちらのほうを使っていただければいいかなというふうに思います。
Twitterでも今回の内容を配信をしております。Twitterのほうはコメントを書き込むことができませんので、お手数ではありますが、もしコメントを何か書きたいなという方は、
TwitterからYouTubeのほうに移動して、そちらのほうでコメントをいただければいいかなというふうに思います。それではよろしくお願いします。
早速、こちらのほうでキャストバックグラウンドのほうを見ていきましょう。
では、キャストバックグラウンドのほうに移っていきたいと思います。
キャストバックグラウンドというのは、今のところ公開されている場所、GitHub上だけになっております。
GitHub上のGitHubページで、キャストリームヤドダンドでの共有用語背景ということで紹介をして公開をしております。
これ、もちろんダウンロードして使っていただいても構いませんし、クローンしてそのまま自分のところで開発環境を展開していただいても構いません。
できることは全く同じです。今のところキャストバックグラウンドをGitHubページで展開したほうが楽だなということで、こちらのほうで使っているというだけです。
もし何か他のところで出したほうがいいかなとか、他のほうでやりたいなというようなことがありましたら、そちらのほうを使っていただければと思います。
それではまずこちらのほうを起動してみましょう。
こちらのほうでコントローラーという画面が出てまいりました。
こちらの操作画面と、これちょっと並び替えしますね。
こちらはPowerToysを使って並び替えているんですけど、この辺はどうでもいいです。
今回は配信用の画面とコントローラーの画面と2つあるということだけ覚えてもらえればと思います。
そしてストリームヤードですね。
ストリームヤードの画面をこちらで開きます。
ストリームヤード、実はストリームヤードって配信中別に画面を開くってこともできるんですよ。
この間さっき知ったんですけども。
なのでこちらのほうを見ながらちょっと紹介をしていきますね。
こちらのほうでテストスタジオのほうに今入っていますけども、ここで共有するっていうボタンがあると思います。
こちら画面を共有する、そして今回はGTABで配信用っていうのを選びます。
こうすると、ついでにあとTABのオーディオ共有ってチェックが入っていることを確認しておいてください。
これが入っていない場合、たとえBGMが鳴らしたとしても、ここでは配信側に音声が乗りません。
お注意ください。
で、配信用をチェックして共有をします。
そうすると、ストリームヤードの画面にこちらの配信用の画面だけが乗っかる感じになります。
なのでコントローラー用の画面には何を書いても何をしても画面に表示されないわけなんですね。
なのでコントローラー用の画面に、たとえば様々な画像ですね。
画像ですとかBGMですとか、いろんなファイルをこうやって貼り付けて、ドラッグドロップで書き込むことができます。
こうやってドラッグドロップでファイルを格納して、いろいろ格納して、再生したいものを再生するっていうような感じの使い方をするということになります。
ファイル表示と対応形式
たとえば今回のイベントのタイトル画像ですね。
こちらを使ってみましょう。
これを貼り付けます。
で、これを表示すると。
そうするとこれの画像だけが表示されるということになります。
これは何を表示しているのかというと、配信用にも同じ内容が表示されているんですね。
なので配信用の画面をこうやって表示することによってスムーズに画面の切り替えができますよということになります。
ではもう一つ実際のお話に入っていく前にBGMでも再生しちゃいましょうか。
こちらの内容がBGMを再生したりということもできます。
こちらコントローラーはこちらの方で再生したりとかストップしたりとかいうようなことができるようになっています。
ちなみにこの音声がこちらの先ほど公開するときに音声のタブの音楽を再生するというチェックをしたと思いますが、
こちらの方でタブが多分音声を共有するという設定になっているからこそ、
ここで音楽が配信に流れるという仕組みになっているというわけになります。
と、とりあえず今回の共有の話はこのぐらいですかね。
とりあえずこちらで表示できるものとしては以上になります。
それでは表示できるもの、どんなものが表示できるのかというところで次の話に移っていきましょうか。
こちらの内容は基本的にどんな内容でも表示することができます。
キャストバックグラウンド、BGMとか音楽とか写真とかさまざまなものを表示することができます。
表示される内容は基本的にはブラウザが対応しているものであれば大抵全部になりますが、
MP3とかPingファイルとかそういうようなファイルだけに限定しておいたほうが無難かと思います。
というのはマイムタイプというものを見てはいるんですけれども、
このブラウザに画像とかファイルを読み込んだときに表示されるマイムタイプというものを見ているんですけれども、
このマイムタイプは基本的にブラウザがある程度勝手につけています。
なのでそのあたりをひょっとしたらうまく解釈できない場合があったりするわけです。
なのでPingとかMP3ファイルとかMP4ファイルとか常にブラウザで読み込んで使っているという実績があるものですね。
こういうようなものの拡張子のものに限定をしたほうが多分事故はないだろうなというふうに思います。
あとはURLも読み込むことができます。
なので例えば今回はSIDE BEACH CITY.のウェブサイトを表示してみましょうか。
SIDE BEACH CITY.のウェブサイトを追加をします。
ここ追加のボタンからhttps://sbc.yokohama
こちらのURLを追加することでこちらに画面にこの画像、ウェブサイトを表示することもできます。
なので例えばずっとこういう画像を表示しておいて、
じゃあ自分のサイトをご覧くださいというようなときにこれを切り替えるとスムーズに画面を表示し切り替えることができるという仕組みになっています。
実際はですねここ左側の赤い部分ですね。
左側に赤い部分のゲージが出ていると思いますがここが青かったときっていうのはウェブサイトまだ読み込み中ですっていうサインです。
ですのでここら辺をとりあえず目印にして進めていただければいいかなというふうに思います。
例えばこちらの方でウェブサイト読み込みにちょっと時間かかりそうなページを表示した場合なんかだと時々これしばらく青いままだったりすることもあります。
なのでそういう時は例えば青いところを見ながら会話をつないで今読み込んでるんで少々お待ちくださいねとか
そういうふうな会話をして適当に場をつないであげるというような態度が必要になります。
ついでにこちらの方ですねフレーム内部ではiframeというタグを使って表示をしています。
なのでフレームの中に表示をできないサイトが実はいっぱいあります。
例えばptxなんかそうですねptxはやっぱりフレームの中で画面ページを表示してしまうと脆弱性の問題にもつながり得るため
ptxのサイトはiframeの中に表示できないように設定されています。
なので例えばptxのページをちょっと表示してみましょうか。
実際表示できないのでね実際表示できないのでptxのサイトを表示しようとしています。
そうするとリダイレクトがブロックされましたといって表示がキャンセルされます。
読み込みが終わったということで表示をしてみても何もページに表示されません。
こういうふうにページが表示されない場合があります。
なので事前に表示する可能性のあるページがあれば
こちらのptxとかそういうの全部ここにコントローラーに表示させようとしてみて
表示されるかどうかチェックをしてからやってみるといいのではないかなというふうに思います。
またそこで不意にwebサイトのBGMが鳴るようなページだった場合に配信に音声が鳴ってしまう場合もありますので
そういうような時もあるので念のため自分は配信担当する人は
なんかイヤホンとかしたほうがいいかもしれませんね。
ストリームイヤーでは基本的にイヤホンなくてもちゃんと音声が鳴るんですけどね。
でもまあそういうような時がありますので基本的にはイヤホンを配信する人
特に画面共有をする人はイヤホンをしたほうがいいかなと思います。
配信NGな音声が鳴っちゃったらさすがにまずいですよね。
なのでそういうようなことがないように事前にチェックをして
それでもちょっとドタ目でいきなり表示してって言われたときは
イヤホンをしながらそのサイト表示しちゃっても問題ないよねってことを確認した上で
表示するっていうような形になるのが良いかなというふうに思います。
というところでURLの表示についてはこのぐらいになります。
ちなみにこちらですね画像ウェブサイトですがズームができるようになっています。
こうやってここにあるコントローラーの3倍とか1.8倍とか
こういうようなボタンを押すことでズームをすることができます。
ズームした場合はここにスクロールバーが1個余計に付きますので
この辺で適当にサイトを調整してください。
例えばこちらの地図を見てくださいとか言われたときに
先日軍艦島のサイトを前回のSBCオープンマイクで表示しましたね。
例えば軍艦島のサイトを表示するときに
軍艦島の長崎タビネットって結構実は画像がちっちゃいんですよ。
なのでこの通りに表示をしても今までパッと見えないということになってしまいます。
これですね。こちらの画像ですね。
こちらの画像をもうちょっとよく見たいですって言われたとき
もちろんクリックしてこれのサイズでいいよって言うんであれば
全然問題ないんですけれども
それでももっともっと大きくしたいっていう時はこうやって3倍にして
この辺りで例えばこの辺の画像がですねとか
こんな感じの表示の仕方をすることができますということになります。
なのでこういうような表示をうまく使い分けてみてください。
この辺は多分シチュエーションによりけりになるかなというふうに思います。
例えば発表者さんとか自分の配算している内容とか
そのところで表示した方がいいな大きくした方がいいなと
いうようなことがあった場合は臨機応変に対応するとか
あらかじめ台本にその旨書いておくとか
そういうような感じの対応が必要になるのかなというふうに思います。
例えばこちらの拡大縮小については
画像とかその他のファイルにも使うことができます。
なので今先日の画像をちょっと探してみてみるんですけれども
例えば以前SBCのローカルガイドのほうでですね
画像を表示しました。こういうふうに画像を表示しました。
実際の地図の一部の切り抜きですね。
ただちょっとこれ見づらいよ、ちょっと図示したいよというようなときには
キャストバックグラウンドの基本機能
ズームをして適度にこんな感じですよというふうに表示をする
というようなことができるようになります。
なのでこの辺をうまく使い分けてみてくださいというような感じになります。
ズーム中にですね、いきなり元のサイズに戻したい場合
もちろん1.0というのをここ選んでもいいんですが
ここのボタンを押して元に戻りますという形になっています。
こちらのほうはですね、その他だと動画の再生にも一応対応しております。
ですのでこちらのiCatchのMP4画像ですね。
こちらのほうも表示をしてみましょう。
こうやって画像を表示することができます。
はい、いつものこちらの画像ですね。
SBCオープンマイクのオープニングの映像ですね。
こちらを表示することもできます。
ボリュームもこうやってもちろんここで調整をすることができます。
C、あとはそうですね、ちょっとこれコントローラーのサイズが小さいので
映り切れてないですが、ここでBGMを再生させた時の音量
あとはここの映像の動画の部分にコントローラーを表示させるかどうかですね。
こういうのを表示したり、自動再生させるかどうかというのを
こうやって設定を変更することができます。
この内容はブラウザーに保存されますので
ブラウザーを開いてキャストバックグラウンドを
同じプロファイルでひたひたに表示するという時も
設定は保存されています。
自動再生オンにしましたので
もう一回この動画を再生してみましょう。
あれ、自動再生、コントローラーオンになってる。
ダメだったっけ。
はい、今自動的に再生されたかな。
あれ、されてないですね。
ちょっとこういうようなところも
まだまだ作りかけのところもあるので
時々動作がおかしくなってしまうかもしれません。
すみません。
あ、そっか、終了してたんだ。
そうですね。
こちらですね、動画の再生位置っていうのは
実は記録しちゃってるんですね。
このキャストバックグラウンドのほうが。
なので将来的にはこの動画の再生については
ゼロになった時は自動的に最初から再生させるように
しようかなというふうに思いますが
例えば別の画像を表示して
mp4ファイルに戻した時
この再生ストップした段階の秒数から
再生再開されるようになってます。
なので残り12秒余ってる状態で止めたら
残り12秒から再開されるっていう感じですね。
にはなっているんですが
ゼロ秒になった時にこうやって戻して
また戻すとまたゼロ秒からスタート
つまりもう再生終了してるんですね
っていう状態からスタートしちゃうっていう問題がありますので
この辺りについてはまた後で修正をしていこうかな
というふうに思います。
まだまだ全然発展途上なサービスですので
サービスですのでっていうかアプリですので
こちらのほうはおいおい見ていっていただければと思います。
こちらのほうはGitHubのイシューのほうでも
管理をしておりますので
何かおかしいぞ、使ってておかしいぞ
っていうようなことがあったら
どんどんイシューのほうに上げていってもらえればと思います。
Zoomとの連携
自分のほうも何か気づいたところがあったら
どんどん上げていこうと思います。
こちらですね
先ほどまでのところで
ちらっとZoomについてのお話もちょっとしたと思います。
その通り実はこのキャストバックグラウンド
別にStreamYard専用のツールってわけではございません。
Zoomとか要するに画面を配信する機能が付いているものを
全般に使うことができます。
そしてそのときのために
実はこれアプリとして表示をする
っていうようなことができるようになっています。
アプリとして表示をするっていうと
このブラウザの上の部分ですね
ブラウザの戻り戻るボタンとか
先に進むボタンとか
URLのバーとかそういうものを全部
一式がなくなった状態で表示するっていうような機能です。
今もうインストールしちゃってるんで
キャストバックグラウンドアプリで開きますか
っていうふうに表示されてますが
もしこのアプリをまだダウンロードしていない
インストールしていない状態の画面で開きますと
だいたいこのような表示になります。
ちょっと見てみましょう。
こちらは入っていないブラウザですね。
なのでここに今アプリを利用できます。
キャストバックグラウンドインストール
っていう画面が出てますね。
これでインストールをすると
ブラウザの画面を取っ払って
アプリとしてブラウザを起動することもできます。
キャストバックグラウンドを起動することもできます。
なのでこちらのほうを見ていくということも可能です。
じゃあ開いてみましょうね。
開いてみるとこういうふうに配信用の画面が
独立して表示されます。
なので例えば共有を表示したいとか
というようなとき
これはいいや。
これは完了でいいのかな。
完了しても消えないね。
まあいいや。
こちらのほうキャストバックグラウンドのほうを
例えばZoomの画面とかに共有をするときは
このウィンドウを丸ごと共有をする
っていう感じになります。
他の例えば共有機能を持っているアプリでも
だいたい同じですね。
なのでこちらを使って
例えばZoomに画面を共有させたいですよとか
いうようなことがあれば
フィードバックと改善点
こちらを使ってくださいという感じになります。
という感じでございますね。
このときも例えばこうやって画像を切り替えたり
とかいうようなことはいつでもできるようになっています。
PTXのほうは表示できませんね。
こちらのほうですね。
例えばマイナスでURLを解除することもできます。
そのほかではどこから説明をしていきましょうか。
自分も他の
自分はもう作者の目線としてしか見ていないので
というより中身を全部知っている上で
話をしてしまうので
やっぱり他の方がどういうようなところで
分からないのかなっていうのが
正直自分も分かっていない状態でございます。
なのでこの説明が
質問がないと本当に
分からないところを説明し忘れたまま
終わってしまう可能性もありますので
どんどんコメントをいただければと思います。
その他ですね
話を進めてまいりましょう。
どこをお話をしていこうかな。
あとはそうですね。
Zoomコントロールバーについてお話をしていきましょう。
今このコントローラーの下ですね。
こちらのプラスボタンとか1.0倍とか
その辺のコントロールが表示されているところですが
例えば動画を表示しているときには
ここの下にコントロールバーが追加されます。
こちら例えばプレイボタン
プレイボタンを押しているときは
ポーズボタンになりますね。
あとはストップボタンというのは
再生位置を0にセットして止めます。
そして10秒前に先に進む
前に戻るのボタンですね。
このボタンがあります。
こちらのボタンはですね
表示している内容によって表示が変わります。
例えばですねテキスト
テキストファイルはあったかな。
テキストファイルはあったかな。
なさそうなのでこちらで作ってしまいましたね。
テストテキスト。
例えばテキストを実は表示することってできるんですけども
こうやってテストのテキストを表示すると
こういうふうに表示されます。
文字のサイズですね。
こうやって大きくすることができます。
こちらについてはね
こっちで大きくした方が早いんじゃないか
という気がしなくもないんですけれども
一応テキスト側だけを表示したい
大きくしたいというときは
こちらを選んでくださいという感じになります。
実はこれhtmlファイルを表示することもできます。
なんですがあくまで画像とかパスは
表示することができませんので
あくまでおまけ機能という感じになるかな
というふうに思います。
基本的には写真とか動画とか
そのあたりの画像ファイルを表示する
という形になるのではないでしょうか。
いろいろところでございますがね
そのほうが何かあったかな。
今いろいろと機能を確認して回っているんですけれども
キャストバックグラウンドは
基本的に表示するための
あとはピースをサポートしている形式としては
画像、あとはビデオ、オーディオファイル、音声ファイルですね。
あとはhtmlファイルとpdfファイル
実は対応しております。
ただこちらについては
アプリケーションピーディフという
内容を見ているので
例えばひょっとしたら表示できない環境があるかもしれません。
もしあったら申し訳ございません。
なので事前に表示をチェックしていただけると
非常に助かります。
いうところでございますね。
例えばテスト用に
自分が以前に表示したpdfファイルなんですけどね。
こうやってpdfを表示することも一応できます。
ただあくまでおまけ程度に
思ってもらえればと思います。
事前に表示できるかどうかっていうのは
必ず確認をしておいていただけると助かります。
コメントが来ていらっしゃいますね。
ありがとうございます。
今のを見ると
真ん中の四角いボタンを押すと
流れていた音楽動画ファイルの始まりで
最初に戻るんでしょうか。
はい、戻りますね。
ストップボタンですね。
この時は再生位置をゼロに戻して
停止をするっていう感じになります。
ですので基本的には再生位置っていうのは
どんなところにあっても必ず最初に戻ります。
画面、このバーがなんか最初に戻ってないので
あれっていうふうに思われるかもしれません。
が、基本的には最初にちゃんと戻っていますので
そこは問題がないです。
で、あとはそうですね。
画像のピン止め機能とか
その辺についてもちょっと確認をしていきましょうか。
そのためにはこちら背景になり得る画像を
別にもうちょっと用意したほうがいいですね。
えーと、何があったかな。
その間にもう一つ質問がありましたね。
サイド、最初から流したい場合は
サイドファイルをクリックすればよろしいですか。
そうですね。再生している最中に
同じ画像をクリックしても
戻り、再生位置はそのままになりますので
面倒でも□を押してください。
□ボタンで最初から戻してください。
で、次のバージョンからですね。
これ再生が終わった状態で
こちらのほうに戻して
別の画像を表示して
再度画像を表示した場合
再生位置0からちゃんと表示できるようにしますので
そのあたりについては
今後対応していこうかなというふうに思います。
えーと、あとはそうですね。
かなり前の講座の画像ですが
こんなものがありましたね。
これを表示してみましょう。
こちらの画像ですね。
これを背景に表示をするというのを押してみます。
こちらのピン止めボタンっていうのがあります。
ピン止めボタンを押すと
こちらの画像背景に設定することができます。
一見見た目よくわからないんですが
CastBackgroundの機能紹介
こうやってやると
あ、こちらのほうに変えると
見た目がわかるかな。
アイキャッチ。
そうですね。こちらのほうにすると
背景の画像にセットされているのが
なんとなくわかるかなというふうに思います。
なのでこうやってピン止め
画像もあとは音声ファイル
ピン止めすることができるようになりました。
なので他のところだとピン止めは実はできません。
例えばこれ音楽をピン止めにしてみます。
そうすると
こちらのほうは切り替わっても
BGMの再生をオンにすると
背景でBGMが鳴るというふうになっています。
ひょっとしたらこちら配信のほうに
音声が載ってないかもしれません。
なのであくまで音声鳴るよというところだけ
見てもらえればと思います。
こちら緑色、黄緑色のバーになっているというのが
一応目印になります。
画像と音声のファイル。
あとはこういう動画ですね。
動画は音声と同じ扱いになります。
こちらもBGMとして貼り付けて再生することができます。
例えば配信中に
ずっと同じ音声をずっと流しておきたい
その時にはこのように貼り付けを選んで再生させてください。
この音声は基本的に永遠にループし続けます。
フェードアウトとかはしないので
例えば切れ目があるような音楽とかであれば
なるべく波形加工とかを使って
事前にくっつけてループのように
ちゃんと切れ目のない音声に再生されるようにしてみてください。
という形になりますね。
こちらについては
見方がちょっと分かりづらいところもあると思いますので
多分事前に何か配信をする前に
テストをしてみることをお勧めします。
多分パッと見こういうつもりじゃなかったとか
これって何かおかしいなとか
いうことになってしまうこともあると思いますので
そのあたりは事前にチェックを必ずしておいてください。
その他ですと何かあったかな
ピン留め機能については
カスタムCSSの設定方法
今回のお話が以上になります。
ピン留め機能はとりあえず
今後何かがあれば
修正をしていければいいかなという風に思っています。
あとはそうだ
カスタムCSSですね
こちら画像の貼り付けとか
こちらの背景画像ですね
テキストは
実は全然見えないですね
こちらのテキストと色とか
あとは背景の表示のされ方ですとか
こういうようなものって
実は全部いろんな表示方法があると思います。
例えば小さい画像だったらタイルバリにしようとか
あとはストレッチして
横幅縦幅なるべく同じサイズに表示できるようにしようとか
そういうような設定があると思います。
お好みの方法があると思いますが
これら全てを網羅することはすみません。
ちょっとさすがにできませんでした。
なのでカスタムCSSという
ちょっとCSS自分で設定してという方向に逃げておりますが
そういうような機能を設定しております。
なのでこちらの方に設定をしてください。
書き方については
GitHubのウィキというところに
いろんな表示方法とか
どういう風な感じにすればいいのとか
そういうのをある程度表示しております。
カスタムCSS使用例というところですね。
例えば背景画像の表示方法
配置方法を変更したい場合は
こちらバックグラウンドというIDがついてますので
この内容をこちらの方に
貼り付けてみてください。
少しずれたのがわかるかなと思います。
こちらセンター、要するに背景画像を
真ん中を中心に表示するように変更しましたということですね。
こんな感じで
背景画像の位置を設定したりとか
いうようなことができますし
あとは一旦キャンセルで戻しますが
背景画像なしのとき
背景画像なしのときは
バックグラウンドに背景色を設定する
というようなこともできます。
あとは背景画像がこういう風に
色がちょっと濃いなというとき
色が濃いなというときは
こうやって透過度を指定することによって
少し透けた状態にすることができます。
こういう風にすることで
背景画像に使いづらいなというと
濃いめの色の画像もある程度
背景画像に使いやすくなるかなと思います。
もちろんスタイルの重複設定も
スタイルを複数個設定することも可能です。
なので例えばこの下にバックグラウンドポジションとか
設定することもできるという感じですね。
こちらについてはすみません。
たぶんMDNとかCSSのスタイルについての
リファレンスがあるサイトの方をご確認ください。
すべての内容を自分で網羅するということは
残念ながら自分はできかねてしまいます。
ちなみにちょっとおまけ機能ですね。
表示の制約と対策
こちらのほうですね。
こちらのほうこんなことできるっていうのは
自分は知らなかったんですが
こうやってフェードアウトをすることもできるようになっています。
フェードアウトしてますね。
なのでこういうのは
スタイルも設定できるということなので
こちらについてはCSSについて詳しいサイトを
ご確認いただきながらいろいろと貼り付けて
自分好みのこういう表示方法がいいかなとか
いうようなものがあれば表示するようにしてみてください。
というような感じになります。
こちらについてはすみません。
こちらのほうだけでは全部を網羅できないので
ちょっと自身でCSSの方法を調べて
入れていただければいいかなというふうに思います。
その他ですと何があったかな。
たまにこちらのほうで
表示の制約が生まれるサイトなんかも一応表示して
掲載しています。
表示ができないサイト。
表示がうまく行えないサイトの一覧ですね。
こちらPTXのことについては先ほどお話ししました。
PTXはやっぱり決済が絡むサイトでもありますので
クリックジャッキングというので
脆弱性の対策のためにスクリプトが設置されています。
なのでiフレーム上、フレームの中に
画像を表示すること、サイトを表示することが
できないような仕様になっています。
こちらについてはPTXのサイトの仕様ですので
すみませんがちょっと対応できかねますということでご勘弁ください。
もしどうしてもPTXのサイト
PTXの中でこういうような国室サイトをやっているんですよ。
これを掲載することができますか?
いきなり言われちゃった場合とかですね。
そういう場合はちょっと対応が大変ですけれども
一応自分が試している方法としては
こういうようなウェブサイト
スクリーンプレストというアプリが
入れておくといいかもしれません。
スクリーンショットを撮影できるアプリ。
今回は仮にWindows標準のスクリーンショット撮影機能を入れますね。
こちらの方で画像をキャプチャーして
このキャプチャーした画像を保存して
ここに読み込ませるようにしてみてください。
クリップボードの中にある画像をいきなり表示させる
ということは残念ながら今のところできないので
これについては将来的にできれば
ちょっと対応してみようかなというふうに思いますけれども
今のところは
ここで撮影したスクリーンショットをここに貼り付けて
こんな感じですねというふうに表示をするようにしてみてください。
なのでちょっと手間がかかってしまいますが
そんな感じということで
運用対処でお願いいたします。
もう一つですね
自分が最近Podcastで配信を聞いている
HoneyFMという商工券サンダーシュのサイトですね
こちらも0時で表示しようとしてみたことが何とかありますが
たまにローディング画面から遷移しないことがある
という状況を確認しております。
これについてはですね
多分他のサイトでもたまにあるんじゃないかなというふうに思います。
なのでこちらについては
一応これ何度か読み込みし直すと表示ができるということを
確認しましたので
再読み込みは何とかしてみてください。
こちら読み込んでみたサイトですね
サイトの再読み込みというのは
このぐるぐるマークのボタン
ぐるぐる当たっているのかどうかよく見えないかと思いますけど
このボタンを押すと再読み込みがかかります。
ちなみにこれ
再読み込みが裏の画面に表示されていないページでも行うことができます。
なので例えば
表示中にちょっと裏で再読み込みを
行わせておきたいというときはこのボタンを押して
再読み込みをかけてその間赤になるまでちょっと待ってみるとか
してみてください。
今ちょっとスタイルを設定しているのもあってか
ここの状況が青になってないみたいですね。
戻します。
あれ戻らなくなっちゃいましたね。
多分大丈夫かな。
表示はされているのでまあいいか。こんな感じですかね。
では次の説明の方に移っていきましょう。
表示されないサイトについて
あとはGoogle Earthについては
表示はできるけれども操作ができないという状況を確認しております。
こちら現在対策検討中というか
動作の確認を行っている最中でございますので
今しばらくお待ちいただければと思います。
その他ユーザーログインが必要なサイトの一部ですね。
例えばCodeGeneとかのサイトでは
ログインができないという状態も確認ができています。
こちらについては
サイトクッキーというのは脆弱性対策によるもののために
こちらだけでは対策ができないようになっていると思われます。
これはどういう脆弱性対策かというと
クッキーで今
大抵のサイトはクッキーという
ブラウザの機能を使って
ログインをしているとかしていないとかいう状況を
保存しているんですが
そのクッキーの値をフレームの中で読み込ませないように
しようという対策がなされています。
これでたぶん事件があったんだと思います。
すみません。この事件については
自分はあんまり詳しくは知らないんですけれども。
なのでこちらの方ですね。
クッキーで読み込み
ログインの状態を確認しているようなサイトは
そもそもこちらのキャストバックオンラインでは表示ができませんので
そういうものだと思って
申し上げございませんが
対応いただければと思います。
ただ最近のサイトはその他の仕組み
ローカルストレージというものですが
そちらの方でログインの状態を保存しているという場合もあります。
こちらの方はちゃんとページが読み込むこともできますし
ログインの状態も保存されますので
こちらの方では普通に表示ができるという感じになっております。
これはキャストバックグラウンドで
事前に表示をしてちゃんと表示できるかどうか確認をする
というような対応が必要になるかと思います。
それでもどうしても
このサイトを表示しないといけないというような場合は
例えば一旦画面の共有を切って
自分のデスクトップを表示するなりして
対応するというような感じになってくるのかな
というふうに思います。
あとはその他ですと
ここにも書いてありますので大体そうですけれども
あとはX-Frame Optionsというヘッダについて
キャストバックグラウンドの取り扱い
こちら、キャストバックグラウンドというのは
URLを読み込む際に
WebサイトiFrameで読み込みます。先ほどお話ししましたね。
なのでこちら
X-Frame Optionsというヘッダが付いているページ
Googleのページとかは読み込みが制限されてしまいます。
なのでこの場合は
その場合はページの表示を行うことができません。
なのでその場合は
X-Frame Optionsを削除するという拡張機能を使って
対応してくださいという話を
今回ご案内をしております。
こちらChromeの拡張でGoogleのX-Frame Headersというものが入っています。
自分がいつも配信に使っている
こちらのSBCプロファイルでは
もうすでにこちらのX-Frame Optionsを無効にするという
拡張機能を入れてあります。
ちょっと今画面に見えないようにしているので見えなかったんですけども
こういうのはフレームヘッダーを削除するオプションが入っています。
なので例えばいきなりここでGoogleを表示するとか
いうようなことをしてしまっても表示ができます。
X-Frame Optionsを削除している。
なので例えば
こちらでブラウザーの
ブラウザーでGoogleマップを表示しようとしてみても
ちゃんと表示ができるわけですね。
これができるのは
X-Frame Optionsという機能を削除しているから
ヘッダーを削除しているからという感じになります。
これは一度入れておけば
全く問題はないと思いますので
多分大丈夫かなと思いますが
これがなんでこんなX-Frame Optionsなんか
設定されているかというと
なのでこれを故意に
こちらのヘッダーを削除してしまうということは
予期せぬ問題を生んでしまう可能性もあります。
なのでブラウザーのプロファイルを切り替えて
常用していない方のプロファイルで表示する。
ないし、常用していないブラウザーで表示する
っていう風にすることをお勧めします。
なので今、複数のブラウザー
ウィンドウを表示して
プロファイルが表示されていない
違うような画面が表示されているなと思いますが
これはブラウザープロファイル、違うプロファイルを使っているからです。
今ここで表示を切り替えることができますけれども
こちらを使って複数のプロファイルを運営している感じになります。
これが自分用の個人仕様のプロファイル
こちらがサイドウィッチ関係の
仕様のプロファイルという感じになります。
こういう風に分けておくと
例えばこちらでGoogleアカウントを
不意に表示してしまうというようなこともないですし
間違えて何か表示したら困る情報を表示してしまう
ということも防げると思います。
なのでこういう風にブラウザープロファイルを分けて
運用するということをお勧めします。
大体このぐらいの形のお話になるかなという風に思います。
リスナーからの質問と今後の配信
その他何かあったでしょうか。
脆弱性とか
動作がおかしいとかいうようなものについては
随時こちらの方に書いていっていただければと思います。
ちなみにZoomの方だと
共有背景に画面共有時に
マウスカーソルがそもそも表示されない
これはZoomの機能の問題みたいですけれども
そういう機能問題が確認されておりますので
こちらの方も別々に対応していこうかなという風に思います。
というのもマウスカーソルで
ぐるぐるしてこの辺見てくださいとかいうようなことって
よくやると思うんですけれども
これやってもマウスカーソルちっちゃすぎて読めないよということが
割とよくあるんですよね。
なのでそれと同時に対応してできればしていこうかなという風に
思っていますので
この辺もちょっと期待してお待ちいただければと思います。
もし何か使っていて不明点おかしいなと思うところがあれば
どんどん書いてください。
ディスカッションの方も先日オープンしました。
何かわからないところあれば
こちらの方に書いていただければと思います。
一応画面上は全部英語になっちゃってますけれども
日本語で書いていただいて全然構いません。
基本的に他のGitHubのページなんかだと
結構英語で全部書いてらっしゃるところもあるので
気を使ってしまうこともあるかと思いますが
別にキャストバックボンドはそこまでしなきゃいけないという風な
つもりではありませんので
どんどん日本語で書いていただければと思います。
だいたいこのぐらいでございましょうか。
大丈夫でしょうかね。
今回のYouTubeの配信としては
SideBHTの配信としては
これで終わりにしちゃいますけれども
もしコメント疑問点等ありましたら
例えばこのYouTubeの配信
のコメント欄とかに後で書いていただいても
こちらのほうで補足できれば確認していくと思いますし
SideBHTのお問い合わせページとか
あとはSideBHTのTwitterアカウントの
お問い合わせとか
あとはそれこそこちらのディスカッション図とか
そういうところにいろいろ書いていただければ対応いたしますので
どんどんわからないところがあれば書いていただければと思います。
というところでこのぐらいでお話を終わりにしていきたいと思いますが
何か質問がなければこれで終わりにしていきたいと思います。
というところで今回のSBCオープンマイクは
だいたいこのぐらいで終了にしていきたいと思います。
7月以降ですけれども
今回まだ現在調整中という形になっておりますので
もし決まり次第広告させていただきます。
楽しみにお待ちいただければと思います。
というところで
今回のSBCオープンマイクNo.55
今回はキャストバックグラウンドの使い方ということで
テーマでお話をさせていただきました。
というところで今回のSBCオープンマイクは
終了させていただければと思います。
今回の配信ご覧いただきまして
アーカイブご覧いただきましてありがとうございました。
以上で終わります。
