2007-02

以前、被リンク数が増えるかもしれないちょっとした工夫という記事を書きましたが、それに関連してエントリー。

他の人に引用してもらうために動画や写真を貼り付けるためのコードはよく配布されていますが、今回ご紹介するのは「記事のバナー貼り付け用コード」。

採用しているのはDrivl.com。記事の終わりに、その記事ごとのバナーを貼り付けるためのコードがあります。

↑ 「Share, it’s good for you」と少し提案的な感じですね。

これをコピーして自分のブログに貼りつけると、以下のようにちょっとかっこいい記事へのバナーが表示されます。

↑ こんな感じで記事へのバナーがはれます。

記事のバナーを貼り付ける、という発想が新しいですね。単なるURLだけではなくて、今後はもちょっとかっこよく記事を紹介する手法がでてくるかもですね。

そういえば「*LOVE IS DESIGN*」さんでもかっこいい引用の仕方が紹介されていましたね。こちらはCopy URL+を使っていますが、これと同等の機能をサイト側で提供するというのも手かもしれません。簡単にできそうだし・・・。

» ちょっと差のつく「Copy URL+」のカスタマイズ | *LOVE IS DESIGN*

ちょっとした「引用されやすい工夫」の一つとしてどうぞ。

» Drivl.com

これは覚えておくとちょっと便利そう。

miniAjaxではちょっと小粋なインターフェースをつくるためのDTMLやAjaxを紹介しています。

» MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts

提供されているのは今のところ36種類。

タブでのナビゲーションを実現したり、インラインでの編集を可能にしたり、☆での評価ができたり、先進的なウェブでよく見るインターフェースばかりですね。

ただ、このサイトがすべて準備したわけではなくて、それぞれ他のサイトへのリンクになっています。

おっと、リンク集かよ・・・とも思いましたが、このようにビジュアルに訴えかけてくるようにきれいにまとめるのもアリかもしれませんね（賛否両論あるでしょうが・・・）。

ブックマークしておいて、インターフェースのネタ帳として使うのが吉でしょう。

なお、似たような「使えるサイト」としてはDHTML goodiesもありますね。個人的にはこちらもよく使います。よろしければどうぞ。

» A library of DHTML and Ajax scripts – DHTMLgoodies.com

最近ニュースサイトでも記事にトラックバックできるサイトが増えてきました。

信頼性が要求されるニュースサイトゆえ、様々な注意事項をユーザーに促さなければなりません。

ITmediaのトラックバックページではうまくユーザーに注意を促しています。

一般的なトラックバックのページですが・・・

リンクにカーソルをもっていくことでリンク先に飛ぶことへの注意が表示されます。

リンク先の保証はできないという旨の注意なのですが、ページの下や別ページに注意書きを書いても読んでもらえないし、だからといって注意書きがないのも不安。

クリックしてリンク先に飛ぶ瞬間、ポッと出して注視させるやり方、うまいですね。

» ITmedia

いろんなウィジェットが世の中に出回っていますが、ウィジェットのポータルサイトであるsnipperooのブログでは、ブログのウィジェットを生成できるようになっています。

↑ 「Widgetize this blog」というものがサイドバーにあります。

↑ ここでは3種類のウィジェットを生成することができるようです。

例えばここで「web widget」を選ぶと、snipperooのRSSフィードを表示するウィジェットが生成できます。

↑ ブログ等に貼り付けられるツールを作ることができるMuseStormを使っています。

ブログを広めるための新しい手法の一つとしても、ウィジェットが使えるかもしれませんね。

これは便利そう。

『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。

マニュアルに載っている命令をご参考までに。

• hasValidChars
• isSimpleIP
• isAlphaLatin
• isNotEmpty
• isIntegerInRange
• isNum
• isEMailAddr
• isZipCode
• isDate
• isMD5
• isURL
• isGuid
• isISBN
• isSSN
• isDecimal
• isplatform
• addRules
• Apply

サイトでは動作チェックのデモもあります。コードも見れますよ。

↑ こんな感じでさまざまなチェックができます。

詳細＆ダウンロードはこちらからどうぞ。

» Mutationevent :: Validate.js :: javascript package to validate various data

拡大縮小しても画質が劣化しないベクターデータは何かと便利です。

Tutorial Blogで無料で使えるベクターデータを配布しているサイトが紹介されていました。全部で27あります。

ふきだし風のパーツやアクア風のボタン、国旗やトランプなど、さまざまな用途に使えそうです。

↑ こうしたサイトデザインに使えるようなものや・・・。

↑ ちょっといいのかな、これ？というものとか・・・。

↑ 自分ではとっても作れなさそうなやつとか・・・。

形式はAIやSVG、PDFなどさまざまですね・・・それってただのアイコンでベクターデータではないのでは？というのも若干混じっていますがそこはご愛嬌。

よろしければ下記サイトからどうぞ。

» Free Vector Downloads – Photoshop Tutorial

先日ご紹介した『CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法』ですが、重大なミスがありました。ここに謝罪して修正します（ご指摘いただいた匿名希望さん、ありがとうございます）。

間違いがあったのはこちら。

PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。

まずはじめにPNG画像を縮小などしていませんでした・・・申し訳ありません。それから「スクリプトのダウンロード」というのも誤解を招く表現でした。「CSSとHTML、画像が入ったファイル群」が正しい表現です。

速く書こうと思って中途半端な理解で書いてしまいました・・・以後気をつけるとともに、ここで修正させてください。

この手法ですが、正しくは画像を縮小しているのではなくて、大きな画像の四つ角を重ね合わせて任意の大きさの角丸パーツを作っています。

順を追ってご説明。

まず、この手法のもっとも単純なコードは以下のとおりです。

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  <!-- Your content goes here -->
 </div>
 <div class="b"><div></div></div>
</div>

これに補足説明を入れると、

<div class="dialog"> ← 全体
 <div class="content"> ← 右上のパーツ
  <div class="t"></div> ← 左上のパーツ
  <!-- Your content goes here --> ← コンテンツ
 </div>
 <div class="b"> ← 右下のパーツ
   <div></div> ← 左下のパーツ
 </div>
</div>

となります。Firebugで見ると以下のような感じ。

↑ <div class="content">に対応するのが右上。

↑ <div class="t"></div>に対応するのが左上。

↑ <div class="b">に対応するのが右下。

↑ <div></div>に対応するのが左下。

以上です。一つの大きな画像の右上、右下、左上、左下を貼り付けあわせる手法でした・・・画像の縮小など行っていないですね・・・。

また、先日の記事中「一長一短があるアプローチなので用途に合わせてお使いください。」と書きました。こちらについても中途半端な表現ではないかとご指摘を受けました。現在僕が把握している長所、短所は以下のとおりです。

■ 長所

• 画像を一枚つかうだけでいい。他のよくある手法のように4枚画像を使わなくてよい。
• 画像を4枚使うよりも、1枚画像を読むだけなのでリクエスト数が1回で済む。
• どうやって実現しているか理解したあとには、他の手法に比べ比較的コーディングがシンプル（主観ですが・・・）。

■ 短所

• 元画像以上の大きさのパーツは作れないので気をつける必要がある。

まだ僕が気づいていない点があればご指摘ください。今回はご指摘ありがとうございました！

このブログではまだまだ僕自身デザイン系の技術を勉強中ということもあり、いろいろ間違いをしがちです・・・。もちろん間違えないようにしますが、こうした指摘を受けつつ勉強させていただければと思います。

勉強した結果をもってさらに質の高い記事を書くことがご指摘いただいた方へのお礼だと思っています。今後ともどうぞよろしくお願いいたします・・・。

「画像なしでのまとめサイト紹介」シリーズ第二弾。

以前紹介したものもありますが、やっぱりまとまっていると便利なのでご紹介。

アイコンまとめサイト18選です。

» Collection of Sites Providing Free Web Icons and Buttons

キュートなアイコン満載です。ライセンスをご確認の上、ご利用ください。国旗のアイコンとか見るとなんかウェブサービス作りたくなりますね・・・。

さきほどのチュートリアルとあわせて、サイトを作るぞ、というときに知っておくと便利ですね。

こ、これはかなり使えます・・・。

が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。

『Web2.0風デザインのためのチュートリアル68選』です。

» Web 2.0 Webdesign-Tutorials | Dr. Web Weblog

以下の7つのカテゴリーにわかれています。

サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。

• ビジュアル効果系（1～11）
• ロゴ系（12～25）
• テキスト（26～33）系
• バッジ系（34～39）
• ボタン系（40～46）
• レイアウト系（47～60）
• Web2.0まとめ系（61～68）

個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。

しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」と思われがちですし、そうはいっても速報性は大事にしたいし・・・。

ただ、一つ言えるのはこのページを作った人はこれを広めたいと思って書いているわけで（かな？ですよね？）、その人の立場で考えると、自分のコンテンツがたとえそのままだったとしても日本語で紹介されるだけでかなりうれしいのではないかな、と思ったりもします・・・（※）。個人的な意見ですが・・・。

» Web 2.0 Webdesign-Tutorials | Dr. Web Weblog

■ 追記（2007-02-20 11:15)

※ ちょっと追記。「自分のコンテンツがたとえそのままだったとしても日本語で紹介されるだけでかなりうれしいのではないかな」というのはちょっと意図するところと違いました。自分のコンテンツまったくそのままでは微妙ですね。自分のコンテンツ＋コメント、がうれしいですよね。

「コンテンツそのまま」というのは使われている画像や動画という意味でした。自分のコンテンツを引用してもらうときに自分が作った画像を使ってもらうのはコメント付で紹介してもらうなら良いかな、と思ったのでした。

画像なし紹介記事を書きたかったので画像のことを考えすぎていて言葉足らずになりました。訂正しておきます。

ご存知の方も多いかもしれませんが、はてなの各サービスのロゴは、そのサービスにちなんだアニメーションとなっています。

細かいところですが、なかなか工夫を凝らしたアニメーションに作り手側のやる気を感じます。というわけで以下にまとめてみました。

» はてなロゴ集

↑ 「A」の頭をアンテナに模した、はてなアンテナ。

↑ 「m」の上がペラペラとめくれる、はてなブックマーク。

↑ 「i」をペンに見たてた、はてなダイアリー。

↑ 「o」がレンズのシャッターになっている、はてなフォトライフ。

↑ 縦棒が伸びる、はてなグラフ。

↑ 「G」から「p」へ波が起こる、はてなグループ。

↑ 「e」がひらめく、はてなアイデア。

↑ 「a」のところで地球が回っている、はてなマップ。

↑ 「S」がスライドする、はてなRSS。

↑ 数字がカウントされていく、はてなカウンター。

↑ 人力検索は、アニメーションなし。

↑ はてなリングも、アニメーションなし。

エントリーを書きながら知ったのですが、このロゴのアニメーション化は、はてなアイデアで実現したものだったんですね。しかも、コメントで書かれたアニメーションのアイデアが採用されていたりします。

ロゴはそのサービスの顔になるため、作るのに気を使うところかもしれませんが、それをユーザーとともに作っていこうとする姿勢が、ユーザーの意見を大切にするはてならしいですね。自分たちのアイデアが採用されたロゴだったら、ユーザーのロイヤリティーも高まりそうですね。