週刊Webテク通信

2010年5月第4週号1位は、iPhoneやiPad用のWebアプリケーション制作のスタートガイド、気になるネタは、TVでiPadを紹介してる人がうまく操作できてなかったシーンを考察

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

1. Web Development For The iPhone And iPad: Getting Started - Smashing Magazinehttp://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/

iPhoneやiPad用のWebアプリケーション制作を始める人のための記事です。デザイン/コーディング/テストの3つの章に分けて、素材、ツール、テクニック記事などへリンクしています。

ネイティブなアプリではなく、HTML/JavaScript/CSSで制作しようというコンセプトです。

iPhoneアプリ向けのユーザーインターフェイスやアイコン用素材は、Designing for iPhone: The Ultimate Roundup of Resources | Graphic and Web Design Blogという記事にも大量に紹介されていました。

Awesome Mobile Image Gallery Web App | Codropsという、iPhone用のイメージギャラリーを作るための記事も参考になりそうです。

図1 iPhone/iPadのためのWeb制作スタートガイド
図1 iPhone/iPadのためのWeb制作スタートガイド

2. 20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazinehttp://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

jQueryを使って効果を加えたCSSボタンのテクニック集です。

角丸やグラデーション、ちょっとしたアニメーションはCSS3でもできますが、JavaScriptで実装するのが今のところは現実的なのでしょう。

オンマウスで説明がスライドして現れるボタンや、iPhoneのインターフェイスのようなラジオボタンとチェックボックスも紹介されています。

図2 jQueryとCSSによるボタンテクニック集
図2 jQueryとCSSによるボタンテクニック集

3. 透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.nethttp://kachibito.net/web-design/ie-fix-js.html

古いバージョンのIEでも透過PNG画像や角丸、ドロップシャドウなどを実現するためのJavaScriptフレームワークをまとめた記事です。

フレームワークそのものの配布先ではなく、日本語で書かれた記事にリンクしているのでわかりやすいですね。

図3 透過PNGや角丸をIE6、7で実装するためのフレームワークの紹介
図3 透過PNGや角丸をIE6、7で実装するためのフレームワークの紹介

4. Creative Footer Design: 60+ Excellent Examples | Inspiration | instantShifthttp://www.instantshift.com/2010/05/27/creative-footer-design-60-excellent-examples/

クリエイティブなフッタデザインのショーケースです。イラストを使ったものが目立ちます。

図4 フッタデザインのショーケース
図4 フッタデザインのショーケース

5. 18 Fresh Google Chrome Extensions for Web Developershttp://technologytosoftware.com/18-fresh-google-chrome-extensions-for-web-developers.html

Webデザイナーや開発者のためのGoogle Chromeの拡張機能をまとめた記事です。

Firefoxのアドオンで有名なWeb DeveloperのChrome版もありますね。閲覧中のページでどんなフレームワークやCMSを使っているのかが見られるChrome Snifferも面白そうです。

Mac版/Linux版からベータが外れたChromeですが、最近Chromeの拡張機能に関する記事をよく目にします。

先週では、迷った時に!Google Chromeが便利になる5つの⁠定番⁠拡張機能という、はてなブックマークニュースの記事もありました。

図5 Chromeの新しい拡張機能を18個紹介
図5 Chromeの新しい拡張機能を18個紹介

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

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

The Big Picturehttp://www.thebigpic.org/

The Big Pictureはタスク管理のWebサービスです。

プロジェクトごとに円が描かれ、その大きさで重要度を表せるのが特徴のひとつです。この円は、色、大きさ、位置を自由に変えることができます。

プロジェクトの円をクリックするとタスクの画面に切り替わり、タスクの追加/編集作業を行います。

タスクは円ではなくリスト表示なのですが、個々のタスクは移動させて自由な位置に置けるようになっています。タスクはカレンダーとも連携できます。

画面の右下に瓶があって、これがゴミ箱の役割をしています。タスクやプロジェクトを瓶にドラッグすると、瓶の中にあめ玉のように丸い玉が入るのがシャレています。OSのゴミ箱と同様に、中身を確認したり元に戻すこともできます。

ToDoリストのひとつひとつの項目を円に入れて、重要なものは大きな円で書くことをすすめた記事バブルマップのすすめ ~ストレスすっきり解消型ToDo管理手法~を思い出しました。本来の使い方とは違いますが、このサービスをバブルマップとして使うこともできそうですね。

図6 The Big Pictureトップページでは動画で操作法を紹介
図6 The Big Pictureトップページでは動画で操作法を紹介

おすすめ記事

記事・ニュース一覧