Google Picasa Web API から特定のアルバムの画像を取得から表示まで、比較的楽に出来る何かを作った(仮)
あまりに酷かったので、作り直しました
こんばんわ、わたしです。結構前からですが、Google+始まりましたね。 WaveやBuzzの二の舞にはならなさそうで一安心です。
そんなGoogle+ですが、アカウントを持っていることでGoogleのWebアルバム扱いのPicasaの利用上限がある一定の条件内で解放されるというお得な特典があります。
無料の容量アップ: Google+ では写真用に無料の保存容量をご利用いただけます。その場合、写真は自動的に 2048 ピクセルにサイズ変更されます。Picasa ウェブと同様に、15 分以下の動画のアップロードは無料です。
上記のようなこともあり、Picasa上にいっそのこと全部突っ込んでAPIもありそうだからそれで色々まとめたら便利かなー的なノリです。
APIの口の部分は下記サイトを参考にしまんた。
Picasa.js(仮)について
※注 超ザックリ実装です。
名前は、思いつかなかったので分かりやすくPicasa.jsとかつけてます。
今出力できる項目
- 写真タイトル
- 写真サムネイルおよびリンク
- Exif情報
- 著作権表示
【使い方】読み込みファイル編
Picasa.jsはこちらからダウンロードしてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="picasa.js"></script>
【使い方】設定編
<head>
<!-- 中略 -->
<script type="text/javascript">
Picasa.init('GoogleアカウントID', '表示したいアルバム名');
// 写真タイトル表示フラグ
Picasa.title = true;
// EXIF情報表示フラグ
Picasa.exif = true;
// 著作権表示フラグ
Picasa.copyright = true;
// サムネイルサイズ(0:小 1:中 2:大)
Picasa.size = 2;
// 取得した画像をAddする要素名
Picasa.target = '#picasa';
// 画像の取得開始
Picasa.get();
</script>
</head>
<body>
<div id="picasa"/>
</body>
上記のような設定をして、取得を行うと以下のような結果で出力されます。
<div id="picasa">
<div class="item">
<h3>タイトル</h3>
<div class="thumbnail">
<a href="http://lh3.ggpht.com/-IJvQ61MEVVk/TiHoL-oOHII/AAAAAAAAASA/rp4Bt7CDoLI/SDIM1567.jpg"><img width="288" height="192" src="http://lh3.ggpht.com/-IJvQ61MEVVk/TiHoL-oOHII/AAAAAAAAASA/rp4Bt7CDoLI/s288/SDIM1567.jpg"></a>
</div>
<ul>
<li class="exposure">0.001</li>
<li class="focallength">24.2</li>
<li class="fstop">4.0</li>
<li class="imageUniqueID">78dda8dda61233a2bb56f3c9e1129c56</li>
<li class="iso">50</li>
<li class="make">SIGMA</li>
<li class="model">SIGMA DP2S</li>
<li class="time">1308315550000</li>
</ul>
<div class="copyright">ALL_RIGHTS_RESERVED</div>
</div>
<!-- その他写真繰り返り -->
</div>
EXIF情報とかいらない場合は、フラグ落としてもらえれば消えます。 あとは、CSSで好き勝手ゴニョってもらえればいいと思います。
適当実装なので、好き勝手いじってもらって大丈夫です。(需要あるのか分かりませんが) 何か問題等あれば@tnkerまで、それではでは。