3D-360°PhotoStyle Qulmil

WEBサイトへの掲載方法

1, WEBサイトに掲載したい360°回転画像のファイルを、くるみるのアプリから「Dropbox」にアップロードする

※事前にアプリ内でDropboxの接続設定を行う必要があります。

※アップロードされたファイルは、Dropbox内の「アプリ」->「Qulmil」配下に格納されます。

2, Dropboxにアップロードした360°回転画像のファイルをパソコン上にダウンロードする

※くるみるアプリ内でのダウンロード操作ではありませんのでご注意ください。

4, ブラウザソフトにてアップロードしたフォルダ配下の『viewer.html』にアクセスする

このファイルへのURLをコピー&ペーストすることで、FacebookやTwitterなどで360°回転画像をシェアすることができます

下記6つの工程を実行していただくことで、撮影した360°回転画像をSNSで共有や、WEBサイトに掲載することができます

5, 表示されるページの下部にある『埋め込みコード』ボタンをクリックして表示されるコードをコピー

モバイル端末で表示している場合、『埋め込みコード』ボタンは表示されませんので、PCのブラウザソフトを用いて表示してください

6, 360°回転画像を表示したいページのhtmlファイルにコピーしたコードをペーストして、表示幅や高さを調節する

※1

インラインフレームの幅(width)と高さ(height)は、掲載する360°回転画像の大きさを超えないようにしてください。

 

※2

インラインフレームのサイズは、必ず「幅 : 高さ=4 : 3または3 : 4」の割合を維持してください。

回転画像撮影時のiPhoneの向きにより、高さと幅の設定を合わせる必要があります。

上記以外の割合で設定すると、360°回転画像を表示した際に余白が発生する可能性があります。

 

※3

インラインフレームを使用している場合、FacebookのシェアボタンとTwitterのツイートボタンは表示されません。

 

サンプルコード

2-1 WEB版Dropdoxにアクセスする

工程2および工程3は、Dropboxにアップロードした360°回転画像のファイルをお使いのPCに取り込み、お持ちのサーバにアップロードする手順です。方法は下記の2通りあります。

【Dropboxのクライアントソフトをダウンロードして行う場合の手順】

■事前準備

・Dropbox公式ホームページ(https://www.dropbox.com/)にアクセスし、Dropboxのクライアントソフトを

ダウンロードする

・その後ダウンロードしたDropboxのクライアントソフトを起動し、くるみるのアプリで設定しているDropboxアカウントでログインをする

① Dropboxをダウンロード

② Dropboxを起動

③ Dropboxアカウントでログイン

2, ダウンロードしたDropboxのクライアントソフトを起動し、アップロードした360°回転画像のファイルをローカル環境(デスクトップ等)にコピーする

【WEB版Dropboxを使用する場合の手順】

3, コピーした360°回転画像のファイルごとお持ちのWEBサーバにアップロードする

2-3 ダウンロードしたい360°回転画像のファイルを右クリックし、メニュー欄から「ダウンロード」をクリックする

3, ダウンロードした360°回転画像のファイルを解凍し、解凍した360°回転画像のファイルごとお使いのWEBサーバにアップロードする

注)WindowsのPCをお使いの方

3-2 ダウンロードした解凍ソフトで、360°回転画像のファイルを解凍する

3-1 Dropboxで扱う文字コードに対応した解凍ソフトをダウンロードする

■Dropboxで扱う文字コードに対応した解凍ソフト

・Cube ICE (http://www.cube-soft.jp/cubeice/)

・MelTex (http://www.vector.co.jp/soft/winnt/util/se406754.html)

・その他の文字コードUTF-8に対応している解凍ソフト

3-3 解凍した360°回転画像のファイルごとお使いのWEBサーバにアップロードする

※この操作によりコピーした360°回転画像のファイルが破損しても、再度Dropboxから360°回転画像のファイルをコピーし利用することができます。

※360°回転画像はzipファイル形式で出力されます。

2-2 くるみるのアプリで設定しているDropboxアカウントでログインをする