youmos

マウス操作で写真にズームするギャラリーswf（PostcardViewer）

youmos — Fri, 15 Aug 2008 08:00:01 +0900

撮りためた写真を公開するときに使ってみたいのが、PostcardViewer。マウス操作で直感的にクリックすると、選んだ写真にズームする。画像形式はJPEG(non-progressive)を表示することができる。 PostcardViewerはFlashで動作し、あらかじめ定義したgallery...

CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）

youmos — Thu, 14 Aug 2008 08:00:00 +0900

メニューやウインドウなどのインターフェースをブラウザ上で実装するのに便利なのが Mocha UI。Web用のUIフレームワークとして複数のJavaScriptライブラリなどから構成されている。Mocha UI フレームワークを利用するにはmootool.jsも必要になる。

透明感のあるデザインをJavaScriptで実装する（glassbox.js）

youmos — Wed, 13 Aug 2008 08:00:01 +0900

ガラスのように透明感のあるデザインをコンテンツに適用してくれるのがglassbox.js。JavaScriptコードで、GrassBoxデザインを適用したい<div>などを指定すると、必要なHTMLタグとスタイル指定が行われる。数行のJavaScriptコードを書くだけで、デザインが適用...

MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）

youmos — Tue, 12 Aug 2008 08:00:01 +0900

YouTubeのようにFlash形式の動画プレーヤーで、作成した動画をコンテンツ上に表示したいときに便利なのがJW FLV MEDIA PLAYER。FLV, MP4, MP3, AAC, JPG, PNG,...

FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）

youmos — Mon, 11 Aug 2008 08:00:00 +0900

画像イメージだけでなく、FlashやFLV、MediaPlayer形式のムービーなどもスライドショー表示したくなる場合がある。shadowboxは複数の形式に対応した、スライドショーJSなので便利に利用できる。また、デザインを構成するSkinを独自に作成する事も可能になっている。

wrapScroll スクロールに同期するJavaScript

youmos — Mon, 04 Aug 2008 12:00:00 +0900

wrapScroll プロジェクト wrapResize プロジェクト zoomGallery プロジェクト技術リファレンス記事 wrapScroll JavaScript Library ダウンロードページ ver...

デザインが魅力的なスライドショーJavaScript (Lightview)

youmos — Thu, 17 Jan 2008 08:45:01 +0900

スライドショーを設置しているサイトを目にする機会が多くなってきた。他のサイトと少しでも違いを出したいときに是非検討したいのがLightview。基本的なユーザーインターフェースはLightboxと非常に似ている、細かな部分のデザインに丸みがあるので、角丸を多く採用しているサイトデザインとの相性が良い...

楽にフォーム入力チェックを実装するJavaScript （JSValidate）

youmos — Thu, 27 Sep 2007 08:00:00 +0900

サイト上に入力フォームを設置する場合注意したいのは、ユーザーが入力する際に迷わずに必要な項目を入力できるかといった内容になる。多くの場合、入力フォームを経由することで離脱率が上がり、コンバージョン率低下の要因となる。「フォーム入力のしやすさ」以外にも様々なケースがあるが、入力ミスなどを適切に表示する...

CSSデザインレイアウトをオンラインで簡単に作成する（YAML）

youmos — Thu, 06 Sep 2007 10:45:00 +0900

WebコンテンツをCSSレイアウトで作成する場合、非常に便利なのが Yet Another Multicolumn Layout (YAML)。必要なレイアウトをドラッグで変更できるなど、直感的に目的のレイアウトを作成することができる。

ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）

youmos — Fri, 31 Aug 2007 07:45:00 +0900

ナビゲーション項目やコンテンツをユーザーが自由にドラッグ移動できるようにしたい場合など便利なのがPrototype Portal Class（protal.js）。Wedgetを作成配置するとドラッグ移動・配置の調整など可能なコンテンツが表示される。

フォームボタンCSSデザインするテクニック（Rediscovering Button Element）

youmos — Thu, 30 Aug 2007 11:35:00 +0900

Webコンテンツにフォームボタンを設置すると、ブラウザ標準のボタンが表示される。画像イメージなどでボタンの代替として利用することができる。buttonタグとCSSの組み合わせでアイコンを表示するテクニックなど、Rediscovering Button Elementで具体的な解説をしている。

半透明の角まるツールチップを表示するJavaScript （CoolTips）

youmos — Tue, 28 Aug 2007 07:45:01 +0900

JavaScriptでツールチップを表示するライブラリは比較的多く存在する。ライブラリ選択の基準にデザインが重要になってくる。シンプルなデザインの角まるツールチップで使いやすいのがCoolTips。ライブラリも軽量になっている点もうれしい。

JavaScriptでプログレスバーを簡単に実装する（jsProgressBarHandler）

youmos — Mon, 27 Aug 2007 07:45:00 +0900

Ajaxなど非同期処理などプログレスバーを表示させたいと思うことがある。しかし、実装の手間や開発期間を考えると、進行状況を表示するだけのプログレスバーに時間をかけたくない。簡単にプログレスバーを実装できるのがjsProgressBarHandler。

JavaScriptコード圧縮して盗用から守る（packer）

youmos — Fri, 24 Aug 2007 07:45:00 +0900

JavaScriptコードはHTMLタグのように、ブラウザ側で受信できるためコードを完全に保護する方法が限られている。その為、JavaScript経由でデータ処理プログラムなど呼び出す場合、注意する必要がある。

iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）

youmos — Thu, 23 Aug 2007 07:45:00 +0900

iTuneの機能にCoverFlowがある。カバーアートが横にスライドするメニューだが、量が多い場合や写真などイメージから選択する際に、優れたインターフェースになっている。同様のメニューをWebコンテンツに実装することが出来るのがiTunes Coverflow。

画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）

youmos — Tue, 21 Aug 2007 07:45:01 +0900

画像イメージをコンテンツに表示する場合、毎回サムネイル用の画像を作成してアップロードしている場合に、簡単にサムネイルサイズで表示してくれるのが、jQuery Thumbs。jQueryのプラグインとして動作する。

Ajaxでサクサク動くWebファイルマネージャ（Relay）

youmos — Mon, 20 Aug 2007 07:00:01 +0900

サイト用のコンテンツには画像、JavaScript、CSSなどいろいろなファイルをアップロードしている場合が多い。FTPで接続できれば問題ないが、Webサーバでファイルを共有したい場合や、ブラウザ経由でファイルの管理などを行いたい場合便利なのが、Relay。

アンカータグを利用してスムーススクロールを実装する　（df Smooth Scroll）

youmos — Fri, 10 Aug 2007 08:10:00 +0900

コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。

MacでもFlashでホイール操作が出来るようにする（SWFMacMouseWheel）

youmos — Thu, 09 Aug 2007 07:45:00 +0900

Flashコンテンツでマウスのホイールイベントを利用する場合、そのままではMacでイベントが受信できない。Macでもホイールイベントの実装を楽にしてくれるのが、SWFMacMouseWheel。利用する際は、SWFObject.jsのアドオンとして利用する。

HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）

youmos — Mon, 06 Aug 2007 07:55:00 +0900

HTMLやWikiなどタグを入力するするのが、意外と面倒になる。こうした手間を改善してくれるのが、jTagEditor。WYSIWYGとは異なり、コードを編集する事に特化したエディタインターフェースを実装することが出来る。利用するには、jQueryも必要になる。HTML、Wiki、Textile...

使いやすいYUIライブラリのWYSIWYGエディタ（Rich Text Editor）

youmos — Thu, 02 Aug 2007 07:00:01 +0900

Yahoo!のフレームワーク（YUI）には便利な機能が多い。CSSやJavaScriptライブラリなどを組み合わせて利用する。中でも注目したいのがWYSIWYGのRich Text...

Flashで便利なTweenクラスのわかりやすい解説（Ｔween Class Easing）

youmos — Wed, 01 Aug 2007 07:45:00 +0900

Flashでアニメーションを実装する際、タイムラインで作成する方法と、ActionScriptで作成する方法がある。タイムラインでアニメーションを作成するよりも、Tweenクラスを利用すればもっと楽に高度なアニメーションを実装できる。

フォトショップで作る80種類のテキストエフェクト集（photoshoproadmap.com）

youmos — Wed, 01 Aug 2007 07:45:00 +0900

ロゴやタイトルテキストなどデザインが良いと、デザイン全体が生きてくる。良く目にするデザインから斬新なものまでをネット上に散らばったチュートリアルを紹介しているのが、photoshoproadmap.com。80種類のエフェクト実践方法へのリンクを一気に確認できるようになっている。

CSSレイアウト情報をレイヤー表示するブックマーク（XRAY）

youmos — Tue, 31 Jul 2007 07:45:00 +0900

CSSのレイアウトなど気になる部分をサッと確認したいときに便利なのが、XRAY。普段利用しているブラウザでも利用でき、利用する準備も非常に簡単。ソフトウェアなどのインストールは必要ない。利用するには、レイアウト情報を確認したいサイトで、事前にブックマークしておいたXRAYを呼び出すだけで利用でき...

Lightboxのような透過レイヤー表示の実装サンプル（Lightbox Effect）

youmos — Mon, 30 Jul 2007 07:45:01 +0900

スライドショー表示JavaScriptとして有名なLightbox。ナビゲーションや表示エフェクトなどスライドショーの定番になりつつある。Lightboxがスライドを表示する際に、濃いグレーの透過レイヤーなどエフェクトを作成する方法を紹介しているのが、PJ Hyett。

youmos

マウス操作で写真にズームするギャラリーswf（PostcardViewer）

CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）

透明感のあるデザインをJavaScriptで実装する（glassbox.js）

MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）

FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）

wrapScroll スクロールに同期するJavaScript

デザインが魅力的なスライドショーJavaScript (Lightview)

楽にフォーム入力チェックを実装するJavaScript （JSValidate）

CSSデザインレイアウトをオンラインで簡単に作成する （YAML）

ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）

フォームボタンCSSデザインするテクニック （Rediscovering Button Element）

半透明の角まるツールチップを表示するJavaScript （CoolTips）

JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）

JavaScriptコード圧縮して盗用から守る （packer）

iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）

画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）

Ajaxでサクサク動くWebファイルマネージャ （Relay）

アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）

MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）