ブログで鯉を飼ってみよう

By nakimusi


ブログパーツって何置こうか迷いますよね。

最近はアクセスアップにつながるパーツが増えて来ましたが、こんなインパクトのある物を配置すればブログを覚えてもらうきっかけになり、いいかも知れません。


それがこちらになります。
マウスカーソルの位置に鯉が集まり、クリックすると餌をあげる事が出来ます。



設置の方法をご紹介します。

まずこちらのサイトにアクセスします。
http://abowman.com/google-modules/fish/


Get＆Shareからembedを選びます。



そのままのサイズで良ければKeep current sizeをクリックして生成されるコードをブログに貼り付けます。
サイズを変えたい場合はResize widget?をクリックします。



Resize widgetでは用意されている3種類のサイズか、さらにCustomを選んで細かくサイズを指定しコードを生成する事が出来ます。



あとはこういったコードをブログに張り付けて完了です。



動きがかなりリアルで、見ていて飽きないかと思います。
是非利用してみて下さい。


あっ！金魚かも知れない・・・

オリジナルの腰帯で本の紹介をしよう：腰帯.com

今回はMashup Awards 4審査員特別賞とAward on Rails2008 協賛企業賞を受賞したという腰帯.comをご紹介します。



shigekicksのブックストアー


これは本の紹介文を書いた腰帯を作ることが出来、それらの本を並べる事によって、まるで自分が書店員になったような気分を味わえます。


また、Amazonアソシエイト・プログラムや楽天アフィリエイトにも対応しているので、自分の紹介した本が売れれば副収入を得る事も出来ます。


こういったエディタで簡単に作成できます。



手書き風に作成するエディタもあります。



そしてブログパーツも用意されているので、そこから自分の書店に案内する事が出来ます。



腰帯の背景は色で塗りつぶすだけでなく画像も使えるので、和紙風の画像を使ってみました。
Photoshopなどのペイントツールで作り込んで、そのまま腰帯にしても面白そうですね。


また、上で紹介したブログパーツは本一冊毎のものですが、なんと書店に並べた本を丸ごとブログに張り付ける、かなり大きな物もあります。


書店員になった気分で是非、本を紹介してみて下さい！


今日の一曲

Zooomrの写真をブログに表示しよう：FriendFeed編

どうもご無沙汰してます。
今までブログが重すぎたので、デザインを変えたついでにだいぶ軽量化を図ってみました。

ミニ四駆を軽量化するのに、シャーシの裏に半田ごてで穴を開けようとしたら、ドロドロに溶けてしまった青春の一ページを思い出しながらブログを書かせて頂きます。


今回ご紹介する、FriendFeedを使ってZooomrの写真をブログに表示する方法は、かなり利用されてる方も多く、設定も簡単でオススメです！


まずご覧下さい。



このように、Zooomrにアップロードした写真は、
「published a photo on Zooomr」
お気に入りに追加した写真は、
「favorited a photo on Zooomr」
と表示されます。


幅は表示する場所に合わせて自動で調整され、高さは１・5・10の表示個数から選べます。

ちなみに投稿した写真すべてが上下順番に表示されるのではなく、同じ時間に投稿、もしくはお気に入りに追加した写真は横に連なって表示されるので、幅が狭い場所に設置すると写真がはみ出す事がありますが、そういう仕様ですのでご了承下さい。
その代り、写真の下のCommentをクリックするとFriendFeedのページに移りますので、そちらで全部表示されます。


さっそくやってみましょう。

最初に、FriendFeedでアカウントを作ってください。

アカウントが出来ましたら、まずZooomrのfeedをFriendFeedに登録します。


トップページにあるImport siteをクリック！




この画面でSee all 49 services »をクリック！




Zooomrが出て来たのでマークをクリック！




ユーザネームを登録したら、Import Zooomrをクリック！




これでFriendFeedにZooomrが登録出来ました。
後はブログに張り付けるだけです。やってみましょう！


Embed in a web pageをクリック！




すると何種類かパーツの種類があるのですが、Feed Widgetを選んでください。




するとこういった設定ページ移ります。




FeedでMy feedを選択
ServiceでZooomrを選択
Entriesで1・5・10の中から選択し高さを決める




次にShowの項目ですが、
Logoでロゴを表示するか選択



Comments and Likesで、写真の下にFriendFeed上でのコメントを表示するか選択。（Zooomr上で書いたコメントではありません）
また、どちらを選んでもFriendFeed上でコメントする為のリンクは表示されます。




Subscribe linkでFriendFeedのマイページへのリンクを表示するか選択




冒頭で表示したタイプは、Entriesが5で、Subscribe linkだけチェックを付けました。
あと、デフォルトで幅は自動で変わるのですが、More optionsでがっちり幅を指定する事も出来ます。


後はHTMLが自動生成されるのでブログに張り付けるだけです。




細かく書いたので手順がいっぱいあるのではと思われるかも知れませんが、実際にはカップラーメンに入れるお湯が沸騰するまでには完成するかと思います。

非常に簡単ですので興味がありましたら是非！


今日の一曲

Zooomrの写真をブログに表示しよう：Hi Cheese!編

こんばんは。ご無沙汰してます。

今までZooomrの写真をブログに表示する方法として、

Zooomrの写真をブログに表示しよう： Cooliris編

Zooomrの写真をブログに表示しよう： 公式widget編

といった内容をお伝えして参りましたが、今回は実に設定が簡単で、いろいろなデザインのブログパーツが作成できるHi Cheese!【ハイチーズ】
をご紹介させて頂きます。

このHi Cheese!というのはZooomrの開発チームが運営しているサービスなので、Zooomrにアップロードした写真から選択して、簡単にwidgetが作成出来るようになっています。

その他にも、直接Hi Cheese!に画像をアップロードしたり、Flickrの写真やYoutubeの映像からも選択するだけで簡単にwidgetが作成出来ます。

このHi Cheese!でどういったものが出来るかごく一部を紹介させて頂きます。

サイズはそれぞれ3種類の中から選択する事が出来るようになっております。
今回は一番大きいサイズを表示してみましたが、小さいサイズですとブログのサイドバーにもってこいです。


スライド（サイズ大）

ポラロイドフィルム（サイズ大）

フォトフレーム（サイズ大）

まだまだたくさんの種類があり、Zooomrの開発を手掛けるCROSS BORDERSのブログ、inside.xbsを見て頂くと、カテゴリーのHi Cheese!の項目で開発者が作った素敵なwidgetを見る事が出来ます。


みなさんの素敵な写真を是非ブログでも表示してみましょう！

写真加工＆アルバム作成サービス【ハイチーズ】

Zooomrの写真をブログに表示しよう： 公式widget編

今回はクリストファー氏が作成した公式widgetを使って、Zooomrの写真をブログに表示する方法をご紹介したいと思います。

こちらのページに3種類のスクリプトが載っていて、下の方にはこのwidgetを表示しているブログ一覧もあります。


まず、All Zipline Activity(写真とチャット両方表示）がこちら。

Photos Only がこちら

Chat Onlyがこちらになります。

基本的な作成方法は

<script type="text/javascript" src="http://www.zooomr.com/zipline/widget/USERNAME"></script>

USERNAMEの部分をZooomrでの自分のユーザ名にするだけです。

ttp://jp.zooomr.com/shigekicks/　←アドレスのこの部分の名前で、僕ならshigekicksです。


これだけでも完成となるのですが、かなり縦長になります。
スペースが合えばこれで完了でいいのですが、

上の三例では、

<div style="overflow:scroll;height:400px;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

この青い部分を追加してあり、divという範囲で高さ400pxに収まりきらなかった部分はスクロールさせるという意味になります。
この部分の高さをブログのスペースに合わせて自由に変えて頂くといいかと思います。

なお、widthで幅まで決めてしまうと、Firefoxと他のブラウザで表示幅が全く違ってしまい、Firefoxでピッタリでも、IEでははみ出してしまうという事が起こるので指定しない方がいいと思います。


またこれに加えて、

<div style="overflow:scroll;height:400px;border:solid 1px #CCCCCC;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

この紫の部分を追加して頂くと、全体を太さ1pxの#CCCCCCという色の固形(solid)の線で囲むという意味になります。

それがこちらになります。

この線や色をお好みで変えて頂くといいかと思います。
色についてはこちら、線についてはこちらがわかりやすいかと思います。



さらになんですが、背景色を変えて頂くと、また違った感じになります。

<div style="overflow:scroll;height:400px;border:solid 1px #CCCCCC;background-color:#FFFFCC;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

このオレンジの部分になりますが、背景を#FFFFCCという色にするという設定になります。
それがこちらです。

このように、自分の好みでカスタマイズしていく事も出来るので是非ブログに表示してみて下さい。

Zooomrの写真をブログに表示しよう： Cooliris編

なんじゃこりゃっ！



なんだかよくわからないままダウンロードしたCoolirisという、Firefoxアドオンでしたが、その機能に度肝を抜かれました。

特にFlickrとの連携がすばらしく、このアドオンの画面を開いている時に、右上にある検索窓でFlickrの写真を検索してそれを上の写真のように一覧表示し、スライドショーで見る事も出来るし、普通にFlickrのサイトを見ている時にも写真にカーソルを合わせると、写真の上にCooliris用のマークが出て来て、それをクリックすると冒頭の写真の画面に切り替わりさくさくと写真を見る事が出来ます。

これにより、自分だけの写真・コンタクトの写真・セットの写真・人気のタグの写真などがこのアドオンの画面で見れるんですが、何といってもお気に入りの写真がこの画面で見れるのがすごい感動しました。

便利というのはもちろん、操作してて非常に面白いです。
十時キーでサクサク写真を移動出来る操作性は癖になります。

そこで、Zooomrだとこのアドオンはどう機能するのか試してみました。
Zooomrだと

「マイ写真の一覧のページ・並べ替え: 日付順(最近)」と
「お気に入り写真一覧のページ・並べ替え: 日付順(最近) 」

でサムネイルの上にカーソルを合わせると、写真の上に
Cooliris用のマークが出て来て、クリックして表示する事が出来たのですが、Flickrだと何百枚あろうと、次々に表示されるのに対して、ZooomrだとそれぞれRSSで対応している最近の25枚だけでした。

まあ、正式に提携しているFlickrと比べてもしょうがないのですが残念です。

面白いなあと思っていろいろ調べているうちに、この
Coolirisには同じ機能でWebページに張り付けるwidgetがありました。

そこで、Zooomrの写真を表示したいと思い試してみました。

RSSを利用してZooomrの写真を、自分が最近アップした写真か最近追加したお気に入りの写真、それぞれ25枚ずつ表示できます。

http://developer.cooliris.com/
↑このページのFull Featuredから設定できるようになっているのですが、デフォルトが↓です。



は・・・はみ出しまくってしまった・・・。気にしないでください。
と思いきや、Firefox以外だと途中はみ出した部分は消えちゃってるようです。

デフォルトではどうやら、Flickrの人気の写真が表示されているようです。

この上の画面にある、<e>という所をクリックし（Firefox以外の方は上のリンク先に同じ画面があるのでそちらから設定して下さい）、Copy this to my Clipboardでコピーをしたら貼り付ける時に、

<object id="coolirisOuter" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="592" height="350"><param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf?feed="><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><!--[if !IE]>--><object id="coolirisInner" type="application/x-shockwave-flash" data="http://apps.cooliris.com/embed/cooliris.swf?feed=" width="592" height="350"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"></object></object>

この二か所の赤いfeed="の部分に自分がアップした写真かお気に入りの写真のRSSを入力するだけです。

例えば自分はお気に入りの写真のRSSを入力したのですがそれぞれ、

feed=http://jp.zooomr.com/services/feeds/photo_faves/?id=78433%40Z01&format=rss_200"

としたらうまくいきました。

また、二か所の青いwidth="592" height="350"という部分を書き換えると配置したいスペースに合わせて大きさを変える事が出来ます。

完成したwidgetはこちらのページに表示してあります。

ちょっとブログパーツとしては大きいスペースが必要で、このパーツ専用のページが作れるならそうしたほうがいいかも知れませんが、面白いので是非試してみて下さい。

ガジェットが熱い

friendfeedでみなさんから得た情報をもとにブログを作ってみました。
特にガジェットが気になって気になって。

これからいろいろ試してみたいんですが、右上からZooomrのスライドショー、次にfriendfeedのmy feed、そしてどこでもラストガイのゲームを表示してみました。

追記：どこでもラストガイは、このサイトでプレイするボタンは消しましたが、テキストリンク先でプレイ可能です。

どこでもラストガイのボタンを押すと、このブログのページそのものがゲームのフィールドになり、敵をよけながら人を磁石のようにどんどんくっつけていき、長い列を作っていきながら、安全地帯まで時間内により多く非難させるというゲームです。
どんどん列を長くしても、緑の安全地帯までたどり着かないと点数には加算されません。
ブログによって難易度が大きく変わって来るんですが、このブログは通り道が少なすぎてちょっと難しいですw

ガジェットを追加していくこの感じは、ドラクエでどんどん武器をそろえていくような感じで、非常にワクワクします。

さて、レイアウトはちょっとずつやっていこう。