週刊Webテク通信

2011年5月第2週号　1位は，特定のレンダリングエンジンでしか使えない実験的なCSSプロパティいろいろ，気になるネタは，グーグル，Chrome Web Storeの日本語サイト開設

Webテク, Webデザイン, Web広告, CSS, jQuery, jQuery Mobile, Webクリエイター, Fireworks, Chrome, Chrome Web Store

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

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

1. The Future Of CSS: Experimental CSS Properties - Smashing Magazinehttp://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

特定のレンダリングエンジンでしか使えない，実験的なCSSプロパティを紹介した記事です。

WebKit（Safari，Chrome，iPhone，iPad，Android⁠）⁠，Gecko（Firefox）それぞれのレンダリングエンジン特有の実験的なプロパティが解説されています。また，CSS2.1／CSS3のあまり知られていないプロパティの紹介もあります。

Webkit固有のプロパティでできることの例
  • マスク用画像を用意して，画像にマスクをかける
  • フチ文字を作る
  • 反射させたような効果を作る
Gecko固有のプロパティでできることの例
  • リサイズ時の画像のレンダリング方式を変える
  • ボーダーに複数の色を設定する

HTML5+CSSベースでスマートフォンアプリを作る場合にも，これらのプロパティは役立ちそうです。

図1　実験的なCSSプロパティいろいろ

図1　実験的なCSSプロパティいろいろ

2. jQuery Link Manager Pluginhttp://www.jainaewen.com/files/javascript/jquery/link-manager/

リンクを別ウィンドウで開くなどの設定を管理できるjQueryプラグインです。

拡張子で判断してPDFだけ別ウィンドウで開いたり，他のドメインへのリンクだけ別ウィンドウで開くといったことが，JavaScriptの設定だけで可能になります。

サイト制作をしていると，自社サイト以外のページは別ウィンドウで開きたいという要求が相変わらず多いことかと思います。このjQueryプラグインを使うとそれが簡単に実現できますね。あとから簡単に設定を変えることができるのも魅力的です。

図2　リンクの開き方をコントロールするjQueryプラグイン

図2　リンクの開き方をコントロールするjQueryプラグイン

3. ASCII.jp：jQuery Mobileとは――スマホ時代の到来とWeb制作｜西畑一馬のjQuery Mobileデザイン入門http://ascii.jp/elem/000/000/602/602620/

jQuery Mobile入門の連載記事の第1回です。jQuery Mobileは，Dreamweaver CS5.5のモバイル向け機能にも採用された注目のフレームワークですね。

初回ということで，まずはスマートフォン向けフレームワークとiOSヒューマンインターフェイスについて解説しています。いよいよjQuery Mobileの紹介が始まったところで，次回に続いていました。次回以降が楽しみです。

図3　jQuery Mobileの入門記事

図3　jQuery Mobileの入門記事

4. 空いた時間でお小遣い稼ぎ！フリーランスWeb屋さんにおすすめのサブプロジェクト | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/freelancer-sub-projects/

Webデザイナーが受注仕事以外でお金になりそうなことをまとめた記事です。

素材販売，アプリ販売，電子書籍販売など，元手がかからずうまくいけば自動的にお金が入ってきそうなサービスやノウハウ記事を案内しています。

図4　Web業界の人のお小遣い稼ぎに役立つ情報

図4　Web業界の人のお小遣い稼ぎに役立つ情報

5. Fireworksで使える斜線テクスチャ960 | indigonotehttp://indigonote.com/2011/04/28/fireworks-slash-texture/

Fireworks向けの，いろんな横幅の斜線テクスチャファイルを配布しています。商用利用もOKということです。

個別テクスチャパターンファイルと，テクスチャ一覧を兼ねたFieworks PNGを同梱しています。

図5　Fireworksで使える斜線テクスチャ

図5　Fireworksで使える斜線テクスチャ

そのほか，先週の記事の中から，気になるWebサービスに関する記事を3つ紹介します。

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

Layer Styleshttp://www.layerstyles.org/

CSS3の角丸やシャドウ，グラデーションなどを設定できるWebサービスです。

この手のジェネレーターはすでにたくさんありますが，Photoshopのレイヤースタイルを真似たインターフェイスになっているところがポイントです。

グラフィックソフトを使っている感覚で設定ができて分かりやすいですね。ちょっと反応が遅いこともあるようですが，Webアプリでここまでできることに感心します。

左下の「CSS Code」のボタンを押すと，CSSのコードが表示されます。クロスブラウザ対応の記述になっているようです。

図6　グラフィックツールのようなCSS3のジェネレーター

図6　グラフィックツールのようなCSS3のジェネレーター

今週の気になるWebネタ

［速報］グーグル，Webアプリのマネタイズを提供，わずか5％の決済手数料。Google I/O 2011 － Publickeyhttp://www.publickey1.jp/blog/11/web5google_io_2011.html
グーグル，Chrome Web Storeの日本語サイト開設 - 課金システムも提供予定 | ネット | マイコミジャーナル<http://journal.mycom.co.jp/news/2011/05/17/013/

これまで米国向けだったChrome向けアプリケーションマーケット「Chrome Web Store」が，日本語を含む41の言語で利用できるようになるそうです。日本語版が開設されたことは，16日に発表されました。

Webアプリケーション内での課金システムの提供に，個人的には注目しています。たとえば電子書籍を途中のページから有料にするといった仕組みを簡単に実現できるようです。JavaScriptのコード一行で課金システムを利用でき，決済の手数料は一律5%となんとも魅力的ですね。

「Google I/O 2011」では，ほかにもChromeBookやクラウド音楽サービスなど，いろいろと興味深い発表がありました。最近は話題としてはFacebookに押され気味に思えるGoogleですが，今後もWeb業界を騒がしてくれそうですね。

Webテク, Webデザイン, Web広告, CSS, jQuery, jQuery Mobile, Webクリエイター, Fireworks, Chrome, Chrome Web Store

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote