• Shadow DOM - Web Components を構成する技術

    この記事は webcomponents.org の記事とのクロスポストです。 Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することができます。この記事と動画では、この Shadow DOM について解説します。 Shadow DOM とはなにか? こちらは HTML5 の video タグで表示された動画です。ご覧頂けるとお分かりのように、コードは video タグのみという単純さでありながら、動画そのものだけでなく、制御用の UI も表示することができています。 <video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video> 実は Chrome で DevTools を開いて、'Show user agent shadow DOM' オプションを on にすると、この制御用 UI がどのようにできているか確認することができます。 この制御用 UI が、実際はHTML でできていることがお分かりでしょうか?これが Shadow DOM の一例です。 Shadow DOM が素晴らしいのは、実はこの機能がウェブ開発者にも使える、ということです。 Shadow...


  • Template - Web Components を構成する技術

    この記事は webcomponents.org の記事とのクロスポストです。 先日 Web Components を構成する技術のひとつである Templates に関するビデオを公開しましたので、解説したいと思います。 なぜ今 Templates なのか 我々開発者にとってテンプレートを使うメリットは、デザイナーとの分業を容易にできる、という点にあります。 ウェブサイトを構築する際に利用されるテンプレートというと、以前は PHP や Python の Django, Ruby on Rails をはじめとするサーバー側での実装が主流でした。それがここ数年、ブラウザ側で処理するテンプレート技術が登場し、人気となってきています。 これは HTML5 などオープンウェブ技術の発展により、全体的なアーキテクチャが変わりつつあるためです。サーバーはコンピューターがデータを処理するもの、クライアント側はユーザーがデータを加工するもの、といった分担がより進んでおり、サーバー側で完結していた MVC (Model, View, Controller) がクライアント側とまたがり、より明確な役割を担うべく変遷をしている時期である、と言えるかもしれません。 それに伴い、クライアント側でも MVC のような構成が必要だという機運が高まり、ここ最近は特に AngularJS や Backbone.js, Ember.js といったフレームワークがよく使われるようになってきました。テンプレートを活用できるフレームを利用することで、HTML や CSS といった見た目を担当するデザイナーが、命令的手法 (imparative) より比較的容易な宣言的手法 (declarative) のみに集中してプログラムを記述することでき、チームとしての生産性の向上が期待できます。 ブラウザ側のテンプレートエンジンといえば Mustache.js, Handlebar.js, AngularJS, Backbone.js など、JavaScript で実現するものが人気を博していますが、こういったソリューションにはいくつか解決すべき課題もあります。 div タグを使ったアプローチ div タグを display:none; として表示されないようにしたものにテンプレートを埋め込み、表示する際にコピーして利用します。このアプローチでは、まだ利用されていない画像などのリソースでもサーバーに取りに行ってしまうため、パフォーマンスが犠牲になるという欠点があります。...


  • Chrome のセッションを追跡する拡張機能: Project Tab Manager 3.0 公開

    彼女ができる Chrome Extension として局地的に一瞬話題になった Project Tab Manager が 3.0 になりました。 Project Tab Manager はウィンドウの状態を監視し、いつでも元の状態に戻せる Chrome Extension です。 Chrome のタブが常に 100 個近く開いている そのせいで Chrome だけでかなりメモリを消費している 仕事中に Twitter や Facebook (もちろん Google+ も!) を見ちゃって気が散る そんな人におすすめです。 これまでのコンセプトから若干シフトさせることで、わかりやすさを追求しました。プロジェクトを管理することよりも、セッションをトラックすることに重点を置くようにしました。 Project Tab Manager (以下 PTM) をインストールすると、開いているウィンドウごとにプロジェクトが自動的に作られます。 タブを追加したり消したりするごとに Extension を覗くと、タブの状態がすべて追跡されていることがわかると思います。試しに (全タブを消すのではなく) ウィンドウを閉じてみてください。PTM にプロジェクトが残っており、クリックすることで元のウィンドウが復元されるのが分かると思います。 一時的に新しいウィンドウを開いただけなのにプロジェクトが追加されてウザい!という方は、ウィンドウ内の全タブを閉じてください。プロジェクトは削除されます。 プロジェクト名は変更することができます。 右側にある ☆ をクリックすると、そのページをプロジェクトに永続的に追加することができ、いつでも開き直すことができます。 ☆...


  • Event Report: Web Music Hackathon #3

    Did you know web browsers can now make music? Or at least sound. By using Web Audio API, you can synthesize, add effects, modulate, split, merge - whatever you can imagine to process audio: they are available on many browsers. There’s also MIDI support. Chrome has Web MIDI implementation behind...


  • ブラウザで音を楽しむイベント:Web Music ハッカソン #3 レポート

    ブラウザで利用可能な Web Audio API や Web MIDI API などを使って音を楽しもうというこのハッカソンも、早いものでもう3回目となりました。今回も実に濃い内容で、素晴らしい作品が目白押しだったのですが、このポストではできるだけさらっと、その内容をお伝えしたいと思います。 実は今回のハッカソン、前日にベルリンで Web Audio Hackday というイベントが開催されており、せっかく日程が近いのだから何かコラボレートしたいよね、ということで連絡を取り合い、ひとまず報告ブログという形で成果を見せ合うという試みをしています。この後で英語版の記事をポストする予定。ベルリンからの報告も、公開され次第リンクします。 オープニング まずは挨拶の後、Google エンジニアで Web MIDI API の実装を担当している @toyoshim から、Web MIDI API の仕様に関するアップデートでスタート。資料はこちら: Web MIDI API update from Takashi Toyoshima そして今回もチューターとして参加された、日本の Web Music の世界ではすでに有名人の (実は世界的にも知る人ぞ知る) @g200kg さん、@aike1000 さん、@sascacci さんそれぞれから、Web Audio / MIDI を使ったアプリケーションのデモが行われました。あまりのレベルの高さにハッカソンのハードルがグググッと上がります。 @sascacci さんは 電子ドラムを使ったビジュアルエフェクト @aike1000 さんからは各種テンプレートの紹介とデモ。サンプルコード集 は Web Audio API を使ってサイン波を出すところから、サンプル音の再生、ディレイやピッチチェンジャー、ディストーションの使い方などかなり便利なスニペットが書かれているので、ウェブ上のオーディオプログラミングに興味ある人は必ずチェックしましょう。 他にもシンセのテンプレ集、VJフレームワークも。 @g200kg さんからは LiveBeats のデモ また、ヤマハの多田氏から DAW...