読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

HTML5/Web技術関連トピックス(2013年6月24日まで)

Chrome搭載のFlashからWebカメラの脆弱性が見つかる、早急なアップデートを

フィンランドのセキュリティ企業であるエフセキュアは2013年6月20日、ChromeのFlashの脆弱性を指摘。Webカメラを操作できることを発見しました。

最新のChromeでは改善が行われているため、早急なアップデートが求められています。

http://itpro.nikkeibp.co.jp/article/NEWS/20130621/486962/?top_nhl

Apple TVが最新版5.3をリリース、進まないデジタルコンテンツのWeb化

Appleはネイティブアプリとして、Apple TVというサービスを提供しています。今回、これが5.3にバージョンアップされました。iTunesなどで購入されたTV番組は10億本を超え、映画は3億8,000万本以上を売り上げています。コンテンツ購入も信頼性が高いです。

一方でWebは相変わらず、コンテンツ保護技術EMEがなかなか検討が進まない状況です。デジタルコンテンツは暫くの間、Flashとネイティブアプリケーションに握られるのかもしれません。

http://av.watch.impress.co.jp/docs/news/20130621_604559.html

NASAが13億ピクセルの画像をWebで公開、実装はSilverLight

NASAが、探査機ローバー"キュリオシティ"から送信された画像をWebで公開しました。13億ピクセルを扱う画像を、Webアプリケーションで動作させて表示します。

実装には、Microsoft SilverLightを利用しています。HTML5には、こうした大量の画像を扱うアプリケーションの実装を困難にするような、要因が含まれているのかもしれません。逆に言うと、こういうケースではSilverLightの方が強いとも受け取れます。

http://mars.nasa.gov/multimedia/interactives/billionpixel/index.cfm?image=PIA16918&view=cyl

Google、DartのSDKのBeta版を公開

Googleが推進するフロントエンドの高級言語Dartの、SDKのBeta版を公開しました。

MicrosoftのVisualStudioで言う所の、インテリセンス機能が充実になったようです。また、DeltaBlueと呼ばれるDartのVMのパフォーマンスが33%ほど、トレーサーは40%ほど改善されました。

MicrosoftもTypeScriptを推進しており、JavaScriptはよりアセンブラ化が進んでいるように思えます。個人的な想いとしては、エンタープライズシステム開発のような、品質の評価の安定化が求められるシーンでの活用を意図した言語が広がってほしいところです。低スキル者が参加しても、ユニットテストの結果がブレないようなアプローチとか。

クロージャは一人で使う分には結構楽しんで使えるのですが、関数の外を覗くことが常態化してしまうのには、危機感を抱かざるえません。あと、TypeScriptのような型の破壊が起きにくい仕様も欲しいところ。

http://blog.chromium.org/2013/06/dart-faster-editor-and-more.html

CSS Custome Properties for Cascading Variables Module Level1がラストコール化

CSS内で変数を利用するための仕様です。スペックの内容を引用し、少しだけ書き方を紹介します。

:root {
  var-main-color: #06c;
  var-accent-color: #006;
}

/* main-colorが既に定義済みの状態で参照 */
#foo h1 {
  color: var(main-color);
}

"var-"と"var(*)"が制御文字として扱われます。参照は良いとして、宣言の方法は「なんかちょっとかっこ悪いなぁ」と感じるのではないでしょうか。これは恐らくですが、下位互換性対策です。この仕様に対応していないブラウザでも、最悪構文としては誤りがない状態にして、後続のCSS構文を読み取れるようにするためにこういった仕様になったものと思われます。

各Webブラウザベンダの対応状況までは把握できていませんが、仕様はGoogleによる提案で、なおかつW3Cのスペックは"ラストコール"まで来ているので、少なくともChromeでは対応状況として良い感じなのかもしれません。ブラウザの対応状況次第では、新興メディア業界では適用のタイミングとしてはいい時期と判断できます。

ただ、エンタープライズシステム業界では、長いシステムライフサイクルが求められるため、まだ使ってはいけない時期と判断できます。この仕様の用途は、表現のポテンシャルを上げるものではなく、設計の向上を目的とするもののため、現段階において長期的安定を望む場合、サーバサイドプログラムの活用など、別の代替手段を利用することをオススメします。

http://www.w3.org/TR/2013/WD-css-variables-1-20130620/

CSS Custome Properties for Cascading Variables Module Level1がワーキングドラフトとしてアップデート

CSSのみで、画像のマスク処理を行うための仕様です。

専用機系ハードやDirectXはバージョン7以下でテクスチャ周りのエンジンを制作したことのあるゲームプログラマや、Adobe Systems社の製品であるPhotoshopを使いこなしたデザイナには馴染みがある処理かと思われます。

マスク処理とは、画像を加工するための手段の一つです。Canvasで扱われるようなラスタ形式(ビットマップ)の画像に対して、どのような処理を施すかという"処理方法"と、どの画像のビットに対して行うのかという情報を保持した"ソース画像"をパラメータとして与えることで、処理を実現します。業界によっては、マスキングと呼称されることもあります。

以下は、W3Cのスペックに記述されたイメージです。

f:id:furoshiki0223:20130624235315p:plain

左の元画像に対して、真ん中のソース画像を使って、luminance maskと呼ばれる方式でマスク処理を施し、結果が右の画像として表示されます。luminance maskで処理をした場合、2色の情報のみを持つソース画像から黒の情報を読み取り、透過値(alpha)という情報をマスク元画像に対して与えています。

CanvasWebGLなどのグラフィクス技術でも代替可能ですが、CSSで実現することで、ブロック要素のbackground-colorプロパティやSVGなどの他のWeb技術と融合させ、より汎用的な活用ができるものと期待できます。

かつてこの処理は、透明度情報(alpha値)を持たない画像フォーマットをプログラム上で透過させるために利用されていました。しかしpng形式が一般化することで、利用頻度が一気に落ちました。ただ、プログラム側から柔軟に制御できなくてはいけないケースは一定で残り続けることになります。画像編集ソフトなどがそうでしょう。

近年のグラフィクスカードのブレンディング処理を活用することでアクセラレーションすることが可能であるため、プログラマ側の意識とWebブラウザの作り次第では高速に処理できます。しかし、サポートが十分出ない場合、CPUによるエミュレーションがスループットを著しく低下させることが予想されます。

利用するには、サポート対象となるWebブラウザの性能を確認することが望ましいでしょう。

http://www.w3.org/TR/2013/WD-css-masking-20130620/

CSS Shapes module Level1がワーキングドラフトとして公開

CSSのshape-outsideプロパティの仕様です。

divのようなブロック要素を四角形以外の形で表示させるためのプロパティの定義になります。「CanvasやらSVGでも良いのでは?」と思われてしまうかもしれませんが、そういうものでもありません。例えば、テキストやハイパーリンクと混ぜて何かを表示させたいシーンでは、本仕様の真の価値が発揮されます。

以下はW3Cのスペックに書かれていたサンプルを引用したものです。

<div style="text-align:center;">
      <div id="float-left"></div>
      <div id="float-right"></div>
      <div>
      Sometimes a web page's text content appears to be
      funneling your attention towards a spot on the page
      to drive you to follow a particular link.  Sometimes
      you don't notice.
      </div>
</div>

<style type="text/css">
#float-left {
      shape-outside: polygon(0,0 100%,100% 0,100%);
      float: left;
      width: 40%;
      height: 12ex;
  }

#float-right {
      shape-outside: polygon(100%,0 100%,100% 0,100%);
      float: right;
      width: 40%;
      height: 12ex;
  }
  </style>
</div>

f:id:furoshiki0223:20130624225705p:plain

この例では、floatプロパティにより左寄せ、右寄せされたブロック要素の間に、文字を埋め込んでいます。こういった文字の改行の作り込みは、ブロック要素が四角にしか表現できない従来の場合は、ユーザプログラムによる作り込みが必須でした。

この仕様はAdobe SystemsとMicrosoftによる提案です。Adobe SystemsはFlashなどのプラットフォームに代わるものとしてHTML5のグラフィクス技術に力を入れており、CSSのこういった提案には積極的にコミットしています。

標準化サイドの議論の内容を追えていないのですが、実装して最も幸せになれるのはAdobe Systemsなので、Adobe Systemsが積極的にプッシュしているものと想像できます。

http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/

Web Telephony APIのドラフトが公開

システムアプリケーションワーキンググループにより、Web Telephony APIのスペックが公開されました。

システムアプリケーションワーキンググループは、W3CユビキタスWebアプリケーションアクティビティの一環で、従来のネイティブアプリケーションに匹敵するほどの能力を兼ね備えた、ランタイム環境(セキュリティ)とそのAPIの定義をミッションとしています。

そして今回ドラフト化されたWeb Telephony APIは、マルチパーティからダイアルアップ接続を行うためのソフトウェアを呼び出したり、複数のダイアルアップ接続先から選択させるための手段を提供するAPIになります。

ユビキタスWebアプリケーションアクティビティの活動は、「ユビキタスネットワークに接続されたデバイスのためのサービス付加価値とビジネスモデルの実現」とあるので、彼らの定義するAPIがWebブラウザのためのものなのかは不明です。

しかし本仕様は、ブラウザベンダのMozillaとスペインの大手通信事業会社のTelefonicaにより検討が進めれれており、またTelefonicaはMozillaと提携してFirefoxOS用デバイスを作っている企業です。しかも、かなり早い時期から関わりを持っています。

もしかしたら、Telefonicaは何かしらの付加価値のあるネットワークを構築してて、そこに顧客を引きこむというビジネス的狙いがあるのかもしれません。想像が膨らみますね。


http://www.w3.org/TR/2013/WD-telephony-20130620/

SVG2のドラフトが公開

SVGワーキンググループにより、SVG2のワーキングドラフトのスペックが公開されました。
変更点は、以下の通りです。

  • hatch要素を強化
  • HTMLのアクセシビリティ・インテグレーション向上のためのtabindex属性の追加
  • foreignObject要素の変更
  • auto-start-reverse属性の追加
  • CSSからSVGコンテンツへの変換(とベストプラクティス)

内容を読んでいないのですが、CSSSVGの連携というのが興味深いですね。

http://www.w3.org/TR/2013/WD-SVG2-20130409/

広告を非表示にする