Copyright©Since2013-2014 NITTO Co.,Ltd. All rights reserved.

  • 株式会社ニットー

製品の発案、装置の設計、製作を担当

事業内容 :プレス金型製作、板金加工、機械部品加工、設備製作

http://nitto-i.com

中小製造業とIT企業の異業種連携による製品開発

【開発チーム】

  • 株式会社日本コンピュータ開発

アプリ、システム開発を担当

事業内容 :業務の改善・業務へのIT導入支援

http://www.nck-tky.co.jp

3D-360°PhotoStyle Qulmil

iPhoneを使った3D-360゚フォトスタイル

iPhoneと回転アームにより、

被写体の360°回転画像が手軽に撮影できる製品です

  • Home

  • News

  • Gallery

  • Shop

  • Q&A

  • Thanks

  • Contact

  • +

    くるみる

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

    工程4へ移動
     
     
     

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

    クライアントソフトをダウンロード
    WEB版Dropboxを使用する

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

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