Sencha Touchのカスタムコンポーネントを作る、パート3

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “Building Sencha Touch Custom Components, Part 3”を翻訳したものです。

Sencha Touchのコンポーネントについてのチュートリアルの最後のパートです。ここではExt.tux.AudioCoverのコンポーネントのスタイリングについて説明します。これとこれのポストでコンポーネントのコードの開発についていろいろと説明しました。ここからはコンポーネントの見た目をカスタマイズしたいと思います。この際、ネイティブの開発者に対して、HTML5で簡単にネイティブ以上にネイティブなコンポーネントが作れることを証明してやりましょう。ではSassファイルを定義することから始めましょう。

Sassファイル:

コンポーネントの開発をやり遂げるにはSassファイルを定義する必要があります。最後にアプリケーションテーマをコンパイルしたら、ユーザーインターフェイスを正しく描画するためのコンポーネントエレメントのスタイルができあがります。

もしあまりSassについて詳しくないのなら、オフィシャルのウェブサイトに載っているチュートリアルを見たほうが良いでしょう。

mixin定義

カスタムコンポーネントの開発を始めるときに、Sassで最初にやるべきことはそれ用の”mixin”を作ることです。 “mixin”は、他のCSSクラスの中やこの場合ではアプリケーションのテーマの中に直接インクルードできる、 CSSルールのスタンドアロンブロックが簡単に定義できるようになるので重要です。

フレームワークは既に各デフォルトのコンポーネントに”classes”を使っているので、 “mixin”の定義をマスタールールとして考える必要があります。例えば、”Ext.Panel”コンポーネント用に”mixin”があり、”Ext.Button”にも別なのがあります。このルールを使用すれば、コンポーネントのメンテナンスはもっと簡単になるし、TUXに関連するスタイルをすぐ見つけられるので、他の開発者にとってあなたのコードがもっと明確に読みやすくなります。さて、”mixin”の定義方法を見てみましょう：

/**
* Includes Ext.tux.AudioCover styles.
*
* @member Ext.tux.AudioCover
*/
@mixin sencha-tux-audiocover {
 
}

次はデフォルトのSencha Touchコンポーネントに関連する全てのmixinが含まれているSassファイルの中に新しいmixinを挿入するだけです。殆どの場合はこのファイルの名前は“app.scss”となります。

@include sencha-tux-audiocover;

必要なもの全てを.scssのファイルに記述するようにします。

アプリケーションテーマをコンパイルする時、 CSSのアウトプットファイルが何も特に変わってないことに気付くでしょう。心配しないでください。まだmixinの中にCSSクラスを指定する必要があるのです。さて、CSS”x-flip-card”クラスが適用されているあ”cardEl”の点数をいくつか定義しましょう。

The Variables

これはグラフィック側の視点で見ると少し複雑なコンポーネントなので、正しくUIを構築するには少し手助けが必要となります。作業を簡単にするために、いくつかの変数を定義しましょう。

前に説明したように、プログレスバーを構成する全ての丸いエレメントは同じ大きさと位置でなければなりません。もし、例えば外側の”carlEl”の大きさを変えたかったら、手動で全ての丸いエレメントの大きさとマージンを変えなければならなくなります。しかし、心配はいりません。これから定義する変数のお陰で、たった一つの値を変えるだけで全てのノードが自動的にアップデートされます。大きさ、位置、マージンはコンパイル時に事前に定義された静的値の代わりに、コンテナーエレメント属性の参照として使って自動的に計算され更新されるからです。

これらの変数の定義を進めましょう。

/**
* Includes Ext.tux.AudioCover styles.
*
* @member Ext.tux.AudioCover
*/
@mixin sencha-tux-audiocover {
 
  $size: 50px;
  $margin: 5px;
  $button-size: ($size * 40) / 100;
  $button-icon-size: ($size * 15) / 100;
 
}

上記のコードの説明はとても簡単で直感的です： “$size”変数はコンテナー”coverEl”ノードと、プログレスバーを構成する丸いエレメントの全ての大きさを定義します。

“$button-size”変数はストップボタンのサイズを提供します。そのサイズは”cardEl”の40%の大きさと等しくなります。また、最後のの“$button-icon-size”は、ストップボタンのアイコンサイズを定義し、それは15%のサイズになります。

これで、次に”cardEl”とその子エレメントのスタイルの定義を始められます。

“cardEl”とその両面

我々のカスタム”mixin”を見て、変数の定義を復習しましょう：

.x-tux-audiocover {
 
  .x-flip-card {
 
      width: $size;
      height: $size;
 
      -webkit-transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
 
      .x-face {
 
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-backface-visibility: hidden;
 
          &.x-front {
              background-size: 100% 100% !important;
              border: solid 1px #d4d4d4;
          }
 
          &.x-back {
 
              @include display-box;
              @include box-pack(center);
              @include box-align(center);
 
              -webkit-transform: rotateY(180deg);
              -webkit-box-sizing: border-box;
 
          }
 
      }
 
  }
 
}

上のコードを見ると、テンプレートの定義にセットしたcachedConfigの”baseCls”と同じように、”mixin”のルートクラスは”x-tux-audiocover”になっています。こうすれば、クラスの中で定義したスタイルは、このコンポーネントだけに関連づけられます。

さて、”x-flip-card”クラスをみると、その大きさは“$size”変数で設定されているのがわかります。さらに、その全ての子に3Dトランジションを設定して、アニメーションスピードを１秒にするルールも入れる必要があります。フリップのアニメーションを速くしたり遅くしたりしたかったら、単にこの値を変えるだけですみます。

これらの面は“absoulte”プロパティを使って、幅と高さ100%で”cardEl”コンテナーの中に位置決めされ、裏面は非表示に設定されます。このように、フリップトランジションの時に変なレンダリングの問題が発生しないようにします。

“x-front”クラスにCSSルールが設定されていることに気づくも重要です。これはエレメントのサイズ全体をカバーするように背景イメージを縦横一杯に引き伸ばします。そして、“x-back”コンテナークラスにボックスレイアウト／プロパティをセットすると、裏面のプログレスバーの子ノードは完全に中央に配置されるようになります。

最後にこの面を表面と合わせて背中合わせにして、Y軸で180°回転させる事を忘れないでください。こうすると、このコンポーネントは3Dな感じになります。

ストップボタン

TUXカスタムUIをつくる全ての他のエレメントと同様、プログレスバーの中央部分の中に完全にフィットし正しいアイコンサイズにするために、ストップボタンにもスタイリングの追加が必要です。一つだけ忘れてはいけないポイントは、ストップボタンは裏面に置かれるので、 “x-back”クラスの子として、全てのスタイルを直接指定する必要があることです。

...
      &.x-back {
 
          @include display-box;
          @include box-pack(center);
          @include box-align(center);
 
          -webkit-transform: rotateY(180deg);
          -webkit-box-sizing: border-box;
 
          .x-button {
 
              @include border-radius($size);
              min-height: $button-size;
              width: $button-size;
              height: $button-size;
 
              .x-button-icon {
 
                  width: $button-icon-size;
                  height: $button-icon-size;
                  -webkit-mask-size: $button-icon-size;
                  -webkit-mask-repeat: no-repeat;
                  margin: 1px -3px;
                  background: #4F4F4F;
 
              }
 
          }
...

最後にこのボタンをカスタム”UI”やアイコンを使うようにしたいので、正しくレンダリングされるように、それを定義する必要があります。

@include pictos-iconmask('stop');

この簡単なコマンドで、ストップボタンとしてよく使われる小さな正方形のアイコンの、アイコンマスクをインクルードしています。

@include sencha-button-ui('white', #FFF);

ここではSassを使って白い背景色のカスタムボタンUIを作っています。これでストップボタンが完成しました。

スタイルの共有

もう説明したように、プログレスバーをつくる全てのエレメントは同じ位置、大きさで、丸くなければなりません。このため、同じCSSスタイルを繰り返さないように、これから（ベースCSSクラスが”x-progress”と設定された）”progressEl”、”x-slice”コンテナエレメント、子divタグに適用するルールのセットを定義します。

...
    .x-progress, .x-progress .x-slice, .x-progress .x-slice div {
 
          @include border-radius($size / 2);
 
          position: absolute;
          top: 0;
          left: 0;
          width: $size - ($margin * 2);
          height: $size - ($margin * 2);
 
      }
...

これら全てのエレメントは裏面と関連しているので、“x-back”ルートクラスの中でスタイルを定義するのを忘れないでください。

スライスで完了

まだスライスエレメントとその子ノードについて一番重要なスタイルを定義しなければなりませんので、一緒に最後のルールを分析しましょう。

.x-progress {
 
  @include display-box;
  @include box-pack(center);
  @include box-align(center);
 
  margin: $margin;
  background-color: #FFF;
  border: solid 1px #BBB;
 
  .x-slice {
 
      &.x-half {
 
          clip: rect(0px, $size, $size, $size / 2 - $margin);
          div {
              clip: rect(0px, $size / 2 - $margin , $size, 0);
              @include rotate(0deg);
          }               
 
      }
 
      &.x-end {
 
          clip: rect(0px, $size / 2 - $margin, $size, 0);
          div {
              clip: rect(0, $size / 2 - $margin , $size, 0);
              @include rotate(180deg);
          }
 
      }
 
      div {
          background-color: #3f89ee;
      }
 
  }
 
}

“x-progress”クラスを最初にみると、”x-back”のエレメントと同様ボックスレイアウトがセットされて、それとその子供はその中に完璧に真ん中に揃っているということに注目してください。

前の節で説明したように”x-slice”の子ノードに”clip”ルールを適用することにも注目してください。

最後に、”slice1″と”slice2″ノードには（ベースCSS classが”x-half”に設定されています）青い背景色を設定しました。このように、これらの二つのエレメントがオーディオファイルの再生時間によって回転すると、その白からその色になって、プログレスバーの動きをシミュレートします。

プレビューとダウンロード

このチュートリアルの終わりにたどり着きました。このチュートリアルがわかりやすかっと事、楽しめたこと、そしてこの情報があなたのクリエイティビティーを喚起して、カスタムコンポーネントを作り始めることを心から期待します。 Senchaにはとても大きいコミュニティがあることを忘れないでください。ですから、出来るだけ自分の作品をシェアしてください。以下にSencha Marketの中でのこの拡張のリンク、 GitHubプロジェクトリポジトリ、この拡張が使われているライブサンプルのリンクがあります。

Sencha Market Location
GitHub Repository
Live Example Application

Sencha Blog

Sencha Touchのカスタムコンポーネントを作る、パート3

カテゴリ

アーカイブ