2006-09

ソーシャルニュースサイトのnewsing。カレンダーから日付を選んだときのエフェクトがなかなかユニークです。

以下のアニメーションがわかりやすいかな。

画面にオーバーレイしてさまざまなエフェクトをかけるのが流行していますね。

カレンダーに限らずこういうエフェクトはまだまだ開発できそうですね（あまり多用してもちょっとアレですけどね）。

最近のウェブサービスのトレンドは「シンプル」。そのためにはユーザーの入力項目は極力少なくしたいものです。

そういう意味でちょっと参考になるのが「Oh, Don’t Forget…」です。

» Oh, Don’t Forget。指定した日時にリマインダーを送ってくれます。

このサイト、シンプルなリマインダーサービスなのですが、タイムゾーンを入力しなくても世界中どこからでも指定した時間に届きます。

その秘密はJavascriptのgetTimezoneOffsetメソッド。

次のようなスクリプトでローカルPCの設定時間を取得し、標準時からの時差を計算しています。

<script type="text/javascript">
Now = new Date();
tzOff = Now.getTimezoneOffset ();
tzOff = tzOff/60;
</script>

あとは実際にリマインダーを送るときにこの時差を調整すればいいだけですね。

ウェブサービスであれば世界中どこからでも使いたいもの。こうしたテクニックは覚えておきたいですね。

自分のブログを読んでもらったあとに何をしてもらいたいか？その答えはフッターリンクに用意しておくべきです。

もっと記事を読んで欲しかったら「最近の記事投稿一覧」や「関連する記事一覧」を置くとよいでしょう。

ではブログで仕事がもらいたい場合はどうでしょう？

最近は次のようなリンクをよく見るようになりました。

↑ 最近良く見るのはプロフィールをフッターリンクに置く手法

こうした手法はデザイナーやコンサルタントの人に多く使われているようです。記事を読んだ人が「これはいったい誰が書いているのだ？仕事頼めるかな？」と思う心理を先読みしているわけですね。

フッターリンクまでたどり着いた人は何かのアクションを起こす可能性が高いでしょう。あなただったら何を置きますか？

実装する方法がわからないのだけど、とにかくご紹介。

37signalsのブログ、Signal vs. Noiseのコメント欄はその記事を書いた投稿者のコメントだけをハイライトしてくれます。

↑ Jason Friedの記事。JF（Jason Fried）のコメントだけこのようになります。

ブログで議論がもりあがってくると全部のコメントを読むことがつらくなります。そういうときは全部のコメントを読むのではなくて、投稿者がそもそもどういうことを意味していたのかを知りたい場合が多いですよね（でもない？）。

そうしたときにこのテクニックは有効ですね。どなたかMovableTypeで実装する方法を教えてください・・・。

ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。

そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。

↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。

導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。

仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。

function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}

「このページの先頭へ」に仕込むリンクはこちら。

<a href="#" onclick="backToTop(); return false">このページの先頭へ</a>

人によっては「Home」ボタンで戻る人もいるでしょうが、こういう気持ちよいギミックはさりげなく使っておきたいですね。

実装されている方もいらっしゃるかと思いますが・・・の小技。

トラックバックを打つときにはトラックバックURLをコピペして貼り付けることが必要ですが（Auto-Discoveryもありますが）、その際にコピーしやすいように細工しておきましょう。

このブログでもトラックバックURLをクリックするとそれが全選択されるようにしてあります。

↑ マウスクリックで一発選択。あとはコピーするだけ。

ちょっとしたことですが簡単なJavascriptを仕込むだけですのでよろしければどうぞ。

<input type="text" size="70" id="tb_url" value="http://www.simplexsimple.com/cgi-bin/mt/mt-tb.cgi/3" onClick="document.getElementById('tb_url').select();" />

追記:通りすがりさんよりコメントいただきました。this.select()でいけました・・・。ご指摘ありがとうございました！修正したコードは以下。IDは本当はいりませんが、なんとなく。

<input type="text" size="70" id="tb_url" value="http://www.simplexsimple.com/cgi-bin/mt/mt-tb.cgi/3" onClick="this.select();" />