Panoramio API を使ったツールが動かなくなったので、このブログでも画像の埋め込みをするのが面倒になりました。自分の画像ならばPanoramioのサーバーから直リンクで表示しても著作権その他の問題は生じないだろうからと、フォトID指定で画像を表示しその下部に著作権に対する注意書きを自動で表示するようにツールを作成してみました。画像をアップロードしなくていいし、便利だけど、これで表示出来るのも11月までだろうな。
pIdはPanoramioのフォトIDを指定、heightは画像のアスペクト比に合わせて調整が必要です。下記参照
height: 16:9 → 317、4:3 → 410、3:2 → 369、2:1 → 285、1:1 → 535
<iframe height="410" src="https://junk0128-tools.appspot.com/panodlink/index.html?pId=59718649" frameborder="0" width="500" scrolling="no"></iframe>
Photo Sphere Communityで知った埋め込みツールに２つの機能を追加してみました。
動作確認 ※追加機能だけ
現在ココで試験運用中です。新旧のMac, iPad等での動作確認報告を歓迎します。
※ height: -webkit-calc(100% - 30px) ← これを初めて使ってます。
※ 参照サイト： CSSで計算式を可能にするcalc()ファンクション
ブログにPhotoSphereを埋め込みすると、画面をはみ出てしまい見れない状態になるとの事。埋め込みツールを作成した時はChrome,firefox,IEの最新版で表示確認を行い、更にNexus7(2013)で表示確認をやっています。Nexusでの確認はAndroidとしての確認であって、表示サイズでの確認ではありません。ボタンが小さすぎて押せないこともありますが、OSの機能としてボタンをタッチするとその周辺を拡大表示し、ボタンが押し易くなる機能があるのでこれに頼ってます。
このブログに挿入しているPhotoSpere等の画像は基本的に幅600~640ピクセルで埋め込んでいます。PCメインなので、スマホの小さな画面の事は基本的に対応出来ないと言いたいところですが、少しだけ考えてみました。先ずはbloggerのテンプレートでモバイルを生かせば良いのかと思ったら、それでは不十分でPC版テンプレートのHTMLを修正が必要とか書かれているサイトがあるし、ちょっと面倒そうです。
埋め込んだPhotoSpereの上部画面ですが、ここに「Googleマップで見る」があります。ここをクリックするとGoogleマップ上でフル画面で見れるのでここをタップすればいいんじゃないかな。※小さいので押しづらいけどね。もうひとつ、上記画面の右側に全画面表示にするボタンがあります。ここをタップすればGoogleマップに移動せずにフルスクリーンになります。ちょっと問題点はこの右側部分が表示されていないし、画像の部分をスワイプしても枠は動かないので見れないのです。解決方法はブログタイトル部分をスワイプすれば全体がスライド可能です。このボタンも小さいので押しづらいし、拡大画面は空白で押せない問題は生じます。このフルスクリーンボタンが表示されていない時は埋め込みコード(iframe)に追加が必要です。※下記参照
ここからはコメントに対する返信です。※建設的なコメントは歓迎します！
※下記埋め込みを500ｘ500にサイズ変更。 スマホを横長で使えば全画面表示ボタンが押せるかも？
※chromeのエミュレータのiPhone5で確認。全画面表示ボタンは見えるし押せる。全画面にした後は縦でも横でも全画面表示可能。終了の「X」をクリックすれば元の表示に戻るのでブログの続きを読めます。
※「Googleマップではこのリンクを開けません」と表示された時は画面右上の「⋮」をタップして、「PC版サイトを見る」を選べば見辛いけど見れますよ。※android 5.1.1のスマホで確認。
マップアプリの「標準設定をクリア」すると使用するアプリを選択可能です。「ストリートビューで開く」を選べば見易くなります。「今回のみ」をタップすれば標準設定されません。※iPhoneは？？？
埋め込みのテスト、上は前回投稿と同じコードで下側はAPIを使って再度取得したコードです。Panorama IDの後半が少し変わった様です。ひょっとしてIDがコロコロと変わるのかも？？？？？
モザイク画のクジラの口が左側、尾が上に見えるように埋め込んだコードですが、headingの値が大きく異なってます。もしかするとPicasaウェブアルバムで位置を修正したらIDが変わるのかも？
この件ですが、Googleマップで見てみると「生月町観光協会売店」の位置に移動しています。投稿後にPicasaウェブアルバムで本来の撮影位置に移動させていたのですが、これが戻されてしまったようです。今度はGoogle+フォトで移動させてみます。[2016/03/04 22:10 JST]
他のPhotoSphereを確認してみましたが、全部では無いけど、多くの写真位置がリセットされたようです。これがGoogle Mapsの仕様では無いことを望みたい！
[p.s. 2016/03/11 14:45] 写真位置がリセットされた件ですが、一部のPhotoSphereの青丸印位置は復帰したようです。サムネイルにマウスポインターをかざした時に表示される指線の位置は場所名位置のままです。まだ復帰作業中なのかも？？
Google+のPhoto Sphere Communityに投稿されていました。GoogleマップのPhotoSphereのリンクを貼り付けるとウェブ埋め込み用のコードを得ることが出来ます。興味がある方は下記リンクで試してください。ソースはGitHubに載ってます。
p.s. この記事がどこからか参照されているなと調べてみたら、下記でリンクされてました。参照元の記事を読んでみるとストリートビュー認定プログラムのフォーラムユーザーからの紹介らしい。認定プログラムに参加していないのでそのフォーラムにどのように書かれていたのかは不明です。このブログにはPhotoSphereについていくつか記事が書かれているので取り敢えずメモとして追記しておきます。
Google Maps and Earth Help Forumを読んでいると、偶に有益な情報を得ることが出来ます。気になる投稿が有ったらスターマークを付けておくと読み返す時に便利です。今回の有益情報は下記です。
ここに追加投稿で、埋め込みツールの紹介がありました。このツールでは https://maps.google.com/maps を使った埋め込みコードを得ることが出来ます。”panoid=”の後ろにpanorama-ID、”cbp=13%2C”の後ろにheading、”%2C2C”の後にzoom、”%2C”の後にpitchを指定すればいいみたい。
※Syntax Highlighterを久しぶりに使ってみたら、何故かダブって表示されてます。原因は？？？
google.maps.streetViewViewer = 'photosphere';
情報源は下記です。
※Chrome Ver.48.0.2564.82 m (64-bit)で下記の表示が出来なくなりました。暗号アルゴリズム「RC4」対応終了のためみたい。Firefoxでも1月末のV44で打ち切りらしい。
※サーバーの設定が変わった(RC4を使わなくなった)みたいで、Chromeでも表示可能になってます。
