「Panoramio Widget API(パノラミオ ウィジェット API)」というものを使うと、以下のような写真のスライドショーを簡単にブログやサイトに貼り付けて使うことができます。
サンプルが用意されているので、一部分を書き換えるだけで後はコピーして貼り付けるとすぐ使えます。
例えば、タグにtokyoと書くと、東京で撮影された写真、東京に関する写真を表示できます。
あまり日本語の解説がないようなので、使い方のメモを残しておきます。
左:東京(Tokyo) 右:上海(Shanghai)
左:ドバイ(Dubai) 右:アフガニスタン(Afghanistan)
各写真をクリックすると、パノラミオのサイトに移動し、大きいサイズの写真と、写真が撮影された場所をグーグルマップ上で見ることができます。
風景写真が多いですが、動物や、車、飛行機、などの写真もあります。
以下のような写真の一覧を貼り付けることもできます。
左右の矢印部分をクリックすると、ちゃんと写真がスライドします。
パノラミオ公式サイト
パノラミオは2005年にスペインで作られたサイトで、2年後にグーグルが買収し、今は、グーグルマップ(Google Maps)やグーグルアース(Google Earth)の写真にこのパノラミオの写真が採用されています。写真を撮影した人が、緯度経度の位置情報や、地名などのタグとともに投稿できるのが特徴のようです。
毎月、アップされた写真の中からグーグルアースに掲載される写真が選ばれるので、それを目指して、写真好きの人が質の高い写真を投稿されているため、綺麗だなぁと感じる写真が多く、個人的には気に入っています。
Panoramio Widget APIの使い方
Panoramio Widget API公式サイト
利用条件は最下部のConditions of Useの部分。
いくつか利用方法がありますが、一番簡単なのはiframeというものを使う方法です。
iframeを使うと、写真を表示したい部分にコードを貼り付けるだけでOKです。
ただし、公式サイトにあるサンプルをそのまま貼り付けると、wordpressの記事の中の場合は、表示されませんでした(サイドバーはそのまま貼り付けて使えた)。
調べてみると、wordpressの記事の中でiframeを使う場合は別にプラグインを入れる必要があるという情報もありましたが、コードの中にある余計な空白を削除してあげると、プラグイン無しでちゃんと表示されました。wordpressの場合は、ビジュアルエディタの方に一度でも切り替えると、iframe部分は消えてしまうので、この点は注意が必要です。
余分な空白を削除したコードが以下
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?amp;width=200&height=190&tag=shanghai" frameborder="0" width="250" height="200" scrolling="no" marginwidth="0" marginheight="0"></iframe>
上のコードをコピペして記事中に貼り付けたのが以下
ちゃんと表示されています。
あとは、自分が表示したいようにカスタマイズします。
写真の大きさや、種類を決める方法
width=200&height=190
コードの中のこの部分で、写真の大きさを決めます。
width 横
height 高さ
縦横設定する箇所が2個ずつありますが、普通は同じにしておいて問題ないと思います。
tag=shanghai
この部分で、写真の種類を決めます。上の例だと上海関連の写真を表示しているので、タグに上海の英語表記であるshanghaiを指定しています。
英語しか受け付けないので、英語表記がわからない場合は、表示したい地名の英語を和英辞書か、検索エンジンで調べる必要があります。
tagには地名以外にも、natureやsunsetなどの単語も使えます。写真の数が多いのは圧倒的に地名です。
tagの代わりにsetを使うこともできます。
tag=shanghaiの部分を消して以下に代えると、それぞれ
set=all
(すべての写真)
set=public
(グーグルアースに採用されている写真すべて)
set=recent
(最近投稿された写真から順に表示)
となっています。
スライドショーの写真が切り替わる速度を変更することもできます。(標準設定を使う場合は何も設定しなくていい)
delay=2.5
(何も設定しないと標準のこの2.5秒)
変更したい場合は、タグの後ろに&を入れて以下のように付け加えます。
tag=shanghai&delay=1.5
以上で、スライドショーの設定は終わり。
次は写真の一覧をリスト形式で表示する方法。
まず、余分な空白を除いたコードが以下。
<iframe src="http://www.panoramio.com/wapi/template/list.html?tag=beach&width=400&height=200&columns=6&rows=3&orientation=horizontal" frameborder="0" width="400" height="200" scrolling="no" marginwidth="0" marginheight="0"></iframe>
上のコードをそのまま貼り付けたのが以下
設定項目は以下
tag=beach
(これはスライドショーの時と同じ)
width=400&height=200
(これもスライドショーの時とやり方は同じ)
columns=6&rows=3
(columnsは、横に並べる写真の数。rowsは縦に並べる写真の数。)
orientation=horizontal
(写真をスライドさせる方向、horizontal(水平方向)かvertical(垂直方向)のどちらかを必ず選択)
他にもいくつか設定ができるので、さらに興味がある人は、公式サイトを参考にするといいと思います。
以上、Panoramio Widget API(パノラミオ ウィジェット API)の使い方のメモ。