<p class="thumb"><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser.jpg" alt="Flickr Picasa のスライドショーを作れる「PictoBrowser」" title="Flickr Picasa のスライドショーを作れる「PictoBrowser」" width="514" height="204" class="alignleft size-full wp-image-11361" /></p><p><a href="http://web-marketing.zako.org/tag/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC">スライドショー</a>を表示するにも、なかなか思ったように表示してくれるものがない。特にPicasaに関しては、そういった声も多いのではないでしょうか。</p><p>今回は、スライドショーを作成してくれるサービスの中でも、Picasaのアルバムを表示できる上に、プレイヤーのカスタマイズが他よりも自由にできるサービスをご紹介。</p><!--more--><h3 class='header-label'>Flickr、Picasa のスライドショーを作れる「PictoBrowser」</h3><p>「<a href="http://www.db798.com/pictobrowser/" onclick="window.open('http://www.db798.com/pictobrowser/'); return false;">PictoBrowser</a>」は、<strong>PicasaとFlickrの画像をスライドショーにしてブログやサイトへ表示できる</strong>サービス。</p><p>Flickrの場合は、タグやグループ、セット、Picasaの場合はアルバムとタグで絞り込んでスライドショーにすることができます。</p><h4 class='tips'>Picasa</h4><div id="PictoBrowser091208231723">Get the flash player here: http://www.adobe.com/flashplayer</div><script type="text/javascript" src="http://www.db798.com/pictobrowser/swfobject.js"></script><script type="text/javascript"> var so = new SWFObject("http://www.db798.com/pictobrowserp.swf", "PictoBrowser", "522", "350", "8", "#EEEEEE"); so.addVariable("source", "album"); so.addVariable("userName", "sigeos15"); so.addVariable("names", "uMmjFD"); so.addVariable("albumId", "5266296957428655809"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "original"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "EEEEEE"); so.addVariable("initialScale", "off"); so.addVariable("bgAlpha", "90"); so.write("PictoBrowser091208231723");	</script><p>↑こちらはPicasaのアルバムをスライドショーにしたもの。画像の切り替わりが「スパッ」としてて、なかなか爽快です。</p><h4 class='tips'>Flickr</h4><div id="PictoBrowser091208225629">Get the flash player here: http://www.adobe.com/flashplayer</div><script type="text/javascript" src="http://www.db798.com/pictobrowser/swfobject.js"></script><script type="text/javascript"> var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "522", "350", "8", "#EEEEEE"); so.addVariable("source", "keyword"); so.addVariable("names", "osaka"); so.addVariable("userName", "webmarketingzako"); so.addVariable("userId", "26047770@N07"); so.addVariable("ids", "osaka"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "EEEEEE"); so.addVariable("initialScale", "off"); so.addVariable("bgAlpha", "90"); so.write("PictoBrowser091208225629");	</script><p>↑こちらはFlickrのタグで自分の画像を表示させているものになります。</p><h4 class='tips'>オプション設定が多彩</h4><p class="picture"><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser1.jpg" alt="ノートやタイトルの表示" title="ノートやタイトルの表示" width="400" height="177" class="alignleft size-full wp-image-11367" /> ↑こちらはタイトルとノートの表示、非表示設定のサンプル</p><p class="picture"><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser2.jpg" alt="画像の位置" title="画像の位置" width="400" height="190" class="alignleft size-full wp-image-11368" /> ↑画像の表示位置も指定可能。</p><p>さらに詳しくは、<a class='web-site-link' href="http://www.db798.com/pictobrowser/samples.html" onclick="window.open('http://www.db798.com/pictobrowser/samples.html'); return false;">PictoBrowser Samples</a>へどうぞ。</p><h4 class='tips'>スライドショーの作り方</h4>	<ol class="steps"><li><h4>サービスの選択</h4><p>まず、<a href="http://www.db798.com/pictobrowser/builder.php" onclick="window.open('http://www.db798.com/pictobrowser/builder.php'); return false;">PictoBuilder</a>のページを開き、下記画像のようにFlickrかPicasaを選択、ユーザ名を入力、「Continue」ボタンを押します。<br /><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser3.jpg" alt="FlickrかPicasaを選択" title="FlickrかPicasaを選択" width="400" height="302" class="alignleft size-full wp-image-11369" /></p></li>	<li><h4>画像の選択</h4><p>次に、アルバムかタグを選択（Flickrの場合はセット、グループ、タグから選択）<br /><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser4.jpg" alt="PictoBrowser4" title="PictoBrowser4" width="400" height="104" class="alignleft size-full wp-image-11370" /></p></li>	<li><h4>プレイヤーの設定</h4><p>次の画面で、プレイヤーの設定を、プレビューを見ながらカスタマイズします。<br /><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser5.jpg" alt="PictoBrowser5" title="PictoBrowser5" width="400" height="253" class="alignleft size-full wp-image-11371" /></p></li>	<li><h4>タグの取得</h4><p>最後に「Get HTML Code」タブを開き、タグを取得します<br /><img src="http://web-marketing.zako.org/images/2009/12/PictoBrowser6.jpg" alt="PictoBrowser6" title="PictoBrowser6" width="400" height="245" class="alignleft size-full wp-image-11372" /></p></li></ol><p>興味のある方は<a href="http://www.db798.com/pictobrowser/" onclick="window.open('http://www.db798.com/pictobrowser/'); return false;">PictoBrowser</a>へどうぞ。</p><p>見た目だけではなく、ユーザー視点からも、使いやすさを持ち合わせたスライドショーになっていて、これからも重宝しそうなサービスです。</p><p>Via：<a class='web-site-link' href="http://delicious.com/url/fafab7f28471ba10c4d38919d4ff4eaa" onclick="window.open('http://delicious.com/url/fafab7f28471ba10c4d38919d4ff4eaa'); return false;">delicious</a></p>