意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
Google Visualization APIを使ってWebアプリケーションにグラフィカルデータを表示する
はじめに 最近は、ネットワーク上に存在するデータがますます増えており、その形式や場所もさまざまです。こうした傾向から、ビジュアル分析、つまりネット上のデータから必要な情報を抽出して一目で分かるように提示する機能が重要になっています。開発者の多くは、このようなデータを集めて分析し、ダッシュボード、レポート、グラフのようなフォームにまとめて公開する役割も担っています。その際に威力を発揮するのが、表現力の高い画像や図表です。 こうした新たな要求に応えるために、Google Visualization APIは、開発者がビジュアル分析を行う一元的な方法と、データをビジュアル化するほとんどの状況に対応できる豊富なグラフィックコンポーネントやグラフ作成コンポーネントを提供します。このAPIは、データ交換の仕様と一連のライブラリで構成されています。これらのライブラリを利用することで、開発者は、構造化され
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
jQueryアニメ＆エフェクト合わせ技で画像を拡大
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
おそろしく高機能でフリーなFlashフォトギャラリーの決定版「dfGallery 2.0」 - GIGAZINE
AJAXによって複数の好きな画像を一気にアップロードし、それをフォトギャラリーとしてページに埋め込んで表示できるのがこの「dfGallery 2.0」。フルスクリーンモードにすることもでき、FlickrやPicasaのアルバムと連携可能で、カスタムテーマとマルチスキンによって見かけやレイアウトを大幅かつ自由に変更可能で、さらに管理用のコンソール画面、複数のギャラリーセットとアルバムのサポート、BGMの再生なども可能です。これだけ高機能であるにもかかわらずフリーでの利用（Apache License 2.0）が可能となっており、あらゆる局面で利用可能となっています。 実際の動作デモやインストールとカスタム方法を解説したムービーの再生などは以下から。 dfGallery 2.0 - Free Flash Gallery | Dezinerfolio 上記ページからこの「dfGallery 2.
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
要チェック！CocoaアプリケーションのようなUIをWebブラウザ上で実現する·Cappuccino MOONGIFT
いつ出るか、いつ出るかと待ち遠しかったがついに登場した！ Mac OSXのインタフェースが優れていることは大多数の人が認めるだろう。Windowsには感じられない、エレガントなインタフェースはMac OSXやiPhoneなどで活躍している。あのインタフェースをWebブラウザ上で実現できたらどれだけ良いだろう。 サンプルアプリケーションのflickrビューワー Ajaxを使ったGmailをはじめて触ったときのあの驚きを再び感じさせてくれるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCappuccino、Webブラウザ上でCocoa風インタフェースを実現するアプリケーションフレームワークだ。 Webベースでありながら、JavaScriptを記述する必要はない。Objective-Cに似た、Objective-Jというプログラム言語で記述して、それをWebブラウザ向けにJ
フリーのグラフスクリプト１０個:phpspot開発日誌
10 Free Chart Scripts | WebTecker the latest Web Tech, Resources and News. This week I’ve been working on a project that required data to be shown visually. フリーのグラフスクリプト１０個が特集されてました。 JavaScriptやFlash製のグラフを使う際の選択肢として使えます。 Flot Open Flash Chart AmCharts Emprise JavaScript Charts PlotKit Flotr PHP/SWF Charts Visifire FusionCharts JFreeChart グラフを作る際にはこうしたツールを使えば一瞬ですね。 その他、グラフ関連エントリは以下 ピュアCSSでクールなグラフサン
色んな種類のクールなツールチップを実装しよう「Prototip 2」:phpspot開発日誌
Prototip 2 - Create beautiful tooltips with ease Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. 色んな種類のクールなツールチップを実装しよう「Prototip 2」 Prototip 2 を使えば次のようなクールなツールチップが実装できます。 カーソルをもっていくことでプレビューできます。 使い方は、必要なJS/CSSを読み込んだ後、次のように初期化するのでOKみたいで簡単 new Tip(element, 'content', { title: 'This tooltip has a title', style: 'protoblue', stem: 'topLef
JavaScriptによる都道府県入力補助「jsmap」:phpspot開発日誌
jsmap jsmap(仮称)は、県名や州名の選択をするためのポップアップを表示するスクリプトです。(入力補助スクリプト)JavaScriptによる都道府県入力補助「jsmap」 都道府県の入力が簡単です。 これは知っておいたほうがよさそうです。
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナル
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
[Think IT] 【これならわかる！JavaScript/Ajax】やりなおしのJavaScript 第1回：そろそろ本気で学びませんか？ (1/3)
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめてのjQuery
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
20の優れたAjax効果*ホームページを作る人のネタ帳
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
http://youmos.com/news/wrapscroll_05b.html