Google Picasa Web API から比較的楽に画像を取得するやつがあまりにも酷かったので作り直した

前回ふと思い立って作った、Google Picasa Web API から特定のアルバムの画像を取得から表示まで、比較的楽に出来る何かを作った（仮）ですが、中身見たらあまりにも酷かったので作り直した。

Github

https://github.com/tnker/picasa.js

記述方法

とりあえず、JS読み込む。

<script type="text/javascript" src="picasa.js"></script>

一番シンプルな書き方

var picasa = new Picasa();
picasa.init("accountName","albumName");
picasa.get(function(data){/* コールバック */});

これだと、画像を取得した後にDOMが自動でセットされずにpicasa.getのコールバックの引数でDOMが渡されます。

前もって設定しておく書き方

var picasa = new Picasa();
picasa.init("accountName","albumName");
picasa.target = "#idName";
picasa.get();

picasa.getを実行する前に、picasa.targetに任意のidを指定しておけば画像取得等々が完了次第、指定したDOMにappendされます。

出力DOMカスタマイズについて

前回のは基本的に出力されるDOMがいじりにくいので、今回は出力DOMのカスタマイズをしやすいようにしました。

デフォルトで設定されてる出力されるDOM

<div>
    <h1><a href='[[link]]'>[[title]]</a></h1>
    <a href='[[link]]'><img src='[[thumbnail]]'></a>
    <dl>
        <dt>exposure</dt>
        <dd>[[exif.exposure]]</dd>
        <dt>flash</dt>
        <dd>[[exif.flash]]</dd>
        <dt>focallength</dt>
        <dd>[[exif.focallength]]</dd>
        <dt>fstop</dt>
        <dd>[[exif.fstop]]</dd>
        <dt>iso</dt>
        <dd>[[exif.iso]]</dd>
        <dt>make</dt>
        <dd>[[exif.make]]</dd>
        <dt>model</dt>
        <dd>[[exif.model]]</dd>
        <dt>time</dt>
        <dd>[[exif.time]]</dd>
    </dl>
    <blockqute>[[copyright]]</blockqute>
</div>

[[xxx]]のように書かれている部分が実際の値に置換される箇所です。実際に置換された状態が以下のような形です。

<div>
    <h1>
        <a href="http://lh5.ggpht.com/-UrlUHNR8pAE/TjrxiDEC87I/AAAAAAAAAX0/CoYvIBj1C6M/SDIM0597.JPG"></a>
    </h1>
    <a href="http://lh5.ggpht.com/-UrlUHNR8pAE/TjrxiDEC87I/AAAAAAAAAX0/CoYvIBj1C6M/SDIM0597.JPG">
    <img src="http://lh5.ggpht.com/-UrlUHNR8pAE/TjrxiDEC87I/AAAAAAAAAX0/CoYvIBj1C6M/s288/SDIM0597.JPG">
    </a>
    <dl>
        <dt>exposure</dt>
        <dd>0.1</dd>
        <dt>flash</dt>
        <dd>false</dd>
        <dt>focallength</dt>
        <dd>24.2</dd>
        <dt>fstop</dt>
        <dd>2.8</dd>
        <dt>iso</dt>
        <dd>200</dd>
        <dt>make</dt>
        <dd>SIGMA</dd>
        <dt>model</dt>
        <dd>SIGMA DP2S</dd>
        <dt>time</dt>
        <dd>1296879641000</dd>
    </dl>
    <blockqute>著作権をすべて留保する</blockqute>
</div>

デフォルトのDOMではなく自分でカスタマイズしたDOMを出力したい場合は.blockDOMプロパティーにDOMをセットしてください。

例）タイトルなどの要素は必要なくサムネイルのみをすべて出力したい

var picasa = new Picasa();
picasa.init("accountName","albumName");
picasa.target = "#idName";
picasa.blockDOM = "<img src='[[thumbnail]]' class='thumb'>";
picasa.get();

出力できる値：デフォルトキーワード

写真タイトル：[[title]]
サムネイル画像パス：[[thumbnail]]
原寸大画像リンク先：[[link]]
コピーライト：[[copyright]]
Exif情報露出：[[exif.exposure]]
Exif情報発光：[[exif.flash]]
Exif情報焦点距離：[[exif.focallength]]
Exif情報絞り値：[[exif.fstop]]
Exif情報 ISO：[[exif.iso]]
Exif情報カメラメーカー：[[exif.make]]
Exif情報カメラモデル：[[exif.model]]
Exif情報日時：[[exif.time]]

出力されるサムネイルのサイズ

var picasa = new Picasa();
picasa.thumbSize = 1; // 0：小　1：中　 2：大