週刊Webテク通信

2010年8月第3週号1位は、iPad向けのWebアプリの作り方、気になるネタは、Twitterが公式ツイートボタン

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

1. Designing Web Apps for the iPadhttp://sixrevisions.com/web-applications/designing-web-apps-for-the-ipad/

iPad向けのWebアプリの作り方を解説した記事です。iPad向けのWebアプリを一週間で開発したという作者が、そのプロセスを詳しく紹介しています。

Objective-Cを使ったネイティブのアプリではなく、HTMLとJavaScriptで開発するWebアプリなら、Webデザイナーでもすぐに作れるはずという前提での解説となっています。

iPadの制限として、

  • Flashを使えない
  • マウスカーソルがない
  • スクロールが期待した通りに動かない
  • CSSの固定配置が使えない

ということに気をつける必要があるようです。

固定したエリアの中だけをスクロールさせるために、iScrollというJavaScriptライブラリを使ったとのことです。iScrollを使うと、ヘッダとフッタは固定して中のコンテンツだけをスクロールさせることが可能になるとのことでした。

こういったHTMLとJavaScriptベースのWebアプリを、iPad/iPhoneアプリに変換することができるPhoneGapというものもあります。このPhoneGapについての簡単な説明と解説書の紹介がJavaScriptでiPhoneアプリを楽々作成という記事に掲載されていました。

図1 iPad向けWebアプリの作り方
図1 iPad向けWebアプリの作り方

2. 7 Reasons Why I Choose Fireworks Over Photoshop | Webdesigner Depothttp://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/

PhotoshopよりFireworksを選ぶ理由をまとめた記事です。Webデザインのためのツールとして、PhotoshopよりFireworksのほうが優れているところを7つ紹介しています。

  1. ピクセル単位で正確にコントロールできる
  2. Webレイヤーが存在している
  3. シンプルなグラデーション機能
  4. 習得しやすい
  5. ベクターツールである
  6. ページ、シンボル、スタイル機能がある
  7. 値段が安い

1とも関連しますが、図形も文字もアンチエイリアスのON/OFFを個別に設定できるところが、わたしは気に入っています。

コメント欄もかなり盛り上げっていますね。

図2 PhotoshopではなくFireworksを選ぶ理由
図2 PhotoshopではなくFireworksを選ぶ理由

3. 20 Best jQuery Slideshow / Photo Gallery Pluginshttp://graphicalerts.com/20-best-jquery-slideshow-image-photo-gallery-plugins/

スライドショーやフォトギャラリーを実装するためのjQueryプラグインを多数紹介しています。おなじみLightbox系のものも、いくつかありますね。

図3 スライドショー/フォトギャラリーのjQueryプラグインいろいろ
図3 スライドショー/フォトギャラリーのjQueryプラグインいろいろ

4. Beautiful & Creative Single-Page Portfolio Websiteshttp://www.hongkiat.com/blog/beautiful-creative-single-page-portfolio-websites/

美しくクリエイティブな1ページ完結のポートフォリオサイトのギャラリーです。ページ内スクロールや非同期の読み込みなどで、ページ遷移なしにいろいろな項目が見られるようになっているのが主流です。

デザイナーのクリエイティビティとスキルをアピールするには、1ページ完結のポートフォリオは効果的とのことです。

図4 1ページ完結のポートフォリオサイトのギャラリー
図4 1ページ完結のポートフォリオサイトのギャラリー

5. 20 Creative And Beautiful Blog Header Designshttp://www.webdesignish.com/20-creative-and-beautiful-blog-header-designs.html

創造的で美しいブログのヘッダデザインのギャラリーです。イラストを上手く使ったものが多いですね。

30 Creative Illustrated Website Footers | 2Experts.netという、こちらはまさにイラストが使われたフッタだけを集めたギャラリーもありました。

図5 ブログのヘッダデザインのギャラリー
図5 ブログのヘッダデザインのギャラリー

そのほか先週の記事から、便利なまとめ記事を紹介します。

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

Gantto Beta - Presentable Gantt Chartshttp://gantto.com/

「Gantto」はガントチャートを作ることができる、プロジェクト管理のためのWebサービスです。

WindowsだとMicrosoft Project、MacだとOmniPlanというアプリケーションに相当するようなことを、Webサービスで実現しようというもののようです。

Flashベースで動いており、動きは軽快です。日本語テキストも一応使えるようです。ベータ版ということもあり、まだそれほど洗練された感じではありませんが、ガントチャートのための基本機能は押さえているようですね。MS Projectのファイルを読み込むこともできるそうです。

プロジェクト管理はWebベースで共有できると便利なので、今後もこの手のものはいろいろ出てくるのかもしれません。Ganttoの今後の機能強化にも期待したいですね。

図6 プロジェクト管理のWebサービス、Gantto
図6 プロジェクト管理のWebサービス、Gantto

おすすめ記事

記事・ニュース一覧