普通のFollow Meじゃつまらないので

息抜きでcss3を使ってアニメーションするFollowMe作りました。
サンプル…といいたいところですが、このページの右側にあります。
マウスオーバーしてみれば動きがわかるかと思います。

対応ブラウザ

一応色々なブラウザで動きますが以下の順番でいい感じの動きになります。

1. Chrome４→縦表示、回転、ズーム、アルファが効きます
2. Safari4→縦表示、回転、ズーム、アルファが効きます（ちょっとぼやける）
3. Firefox3.5→縦表示、回転、ズーム、アルファが効きます
4. その他→かろうじて表示されます

html5で書いていたのですが、どこぞのブラウザさんで表示出来ないので泣く泣くhtml4に切り替えました。
どのブラウザとは言いません。9でもダメなIEあの子です。

それでもこのFollow Meを使ってみたい場合は続きから。

まず初めに。

ご自由に使って頂いて構いませんが、htmlの?の部分、cssのコメント部分は残して置いて頂けると幸せです。
カスタマイズできる部分は以下の箇所になります。

1. ラベルのボーダー、背景色、グラデーション
2. FollowMeの文字色
3. ?の文字色・背景色

といった部分が調整が可能となっています。
cssに詳しい方はソースをちょくちょくいじってもいいかもしれませんね。

コピペ用のソース

下のソースを</body>の直前に明記するだけで実装が可能です。
色設定と、自分のアカウントへのURLの変更（http://twitter.com/kzmsの部分）をお忘れなく。
変えたほうがいい部分は赤色で指定してあります。

<div id="kzms2twitter"><span><a href="http://kzms2.com/2009/12/02/followme_css3/" title="このFollow Meについて" id="kzms2twitis">?</a><a href="http://twitter.com/kzms2">Follow Me</a></span></div>
<style type="text/css">
/* 色のカスタマイズ
**********************/
/* ラベルの色設定 */
#kzms2twitter span{
/* グラデーション非対応の背景色設定 */
background-color:#0f58aa !important;
/* グラデーション背景色設定 */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
/* 開始色 */
from(#083a73),
/* 終了色 */
to(#0f58aa)
) !important;
/* 枠線色設定 */
border-color:#083a73 !important;
}
/* Follow Meの設定 */
#kzms2twitter span a{
/* 文字色設定 */
color:#fff !important;
}
/* ?の設定 */
#kzms2twitter #kzms2twitis{
/* 文字色設定 */
color:#0f58aa !important;
/* 背景色設定 */
background-color:#fff !important;
}
/*
* date 09/12/01
* var 0.01
* kzms2 All Rights Reserved.
******************************/
/* base setting
=================*/
#kzms2twitter{
position:fixed;
_position:absolute;
top:50%;
right:0;
z-index:99999;
margin-top:-6.5em;
*margin-top:-1em;
font-size:12px;
}
#kzms2twitter span a{
text-decoration:none;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:0 50%;
-moz-transform-origin:0 50%;
}
#kzms2twitter span a:hover{
text-decoration:underline;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
}
#kzms2twitter span{
display:block;
padding:0.5em 1em 0.5em 0.5em;
border-style:solid;
border-width:1px;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-box-shadow:2px 2px 7px #333;
-moz-box-shadow:2px 2px 7px #333;
}
#kzms2twitter span:hover{
margin-top:2em;
*margin-top:0;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:scale(2);
-moz-transform:scale(2);
}
/* about kzms2
=================*/
#kzms2twitter #kzms2twitis{
position:absolute;
bottom:0;
right:0;
width:1em;
text-align:center;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
font-size:80%;
-moz-border-radius:5px 0 0 0;
-webkit-border-top-left-radius:5px;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
}
#kzms2twitter #kzms2twitis:hover{
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
-webkit-transform:scale(2);
-moz-transform:scale(2);
text-decoration:none;
}
/* follow me setting
=================*/
#kzms2twitter span a:nth-of-type(1):hover + a{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#kzms2twitter span a{
display:inline-block;
}
</style>
cssの上部は、カスタマイズ用の部分が抜き出してあります。

その他

htmlに詳しい人は、styleタグの中身を外部ファイルにするなどして各自修正を加えてしまってください。このままだとhtmlが穢れてしまうので…！

使った方でご意見やご感想などお待ちしておりますっ

はー　久々に息抜きになったなった。
こういうやつの方がやりやすいですね。

Inspect Elementというサイトで

お勧めのブックマークレット10選というものがありました。
その中でも気になった3個をちょちょいと載せます。

ちなみにブックマークレットって何？

使ったことがない方向けに説明をすると、指定されたリンクをお気に入りに登録して、クリックすることでそのページに任意の効果を示すことができます。
またそのページ内にそのリンクがある場合は、クリックするだけで起動することが可能です。

百聞は一見にしかず。このリンクをお気に入りに登録、もしくはクリックしてください。

このページのURLがアラートで表示されたと思います。
クリックするだけだと何も恩恵がありませんが、お気に入りに登録して他のページでそのお気に入りをクリックするとそこのページのURLがアラートで表示されます。

といったようにお気に入りにJavascriptを仕込んで、何か動かしてしまおうというのがブックマークレットです。

詳細は続きから

では本題の個人的に気に入ったブックマークレットを下で紹介します。
元の記事とは順番が違いますが、個人的に気に入った順番で説明しています。

Design

1. Grid（グリッド表示）
2. Rule（ルーラー表示）
3. Unit（2点距離表示）
4. Crosshair（十字線表示）

の4機能が使えるブックマークレットです。
コーディング時の細かなデザイン調整を行うときに使用するとよいのではないでしょうか。
このページで起動してみる。

Firebug Lite

FirefoxのアドオンでおなじみのFirebugのLite版（そのままの説明ですね）
アドオンほどの機能はないですが、IEやアドオンがない環境で軽く見る分にはいいかもしれません。

このページで起動してみる。

XRAY

ページ内の各要素をクリックして、その部分のボックスモデルを視覚的に確認できる。
offsetやmargin、border、padding、widthなどなど…
クリックした場所の情報が数値や見た目で見ることが出来ます。

このページで起動してみる。

MRI

これは、指定したセレクタに該当するHTMLがページ上に何個あるか見ることが出来る物です。
使われていないCSSなどを見つけることが出来たりなどするのではないでしょうか。
ブックマークレットを起動した後の使い方に関しては以下の2通りかと思います。

1. 調査したい要素をクリックして、Suggest Selectorsの下に出てきたセレクタを選択する
2. 出てきたウィンドウのテキストボックスにセレクタを入力（h2　など）する

このページで起動してみる。

上以外の物も気になったら

以下のエントリを参照してみてください。
10 Useful Bookmarklets for Web Designers and Developers

いきなりだけど作ったもの

Saga2モンスター変身確認ツールβ
※無駄にHTML5で組んでるのでIE6とかだと満足に見れないかも。。。
iPhoneでもそれなりに使えますので是非是非

使い方の大体の流れ

1. 自分が変身しているモンスターを選びます。
2. 食べようとしているモンスターの肉を選びます。
3. 一番下の赤枠に変身後のモンスター（もしくはHP回復など）が表示されます。HP回復の場合変身はしません。

また「選択」部分で探しにくかった場合、「検索」部分にテキストを打つことでサーチアシストのようなものが出てきます。
なのでそれをクリックして使ってみてください。

思いつきで作ったので酷いつくりですが使う方もいればと思って取り合えず公開
なんとなくもうSaga2が発売されて日にちが経ちすぎている気もしますが・・・！

サーチアシストっぽいやつの仕様

• 全モンスターで該当するのが1匹の場合、自動的に選択されます
  例）「あ」と入力すると「あめふらし」が自然に選択されます
• 該当モンスターが2匹以上の場合、アシストが出るのでマウスなどでクリックをして選択します
• 該当モンスターがいない場合は、それっぽい文言が赤字で出ます

作るために用いたもの

• 変身のための理論だとか理屈（下記参考にしたサイト参照）
• HTML5
• CSS
• Javascript(jQuery)

参考にしたサイト

• サガ2 秘宝伝説 GOD 攻略Wiki

※上記サイトを参考にしましたが、何か不都合などがありましたらこの日記宛にコメントなどを下さい。