[B]ブロガーのサイトでフォトスフィアを...
フォトスフィア
以前、このブログのサイトでフォトスフィアの画像をグリグリできるか記事にしてみましたが、以前グーグルが提供していたフォトスフィア表示用のAPIが現在では使えない状態になっていて、一つの方法としてthree.jsというライブラリを使えばこのサイトでどうにかフォトスフェィアの画像を360度グリグリできそうとの結論に達しました。
又、MasterMapsというサイトの記事に実際にthree.jsライブラリを使ってフォトスフィアを表示してみたという記事があったのでコピペ感覚で比較的簡単に表示出来るかと思ったのですが。。 使われていたライブラリのバージョン(R70)が現在リリースされているバージョン(R101)より古かったので、記事を参考にして改めてJavaScriptのコードを書いてこのページに組み込んでみました👇。 組み込んだコードが上手く動けばこの下にフォトスフィアの画像が表示されて前後左右にグリグリ動かしたりズーム出来るはずです (ごめんなさい、二本指ズームには対応していませんでした。)。
残念ながら、Google Chrome 9, Firefox 4, Opera 15, Safari 5.1, Internet Explorer 11よりも前のバージョンのブラウザーやOpera MiniではWebGLが正式にサポートされていないみたいです。
このブログのサイトにアップロードされたフォトスフィアの画像を使っているのですが、サイズが大きな画像はアップロードの段階でファイルのサイズが小さめに変更されてしまう様で残念ながら画質が落ちてしまっています。
[これ以降はJavaScriptの説明になります。]
three.min.js
今回、フォトスフェィアの360度表示にあたってthree.jsの『three.min.js』と『OrbitControls.js』というJavaScriptで書かれたファィルに含まれるいくつかの機能を使わせてもらました。 でも、そのためにはこれらのファイルをブログ記事に組み込まないといけなかったのですが、現在このブログのサイトにはJavaScriptのファイルをアップロードして使える様にする機能がないみたいなので、ブログ記事のHTMLコード内にJavaScriptのファィルの内容をコピペするか、どこか他のサイトにライブラリのファィルをアップロードしてそれを呼び出して使う必要がありました。
記事のHTMLコードにに直接コピペをするのが一番簡単なのですが、『three.min.js』のファィルにはフォトスフィアの表示に必要な機能以外の沢山の3次元表示用の機能が含まれているので結構のサイズ(~545KB)があって、フォトスフィアを表示したい記事ごとに毎回コピペをすると無駄なデータ領域を使ってしまうので、『three.min.js』と『OrbitControls.js』は他のサイトにアップロードしてから呼び出して使う事にしました。
このブログはグーグル参加のブログサービス『ブロガー』にてホスティングされているのですが。『グーグルドライブ』にJavaScriptのファイルを保存してそれをこのブログサイトで読み込め…たら良かったのですが、以降はからそういう事が出来なくなったそうです。
なので、今回は『Dropbox』にJavaScriptのファイルを保存して上記の2つのファィルを読み込みました 。 将来的に仕様が変わってDropboxからJavaScriptのファイルが読み込めなくなるなんて事もあるかもしれませんが、この記事を書いている時点では読み込みの問題はありませんでした。
JavaScriptのファイルをDropboxに上げてブロガーのサイトで参照する方法
Dropboxにアップロードしたファイルを共有すると、各ファイルごとに共有用のリンクが設定されます。JavaScriptのファイルの場合、そのリンクを少し修正すればブログ記事のHTMLコード内で<script>タグを使って読み込む事が出来ます。
例として『three.min.js』というJavaScriptのファィルを共有した場合:
という様なリンクが設定されます。このリンク中の"XXXXXXXXXXXXXXX"の部分は共有するのに使ったDropboxのアカウントやファイルの保存場所によって特殊な文字列で、この文字列とファイル名をコピペして下の様な<script>タグをブログ記事のHTML内に加えればJavaScriptのファイルが読み込まれます。
JavaScript
この記事でフォトスフィアの表示に使われたJavaScriptに興味がある場合はコンピューターのブラウザでページのソースを表示してみてください。
コメント
コメントを投稿