Panoramio Widget API

2012年1月28日土曜日

My desktop

デスクトップをPanoramioのガジェットで埋めてみました。

通常は右1列だけ表示させているのですが、ちょっと遊んでグループの写真を追加している様子です。
右上が「自分の写真」、その下が「日本の写真}、その下が「コンテスト入賞作品」
2列目上から「8551」、「20711」、「22002」※「」内はグループ番号です。以下同じ
3列目上から「9455」、「13284」、「10001」
4列目上から「20205」、「37501」、「27618」

※Panoramio Widget APIを使用しています。
「写真は所有者の著作権により保護されています」

※The gadget is using Panoramio Widget API.
「Photos are copyrighted by their owners」

動画はBB FlashBack Express レコーダーを使って作成しました。

2012年1月13日金曜日

pgp4の中身の元 (mpp2blog)

pgp4はpgpの右側に地図を表示したものです。今回はこの地図の部分の元となったmpp2blogの紹介です。これを先に作っていたので、pgp4では普通のGoogle Maps API V3ではなく、Panoramio Layerを使って表示しています。利点は近くに同じユーザーの写真があれば、サムネイルをクリックして、その写真を見ることが可能です。Google App Engineに移設した時に少しだけ書き換えたのですが、ふと気が付いたらIEで表示しなくなっていたので、バージョンダウンしてから他のアプリに合わせて書き換えました。地図の下に著作権表示を記し、その右側に「Help」ボタンを設けて簡単な説明を表示するように変更です。IE8だけの症状ですが、「Help」ボタンをクリックした時に右側と下側にゴミのラインが出てしまいます。私のPCのグラフィックボードだけかも?

Panoramioの古いユーザーならMini-Panoramioを知っていると思いますが、それと同じように使えます。現在のPanoramio マップはユーザー指定が出来ません。地図上のサムネイルをクリックしてポップアップする写真の下部に著作権表示は付いているので、地図の下部の著作権表示は必要かどうかは不明です。Panoramio Layerの説明のところには何も書いて有りません。Panoramioに質問メールをだいぶ前に書いたのですが返事は有りませんでした。念のためということで、今回のバージョンでは下記のスタイルにしました。

user=1597930
lt=33.308492
ln=130.937593
z=10  ズーム値
k=3  地図の種別
width=400
height=300

user指定の代わりにtag指定も可能
※両方同時は不可

※(The Panoramio Layer (Library) を使用しています)


2012年1月12日木曜日

PGP3の中身を抽出

前回はPGPでしたが、今回はPGP3です。違いはPGPがユーザー指定に対して、PGP3はエリア指定です。エリアを指定して、その中にあるグループ写真を表示することが可能です。これを使えば大規模なグループでも、見るエリアを指定することにより写真を探しやすくなります。

← グループ「Square shots」です。
このグループには参加していないけど、スクエアサイズの表示例として紹介します。


写真のサイズを400x400ピクセルとして真四角に表示するように設定
エリアを日本本土(アバウトです。一部隣国が含まれているかもしれません)と指定しています。

 

Panoramio Widget APIを使用してます。

p.s.(2012/01/23)
挿入するリンクを間違えていたので修正しました

正月バージョンで「Map」ボタンを設けて地図を表示可能にしたのですが、この時はボタンの位置を絶対的座標で無理やり合わせていました。今回、位置合わせ方法の修正を行いリサイズ可能に変更しました。

余談ですが、これらのツールでグループ写真を見ていると「外部 Widget API の閲覧数」が増加します。ある程度増えると「この写真へのリンク」に載るようです。下記のようなアドレスが載った時は、これらのビューアーで誰かが見ていたということです。偶々、リストの最初に長期間在ると表示の機会が増えます。この為、グループ「日本の写真(Photos of Japan)」の最新の写真は、目立ちやすくなってます。

  • http://junk0128-pgp.appspot.com/・・・・
  • http://junk0128-tools.appspot.com/・・・・
  • http://www.justmystage.com/home/junk0128/・・・・

Panoramioのフォーラム Q&Aにユーザーが作成したツールの紹介記事が載っています。サーバーを変更した1月7日付で旧アドレスの記事が載ったので、変更した旨を連絡し、1月10日付けで新アドレスに差し替えて貰いました。新フォーラムに変わって読んでいる人が少ないみたいだし、継続的に使っている人はブックマークに入れているだろうから、アドレス変更の周知徹底は難しいだろうな。

2012年1月10日火曜日

PGPの中身を抽出


 

PGPの中身だけ抜き出してみました。元々この写真とリスト表示部分を先に作って、周りにグループとユーザーの選択機能を追加したのがPGPなのです。

グループは日本の写真(Photos of Japan)、ユーザーを私に指定して表示させていますが、もちろんパラメータを変えれば表示が変わるようになっています。

← グループを”Bridge 「橋」
  ユーザーをaoriikaさんに指定

サムネイルの数も横幅に応じて変わります。但し横幅は著作権表示部分が隠れないように最小でも400pxに制限しています。

画面のキャプチャーではないので、サムネイルをクリックすれば、上に大きく表示しますし、Mapに切替えることも可能です。もちろん新しい写真がグループに追加されれば、すぐに最新の写真が表示されます。

名港トリトンの写真ではMapから、ストリートビューも見ることが可能です。

Panoramio Widget APIを使用してます。

2012年1月9日月曜日

junk0128-tools.appspot.com

ブログ等に埋め込み可能なツール等をまとめて7本Google App Engineへ移設しました。
http://junk0128-tools.appspot.com下に配置してます。トップに簡単なメニューがあります。

  1. random はPanoramioの写真をランダムに表示するアプリです。
  2. pgpcwinners はPanoramioコンテスト入賞作品をランダムに表示するアプリです。
  3. pgp_slideshow はPanoramioのグループ写真をスライドショーで表示するアプリです。
    上記の3本はガジェット化が可能です。[参照]
  4. Mini-Pano Photo to the Blog は以前のmini-panoramio互換品でPanoramioマップを表示するアプリです。
  5. Photo & Map to the Blog はPanoramioの写真をマップ付きでブログ等に埋め込むアプリです。
  6. Pano-Photo to the Blog はPanoramioの写真をブログ等に埋め込むアプリです。
  7. My Panoramio Photo サムネイルを人気度順に一覧するアプリです。

最後のMy Panoramio Photoはもうソースを弄りたくないアプリなのですが、ちょっとだけ変更です。画面上からorderの順番のメニューを消しました。いつまでもメニューに残していたので、今でも変更してみる人が居るようです。Panoramio Data APIではもう日付順に並べることは出来ないようです。

2012年1月7日土曜日

pgpシリーズをGoogle App Engineへ移設

pandm2blogに続いてpgp,pgp3,pgp4をGoogle App Engineへ移設しました。アプリの登録は「junk0128-pgp」の名前で行い、そこからのサブプログラムにしました。簡単なメニューをトップページに置いていますが、直接各々のサブプログラムへリンクしたほうが早いです。下記のpgp,pgp3,pgp4の文字部分にはgoo.glの短縮urlのリンクを付けていますので、短い方が好きな人はご利用ください。

  1. menu ・・・・・・・・・ http://junk0128-pgp.appspot.com/
  2. pgp    ・・・・・・・・・ http://junk0128-pgp.appspot.com/index1.html
  3. pgp3  ・・・・・・・・・ http://junk0128-pgp.appspot.com/index3.html
  4. pgp4  ・・・・・・・・・ http://junk0128-pgp.appspot.com/index4.html

旧justmystageはしばらく放置します。※サーバーの使用期間は現時点で来年の3月までです。

pgpシリーズはPanoramioのグループ写真を手軽に見るツールです。大きなグループでは数万枚もの写真があり、個々の写真を見ることが難しくなっています。そこでpgpとpgp4ではユーザーIDによる絞込みを行い、特定個人の写真を見ることが出来るようにしました。pgp3では見たいエリアを指定して、その中の写真を抽出するようにしています。これを使えば、鉄道関係のグループでは九州地区だけの列車等の写真を見ることなどが可能です。グループやユーザーのセレクター部分は「日本の写真(Photos of Japan)」用になってますが、グループ番号やユーザー番号は直接入力が可能です。

※各アプリケーションはPanoramio Widget APIGoogle maps Javascript API V3を使用しています。

2012年1月6日金曜日

Google App Engineを登録してみた

Google App Engineを使って無料でサイトを立ち上げる方法を読んで、Javascriptのプログラムを登録してみました。画像付きで分かり易く書いてあるので、説明通りにやっていけば簡単に使えるようになりました。

  1. アカウントの作成
    携帯電話のSMSで認証番号を受け取る。先ず第一の関門、q.vodafone.ne.jpが選択リストに存在しない。その他を選択し、番号を入力「+08190・・・・・・・・・」、しかしメールが届かない。携帯電話の設定で国際SMS拒否の設定を探すが見つからない。もしかしてとMy SoftBankを見てみたら、国際SMSを拒否設定にしてました。これを一旦解除してみて、再度やってみたらすぐにSMSを受信出来たので、また拒否設定に戻しておきました。※国際SMSの迷惑メールは今も届いているのか判らないけど・・・
  2. Pythonのダウンロード
    Pythonでアプリを作る予定は無いけど、これが無いとアップロードとかが出来ないようなのでダウンロードする。しかし、解説サイトに書いてあったV2.5は無かったので、V2.7をインストールした。
  3. Python 用 Google App Engine SDKをダウンロード
    GoogleAppEngine-1.6.1.msiをダウンロードして、インストールした。
  4. Deploy
    書いてある通りにやっていくと、作成したアプリケーションを実行可能になると書いてあるが、まだ何もコードを書いていないけどと思いながら実行すると「Hello World!」と表示された。取りあえず成功らしい。
  5. 「pandm2blog」でアプリケーションの登録を行ったので、ローカルにhtdocsホルダーを作成後、ソースをコピーして、これに合わせて「app.yami」を修正した。
  6. 再度Deploy
    再度Deployし、http://pandm2blog.appspot.com/で動作を確認 終了!
    (2012/01/09) 変更しました。http://junk0128-tools/pandm2blog.appspot.com/index.html

PanoramioもGoogle App Engineで動いているらしいので、全部Google上で動くようになりました。500 MB の永続ストレージと、1 か月に約 500 万ページ ビューまで無料で使えるらしいです。もったいないくらいだ。アプリは10個まで登録可能とのことなので、少し様子を見てから他のアプリも登録してみたいと思います。
pgp,pgp3,pgp4,MyPano,mpp2blog、これで6個。


Google App Engineを使用しています。

※写真の上にマウスポインターを置くと、写真のタイトルが表示され、クリックするとPanoramioサイトで写真と地図が表示されます。

Mapタブをクリックすると撮影地の地図を表示します。

(Panoramio Widget APIGoogle Maps APIを使用しています)

写真を挿入している部分のソースは下記の通りです。PanoramioのユーザーIDとフォトIDを書き換えれば写真が入れ替わります。アスペクト比が違ったり表示サイズを変える時は他の数字の変更が必要です。Windows Live Writerとdynamic templateを使えば、簡単に入力できるようになります。

<iframe height="292" src="http://junk0128-tools.appspot.com/pandm2blog/index.html?pId=63529465&amp;uId=1597930&amp;width=360&amp;height=262&amp;zoom=14" frameborder="0" width="390" align="left"></iframe>

2012年1月2日月曜日

pgp3に地図表示機能を追加(正月バージョン)

昨日のpgpに続いて、pgp3にも地図表示機能を追加しました。左側の検索範囲指定用の地図よりも、4段階ズームインした地図で写真の撮影位置を表示します。3枚目はペグマンをドラッグ&ドロップして、ストリートビューを表示した様子です。撮影場所付近を散策可能です。

標準表示

地図表示

ストリートビュー表示

pgpとほぼ同じ修正なので簡単に出来たのですが、動作確認中に起動時の表示状態にバグがあることに気付きました。写真の上に透明な地図が乗った状態になっていたので、写真上にマウスポインターを乗せてもイベントが発生せず、タイトル等の表示が出来ない状態になってました。慌てて、pgpの修正を行い、再アップロードしています。

2012年1月1日日曜日

pgpに地図表示機能を追加(元日バージョン)

pgpのリスト表示部分の右下に地図を表示するボタンを設けました。下記のように写真の部分が地図に入れ替わります。ボタンを再度押すと、元の写真表示に戻ります。地図表示ではペグマンをドラッグ&ドロップし、ストリートビューを見ることが可能です。地図を常に参照したい時はpgp4で、画面が小さなiPadやスマートフォンではpgpと使い分けしてみてください。※スマートフォンでは小さなボタンを押すのが非常に難しいけど…

標準表示 地図表示

動作確認は下記で行いました。

  1. Windows Xp:Firefox, Chrome, IE8 ,safari
  2. Windows 7:Chrome, IE9
  3. スマートフォン:005SH(Android 2.3.4)

Panoramio Widget APIGoogle Maps JavaScript API V3を使用しています。

p.s.(2012/01/02)
・safariでの動作確認を追加
・起動時に空のmapCanvasを非表示にしていなかったので、写真上でマウスが効かなくなってました。
「document.getElementById("mapCanvas").style.display = "none";」を追加 修正済み