2007-05

Googleマップでは地図の印刷用ページに小粋な工夫がなされています。

地図の上にちょっとしたメモ欄を置いてくれているのです。印刷して配るときなど、ここに待ち合わせ時間や金額といったメモを書いておけば皆で共有できて便利ですよね。

これはこれで便利ですが、さらに圧巻なのはMapFan Webの印刷用ページ。

↑なんとメモに加えて、広域地図と詳細地図の2つを1ページに印刷できるデュアルマップ機能や、印刷時にタテとヨコを変更できたりとなかなか凝ってます。

飲み会シーズンになると多くの人がグルメ情報サイトでお店を調べますよね。そのときクーポン券や地図を印刷して持って行かれる人とも多いはず。

グルメ情報サイトの印刷用ページはクーポンや地図が1ページに印刷できて、うまいレイアウトだなーって思いませんか？

地図の印刷用ページって地図だけ載っていればいいかと思ってしまいますが、実は色々な工夫のし甲斐のあるスペースなのかもですね。

• Googleマップ
• MapFan Web

NewstodayのようにサウンドロゴがあるWEBサイトって珍しい。

TOPページに訪れると「Newstoday!」と、CMで流れる企業のサウンドロゴのようなメロディーが流れます。

企業のサウンドロゴやテーマソングを効果的に使えば、訪れたとき少し楽しい気分になれますし、うまい具合に企業名を覚えてもらえるというわけです。

サウンドロゴで覚えてもらう、というお馴染の手法をうまくWEBに転用した好例と言えますね。

ちなみに、音を出す部分はFlashで実現しているようです。ヘッダー自体がFlashになっていて、読み込まれると音がなるという仕組みです。

もしかしたらブログ用に個人でサウンドロゴを作ってしまう人も出てくるかもしれませんね。

» Newstoday

DevthoughtのブログでCSSやJavascriptの記事が書かれていました。けれども肝心のコードが見当たりません。

“Click here to see HTML code”という気になる部分にマウスオーバーすると･･･。

アイコンがちょこっと動いて、そこに何かがあることを知らせてくれます。実はこの部分をクリックして初めてコードが登場します。

コードが長いと文章が見にくくなってしまいますが、こうやって要らないときは隠しておけばエントリー全体がすっきりして内容をざっと把握できますね。

JavascriptやCSSの記事でコードは重要なポイントとなりますが、普段は隠す、でも見たいときにはアニメーションで強調、という新しい切り口です。

ちなみに、アニメーションを実現しているjavascriptは、ライブラリを使わず自前で用意されてるようでした。もしライブラリを使って実装したいという方はscript.aculo.usのEffect.SlideDowｎとEffect.SlideUPが使えそうですね。

» Devthought

先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。

• 小粋なインターフェースを実現する25のコード
• 小粋なインターフェースを実現する25のコード （パート2）
• 小粋なインターフェースを実現する25のコード （パート3）

今回も素敵なコードが揃っていますよ。いくつかご紹介。

↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。

↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。

↑ スライド式のナビゲーションメニュー。

新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。

» 25 Code Snippets for Web Designers (Part4)

昨日ご紹介した「あらゆるページに拡大鏡を追加できる『Loupe.js』」の高機能版ともいうべきスクリプトをご紹介。

TJPzoomを使えば画像に拡大鏡をつけられる上、マウスドラッグでさらに拡大したり、高解像度の写真を別に用意しておいて拡大時にそっちを表示できたりします。

以下に簡単に使い方をご紹介。まずは基本パターン。

最初にスクリプトを導入。

<script type="text/javascript" src="tjpzoom.js"></script>

次に画像のコードを以下のように変更。divタグをつけるのと、widthタグをつけるのを忘れずに。

<div>
<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">
</div>

なお、このほかにいくつかの画像ファイルをアップしておく必要があります。

すると以下のような画像ができます。マウスオーバーするとその部分が拡大されます。マウスドラッグでさらに拡大することもできます。

また、拡大時にさらに高解像度の画像を使いたいときは次のように。

<div>
<img src="http://valid.tjp.hu/zoom/collage.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this, 'http://valid.tjp.hu/zoom/collage_2.jpg');">
</div>

このように指定すると次の画像のような効果が得られます。ちょっとロードに時間かかるけど。

また余裕のある人は拡大するときのフレームもカスタマイズできる模様。次のような感じです。

詳しい使い方＆ダウンロードは以下からどうぞ。チュートリアル付でわかりやすいですよ。

» valid.tjp.hu – TJPzoom 3 – JavaScript / CSS / DOM image magnifier

これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。

↑ こんな感じに拡大鏡を設置可能。

画像と簡単なスクリプトをインストールすればOKなようです。

追加するコードは以下のとおり。

まずはページのヘッド部分に以下を追加。

<script type="text/javascript" src="loupe.js"></script>

そして拡大鏡を追加したい画像にonLoadで以下を追加。

<div>
<img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="...">
</div>

細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。

ダウンロードや詳しい使い方は以下をご覧ください。

» Loupe.js