Picasaにupされた画像を確実に落とす方法

Picasa Web アルバムでは公開した画像を閲覧は可能だがダウンロードは出来ないように設定することが出来る。つまり、閲覧のみ可能に設定することが出来る。



この設定にすると『アルバムをダウンロード』、『写真をダウンロード』というアンカーテキストが表示されなくなり、オリジナルの画像をダウンロードできなくなる。

右クリックから画像を保存することも出来るが、オリジナル画像がある一定の大きさより小さい場合はサムネイルとオリジナル画像は同じなので問題ないが、オリジナル画像が大きいと右クリックではオリジナル画像をダウンロード出来ない。

そこで、Picasaに公開されている画像をダウンロード設定に関わらず、ダウンロードするちょっとした方法を公開。

1. 表示されている画像を右クリックして[画像だけを表示]を選択する

2. 表示された画像のアドレスの末尾『?』を含めてそれより後ろの文字列を削除して[Enter]キーを押下する

例)

http://lh3.ggpht.com/xxxxxx/R2SUSbSNvUI/AAAAAAAAAC4/Rij2NOUd5_I/Castle.jpg?imgmax=800
『?imgmax=800』の部分を削除したURLで再表示するとオリジナルの画像が表示される。

IE7で試したが、右クリックメニュー[画像を表示]がマスクされているのでこの方法は不可。
やるならFirefoxで。また、この方法を試す場合、自己責任で行って下さい。

Bloggerに新しく追加された『登録リンク』とは如何に

新しく追加されたページ要素(widget)『登録リンク』を試してみたが、好印象。たまに使えるものが追加されるのでちょっと得した気分になる。

FeedBurnerを使用していてもフィード リダイレクトの設定を行っていればちゃんとリダイレクトされると思ったが、『Atom』を選択すればリダイレクトされるが、それ以外のボタンを選択すると何やらリダイレクトされていない動きの模様。

何故ワザワザ『redirect=false』としているのか?意味不明ですね。

念のため、フィード リダイレクトの設定は下図参照。


何より、これを使用すればFeed登録ボタンだらけのブログから解放される。

見た目にも美しくなかったのでこれが解消できるは有難い。そして、皆同じボタンを使用すればそれだけ認知されやすく、より登録者数の増加が見込めるのではないだろうか。

登録リンクの追加方法は[レイアウト] - [ページ要素]から[ページ要素を追加]をクリックして開かれるダイアログから『登録リンク』を選択します。



GoogleがまだBloggerに手を加えている辺りからして、力の入れ具合が伺える。

Google Trendsの遊び方

単一のキーワードで見てもあまり楽しくない。
他と比較してこそ結果に面白みが沸くというものだ。
そして比較するキーワードのチョイス次第で興味の沸く結果を見ることができるだろう。
ただし、同時にSearch出来るキーワードの数は5つまでである。
と言うことで、比較できそうなキーワードをチョイスして見た。

プログラミング言語:C#,VB,Java,Delphi,C++

どれも土日にグラフが急激に落ちているあたりがおもしろい。
そしてJavaは他と比べて約2倍。ここまで差があるとは。

おバカ三人:里田まい,スザンヌ,木下優樹菜

熊本のトラフィックが多いことが結果に大きく影響している。
熊本が地元のスザンヌの人気は地元の応援が大きいと。

ブレイクするか?!若手タレント


■エントリー■
■次候補■
本音を言えば、上に挙げた人のほとんどを私は知らない。 必死にググってチョイスしたが、他にも注目すべき方がいるかも知れない。

新しい機能『Trends for Websites』を試す

Hotなブログサービス

  • hatena.ne.jp
  • ameblo.jp
  • livedoor.jp
  • fc2.com
  • goo.ne.jp
年末年始にガクッと下がっているあたりは、暇はあるけどブログは見ない書かないということか? ここにBloggerとYahooがない理由 BloggerはGoogleのサービスため。GoogleのサービスはSearchしても結果が出ないため。Yahooは現段階ではYahoo全体の結果しか出せないので一つ飛び出る結果となるので除外することとした。

三大スポーツメーカー『adidas』,『Nike』,『Puma』


人気とほぼ比例した結果となり面白くなかった。

以上、もっと面白い比較が思いついたら追記でアップしていきたい。

Google Page Creatorの使い方

『Google Page Creator』はHTML、CSSに関する知識がなくとも以下(下図)のようなサイトを開設できるよう設計されたWebサービスです。

Site Page Preview:
GPC_Site_Preview

HTMLのタグや内容を編集することも可能ですが、headタグに触れられないため、スタイルシートやJavaScriptをheaderで読み込むことは出来ないなど、少々制限された仕様となっています。

しかし、Bodyタグ内で読み込むという少々強引なやり方で実装可能となる場合もあります。

例えば、Adsenseを埋め込む方法はこちらで紹介されています。

利用可能な容量は100MBとなっています。

Google Page Creatorにログイン

『Google Page Creator』を利用するにはGoogleアカウントが必要です。

以下からログインして、サイトを新規作成します。

Google Page Creator Login :
https://www.google.com/accounts/ServiceLogin?service=pages&continue=http://pages.google.com:80/&ltmpl=yessignups


ログインすると初回の場合、サイトの新規作成を行います。

その後『Site Manager』へ移動し、ここでページの追加やファイルのアップロードを行います。



Site Manager Preview:
GPC_Site_Manager



まだ日本語対応していないので初めは 少々使いづらいかもしれませんが、このサービス自体はとてもシンプルなため、すぐに操作の仕方は覚えられるでしょう。

サイトの設定

[Site Manager] - [Site settings]からサイトの設定を行うページに移動します。

GPC_Site_settings



『Settings』で行う設定一覧
  • Site Name:サイトのタイトル
  • SiteURL:サイトのURLの確認
  • Homepage:トップ(ホーム)となるページの指定
  • Image Upload:画像をアップロードする際に適切なサイズに変換するか指定
  • Adult content:アダルトコンテンツか否かを指定
  • Hide this site:サイトの公開/非公開を指定

Webページの編集

『Site Manager』で作成したWebページのサムネイルをクリックすると該当ページを編集するエディターが開きます。



こちらでWebページの編集作業を行います。

右上にある『Change Look』リンクからテンプレートを選択できます。


現在使用できるテンプレートの数は41種類です。
GPC_Change_Look



『Change Look』のすぐ右、『Change Layout』からページのカラム数を設定します。
GPC_Change_Layout



画面右下にある『edit html』リンクからHTMLを直接編集することができます。




画面右下にある『add widget』リンクからiGoogleなどにも使用される、公開されているWidgetを簡単に埋め込むことが可能です。





新しいサイトの作成

Site Manager画面の右上にあるコンボボックスのリストから『Create another site』を選択すると、新しいサイトを作成することができます。



Google Page Creatorで作成出来るサイトの数は5つまでです。

※5つまで作成可能ということですが、私の場合、なぜか3つまでしか作成できませんでした。

作成出来るサイトの数:


Site settingsにて、サイトを非公開にすることが可能ですが、アップロードした画像は読み込むことは可能なので、こちらにアップロードしたファイルを他サイトで使用するなどの使い方もあるかと思います。

新しい機能

まで試してはいませんが、携帯からの利用もできるようになったようです。

詳しくは以下のサイトにてご確認下さい。
http://pages.google.com/-/whatsnew.html


追記)

GPCでは一度作成したWebサイトを削除することが出来るか?

この件に関してはこちらこちらを拝見し、結論としては削除することはできないようです。


関連記事

Google AJAX Feed APIを使用して最新記事を表示する

Google CodeにあるGoogle AJAX Feed APIを利用してブログに最新記事(Recent Posts)を表示する。

サンプルにある『AJAX Dynamic Feed Control』(下記参照)を使用します。

AJAX Dynamic Feed Control
http://www.google.com/uds/solutions/dynamicfeed/index.html

こちらでベースとなるコードを生成し、その後変更が必要な部分を編集します。
このまま使用したのではいろいろと不都合があるので、Optionの設定で自分用にカスタマイズしましょう。


変更可能なプロパティの設定例:

numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false

  • numResults - 表示するフィードの数
  • displayTime - メイン(上部)に表示される記事の表示時間
  • fadeOutTime - 表示されている記事がフェイドアウトする時間
  • pauseOnHover - 下部に表示されるフィード(文字列)にマウスを合わせたときにその該当記事が表示されるか否か
  • title - タイトルを指定
  • linkTarget - 表示するウィンドウの指定。
  • stacked - 複数のフィードを指定したときにフィード別にタイトルを表示する
  • horizontal - "true"に設定すると横長一行のスタイルになる
その他詳しくは以下のページで確認して頂きたい。


Class Reference
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html


コード例)
<head>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" media="screen" />
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [{url: 'http://yas-hummingbird.blogspot.com/feeds/posts/default'}];
var options = {
numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "Recent Posts",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
google.load('feeds',"1");
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
</head>
<body>
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
</body>

上記の『google.load('feeds',"1");』この"1"はAJAX Feed APIのバージョンを表しています。

Google AJAX Feed API への登録

その他、API キーの登録については下記のページにて解説、登録できますの参照下さい。

Google AJAX Feed API への登録
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html

Googleが提供するAJAX JavaScriptライブラリを使用する

Googleの『AJAX Libraries API』というサービスを利用することで、jQueryやprototypeなどのjsファイルをWeb上の何処かにアップロードする必要がなくなります。

分かりやすく言えば、Googleがどうぞご自由に使って下さいと、Web上に公開しているJavaScript ライブラリを使わせてもらうということですね。

閲覧者側のメリットとして、利用者が増えればキャッシュから読み込むことで、閲覧時に不要な読み込み処理が減るということでしょうか。

使い方は最初にjsapiを読み込み、google.loadで読み込みたいJavaScriptライブラリを指定するというものです。

例として、以下のコードをheadタグ内に入れます。

<script src="http://www.google.com/jsapi"></script> 
<script>
   google.load("jquery", "1.2.6");
</script>

『"1.2.6"』というのはjQueryのバージョンですが、上記の場合、
『http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js』
と、このような形でjQueryのjsファイルが読み込まれます。

今後のメンテも考慮してバージョンを『"1.2"』とすると、1.2.xの最新バージョンが読み込まれます。
『"1"』とすると1.xの最新バージョンが読み込まれます。
上記どちらの書き方をしても現時点で最新バージョンである1.2.6が読み込まれました。

Google Feed APIやGoogle Search APIとの併用も可能で実際にこちらで使用しています。

GF APIやGS APIを使用する場合はAPIKeyが必要となりますが、Ajax Libraries APIでは必要ありません。

現在使用出来るライブラリは以下の5つです。

実際に使用する場合は上のファイルだけでなく、プラグインも使用するので別途アップロードしなければならないだろうが、このサービスを利用すれば今後のメンテが楽になりますので利用する価値はあるでしょう。

Blogger に使えそうな画像表示 Javascript ライブラリ etc...

Bloggerにupした画像のもう少しマシな見せ方はないかとちょっと探してみた。

LightBoxでシンプルに

Lightbox 2
http://www.huddletogether.com/projects/lightbox2/

動作が安定しているのでライトボックスの中ではこれがおススメかな?
『Script.aculo.us』と『prototype』を使用しています。


jQuery lightBox plugin
http://leandrovieira.com/projects/jquery/lightbox/

上の『2』と見た目にはほぼ同じ。
これは jQueryのプラグインになります。
上の『2』も含めてサンプルがあるのでそれをベースに移植すれば簡単に出来そう。

その後、これを使用してみたが動作に不満があったので『Highslide JS』に換えた。
参考:『lightBox 0.5』から『Highlside JS』に変えた訳


Lightbox JS
http://www.huddletogether.com/projects/lightbox/

これが一番シンプルで簡単に取り入れられそう。
該当のjsファイル以外にライブラリを必要としないところが良い。
上記『LightBox2』の初期バージョンのようだ。


ThickBox
http://jquery.com/demo/thickbox/

ソースを見ると、かなりシンプルなつくりなのが解る。故に動作もシンプル。
jQueryのプラグインで、jQueryのサイトから。



FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

画像を拡大表示させるときのEffectは「おおぉ」と思わせるが、それ以外の作りについては雑な印象。



facebox
http://famspam.com/facebox

これもjQueryを使用します。
jQueryを使用したものの中では一番 cool な印象。


ライトボックスの亜種は他にも多数存在するのでここにないモノもいろいろ試してみるのも良いかと。


おススメ

Highslide JS
http://highslide.com/

これはいいなぁと思うがなんか面倒そう。サンプルだと画像の左上に「Powerd by Highlight JS」と出るのだが、これ消しても問題ないのか?実際は出ない?設定で非表示にすることも可能。
結局私はこれに落ち着いた。



スライドさせるなら

JQuery Cycle Plugin
http://malsup.com/jquery/cycle/

いろんな動作が見られて「こんなことができるのか」と関心。ただブログに画像貼り付けるだけじゃ面白くないので、こう言う見せ方したらスペースも取らないし良いかな。



複数の画像を表示させるパーツとして

jQuery: jqGalScroll v2.1
http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/

縦 or 横方向にスライドさせるのだが中身を見ると例えば横方向にスライドさせるなら画像のコンテナのWidthが画像の合計Width分取っているようでちょっと腰が引ける。
低スペックのPCだと重くないか?

追記:jQueryのバージョンアップに伴い現在使用不可。(2009/03/10)


AJAX SlideShow
http://www.google.com/uds/solutions/slideshow/index.html

GoogleのAPIサンプル。このサンプルではFrickerの画像を引っ張ってきて表示している。シンプルだからFrickerのユーザーが自分のブログに載せたいならこれ使うのが手っ取り早い。


何をチョイスするにしてもHTML(XML)とJavascriptについて多少の知識は必要で、またjsファイルをアップロードする場所の確保も必要です。

『lightBox 0.5』を触ってみた

HTML,XML,CSSを触り出したら必然的に触りたくなるAjax関連。
ということで、簡単そうで視覚的にも分かりやすい『lightBox 0.5』を触ってみました。

『SkyDrive』の方の実験と兼ねていたので少々手間取ったがやってることは実に簡単で、Javascriptのことを余り知らなくてもイケちゃいます。

Web上の何処かにjsファイルをアップロードしなければならないのでGoogle Page Creator(GPC)の方に置いて実装してます。

表示される画像はSkyDriveにupして一つ一つ引っ張ってきてます。(えらい面倒で二度とやらない!)

で、こちらがそのjQueryを使用したページですのでお暇なら触ってみてください。
実は画像選びや色を統一する加工の方が大変だったりして…
あまり苦労の跡が感じられないのが悲しかったりする。



jQuery lightBox plugin:
http://leandrovieira.com/projects/jquery/lightbox/
こちらが今回使用したlightBoxの入手先。
私でも理解できるほど簡単で、英語ができなくても理解できるdemoも用意されているので、ただ外国のサイトから取って貼り付けただけの日本の似非Geekのサイトを見るよりよっぽど参考になるので見てきてほしい。

追記:
『lightbox』と名のつくモノは複数あり、このlightbox0.5はお薦めしません。
理由は以下の投稿にてご確認ください。
humming bird: 『lightBox 0.5』から『Highlside JS』に変えた訳

SkyDriveにupしたファイルをBloggerで使用出来るか

今回は『SkyDrive』にアップロードした画像をGoogleで使用出来るか試す。

もちろん公開されている画像はBloggerやGoogle Page Creatorでも使用可能であるが、SkyDriveでは非公開に設定している画像は開こうとすると下に示すサインインの画面に飛ばされる。

Sign in to Windows Live Storage:


つまり持ち主以外開けない

この動作の方が健全ではないか?

むしろ非公開画像が使用(表示)できるGoogleの『Picasa ウェブ アルバム』の方がおかしいのでは?

『Picasa』のスタンスとしては検索しても引っかからないけど、表示はできます、ということだろうが(そういえば何処かに書いてあったような...)他人に全く触れさせないようにすることが出来るような選択オプションがあっても良いように思う。

結論として、『SkyDrive』にupしたファイルは公開しないと使えない

Bloggerにも使えるWindows Live Writerを試す

Windows Live Writer』(以下WLW)をインストール、使用してみました。
これはWebサービスではなく、パソコンにインストールして使用するアプリケーションです。

Windows Liveのブログサービス『Spaces』のみならず BloggerWordPress など他のブログサービスでも使用可能です。

ツールバーまたは基本メニュー[ブログ] - [ブログアカウントの追加]から自身のブログを登録することでWLWから簡単に投稿が行えるようになります。

複数ブログを持つ人にとっては一つのインターフェイスから作業を行えるのは効率的で利便性が良いのではないでしょうか。

もちろん投稿後の編集も可能です。基本メニュー[ファイル(F)] - [開く]またはツールバーの[開く]から過去の投稿を読み込むことができます。

サムネイルを編集

設定により、サムネイルに影を付けたり、画像に文字を挿入することができます。

Webレイアウト

エディタとしてのありがたい機能はWebレイアウト表示できること。
これは、ブログデザインを読み込み、同じレイアウトで記事を書くことができるというものです。

Webレイアウト表示例:

これによって記事を書きながら投稿後のWeb上での実際の表示が確認できるので改行、折り返しなどにも気を使っている人には大変有難い機能です。

Webプレビュー

[F12]キー押下することで実際のWebページとほぼ同じ状態で表示することができます。

HTMLを直接編集

[Shift] + [F11]押下でHTMLタグを直接書き込むことができます。

プラグイン

WLWの右サイドバー[プラグインの追加]からプラグインを追加することが可能です。
(ジャンプした先はなぜか「アドイン」と表示されているのですが…)
公開されているプラグインの数は少ないですが、使えるものもあります。
Web Thumbnail』を使用してみたのですが、作成されるサムネイルに必ずスクロールバーが入っているのがちょっと気になります。
Amazonアソシエイトを挿入するプラグイン『Amazon Associate Japan』は便利です。

以前は絵文字を挿入するプラグインがあったはずなのですが、見当たらないようですね。

その他

  • クリップボード経由で画像の貼り付けが可能
  • テーブルの挿入が簡単で列(Column)の幅(width)の設定もドラッグで可能

投稿可能なブログサービスの確認はこちらから

WLWにFC2のブログを登録する方法はこちら

補足)
FC2ブログの場合、euc-jpなので『euc-jp(既定)』で良いかと思われましたが、

UTF-8に変更しないと
  • 過去の記事の取得ができない。
  • 一度投降した記事を再度読み込むと文字化けする。

「設定の詳細」で文字コードをUnicode(UTF-8)に変更しましょう。

Windows Live - 『SkyDrive』を試す

以前から気にはなっていた『Windows Live』、今回Windows Live サービスの一つである『SkyDrive』について。

SkyDriveとはWeb上に様々な形式ファイルをアップロードできる個人スペースなのですが、利用可能な容量が5GBであることを知ってしまったので、Live ID取得してしまいました。

5GBあると動画もupしようかな?という気になってきます。
が、実感としてはやはり上りは遅い

どの形式のファイルがアップロード可能かは、また調べておきたいのですが、何らかの制限があることを想定してもそれはGoogleも同じこと。

やはり注目すべきはその容量!

『Picasa ウェブ アルバム』は容量1GB、アップロード出来るファイルは画像と動画のみ。
『Google Page Creator』は100MB。

もちろん『公開』、『非公開』の設定も可能で、一つのファイルサイズが50MB以下であること、という制限がある。

Googleのサービスと比べても好印象。個人的にはファイルのバックアップに利用するつもりでいる。

Googleや他も直に追従してくるだろうが、常に前を行くものが評価されるのは当然である。

珍しくMicrosoftの肩を持つような話だが、近い将来パソコンという端末にHDの容量不足という問題が解消される日が来るのでは?という期待を持たせるこれらのサービス。

「必要なファイルはすべてWeb上にある」という日が来る、かも知れない。

Blogger Template - N.Y

Blogger Templateの2作目が出来たのでupします。

IEとFirefoxでの表示の違いをなるべく無くそうと時間が掛かってしまいましたがなんとか公開できるレベルになったかな?ということで。

誰ぞ使ってやって下さい。

Blogger Template - N.Y:
http://blogger-template-02.blogspot.com/

背景色の白がもつ『品』が感じられれば good job! なんですが…

コメントお待ちしています。

Blogger - テンプレートの構造

出力されたhtmlファイルの構造をスプレッドシートに起こしました。

テンプレートを弄るときの参考になるかと思います。

一応ここでも見られますがGoogleアカウントをお持ちなら、開いて見た方が良いかと。

Google Docsで開く



補足として『comment-footer(class)』は三ヵ所に使われているのでスタイルシートで指定するときは気を付けた方が良いようです。

もう少し分かりやすくするため、PDFファイルにしてアップしました。


PDFファイルのDownloadはこちらにて。

ファイル名は『Blogger_Template_構造図.pdf』です。

Blogger Template - 3S3

Bloggerのテンプレートを作成しました。

デザインはシンプルに背景や線の色を簡単に変えられるよう配慮しています。

詳しくは該当のプレビューページをご覧下さい。

Blogger Template - 3S3:
http://truecolorsalphagoogler.blogspot.com/

これからボチボチとupしていこうかと思います。

2作目も既に出来上っていますので近日upとなる予定です。

いろいろ弄っていたらどんどんBloggerに詳しくなっていくと同時に初心を忘れ、知っているだろうと勝手な判断がなされていないかと心配です。

説明不足が無いよう配慮して行きたいなぁと思う今日この頃でした。

Google Sites - サンプルサイト一覧

イントラネットや特定のユーザー間のみで使用するケースが多いのか、検索してもあまりヒットしないGoogle Sitesを利用したサイトですが、既に活用しているところが幾つかヒットしたので参考まで。



自然環境デザインスタジオ
http://sites.google.com/a/nenv.jp/designstudio/
ここはAppsを使用しているのでしょう。


しゃべる - イントラネット版 Microblog
https://sites.google.com/site/shovelx/


Chromium Developer Documentation
http://dev.chromium.org/Home

サンプルサイト

Google Sitesで紹介しているサンプルサイト一覧です。
実際に見て、触れて何が可能か、どんな機能があるのかを知ることができます。

このサービスを有効活用するために、既にあるGoogle グループというサービスとの違いを理解するだけでも良いのではないでしょうか。

Ski Club:
http://sites.google.com/a/googleuniversity.org/ski-club/Home

Team Project:
http://sites.google.com/a/altostrat.com/project-eggplant/Home

Company Intranet:
http://sites.google.com/a/organic-city.com/intranet/Home

Classroom:
http://sites.google.com/a/googleclassrooms.org/mrs-richau/Home

PlayGroup:
http://sites.google.com/a/jotspot.com/sample-playgroup/Home

Family website:
http://sites.google.com/a/jotspot.com/sample-family/Home


チュートリアルムービーです。
英語ですので…
例え分からなくともサラッと目を通しておいて損はないでしょう。

Tutorial ムービー:

Recent Posts