yahoo.comの広告が面白いです。IEで閲覧するとちょっとした体験をえることができます。広告表示の参考にどうぞ。
久しぶりにhttp://www.yahoo.com/に訪れてみると面白い広告が実装されていました。画面中央と右端のDiscover Cardの広告です。とても面白いアクションです。これからこんな広告が増えて行くのですかね。
残念ながらFirefoxで体験することができません。IEでブラウザ表示すると体験できます。
また、この広告に関してフィードバックも集めているようです。何度か見たい方は、中央の"Replay Animation"をクリックしてみてください。z-indexプロパティで重ねているみたいです。
最初は、リキッドレイアウトで画面全体にページ表示されますが、この広告を見終わると適正な画像幅にもリサイズされます。どんなスクリプトを実装しているのか見てみると2724行目あたりに広告のスクリプトが見つかります。javascriptを使ってFlashを流し込んでいるような感じです。興味のある方は覗いてみてください。
イメージ画像無しでのblockquoteで引用を表示するCSSサンプルを2パターン紹介しています。
blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。
一つは、24 ways: Swooshy Curly Quotes Without Imagesのエントリーではイメージ画像無しでの二重引用符で括ったblockquoteでの引用表示するHTML+CSSを紹介していることを。
<span></span>要素で二重引用符（開始）と（終了）を囲み、CSSでブロック・フロート設定で括ってあるように表示する方法です。
Ajax関連の面白いエントリーがいくつか紹介されています。
二つ目は、IEでは表示されませんが、CSS疑似要素要素（:beforeと:after）を使ってイメージ無しで引用符で括ったようにできる方法を紹介。
国内のタブブラウザLunascapeがブラウザコンテストを実施しています。最優秀賞金30万円です。コンテストの紹介とGUIデザインで参考になるサイトをいくつか取り上げてみました。
国内のタブブラウザLunascapeでは、ブラウザデザインのコンテストを開催しているようです。最優秀デザイン賞は、賞金30万円 + Lunascape公式スキンとしてバンドル予定。
賞金30万円を出すコンテストもそうそうないかと。自信のある方は参加してみてはいかが？応募期間にもまだかなり猶予があります。
javascript/ajax/サンプル/入門/リファレンス/ライブラリのサイトが立ち上がりました。オンラインエディタやAjax関連のフレームワークのリファレンスもあり、おススメブックマーク。
phpspot開発日誌さんのもう一つのサイトが立ち上がったようです。JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
JavaScriptオンラインエディタやAjax関連のフレームワークのリファレンスなんかもあって良さげな感じです。ブックマーク。
Uniqro.comのサイトコンテンツがボリュームアップ。WEBデザインやサイト構築、ユーザーエクスペリエンスを意識したサイト設計・導線構築など参考にできる要素がいくつか得られます。
以前のエントリーUniqro.com-シンプルでカッコイイで紹介したUniqlo.comですが、先月からさらにサイトコンテンツが増えました。
（画像Uniqro.comより）
かなりユーザーエクスペリエンスを意識したサイトとしてパワーアップしています。また、国内用サイトも新たに立ち上がったようです。他にも関連サイトをいくつか立ち上げています。
WEBデザインのインスピレーションやページ構築の参考にはいいと思います。ついでにUniqloで買い物する前に商品を決めておくのに利用するにもいいと思います。
blockquote要素のcite属性・title属性を抜き出し引用文後に表示するjavascriptの紹介です。
今回紹介するスクリプトは、blockquote要素の属性cite要素とtitle要素を抜き出し、引用文の後に表示するjavascriptです。前回のエントリー簡単に引用マークアップ(blockquote要素)を生成できる-javascriptとセットで使うといいです。
このスクリプトは、Enhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]のエントリーで紹介されているものをカスタマイズしてみました。
引用文を簡単に抜き出せてマークアップとして生成できるjavascriptの紹介です。ブックマーク用のスクリプトなので使い勝手がいいです。また、WEB標準に準じて生成できるのもこのスクリプトのスゴイところです。
最近エントリーの更新を怠っているのは、javascript勉強中でなかなか時間が作れないでいるから（時間を作ろうとしていないのが本音）。何とかしてモノにしたいのだが、これまた思うように理解できていなく毎日振り出し状態。自分にはとても難しすぎる感じがしてきた今日この頃。把握するのにも本に記載されていることやWEBで紹介されていることなどを読んでもイマイチ。
やはり、簡単なスクリプトから理解しながら手打ちでタグを打ち込んで表示処理を経験していかないとダメっぽい。36歳には、なかなか手ごわすぎる。
最近凝っているものは、引用タグの<blockquote></blockquote>もの。
引用を簡単にできるjavascriptを作ろうかと思っていたら、やはり先駆者がいて、その方のスクリプトがスゴく、それを把握するのにも時間がかかっていたのもある。
今回はその方のjavascriptを紹介。
リンク先をプレビューしてくれる便利なエクステンションCoolirisの紹介です。FirefoxはもちろんIE・Safariにも対応しています。これを導入することサイト検索の時間短縮ができる。
FirefoxエクステンションCoolirisがとっても使いやすくなったので紹介します。
このCooliris、導入するとマウスオーバーでリンク先ページをポップアップ表示できるというエクステンション。Firefoxエクステンションとして結構有名であったと思う。今はIEやSafariにも対応している。この3つのブラウザに対応しているだけでスゴイことだと思う。
以前までは限られたサイトでしかその機能が発揮できなかったが、今のバージョンはほとんどのアンカーリンクをマウスオーバーするだけで、リンク先をプレビュー表示してくれます。検索時間もかなり短縮できます。プレビュー表示の設定もいくつかのパターンから選べれるので、自分にあったセッティングで使うことができます。
1年前ぐらいまでは、Googleかdel.icio.usぐらいのサイトでしかその機能は使えなく、アンカーリンクをマウスオーバーするだけでリンク先が別レイヤーで表示されてしまうので、いつも使っているとウザくなってきたので使うのをやめていた。
最近の海外メジャーサイトのロゴで使われているフォントスタイルをいくつか紹介しているサイトがありました。インスピレーションなどの素材にどうぞ。
The Logos of Web 2.0 | The FontShop FontFeed | Font blog, typography tips, and design news.というエントリーで海外でのメジャーサイトのロゴで使われているフォントスタイルをいくつか紹介しています。
WEB2.0からいくつものメジャーサイトのロゴで使われているフォントスタイルを紹介しているのと同時に、そのフォント入手のリンクまでもあるという気の利きよう。
FirefoxのエクステンションでオリジナルCSSカスタマイズ表示ができるStylishの紹介です。ブラウザのインターフェースからよく使うWEBサービスの表示をカスタマイズできます。
Firefoxエクステンションで便利なものを見つけました。userstyles.orgで配布しているStylishというエクステンション。
このエクステンションは自分の使っているFirefox表示をカスタマイズしたり、よく訪れるサイトの表示設定もCSSカスタマイズすることができるというものです。よく訪れるサイトで広告表示などがウザい人には、消したりすることができます。
さまざまなTABLEタグのCSSデザイン共有できるサイトです。気に入ったデザインTABLEのCSSを入手することができます。
CSS TABLES GALLERY-TABLEのCSS設定パターンを共有できるサイト。
Design Nameをクリックすると実際にCSSパターンでTABLE表示されるので便利。DownloadでCSSを入手することができます。自分でもオリジナルのCSSを投稿できるので、これからもいろんなパターンが増えてくる。おススメブックマークサイト
Tシャツ関するネタをいくつか紹介しています。息抜きにどうぞ！
Tシャツに関するエントリーをいくつか紹介します。息抜きにどうぞ。
---■ 伊 東 家 の 食 卓 ■---でも話題になったTシャツなどを簡単にたたむ方法
私もこの生活に役立つ技をいつも使っています。
このコンテンツはMacromedia - Flashで制作されています。
ご覧いただくにはMacromedia - Flash Player（無償）が必要です。
Wii[ウィー]US版オフィシャルCMの紹介です。
最近ガジェット系のニュースサイトで各メーカーCMの話題に人気が集まっています。Macの日本版CMなんかも多くのサイトでエントリーされています。そんな中から任天堂Wii [ウィー]US版CMがありましたので息抜きにどうぞ
このコンテンツはMacromedia - Flashで制作されています。
ご覧いただくにはMacromedia - Flash Player（無償）が必要です。
息抜きにどうぞ、そうそうアクション映画でもこんな追跡シーンを見ることができません。カッコイイのでぜひご覧になってみてください。
マジでスゴイ！こんなカッコいい追跡シーンは、映画でもそうそう見ることができないかも。とりあえず見るべし。息抜きにどうぞ
このコンテンツはMacromedia - Flashで制作されています。
ご覧いただくにはMacromedia - Flash Player（無償）が必要です。
私がよく利用しているストックフォトライブラリーの紹介です。ついでにロイヤリティーフリーのフォトライブラリーのリンク集も紹介しておきます。
5000枚以上の写真やイメージ画像が無料で利用できる「Stockvault.net」 - GIGAZINEで紹介されていたロイヤリティーフリーのストックフォトライブラリーいいんじゃない。
いくつかのライブラリーを知っておくとイメージ画像を探すのにも便利です。自分でもよく使うストックフォトライブラリーを紹介します。
クリスマス商戦前にApple ipodに新しいラインナップがお目見えするなんていう噂があります。Video ipodが欲しいのだが、もう1か月様子をみることに。とりあえず、新しいiPod shuffle 1GBを購入。
前々からVideo iPod（Apple iPod 30GB ブラック MA446J/A）が欲しかったので、もうそろそろ購入しようかと思っていましたが、今月末か来月頭,
クリスマス商戦前に"新しいipod"のラインナップがお目見えするなんていう噂があるので、結局見送りました。
ちょうど今月10日からAmazonにてApple iPod shuffle 1GBの販売が始まったので、そちらを購入。1か月ほどこのshuffleで我慢しようかと。
どうなんだ・・・ ジョガーには中途半端
この軽さとコンパクトさは絶妙ところで、話は戻って気になる"新しいipod"は、Video iPodでタッチスクリーンパネルを採用などといった噂がある。他の情報ではFMトランスミッターを装備して、FMも聞けるようになるといった情報もある。
和英にもってこいのjavascriptです。わからない英単語があったとき、ダブルクリックでスペースアルク『英辞郎 on the Web』の検索結果が表示されます。ブラウザをFirefox-エクステンションgreasemonkey専用スクリプトです。
はてなブックマークをチェックしている方はすでに知っていると思うが、[JS] 英和スクリプト for Greasemonkey (Scripting Note.)というエントリーで便利なスクリプトを配布している。これはすごい！
わからない英単語をダブルクリックすることで地球人ネットワークを創るアルク：スペースアルクの辞書検索結果がポップアップウインドウで表示されるjavascriptです。
私も［和英］［英和］では、地球人ネットワークを創るアルク：スペースアルクの辞書を使っているのでとてもうれしいスクリプト。おススメです。
このスクリプト、別窓を開く処理なんかも覗けるのでこれまたjavascriptの勉強にもいい。
ブラウザをFirefox-エクステンションgreasemonkeyを使っている方にしか使えないスクリプトです。
よく海外サイト閲覧で辞書サービスを利用する方には、このスペースアルクの『英辞郎 on the Web』の方がYahoo辞書などのWEB翻訳サービスよりクオリティーが高い内容が得られると思う。どちらかというと口語に関する内容が他に比べて豊富で例題もいくつかあってとても参考になる。
ダブルクリックすると検索結果が表示されるjavascriptです。今回はmixiコミュ検索結果を表示するようにカスタマイズしてみました。
IT戦記 - 英単語をダブルクリックで英英辞典を検索する Bookmarklet と Greasemonkeyでとても便利なjavascriptを紹介していたので、自分でも何かできないかと思い、カスタマイズしてみました。
出来上がったのは、ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]のコミュ検索結果を表示するjavascript
素人ながら、見よう見真似で何とか正常動作するようにカスタマイズしてみました。
ユーザーの設定するフォントサイズを検知して、その値に対してデザインを適宜変更できるjavascriptです。ユーザービリティを追求してゆくとこのスクリプトは役立ちます。
ユーザービリティを考慮してWEBページを制作するのに役立つscriptがA List Apart: Articles: Text-Resize Detectionのエントリーで紹介している"textresizedetector.js"
このスクリプトは、ページを閲覧しているユーザーの任意に指定するフォントサイズを検知して、合わせて各要素のクラス指定を操作できるというもの。
いくらユーザービリティを考慮に入れたWEBページデザインでさえも、フォントにおいてデフォルト設定サイズ以外の大きさにリサイズされた場合、自然とデザインさえも崩れてしまいます。当然のことでしたが、このスクリプトを導入することで、任意のサイズまでフォントのサイズ変更がされた場合、適宜対応してデザインを変更できるということが可能になります。
今私が勧める取っておきたいWebサービスアカウントを紹介しています。たくさんの方でトラックバックを使って情報がつながればうれしいです。
ITmedia Biz.ID：取っておきたい、7つのWebサービスアカウントのエントリーから始まり、さらに取っておきたいアカウント 7つ | WWW WATCHでも他のサービスアカウントを紹介しているから、触発されて自分の取っておきたいWEBサービスアカウントなんかも紹介しておく。
他にも自分にぴったりのサービスなんかがあるのかな気になるところ。トラックバックで情報がつながれば面白い。
表示してるWEBページのテキストリンクを簡単に生成してくれるブックマーク用javascriptの紹介です。ついでに定義リストでのマークアップも生成できるパターンも作ってみました。
Photolog::NIKKORE:bookmarkletのエントリーで紹介している表示しているページのテキストリンクを生成するjavascript。これはとても便利なので最近頻繁に使っています。
上記のリンクをブックマークにそのまま登録し、表示しているページでブログのエントリーでテキストリンク表示したい場合にこのブックマークをクリックするだけでテキストリンクが簡単に生成できます。あとは、コピぺで貼り付けるだけと簡単。
試しに生成したテキストリンクがはこちらPhotolog::NIKKORE:bookmarklet
javascriptのソースは以下の通り
SNS(ソーシャルネットワークサービス）-MySpaceにアカウント登録しました。Mixiとはまたちがった体験を得れそうです。簡単に登録できますので、興味のある方は登録してみては？
MySpaceの日本語仕様がオープンしたので早速登録しました。
国内ではmixiが有名ですが、海外ではMySpace利用者の方が多いです。どんなコミュや機能があるのかも気になっていたりもしてました。
中には、有名人なんかもちらほらいたりして、本当かどうかはさておき、mixiとは違った体験をできるのではないかなと期待しています。徐々に使い方を覚えて行ければと思っています。
スタイルシート切り替えjavascript、styleswitcher.jsの紹介です。このスクリプトを導入することでアクセシビリティを考慮したWEBページ提供が可能となります。
アクセシビリティを考慮したWEBページを作成するときに役立つのがA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。
アクセシビリティガイドラインにも「ガイドライン2. 色だけに依存しない」という項目があり、
2.1 色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。 [優先度1] (チェックポイント2.1)
2.2 前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。 [対画像：優先度2 、対テキスト：優先度3] (チェックポイント2.2)
（引用：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書:http://www.zspc.com/documents/wcag10-tech/index.html）
ページコンテンツをハイコントラスト表示で提供する場合などにスタイルシートの切り替えを使うことや、見易いページを提供するときなどにも使われています。
456 Berea Streetは、ページ上部に"Switch to high contrast layout"リンク表示をして切り替えができるようにしています。
Going My Wayさんは、このscriptを使ってオリジナルのCSSデザインが切り替え表示できるようにしています。
LEDを使ったビルライティングをいくつか取り上げてみました。今年の神戸ルミナリエのテーマは「空の魅惑」“L' Incanto del Cielo”です。
神戸ルミナリエ今年のテーマは、「空の魅惑」“L' Incanto del Cielo”
どんなイルミネーションが見れるのか楽しみです。
街を彩でるLEDを使ったビルライティングを紹介しているサイトがいくつかありました。
アクティブコンテンツを実行許可のダイアログボックスの表示をすることなく実行するJavascriptの紹介です。ユーザーにストレスなくWEBページ閲覧を提供することができます。
海外のサイトを閲覧していると、scriptの実行許可を伺うことなくFlashなどのアクティブコンテンツが普通に実行されるサイトがあります。何かなと思いつつ、コードを覗いてみるとそういったサイトの多くがつかっているのが、"ieupdate.js"という外部Javascriptの読み込み。
私は、いつも使うブラウザがFirefox（No Scriptエクステンション実装）です。No Scriptを実装しているとほとんどのFlashサイトやJavascriptの実行が制御されます。にもかからず、いきなりscriptが実行されるのが、"ieupdate.js"を外部から実行しているサイトです。
どうもこの"ieupdate.js"を外部から読み込むようにしているとFlashなどのアクティブコンテンツをストレスなく実行できるようです。そんなわけで「アクティブコンテンツをストレスなく実行する方法」いろいろと探してみました。いまいちわかりません。わかる方がいたら、ぜひエントリーにして取りあげてほしいです。
ちなみに"ieupdate.js"を導入しているサイトは、海外のWEBデザイン事務所のサイトです。Indigo 6 :: First-Class Digital試しに覗いてみてください。サイト自体もカッコいいサイトです。
del.icio.usでカラーパレットを共有することができます。好きなサイトからのカラー情報を抜き出す方法、photoshop・Illustratorへのパレット変換方法を紹介しています。
ソーシャルブックマークサービスはdel.icio.usを使っています。del.icio.usでカラーパレットも共有できるなんてことを発見。
caramel*vanilla ? del.icio.usをカラースキーム･ギャラリーにするというエントリーより
ブックマークするときに、
こんな感じになります。参照→del.icio.us / tag / ColorScheme
del.icio.usも使えるじゃん。といった感じ。スゴイ！感動。
とりあえず、しばらくは"ColorScheme"のタグつけで好きなサイトのカラーパレットもポストして行きます。
カラーの抜き出しとPS・ILLへのパレット変換方法については、以下に紹介しておきます。
AmaPOP - amazon affiliate link generator
手軽にあなたのアソシエイトID入りのアマゾンアソシエイト（アフィリエイト）リンクを作成することができるサービス
