事務所を仮想空間にしてみたい！
2017-12-07 勉強会
最近、事務所のサークル空間を通る度に、「何か有効活用できないか？」
「何か面白そうなことができないのか？」と妄想にふけてしまうこの頃です。
例えば、椅子取りゲーム」「フルーツバスケット」「メリーゴーランド」「VR試写」「eスポーツ」「ミラーボール」「ミニドローンの練習所」「仮想空間」「プラネタリウム」など。。
と妄想はあるのですが、試す勇気がありません。
（実は、ちょっと試したことはあるのですが、ここに載せるわけには・・・）
そこで今回は、「事務所を仮想空間するとしたら！」をテーマにしました。
まるで前前回、前回チームの意思を引き継いだかのような作品を目指そうと試みました。（パクリともいう）
「何か面白そうなことができないのか？」と妄想にふけてしまうこの頃です。
例えば、椅子取りゲーム」「フルーツバスケット」「メリーゴーランド」「VR試写」「eスポーツ」「ミラーボール」「ミニドローンの練習所」「仮想空間」「プラネタリウム」など。。
と妄想はあるのですが、試す勇気がありません。
（実は、ちょっと試したことはあるのですが、ここに載せるわけには・・・）
そこで今回は、「事務所を仮想空間するとしたら！」をテーマにしました。
まるで前前回、前回チームの意思を引き継いだかのような作品を目指そうと試みました。（パクリともいう）
そんなかんなですが、まずは、札幌事務所のレイアウト図をご覧ください。
２つのサークル空間が気になりませんか？
※前前回チームより素材提供
※前前回チームより素材提供
次にサークル空間を撮影してみました。
この画像はパノラマモードで撮影しました。
いい感じです。（自己満足！）
エントランスだけにしとくのは、惜しい気がします。
考えても何かモヤモヤします。
ひらめきそうで、ひらめかない。
いい感じです。（自己満足！）
エントランスだけにしとくのは、惜しい気がします。
考えても何かモヤモヤします。
ひらめきそうで、ひらめかない。
そこで、事務所を歩いてみた。
これをARに出来たら？
そして踊ってみた！
ミラーボールを設置できたら・・特に意味はないです。
サークル空間を360°で表現できたら・・
なんとなく臨場感がでてきました！
会社のコーポレートサイトで使っている事務所（東京）をバーチャルツアー化した画像（アプリ？）に近づいてきたような気がします。
今回使用した360度カメラは、市販で販売しているRICOH THETA SCで撮影しました。
ベーシックモデルでも、十分使えると思いました。
また、360度画像をバーチャル化も、専用アプリがあり、非常に便利でした。
誰でも簡単に、編集そして共有ができてしまうことに驚きました。
RICOH THETA
https://theta360.com/ja/
RICOH THETA 編集アプリ
https://theta360.com/ja/about/application/
※フリーでも360度化するアプリは存在します。
フリー版バーチャルツアーソフト（Tourweaver）
http://www.easypano.com/jp/virtual-tour-software-free.html
インストールは英語版なので、少し分かりづらいですがすぐに使えます（詳細は略します。）
※所感：画質が今一つですが、フリーなら十分かと。
今回使用した360度カメラは、市販で販売しているRICOH THETA SCで撮影しました。
ベーシックモデルでも、十分使えると思いました。
また、360度画像をバーチャル化も、専用アプリがあり、非常に便利でした。
誰でも簡単に、編集そして共有ができてしまうことに驚きました。
RICOH THETA
https://theta360.com/ja/
RICOH THETA 編集アプリ
https://theta360.com/ja/about/application/
※フリーでも360度化するアプリは存在します。
フリー版バーチャルツアーソフト（Tourweaver）
http://www.easypano.com/jp/virtual-tour-software-free.html
インストールは英語版なので、少し分かりづらいですがすぐに使えます（詳細は略します。）
※所感：画質が今一つですが、フリーなら十分かと。
この360°画像とレイアウト図を掛け合わせて表現できたら・・・
と考えました。
ここは、懐かしのFLASHだったら実現できるかも？
とりあえず、試してみました。
事務所の仮想空間
完成品のリンクはこちら↓↓↓↓↓↓↓↓↓↓↓↓↓
「 事務所の仮想空間 」
スタートをクリックすると、仮想の事務所内を歩きまわることができます。
そして、モニターらしきアイコンに近づくと・・・
画像が開く仕組みとなっております。（別ウインド）
「 事務所の仮想空間 」
スタートをクリックすると、仮想の事務所内を歩きまわることができます。
そして、モニターらしきアイコンに近づくと・・・
画像が開く仕組みとなっております。（別ウインド）
ただ、SWFはiphoneで閲覧できないのが欠点。
そして、今、HTML5の時代。
SWFファイルが利用できなくなるまで、あと３年。
一世を風靡したFLASHの時代が終わろうとしています。
「でも大丈夫！ google SwiffyでHTML5へ自動変換すればなんてことはない！」
と考えていたのですが、いつの間にか変換サービスが終了していました。
他にもサービスはあるはずと探したのですが、無料サービスが見当たらない。・・困りましたが、「GitHub」で配布しているスクリプト「swf2js」に出会うことができました。
https://github.com/ienaga/swf2js
「swf2js」
※swfをJavaScriptで直接バイナリ分解してcanvasに出力するらしい。
SWFファイルが利用できなくなるまで、あと３年。
一世を風靡したFLASHの時代が終わろうとしています。
「でも大丈夫！ google SwiffyでHTML5へ自動変換すればなんてことはない！」
と考えていたのですが、いつの間にか変換サービスが終了していました。
他にもサービスはあるはずと探したのですが、無料サービスが見当たらない。・・困りましたが、「GitHub」で配布しているスクリプト「swf2js」に出会うことができました。
https://github.com/ienaga/swf2js
「swf2js」
※swfをJavaScriptで直接バイナリ分解してcanvasに出力するらしい。
HTML5版テストの結果は、成功したかに見えたが・・・・
早速、スクリプトをダウンロードしHTMLに組み込んでみました。
変換はできたのですが、やはり完全ではない。
HitTest() メソッドが動かない。ここが今回の肝なのに。。時間がなく残念な結果となりました。
テストページはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓
「 事務所の仮想空間 HTML5版 」
動作はPCのみ。
変換はできたのですが、やはり完全ではない。
HitTest() メソッドが動かない。ここが今回の肝なのに。。時間がなく残念な結果となりました。
テストページはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓
「 事務所の仮想空間 HTML5版 」
動作はPCのみ。
まとめ
「事務所を仮想空間にしてみたい！」に至るまで、どうやって表現したらいいか悩みました。
今回は、動画で表現したら面白いのではないか？と試行錯誤。
ドローン（飛行、走るタイプ）で撮影してみたが、なんだかよくわからない絵になり、失敗。
プロジェクター用の大画面で、ゲームをしたら、臨場感が凄いのではないかと
思い試したのですが、動画にするとただのテレビゲーム等・・・・悪銭苦闘。
これに何か意味あるのかと問われると...「ありません。」
「試みることに意味がある。」と...自問自答しました。
収穫は、
・360°パノラマ撮影は、誰でも気軽にで撮影できること。
・youtube Instagram等へ気軽に公開できること。
・写真の表現もリトルプラネットなど多彩。
もちろん、WEB制作でも即戦力で使えそうと分かったので、取り入れたいです。
商用でも使える自前の変換アプリがあればと思いました。
また、Adobe AnimateCCは ActionScript3をhtml5へコンバートする機能があるようです。
swfをHTML5に変換できる無料サービスは、ほぼ全滅してしまったこともわかりましたので
これを機にAnimateCCでHTML5 JS に触れてみようと思いました。
ただ64bitのPCでないと動作しないこともわかり、PCを買い替えたくなりました。
ご清聴いただき有難うございました。
＜今回の開発ツール/機器＞
RICOH THETA SC スタンダードモデル
https://theta360.com/ja/about/theta/sc.html
THETA アプリ
https://theta360.com/ja/about/application/
フリー版バーチャルツアーソフト（Tourweaver）
http://www.easypano.com/jp/virtual-tour-software-free.html
Adobe FLASH CS6 / Photoshop CC / Illustrator CC
https://www.adobe.com/jp/
「swf2js」
https://github.com/ienaga/swf2js
今回は、動画で表現したら面白いのではないか？と試行錯誤。
ドローン（飛行、走るタイプ）で撮影してみたが、なんだかよくわからない絵になり、失敗。
プロジェクター用の大画面で、ゲームをしたら、臨場感が凄いのではないかと
思い試したのですが、動画にするとただのテレビゲーム等・・・・悪銭苦闘。
これに何か意味あるのかと問われると...「ありません。」
「試みることに意味がある。」と...自問自答しました。
収穫は、
・360°パノラマ撮影は、誰でも気軽にで撮影できること。
・youtube Instagram等へ気軽に公開できること。
・写真の表現もリトルプラネットなど多彩。
もちろん、WEB制作でも即戦力で使えそうと分かったので、取り入れたいです。
商用でも使える自前の変換アプリがあればと思いました。
また、Adobe AnimateCCは ActionScript3をhtml5へコンバートする機能があるようです。
swfをHTML5に変換できる無料サービスは、ほぼ全滅してしまったこともわかりましたので
これを機にAnimateCCでHTML5 JS に触れてみようと思いました。
ただ64bitのPCでないと動作しないこともわかり、PCを買い替えたくなりました。
ご清聴いただき有難うございました。
＜今回の開発ツール/機器＞
RICOH THETA SC スタンダードモデル
https://theta360.com/ja/about/theta/sc.html
THETA アプリ
https://theta360.com/ja/about/application/
フリー版バーチャルツアーソフト（Tourweaver）
http://www.easypano.com/jp/virtual-tour-software-free.html
Adobe FLASH CS6 / Photoshop CC / Illustrator CC
https://www.adobe.com/jp/
「swf2js」
https://github.com/ienaga/swf2js