SQLの窓

2017年12月05日


jQuery Columns を使って、Picasa API より アルバム一覧を表示する

Google+ のユーザID は、ログインした状態で、ブラウザに https://get.google.com/albumarchive を入力して Enter すれば URL の最後に付加されます。Picasa 時代に作成されたアルバムは、以下のリンクから表示してサイズを自由に指定できる画像 URL を手に入れる事ができます。

リンク先でユーザID を入力して一覧表示します


▼ アルバムリンクからギャラリー(画像をクリックすると拡大表示)


▼ リンクをクリックすると、HTML 取得画面



▼ PHP


▼ Shadowbox



▼ 以下、ブログ内でアルバムIDの一覧の表示
columns プラグインの環境の都合で、右下矢印画像が出ていませんが、動作に支障はありません

以下のフィールドにユーザID を入力して読み込みボタンを押すだけですが、ユーザID には数字以外の人も居るようでしたが、それでもちゃんと取得できました。

呼び出した JSON を読むには、整形が必要なので JSONLint を使用しました


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://winofsql.jp/if_skeleton/basic_06_columns/columns/js/jquery.columns.min.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/if_skeleton/basic_06_columns/columns/css/classic.css">

<input type="text" id="target_user" value="101280392108947207617">
<input type="button" value="読み込み" onclick="get_album()">
<div id="columns"></div>

<script>

var example = null;
function get_album() {

	var user_id = $("#target_user").val();
	if ( example != null ) {
		example.destroy();
	}

	$.ajax({
		url:'https://picasaweb.google.com/data/feed/api/user/' + user_id + '?alt=json',
		dataType: 'json', 
		success: function(json) { 

			var target = [];
			for( i = 0; i < json.feed.entry.length; i++ ) {
				if ( !json.feed.entry[i].gphoto$albumType ) {
					target.push( 
						{
							 'title' : json.feed.entry[i].title.$t,
							'numphotos':  json.feed.entry[i].gphoto$numphotos.$t,
							'albumid' : json.feed.entry[i].gphoto$id.$t
						}
					);
				}
			} 

			example = $('#columns').columns({
				data:target, 
				schema: [
					{"header":"タイトル", "key":"title", "template":"{{title}}"},
					{"header":"画像数", "key":"numphotos" },
					{"header":"アルバムID", "key":"albumid" }

				],
				size: 100,showRows: [50,100,200]

			}); 
		}
	}); 

}
</script>

関連する記事

Picasa が終了するので、Google フォトで登録した画像の URL を Picasa の API で取得する手順

jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法




【プラグイン:jQueryの最新記事】
posted by lightbox at 2017-12-05 20:30 | Comment(0) | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり