ウェブデザイン, CSS, Javascript, Flash, 海外のウェブサービスなどを紹介 | mBlog[JAVASCRIPT] jGrowl - JSを使ってGrowlエフェクトをサイト内で再現
By Quattro | 7 月 7, 2008
マックユーザーの多くが導入してて、個人的にはもうこれOS標準の機能としてApple買い取ったらエェんちゃうか思ってるGrowl。あのエフェクトをウェブ上で再現できるJavascriptです。出現や消滅のエフェクト違いのサンプルが5種類用意されています。オリジナルに一番近いのは1番目かな。これなかなかイカしてますね。サイト内で、って事になると使いどころが難しそうだけど、マックオタ的にはとっても興味深いJS。ナイスですね。
[JAVASCRIPT] フォームのフリガナを自動入力させるAutoRuby.js
By Quattro | 7 月 1, 2008
これ素晴らしい。ユーザーがフォームのフリガナ欄に入力する手間を省いてくれるというJavascript。リンク先にサンプルが用意されているので、試しに“お名前”欄に入力してみましょう。リアルタイムにフリガナが入力されていくのが分かると思います。導入も簡単そう。ユーザーの事を考えた素晴らしいアイデアですね。
フォームのフリガナを自動入力させるAutoRuby.js >>
[MISC] FireFox Download Counter - FireFox3のダウンロード数をリアルタイムに見れるカウンター
By Quattro | 6 月 19, 2008
昨日公開になったFireFox3、なかなかスゴいペースでDLされてるようです。ギネスに挑戦ってのはイケたのかな？ そのFireFoxがどれくらいDLされているのかを、各国別にリアルタイムで見る事のできるサイト。アメリカからのDLが飛び抜けて多いけど、日本、ドイツあたりもなかなか頑張っておりますな。仕事で早速使ってるけど、Javascriptの実行速度が速くなったってのがアツいですな。Google Docsとかの使い心地が良さそう。けど日常的に使うのはやっぱりSafariかなー。アップルの犬的に。
[JAVASCRIPT] dfFlexiGrid - Liquid Javascript Grid Layout - 幅やカラムを変更できるJavascript
By Quattro | 4 月 18, 2008
幅やカラム数、フォントの大きさを変更できるJavascript。サイトを閲覧するユーザー側でそれらを見やすいよう変更できるという点がナイス。もちろんこれにより、サイトオーナーにはデザイン的な工夫が求められるだろうけど、なかなか新しいんじゃないでしょうか。記事下部より実際に動いているデモと、ダウンロードが行えます。
dfFlexiGrid - Liquid Javascript Grid Layout >>
[JAVASCRIPT] qGallery - iPhotoのイベントインターフェースのようなフォトギャラリー
By Quattro | 4 月 4, 2008
これはスゴい。iPhotoユーザーならピンとくると思うけど、08からサポートされたイベントのインターフェースを模したフォトギャラリー。ウェブ上でJavascriptを使って再現されてます。イベント上でマウスポインタを左右に移動する事で、イベント内の写真のサムネールを確認することもできます。写真の枚数に応じて黒い線の太さが変わる点などは、iPhoto以上の機能と便利さ。イベント内では2つの表示法で写真の閲覧が可能。現状Safari 3.1 (mac/win)、Firefox 2.x、Internet Explorer 7で動作するみたいで、今後対応ブラウザは増えるそうです。Javascriptを使ったフォトギャラリーとしては個人的には過去にないほどエクセレントな印象。何よりマックっぽいという点で素晴らしい。いつか使ってみたいなこれ。
[JAVASCRIPT] image menu - 伸縮する画像を使ったメニュー
By Quattro | 3 月 22, 2008
以前Flashを使って作成されたものをよく見かけた、伸縮する画像を使ったメニュー。最近じゃJavascriptで表現できるようです。これがなかなか素晴らしい出来で、サイトのメインナビゲーションとしても使えそう。Firefox 2 (mac / pc)、IE 7、IE 6、Safari (mac)で動作し、Javascriptライブラリとしてmootools v1.11が必要だそうです。試しにソースをダウンロードしてみたら、特にmootoolsを別途用意しなくても動いたので、同梱されているようです。
[JAVASCRIPT] FancyForm
By Quattro | 3 月 20, 2008
Javascriptを使って、formタグ内のチェックボックスやラジオボタンをグラフィカルに見せる手法。名前が名前なんで、以前紹介したFancyZoomと何か関係があるのかと思ったけど、そうでもないみたい。これなかなかイイ感じ。通常のチェックボックス等よりも見やすいし、クリック範囲が広い分実用的。その内使ってみたいJS。
[FLICKR TOOL] blackr - flickr内の写真を見てる時に、写真以外をブラックアウト、もしくはホワイトアウトしてくれるブックマークレット
By Quattro | 3 月 11, 2008
flickrで写真を閲覧する際に、写真の個別ページ（例えばこんなページ）や、拡大表示時（例えば例えばこんなページ）に写真以外の部分をブラックアウト、もしくはホワイトアウトさせる事で、ブラウザウィンドウ内を写真のみにするというブックマークレット。使い方は、サイト内に用意されてる４つのボタンをブラウザのブックマークバーにでも放り込んでおけばオッケー。写真だけを見たいページで放り込んだブックマークレットをクリックすれば、写真だけになります。解除する時はもっかいブックマークレットをクリックすれば元に戻ります。サイト内の黒文字のボタンがブラックアウト用、白文字がホワイトアウト、カッコの付いてるものは写真の輪郭に縁取りが付きます。どれか１つ気に入った物を選べばイイと思います。ちなみにブックマークレットはJavascriptで書かれているので、JSがオフになっている設定のブラウザでは反応しないと思います。また一覧ページでも適用されません。単純な機能なんだけど、意外と重宝しそう。flickrの白背景ってまぶしい時もあるから、自分は黒の輪郭ナシがイイ感じ。
[JAVASCRIPT] Shadowbox.js - lightboxのようなコンテンツ表示JS
By Quattro | 3 月 7, 2008
lightboxのようなポップアップによるコンテンツ表示Javascript。画像以外にもFlash, Movie, HTMLといったコンテンツが表示できます。タイトル類が下からニュイっと出てくるのが、なんだかイイ感じ。“Usage”のページに細かい使用法が書いてありますが、lightboxと同じように“rel”を使って適用するようです。これ系の見せ方ってホント色々あるので、目的に応じて選べるようになってきましたね。
[JAVASCRIPT] Galleria - a Javascript Image Galler - パっと見Flashとしか思えない、とってもナイスなJSスライドショー
By Quattro | 3 月 6, 2008
パっと見Flashとしか思えない動きをする、JSで作られたスライドショー。JSライブラリにはjQueryを使っているようです。最初見た時は「あぁ、Flashを使ったスライドショーswfか」って思ったけど、右クリしてビックリ。Flashじゃなかったんです。いやーこれはスゴい。まぁスゴい言うてもフェードイン効果を使っているだけなんだけど、トータルで完成されてる感じに感動しました。デモは“Demos”という欄から見る事ができます。いずれ気合いの入った写真を公開する際などに使ってみたい。ちなみにダウンロードはこちらからできます。jQueryライブラリ使ったJSって意外とアツいんだよなー。
Galleria - a Javascript Image Galler >>
[JAVASCRIPT] GlassBox - 透明なボーダーを描く事のできるJS
By Quattro | 3 月 3, 2008
Prototypeを使った、Javascriptユーザーインターフェースライブラリ。主な機能は透明なボーダーを引けるという事らしいんだけど、他にもLightbox的なポップアップ表示を行う事もできるようです。“Usage”のページからデモを見る事ができますが、基本的にはサイト全体がデモのような感じ。Windows Vistaのウィンドウ表示のような印象。IE 6 + 7、Firefox 2、Opera 9、Safari 3で動作するようです。以前のmBlogでIEハックを併用して同じようなことをしようとしたんですが、なんかいろんな理由でミスったような覚えがあるので、今度似たようなデザインをする時にはイイかもしんない。
[JAVASCRIPT] mooSlidebox3 - lightboxとはちょっと違うコンテンツの見せ方
By Quattro | 2 月 19, 2008
lightboxに近いコンテンツの見せ方なんだけど、出てくる場所やエフェクトがちょっと違うというJavascript。下からニュイっと出てくるので、例えばブログのナビゲーション類をここに集約させるとか、サイト内の特定のコンテンツの詳細説明を出すとか、そんな感じの使い方ができそう。ただ高解像度のディスプレイを使っている人の多くは画面上部にポインタ位置が集中するので、不便という見方もできます。サイト下部の“Sample”から動作確認ができます。必要に応じて使ってみたいJS。っていうかそろそろlightbox系のJSのまとめ記事でも作ろうかな。
