Life is Adventure!

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

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>

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)に買収された。

Facebook

Facebookにアップロードした動画をブログに貼り付けた。Faceboog動画サイトを見るためにはログインする必要がある。ログイン後、Facebookログインユーザ全員に公開するか、友人登録したユーザだけにするかの設定ができる。

熱海駅前の商店街

digsby

IMやSNSアカウントを複数持っている人にお勧めだが、残念ながら英語版しかない。Facebook, Twitter, Gtalkなどのクライアントとして使える。MeeboはIM専用だが、これにEmail通知機能とSNSクライアント機能を追加したアプリケーションである。
http://www.digsby.com/

digsby公式サイト
スクリーンショット
digsby scrennshots


Webサイトに貼り付けるウィジェットを簡単に作成できる。

つながる力を与える仕組み

Twitterを中心としてつながるアプリを図式化した。既存のブログ、SNS、CMSなど主要なものはほとんどつながるようになった。ブログはTwitterFeedを使えばRSS接続できる。写真・動画の投稿サイトも沢山ある。便利になったものだ。

つながる力 ※太枠で囲んだのは自営サイトである。無料のオープンソースを入手しサーバに設置したWebアプリである。多くは実験サイトだ。

MentionMap

Twitter上のつながりを可視化してくれる。
http://ow.ly/IJlw を開いてTwitterユーザ名を入力する。
〔例〕

ハッシュタグとAddThis

TwitterでRTが公式サポートされたが、#(ハッシュタグ)付き発言はまだ公式サポートされていない。#タグがついた発言だけを検索して表示できるようにしているので公式といえるかも知れないが、RTがそうであったように仕様・使い方が少し変わる可能性はある。

いずれにしろユーザはその便利さに目をつけて多用するようになっている。日本では広瀬香美さんの#kohmitweetの影響が大きいのだろうか?Twitter初心者のための講座のようなもので、「部活」などといったりしている。

#タグの意味や使い方がよく分からないという声があるが、使い出すと便利なのが分かってきて仕組みを知らなくても使えるようになる。

頻繁に使うようになると、発言のたびに#タグを書くのが面倒になってくる。また忘れることもあるので
、#タグの発言だけを表示してそのページで発言したら自動的に#タグがつけられると便利になるだろう。どんな使用になるか興味があるが待つしかない。

Twitter専用クライアントでも#タグへの対応を始めるだろう。応急処置としてブラウザのブックマークを利用する手がある。

Firefoxの場合、この #sigmasns を右クリックして、「このリンクをブックマーク(L)」を選択するとポップアップが表示されるので「保存」をクリックする。Chromeでは、リンクをドラグしてブックマークバーに入れればよい。

ブックマークの名前が #sigmasns 、URLが
javascript:(function(){document.messageBoxForm.messageBoxMessage.value+="%20#sigmasns%20";})();
となっており、Firefoxブラウザのブックマークに登録される。

HootSuiteの入力ボックスで書いているときに、このブックマーク#sigmasnsをクリックすれば「#sigmasns」が入力される。
これも分からず面倒だという人は、日本語入力辞書に適当な名前で登録して変換すればよい。


参照しているページをブックマーク(IEではお気に入り)するのと同じである。新しいブックマークを作成するときにURLに上記のjavascript・・・を入力して作成してもよい。sigmasnsの代わりにほかのハッシュタグ名にすることもできる。

この仕組みは10年近く前からあり、ブログ関係では Blog This!といった用語で、現在参照しているページを引用してブログ記事を書くことができる。このページで右クリックして、AddthisからたとえばBloggerを選択して、自分のブログに投稿することもできる。

digg, deliciousなどのソーシャルブックマーク、各種のRSSリーダー、Facebook/Twitter/Wordpressなどのブログサイトへの投稿がかんたんにできる。

HootSuite

TwitterクライアントのひとつHootSuiteでは、ホーム、自分の発言、@付き発言あるいはリストなどを同時に表示できる。フォローしたい人をグループに設定することもできる。ほかのクライアントにない機能として、複数アカウントを管理できるのが便利である。

ところが最新のHootSuiteでは、発言前にアカウントを選択したり、投稿のときにマウスでSend Nowをクリックしなければいけないという面倒な操作になっている。ユーザの不評を買っているのでいずれ変更されると思うが、いますぐ変更したい人のために@civicさんがスクリプトを作った。

GreaseMonkeyを利用しているので、FirefoxやChrome(昨年10月からGreaseMonkeyをサポート)の場合簡単にインストールできる。ただしChromeの場合、標準のものではなくBeta版またはDev版を使う必要がある。

省スペースなHootSuite用スクリプト」を使うと、①アカウントを固定、②Shift+Enterで投稿、③縦に10件(通常4件)以上表示することができる。

HootSuiteHootSuite

ただし、タブやカラムの追加・変更ができなくなる。私はFirefoxとChromeを多用しているので、この二つにGreaseMonkeyスクリプトを追加し、タブ・カラムを追加変更するときはSafariを使うことにした。

※スクリプトはFirefox3.5.5, Chrome4.0.249.11で動作することを確認済みである。なお未確認であるが、SafariのエンジンはChromeとコアは同じなので動作するだろう。IEでは使えないと思う。

TwitterFeed

人気のTwitterクライアント(第三位)である。Twitter、Facebook、Laconicaなどにブログ記事をフィードできる。Pingの送信先として利用できるので、ブロッガーたちは自分のブログからTwitterに投稿するのを好んでいるようだ。
TwitterFeed
OpenID

現在12種類のOpenIDでログインできる。Emailアカウントを新規登録しても良い。Blogger OpenIDはGoogleアカウントでログインする。BloggerおよびMovable Typeを使ったブログサイトを登録した。下記のブログサイトで記事を書くと、Twitter/Facebookにも自動投稿される。

※Laconicaを使ったサイトへの投稿設定が不明だ。デフォールトのドメインがidenti.caになっているので、identi.caサービスを利用しないとダメなのかもしれない。