週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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 いろんなアプリをブラウザ上から起動できます

今週の気になるWebネタ

「日テレアプリ」公開,APIの提供もスタート:MarkeZine(マーケジン)http://markezine.jp/article/detail/6845

日本テレビが「日テレアプリ」というコーナーをオープンして,ブログパーツやガジェットの提供を始めました。また,Web APIも公開しています。テレビとネットは仲が悪いとされていますが,この日テレの取り組みには他局も注目してるんじゃないでしょうか。

APIは,日テレ系の番組を出演者で検索するもの,日テレ系のニュースをフリーワードで検索できるものの2つ。注目はやはり出演者検索ですよね。ほかの局も同様のAPIを提供してくれれば,マッシュアップして好きなタレントの番組表が作れそうです。ありがちな発想ですが。

ブログパーツやRSSは個々の番組サイトからも入手できるんでしょうが,こうやって一箇所にまとまっていると便利ですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入