SQLの窓

2016年02月27日


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


※ この画像は Google フォトで登録して Picasa API で取り出した URL を使用しています

Picasa Web Albums Data API の【重要】を読む限り、読み込みはサポート続きそうなので、以下の方法でしばらく対応できると思います。内容は簡単なので、JavaScript でもアルバムとか作れそうですし。( access-control-allow-origin: * である事は確認しました )

自分の ユーザID

Picasa の設定ページでもいいですが、アルバムや画像を表示した時にドメインの次に表示される数字です。これを使うとまずアルバムの一覧を取得できます。

https://picasaweb.google.com/data/feed/api/user/101280392108947207617?alt=json

アルバムの IDとプロパティの絞込み

ほぼこれで目的は達成されます

https://picasaweb.google.com/data/feed/api/user/101280392108947207617/albumid/6125016770423395377?alt=json&fields=entry%28content%29&imgmax=1600

imgmax=1600 は、適当でいいです。s1600 となるだけなので後で調整しますし。最初から s500 が欲しいのならば、imgmax=500 とするだけです。fields パラメータは、省略すると全てのデータを取得できます(正直必要無いです)

これだけでは該当する画像から URL を取り出すのがたいへんなので、JavaScript で 1時間くらい格闘すれば自分専用の URL 取得アプリは簡単に作れそうです。


関連する記事

Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

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



タグ:google
posted by lightbox at 2016-02-27 14:19 | Google | このブログの読者になる | 更新情報をチェックする

2016年02月25日


Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

▼ オリジナル
Moving on from Picasa

※ 冗長部分は省いています

Googleフォトの発売以来、私たちは、これはPicasaの将来のために何を意味するのか多くの疑問を持っていました。多くを考慮した後、我々は、Googleフォトで写真サービスに完全に集中するために、今後数カ月でPicasaを終了することを決定しました。我々は二つの異なる製品間での努力を分けるのではなく、より多くの機能を提供し、モバイルとデスクトップ全体に働く一つのサービスに着目する事によってはるかに優れた体験を作成することができると信じています。

私たちは、あなたのコンテンツにアクセスする簡単な方法を提供します。私たちは、あなたが期待できる変更のいくつかを以下に概説しました。

Picasaウェブアルバム
あなたがPicasaウェブアルバム内の写真やビデオを持っている場合、アクセスするための最も簡単な方法は、Googleフォトにログインすることであり、すべてのあなたの写真や動画がすでに存在することになります。 Googleフォトを使用して、アップロードし、あなたの思い出を整理するだけでなく、あなたのイメージを検索し、共有する事ができます。

しかし、Googleフォトを使用したくない人々のために、私たちは、あなたがあなたのPicasaウェブアルバムにアクセスするための新しい場所を作成します。そうすれば、あなたはまだあなただけの(あなたが今Googleフォトでこれを行うことになる)、作成、整理、編集アルバムすることができなくなり、Picasaウェブアルバムを、ダウンロードを表示、または削除することができます。

明確にするべき事の一つは、今は Picasaウェブアルバムを持っているあなたは、通常のようにそれを使用し続けることができます。(当社は2016年5月1日にこれらの変更をロールアウト開始します)

デスクトップアプリケーション
2016年3月15日の時点で、我々はもはやPicasaデスクトップアプリケーションをサポートすることはありません。すでにこれを利用している人のために動作し続けますが、我々はそれを更に発展させず、将来のアップデートはありません。あなたがGoogleフォトに切り替えることを選択した場合、あなたはphotos.google.com/appsでデスクトップアップローダを使用して写真や動画をアップロードし続けることができます。

最後に、開発者のために、我々はまた、Picasa APIの一部の機能を終了します。

この移行がご迷惑をおかけして申し訳ございませんが、我々は、最高の可能な体験を提供することを目的にこれをやっていることを保証します。 Googleフォトは、私たちは将来的にあなたのための素晴らしい経験と機能を構築するための優れたプラットフォームを提供する新しい製品です。


関連する記事

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

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

Picasa のサムネイルの使い方



タグ:google Picasa
posted by lightbox at 2016-02-25 11:34 | Google | このブログの読者になる | 更新情報をチェックする

2016年02月19日


Picasa のサムネイルの使い方

Google が、Picasaを終わらせるようですが、以前よりGoogle フォトやGoogle+で同様のURLが使えていました。Google+ はすでにGoogle フォトに切り替わっていますので、今後はGoogle フォトの画像を右クリック等で取得する事になります。

但しこの方法では、Google の公式なものではないので、突然画像が表示出来なくなる可能性は覚悟する必要があります

▼ 古い仕様
画像 URL の基本仕様

1) 保存の画像形式(png、jpg等)はオリジナルの形式で保存される
2) s999 形式のサイズは長辺に適用される
3) s999 を省略すると適当な大きさになる
4) s999 は、実際の大きさを越えても実際の大きさにしかならない
( 実際のサイズは、Chrome ならばタイトルに表示されます )

現在では、s999 の後ろに -Ic42 が付加されていますが、当時に取得した URL は有効のままです(但し今の URL から -Ic42 を省く事はできません )。
また、Google+ では w999-rw-no と h999-rw-no が使えているので、w999-Ic42 と h999-Ic42 も使えます。これは、幅かあるいは高さを優先させてサムネイルを取得できます。但し、w と h を使う方法は公式ではありません。s999-Ic42 も公式のドキュメントはありませんが、Picasa のサービスの一つとして取得できる埋め込み URL 内で使用されているので、余程の仕様変更が無いかぎり使えるものと思います。
※ オリジナルサイズは、右サイドに表示されています ※ URL は、画像の情報から取得します( 顔部分は避けて下さい )
Picasa では、画像をアップロードすると、URL がパラメータとなってその大きい画像内の大きさの画像であれば自由な大きさの画像を供給してくれます。その場合のURL が QueryString ではなく URL そのもので構成されています。

例えば以下は、幅 128px ですが、オリジナル画像のは、1600×1200 なので、s1600 以内であれば自由自在です。
画像表示サンプル
<img src="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s128/b15architecture_exteriors014.jpg" style='border:solid 1px #000000' />

▼ s200


▼ s400


▼ s555


関連する記事

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

Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

Picasa を使った、一枚の画像でサムネイルも兼ねる画像ウインドウの表示コード

コード取得ツール : 誰でも簡単に 画像を使った Shadowbox が使えます



タグ:google
posted by lightbox at 2016-02-19 13:11 | Google | このブログの読者になる | 更新情報をチェックする

2016年02月05日


Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

2016/2/5 : ボタンの順番を変えました。
( Twitter / はてな / Facebook / Google+ )
また、自由に変えやすいようにコードに改行を挿入しました

2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました

Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。

ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。

正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。
Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
対象URL
Twitterテキスト
facebook アプリID 966242223397117 ( デフォルトの appid が使えるようです )
※ Shareボタンにする

『単純な Google+1ボタンにする』場合は、対象URL が表示されているページとなります。『単純な Google+1ボタンにする』のチェックを外すと、対象URL が必要になります。

ブログのトップベージのように、記事が複数ある場合は、上のテキストエリアのものを貼り付けて、下側のテキストエリアはページの最後に一度だけ実行されるようにします。

▼ Seesaa で、Facebook 無しの記事下に貼り付けるコード
<div> 
<table> 
<tr><td> 
<div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"> 
</td><td> 
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" /></a> 
</td><td> 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-lang="ja" data-text="<% article.subject %>"></a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
</td></tr> 
</table> 
</div> 

▼ Seesaa の記事 HTML の最後に貼り付けるコード( Facebook 無し ) 
<!-- google --> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
<!-- hatena --> 
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
Twitter 用としては、Seesaa では、data-text="<% article.subject %>" にする必要があります。

ボタン情報

Google +1ボタン
はてなブックマークボタン
Twitter buttons
Facebook Like Button
Facebook Share Button

関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』
Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )


posted by lightbox at 2016-02-05 21:26 | WEBサービス | このブログの読者になる | 更新情報をチェックする

Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )

かなり前から、Seesaa のソーシャルボタンが表示されなくなったのは気がついていたのですが、どうせ仕様変更だろうと放置していましたが、少し気になったので調べてみるとやはりそうでした。( 2013-06-05 時点の記述です )

Seesaa の公式の内容

設定> 詳細設定> ソーシャルボタン: ブログ・ヘルプ

内容は、『リニューアルに伴うテンプレート記述方法の変更』です。つまり、古い仕様で書かれている部分を新しくして下さいとの事。

まず、古い記述( 記事コンテンツの HTML 部分の 『posted by』の直前にあります )
<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8">
//<![CDATA[
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | remove_emoji | jsescape | tag_strip %>";
seesaa_blog_url = "<% site_info.blog_url %>";
//]]></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>
この仕様では、毎回 JavaScript が読み込まれて実行されていましたが、昨今 PC や通信速度の向上より、一括でやったほうがいいとなったのだと思います。よって以下のようにまるごと変更
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>
で、一括部分は、『記事コンテンツ』の HTML 部分の最後のところに以下の内容を追加します。
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bl-bookmarks.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
var bookmark_services = "<% blog.bookmark_service %>".split('-').join('').split(",");
var seesaaBookmarks = new blBookmarks({bookmark_services:bookmark_services, blog_url:"<% site_info.blog_url %>"});
seesaaBookmarks.exe();
</script>
但し、このままでは横に並ばないので、外部 CSS を ヘッダ部分に追加します。
<link rel="stylesheet" href="http://blog.seesaa.jp/css/user-common.css" type="text/css" />

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

▼ 2013-06-05 時点では Google+ はブックマークの中だった
で、ここからが改造。以前から Google+ ボタンとは相性が悪かったせいか(どうかは解りませんが)、はてなブックマーク、Facebook、Twitter 以外のボタンは『ブックマーク』としてまとめられるみたいなので、Google+ボタンを外に出るようにしてみました。
現在は改造しなくても外に出てるようです

※ よって、以下は現在必要ありません。
外には出るんですが、バグってるみたいです。結局下のようにしなきゃなりません。また、その場合は Seesaa の設定の Google+ ボタンは OFF にします。

まず、最初に変更した部分の DIV の中に Google+ 用の DIV を貼り付けます。
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"><div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"></div></div>
<% /if %>

そして、記事コンテンツの HTML の最後に以下を貼り付けます
<!-- google --> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
そして、CSS を追加すれば、Google+ ボタンは一番左になってしまいますが、使えるはずです。
これは使わなくていいです。右端に並ぶはずです。
.bookmark div {
	float: left!important;
}

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得




Seesaa独自タグ簡易リファレンス

タグ:Seesaa SNS ブログ
posted by lightbox at 2016-02-05 21:25 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2016年02月04日


livedoor Blog で、Twitter カードを使用する

Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます )

関連する記事

Seesaa ブログで Twitter カードを使用する方法

livedoor Blog のブログ設定(PC/カスタマイズ)

Twitter カードの目的を考えるて、まず個別記事ページを設定します。livedoor Blog ではすでに OGP の設定が仕様として含まれている( <$OGP$> )ので、まずその下に以下のような Twitter 用のメタ要素を書き込みます。
※ 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザID" />
<meta name="twitter:image" content="デフォルトの画像の URL" />
※ summary_large_image は大きな画像の表示です

デフォルトの画像は、記事別の画像を指定しない場合に表示される画像を URL で用意します。普通に Google の Picasa の画像が使えます。また、livedoor Blog では、この twitter:image の記述が無い場合は、『ブログアイコン』で指定した小さな画像が使われてしまいます。これは、Facebook 側(※1)で指定されているもので、Twitter カードはその指定の画像を利用することができます。
※1: <meta property="og:image" content="プロフィールアイコン(管理画面で設定)" />

なので、世の中のサンプルでは、先に OGP の記述があって、その後に Twitter カードの指定になっています。

記事毎に画像を変えるには

Twitter カードの メタ要素の指定は、ページのどこに書かれていても有効なようです。しかも、後から見つかった内容が最後に有効になっています。ですから、以下のような記述を記事の先頭に書くだけで有効になります。
<meta name="twitter:image" content="記事用画像のURL" />
それ以外にも、livedoor Blog には見出し画像という投稿項目があるのですが、これは og:image の内容を変えるものなので、この一連の設定ではヘッダ部分にすでに Twitter カード用のデフォルト画像を指定してしまっているので、変更しても Twitter カード側が優先されて、ライブドアの見出し画像は無効になります。

ライブドアの見出し画像を使いたい場合は、twitter:image を含むメタ要素を削除する必要があります。そしてその場合は、画像を事前に livedoor Blog にアップロードしておいて選択する必要があります。

トップページ用に注意する事

『ブログ基本設定』のブログの説明は、空では動作しません。また、デフォルトの画像は、記事毎のページのものと同じである必要はありません


関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』

関連するライブドアのドキュメント

Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)




posted by lightbox at 2016-02-04 23:53 | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり