Life is Adventure!

« 2009年12月 | メイン | 2010年05月 »

2010年01月 アーカイブ

2010年01月13日

TinyURL 短縮URL

短縮URLの老舗?Twitter以前から、数行に及ぶ長いURLを短いURLに変換するサービスを提供しているのが TinyURL.com である。4億件のURLが登録され毎月20億件のヒットがあるという。

しかし、Twitterの普及で短縮URLサービスが100以上も乱立するようになって、TinyURLの陰は薄くなったようだが依然根強い人気がある。三年前はTwitterの人気アプリの一つで、私が最初に使った短縮サービスなので愛着がある。もうひとつ愛着があるのは Twit this! というスクリプトだ。URLを引用してTwitterにつぶやける便利な機能だ。

10年一昔とは昭和の時代の死語になり、いまや2~3年で一昔になってしまう。TinyURLもTwit this!も陰が薄く、これに代わるサービスがたくさんある。social Bookmarkサービスも乱立しており、各種のブログやCMSも類似機能を提供するようになった。

Facebook/Twitterなどを活用し自分のに美の生産性を上げるために、どれを使うのがいいか?昨年12月にいろいろ試したがいまだに決定打がない状態だ。Twitter専用クライアントの選択と同じ状況である。日々進化しているからひとつに限定するのは難しい。

話が逸れそうなので、ここでは短縮URLサービスについて整理しておく。

  • TinyURL 元々メールに貼り付けるときのURLを短縮したいという要求に応えたもの。Gilby Productionsの商標になっている。Facebook/Twitterなどへの投稿はできない。

  • bit.ly Twitter専用クライアントで一番人気のTweetDeckで採用されている。ワンクリックで表示できるSide barで操作でき、Facebook, Twitter, Gmailなどへ投稿できる。また過去の会話も表示される。姉妹サイトにbit.tvがありポピュラーなYouTubeを配信している。

  • Ow.ly Twitter投稿だけでなく、写真・ファイル共有サイト(Twitterアカウントでログイン)としても利用できる。いずれビデオも扱えるようになるだろう。写真やファイルをアップロードすると短縮URLがアサインされる。HootSuiteが採用している。リンク先ページにHootSuiteバナーが組み込まれユーザを混乱させるのが欠点だ。

  • cligs 一番人気の短縮URLサービス。投稿先はTwitterとIdent.caだけである。Gmailにガジェットを組み込める。昨年12月Mister Wong!(欧州拠点のSocial Bookmark)に買収された。

  • 〔追記〕 bit.lyに投稿すると、Facebook, Twitterに自動投稿できる。TwitterfeedほかのフィーダーからFacebook, Twitterに自動投稿するように設定していると重複投稿になるので注意。

2010年01月15日

Videobox

Videobox

画像をクリックすると、背景が暗くなって画面中央に画像が開く透過レイヤー風効果を加えるのが、有名な「Lightbox」だが、「Videobox」はそのムービー版。YouTube、Google Video、Metacafe、iFilmなどを対象にしているが、自分で作成したFlashも利用できる。ただし、SWFのみで再生ボタンはない。FLVの再生にはJWPlayerを使う。

〔例〕Below, there are Metacafe, Google Video, iFilm and custom flash movie examples.

MetacafeGoogle VideoiFilm

使い方

1.以下のスクリプトとCSSをHeadセクションに書く

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />

2.ビデオにリンクするAタグにREL属性を下記のように書く。TITLE属性がキャプションになる。

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">our video</a>

Lightbox

1.サーバへ設置
Lihtbox2からzipファイルをダンロードし解凍する。解凍したファイルをWEBにアップロードする。
 

2.使い方
(1)スクリプト
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

(2)スタイルシート
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

(3)リンク
画像へのリンク(aタグ)で、rel="lightbox" を追加する。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

複数表示するときは同じグループ名を、lightbox[グループ名] という形で書く。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

3.サンプル

001 002 003

sample2   

※popup.jsと共存することが出きない。
※ビデオ版は、Videobox