デジカメ（THETA SC）シータ用ライブラリ

シータ表示ライブラリ
theta360.com
ポータブル・パノラマプレイヤー
thview.js使ってhtmlで表示

シータ表示ライブラリ

シータで撮った全天球画像をＨＰにアップロードして貼り付けたいが、いろいろと制約が多い。問題点としては以下。

必ず自分が写り込んでる。消さなきゃ
そのままの画像は間延びしている

最初の課題は、自分が写ってる。これはまあソフトでマスクすればいいのだが、普通に画像編集ソフトでマスクをかけると、写真と一緒に保存されているExif情報とかいうものが飛んでしまい、画像の位置とか上下とかそんな情報がなくなって、いろいろ都合が悪くなるらしい。

Thetaのスマホ用アプリだと、編集機能があってこちらで作業を行うと問題なく処理できるようなのだが、スマホで画像編集って面倒。ちまちまとはやってられない。

そんな悩みを抱えているひとはいるようで、exif情報を丸ごと抜き出したり書き換えたりするソフトがあった。

RICOH THETA を買ったのでexif移植ソフトを作成 – 記録

コマンドライン版なのだが、explorer上で操作可能となるバッチファイルも用意してくれているので、作業はそんなに難しくは無い。

作業前にまずはこのソフトで事前exif情報を取得しておく。作業としてはjpgファイルを「00_exif_cutout.bat」に放り込む。そして、[画像ファイル名.jpg.app1]というファイルが出来上がればＯＫ。

そのあとはファイルを編集。見せたくない場所はしっかりマスクしておこう。ちなみに、画像の全体サイズを変更するのは、いろいろマズそうなので、あくまでも画像内容のマスク程度の編集にしておいたほうがよさそう。 exif情報が何をどこまで持っているのか不明。

一般公開可能な画像に編集が出来たら、今度はexif情報の書き戻しを行う。編集済みのファイルを先ほどのapp1ファイルがある状態で「01_exif_write_theta.bat」にドロップしてやる。そして、[画像ファイル名_out.jpg]というファイルが出来上がればＯＫ。

theta360.com

さて、theta公式としてtheta360.comというクラウドがあり、ここにtheta画像をアップして、うまいことやると、ＨＰに埋め込むコードが出てくるので、それをコピペしてやると、簡単に360画像が埋め込みできる様子。マウスでもグリグリできて、非常に便利っぽい。

まあ公式だしこれを使うのがよいかと、使用しようとすると、アカウント登録が最初に必要。まあそれはあるだろうけど、アカウントの登録がTwitterかFacebookアカウントを使うらしい。こまった、どっちもやってねぇ。

メルアドでの登録などは探してみたが無い様で、SNS利用が大前提っぽい。まあ今時アカウント無い奴なんて、いないだろうとの考えだろうが、持ってない人もいるのだ。残念だが、theta360.comの使用はあきらめる。

ポータブル・パノラマプレイヤー

「MobileHackerz」に「ポータブル・パノラマプレイヤー」というものが公開されていた。 thetaのファイルをブラウザでグリグリ見ることが出来るソフト(ブラウザ？）で、とてもよくできていて便利。単品の画像を見る(見せる)ときにはすごく便利。ブラウザいっぱいに表示してくれるので、大きく見えてよい。

ポータブル・パノラマプレイヤー

ソース見ると、やたらいろんなことをしていたので、簡単に解析できるものではなかった。これは非常に便利なので、ビューアーとしていろいろ活用させてもらおう。ただ、ブラウザいっぱいに表示するため、ＨＰ埋め込みには使用できない。リンク先用としては利用可能かな？

thview.js使ってhtmlで表示

いろいろ探していると、thview.jsというものを見つけた。製作者は、シータ画像を公式に上げるが不満点もあるので作ったそう。すごいな。ということで、使ってみよう。

GitHub - aike/thview.js: JavaScript Spherical Image Viewer

JavaScript Spherical Image Viewer. Contribute to aike/thview.js development by creating an account on GitHub.

githubにあるthviewの説明サンプルを参考にhtmlにjavascriptを埋め込んでやると、360°表示ができた。あら簡単。そしてすごい。

具体的には以下の手順を実施した。（以下＃コメント行以外をhtmlに埋め込んだ）

＃cdnからjsライブラリを2つ持ってくる。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/aike/thview.js/master/thview.js"></script>

＃表示用のタグを準備
<div id="photo1"></div>

＃表示させるスクリプトを記述
<script type="text/javascript" >
  var img1 = new ThView({
    id:'photo1',
    file:'360°画像ファイル.jpg',
    firstview:180,
    zoom:100,
    width:600,
    rotation:true,
    speed:-10
  });
</script>

パラメータを指定して表示させている。内容は以下。

パラメータ	値	説明
id	photo1	画像表示させるdiv要素のid
file	画像ファイル名	対象の360°画像ファイル
firstview	初期表示度合い	最初に表示する際の回転度合い（0～360)
zoom	画像拡大	画像の拡大(20～130)
width	幅	表示幅(px)
rotation	自動表示回転有無	回転有無(True/False)
speed	回転速度	回転速度(-100～100)

wordpressでも上記スクリプトをカスタムhtmlとして埋め込めばよいので、ブログにも360°画像が載せられる。これは便利だ。ちょっとファイル名の特定には苦労するけど（アップロードしたファイルの場所を特定する必要がある）