週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

Twitterが公式ツイートボタン,TweetMemeとの提携で新たな展開も | ネット | マイコミジャーナルhttp://journal.mycom.co.jp/news/2010/08/13/003/

ツイッターが公式ツイートボタンの提供を開始しました。今までも各種「つぶやくボタン」がブログやニュース記事などに付いていましたが,公式版の登場でどんどん置き換わっていくのでしょうか。

gihyo.jpの記事は,さっそく公式ツイートボタンに変わっていますね。

従来の非公式ボタンは,ツイッターロゴの「t」だけのものや「t」のあとに「つぶやく」といったラベルが付けられているものが主流でした。⁠tつぶやく」「ヒつぶやく」と広瀬香美が読み間違えたことがきっかけで,⁠ヒウィッヒヒー」が生まれたなんてこともありましたね。

「ツイートする」ボタンが主流になっていくと,ツイッターで発言すること自体を「つぶやく」ではなく「ツイートする」と呼ぶ人が増えるかもしれません。ツイッターにとっても「つぶやく」という若干ネガティブな印象にもつながる言葉ではなく,⁠ツイートする」を広めるのにちょうどいい機会だと思います。

公式ツイートボタンに付いている鳥のマークが小さすぎて,知らない人には何の形かよく分からないんじゃないかと心配なんですが,どうなんでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入