HTML5 コンポーネント: 特定の目的のためのコンポーネント、第 2 回

イベント・リスナーのサポート、CSS3 による要素のアニメーション化、DOM へのコンテンツの挿入に対処する

この連載では、HTML5 のエキスパートである David Geary が HTML5 コンポーネントの実装方法を説明します。今回は、「特定の目的のためのコンポーネント、第 1 回」で紹介した、特定の目的のための高度なスライダー・コンポーネントの実装を仕上げます。具体的には、イベント・リスナーを組み込む方法、スライダーのノブをアニメーション化する方法、そしてスライダーを既存の DOM (Document Object Model) ツリーに挿入する方法を説明します。

David Geary, Author and speaker, Clarity Training, Inc.

David GearyCore HTML5 Canvas』の著者、David Geary は HTML5 Denver User's Group の共同設立者でもあり、Swing と JavaServer Faces に関するベストセラーの本を含め、Java に関する 8 冊の本の著者でもあります。また彼は、JavaOne、Devoxx、Strange Loop、NDC、OSCON などのカンファレンスで頻繁に講演を行っており、JavaOne Rock Star にも 3 度選ばれています。彼は developerWorks の連載記事、「HTML5 による 2D ゲームの開発」、「JSF 2 の魅力」、そして「GWT の魅力」の著者でもあります。



2013年 6月 20日

HTML5 は、Web のための高度なプログラミング・プラットフォームとして、canvas 要素や CSS3、そしてイベント・モデルなどの強力な機能を備えています。HTML5 には、独自のコンポーネントを実装するために必要な基礎となる機能のすべてが揃っています。

この連載について

HTML5 の標準 UI コンポーネント・モデルは今でも進化を続けています。この連載では、HTML5 のエキスパートである David Geary が、既存の技術を使用して特定の目的のための独自の HTML5 コンポーネントを作成する方法、そして正規の HTML5 コンポーネント・システムを定義する途上にある仕様を利用する方法を説明します。

連載第 1 回に続いて、この記事でもスライダー・コンポーネントを取り上げます。今回説明するのは、イベント・リスナーを組み込む方法、スライダーのノブをアニメーション化する方法、そしてスライダー自体を既存の DOM ツリーに挿入する方法です。具体的には、以下の内容について説明します。

  • スライダーで代替コントロールを使用する方法
  • 変更リスナーの登録および起動のサポートを実装する方法
  • CSS3 トランジションによって HTML 要素をアニメーション化する方法
  • コンテンツを DOM ツリーに挿入する方法
  • 要素の属性を使って、特定の目的のためのコンポーネントをカスタマイズする方法

スライダーの代替コントロール

図 1 に、第 1 回のスライダー・コンポーネントを使った単純なアプリケーションのバリエーションの 1 つを示します。このバリエーションでは、スライダーの値を増減するためのコントロールとして、ボタンの代わりにリンクを使用します。リンクによるコントロールであれば、マウス・クリック・イベントを生成する要素を使用することができます。

図 1. ボタンの代わりにリンクを使用したバリエーション
ボタンの代わりにリンクを使用したスライダーのスクリーン・ショット

ユーザーがスライダーの値を変更する方法には、スライダーのレールをクリックする方法や、ノブをドラッグする方法もあります。第 1 回の「ノブをドラッグする」セクションでは、スライダー・コンポーネントがどのようにしてノブをドラッグできるようにしているかを説明しました。今回の記事の「スライダーのノブをアニメーション化する」セクションでは、ユーザーがスライダーのレールをクリックしたときに、スライダー・コンポーネントが CSS3 トランジションを使用してどのようにノブの位置を調整するのかを説明します。

リスト 1 に、図 1 に示したアプリケーションの HTML コードを記載します。

リスト 1. ボタンの代わりにリンクを使用したスライダー・アプリケーションの HTML コード
<html>
   <head>
      ...
   <head>

   <body>
      <div id='slider-component'>
         <div id='controls'>
            <a href='#' class='slider-control' id='decrement'>-</a>
            <a href='#' class='slider-control' id='increment'>+</a>

            <div id='slider'>  <!-- slider goes here -->  </div>
         </div>

         <div id='readout'>0</div>
      </div>
   </body>

   <script type="text/javascript" src="lib/slider.js"></script>
   <script type="text/javascript" src="sliderExample.js"></script>
</html>

スト 1 の HTML コードは、単純明快です。 ‘controls’ div 内に 2 つのリンクとスライダーがあり、さらにこの div が ‘slider-component’ div 内にあります。ユーザーがいずれかのリンクをクリックすると、リスト 2 に示すように、アプリケーションの JavaScript がそのクリック・イベントを処理します。

リスト 2. リンクのクリック・イベント
var slider = new COREHTML5.Slider('black', 'cornflowerblue', 0),
...

document.getElementById('decrement').onclick = function (e) {
   slider.knobPercent -= 0.1;
   slider.redraw(); 
   updateReadout();
}

document.getElementById('increment').onclick = function (e) {
   slider.knobPercent += 0.1; 
   slider.redraw(); 
   updateReadout();
}

リスト 2 のイベント・ハンドラーは、スライダーの値 (スライダー・コンポーネントの knobPercent 属性に格納されています) を増減させた上で、スライダーを再描画して readout 要素を更新します。

スライダーの値が変更されると、アプリケーションはスライダー・コンポーネントに追加された変更リスナーを使って readout 要素を更新します (リスト 3 を参照)。

リスト 3. スライダーの変更イベント
var readoutElement = document.getElementById('readout');

function updateReadout() {
   if (readoutElement)
      readoutElement.innerHTML = slider.knobPercent.toFixed(2);
}

slider.addChangeListener(updateReadout);

readout 要素はオプションであることに注意してください。この要素がなければ、updateReadout() メソッドは何も行いません。

スライダー・コンポーネントに変更リスナーのサポートがどのように実装されるかについては、次のセクションで説明します。

図 1 に示したアプリケーションは、スライダー・コンポーネントの appendTo() メソッドを使用して、スライダーを DOM に追加します。

slider.appendTo('slider'); // Append the slider to the DOM element with an ID of slider
slider.draw();

このメソッドの実装については、この記事の「スライダーを DOM 要素に追加する」セクションで説明します。


スライダーの変更イベントをサポートする

前のセクションで、図 1 のアプリケーションは変更リスナーをスライダー・コンポーネントに追加することによって、オプションの読み出しを同期状態に維持する仕組みを説明しました。リスト 4 に、スライダー・コンポーネントには開発者がどのように変更リスナーを追加できるのか、そしてスライダー・コンポーネントはこれらのリスナーに対して変更イベントをどのように起動するのかを示します。

リスト 4. 変更リスナーを追加するメソッドと、イベントを起動するメソッド
COREHTML5.Slider = function {
   ...
   this.changeEventListeners = [];
   ...
};

COREHTML5.Slider.prototype = {
   ...

addChangeListener: function (listenerFunction) {
      this.changeEventListeners.push(listenerFunction);
   },

fireChangeEvent: function(e) {
      for (var i=0; i < this.changeEventListeners.length; ++i) {
         this.changeEventListeners[i](e);
      }
   },
   ...
};

すべてのスライダー・コンポーネントには関数の配列が含まれています。スライダーの値が変更されると、fireChangeEvent() メソッドがその配列を繰り返し処理して、そこに含まれる関数を順に呼び出します。スライダー・コンポーネントがこの fireChangeEvent() メソッドを呼び出す方法は、リスト 5 のとおりです。

リスト 5. 変更イベントを起動する
COREHTML5.Slider.prototype = {
addMouseListeners: function () {
      this.knobCanvas.addEventListener('mousemove', function(e) {
         var mouse = null,
             percent = null;

         e.preventDefault();

         if (slider.draggingKnob) {
            slider.deactivateKnobAnimation();
            
            mouse = slider.windowToCanvas(e.clientX, e.clientY);
            percent = slider.knobPositionToPercent(mouse.x);

            if (percent >= 0 && percent <= 1.0) {
slider.fireChangeEvent(e);
               slider.erase();
               slider.draw(percent);
            }
         }
      }, false);

   },

ユーザーがスライダーのノブをドラッグすると、ノブ・キャンバスに追加されたマウスムーブ・イベント・リスナーがノブの位置に応じてスライダーの値を調整してから変更イベントを起動し、スライダーを消去して再描画します。さらに、このマウスムーブ・イベント・リスナーは、ユーザーがノブをドラッグしている間、スライダーのノブのアニメーションを非アクティブにすることで、ユーザーによるノブのドラッグ操作がアニメーションに邪魔されることがないようにします。

スライダー・コンポーネントでノブのアニメーションが非アクティブにされる状況がわかったところで、今度はアニメーションがどのように機能するのかを見ていきましょう。


スライダーのノブをアニメーション化する

図 2 に、スライダー・コンポーネントでノブの動きがアニメーション化される様子を示します。図 2 の一番上のスクリーン・ショットは、ユーザーがスライダーのレールをクリックする直前のものです。その下の 2 つのスクリーン・ショットには、ユーザーがレールをクリックした後、ノブがカーソルの位置まで移動する様子が示されています (図 2 では実際のアニメーションを表現しきれていないので、コードをダウンロードして、このエフェクト全体を確認してみてください)。

図 2. スライダーをアニメーション化する
スライダーのアニメーションをデモンストレーションする 3 つのスクリーン・ショット

第 1 回の「スライダーを作成および初期化する」セクションで説明したように、スライダーはレールとノブをそれぞれ別々のキャンバス要素に描画します。レールとノブを同じキャンバスに描画するほうが簡単ですが、CSS3 トランジションは個々の要素でしか機能しないので、ノブを個別のキャンバスに含める必要があります。

前のセクションで、ユーザーがノブをドラッグしている間、スライダー・コンポーネントはノブのアニメーションを非アクティブにするために、deactivateKnobAnimation() メソッドを呼び出すと説明しました。このメソッドと、その逆の処理を行う activateKnobAnimation()リスト 6 に記載します。

リスト 6. ノブのアニメーションをアクティブ、非アクティブにする
COREHTML5.Slider.prototype = {
   ...

activateKnobAnimation: function () {
      var transitionString = "margin-left " +
          (this.knobAnimationDuration / 1000).toFixed(1) + "s";

      this.knobCanvas.style.webkitTransition = transitionString;
      this.knobCanvas.style.MozTransition = transitionString;
      this.knobCanvas.style.OTransition = transitionString;
      this.knobCanvas.style.transition = transitionString;
   },

deactivateKnobAnimation: function () {
      slider.knobCanvas.style.webkitTransition = "margin-left 0s";
      slider.knobCanvas.style.MozTransition = "margin-left 0s";
      slider.knobCanvas.style.OTransition = "margin-left 0s";
      slider.knobCanvas.style.transition = "margin-left 0s";
   },
   ...
};

ブラウザー間での命名の違い

HTML5 の多くの機能と同じく、CSS3 トランジションは当初ブラウザー固有の機能として実装されましたが、その後、W3C によって標準化されました。トランジションをサポートするすべてのブラウザー・バージョンでトランジションが確実に機能するように、リスト 6 のようなコードには、それぞれのブラウザーに固有の CSS 属性名をすべて含める必要があります。

リスト 6 に記載されている activateKnobAnimation() メソッドは、ブラウザーによって異なるトランジション属性名の違いを考慮して、プログラムで CSS3 トランジションをノブ・キャンバス要素の margin-left CSS 属性に追加します。このトランジションの結果、ブラウザーは margin-left 属性が変更されると、ノブ・キャンバスをある位置から別の位置へと滑らかなアニメーションで移動します。アニメーションの時間は、スライダー・コンポーネントの knobAnimationDuration 属性によってミリ秒単位で指定されています。

deactivateKnobAnimation() メソッドは CSS3 トランジションの時間をゼロ秒に変更することで、事実上、アニメーションを無効にします。

ユーザーがスライダーのレールをクリックすると、リスト 7 に記載するイベント・ハンドラーが、スライダーのノブをクリック位置に移動させます。

リスト 7. スライダーのレールをクリックする
COREHTML5.Slider.prototype = {
   ...
addMouseListeners: function () {
      ...
   
      this.railCanvas.onmousedown = function(e) {
         var mouse = slider.windowToCanvas(e.clientX, e.clientY),
             startPercent,
             endPercent;

         e.preventDefault();

         startPercent = slider.knobPercent;
         endPercent = slider.knobPositionToPercent(mouse.x);

         slider.animatingKnob = true;

         slider.moveKnob(mouse.x);
         slider.trackKnobAnimation(startPercent, endPercent);
      };
   },
   ...
};

スライダー・コンポーネントの moveKnob() メソッド (リスト 8 を参照) はノブを移動させるために、ノブ・キャンバス要素の margin-left CSS 属性を設定します。この属性を設定すると、ノブのアニメーションが有効であれば、CSS3 によるノブのアニメーションが開始されます。

リスト 8. スライダーのノブを移動させる
COREHTML5.Slider.prototype = {
   ...

moveKnob: function (position) {
      this.knobCanvas.style.marginLeft = position - this.knobCanvas.width/2 + "px";
   },
   ...
};

JavaScript での CSS 属性名

多くの場合、CSS 属性名にはハイフンが含まれていますが、JavaScript 属性名にはハイフンを使用できません。このあいにくの不一致により、ハイフンが含まれる CSS 属性名については、キャメル・ケースの JavaScript 属性名に変換しなければなりません。キャメル・ケースにすると、例えば margin-leftmarginLeft に、padding-toppaddingTop になります。

スライダーのノブを移動させる他に、レール・キャンバスのマウス・ダウン・イベント・ハンドラーがスライダー・コンポーネントの trackKnobAnimation() メソッド (リスト 7 を参照) を呼び出します。次のセクションで説明しますが、このメソッドが、CSS3 トランジションの対応するアニメーション全体を通して、スライダーの値とノブの同期状態を維持します。


CSS3 トランジションを追跡する

CSS3 トランジションの終了は、イベント・リスナーによって検出することができます。スライダー・コンポーネントはこれを行うために、スライダー・コンポーネントのコンストラクターから addKnobTransitionListener() メソッドを呼び出します (リスト 9 を参照)。

リスト 9. ノブのトランジション・リスナーを追加する
COREHTML5.Slider = function(strokeStyle, fillStyle, knobPercent, knobAnimationDuration) {
   ...
   this.createDOMTree();
   this.addMouseListeners();
   this.addKnobTransitionListener();
};

スライダー・コンポーネントの addKnobTransitionListener() メソッド (リスト 10 を参照) がトランジション・リスナーをノブ・キャンバスに追加する際にも、ブラウザーによる命名の違いが考慮されます。

リスト 10. CSS トランジション・リスナー
COREHTML5.Slider.prototype = {
   ...

addKnobTransitionListener: function () {
      var BROWSER_PREFIXES = [ 'webkit', 'o' ];

      for (var i=0; i < BROWSER_PREFIXES.length; ++i) {
         this.knobCanvas.addEventListener(
BROWSER_PREFIXES[0] + "TransitionEnd", // Everything but Mozilla

            function (e) {
slider.animatingKnob = false;
            }
         );
      }

      this.knobCanvas.addEventListener("transitionend", // Mozilla
         function (e) {
slider.animatingKnob = false;
         }
      );
   },      
   ...

ノブ・トランジションのアニメーションが完了すると、ブラウザーはリスト 10 のトランジション・リスナーを呼び出します。このリスナーは単にスライダー・コンポーネントの animatingKnob 属性を false に設定するだけですが、これにより、スライダー・コンポーネントはノブのアニメーションの追跡を停止します。アニメーションの追跡は、スライダー・コンポーネントの trackKnobAnimation() メソッドによって実装されます (リスト 11 を参照)。

リスト 11. ノブのアニメーションを追跡する
trackKnobAnimation: function (startPercent, endPercent) {
      var count = 0,
          KNOB_ANIMATION_FRAME_RATE = 60,  // fps
          iterations = slider.knobAnimationDuration/1000 * KNOB_ANIMATION_FRAME_RATE + 1,
          interval;

      interval = setInterval( function (e) {
if (slider.animatingKnob) {
            slider.knobPercent = startPercent +
                                 ((endPercent - startPercent) / iterations * count++);

            slider.knobPercent = slider.knobPercent > 1.0 ? 1.0 : slider.knobPercent;
            slider.knobPercent = slider.knobPercent < 0 ? 0 : slider.knobPercent;

            slider.fireChangeEvent(e);
}
         else { // Done animating knob 
            clearInterval(interval);
            count = 0;
}
      }, slider.knobAnimationDuration / iterations);
   },
   ...   
};

リスト 10 に示されているように、CSS3 トランジションのアニメーションの終了はイベント・リスナーで検出することができますが、アニメーションの途中のステップを検出することはできません。この途中のステップの検出は、ノブをアニメーション化しているときにスライダー・コンポーネントが変更イベントを起動するために必要です。

CSS3 のトランジションとアニメーションの違い

スライダーのノブをアニメーション化するために、この記事では CSS3 トランジションを使用しました。CSS3 トランジションは、比較的簡単に使用できますが、トランジションに対応するアニメーションの実行中はイベント通知をサポートしません。代わりに CSS3 アニメーションを使用すれば、アニメーションを実行中のイベント通知をサポートすることができます。しかし、CSS3 アニメーションを使用するのは CSS3 トランジションを使用するよりも難しい作業になります。

CSS3 トランジションのアニメーションの途中のステップを検出することは不可能であるため、スライダー・コンポーネントの trackKnobAnimation() メソッドは setInterval() を使用してアニメーションのステップを概算し、各ステップで変更イベントを起動します。

スライダーのノブを CSS3 トランジションでアニメーション化する方法は以上のとおりです。次は、スライダーを既存の DOM 要素に追加する方法を見ていきましょう。


スライダーを DOM 要素に追加する

第 1 回の「スライダーを描画する」セクションでは、CSS3 トランジションを使用せずにスライダー・コンポーネントを実装する方法を説明しました。その実装の結果として描画されるスライダーは、図 3 に示すような DOM ツリー要素で構成されるものになります。

図 3. スライダーを構成する DOM ツリー要素
スライダーを構成する DOM ツリー要素として、1 つの div 要素と 2 種類のキャンバス要素を示す図

スライダー・コンポーネントのコンストラクターは、1 つの div 要素と 2 種類の canvas 要素 (1 つはスライダーのレール用、もう 1 つはノブ用) を作成し、これらのキャンバス要素をこの div 要素に追加します。続いて、リスト 1 に記載したアプリケーションでスライダーが既存の DOM 要素に追加されると、そのスライダーによってスライダーのエンクロージング DOM 要素が既存の DOM 要素に追加されます (図 4 を参照)。

図 4. スライダーをマージした DOM ツリー
スライダーをマージした DOM ツリーを示す図

スライダー・コンポーネントのコンストラクターは、スライダー・コンポーネントの createDOMTree() メソッドを呼び出します (リスト 12)。

リスト 12. スライダーの DOM ツリーを作成する
COREHTML5.Slider = function(strokeStyle, fillStyle, knobPercent, knobAnimationDuration) {
   ...
   this.createDOMTree();
   this.addMouseListeners();
   this.addKnobTransitionListener();
};

リスト 13 にスライダー・コンポーネントの createDOMTree() メソッドを記載します。

リスト 13. createDOMTree() メソッド
COREHTML5.Slider.prototype = {
   ...

createDOMTree: function () {
      var self = this;

      this.domElement = document.createElement('div');

      this.domElement.appendChild(this.knobCanvas);
      this.domElement.appendChild(this.railCanvas);
   },
   ...
};

スライダー・コンポーネントは、createDOMTree() を呼び出す時点までには、ノブおよびレールのキャンバスを作成しています。createDOMTree() メソッドはスライダーのエンクロージング div 要素を作成して、その div 要素に既存のノブ・キャンバスとレール・キャンバスを追加します。

スライダーの DOM ツリーが作成されると、スライダー・コンポーネントの appendTo() メソッドでスライダーを既存の DOM 要素に追加するためのお膳立てが整います (リスト 14 を参照)。

リスト 14. appendTo() メソッド: スライダーを既存の DOM 要素に追加する
COREHTML5.Slider.prototype = {
   ...

appendTo: function (elementName) {
      if (typeof element === 'string') {
         document.getElementById(element).
            appendChild(this.domElement);
      }
      else {
         element.appendChild(this.domElement);
      }

      this.resize();
   },
   ...
};

CSS とキャンバス要素の両方のサイズ設定について

リスト 15 に記載されているスライダー・コンポーネントの setKnobCanvasSize() メソッドでは、最後の 4 行に重要なポイントが示されています。それは、キャンバス要素を対象とした CSS の width 属性および height 属性を設定する場合、キャンバス要素の width 属性および height 属性も同じ値に設定しなければならないことです。その理由は、CSS の属性はキャンバス要素にだけ適用される一方、キャンバスの幅と高さの属性はキャンバス要素とその描画サーフェイスの両方に適用されるためです。CSS の属性だけを設定すると、キャンバス要素のサイズとその描画サーフェイスのサイズが合わなくなるため、ブラウザーはキャンバス要素が収まるようにキャンバスの描画サーフェイスを拡大/縮小することになります。リスト 15 に示されているとおり、スライダー・コンポーネントの resize() メソッドは、スライダー自体のサイズだけでなく、スライダーのレール・キャンバスおよびノブ・キャンバスのサイズも設定します。

appendTo() メソッドには、要素の ID を表すストリングを渡すことも、要素自体を渡すこともできます。このメソッドは、指定された要素にスライダーのエンクロージング DOM 要素を追加し、キャンバスのサイズとスライダーのエンクロージング DOM 要素のサイズを両方とも変更します。サイズ変更は、resize() メソッドと、このメソッドが呼び出すメソッドによって行われます。この一連の動作をリスト 15 に記載します。

リスト 15. スライダーのエンクロージング 要素に合わせてサイズ変更する
COREHTML5.Slider.prototype = {
   ...

setRailCanvasSize: function () {
      var domElementParent = this.domElement.parentNode;

      this.railCanvas.width = domElementParent.offsetWidth;
      this.railCanvas.height = domElementParent.offsetHeight;
   },

   
setKnobCanvasSize: function () {
      this.knobRadius = this.railCanvas.height/2 -
                        this.railContext.lineWidth;

      this.knobCanvas.style.width = this.knobRadius * 2 + "px";
      this.knobCanvas.style.height = this.knobRadius * 2 + "px";
      this.knobCanvas.width = this.knobRadius*2;
      this.knobCanvas.height = this.knobRadius*2;
   },

setSliderSize: function() {
      this.cornerRadius = (this.railCanvas.height/2 -
                           2*this.VERTICAL_MARGIN)/2;

      this.top = this.HORIZONTAL_MARGIN;
      this.left = this.VERTICAL_MARGIN;

      this.right = this.left +
                   this.railCanvas.width - 2*this.HORIZONTAL_MARGIN;

      this.bottom = this.top + 
                   this.railCanvas.height - 2*this.VERTICAL_MARGIN;
   },

resize: function() {
      this.setRailCanvasSize();
      this.setKnobCanvasSize();
      this.setSliderSize();
   },
   ...
};

コンポーネントをカスタマイズする

スライダー・コンポーネントは、現状でかなり有用なものになっていますが、コンポーネントにどれほどの有用性があるかに関わらず、ユーザーが何らかの形でコンポーネントをカスタマイズしたいと思う可能性は十分にあります。例えば図 5 に示すように、色を変更するといった単純なカスタマイズから、(この記事で説明するスライダーではサポートしていない) 縦方向のスライダーをサポートするといった大がかりなカスタマイズまで考えられます。

図 5. 水色のスライダー
新しい色として水色に変更されたスライダーのスクリーン・ショット

リスト 16 に示すコードでは、‘slider-component’ div 要素に stroke 属性と fill 属性を追加し、それぞれに色を指定しています。

リスト 16. 要素の属性を指定する
<!DOCTYPE html>
<html>
   <head>
      ...
   </head>
   
   <body>
      <div id='title'>A custom slider</div>

      <p>
         <div id='slider-component' stroke='blue' fill='aqua'>
            ...
         </div>
      </p>
   </body>

   <script type="text/javascript" src="lib/slider.js"></script>
   <script type="text/javascript" src="sliderExample.js"></script>
</html>

このアプリケーションの JavaScript では、getAttribute() メソッド (リスト 17 を参照) を使用して stroke 属性と fill 属性の値を取得します。

リスト 17. 要素の属性にアクセスする
var sliderElement = document.getElementById('slider-component'),
    slider = new COREHTML5.Slider(sliderElement.getAttribute('stroke'),
                                  sliderElement.getAttribute('fill'),
                                  0),
    ...

属性の値を取得した後、これらの値を使用してスライダーを作成します。


次回の予告

この連載の次回の記事では、W3C の「Introduction to Web Components」仕様を話題に取り上げ、Shadow DOM、カスタム要素、およびテンプレートを使用してスライダー・コンポーネントを実装する方法を説明します。次回の記事でまたお会いしましょう。


ダウンロード

内容ファイル名サイズ
Sample codewa-html5-components-2-code.zip6KB

参考文献

学ぶために

製品や技術を入手するために

  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

  • developerWorks コミュニティー: ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、Wiki を調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=934601
ArticleTitle=HTML5 コンポーネント: 特定の目的のためのコンポーネント、第 2 回
publish-date=06202013