PanoramioPanoramio Widget API：HTMLテンプレート（iframe版）
- Panoramio Widget APIの使い方
- HTMLテンプレート（iframe版）
- 単一写真ウィジェット〔photo〕
- 単一写真ウィジェット（自動再生機能付き）〔slideshow〕
- 写真リストウィジェット〔list〕
- 単一写真ウィジェット＋写真リストウィジェット〔photo_list〕
- 例：指定したグループの写真セットを表示
- 例：指定したタグが付いている特定のユーザーの写真セットを表示
HTMLテンプレート（iframe版）
2012/5/17
PanoramioウィジェットをWebページにiframeで埋め込めるHTMLテンプレート。 iframeのsrc属性に指定するURLを変更するだけでウィジェットの種類とそのデザインを変更できます。
構文 - iframeのsrc属性に指定するURL
ウィジェットのテンプレート名とオプションをURLで指定します。
http://www.panoramio.com/wapi/template/テンプレート名.html?オプション&オプション...
テンプレート名
写真をブラウザに表示するための見た目要素。4種類提供されています。
| テンプレート名 | 値 |
|---|---|
| photo | 単一写真ウィジェット。 |
| slideshow | 自動再生機能付き単一写真ウィジェット。 再生/一時停止ボタン付き。 |
| list | 写真リストウィジェット。 |
| photo_list | 単一写真＋写真リストウィジェットを組み合わせたウィジェット。 |
オプション
テンプレート
| オプション名 | 値 |
|---|---|
| user | 指定したユーザーIDのユーザーの写真をすべて選択。 |
| group | 指定したグループIDにあるすべての写真を選択。 |
| tag |
指定したタグが付いた写真をすべて選択。 userとtagを併用すると、指定したタグのあるそのユーザーの写真が選択される。 |
| set |
all：すべての写真を選択。 public：Google Earthに選ばれた写真をすべて選択。 recent：最近アップロードされた写真を選択。 |
| order |
デフォルト」古い写真から新しい写真の順に表示。 date_desc：新しい写真から古い写真の順に表示。 |
ウィジェットデザイン
'name'で指定したテンプレート名によって指定可能なオプションが異なります。
| オプション名 | 値 |
|---|---|
| width | ウィジェットの幅をピクセル単位で指定。 |
| height | ウィジェットの高さをピクセル単位で指定。 |
| bgcolor | 背景色を指定。CSSの色名、%23ffffff。#は、%23にする。 |
| オプション名 | 値 |
|---|---|
| columns | 写真リストウィジェットに表示する写真の列数を数値で指定。 |
| rows | 写真リストウィジェットに表示する写真の行数を数値で指定。 複数の行と列を指定すると、写真のストリップの代わりにグリッドを得ることが可能。 |
| orientation |
リストの方向を指定。指定可能な値は「vertical」「horizontal」のいずれか。 矢印の位置、スクロールの方向、写真の並べ替えが決まる。 写真のストリップ（またはグリッド）が縦か横かなど、リストの形はrowsとcolumnsオプションで決まる。 |
| オプション名 | 値 |
|---|---|
| list_size | リストに表示する写真の数を指定。 |
| position |
ウィジェットにおける写真リストの位置を指定。 指定可能な値は、left,top,right,bottom。 |
| オプション名 | 値 |
|---|---|
| delay | 自動的に次の写真にスライドするまでの秒数。 |
単一写真ウィジェット
photo
2012/5/17
「photo」テンプレートは、一度に1枚の写真を表示する「単一写真ウィジェット」です。
リクエストで取得した写真セットから一度に1枚の写真を表示します。
結果の写真セットが複数枚ある場合は、矢印ボタンが表示され、で前後の写真に移動できます。
※ 一定タイミングで写真を自動再生したい場合は、「slideshow」テンプレートを使用します。
設置サンプル: Panoramio Widget API iframe版 - photoサンプルを見る
<!-- ★単一写真ウィジェット
tag=versaille // ウィジェットの表示する写真のタグ（ここではベルサイユ）
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
-->
<iframe
src="http://www.panoramio.com/wapi/template/photo.html?
tag=versailles&
width=420&
height=280&
bgcolor=%23eeeeee"
frameborder="0"
width="420" height="280"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
単一写真ウィジェット（自動再生機能付き）
slideshow
2012/5/17
「slideshow」テンプレートは、「単一写真ウィジェット」に自動再生機能が付いたウィジェットです。
ウィジェット内には、「再生/一時停止」ボタンが表示され、ウィジェットが表示されると同時に自動再生が開始します。 前後の写真に移動する矢印ボタンは表示されません。
「delay」で、次の写真に自動的にスライドする時の速度を指定できます。
設置サンプル: Panoramio Widget API iframe版 - slideshowサンプルを見る
<!-- ★単一写真スライドショーウィジェット
tag=versaille // ウィジェットの表示する写真のタグ（ここではベルサイユ）
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
delay=2.5 // スライド速度
-->
<iframe
src="http://www.panoramio.com/wapi/template/slideshow.html?
tag=versailles&
width=420&
height=280&
bgcolor=%23eeeeee&
delay=2.0"
frameborder="0"
width="420" height="280"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
写真リストウィジェット
list
2012/5/17
「list」テンプレートは、一度に複数の写真を表示する「写真リストウィジェット」です。
リクエストで取得した写真セットから一度に複数枚の写真を表示します。
結果の写真セットに含まれる写真の数が、ウィジェットの列×行数を超える場合は、矢印ボタンで前後が表示されます。
ウィジェットの向きは「horizontal」（水平方向）、「vertical」（垂直方向）のいずれかを指定可能。
指定した向きによって、前後写真へのスクロール方向が変わります。
設置サンプル: Panoramio Widget API iframe版 - listサンプルを見る
<!-- ★写真リストウィジェット
tag=versaille // ウィジェットの表示する写真のタグ（ここではベルサイユ）
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
columns=3 // ウィジェットの列数
rows=5 // ウィジェットの行数
orientation=vertical // スライド方向
-->
<h4>horizontal</h4>
<iframe
src="http://www.panoramio.com/wapi/template/list.html?
tag=versailles&
width=410&
height=280&
bgcolor=%23eeeeee&
columns=5&
rows=3&
orientation=horizontal"
frameborder="0"
width="410" height="280"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
<h4>vertical</h4>
<iframe
src="http://www.panoramio.com/wapi/template/list.html?
tag=versailles&
width=240&
height=410&
bgcolor=%23eeeeee&
columns=3&
rows=5&
orientation=vertical"
frameborder="0"
width="240" height="410"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
単一写真ウィジェット＋写真リストウィジェット
photo_list
2012/5/17
「photo_list」テンプレートは、単一写真＋写真リストウィジェットを組み合わせたウィジェットです。
写真リストから選択した写真を、単一写真として大きく表示するものです。
写真リストの配置場所は「left」、「top」、「right」、「bottom」のいずれかを指定可能です。
設置サンプル
設置サンプル: Panoramio Widget API iframe版 - photo_listサンプルを見る
<!-- ★単一写真＋写真リストウィジェット
tag=versaille // ウィジェットの表示する写真のタグ（ここではベルサイユ）
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
list_size=6 // リストに表示する写真の数
position=bottom // 写真リストの位置
-->
<iframe
src="http://www.panoramio.com/wapi/template/photo_list.html?
tag=versailles&
width=420&
height=210&
bgcolor=%23eeeeee&
list_size=6&
position=bottom"
frameborder="0"
width="420" height="210"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
<hr />
<iframe
src="http://www.panoramio.com/wapi/template/photo_list.html?
tag=versailles&
width=240&
height=240&
bgcolor=%23eeeeee&
list_size=6&
position=bottom"
frameborder="0"
width="240" height="240"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
<iframe
src="http://www.panoramio.com/wapi/template/photo_list.html?
tag=versailles&
width=240&
height=240&
bgcolor=%23eeeeee&
list_size=6&
position=top"
frameborder="0"
width="240" height="240"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
<iframe
src="http://www.panoramio.com/wapi/template/photo_list.html?
tag=versailles&
width=240&
height=240&
bgcolor=%23eeeeee&
list_size=6&
position=left"
frameborder="0"
width="240" height="240"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
<iframe
src="http://www.panoramio.com/wapi/template/photo_list.html?
tag=versailles&
width=240&
height=240&
bgcolor=%23eeeeee&
list_size=6&
position=right"
frameborder="0"
width="240" height="240"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
例：指定したグループの写真セットを表示
2012/5/17
テンプレートオプションのgroupを使用したサンプル。 Panoramioの「Paris」グループ（グループID：6174）にある写真を写真リストウィジェットで表示します。
設置サンプル: Panoramio Widget API iframe版サンプルを見る
<!-- ★写真リストウィジェット
group=6174 // ウィジェットの表示する写真のグループID
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
columns=3 // ウィジェットの列数
rows=5 // ウィジェットの行数
orientation=vertical // スライド方向
-->
<h5>パリの写真</h5>
<iframe
src="http://www.panoramio.com/wapi/template/list.html?
group=6174&
width=410&
height=280&
bgcolor=%23eeeeee&
columns=5&
rows=3&
orientation=horizontal"
frameborder="0"
width="410" height="280"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>
例：指定したタグが付いている特定のユーザーの写真セットを表示
2012/5/17
テンプレートオプションのuser、tagを併用したサンプル。 F1BDUさんが撮影した写真の中から「France」タグが付いてる写真のみ写真リストウィジェットで表示します。
設置サンプル: Panoramio Widget API iframe版サンプルを見る
<!-- ★写真リストウィジェット
user=3971036 // ウィジェットに表示する写真のユーザーID
tag=France // ウィジェットに表示する写真のタグ（ここではベルサイユ）
width=420 // ウィジェットの幅(px)
height=28 // ウィジェットの高さ(px)
bgcolor=%23eeeeee // ウィジェットの背景色
columns=3 // ウィジェットの列数
rows=5 // ウィジェットの行数
orientation=vertical // スライド方向
-->
<h5>フランスの写真 by <a href="http://www.panoramio.com/user/3971036">F1BDU</a>さん</h5>
<iframe
src="http://www.panoramio.com/wapi/template/list.html?
user=3971036&
tag=France&
width=410&
height=280&
bgcolor=%23eeeeee&
columns=5&
rows=3&
orientation=horizontal"
frameborder="0"
width="410" height="280"
scrolling="no"
marginwidth="0" marginheight="0">
</iframe>