どうして動画なんかでアップしたかというと、昨日動画も撮れるという Canon の EOS 5D Mark II というカメラが手元に届きまして、それのテストと動画をアップする練習がしたかったんです。

動画のアップに関してはすでに以前の投稿で準備していたので簡単に済みましたが、動画撮影のほうはカメラ自体が（スチルカメラで）ビデオカメラじゃないからかなり撮りにくいですわ。ちゃんと撮ろうと思うと三脚は必須でしょう。
。。。あとは動画編集ソフトをどうにかしないといかんですね。

写真と違って動画のほうはどの程度の画質で（どの程度のサイズで）どういうファイル形式で見せるかがポイントでしょうか。ブログの投稿内に載せるなら上のような小さいFLV (Flash) でいいでしょうが、元のデータはフルハイビジョン画質で撮れているのでそれをどうにか生かす見せ方がしたいところです。

東南アジアのリゾートホテル写真集に動画入れる準備完了まであと少し。
果たしてどうなるのか、、、私もわかりません

関連した以前の投稿

• Cooliris:動画はちゃんと再生されるのかのテスト #1
• Cooliris:動画はちゃんと再生されるのかのテスト #2

写真とムービーを混在させた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 に対応しているサイトなので今までと違った感じで動画が鑑賞できます。

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

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

ファイル形式：FLV

ファイル形式:MOV

YouTube

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

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 を表示させることは可能だと思います。。。試してはいませんが(笑)

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

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つでも無理じゃしょーがないな

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プラグインも配布されています。
とにかくいろいろあるんです。

ブログのトップページに設置していた右のFlash ですが、IE で落ちるようになてしまったので一時的に撤去しました。落ちてしまった方、ゴメンナサイm(_ _)m
昨日と今日ですでに操作関連のインターフェースが代わっていまして未だ開発途中なのでしょう。上手く動けばいろいろな使い道があるFlash なのでオフィシャルサイトをチェックしながら定期的にテストして、安定したら再度貼り付けようと思います。

さて、どうしてCooliris に反応してしまったかと申しますと
静止画（写真）と動画のサムネイルをシームレスに閲覧できるところにあります。

静止画の場合は掲載されているページにジャンプさせたり拡大写真にリンクすることができる。一方動画の場合はCooliris 上でそのまま再生できて再生途中でもすぐに他の動画なり静止画に移動できる。 そういう境目のない感じはこの先使えるんじゃないかと個人的に思ってしまったんです。

ここのところでデジタル一眼にも動画記録機能が搭載され静止画と動画がシームレスになってきましたのでそれを公開できるような場を整えたいという気持ちも若干ですがあります。
。。。うまくいくかどうかは別として(苦笑)

Cooliris を「無いアタマ」 であれこれ考えていてチョット投稿が遠のいてしまいました

Cooliris, Inc.

、、、正直なところ4日かかりました(笑)

現時点でブログのトップページ上段とHotel 写真集の写真群にてCooliris に対応してみました。

追記:2008/9/22
どうもうまく動かないので（私の知識不足 ）ブログのトップページにだけ反映させてあります。 いままで投稿した写真を全てCooliris内に表示させたいのですが10件分で終わってしまいます。Feed の取得の仕方がいけないのはわかっているのですがどうしたらいいものか、、、もうすこし勉強します

Cooliris (旧 PicLens) というのはブラウザ（Webサイト閲覧ソフト）にいれるプラグイン（新たなる便利な機能を追加するもの）でして、Cooliris をいつも使っているブラウザにインストールするとCooliris に対応しているサイトにアクセスした時、ブラウザ上に表示されている画像や動画上にマウスカーソルを移動させると左の写真にあるように左下角に矢印が表示されます。
で、その矢印をクリックするとモニター上の画面は一変し画像や動画が壁面に描写されたのようにレイアウトされて直感的な操作でそれらを閲覧できるようになり 「おっ ？   」 と感じてしまうんです。

ちなみに Cooliris に対応しているメジャーなサイトは

これらのサイトです。

個人的には、Flickr、Image Search 各種、YouTube でなかなかいい感じだと思います。
詳細は次回以降の投稿で。。。

すてきな日曜でありますように   、、、すでに今日じゃん(笑)

9月18日：6個中0個 第412回抽選結果（みずほ銀行）
ぜんぜんダメだ でも買わないと当たらないしな、、、