Google VR viewを利用して360度画像を埋め込む

2016年がVR元年と言われて早1年半以上が経ちました・・・。
2016年の1月にPC向けVRゴーグルの「Oculus Rift」のプレオーダーが開始され、3月末から「Oculus Rift」発売(初回出荷)が始まり、VR用デバイスが身近になる第一歩を踏み出しました。その後「HTC Vive」や「PlayStation VR」といったハイエンドVRHMD(ヘッドマウントディスプレイ)が発売され、どんどんとハードウェアが出てきています。
まだまだ一般化したとは言えない状況ですが、今後はVR(仮想現実)やAR(拡張現実)、またMR(複合現実)やSR(代替現実)といった方向が加速することは容易に想像できます。

VR(仮想現実:Virtual Reality:バーチャルリアリティ)
AR(拡張現実:Augmented Reality:オーグメンテッドリアリティ)
MR(複合現実:Mixed Reality:ミックスドリアリティ)
SR(代替現実:Substitutional Reality:sa:サブストゥショナルリアリティ)

そんな中で表題に話しを戻しますと、今回web上360度画像や動画を埋め込むための方法をご紹介したいと思います。
360度の画像はFacebookとInstagramの人気SNSも対応しており。かなり身近に感じることができるようになりました。
また、360度の全天球カメラと言えば・・・「RICOH THETA」が有名だと思いますが、その「THETA」の新製品が9月30日に発売予定となりました。
今後ますます360度の画像が増えてくる状況の中でwebサイトに手っ取り早く360度画像(動画)を埋め込みたいと思います。

どんな感じなるかはとりあえず下記のデモをご確認下さい。
デモはこちら

では、早速始めていきたいと思います。
まずはgoogleさんのサイトを確認していきましょう。

Google VR View for the Web Documentation

このサイトに沿って進めていきたいと思います。
3ステップで完了です。

英語は苦手な人はgoogle chromeの翻訳機能を使ってみてください。
ページ上で右クリックを押すとウィンドウが出てきて、その中の項目に「日本語に翻訳(T)」と書かれた部分があるのでそこをクリックするとオッケーです。

ではDocumentationに沿ってまずは下記のコードをHTMLの中に埋め込みます。

ステップ1

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

ステップ2
次に画像を表示したい箇所に下記のコードを入力。
divタグの中に文字などは入れなくて大丈夫です。

<div id="vrview"></div>

ステップ3
最後に下記のscriptを読み込ませておげれば完了です。

<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      width: '100%',//横幅の指定
      height: 300,//高さの指定
      image: '任意の画像のパスを指定',
      is_stereo: true //stereo画像を指定の場合はこれを指定。Monoの場合は不要
    });
  }
</script>

以上の3ステップで完了です。

Google VR viewに対応しているフォーマットは下記のページでご確認下さい。
対応フォーマットの確認はこちら

MonoとStereoの指定を間違わないように気をつけて下さい。
defaultはMonoが指定されています。Stereoを利用する際にはis_stereo: trueを忘ないで下さい。

上記方法でエラーが出る場合は下記2点が間違っている可能性があります。
1.パスの設定が間違っている。
2.画像形式が対応していないフォーマットになっている。
  またサイズが規格に合っていない。(※画像が小さい。アスペクト比が間違っている。等々)

また上記を見直してもエラーが出る場合は
サーバーがクロスドメインを許可していない可能性があるので
その場合は自身のサーバーで出力してあげて下さい。

GoogleのVR View Githubよりzipファイルをダウンロードすることができます。
ダウンロード先はこちら

上記サイトにアクセスしたら右側にある緑色のボタンで『Clone or download』と書かれたボタンがあるので
そこから「Download ZIP」を選択するとダウンロードすることができます。

ファイルがダウンロードできたら、解凍してサーバーの任意の場所に保存して下さい。
そしてステップ1で指定したvrview.min.jsへのパスを変更したらオッケーです。

以上で完了になります。

※360度動画も埋め込む事は可能ですが、容量が大きくなるので読み込みに時間がかかる場合があります。

ホームページを作ってみよう第1回

ホームページ(webページ)作成の流れ

当教室ではホームページ(ウェブ)制作用のYouTube動画をアップしております。そのアップ済みの動画のテキストがほしいと御要望がありましたのでテキスト化して公開したいと思います。

ご興味ございまいたら動画と合わせて下記も勉強にご活用下さい。無料体験を受講された方には紙ベースのものをお渡ししております。

無料体験のお申込はこちら

ではまず、webページを制作していく上で必要なものが下記になります。

  1. テキストエディタ
  2. ブラウザ
  3. その他(FTPソフト、画像編集ソフト、サーバー等)

後はHTMLとCSSに基本的な知識があれば大丈夫です。

現在は様々なサービスがありHTMLやCSSの知識がなくてもwebページを作る事は可能です。しかし、HTML+CSSはwebページを作る上で基本中の基本なのでウェブページのビルダーソフトやwebページ制作用サービスを利用される方も是非知っておいていただきたい知識になります。

特にHTMLテンプレートやwordpressなどのサービスを利用してweb制作をお考えの方などは要注意です。こういった基本を抑えずに作ろうとして結局壁にぶつかって挫折した。と言う声を当教室の生徒さんからも聞きます。

HTML+CSSの基本は決して難しいものではないので初めから諦めずに挑戦してみて下さい。

では上記について順番に説明です。

1.テキストエディタとは・・・

テキストエディタとは文字情報(テキスト)のみのファイルを作成・編集・保存するためのソフトウェアのことです。例えば、Windowsのメモ帳やMacのテキストエディットなどがあります。Web作成ではコーディングをする際に使用します。メモ帳やテキストエディットを使用してコーディングをすることも可能ですが、利便性等々の面からもその他のソフトが使われます。
例・・・Windowsの場合はTeraPad.サクラエディタ、EmEditor等
Macの場合 mi,CotEditor等
その他にも有料で高機能なものなど多数あります。
データを保存する際には文字コードの選択を忘れないようにして下さい。
文字コードは「utf-8」を選択下さい。
また「UTF-8」(BOM)ありと、「UTF-8N」(BOMなし)が選択できる場合は「UTF-8N」を選択して下さい。

ブラウザ(ウェブブラウザ)とは・・・

ブラウザとはサーバーと通信してデータを取得し、データを解析して、表示させるものです。ブラウザはインターネットをする人にとっては身近なものなのですぐにイメージつくかと思います。インターネット=ブラウザ(Internet Exploere)と思われている方もいらっしゃいますが​ブラウザにはいくつかの種類があります。
代表的なブラウザとしては以下のようなものがあります。

  • Mozilla Firefox
  • Google Chrome
  • Internet Exploere
  • Opera
  • Safari

HTMLとは・・・​

さて続いてはHTMLです。名前を見ただけで拒否反応を起こす人もいるかもしれませんがHTMLとはHyperText Markup Languageの略でWebページを作成するために開発された言語です。​インターネット上に公開されているウェブページのほとんどはこのHTMLで作成されています。​
WEBページを作成する上でHTMLがまず土台となります。​テキストエディタなどで作成したHTMLのコードを保存するときは拡張子を「.html」として保存しなければなりません。​保存したHTMLファイルをダブルクリックするとブラウザで開くことができます。​

HTMLの基本構造

HTMLのコードを書いていくにあたって最低限のルールがあります。これが書けていないと、きちんと表示されなかったり、文字化けして表示されたりすることになります。​
<html>~</html>で全体を囲ってあげる。​これはこの範囲内はHTML文章であることを示します。
始めにDOCTYPE宣言をする。​DOCTYPE宣言とはHTMLのバーションと文書の型を定義してあげることです。
<head>~</head>内にページの設定情報を記述する。​ 例)<meta charset=””>,<title>~</title>等​
<body>~</body>内にブラウザに表示される内容を記述する。
このあたりの書き方は決まっているので毎回毎回打ちこまなくてもコピペして使いまわしできます。
下記をコピペして使っていただいても結構です。

HTMLの基本構造コード例

<!DOCTYPE html>​
 <html lang="ja">>
  <head>​
   <meta charset="utf-8">​
   <title>WEBページを作ってみよう</title>​
  </head>​
    <body>​
     このbody内に書かれて内容(コンテンツ)が​
   ブラウザに表示されます。​
    </body>​
</html>

HTMLタグの要素

HTMLタグとは<タグ名>の記号に囲まれた半角英数字のことです。​
この中のタグ名が命令となってHTML構造を作っていきます。​
基本的にタグは開始タグ(<タグ名>)~終了タグ()で囲まれています。終了タグがないものもあります。​
また、この開始タグと終了タグで囲まれた全体のことを「要素」といいます。​

基本的なHTMLタグの種類と意味

HTMLのタグには種類によってそれぞれ意味があり、適切に使うことが求められます。
基本的なものが下記になります。

HTMLの基本構造を定義するためのタグ

タイトルをつけるためのタグ

セクションを表すためのタグ

テキストに意味付けをするためのタグ

実際にタグの意味をふまえながらコードを書いてみよう

下記が実際にタグの意味を考慮しながら書いたコード例です。始めて見る方は・・・難しいそう。と感じるかもしれませんが、基本的に下記の内容はテンプレートなどでも既に書かれているものになるのでどういった意味かと言うことさえ抑えていれば大丈夫です。まずはなんとなくでも理解できることが重要です。

<!DOCTYPE html>​
 <html lang="ja">​
  <head>​
   <meta charset="utf-8">​
   <title>タイトルを書く</title>​
  </head>​
  <body>​
         <article>内容が独立したコンテンツを入れる ​
          <header>トップの見出しやロゴ、ナビゲーションなどを入れる。​
              <h1>大見出しを入れる</h1>​
                   <nav>​
              ナビゲーションを入れる​
                   </nav>​
          </header>​
             <section>文書中の章や説などのまとまりを表す。見出しなどをいれる。​
          <h2>見出し</h2>​
          <p>段落を表す</p>​
             </section<​
             <aside>メインのコンテンツとは関連の薄いコンテンツ(内容)を表す。​
          <p>段落を表す</p>​
             </aside>​
             <footer>主にそのページの著者についての情報や著作権表示、ページリング等​
                  <adress>連絡先に関する情報</adress>​
              <small>著作権表示</small>​
             </footer>​
         </article> ​
     </body>​
</html>​

webページ制作の流れ

最後にwebページを作るうえでの基本的な流れを見ていきましょう。すぐにコードを書き始めるのではなくまずはどういったサイトを作りたいか計画をたてることから始まります。

それぞれの詳細については今の所、特に意識しなくて結構です。
では第二回目以降はCSSの基本やもうちょっとHTMLについても勉強していきましょう。

さくらインターネットのレンタルサーバーにEC-CUBEをインストールしてみる。

こんにちは、WEB事業部です。

今回は実用的な内容で表題の通り、さくらインターネットのレンタルサーバーにEC-CUBEをインストールする方法について書いていきます。ちなみにさくらのレンタルサーバーはスタンダードプランを使用します。

さくらインタネットのホーム画面

サーバーによっては簡単インストール機能がついているものもありますが、さくらサーバーの場合少しややこしいので、順を追って説明していきたいと思います。

では、まず初めにさくらのレンタルサーバの「サーバコントロールパネル」でECcube用にデータベースを作成します。データベース名とパスワードを設定するだけで簡単にできます。下記の画像のような感じです。データベースの文字コードは「UTF-8」にして下さい。上記完了したらデータベース作成をクリック。これでデータベースの作成が完了しました。
さくらサーバーのコントロールパネル

次に「EC-CUBE」のダウンロードです。
EC-CUBEの公式サイト(https://www.ec-cube.net/)から、ファイルをダウンロード。ファイルをダウンロードする際にはメンバー登録が必要です。ちなみにメンバー登録は無料ですぐできます。
EC-CUBEのホーム画面
ダウンロードが完了したら、ZIPファイルになっているので、ファイルを解凍しておきます。

さて、ここからが問題です、普通にFTPを使ってファイルをアップロードするだけではうまくできません。
次のステップが必要です。

  1. htmlフォルダ内にある.htaccessを削除
  2. htmlフォルダ内のdefine.phpを修正。3行目を書き換える。※詳細は下記参照
  3. htmlフォルダ内にあるファイルすべてをdataフォルダと同一階層に移す。
  4. eccubeフォルダ内のファイルをFTPでアップロードする。
  5.     

  6. さくらサーバーのコントロールパネルでphpの設定編集。magic_quotes_gpc = Offにする。

さて、上記について詳しく見ていきます。1番はそのままなので省いて、2番から見ていきます。

2番の「htmlフォルダ内のdefine.phpを修正。3行目を書き換える。」ですが、この作業は3番の作業と関連していて、この作業を行っていないと、インストールした際のURLがhttp://ドメイン/html/になってしまい、意図したURLを表示できなくなってしまいます。ではこの作業についてですがdefine.phpの3行目を下記のように変更してください。
変更前:define(“HTML2DATA_DIR”, “../data/”);
変更後:define(“HTML2DATA_DIR”, “/data/”);
これだけで完了です。

次に3番と4番も書いてある通りですので、詳細は省いて5番にいきます。
5番は「さくらサーバーのコントロールパネルでphpの設定編集。magic_quotes_gpc = Offにする。」ですね。
さくらサーバーのコントロールパネルにログインして左のメニューにあるPHP設定の編集をクリックしてください。
画面が移行して真ん中に入力することができる画面が出てくるかと思います。この中に「magic_quotes_gpc = Off」と入力して、保存するを押下すれば大丈夫です。

これでほぼ完了です。

http://ドメイン/install/にアクセスして画面の指示に従って進めてください。

ECサイトの設定
データベースの設定等を行えば完了です。
EC-CUBEのデータベース設定画面

最後に無事インストールが完了したらinstallフォルダ内のindex.php ファイルは削除してください。

以上で完了です。

指定したURLにアクセスして下記のような画面が出てくれば完了です。

ECCUBEトップ画面

お疲れ様でした。

今回参考にさせていただいたブログはこちら
yusync.com/

html preタグを使用した際に枠外にはみ出さないようにする方法

今更ですが、こんな記事を書いて見ました。

表題にあるとおりHTMLコードを記述していて preタグを使用した際にpreタグを使用した部分だけ指定したwidthからはみ出て困ったことがありませんか?

特にPCでは問題なく表示されていてもモバイル端末で見たときにこんな現状がなっている人がいるんではないでしょうか?最近ではスマートフォンで閲覧する人が増えてきているのでモバイルに対するきちんとした対応は必須といえます。

今回はそんな場合の対策方法について記載します。

対策は簡単なもので下記のコードをcssで設定してあげるだけです。

今回はyoheim.netさんで紹介されているコードをそのまま引用させていただきました。

pre {
    white-space: pre-wrap;         /* CSS3 */
    white-space: -moz-pre-wrap;    /* Firefox */
    white-space: -webkit-pre-wrap; /* Chrome, Safari */
    white-space: -o-pre-wrap;      /* Opera 7 */
    word-wrap: break-word;         /* IE 5.5+ */
}

ワードプレス:ワードプレスアドレスを変更してしまった時の対応

こんにちは、WEB事業部です。

久しぶりの更新になります。サイトのリニューアルに手を取られていて更新が滞っていました・・・。

さて久しぶりの更新内容ですが、今日はちょっと専門的な話しになりますが、備忘録のためこんな題材を用意しました。

「ワードプレスでワードプレスアドレスを変更してしまった時の対応」
ウェブページ(ホームページ)を作った事のある人は一度はワードプレスと言う言葉を耳にしたことがあるのではないでしょうか?
(さらに…)

スティーブ・ジョブズは子どもたちの電子機器の利用を厳しく制限していた。

こんにちは、WEB事業部です。

さっそくですが、あのスティーブ・ジョブズは子どもたちの電子機器の利用を厳しく制限していた。って知ってしましたか?

(さらに…)

Mac(Apple社)を対象としたマルウェア「iWorm」の感染が拡大中

こんにちは、WEB事業部です。

Mac(Apple社)を対象としたマルウェア「iWorm」の感染が拡大しています。その数は実に18,000台以上にのぼるとも言われています。

(さらに…)

ホームページ(Webページ)を作ってみよう!~教育セミナー用資料配布~

こんにちは、WEB事業部です。

弊社ではホームページ(Webページ)作成セミナーを主催しております。

(さらに…)

Googleが著者情報プログラム(rel=”author”)を完全廃止

こんにちは、WEB事業部です。

Googleが著者情報プログラム(rel=”author”)を完全廃止したようです。
正直大変驚いています・・・。

2014年5月12日のブログ記事で今後は著作情報の重要性が増すとご紹介させていただきました。というのも、Googleの品質管理チームの責任者であるマット・カッツ氏が著者情報(オーサーランク)の重要性について語った動画を2014/5/5にYouTubeにあげていたからです。
(さらに…)

You Tube動画からGIF動画(アニメ)を作る!!「gifyoutube」サービス

こんにちは、WEB事業部です。

今日はYou Tube動画からGIF動画(アニメ)を作る!!「gifyoutube」サービスについて見ていきたいと思います。

最近ではSNSでもGIFアニメをみかける機会が増えてきました。
GIFアニメはいざ自分で作ろうと思うと以外と手間なものです。
そんな時にこのサービスはおそらくもっとも手軽が方法ではないでしょうか!!!

私自身このサービスを知ったのは「ねとらぼ」さんの記事からですので、元記事のリンクを貼らせていただきます。
「ねとらぼ」さんの元記事はこちら

さっそく私自身も「ねとらぼ」さんのサイトを見ながら「gifyoutube」でYou Tube動画からGIFアニメを作成してみました。

使用方法は大変簡単でしたが、回線の影響かエラーメッセージが何度か出て数回やり直しをしました。
回線の状況によって使い勝手は大きく影響しそうですが、快適な環境であれば大変便利なサービスであることは間違いないです。

photoshopで動画からGIFアニメを作ろうと思った場合の時間を考えると大幅は時間短縮になります。

是非一度試してみて下さい。

blog19
私が「gifyoutube」から作ったGIFアニメがこちら

top