Search
  1. Flickr APIについて
  2. Open Source Flickr Photo Gallery Using jQuery〔jQueryを使用してFlickrの写真セットをギャラリー表示〕
  3. jQuery Flickr〔jQueryを使用してFlickrのデータを取得〕
  4. 写真や画像にウォーターマークを入れるツール〔PicMarkr〕
  5. Flickr badge作成ツール
  6. Flickrスライドショー埋込タグ生成ツール〔SlideFlickr.com/flickrSliDR〕
  7. splashr beta〔いろいろな形式でスライドショー表示するオンラインツール〕
  8. Slideco〔横長の写真スライドショーウィジェット作成オンラインツール〕
  9. Flickrの写真をギャラリー形式で見れるオンラインビュアーいろいろ

Flickr APIについて

2009/7/2

Flickr APIを利用するには、Flickrのアカウントはもちろんのこと、Flickr APIキーが必要です。

Flickr APIキーの取得するには

  1. Flickrにログイン後、Flickr Service:Apply for a new Api Keyへアクセスし、 個人利用(非商用利用)の場合は、【Apply for Non-Commercial key】ボタンをクリックします。

    Step 1 of 3: Choose the type of API key you needStep 1 of 3: Choose the type of API key you need
  2. 氏名とプロジェクトの説明を入力し、アプリケーションを適用するメールアドレスをプルダウンから選択します。 権利に違反しないことと、利用規約に同意するところにチェックを入れ、【Submit Application】ボタンをクリックします。

    Step 2 of 3: Tell us about your Non-Commercial API projectStep 2 of 3: Tell us about your Non-Commercial API project
  3. Flickr APIキーが発行されます。
    登録したAPIキーは、Flickr Services: Your API Keysからいつでも確認できます。

    Your API KeysYour API Keys

Flickr APIに関する詳細は、Flickr Service: API Documentationを参照してください。

Flickr API Request

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos
&api_key=APIキー&user_id=ユーザーID

取得するデータ数を指定

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos
&api_key=APIキー&ユーザーID&per_page=10

PHPで扱える形式でデータを受け取る場合

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=APIキー&ユーザーID&format=php_serial
php_serial
now coding ...
include/topic/blogparts_flickr/flickr_api_php_serial2.inc
設置サンプル
<?
#
# build the API URL to call
#

$params = array(
    'api_key'    => '7184354219ee84d6a0333a121a68a138',
    'method'    => 'flickr.photos.getInfo',
    'user_id'    => '22559849@N06',
    'photo_id'    => '3664935670',
    'format'    => 'php_serial',
);

$encoded_params = array();
foreach ($params as $k=>$v){
    $encoded_params[]=urlencode($k).'='.urlencode($v);
}

#
# call the API and decode the response
#

$url "http://api.flickr.com/services/rest/?".implode('&'$encoded_params);
// http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=7184354219ee84d6a0333a121a68a138&user_id=22559849@N06&format=php_serial&photo_id=3664935670
$rsp file_get_contents($url);
$rsp_obj unserialize($rsp);

#
# display the photo title (or an error if it failed)
#
    
if($rsp_obj['stat']=='ok'){
    $photo_title $rsp_obj['photo']['title']['_content'];
    echo "Title is $photo_title!";
    print_r($rsp_obj['photo']);
}else{
    echo "失敗";
}

/*
Title is ノルディック@オ・タン・ジャディス!

Array
(
    [id] => 3664935670
    [secret] => b94968ccbc
    [server] => 3220
    [farm] => 4
    [dateuploaded] => 1246091382
    [isfavorite] => 0
    [license] => 0
    [rotation] => 0
    [owner] => Array
        (
            [nsid] => 22559849@N06
            [username] => php_javascript_room
            [realname] => 
            [location] => 
        )

    [title] => Array
        (
            [_content] => ノルディック@オ・タン・ジャディス
        )

    [description] => Array
        (
            [_content] => ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんw 生地はもっちりとしていて、かみ締めるほどに美味しいです。
        )

    [visibility] => Array
        (
            [ispublic] => 1
            [isfriend] => 0
            [isfamily] => 0
        )

    [dates] => Array
        (
            [posted] => 1246091382
            [taken] => 2009-06-27 12:02:24
            [takengranularity] => 0
            [lastupdate] => 1246092200
        )

    [editability] => Array
        (
            [cancomment] => 0
            [canaddmeta] => 0
        )

    [usage] => Array
        (
            [candownload] => 1
            [canblog] => 0
            [canprint] => 0
        )

    [comments] => Array
        (
            [_content] => 0
        )

    [notes] => Array
        (
            [note] => Array
                (
                )

        )

    [tags] => Array
        (
            [tag] => Array
                (
                    [0] => Array
                        (
                            [id] => 22514527-3664935670-338
                            [author] => 22559849@N06
                            [raw] => food
                            [_content] => food
                            [machine_tag] => 0
                        )

                )

        )

    [urls] => Array
        (
            [url] => Array
                (
                    [0] => Array
                        (
                            [type] => photopage
                            [_content] => http://www.flickr.com/photos/22559849@N06/3664935670/
                        )

                )

        )

    [media] => photo
)
*/
?>

JSON形式でデータを受け取る場合

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos
&api_key=APIキー&user_id=ユーザーID&format=json
json
now coding ...
include/topic/blogparts_flickr/flickr_api_json.inc

RSSフィードを取得

http://api.flickr.com/services/feeds/photos_public.gne?id=ユーザーID
&lang=en-us&format=rss_200'

jQuery Flickr
jQueryを使用してFlickrのデータを取得

2009/7/2

jQuery Flickr

jquery.js、jquery.flickr-1.0.js、jquery.litebox.js

jQueryとFlickr APIを使用して、自分のアカウントのFlickrフィールドを取得し、Webページに写真を埋め込む方法が掲載されています。

FlickrのAPIキーが必要です。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Flickr | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.flickr-1.0.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.litebox.js"></script>
        <script type="text/javascript">
            $(function(){   
                $("#gallery-flickr").flickr({
                    api_key: "7184354219ee84d6a0333a121a68a138",
                    per_page: 14
                }); 
                $("#btnRefresh").click(function(){
                    $("#gallery").html("").flickr({
                        api_key: "7184354219ee84d6a0333a121a68a138",
                        per_page: 14
                    });
                }); 
            }); 
        </script>
        <!-- CSS -->
        <style type="text/css">
            .gallery ul {
                margin:0; padding:0;
                list-style:none;
            }
            .gallery li {
                margin:0; padding:0;
                list-style:none;
                display:inline;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.projectatomic.com/2008/04/jquery-flickr/'>jQuery Flickr</a> | 設置サンプル</h1>
<!-- CODE -->
<p>
    jQueryプラグイン初期設定を読み込み、<a href="http://www.flickr.com">flickr.com</a>に最近アップロードされた写真を取得して表示します。
</p>
<p>
    <input type="button" value="Refresh" id="btnRefresh" onclick="window.location.reload();" />
</p>
<p id="gallery-flickr" class="gallery">&nbsp;</p>
<!-- / CODE -->
        </div>
    </body>
</html>

写真や画像にウォーターマークを入れるツール
PicMarkr

2008/1/28

PicMarkr

写真や画像にウォーターマークを入れるオンラインツールです。 勝手に使われたくない写真や画像にCマークや著作情報のテキストなどを入れておけば、二次利用防止になります。

ローカルにある画像をアップロードしてもいいですし、なんと便利なことにflickrから直接画像をひぱってこれます。 また、ウォーターマークを入れた後、そのまま画像をflickrにアップロードすることも可能です。

ウォーターマークには、任意のテキストまたは自分でアップロードした画像を指定可能です。 以下で使用しているウォーターマーク画像は下図の透過PNGです。 「Tiled watermark」で画像を指定すると、画像の明度があがってしまうみたいですね(汗;

WatermarkWatermark
Text watermarkText watermark
Image watermarkImage watermark
Tiled watermark - textTiled watermark - text
Tiled watermark - pictureTiled watermark - picture

Flickr badge作成ツール

2008/1/28

Flickr: Make a badge

Flickrで提供されている、Badge作成ツールです。 生成されたコードをページに貼るだけで、写真ギャラリーが表示されます。

Badgeの表示形式は、HTML、Flashのいずれかを選択できます。 パブリックで公開している自分の写真(オプションでタグの指定可)、またはみんなの写真を表示できます。 枠線の有無、枠線色、背景色など、デザインのカスタマイズもできます。

Flickrスライドショー埋込タグ生成ツール
SlideFlickr.com/flickrSliDR

2008/1/28

SlideFlickr.com

Flickrのユーザー名またはURLを指定すると、写真スライドショーのページ埋込タグ(embed要素)を生成してくれるオンラインツールです。 切り替わるときにカチッと音が鳴ります。 スライドショーのサイズは、幅500×高さ500ピクセルです。 embed要素のwidth・height属性をいじると動作しなくなったので、サイズは固定みたいです。

flickrSliDR

FlickrのURLを指定すると、写真スライドショーのページ埋込タグ(embed要素)を生成してくれるオンラインツールです。 スライドショーのサイズは、好きなサイズに変更できます。 ただし、幅を300ピクセルより小さくすると、バー部分のレイアウトが重なっておかしくなります。

splashr beta
いろいろな形式でスライドショー表示するオンラインツール

2008/1/28

splashr beta

Flickrにある写真を、いろいろなスライドショー表示できるオンラインツールです。 可愛い系からシックなものまでデザインも豊富です。 作成したスライドショーのURLが生成されるので、ページにリンクを設置してもよいですし、友達にURLをメールで送ったり、いろいろな用途に使えますね。

使い方

  1. 写真を選択

    Flickr全体を対象にする場合は、タグを指定します。 自分の写真など、特定の写真に絞りたい場合は、ユーザー名、ユーザーID、メールアドレスを指定します。 デフォルトの表示枚数は25枚です。もっと増やしたい場合は、50枚、100枚に変更できます。

  2. ギャラリーの表示形式を選択

    「Populer」「Interactive」「HTML Players」「Flash Frames」のカテゴリから表示形式を選択します。 青い矢印をクリックすると、どのように表示されるかプレビューで確認できます。 どれにするか決まったら、ラジオボタンにチェックを入れます。

  3. ギャラリー表示URLを生成

    最後に、画面右上のNextボタンをクリック! 次画面で生成されたURLをクリックすると、スライドショーが表示されます。

Slideco
横長の写真スライドショーウィジェット作成オンラインツール

2008/1/28

Slideco

使い方

  1. ユーザー名入力

    flickrのユーザー名を入力して、Your photostreamボタンをクリックします。

  2. カスタマイズ

    ウィジェットの幅(%またはpx指定)、画像サイズ(square、thumbnail、medium、big)、表示画像枚数、ランダム表示の有無を指定します。

    Create your Slidemo!をクリックすると、Webページ貼付用コードと、OpenSocialやSNSなどに貼り付けられるボタンが表示されます。

Flickrの写真をギャラリー形式で見れるオンラインビュアーいろいろ

2008/1/28

Pviewr - Photo Gallery Viewer

「Flicker」、「Picasa」対応のオンラインビュアーです。 ユーザー名およびタグ検索で、見たい写真をギャラリー表示することができます。 ギャラリーの行数・列数、背景色、フルスクリーン表示の有無、ページ番号などの設定もできます。

PviewrPviewr

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women