Lineで送る

2013/05/18

Tips:Sample Photo Sphere Embedded Web Page(ie on Blogspot) Via GoogleMap

Via GoogleMap経由で直接、所有サイト(Owned Site)に、ブラウザで表示するサンプル

【前提条件】

  • Google+に参加している
  • Google Mapへ撮影画像をギャラリー(From Gallery)から共有(Upload)済み
    ※要 GPS情報付加済み(Embedded GPS Parameter in your Sphere file)
  • または、Google+の写真アルバムで一般公開としてUpload済み
  • Street View(ストリートビュー)でContribute(投稿)内の「自分のPhoto Sphere写真」でPCで表示
    ※[みんなのSphere]になっている必要はない、
    ただしGoogle+のアルバムで一般公開になってる必要はある
上記が完了してる状態で↓▼↓のように表示する方法です
(Android等のMobile Deviceでは動作が緩慢で実用的な表示になりません、PCで閲覧推奨)


大きな地図で見る
参考までに 上記の同一画像を、自分が見せたい方向とzoom拡縮で初期表示させる例↓
(撮影時に、やむを得ず意図しない方向から撮影し始めレンダリングされたファイルを見せたいときのテクニック)
上のStreet Viewを右斜め上方向に、ズームアップした状態で初期表示すると↓▼↓

大きな地図で見る
■Photo Sphereの画像ファイルを自サイト内に置いて表示させたい場合
 GoogleのHallo World参考URLはこちら(Viewer APIを利用する方法)を参照
6/17追記
GPS情報を基準にペグマンの方向がマップ上で描画されるため
被写体にもよるが、なるべく正確な緯度経度を確認して修正するなり推奨です
正直いって、あまりオリジナルファイルをいじるのは、個人的には嫌なのですが
ペグマンの方向まで気にされる方は、PC版PicasaでGPS修正してからAndroid端末に戻しUp下さい
外部サイトに、埋込んだ例(Google+にファイルを置き、一般サイト上に表示)
こちらのリンクでお試し

  • 手順(Googleマップを使わずに埋込み時は▼↓この手順↓▼
    [Google+(PocasaWeb)にアップロード]→[ホーム]→[写真]→[アルバムでアップした写真を選択]→[スフィアビューでなく、静止画モードで表示する]→[画像右クリックする]→[画像URLをコピー]→[あとは、このURLをスクリプトに埋め込む]→[パラメータ調整]→[目的のサイトにページをアップ]→[完了]

    ※注API経由だと、現状モバイルでブラウザ表示は非実用的、
    (CPUパワーが必要ということ)(レンダリングにも問題あり(上下は歪んだまま))
    (7/11追記、モバイルでもViewerのバージョンでも上がったのか上下歪まず完全にSphereになっいた。ストリートビューに飛ばさずお手軽利用にはいいかもUXに関してはSVのアプリには劣るが、、)
    Photo Sphere Viewer API経由は、基本PCブラウザで閲覧を推奨
■Street View(ストリートビュー)内のPhoto Sphere関連Faqへ
上記はこのファイルを埋め込んだ例です

方法(How to)画像付き説明


  1. 自分のSphereをブラウザで表示する



  1. ブラウザに表示された自分のSphere画像の左下の名前の下のリンクをクリック
  2. マップで開く
  3. マップのリンク作成ボタンを押す
  4. メールで送る場合のリンクと埋込みのコードが表示される
  5. コピペして利用する
以下画像で説明
▼マップで表示する▼


見せたい方向と拡縮を決めてから
▼リンクボタンを押す▼

▼コピーペースト(Copy and Paste)▼


【おまけ】(Additional infomation)
■サムネイルはこんな感じのファイルが
 ■マップ上ではこのように表示され
 ■デフォルトでこのような初期表示になるファイルです

マップ上で表示されるサムネイルは、生成されたアスペクト比が縦横1対2の
正距円筒（Plate Carrée）図法に準拠した画像です。
そして、何枚も撮影して分かったことですが、(後でFaq読めばヒントがあった)
最初に撮影した1枚目の写真が基準となっている感じです。
具体的に言うと、こんな感じですか(^^)↓
サムネイルの丸の部分をスクエアに引き延ばして歪みが無くなった状態
Nexusの場合、レンダリングが完了すると、生成画像(Jpeg)が
全体的に若干、右にずれます。
そのため、1枚目に(キャリブレーションして)撮影した画像の、
少し左側がサムネイルの中央となるようです。
(撮影時の東西南北の方角や上下の角度はサムネイルに影響しない。パラメータとしてファイルにembeddedされるだけです)

【コツ】そのため、撮影開始時にサムネイルとして見せたい向きを先に撮影しないと
思ったサムネイルで表示されない。(できれば、ちょっと左から撮影が吉)
逆に、意表を突くなら、全然関係ない方向から撮ってもいいかも。

上記を考慮して、撮影開始は

  • 60～90度ずれた方向から撮影し始める
    (メインの被写体の左45～67.5度付近から右回りで撮影始める)
    (左回りならメインの被写体の左45度からがお薦め)

360度全体、すべての雰囲気が伝わるからこそ、Photo Sphere最高なのに、、
人間、やっぱり目は前にしかついてないから
見せたい景色と見たいアングルってあるはず。
全方向撮って、後からサムネイル指定できればいいけど
調べたが、現状まだないみたい。

6/17追記
撮影時の回転方向(時計回り、逆回り)では、レンダリング結果が違ってくることが判明
私の場合は、必ず時計回りで上下させず、必ず1回転、その後、上段下段と1周
完全なスフィアファイルにするため、未撮影個所なし(53～54枚)完全撮影する
その場合は、上記のような撮影が有効。
そのため、各人の撮影方法にレンダリング後の状態が左右される。
自分の撮り方と癖を把握して、ハードウェアと生成ソフトウェア癖を把握するといい結果が得られる
  • ※参考、私はアプリ開発者じゃないから、これ以上追っかけないけど
    こちらに、あれこれファイルやディレクトリ構造を
    UKのディベロッパー、Christopher Orrさんが
    解析してくれたブログ記事あります

いずれ要望があがってきて、パラメーターで調整できる風になるか or やっぱり、
いじらせずに、現状のままで行くかは不明。
だから、Faq内では「初めに、撮影する対象物を写しキャリブレーションしてから、、、撮影」となっていた。
多くの人が、見たい、写したい、伝えたいモノ、
その物を、真っ先に直接撮影始めるだろう、人間の特性を逆手にとってカメラアプリを作ったか
レンダリングのアルゴリズムにしたからだと思う。

■少し長文になったけど、初心者段階での【撮影時のコツ】をまとめると、
目的は素人や機械の操作に習熟してない人に見せる前提
現状では、見る側は最初にサムネイルでイメージを判断するため

  • サムネイル対策　→　最初に(1枚目)、一番見せたい向きを撮影する
  • あざやかで綺麗に撮影対策　→　屋外では太陽の向きを考慮するカメラのHW特性考慮して(露出と彩度)
  • 撮影失敗しない対策　→　撮影後はレンダリングが終わるまで操作しない or 終わるのを待つ(約100秒)
  • 後で、加工しなくていいように　→　GPSは数分前(できれば屋外で15分以上前)に必ずONにしておく
  • できれば、Wi-fiなどの通信は止めておいた方が、フリーズや撮影失敗が減る
Nexus(SC-04D)のカメラは裏面照射型CMOSじゃないから
撮影画像はいまいち、夜景などはお話にならないけど、、
360度パノラマは、たのしい(*´▽｀*)で、一旦締め

参考サイト
※グーグルマップ活用講座(Google Street View Image API ウィザード)
※GoogleDevelopers(ストリートビューサービス)
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)