« 新「TiVo」はロゴ/マスコットが変更? | トップページ | 電波時計(RM-219)用JJYモールス音発生装置を作ってみました »

2016年10月 8日 (土)

Cardboard カメラで撮ったVR画像をブログに埋め込んでみました(Roundme版)

 以前、スマホ(SH-01F)に入れた”Cardboard カメラ”で撮影したVR画像を"QUICKVR"というサイトを使って表示してみたことがあるのですが、当方の環境(ThinkPad X230, Windows 7, 64bit)では以下の理由で一寸使いにくいです。

 ・IE11で表示できない。Chrome, OperaはOK。
 ・リンクを張ることはできるが埋め込みはできない。
 ・当方の設定が間違っているのかもしれませんが、表示が一寸変?

    QUICKVR
    http://quickvr.xyz/

  VR表示サンプル
    東京総合車両センター 一般公開2016
   http://quickvr.xyz/%E6%9D%B1%E4%BA%AC%E7%B7%8F%E5%90%88%E8%BB%8A%E4%B8%A1%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC-%E4%B8%80%E8%88%AC%E5%85%AC%E9%96%8B2016/

 ブログに埋め込み可能な方法を探していたら、"Roundme"というサイトがありました。

  Roundme
  https://roundme.com/

  "Embed Roundme panoramic tours on other websites"と書いてあるので、ブログ(ココログ)への埋め込みもできるような感じです。

 試してみたところ、VR画像をブログに埋め込むことができるようになりました。
 
 概略の流れは以下のようになります。

 (1)"Cardboard カメラ"で撮影してVR画像を生成。
 (2)VR画像をPCに転送。
 (3)VR画像をRoundmeにアップロード。
 (4)埋め込みコードに変換。
 (5)埋め込みコードをブログに貼り付け。

 (1),(2)はスマホ(SH-01F)側の作業、(3)~(5)はPC(ThinkPad X230)側の作業になります。

 具体的な作業の流れは以下の通りです。
   なお、スマホ(Android 4.4以上)には"Cardboard カメラ"が既にインストールされているものとします。また、スマホとPCには"Dropbox"が既にインストールされているものとします。

 (1)"Cardboard カメラ"で撮影してVR画像を生成。
   (1-1) スマホの"Cardboard カメラ"アプリを起動。
  (1-2)右下のカメラアイコンを押す。
  (1-3)撮影開始方向にカメラを向けて赤ボタンを押す。
  (1-4)水平にゆっくり(1rpm程度)パンする。左右方向どちらでも可。撮影量(撮影位置?)がバーで表示される。
     360度分を撮影すると自動的に撮影が終了し画像処理と画像保存が行われ、VR画像リストに追加される。
Cardboard_s


 (2)VR画像をPCに転送。
  (2-1)画像リストの中から埋め込みたい画像をタップする。
  (2-1)右上のメニューアイコン(縦三点)をタップする。
  (2-3)「ギャラリーで開く」をタップする。
  (2-4)「アルバム」をタップする。
  (2-5)「共有」をタップする。(共有アイコンが見えないときは画面を適当にタップ)
  (2-6)「Dropboxに追加」をタップする。
  (2-7)Dropboxの画面の右下の「追加」をタップする。
     ここまでのスマホ側の作業で、VR画像がDropboxにアップロードされる。
     以下はPC側の作業。
  (2-8)PCのDropboxを開く。
  (2-9)目的のVR画像(例えば"IMG_20160827_144553.vr")をデスクトップに移動する。

 (3)VR画像をRoundmeにアップロード。
    (3-1)Roundme(https://roundme.com/)のユーザ登録を行う。(安全性は判りません)
  (3-2)"CREATE SPACE"をクリック。
    (3-3)デスクトップのVR画像をRoundmeの画面上にDRAG AND DROPする。
  (3-4)必要に応じて説明等を入力。
  (3-5)入力データをSAVEする。

 (4)埋め込みコードに変換。
    (4-1)画面右上の"More Functions"(縦三点)をクリックする。
    (4-2)画面右の"Share & Embed"をクリックする。
Embed

    (4-3)サイズを設定すると、以下のような、サイズに応じた埋め込みコードが生成される。当方の場合はカスタムで380x214。
<iframe width='380' height='214' src='https://roundme.com/embed/72295/179019' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 (5)埋め込みコードをブログに貼り付け。
   (一般的なお話なので詳細説明省略)

【VR画像埋め込みサンプル#1】
東京総合車両センター 一般公開2016


 左上の"Roundme"をクリックすると、フルスクリーンで見ることができます。
 つなぎ目が目立ちます。
 主被写体を外して”Cardboard カメラ”の撮影を開始した方がいいかもしれません。

【VR画像埋め込みサンプル#2】
小田急海老名駅

 

無手勝流でやったので、おかしなところや無駄なところがあると思いますが、とりあえず埋め込みできるようになりました。

【参考外部リンク】
  Cardboard カメラ - Google Play の Android アプリ
  https://play.google.com/store/apps/details?id=com.google.vr.cyclops&hl=ja

    Dropbox
    https://www.dropbox.com/ja/

    Dropbox - Google Play の Android アプリ
    https://play.google.com/store/apps/details?id=com.dropbox.android&hl=ja

|

« 新「TiVo」はロゴ/マスコットが変更? | トップページ | 電波時計(RM-219)用JJYモールス音発生装置を作ってみました »

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/117933/64313830

この記事へのトラックバック一覧です: Cardboard カメラで撮ったVR画像をブログに埋め込んでみました(Roundme版):

« 新「TiVo」はロゴ/マスコットが変更? | トップページ | 電波時計(RM-219)用JJYモールス音発生装置を作ってみました »