MetroStyleDeveloper#02で話してきました。
もう2週間も前の話ですが、MetroStyleDeveloper #02で話してきました。
Grid application テンプレートを紐解く
View more presentations from nnzz2475
スタート画面の背景色を変更したときに変更される選択色の色コード
この内容は Windows 8 Consumer Preview を元に記述しています。
Windows 8 でも Windows Phone 7 みたいにアクセントカラーが決められるのかなと思ってたのですが、いまだ MSDN にも影も形も見えないので、ひょっとしたらアクセントカラーって決められないのかなと思い始めてる今日この頃です。
でも、やっぱり指標は欲しいということで、スタート画面の背景色を変更したときに同時に選択色も変更されるので、その色コードを調べてみました。
| イメージ | 色コード |
|---|---|
 |
R=0, G=130, B=135 (#008287) |
 |
R=1, G=157, B=195 (#019DC3) |
 |
R=0, G=105, B=192 (#0069C0) |
 |
R=114, G=0, B=172 (#7200AC) |
 |
R=194, G=1, B=106 (#C2016A) |
 |
R=191, G=31, B=0 (#BF1F00) |
 |
R=130, G=56, B=0 (#823800) |
 |
R=26, G=154, B=1 (#1A9A01) |
 |
R=255, G=125, B=35 (#FF7D23) |
デフォルトでインストールされてる、メールとかストアとかマップとかのタイルの色とか選択色とかとは違うのが気になるところではあるのですが。
Notifications の TileTemplateType の一覧と、そこから取得できる XML
この内容は Windows 8 Developer Preview を元に記述しています。
Metro のタイル通知である Notification のサンプルを見ていると、どうやら XML を作ってタイルにこういうのを表示してねって知らせるみたいです。で、その XML のひな形は Windows.UI.Notifications.TileTemplateType に一覧が定義されてて、それをもとに取得するようです。
ざっくり書くと以下のような感じ。
var tileXml = Notifications.TileUpdateManager.getTemplateContent( Notifications.TileTemplateType.tileWideImageAndText );
結構シレッと書かれてて、どんなけのタイプが定義されているのか、そこから取得できる XML のフォーマットはどんなのかが見当たらなかった(探し方が悪いだけかもですが。)ので、表示するプログラムを書いてみました。
左に TileTemplateType の一覧がでて、選択すると右側に XML が表示されます。
HTML と Javascript を抜粋して載せておきます。
<style>
.contents {
display: -ms-grid;
-ms-grid-columns: 300px 1fr;
}
.lists {
-ms-grid-column: 1;
}
.xmltext {
-ms-grid-column: 2;
}
#listView {
height: 700px;
}
</style>
</head>
<body>
<section class="contents">
<section class="lists">
<div id="listView" data-win-control="WinJS.UI.ListView"></div>
</section>
<section class="xmltext">
<pre id="tileXml">
</pre>
</section>
</section>
</body>
(function (global, undef) {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
var listView;
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
initializeControls();
}
}
var initializeControls = function () {
WinJS.UI.processAll();
listView = WinJS.UI.getControl(document.getElementById("listView"));
WinJS.UI.setOptions(listView, {
dataSource: getTileTemplateTypes(),
layout: {
type: WinJS.UI.ListLayout
},
selectionMode: 'none',
tap: "invoke",
oniteminvoked: selectTileTemplateName
});
}
var getTileTemplateTypes = function () {
var types = [];
for (var type in Windows.UI.Notifications.TileTemplateType) {
if (type.substr(0, 4) === "tile") {
types.push(type);
}
}
return types;
}
var selectTileTemplateName = function(e){
var templateName = listView.getElementAtIndex(e.detail.itemIndex).msDataItem.data;
var tileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(
Windows.UI.Notifications.TileTemplateType[templateName]
);
document.getElementById("tileXml").innerText = tileXml.getXml();
}
WinJS.Application.start();
})(this);
移転します
遅まきながらはてなブログがオープンしたみたいなので、移転しました。
「k_maruの思うところ2」
Metro の日本語フォント (.NET)
この内容は Windows 8 Developer Preview を元に記述しています。
Metro アプリの日本語フォントはデフォルトで何が利用されるか確認してみました。
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<TextBlock Text="Devloper Designer - Default" />
<TextBlock Text="Devloper Designer - Segoe UI Light"
FontFamily="Segoe UI Light" />
<TextBlock Text="Devloper Designer - Meiryo UI"
FontFamily="Meiryo UI" />
<TextBlock Text="Devloper Designer - Meiryo"
FontFamily="Meiryo" />
<TextBlock Text="Devloper Designer - MS Gothic"
FontFamily="MS Gothic" />
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0,30,0,0">
<TextBlock Text="開発者とデザイナー - Default" />
<TextBlock Text="開発者とデザイナー - Segoe UI Light"
FontFamily="Segoe UI Light" />
<TextBlock Text="開発者とデザイナー - Meiryo UI"
FontFamily="Meiryo UI" />
<TextBlock Text="開発者とデザイナー - Meiryo"
FontFamily="Meiryo" />
<TextBlock Text="開発者とデザイナー - MS Gothic"
FontFamily="MS Gothic" />
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0,30,0,0">
<TextBlock Text="開発者とDevloperとデザイナーとDesigner - Default" />
</StackPanel>
</StackPanel>
で、結果は以下のような感じ。
どうやら、英語フォントは Segoe UI Light 、日本語フォントは Meiryo UI が使われるらしい。
MetroStyleDeveloper#01で話してきました。
もう、先週の話ですがMetroStyleDeveloper #01で話してきました。
Windows 8 で Apple Wireless Keyboard & Magic Trackpad
この内容は Windows 8 Developer Preview を元に記述しています。
Windows 8 で遊ぶように Samsung Series 7 Slate を Dock と Keyboard のセットで購入したのですが、ついてきたキーボードがダメダメでした。
- 電池の消耗が激しく、常に予備の電池が必要
- Bluetooth の認識が甘くすぐ切れる、逆に切れたあとはなかなか繋がらない
- キーの打鍵感がちゃっちい
- 4 と 7 のキーが押すと引っかかって戻ってこない
ということで、別のものを購入しようと思ったのですが、なかなかいいものが見つからなかったため、思い切って Apple Wireless Keyboard にしました。ついでに Magic Trackpad も買ってしまいました。
Magic Trackpad の Windows へのつなぎかたは既に色々なところで書かれているとおり、Bootcamp のドライバーを入れる方法で全く問題なく動きました。
Apple Wireless Keyboard の方ですが、まずは AppleK Pro を使ってみたのですが、インストール直後は動くのですが、再起動後はそもそも立ち上がらなく利用できませんでした。あと、試してみて気がついたのですが、これは Mac のキーボードを Windows で Windows のキーボードらしく使うのではなく、Windows で Mac らしく使うためのものなんですね。なのでたとえ動いていたとしても継続して使ってたかは謎ですね。
次に有名な Apple Wireless keyboard Helper を使ってみたのですが、ダウンロードできるバイナリでは認識できませんでした。どうやらキーボードのIDが違ってるらしく自分でソースをいじらないとダメっぽいです。で、ソースをいじったら問題なく利用できました。もちらん Metro 側でも動いてます。管理者モードでも大丈夫です。
で、ちょっと他になにかないかなと思って検索してると以下のようなものを見つけました。
Apple Wireless Keyboard
これを試してみたところ一発でキーボードを認識して(中のコードを確認したらIDに頼らない感じで書かれてました)、若干の問題はあったのですが動くことは動きました。で、なかのコードを読むと意外と綺麗に書かれていて読みやすかったので、自分でカスタマイズしやすそうだったので、こちらを使うようにしました。
いまのところ Apple Wireless Keyboard も Magic Trackpad も快適に使えてます。これが製品版まで無事に使い続けられると嬉しいのですが。
