ITニュース

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

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

PostcardViewerはFlashで動作し、あらかじめ定義したgallery.xmlのリストをもとに写真一覧を表示するようになっている。単に写真ファイルをしているだけでなく、細かなオプションなどの指定もする事ができる。続きを読む...

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

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

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

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

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

YouTubeのようにFlash形式の動画プレーヤーで、作成した動画をコンテンツ上に表示したいときに便利なのがJW FLV MEDIA PLAYER。FLV, MP4, MP3, AAC, JPG, PNG, GIFなどのフォーマットに対応している。

プレーヤーの再生部分などデザインを変更したい場合、オリジナルのSkinを作成する事もできる。Skinのサンプルもダウンロードできるので、気に入ったのがあればそちらを利用してもよい。続きを読む...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

利用するには、jQueryも必要になる。HTML、Wiki、Textile、BBcodeなどのコードにはデフォルトで対応している。別のフォーマットに対応したい場合は、拡張することが出来るようになっている。続きを読む...

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

Yahoo!のフレームワーク（YUI）には便利な機能が多い。CSSやJavaScriptライブラリなどを組み合わせて利用する。中でも注目したいのがWYSIWYGのRich Text Editor。動作も比較的軽く、インターフェースも使いやすく仕上がっている。そのままでも十分に利用価値があるが、ツールバーにボタンを追加するプラグインを自作して利用することもできる。続きを読む...