2015/05/21 ■ THETAの360度写真を人に渡そう!「人に渡せる」ポータブル・パノラマプレイヤーを作った Twitterでつぶやくこのエントリーをブックマークに追加このエントリーを含むはてなブックマーク


「360度写真」が一発で撮れる不思議デジカメRICOH THETA以前のレビューにも書きましたが、「その場の雰囲気を残す」家族スナップのためのカメラとしてとても優秀で、その後も普通に使っています。
…が、THETAを使っていろいろ写真を撮っていると…

「すごい!この写真私にも送って!」
「印刷したいんだけどどうすればいいの?」

よく言われるんです。そして、そういうときにはたと困ってしまう。

「写真送りますが、まずこのプレイヤーをインストールして…」
いや、そんなことなかなか言えないですよね…
というわけで、そんなこと言わずに人に渡せる(そして写真をローカルに保存してもらえる!)ポータブル・パノラマプレイヤーというものをつくってみました。

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


HTML5 Canvas/WebGLで作られた、ブラウザ上で動くTHETA用パノラマプレイヤーです。…というだけならさほど珍しくないのですが、このプレイヤーは「写真データもプレイヤーもぜーんぶひっくるめて一個のファイルになっている」という特徴があります。つまり「写真送ります、と言ってそのままメールで送りつけられるファイル」になる。そして受け取ったほうはファイルをダブルクリックすれば『写真』が開ける、ということです。ファイル保存も、コピーも、その『写真(プレイヤー含む)』ファイルを普通に扱ってもらえればよいのです。…イメージできました?

簡単なつかいかた

「ポータブル・パノラマプレイヤー」はこちらです。
上記リンクをクリックしてそのままお使いいただくか、保存してローカル環境で使用したい場合はリンクを右クリックし「リンク先を保存」してください。ディスクに保存したHTMLファイルをダブルクリックして開けば同じように使えます。


ページを開くと、このような初期画面が出てきますので、人に渡したいTHETAの写真(.JPG)をこのウインドウにドラッグ&ドロップします

すると、ドラッグ&ドロップした写真をマウスでぐるぐる回して見られるようになります(THETA写真の天頂補正にも対応しています)。

ここで、右下のアイコンをクリックすると…


HTMLファイルがダウンロードされます。


これが「写真が埋め込まれたポータブル・パノラマプレイヤー」です。「(THETAの)写真送って」と言われたら、このファイルを人にメールするなりアップロードするなりすればOK。メールされた人はこのファイルをダブルクリックするだけで、写真をぐりぐり回してみることができます

…というわけで、見てみましょう。
生成されたファイルはこちら。開いてみると、ふつうに写真をぐりぐりできますが…

よく見ると、右下のアイコンが先ほどと違っています。実はこれ、元のJPEGファイルをダウンロードするボタン。プレイヤーには元のJPEGファイルが無劣化で埋め込まれているので、たとえばVR対応の別のプレイヤーで写真を見たい、というような場合はこのボタンで元のファイルを取り出すこともできます

また、その隣は「印刷用の写真」を生成するボタンいまプレイヤーで見ている画角で、印刷用の解像度(2048×1536ピクセル)の画像を生成してダウンロードします。「(平面に)印刷したいんだけどどうすればいいの?」というひとも安心です。

ちなみにこの(人に渡す状態の写真が埋め込まれた)プレイヤーにあらたなTHETA写真をドラッグ&ドロップしても大丈夫。別の写真をぐりぐり回して見られますし、その写真の埋め込みプレイヤーも生成できます。
スマホ対応はいちおうしているつもりではいて、gmailに添付してAndroidで見るところまでは確認しています。ただiOS機は「JavaScript込みのHTMLファイルを動く状態で端末に送り・開く手段」がよくわからなかったため未確認です(少なくともJavaScriptが動かない環境下では元のJPEGデータを見られるようにはなっています)

「撮るのは楽しいけど人に渡しにくい」「写真をいちいち外部プレイヤー開いて見るのちょっとめんどくさい」みたいなことはみなさん感じたことがあるかと思います。ぜひためしてみてください。

※本プレイヤーは「RICOH THETAデベロッパーズコンテスト」に応募するために作られました。
※本プレイヤーはMITライセンス準拠で配布します(詳細はHTMLソースをごらんください)のでもちろん再配布可能です。現在公開しているプレイヤーはminifyしたあとのものですが、追ってビルド前の一式も公開する予定です。

Related Posts with Thumbnails