週刊Webテク通信

2011年9月第4週号 1位は,仕事に役立つjQueryプラグインの実装方法,気になるネタは,Facebook,タイムラインを発表

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

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

1. クライアントワークでよくお世話になっているjQueryプラグインいろいろhttp://webdesignrecipes.com/jquery-plugins-in-cliant-works/

この記事の作者が仕事でよく使うというjQueryプラグインの実装方法を具体的に解説しています。

スライダー,カルーセルなど,ビジュアルに関するプラグインが中心です。

これだけ丁寧にjQueryプラグインの実装方法や注意点をまとめてある日本語記事は,あまり見たことがありません。プラグインごとにバラバラの記事にしてもいいくらいだと思いました。

今まで全くjQueryやjQueryプラグインを使ったことがないという初心者にも分かるように,親切にまとめられています。

図1 仕事に役立つjQueryプラグインの実装方法

図1 仕事に役立つjQueryプラグインの実装方法

2. CSS3 tools | Lea Verouhttp://leaverou.me/css3-tools/

CSS3の機能を簡単に利用するためのツールを各種紹介しています。

cubic-bezier.comは,CSS3のトランジションやアニメーションのイージングをベジェ曲線で設定できるツールです。ベジェ曲線を直接いじってコントロールし,動きのサンプルを確認することができます。

その他,CSSグラデーションを使った背景パターンや,CSSグラデーションをクロスブラウザ対応に変換するツールなどが紹介されています。

図2 CSS3関連ツールいろいろ

図2 CSS3関連ツールいろいろ

3. How Do Browsers Render the Different CSS Border Style Values?http://www.impressivewebs.com/comparison-css-border-style/

CSSのボーダーの,ブラウザによるレンダリングの違いをレポートしています。わざわざ記事としてまとめているだけのことはあり,ブラウザによってかなり見え方が違っています。

日本語にすると,grooveは谷線,ridgeは山線だそうです。この辺のスタイルはあまり使ったことのない人も多そうですね。

図3 CSSボーダーのブラウザによるレンダリングの違い

図3 CSSボーダーのブラウザによるレンダリングの違い

4. Elegant Examples of Embossed Typography in Web designhttp://www.designerterminal.com/inspiration/web-design/embossed-typography-in-web-design.html

エンボス処理されたタイポグラフィを使ったWebデザインのギャラリーです。エンボスの効果を活かした大きな文字を使ったデザインが目につきます。

図4 エンボスのタイポグラフィを使ったWebデザインのギャラリー

図4 エンボスのタイポグラフィを使ったWebデザインのギャラリー

5. Creative 404 Error Page Designs ― 30 Interesting Examples!! ≪ Graphic Design Blog ― An Ultimate Resource for Graphic Designershttp://www.graphicdesignblog.org/creative-404-error-page-designs/

404エラーページのデザインギャラリーです。想像力と創造力に富んだエラーページが多数紹介されています。

図5 404エラーページのデザインギャラリー

図5 404エラーページのデザインギャラリー

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

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

Lanbito: Mobile Form Builderhttp://lanbito.com/

Lanbitoは,問い合わせや投票などのフォームを作成できるWebサービスです。

モバイル端末向けのフォームに特化しているのが特徴で,iPhone,iPadがメインターゲットとなっています。iOSでよく見かけるインターフェイスデザインを使ったフォームを簡単に作ることができます。

フォームから送信されたデータは,Google ドキュメントのスプレッドシートに保存されます。Google ドキュメント上で集計できますし,ファイルを書き出してExcelで開くこともできるので,便利だと思います。

ちょっと試しにフォームを作ってみたのですが,日本語は問題なく表示できました。

完成したフォームの,iPhoneでの表示や操作感はバッチリです。パソコンのブラウザでの表示はシンプルで悪くはないのですが,微妙にレイアウトが崩れている個所もありました。

毎月100エントリーまでは無料で利用できます。ここでのエントリーとは,フォームの回答者数のことです。エントリー数に応じて何段階かで値段が設定されています。

将来的には,自分のサイトにフォームを埋め込むためのコードを生成したり,作成したフォームのHTML/JS/CSSをダウンロードして,自分のサイトに設置できるようになる予定のようです。

図6 モバイル向けフォーム作成サービスLanbito

図6 モバイル向けフォーム作成サービスLanbito

図7 Lanbitoのフォーム作成画面

図7 Lanbitoのフォーム作成画面

今週の気になるWebネタ

Facebook,タイムラインを発表:生涯の記録を1ページにhttp://jp.techcrunch.com/archives/20110922facebook-timeline/

先週,サンフランシスコでFacebook f8カンファレンスが行われ,⁠タイムライン」などが発表されました。タイムラインはプロフィール画面が新しく生まれ変わったもので,自分の生涯を時系列でさかのぼれるようなデザインになっています。

一方,GoogleはGoogle+を機能強化し,招待なしでも登録可能となりました。ビデオチャット機能が強化され,投稿内容の検索もできるようになっています。投稿の検索ができるようになって,サークルに加えたい共通の趣味の人を探すのが楽になりました。検索機能はSparksとも統合されて,便利な機能となっています。

アメリカのネット上ではこれらFacebookとGoogle+の話題で持ちきりなんでしょうが,日本で先週ネットの話題をさらったのは,KDDIからiPhoneが出るらしいというニュースでした。KDDIもアップルもノーコメントなのですが,ネット上はもちろんのこと,テレビや新聞でも大いに話題となっています。

ちょっと騒ぎ過ぎな感じもしますが,それだけiPhoneの存在感が日本でも大きくなったのでしょう。Android au サイト(android-au.jp)が終了したことも話題になっていますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入