週刊Webテク通信

2009年3月第2週号1位は、画像を扱うjQueryのプラグイン14個/気になるネタは、「日テレアプリ」公開、APIの提供もスタート

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年3月9日~3月15日の間に見つけた記事のベスト5です。

1. 14 jQuery Plugins for Working with Imageshttp://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

画像を扱うjQueryのプラグインを14個紹介しています。

スライドショー、ギャラリーといった用途に使うものや、写真を部分的に表示するものなど、画像の見せ方を工夫する際の手助けになりそうなものがそろっています。

関連リンクとして載っている同サイト内の別記事16 Free JavaScript Solutions for Displaying Your Images 」でもフォトギャラリーのソリューションが紹介されていますね。

図1 画像の扱いもjQueryプラグインで便利に
図1 画像の扱いもjQueryプラグインで便利に

2. Beautiful Forms - Design, Style, & make it work with PHP & Ajax | Noupehttp://www.noupe.com/php/beautiful-forms.html

フォームをきれいにデザインする方法や、Ajaxを使って機能を追加するフレームワークなど、フォーム作りに役立つ情報をいろいろと紹介しています。フォームのまとめサイトと言っていい充実ぶりです。

フォームの値チェックに関しても、ひとつのコーナーを設け複数のフレームワークを紹介しています。

3. 40 Useful Adobe Illustrator 3D Tutorials and Techniqueshttp://sixrevisions.com/tutorials/40-useful-adobe-illustrator-3d-tutorials-and-techniques/

その昔Adobe Dimensionsという3Dツールがありましたが、今やIllustratorにもPhotoshopにも3D機能が付いています。でも、3D機能を使いこなしている人ってそんなに多くないんじゃないでしょうか。

この記事では、Adobe Illustratorで3D表現をするためのチュートリアルが多数紹介されています。Illustratorでは「3D効果」機能で図形を押しだし・回転させることができるのですが、ほとんどのチュートリアルでこの機能が効果的に使われています。

3D効果を使う部分と、普通に描画するところの使い分けの参考にもなりそうです。

図2 3D効果をうまく使っている作例がそろっています
図2 3D効果をうまく使っている作例がそろっています

4. 20+ ways to create javascript modal windows and dialog boxes | Design Labelhttp://www.designlabelblog.com/2009/03/20-ways-to-create-javascript-modal.html

モーダルウィンドウやダイアログボックスを表示させるスクリプトを配布しているサイトのリンク集です。

モーダルウィンドウって何? という人は検索すればいくらでも解説が出てくると思いますが、ウェブページ上でのモーダルウィンドウといえばLightboxが有名ですね。ああいった子ウィンドウのことです。

ポップアップウィンドウを開くのはいろいろとよろしくないということで、最近はほとんど使われない傾向にあります。でもポップアップ的な見せ方をしたいケースはあるので、そういうときに役立つのがこういったJavaScriptによるモーダルウィンドウ的な効果です。

ところで、初めてLightboxを見たときは驚きましたよね。今では当たり前になってしまい、クライアントもあまり驚いてくれませんが。

図3 モーダルウィンドウやダイアログボックスのフレームワークいろいろに
図3 モーダルウィンドウやダイアログボックスのフレームワークいろいろ

5. CSS Codes : CSS Code Snippets for Web Designers & Developers : Web Design Resources Blog & Graphics Blog with Lists of Web Site Design Toolshttp://www.allwebdesignresources.com/webdesignblogs/graphics/css-codes-css-code-snippets-for
-web-designers-developers/

CSSコードのスニペットを公開しているサイトをいろいろ紹介しています。

検索エンジンでの検索結果の下に表示される概要文のこともスニペットと呼ぶらしいですが、ここでのスニペットはよく使う定型的なコード記述のことです。コピペして使えるお役立ちコードと言った方が分かりやすいかも。

snippetという単語は断片という意味ですが、断片とは呼べないような長いコードの場合や一行だけのものもスニペットと呼んでいるようです。JavaScriptのライブラリもスニペットと呼ぶケースもあって、基準はよく分かりませんね。

この記事では、タダでこれらのスニペットが手に入るのに何で新たにコードを書くの? といった論調なのですが、探してるより自分で書いたり人に聞いた方が速いケースも多い気がします。

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

先週の記事を振り返ってみると、見て楽しめるページがいくつかあったので紹介します。

先週の気になるWebサービス

Xenocode - Run your applications from the web, Active Directory, and flash driveshttp://www.xenocode.com/

以前、好きなブラウザ(IE6,7,8,Firefox,Safari,Chrome)をインストールなしに起動できるプロダクトとして紹介したXenocodeですが、ほかのアプリケーションも起動できるようになっていました。オープンソース画像編集ソフトの定番GimpやAdobe Reader、WinAmpが使えるようになっています。

これ、Webデザイナーがブラウザチェックをするためのプロダクトではなく、いろんなブラウザを起動させるのが目的でもないんですね。

アプリケーション仮想化技術をプレゼンするためのデモとして、フリーのアプリを動かしてみせているということのようです。

ということでWebサービスでもないんでしょうが、気になる存在なので紹介しました。

図4 いろんなアプリをブラウザ上から起動できます
図4 いろんなアプリをブラウザ上から起動できます

おすすめ記事

記事・ニュース一覧