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

ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

WinJS 4.0 では HTML コントロールにスタイルを当てるためにクラスを明示的に指定する必要がある

WinJS 4.0 がリリースされましたね!! めでたい!

2015 年 6 月 14 日時点では、Try WinJS のダウンロードページのリンク先がバージョン 4.0.0 になっていますが、最新バージョンは 4.0.1 です。 (Windows Phone 10 におけるバグの修正がされたようです。)

私も Windows ストアアプリ開発で使用している WinJS のバージョンを 4.0 にしてみましたが、便利なコントロールがいくつか追加されていたり、見た目がかっこよくなっていたりして良いです。 ロードマップを見たところ、バージョン 4.1 のリリースは Windows 10 リリースと同時とのことなので、Windows ユニバーサルアプリ開発には WinJS 4.1 を使えそうです。 UX に磨きがかけられるとのことなので、それも今から楽しみですね。

WinJS 4.0 での変更点

WinJS 4.0 では、API の変更も UI/UX の変更もいろいろと行われています。 詳細は GitHub 上の Changelog を見ましょう。

スタイルの適用方法の変更

変更点のうちの 1 つ、スタイルの適用方法についてこのエントリでは紹介します。

Styling

Styling of intrinsic elements is no longer by default

Changelog · winjs/winjs Wiki · GitHub

Changelog に書かれているように、HTML の通常の要素にはデフォルトでは WinJS のスタイルが当たらないように変更されました。 WinJS 3.0 では、例えば button 要素そのものに WinJS 用のスタイルが当たるように CSS が書かれていましたが、WinJS 4.0 では button 要素を単に書くだけでは WinJS のスタイルは適用されません。 WinJS のスタイルを適用したい場合には、明示的にクラスを指定する必要があります。

ボタンの場合は、win-button クラスです。

<button class="win-button">WinJS のスタイルが適用されたボタン</button>
<button>WinJS のスタイルは適用されないボタン</button>

詳細は次のページに書かれています。

ボタンのようにスタイルが当たっていないことがすぐにわかるものは動作確認時に気づきやすいのですが良いのですが、h1 要素や progress 要素など、スタイルが当たっているのかどうか動作確認時に見てもわかりづらいものもあるので注意しましょう。 body 要素に win-type-body クラスを付与することが推奨されている のも移行当初は見落としがちなので気を付けたいですね。 win-button-primary の存在も見落としやすそうです。