Test The Web Forward の東京開催が決定

2013年6月7日~8日の2日間、Google 東京オフィスにおいて、日本初の「Test The Web Forward」が開催されます。 Test The Web Forward とは、Web開発者のコミュニティがより深くWeb標準のプロセスに関わることによって、Webをより良いものにしていこうというムーブメントで、Web 標準の学習機会を設けること、仕様テストケースに貢献すること、コミュニティを活性化することによって推進されています。そして、このムーブメントの一環となる Test The Web Forward イベントがサンフランシスコ、パリ、北京、シドニー、シアトルに続き、東京で開催されることになりました。このイベントには、W3C をはじめAdobe、Google、KDDI、Microsoft、Mozilla、NTT Docomo、楽天をはじめとする各社(アルファベット順)が協力しています。 W3C 仕様の読み方や W3C 仕様テストの作成方法を学び(金曜日)、ハッカソン形式で実際に仕様テストの作成(土曜日)しませんか?一緒にブラウザの違いを問わない、相互運用性の高い Web を作り上げていきましょう。 Test The Web Forward イベントの詳細:http://testthewebforward.org/events/tokyo-2013.html Test The Web Forward イベントへのお申し込み:http://goo.gl/Bwpdj イベント概要 日時: 2013 年 6 月 7 日(金) 18:30(受付開始)– 22:00 2013 年 6 月 8 日(土) 9:00(受付開始)– 18:00 場所:Google 東京オフィス、六本木ヒルズ森タワー参加費:無料定員:100名


Internet Explorer MVP による IE Test Drive 技術解説 : SVGとCSSの表現

Internet ExplorerのMVPによる Internet Explorer 10 Test Driveの技術解説記事の第6回目は、Interactive Film いつも可愛い – キリンジの制作に携わったピクセルグリッドの小山田さんによる「SVGとCSSの表現」の解説です。 Internet Explorer 9 以降、たくさんの HTML5 に関する新しい技術がサポートされています。これらの新しい技術には、表現に関する技術も多く含まれており、Internet Explorer 10 Test Drive に公開されているデモ、BetaFishIE にも新しい表現技術が使われています。 BetaFishIE このデモの主役である金魚は HTML、SVG、CSS3 2D transforms、CSS3 Animation などで表現されています。また、画面下部のスターテス表示には HTML5 の canvas が利用されています。 従来では、このようなダイナミックなアニメーションはプラグインに頼ることがほとんどでした。しかし、標準技術の進化とそれをサポートしたブラウザーが組み合わせることにより、最近ではプラグインに頼る必要なくダイナミックなインタラクションを実現できるようになりました。 Internet Explorer 10 では次の技術をサポートしており、これらは開発におけるインタラクション付与へと応用できるでしょう。 Internet Explorer 9 から追加された主な新技術 HTML5 video と audio 要素 HTML5 canvas SVG1.1 (一部除く) CSS3 Backgrounds & Borders…


CSS3 の Transitions と Animations を使用して、Web サイトをもっと個性的に

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Adding Personality with CSS3 Transitions and Animations2011/11/22 7:33 AM Internet Explorer 9 および 10 では、高パフォーマンスのコンパイル済み JavaScript やハードウェア アクセラレーションによる HTML5 および CSS 3 のレンダリングといった最新機能によって、Web 開発者が格段にリッチなユーザー エクスペリエンスを実現できるようになりました。 互いに関連する 2 つの機能 CSS3 Transitions と CSS3 Animations を使用することで、Web 開発者は宣言的なアプローチで、簡単に Web ページに個性を加えることができます。 この記事では、Windows Developer Preview の IE10 に実装されたこれら 2 つの機能と、Windows 8 の HTML で記述された Metro スタイル…


ベンダー プレフィックスを使用したプログラミングのベスト プラクティス

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】A Best Practice for Programming with Vendor Prefixes2011/10/29 8:01 AM ベンダー プレフィックスを使用することにより、Web 開発者は勧告候補の段階になる前の新しい標準仕様を試すことができます。ブラウザー ベンダーではこのプレフィックスを、実装と仕様のタイミングの問題に対処するためのメカニズムとしても使用しています。これについては、こちらの記事を参照してください。IE Test Drive サイト用に新機能のデモを作成するときや、さまざまなプレゼンテーションの際に、IE チームのメンバーの多くはベンダー プレフィックスを非常によく利用します。 今回のブログでは、最近のデモで使用したパターンについて説明します。このパターンは作業が非常に簡素化され、ベスト プラクティスとなっています。このアプローチについて、あるいは皆さんが考える他のベスト プラクティスについて、ぜひご意見をお聞かせください。 間違いを生みやすいコード スクリプトを使用してベンダー プレフィックスの付いた CSS プロパティにアクセスする場合、次のようなコードになりがちです。 var elm = document.getElementById("myElement"); elm.style.msTransitionProperty = "all"; elm.style.msTransitionDuration = "3s"; elm.style.msTransitionDelay = "0s"; elm.style.webkitTransitionProperty = "all"; elm.style.webkitTransitionDuration = "3s"; elm.style.webkitTransitionDelay = "0s"; elm.style.MozTransitionProperty =…


「HTML5+IE9 Web Camp 2 with html5j.org」セミナーを開催

今週の金曜日、東京/品川において、HTML5のコミュニティとして活動されているhtml5j.orgさんとの共催で「HTML5+IE9 Web Camp 2 with html5j.org」を開催します。 W3C/Keioの深見さんによる「HTML5 登場の意義と Web 標準とのつきあいかた」に始まり、日本マイクロソフトからIE10でのHTML5実装、html5j.orgからはWebSockets、F12 開発者ツール、SVGをテーマに開発者向けの濃い話、そして、先日、当ブログでもご紹介した「FINAL FANTASY XIII-2」のプロモサイト「モーグリの TWEET キャッチ」を制作いただいたクレアテックさんによるHTML5やCSS3の使い処解説と盛りだくさんな内容になっています。 この機会にぜひお越しください。


IE10 でテキスト中心のリッチなページを作成する

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Building Rich Text-Centric Pages in IE10 2011/10/11 7:38 AM Windows Developer Preview に搭載された Internet Explorer 10 では、テキスト中心のリッチな Web ページやアプリの作成を容易にするための新しい CSS 機能が 2 つ追加されています。1 つは CSS3 Regions です。これは、複数の非連続領域間をまたいでコンテンツを流し込むための、軽量な機能を提供します。もう 1 つは CSS3 Hyphenation です。IE10 でこれがサポートされたことにより、開発者は、さまざまな言語でのテキストのハイフネーションを簡単な方法で行えるようになりました。 この 2 つの新しい機能は、こちらの記事やこちらの記事で紹介してきた他のすばらしい CSS 機能 (CSS3 Grid Layout、CSS3 Flexible Box Layout、CSS3 Multi-column Layout、Positioned Floats など) を補完するものです。こうした標準ベースの機能を組み合わせることで、開発者は、さまざまな画面解像度やフォーム ファクターに応じて拡大/縮小する高品質な Web…


IE10 の CSS3 text-shadow

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】CSS3 text-shadow in IE10 (2011/9/30 2:25 AM) Windows Developer Preview の IE10 では、ハードウェア アクセラレーション対応の CSS3 text-shadow をご利用いただけます。text-shadow (テキストの影) は、Web 開発者からの要望が最も多かった機能の 1 つです。この機能を使うと、以前はテキストをインライン画像として扱わなければ実現が難しかった (または不可能だった) テキスト効果を、標準に基づいて作成できるようになります。 IE10 の text-shadow text-shadow は、その名前が示すとおり、テキストの背後に影を描くための CSS プロパティです。 例: テキストの背後に紫色の text-shadow を適用 text-shadow は、テキストに注意を引いたり、奥行きを出すために使用します。 テキストの背後に画像や色付きの背景が使用されている場合には、text-shadow を使うことでコントラストを高め、テキストを読みやすくすることができます。 IE10 では、他のブラウザーと同じように、ベンダー プレフィックスが付かない標準形式の text-shadow がサポートされるため、現在 text-shadow が使用されているサイトも IE10 で問題なく表示することができます。標準対応というマイクロソフトの取り組みの一環として、CSS3 テキスト テスト スイートに…


MSDN 開発者向けの新しい IE9 関連コンテンツ

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。  【元記事】New IE9 Developer Content on MSDN (2011/5/6 2:16 AM) このブログで何度も取り上げてきたとおり、Internet Explorer 9 では、他のブラウザーでも機能する同じ HTML、CSS、JavaScript を活用した強力な新機能を利用することができます。また IE9 では、Web 開発を容易にすることを目的として改良が行われたほか、MSDN の開発者向けコンテンツも改善されています。 Internet Explorer の開発者向けコンテンツ チームは、MSDN ライブラリの「HTML と CSS (英語)」および「Internet Explorer の開発 (英語)」ノード、ならびに Internet Explorer デベロッパー センターのすべてのコンテンツの作成と管理を行っています。また皆様のフィードバックにも耳を傾け、Internet Explorer 9 のリリースでは新しいアプローチも採用しました。 この記事では、私たちが取り組んできた新しいコンテンツの概要を紹介すると共に、Internet Explorer 9 のドキュメンテーションに対するアプローチについて、またこれまでのアプローチとの違いについて説明します。また、役立つ情報をすぐに見つけられるように、開発者向けのさまざまなコンテンツへのリンクも用意しています。 新しいコンテンツの提供方法 私たちは今回、これまでとは異なるコンテンツの提供方法を採用しました。このアプローチでは、実際の Web 開発に基づくシナリオベースのサンプルとチュートリアルを使って、最新の標準と Internet Explorer 9 の新しい機能の使用方法を開発者の皆様に提示しています。 各セクションに 1 つまたは複数の開発者シナリオを提示し、特定の目的達成…