変身

ななふぉさんのところで、何やら面白いことが出来るようになったという記事が挙がっていたので、さっそく試してみました。
 以下、MTG成分濃厚な画面キャプチャです。

欲深きドラゴン
(ウルザズ・サーガ)

パッケージイラスト
(エルドラージ覚醒より、真実の解体者コジレック)

解放されしもの、カーン
(新たなるファイレクシア)

パッケージイラスト
(新たなるファイレクシアより、核の占い師ジン=ギタクシアス)

大修道士、エリシュ・ノーン
(新たなるファイレクシア)

ファイレクシアの非生
(新たなるファイレクシア)

 いいですねーこういうの。
 WP7ではタイル画面のカスタマイズはあまり望んでいませんでしたが、やはりこういうことが出来るとちょっと楽しいですね。もっとセンスある人ならいいのを作ってくれるんでしょうけど。(私なんかは画像はりつけただけですんで、ほんと)
 普段のメトロなタイルに飽きてきたときなどに、ちょっとした気分転換としては十分楽しめそうです。

 ただまぁこれがメトロかと言われたら……まぁ、お遊び要素ですし。

 あと、濃厚なMTG成分だけではアレなんで、女の子の画像も貼り付けておきましょうか。

  

 可愛い女の子かと思った? 残念!さやかちゃん(オクタヴィアセット)でしたー!


アーッ!指が変に!

小悪疫

Windows Phone Advent Calendarの記事で書いた、本来投稿するはずだったWP7ミニTipsを、折角なのでここで放出しておきます。

証明書をWebブラウザからインストールする方法

 最近、社内でのスマフォ使用に関してセキュリティ絡みの調査や提案書の資料作りなどをしていたのですが、そのときに私の個人的な願望で無理やりWP7も検討対象としていたときに気付いた話。
 企業のLANにアクセスするときに独自の証明書などをPCにインストールして接続させる、という運用をしている会社はそれなりに多いと思います。うちの会社もそのタイプです。なので、スマフォで社内LANにアクセスする場合にも証明書が必要になります。
 PCならばブラウザ経由で証明書ファイルにアクセスすれば、そのままインポート画面が出てきて、入れるだけです。
 WP7も標準的な証明書ファイル(cerとか)には対応しているので、同様の手段でブラウザでアクセスすると……。

 (画像はぼかしてます)
 こんな風に、何故か文字列として認識されてしまい、うまくインストールできません。バグ?
 どうやらこれは、cer形式ファイルのときだけ発生するようです。詳しくはMS安納さんのこの記事を参照。
 というわけで、WP7に証明書を配布するときは電子メールを使いましょう。

 面倒ですね。
 なので解決策です。

 簡単です、Zip形式に圧縮して置いておけばいいのです。
 ブラウザ経由でZipファイルにアクセスすると、それがパスワードなどかかっていなければ解凍して中身を見ることが出来ます。この方法でCERファイルにアクセスすると、通常通りに証明書のインポート画面が出てきます。この方法ならばブラウザ経由でインポートすることが可能です。

 多分これは安納さんも知らない方法じゃないかしら?先日お話したときには、電子メール経由で送ればCERファイルでもインストール出来るというのも気付いていなかったようなので。

 というわけで、こんな簡単なミニTipsで終わらせる予定でした。
 が、皆さん気合入りまくってたようで、記事のレベルが高かったので、これだけで終わらせるとやばいなと思って、あんな記事になりました。直前までネタの用意が出来てなかったので、大慌てでした……。
 でもこういうイベントがあるのは楽しいですね、またこういうのがあれば参加してみたいものです。


大きな損失は、えてして衝撃を麻痺させるものだ。犠牲者を真の苦痛へと追い詰めるのであれば、細かな苦痛を大量に浴びせなければならぬ。
――アーボーグのラタドラビック

頭の混乱 (PanoramaやPivotのヘッダ文字サイズを変更する)

日替わりでWP7に関することでBlog記事を書くというイベント、Windows Phone Advent Calendarに参加してみました。私の担当は11日目で、この記事がそうです。

 最初は本当に簡単な、「1へぇ」がもらえるかどうかレベルのこと書いて終わりにするつもりだったのですが、他の参加者の方々の記事が思いのほかレベルが高く、慌てて技術系の記事を用意した次第です。

 では本題。
 WP7アプリを作ったり使ったりしてて、たまに、Pivotヘッダーのタイトル部分が大きすぎるなぁと思うことがあります。下の画像で言うところの、「最初」「2番目」に該当する部分です。

 デザインだと言われればそれまでなんですが、アプリによっては情報表示量が減ってしまってあまり嬉しくないこともあります。例えば私の「なな字引」なんかも最近、ちょっとヘッダのでかさが邪魔になってきました。
 同様の問題が、Panoramaアプリでもいえます。

 Panoramaなんかだと、タイトル自体(画像では マイ …となって見切れてるやつ)もでかいですし、その下の各ページにあるリストのタイトル(最初の項目となってるやつ)も中々の大きさです。
 しかしPanoramaの場合は、これらを簡単に修正してやることが出来ます。
ExpressionBlendなどでソリューションを開き、カスタムテンプレートとしてサイズをいじってやるだけなのです。例えばタイトルの文字の大きさは、Panoramaコントロール自体を右クリックし、[テンプレートの編集] ⇒ [コピーして編集] と選択します。

 その後、TitleLayerを選択した後に、プロパティウィンドウからテキストの項目にある、フォントサイズを好きな値に変更してやるだけです。ついでに位置の調整も行えば、ほらこの通り。

 リストのタイトルについてもほぼ同様。
 PranoramaItemを選択して右クリックし、[テンプレートの編集] ⇒ [コピーして編集] と選択します。今度は header オブジェクトを選択し、またフォントサイズを変えてやるだけです。ね、簡単でしょう?
 

 では、Pivotのヘッダーも同じようにササッと直しちゃいましょう。
 やはりExpressionBlendでソリューションを開き、Pivotオブジェクトを選択して右クリック、、[テンプレートの編集] ⇒ [コピーして編集] と選択します。
 オブジェクトを見ると……ふむ、この HeadersListElement というのが名前的にそれっぽいですね。こいつのフォントサイズを弄ってしまいましょう。

 ところが、あれ、なんか変わってない……?

 ならばPivotItemのほうだ、と思ってやってみても、そちらにも該当しそうな項目は見当たりません。ある程度調べてみましたが、どうやらPivotのヘッダ文字の大きさをExpressionBlendで簡単に変えることは出来ないようです。
 また、公式のPDFファイル(PDFが開きます)によれば、Pivotのヘッダ高さは固定されており、変更できないとしっかり定義されておりました。

 しかし現実には、Twitterアプリの「Amelloides」や「moTweet」のように、Pivotヘッダの文字サイズを変更しているものがあります。どうやっているのでしょう?

 実際にこれらアプリがどうやっているのかは作者しか知りませんが、実は以下のような方法で変更する方法は存在します。XAMLファイルを自分自身で書いてやればいいのです。この方法はある程度XAMLについての知識がある人でないと厳しい方法です。

 まず、以下にPivotの中に2つのPivotItemを持つ、標準的なソースを示します。

——————————————————–


<!--ピボット コントロール-->
<controls:Pivot Title="マイ アプリケーション">
<!--ピボット アイテム 1-->
<controls:PivotItem Header="最初">
<!--テキストの折り返しを行う 2 行リスト-->
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>

<!--ピボット アイテム 2-->
<controls:PivotItem Header="2 番目">
<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</controls:Pivot>

——————————————————–

 うん、超絶見難いですね。
 重要な場所だけ抜き取ります。それが以下です。

——————————————————–


<!--ピボット アイテム 1-->
<controls:PivotItem Header="最初">
<!--テキストの折り返しを行う 2 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>

<!--ピボット アイテム 2-->
<controls:PivotItem Header="2番目">
<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>

——————————————————–

 なんかここにFontSize属性とか追加してやればいけそうな気もするんですが、やっぱダメです。
 この部分を思い切って、以下のように書き換えちゃってください。

——————————————————–


<!--ピボット アイテム 1-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="最初" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>

<!--テキストの折り返しを行う 2 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>

<!--ピボット アイテム 2-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="2 番目" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>

<!--テキストの折り返しを行わない 3 行リスト-->
<ListBox ...省略>
</ListBox>
</controls:PivotItem>

——————————————————–

 多分エラー扱いされると思いますが、問答無用でリビルドしてみましょう。エラーは消えたと思います。
 こうすることでヘッダー部分をTextBlockに変えることが出来ます。
 あとはこのTextBlockのフォントサイズを弄ってやると……。

  

 こんな具合に文字サイズを小さくすることが出来ました。また、それぞれのヘッダのサイズを別々にすることも可能です。
 あとは位置とかを適切に調整してやれば、OKです。

 以下に、またえらく見難いですけど全体ソースを貼っておきます。

——————————————————–


<!--ピボット コントロール-->
<controls:Pivot Title="マイ アプリケーション">
<!--ピボット アイテム 1-->
<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="最初" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>

<controls:PivotItem>
<controls:PivotItem.Header>
<ContentControl>
<TextBlock Text="2 番目" FontSize="36" />
</ContentControl>
</controls:PivotItem.Header>

<ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>

</controls:Pivot>


——————————————————–

 以上です、如何でしたでしょうか?
 私自身もXAMLとかはまだ勉強不足で、解説できるほどの腕前は持っていないですが、少しでも皆さんに知識を共有していただければと思って書いてみました。
 それと最後に、重要なことですが、この記事は 「名前はまだない」様のメモのコンテンツを参考にして(というかパクって)書かせていただきました。なので、知ってる人は既に知ってる内容だったかもしれません。


あんたのそのちっぽけな魂をぎゅっと絞ってやる。スポンジみたいにさ。
――アーボーグの妖術使い