• DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • CLOUD COMPUTING STAGE
gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2010年6月第1週号　1位は，Appleが公開したHTML5によるSafariのテクノロジーデモ，気になるネタは，iPad登場で「MAGASTORE」に異変

週刊Webテク通信

2010年6月第1週号　1位は，Appleが公開したHTML5によるSafariのテクノロジーデモ，気になるネタは，iPad登場で「MAGASTORE」に異変

2010年6月10日

, , , , , , , , ,

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

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

1. Safari Technology Demos - Safari Dev Center - Apple Developerhttp://developer.apple.com/safaridemos/

HTML5とCSS3，JavaScriptの組み合わせで，リッチでインタラクティブなサイトが作れるというデモを集めたページです。Appleがデベロッパー向けサイトで公開していて，現状デモはSafariでしか動作しないようです。

将来はHTML5をベースに，“Flashなしで”こういう動作が実現できるんだという，未来の技術のような印象を持つ人も多いでしょう。しかし，iPadやiPhoneにターゲットを絞れば，今すぐにでもこういったページが作れるんだという受け止め方もできます。

ムービー再生中に大きさを変えたり，斜めに回転したりマスクをかけたりするデモや，タイポグラフィを自由にいじれるツール，見せ方を変えられる写真ギャラリー，QuickTime VRを思い起こさせるパノラマや物体を回転させるデモなど，14種類のデモが公開されています。

どのデモもすぐに起動し，ストレスなく見ることができました（環境によるでしょうが）。ほとんどのデモが，iPhone/iPad上でも見られるようです。

それぞれのデモには，関連する技術の解説ページへのリンクが用意されています。

このデモページは「Safari Technology Demos」というタイトルですが，「HTML5 and web standards」という見出しが踊る，AppleによるHTML5特集サイトで公開されているため，Safariでしか見られないことへの批判や皮肉も多いようです。

図1　AppleによるSafariのテクノロジー

図1　AppleによるSafariのテクノロジー

2. Cross-Browser Testing: A Detailed Review Of Tools And Services - Smashing Magazinehttp://www.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

異なるバージョン／OSのブラウザや，種類の違うブラウザでの表示チェックのためのツール／サービスを比較した記事です。

Adobe BrowserLabやMicrosoft Expression Web SuperPreviewなど，8種類のツールやWebサービスが解説されています。

図2　クロスブラウザでのテストツールの比較記事

図2　クロスブラウザでのテストツールの比較記事

3. RedLine Magazine : Fireworks ちょいネタ集http://redline.hippy.jp/review/tool/fireworks_3.php

Fireworks CS4のTipsをまとめた記事です。Fireworksの記事はPhotoshopやIllustratorに比べ少ないですし，特に日本ではあまり見かけないので貴重な記事と言えるでしょう。

このブログでは，その後もFireworks関連の記事が続けて公開されています。CS5版の記事も期待したいですね。

図3　FireworksのTips集

図3　FireworksのTips集

4. jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Growhttp://addyosmani.com/blog/jquery-sprite-animation/

jQueryとCSSでアニメーションを作るチュートリアルです。

パーツごとにレイヤーに分けて動かす，いわゆるスプライトアニメーションを，FlashではなくJavaScriptとCSSで実現したものですね。

SpritelyというjQuery のプラグインを利用しています。手間はかかりそうですが，このプラグインを使えば簡単な設定でアニメーションが作れそうです。

図4　jQueryとCSSによるスプライトアニメーションの作り方

図4　jQueryとCSSによるスプライトアニメーションの作り方

5. Inspiration: 35 Unique Examples of Vintage Design | Nettuts+http://net.tutsplus.com/articles/web-roundups/inspiration-35-unique-examples-of-vintage-design/

古めかしいテイストのデザインを使ったサイトのショーケースです。

図5　ビンテージなデザインのサイトのショーケース

図5　ビンテージなデザインのサイトのショーケース

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

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

border-image-generatorhttp://border-image.com/

CSS3で追加されたborder-imageプロパティを簡単に設定できるジェネレーターです。

border-imageを使うと，枠になる画像を1つ用意すれば，4つの角と4つの辺，背景画像の9つに分割してボーダー画像として扱うことができます。4つの辺は単純に繰り返すだけでなく，伸縮させる設定もあります。

このジェネレーターを使えば，画像を分割する位置の指定や，繰り返しの方法，ボーダーの太さを簡単に設定することができます。記述方法のリファレンスとしてこのページを覚えておいてもいいでしょう。

図6　border-imageの設定を行えるWebサービス

図6　border-imageの設定を行えるWebサービス

今週の気になるWebネタ

iPad登場で「MAGASTORE」に異変??電通が考える電子書籍のジレンマ（1/2）- ITmedia プロフェッショナル モバイルhttp://www.itmedia.co.jp/promobile/articles/1006/04/news052.html

電通とヤッパによる電子雑誌配信サービス「MAGASTORE」で，iPadからの購入が売り上げの8割を占める状態になったそうです。

iPadを発売早々に買った人は，いろんな電子書籍を試してみたいという研究熱心な人が多いと思います。新しいゲーム機が発売になったときのゲームソフトのように，先行者利益が得られている状態なんでしょう。こういう電子書籍があるんだと，人に見せるために買っている人もいそうです。

iBooks，Kindle for iPad，MAGASTOREなど複数の「本屋」からいろんな本を試しに買っている人が結構いるんじゃないでしょうか。ビューンや雑誌の独自アプリなどもありますし，散財している人が多そうです。

iPadをこれから買う人は，ついつい買ってしまうアプリや電子書籍の金額も予算に入れておいた方がいいのかもしれません。わたしはコストコで安く売っているiTunesカードをたくさん購入しました。

iTunesカードはコンビニなどで定期的にキャンペーンで割引販売しているそうです（サークルKサンクスで現在キャンペーン中らしい）。そういうときにまとめ買いするのもいいですね。

, , , , , , , , ,

著者プロフィール

芦之由（あしのよし）

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

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

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

コメント

コメントの記入