「facebook」カテゴリーアーカイブ

【解決済み】Oculus Rift 音しか聞こえない、映像が出ない時の対処法

Oculus Riftのトラブル

VRの最古参でもっともポピュラーなVRヘッドセットの一つ、Oculus Rift(オキュラス・リフト)のトラブルが発生した時の対処法。

運営元のFacebookによると、徹底的な品質管理を行っており、不良品率はかなり低い。
不良品を疑う前にPCの環境と設定を調べて欲しいとのことだ。
 

条件と症状

・PCのスペックは足りている(グラフィックボードを搭載している、など)。
・Oculus App のセットアップも途中までは問題なく進む。
・セットアップ後半でヒーリング音楽のようなものは聞こえる。
・映像が見えない。
・ケーブル抜き差ししても直らない。
デスクトップPCではない場合は特に要注意

 

原因

スペックが足りていても(特にノートPCに多い)、オンボードのCPUとNVIDIAやAMDなどのGPU両方搭載していて、自動的にグラフィックをどちらで処理するか最適化するPCではOculus Riftの映像が見れない場合がある。

有名な機種では、Dell Inspiron 7000 ゲーミングシリーズなどだ。Acer、hp、LenovoのゲーミングPCでも同様のものがある。

原因は先述の NVIDIA Optimus で、仮にコントロールアプリケーションで、手動でGPUを使うように指定していたとしても、出力する際にCPU経由になってしまうので映像が出ない。

↑この辺の設定変更では対処不可能

 

対処法

しかし、この問題は、正確に言うとスペックの問題ではない。
あくまでもディスプレイの問題でしかない。

更に、PCのディスプレイは高性能GPUで処理しても、CPU経由で出力されてしまうが、外部ディスプレイはこの限りではない。

つまり、形式上、外部ディスプレイ(USB電源ではなく、別電源のものに限る)を経由して、そこからRiftへHDMIで出力してやれば使えるということになる。

ここで使えるのが、HTC VIVEのLinkBoxだ。

このLinkBoxは外部電源HDMIアダプターとして使えば、Riftの映像出力を行う事ができる。

 

必要なもの

・HTC VIVEのLinkBox(家電量販店で3700円ぐらい)
・HDMIケーブル(1.4 または 2.0 もしくはその上位互換)
・HTC LinkBoxの電源(12V 1.5A 出力のもので端子の形が3.5×1.35mmの物。1000円ぐらい)
※↑LinkBoxを単体で買うと電源ケーブルも何もついてこない。


 

あってもなくてもいい物:
USB 3.0ケーブル

 

繋ぎ方


・LinkBoxのオレンジっぽい側(上から見たらVRって書いてる方)にRiftのHDMIを刺す。

・裏のグレーっぽい側(PCって書いてる方)にHDMIケーブルを刺して、PCと繋ぐ。

・LinkBoxの電源をコンセントに入れる。

USBはRiftのUSBケーブルをオレンジにつなぎ、PCとLinkBoxを更に別のUSBケーブルでつないでもいい。
ただ、別のUSBケーブルが無ければ、RiftのUSBケーブルを直接PCに突っ込んでもOK。
つまり、HDMIだけ経由すればOK。

Oculus Rift のVR体験は本当に素晴らしいので、面倒くさがらずに是非試してみてほしい。

facebookのタイムラインのdivにdisplay:none;のCSSを適用する方法

スマホサイトなどで非表示にしたい場合

Facebookのタイムラインをホームページなどに埋め込んだ時、例えば、スマホでのみ非表示にしたい場合などがある。
ただし、単純にCSSに display: none; と表示しても効かなかったりする。

非表示にする場合は、スタイルシートに下記を記述すること。
 
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
display: none;
}
 
そのままコピペでOK。

 
 
スマホでのみ適用する場合は、レスポンシブにするといい。下の関連記事を参照。

関連記事:
facebookタイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

Facebookのタイムラインを埋め込むと横幅が660px固定になる

 
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
 
 
これはCSSでうまく対応できるので、紹介しておこう。

 
 

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

 

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
 
 

実はFacebookは自動でスマホ向けに最適化される

 
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
fb-responsive1
↓↓↓↓スマホ表示↓↓↓↓
fb-responsive2
 
 
 
 
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
 
 

「data-width: auto;」は無効化されるので、その対策

 
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
 
これは、下記をスタイルシートにコピペでうまく対応できる。
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

 
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
 
もちろん90%でも80%でもいい。
 
 
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){

}

 
 
メディアアンカーを使わないなら、
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事:
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。