Search

参照:Panoramio Widget API

Panoramio Widget APIの使い方

2012/5/17

Panoramioのウィジェットは、以下のいずれかの方法でWebサイトに埋め込めます。

  • HTMLテンプレート(iframe版)でウィジェットを組み込む
    プログラミングの知識がなくても、iframeでWebサイトにPanoramioの写真を簡単に埋め込めます。 4種類のテンプレートが用意されており、iframeのsrc属性に指定するURLを変更するだけでOK。
  • JavaScriptライブラリを使用してウィジェットを組み込む
    Javascriptライブラリを使用してWidget APIにアクセスすることで、ウィジェットの見た目や動作を制御できます。 iframe版より柔軟なカスタマイズができます。

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にする。
«name='list'に指定可能»
オプション名
columns写真リストウィジェットに表示する写真の列数を数値で指定。
rows 写真リストウィジェットに表示する写真の行数を数値で指定。 複数の行と列を指定すると、写真のストリップの代わりにグリッドを得ることが可能。
orientation リストの方向を指定。指定可能な値は「vertical」「horizontal」のいずれか。
矢印の位置、スクロールの方向、写真の並べ替えが決まる。
写真のストリップ(またはグリッド)が縦か横かなど、リストの形はrowsとcolumnsオプションで決まる。
«name='photo_list'に指定可能»
オプション名
list_sizeリストに表示する写真の数を指定。
position ウィジェットにおける写真リストの位置を指定。
指定可能な値は、left,top,right,bottom。
«name='slideshow'に指定可能»
オプション名
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&amp;
width=420&amp;
height=280&amp;
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&amp;
width=420&amp;
height=280&amp;
bgcolor=%23eeeeee&amp;
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&amp;
width=410&amp;
height=280&amp;
bgcolor=%23eeeeee&amp;
columns=5&amp;
rows=3&amp;
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&amp;
width=240&amp;
height=410&amp;
bgcolor=%23eeeeee&amp;
columns=3&amp;
rows=5&amp;
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&amp;
width=420&amp;
height=210&amp;
bgcolor=%23eeeeee&amp;
list_size=6&amp;
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&amp;
width=240&amp;
height=240&amp;
bgcolor=%23eeeeee&amp;
list_size=6&amp;
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&amp;
width=240&amp;
height=240&amp;
bgcolor=%23eeeeee&amp;
list_size=6&amp;
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&amp;
width=240&amp;
height=240&amp;
bgcolor=%23eeeeee&amp;
list_size=6&amp;
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&amp;
width=240&amp;
height=240&amp;
bgcolor=%23eeeeee&amp;
list_size=6&amp;
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&amp;
width=410&amp;
height=280&amp;
bgcolor=%23eeeeee&amp;
columns=5&amp;
rows=3&amp;
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&amp;
tag=France&amp;
width=410&amp;
height=280&amp;
bgcolor=%23eeeeee&amp;
columns=5&amp;
rows=3&amp;
orientation=horizontal"
frameborder="0" 
width="410" height="280" 
scrolling="no" 
marginwidth="0" marginheight="0">
</iframe>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women