Focus U ブログ
いろいろ拡げる「kintone」その1 -360°パノラマ画像を表示・再生する- 編
こんにちは。CI事業部サポートチームです。
kintoneは自由度の高いクラウド型プラットフォーム。
色々とカスタマイズをすると、"かゆいところに手が届く"便利なサービスとして活用することができます。
そこでCI事業部サポートチームでは、「いろいろ拡げるkintone」と題して、「こんな使い方をしてみた、あのサービスと連携してみた」というような、kintoneの可能性を拡げる活用例をご紹介していきたいと思います。
第1弾として今回取り組んだのは「kintoneでの360°パノラマ画像の表示・再生の実現」です。
kintone上で、360°パノラマ画像を表示・再生する
Googleマップなどでよく見かける360°パノラマ画像。
複数の静止画を並べるよりも、臨場感があり、よりリアルに建物や空間を見ることができ、
建物や店舗の内観写真の閲覧にはうってつけの技術です。
しかし、360°パノラマ画像を見るには専用のソフトウェアが必要だったり、導入が大変だったりするデメリットがあります。
そこで、今回はkintone上でこれらの360°パノラマ画像を表示・再生できるように実装してみました。
【kintone上で再生した360°パノラマ画像】 撮影場所:ドットワーク富士吉田 エントランス
【kintone上で再生した360°パノラマ画像】撮影場所:ドットワーク富士吉田 エントランス左側
<kintone上の表示イメージ>
いくつか画像が並びましたが、これは実際に360°のパノラマ画像をkintone上で表示したものです。
上2枚は拡大表示したもの、3枚目は標準サイズのkintone表示です。
いずれも当社サテライトオフィスである、ドットワーク富士吉田で撮影しました!エントランスです。
ブログの静止画ではなかなか伝えにくいのですが、これらは360°のパノラマ画像になっていますので、
マウスをぐりぐり動かして、左右上下360°に画像(視点)を動かすことができます。合わせて拡大・縮小も可能です。
もっさり再生になることもなくサクサク快適に動かせるので、kintone上で操作していることを忘れてしまいます。(ちょっと大げさでしょうか・・)
さて、この画像の左上にあるのが見取図とその撮影地点です。撮影視点の移動と連動して、撮影地点の視覚画像も変わっているのに気づきましたか?
エントランスでは撮影1ヶ所だったので、撮影地点を1つしかプロットしていませんが、もしこれが広いフロア―であれば複数の撮影地点をこの見取図の上にその撮影地点の数だけプロットします。見取図上の撮影地点をクリックすると、その地点で撮影された画像に切り変わる、という動きになります。
また、画像の右上にある時計のようなアイコンはいわゆる「タイムマシン」機能です。
今見ている画像と過去の画像とを切り替えて画像表示することができるので、過去から現在に至る移り変わりなどを見比べるのに便利です。
ドットワーク富士吉田の完成前と現在の様子を比較してお見せできると良かったのですが、完成前の画像がなく残念。。
複数の場所のパノラマ画像も、kintoneのカテゴリ機能を使って整理整頓
画像データは、kintoneのカテゴリ機能を使って見やすく整理されます。
カテゴリの基本的な使い方は同じですので、撮影場所や撮影シーンなどに応じて見やすくまとめることができます。
何度も見たい(見る必要がある)画像は、ブックマークしておくこともできます。
kintoneで利用する添付ファイルについて
さて、ここでkintoneの添付ファイルについて少し触れておきたいと思います。
添付できるファイルの種類は、Excel、Word、PDFなどファイルの種類を問わず添付でき、ファイル名をクリックするとダウンロードできます。(再生ではなく、ダウンロードになってしまうんです。)
ちなみにサムネイル(縮小画像)が表示されるファイル形式は、BMP、GIF、JPG、PNG。サイズは10MB以内、画素数は5,000万画素以内、という決まりがあります。
kintoneの添付画像ファイルをビューワーで再生する
通常はkintoneに添付したファイルを再生し、それを操作することはできませんが、今回は専用ビューワー画面を実装することで「360°パノラマ再生と操作」を実現しました。
元データとなる360°パノラマ画像の撮影には、『360°カメラRICOH THETA』を使用し、取り出したjpg形式のファイルをkintoneに添付して利用しています。
360°パノラマビューワーで実装した機能のまとめと主な用途
改めて今回実現した機能をまとめてみます。
- 添付画像360°パノラマ再生
マウスを使って視点の移動、拡大・縮小操作が可能です。 - 見取図と撮影地点表示
視点移動と連動して視覚野アイコンが動く。撮影地点と画像切り替えが可能です。 - タイムマシン
同じ地点の、撮影日の異なる撮影画像を複数使って表示画像の切り替えをすることができます。 - 再生画像回数表示
画像が何回再生されたかを表示でき、よく見られている画像がどれかを分かりやすく表示できます。 - お気に入りブックマーク
何度も見たい画像にブックマークをすることで、データの整理整頓がかんたんに行えます。 - 画像ファイルのカテゴリ別に整理
カテゴリ機能を利用し、画像ファイルをカテゴリ別に整理することができます。
さて、今回ご紹介した機能は果たしてどのような場面で使えるでしょうか。
例えば、以下のような用途を想定しています。
- 社内に有する不動産物件や管理設備の社内共有やメンテナンス管理などに利用。
- 建築施工、デザインなどプロジェクトを進める際の施行状況進捗の管理、社内共有。
ちなみに、不動産物件の紹介用に外部へ共有したい、というニーズは多いのではと想像していますが、外部共有に関してはいくつか超えるべきハードルが存在します。
「kintone」はまだまだ拡がる、拡げられる。
いかがでしたでしょうか。
今回は、kintoneに添付したファイルを専用のビューワーを利用して再生するという使い方をご紹介いたしました。
パノラマ再生の軽妙な動きをブログでお伝えするのは難しいのですが、イメージを拡げてお読みいただけるとありがたいです。
kintone上にファイルを添付して管理するのは非常に多い使われ方ですが、添付したファイルをkintone上で再生させ利活用する、という点にはおいては多少なり新しい切り口で興味を持っていただけたのではないかと思います。
また弊社では、kintoneをベースにした各種カスタマイズをお受けするサービスもございますので、「こんなものを実装したい」というご要望があれば、是非お気軽にご相談いただければと思います。
kintone開発の要素を含む今回のブログですが、皆さんの関心が高いようであれば引き続きブログ記事で取り上げたいと思います。
それではまた次回もお楽しみに!?
業務上必要な情報を、一番必要なタイミングで、それを必要としている人のもとに届けるクラウドサービスです。「タイムレコーダー」「給与明細」「顧客管理」「販売管理」に続き、続々サービス計画中です。
最近のブログ記事
カテゴリー
アーカイブ
- 2024年8月 (2)
- 2024年7月 (3)
- 2024年6月 (1)
- 2024年5月 (1)
- 2024年4月 (2)
- 2024年3月 (2)
- 2024年2月 (2)
- 2024年1月 (4)
- 2023年12月 (2)
- 2023年11月 (2)
- 2023年10月 (4)
- 2023年9月 (2)
- 2023年8月 (2)
- 2023年7月 (3)
- 2023年6月 (4)
- 2023年5月 (4)
- 2023年4月 (3)
- 2023年3月 (3)
- 2023年2月 (3)
- 2023年1月 (3)
- 2022年12月 (3)
- 2022年11月 (3)
- 2022年10月 (1)
- 2022年9月 (1)
- 2022年7月 (2)
- 2022年6月 (1)
- 2022年3月 (3)
- 2022年2月 (2)
- 2022年1月 (1)
- 2021年11月 (1)
- 2021年6月 (1)
- 2021年5月 (1)
- 2021年4月 (1)
- 2021年3月 (1)
- 2020年11月 (1)
- 2020年10月 (1)
- 2020年8月 (2)
- 2020年7月 (3)
- 2020年6月 (2)
- 2020年5月 (1)
- 2020年3月 (1)
- 2020年1月 (3)
- 2019年12月 (3)
- 2019年11月 (2)
- 2019年10月 (3)
- 2019年9月 (1)
- 2019年8月 (1)
- 2019年7月 (2)
- 2019年6月 (2)
- 2019年5月 (2)
- 2019年2月 (1)
- 2018年6月 (1)
- 2018年3月 (1)
- 2017年12月 (1)
- 2017年8月 (1)
- 2017年5月 (1)
- 2017年4月 (2)
- 2017年3月 (1)
- 2017年2月 (1)
- 2017年1月 (1)
- 2016年11月 (2)
- 2016年7月 (1)
- 2016年6月 (1)
- 2016年5月 (1)
- 2016年4月 (1)
- 2016年2月 (1)
- 2015年12月 (1)
- 2015年11月 (1)
- 2015年10月 (2)
- 2015年9月 (1)
- 2015年8月 (3)
- 2015年6月 (1)
- 2015年5月 (3)
- 2015年4月 (3)
- 2015年3月 (2)
- 2015年1月 (3)
- 2014年12月 (1)
- 2014年11月 (2)
- 2014年10月 (3)
- 2014年9月 (4)