ひとりぶろぐ

価値ある情報をユーザー視点で発信するブログ

[今度はPHP]全天球撮影デジタルカメラRICOH THETAの画像をブログに埋め込む方法

      2013/11/18

ひとりぶろぐのmoyashi (@hitoriblog) です。

2013.11.8、間もなく発売、全天球撮影デジタルカメラRICOH THETA。

予約した人には、もう届き始めているみたいですね。

しかし、RICOH公式では、THETAで撮影した全天球画像をブログに埋め込む方法を提供していません。

ブログに埋め込めた方がTHETAの魅力が伝わる機会が増えて、販売につながると思うんですがね。

RICOH THETAの全天球画像をブログに埋め込むためのPHPスクリプトを作った

ブログへの埋め込み方法をRICOH公式で用意する動きがあるんでしょうか? ない? 分からない? とりあえず勝手に用意してみました。

先日、RICOH THETAの画像をブログに埋め込む方法をブログに書きましたが、HTML5版だと見られないブラウザがかなりあったので、やっぱりFLASH版も使うようにしてみました。公式同様、User Agentを見て、FLASH版とHTML5版のどちらを出力するか自動分岐するタイプです。

また、都度生成したhtmlを別途アップロードしないといけない作りもどうかと思ったので、PHPにしてみました。

これを使うと、こんな感じでブログに埋め込めます。

このRICOH THETAで撮影した全天球画像ブログ埋め込み用PHPスクリプトには、SphereGateという名前を付けてみました。(続きは[Read More]から)

SphereGateの設置方法

Webサービスとして提供したいところですが、そこまでする義理もないし結構グレーな方法なので、各自のサーバに自己責任で設置してください。

SphereGateのグレーさ

SphereGateはグレーです。

  • theta360.com上にあるJS / CSSへの直接リンクを含む
  • theta360.com上にある画像への直接リンクを含む
  • 都度theta360.comにアクセスするため、負荷をかけることになる
  • テンプレートはtheta360.comから切り出したもの

PHPの動作環境を用意する

WordPressが動いているサーバだったら大丈夫かと思いますが、サーバ上にPHPの動作環境を用意してください。

PHP 5.3.xでの動作を確認しています。


変更履歴

  • 2013.11.12 – Ver.0.2: URL判定の正規表現を修正

ダウンロード/設置

以下のアーカイブをダウンロードしてください。

spheregate-0.2.tar.gz

サーバ上のPHPが実行できる場所に解凍して設置。

screenshot 13 11 06 16 50

ファイル名 説明
css_3d_flash.php theta360.comからcss_3d_flash.jsを取得し、埋め込みに使えるよう一部改変する(theta360.comにあるJSを改変したものを自サバに設置することを回避するために作成)
goutte.phar PHP用WebスクレイパーGoutte
sphere_gate.php SphereGate本体。UA判定してFLASH/HTML5いずれかのテンプレートを出力。出力の際にurlパラメータで指定されたページから使用画像を取得し、テンプレートに埋め込み
template_flash.html FLASHのテンプレート
template_html5.html HTML5のテンプレート

サーバによっては、css_3d_flash.php、goutte.phar、css_3d_flash.phpに実行権を付ける必要があるかもしれません。

基本的な設定

sphere_gate.phpをエディタで開き、MY_HOSTを自分のサーバにものに変更。

SphereGateは、ほかのサーバから使われにくくした方がよかろうと、一応リファラで制約を加えています。

直リンも拒絶しています。無論、リファラを偽装されたらダメですけれど。

// ------------------------------
// User Define
// ------------------------------

	define('MY_HOST', 'http://hitoriblog.com/');

// ------------------------------

ブログへの埋め込み

ブログへの埋め込みコードはこんな感じです。

「http://hitoriblog.com/theta/sphere_gate.php」を実際の設置パスに変更。

「https://theta360.com/spheres/samples/16a6e7ea-3abf-11e3-89c4-08002741016d-1」の部分を自分の埋め込みたいtheta360.com上の全天球画像のURLにします。URLエンコードした方がいいかも?

<div align="center">
<iframe seamless src="http://hitoriblog.com/theta/sphere_gate.php?url=https://theta360.com/spheres/samples/16a6e7ea-3abf-11e3-89c4-08002741016d-1" style="width:500px; height: 350px; margin-top:15px; margin-bottom:15px;">
</iframe>
</div>

<p><strong>出典:</strong> <a href="https://theta360.com/spheres/samples/16a6e7ea-3abf-11e3-89c4-08002741016d-1" target="_blank" rel="nofollow">16a6e7ea-3abf-11e3-89c4-08002741016d-1</a></p>

一度形を決めたら「https://theta360.com/spheres/samples/16a6e7ea-3abf-11e3-89c4-08002741016d-1」の部分だけを差し替えていけばOKです。

カスタマイズ(サイズの変更)

SphereGateは、width 500px、height 350pxで決め打ちにしています。

これを好きなサイズにカスタマイズする場合は以下を変更します。

widthとheightの指定をtemplate_flash.htmlとブログ埋め込みコードで合わせる必要があります。

template_flash.html

template_flash.htmlの500px、500、350px、350の4個所を変更。

screenshot 13 11 06 17 14 3

ブログ埋め込みコード

ブログ埋め込みコードの500px、350pxの2個所を変更。

screenshot 13 11 06 17 03 2

SphereGateの問題点

勝手にスクロールしちゃう

SphereGateはiframeで埋め込む形を取っています。

ページ内の最後のiframeまで勝手にスクロールするブラウザが多いようです(抑制方法をご存知の方がいらっしゃったら教えてください)。

リンク切れで動かなくなる可能性が高い

各種リソース(JS / CSS)をtheta360.comに直接リンクしているので、theta360.com側のファイル名の変更などの影響を受けて動かなくなる可能性が高いです。

レスポンシブデザインではない

width、heightが決め打ちなので、スマートフォンでの表示がやや辛い。

改良希望。

ライセンス

SphereGateはPHP用のスクレイパーGoutteを含みます。

https://github.com/fabpot/goutte

GroutteのライセンスはMITなので、別に大したものじゃないですがSphereGateもMITとします。

 - Android, iOS, iPad, iPhone, RICOH THETA, デジタルカメラ