top of page

WEBサイトへの掲載方法

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

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

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

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

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

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

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

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

<iframe width="960px" height="720" src="http://サーバのURL/360°回転画像のフォルダ名/viewer.html" scrolling="no" frameborder="0"></iframe> 

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で扱う文字コードに対応した解凍ソフトをダウンロードする

※撮影画像のタイトルに英数字のみを使用している場合は、Windows標準の解凍方法で問題ありません

Dropboxで扱う文字コードとWindowsで扱う文字コードは種類が異なります。

そのため、360°回転画像のタイトルに日本語を使用している状態で、Windows標準の解凍方法を使用すると、360°回転画像のファイル名に文字化けが発生します。

これを回避し、正しいフォルダ名で解凍するためには下記の方法を実施してください。

■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サーバにアップロードする

Anchor 1
Anchor 2
Anchor 3

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

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

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

bottom of page