Beach Resort Photoclip

rss（FEED）を自分でタイピングして静止画と動画を混在させるのは、写真のところだけ Picasa のHTMLテンプレートで作ってあとは FLV に変換した動画に関しての記述を rss ファイルと html の任意の場所に入れ込んでいけばいいので、根気さえあれば 簡単なんです。

写真とムービーを混在させたDemo

Picasa がエクスポートした画像やファイル類に動画コンテンツを加える

1. MOV形式の動画などからエンコードして FLV 形式の動画を作る。
2. 作った動画 (●●●.flv) をimagesフォルダに入れる。
3. 動画のサムネイルを画面キャプチャーなどして作る。
4. 作ったサムネイル (●●●.jpg) を thumbnails フォルダに入れる。
5. Picasa がエクスポートした photos.rss に以下の動画の<item>を動画の数だけ追加していく。

<item>
    <title>Title<title>
    <link>Link</link>
    <guid>  </guid>
    <media:thumbnail url="thumbnails/●●●.jpg"/>
    <media:content type="video/x-flv" url="images/●●●.flv"/>
</item>

6. Picasa がエクスポートした html  にサムネイルが表示されるように編集する。
7. まとめてサーバーにアップロードしてアップしたフォルダ内の index.html にリンクを張る。

まぁ、このやり方はホテル写真集のほうでは使えそうなので結果が出せたのはありがたいのですが、できれば、こう、すべてバックグラウンドでrssが生成されてほしいんですよね。

もうちょっと検索してみますか。。。

Cooliris というアドオンについて

クールに Cooliris を閲覧するにはブラウザに Cooliris をインストールする必要があります。
下記のオフィシャルサイトからダウンロードできますので興味をお持ちの方はアクセスしてみてください。なお対応しているブラウザはIE、Firefox(Win&Mac)、Safari(Mac)です。

http://www.cooliris.com/

Cooliris を利用してFlickr 内にあるご自身のアルバムをご覧になると結構「悦」入ります(笑)また、YouTube も Cooliris に対応しているサイトなので今までと違った感じで動画が鑑賞できます。

静止画は Cooliris 内でどのように表示されるのかわかりましたが、
動画に関してはイマイチ理解できていないので地味にテストしています。

予定ではシームレスで表示されるはずなのですが、人生予定通り行かないことのほうが多くて

追記：2008-10-08 11:47:06
1回目は失敗しました(苦笑) orz
mrssの中に動画の関してのFEEDが無いから当たり前と言えば当たり前か。。。

ファイル形式：FLV

ファイル形式:MOV

YouTube

何も表示されなかったらふたたびまたたび悶絶モードだ

まずはこの投稿のために Flickr のアカウントを取りに行きました
そう、特に必要性を感じていなかったので私は Flickr のアカウントは持っていないのでした。

Flickr : Official Site Top Page

Wikipediaによると

Flickr（フリッカー）は、デジタルカメラなどによる写真を共有するコミュニティサイトである。個人で撮った写真をウェブ上で整理・分類・展示しておけるほか、見知らぬ人と共有して互いにコメントを書き込むこともできる。こうした画像掲示板やソーシャル・ネットワーキング・サービスのようなコミュニティとしてユーザーに人気が出ただけでなく、ブロガーの間で写真の共同保管・共同利用の場所としても広く使われることで巨大化した。

とのことです。

まぁ、そのあたりのことは個々に調べていただくことにして早速本題に入りましょう。

せっかく Flickr にアップロードしている写真、まずは見てもらわないことには始まりません。
そのためブログサービスでは Flickr にアップロードしている自分の写真のサムネイルをブログのサイドバーなどに表示させるいろいろなウィジェットが存在します。
私がこのブログで使っている WordPress というブログソフト専用のプラグインでもキーワード 「Flickr」 で検索してみたところかなりの数のプラグインがヒットしました。

そこで今日はひとつの手段として Cooliris の Embeddable 3D Wall を使って Flickr にアップロードしてある写真一覧をブログに表示させてみようと思います。ちなみにその手順は Cooliris のオフィシャルサイトに載っているものをわかりやすく説明しただけです(笑)。
サンプルは自由度の高いlivedoorブログで試してみました。
残念ながら Exblog は <object> タグが使えないので設置不可です。

なおブラウザによって（WEB閲覧の環境によって） Full Screen が表示されなかったり
Full Screen になったあと動作が停止したりまします（私の環境において。動作停止はIEのみ）。
いろいろやってみましたが、大丈夫なときもあればダメなときもあると言った感じです。
が、Full Screen にしない限り、非常に満足度の高いものだと思います。

Sample

• このブログの投稿内に掲載した写真を30投稿分表示させて写真には投稿記事へのリンクを張ったタイプ（トップページのみに表示） これは画像、ビデオ、音楽等の FEED (mrss) を拾わないといけないので表示させたいサイトが mrss を配信していないと無理です。
  
  livedoorブログ:ブログ研究所（トップページ）
• 本投稿はこちら。
  Flickr にアップしてある写真を Set （アルバム）単位で表示し Set をクリックするとSet の中の写真が表示されるタイプ（個別記事ページのみに表示）またそれぞれの写真はその写真の Flickr のページへリンクされていてオンマウスで description も表示されます。
  、、、Set の数が少なくてすみません
  
  livedoorブログ:ブログ研究所（個別記事ページ）

貼り付けるコード

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="760" height="450">
    <param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf" />
    <param name="flashvars" value="feed=api://www.flickr.com/?user=●●●" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <!--[if !IE]>-->
        <object id="coolirisSWF" type="application/x-shockwave-flash"
            data="http://apps.cooliris.com/embed/cooliris.swf" width="760" height="450">
        <param name="flashvars" value="feed=api://www.flickr.com/?user=●●●" />
        <param name="allowFullScreen" value="true" />
        <param name="allowScriptAccess" value="always" />
    <!--<![endif]-->
    <div><p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash</a></p></div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

Cooliris Developers : Flickr Support ! より転載
上記のコードを所定の場所に貼り付ければ作業完了です。
なお青字と赤字の部分は下記のような編集が必要です。

オプション （ご自身で編集が必要な箇所）

青の数値は横幅 (width) と高さ (height) です。
オフィシャルサイトのコードが 760px × 450px という比率で記載しているので横幅をご自身のブログのカラム幅にあわせる場合は同じ比率で縮小するのがベストだと思います。
たとえば横幅 500px にするとしたら 760 : 450 ＝ 500 : ? 、、、内項の積は外項の積に等しい、、、ということで高さを 296px にするということ。
算数の「比」はいつまで経っても役に立ちますね。それにひきかえ理科で覚えさせられた元素記号は私の生活の中で役に立たないったらありゃしない

Flickr の FEED を拾う赤字のところは3つのパラメーター（オプション）が指定できます。

1. 自分のユーザー名を指定してすべての Set （アルバム） を表示させる （ ?user= ）

   api://www.flickr.com/?user=username
   

   青字の username の所に自分のユーザー名を入れるとご自身の Set （アルバム）が一覧で表示されます。

2. 直接任意の Set （アルバム）を表示させる （ ?album= ）

   api://www.flickr.com/?album=11111111111111111
   

   青字の 11111111111111111 はこういった感じで

   http://www.flickr.com/photos/username/sets/11111111111111111/
   

   set の URL の最後に表示されている数列です。

3. Flickr での検索結果を表示させる （ ?search= ）

   api://www.flickr.com/?search=puppy
   

   検索ワードにヒットしたものが表示されます。

どこに入れるか

livedoorブログの場合は

• トップページ
• 個別記事ページ
• カテゴリアーカイブ
• 月別アーカイブ

4つの html テンプレートがありますのでどこに入れるかはご自身の判断となります。

また、テンプレート内のタグはお使いのHTMLテンプレートによってまちまちでしょうからどこに入れるか確定することはむずかしいですが、私のトップページの場合は

</head>
<body>
<div id="container">
<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>
<div id="blogcontainer">
<div id="wrapper">
<div id="content">

ここに前出のコードを挿入

<div id="blog">
<$IndexNavigator$>
<!-- Loop Start -->

に挿入しています。

HTMLテンプレート内で <object> タグが使えるブログサービスであれば Cooliris を表示させることは可能だと思います。。。試してはいませんが(笑)

それではみなさん、すてきな週末を

今日も引き続き Cooliris ネタです。

Picasa のテンプレートで生成された photos.rss をそのまま使うと Cooliris の左上にはネット上でよく目にするオレンジ色の FEED アイコンが表示されます。

このデフォルトの FEED アイコンが表示されているところに

オリジナルのアイコンを表示させるには photos.rss ファイルをテキストエディター等で開き
2つほど記述を加えます。

デフォルトの photos.rss の記述

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">

<channel>

 <title></title>

上記の箇所に

• xmlns:atom=”http://www.w3.org/2005/Atom”
• <atom:icon>http://www.hogehoge.com/images/logo.png</atom:icon>
  （グレーの部分はアイコン画像のありか）

この2行を加え

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<rss version="2.0"  
xmlns:media="http://search.yahoo.com/mrss" 
xmlns:atom="http://www.w3.org/2005/Atom">

<channel>
<atom:icon>http://www.hogehoge.com/images/logo.png/<atom:icon>

このように編集します。

ここでの画像はpng ファイルとなっていますが
Cooliris のオフィシャルサイトによると jpg でも gif でもOKとのことです。
私はこんな画像 （透過画像なので背景画像の斜線が見えています）

をアップロードして使いました。ちなみに画像の高さは 「26px がよい」 と書いてありました。

1箇所替えただけでなんとなく愛着の湧くスライドショーになりますね。
比較的簡単な作業なので試してみてはいかがでしょうか。

このカスタマイズも含めた詳しい解説は下記のページに載っています。

Cooliris Developers : http://developer.cooliris.com/

ではみなさん、すてきな週末を

9月25日：6個中1個 第413回抽選結果（みずほ銀行）
1個じゃCanon EOS 5D Mark II 買えんわな
4つでも無理じゃしょーがないな

Google が無料で配布している画像管理・編集ソフト 「Picasa」 を使って
Cooliris で閲覧してもらうページを作ってみましょう。

Picasa で Cooliris Slide Show のページを作る手順

1. Picasa をインストールします。すでにインストールされている場合は 2. へ
   インストールがまだの場合は
   Picasa: Google から無料ダウンロード
   http://picasa.google.co.jp/intl/ja/download/thanks.html
   からダウンロードしてインストールします。
2. インストールしただけではCooliris のスライドショーは作れませんのでテンプレートというものをインストールします。
   Picasa 用にいろいろなテンプレートが配布されていいますがひとつひとつインストールするのは面倒なのでこの際イッキに19種類のテンプレートを入れてしまいましょう。
   インストール方法は過去の投稿
   • Picasa に19のテンプレートを自動で入れる

   を参照してください。

3. Cooliris のテンプレートを使ったWEBページ作成も作業的にはいままで当サイトでご紹介したテンプレートと一緒ですのではじめての方はまず以下をご一読ください。
   • Picasa & Autoviewer
   • Picasa & Simpleviewer
   • Picasa & 3D Carousel
   • Picasa & Lightbox

   簡単に説明しますと

   1. Picasa を起動してスライドショーとしてWEB上にアップしたい写真が入っているフォルダを選択し右クリックします。
   2. コンテキストメニューの一番下にある [HTMLページとしてエクスポート] をクリックします。
   3. 「HTMLページとしてエクスポート」のウィンドウが開きますので、エクスポートする写真のサイズやPCのどこに保存するか指定します。
   4. 「ウェブ ページのテンプレートの選択」 というウィンドウが表示されます。
      今回はここから

4. PicLens Immersive Slide show をクリック（以前はPicLensという名称でした）
   
5. 以下のようなフォルダとファイルが生成されます。
   
6. フォルダごとサーバーにアップしindex.html にリンク張ります。
   たとえば生成されたcooliris-demoというフォルダをhogehoge.com にアップする場合のWEBページのアドレスは
   http://www.hogehoge/cooliris-demo/index.html （index.html はなくてもOK）
   となります。

ざっとこのような手順なのですが、できあがったスライドショーはブラウザにCooliris がインストールされているかされていないかでまったく別のスライドショーがモニター上に表示されます。

• 多少いじっていますが今回テンプレートで生成されたページはコレ。
  
  ページ上に表示されているサムネイルをクリックすることでスライドショーが開始されるのですが、、、 Demo
• お使いのブラウザに Cooliris がアドオン（プラグイン）としてインストールされていない場合
  
• お使いのブラウザに Cooliris がアドオン（プラグイン）としてインストールされている場合
  

Cooliris はいまのところ左記のブラウザにインストール可能なようです。

ブラウザ別Cooliris ダウンロードページ

と、ここまで書いてちょっとCooliris のページを覗いたら昼間はなかったFlickr 用のFlash が新たにサポートされていました。Cooliris Developers:Flickr Support!

どんどん活用方法が増えていって知識がついていかない

追記：
ちなみに今回 Picasa で生成したものと同様のページを作る
Cooliris 謹製のPicLens Publisher というソフトもあります。

PicLens Publisher
こちらはPCにインストールして使います（Win Vista、XP、Mac OSX 10.4 and above 用）

あと WordPressプラグインも配布されています。
とにかくいろいろあるんです