2015-12-30

【Windows 10アプリ】スタイルを適用してボタンの外観をカスタマイズする

今回はボタンにスタイルを適用して見た目をカスタマイズする方法をご紹介します。

まずはボタンをいくつか並べましょう。新規でユニバーサルアプリのプロジェクトを作成した際にデフォルトで存在するGridの中に3つボタンを配置しました。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.307,0.5">
    <Button x:Name="button1" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button2" Content="Button 2" HorizontalAlignment="Left" Margin="10,47,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button3" Content="Button 3" HorizontalAlignment="Left" Margin="10,84,0,0" VerticalAlignment="Top"/>
</Grid>

プレビュー画面の見た目はこんな感じ。 f:id:katoj:20151230175204p:plain

味気ないですね...それではこれらのボタンの背景色と文字色を変更してみましょう！とは言っても簡単で、PageのResourcesプロパティにスタイルを定義するだけです。

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>

ポイントとしてはStyleのTargetTypeでスタイルを適用するコントロールの型（今回はボタン）を指定する必要があります。型を指定しないとSetterで指定しているコントロールのプロパティが認識されずにエラーとなります。

上記のスタイルではボタンの背景色を緑、前面色（文字色）を白にしてみました。スタイルを適用した結果下記のようになります。

f:id:katoj:20151230180052p:plain

ちゃんとスタイルが適用されていますね！

2015-12-29

【読了】スクラム　仕事が４倍速くなる“世界標準”のチーム戦術

読了スクラム

www.amazon.co.jp

タイトル通りスクラム本を読んだ。この本は会社の先輩にスクラムについて勉強したいと相談したところ薦められた本だ。

著者がスクラムの提唱者であるだけにスクラムの概念について深く学べる。

今の会社は開発にスクラムを導入していて、スタンドアップミーティングやタスクボードによる進捗共有などを実際に行っているが、プロダクトオーナー、スクラムマスターの役割など、これまでなんとなくの知識だった部分がこの本のおかげで明確になったように思う。

ただし、スクラムはあくまで「限られた時間を有効活用し、価値を最大にするフレームワーク」であり、「スクラムだから〜しなければいけない」といった、考え方を1つに固定させる、あるいは縛りつけるような使い方は本末転倒だと思った。

2015-12-14

【Windows 10アプリ】Hello worldアプリを作ってみる

Windows Windows 10 Mobile Visual Studio プログラミング

最初のアプリ

前回まででWindows 10アプリを開発する環境が整ったので一番最初のアプリを作ってみたいと思います。とは言っても一番最初なのでHellow world的なアプリを作ってみます。 Windows デベロッパーセンター内に"Hello, world" アプリを作成する (XAML)という記事を見つけたのでやってみました。 TextBoxが1つあり、そこにテキストを入力するとTextBlockに「Hello, {入力した文字列}!」と表示するだけのシンプルなアプリです。

UIの編集

空のプロジェクトを作成するとMainPage.xamlというファイルが作成されます。ここにUI部品を貼り付けていきます。記事では最終的に下記のような構造となっています。

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                        <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="contentPanel" Margin="8,32,0,0">
            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>
            <TextBlock Text="What's your name?"/>
            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
                <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>
                <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput"/>
        </StackPanel>
    </Grid>
</Page>

この中で重要なところはVisualStateManagerを使用して見た目を変更していることでしょうか。ウィンドウ幅が641px以上の場合は特に見た目を変更しません。 StackPanelタグ内に記述した通りに表示されます。一方、ウィンドウ幅が0px以上640px以下の場合はinputPanelというStackPanelのOrientationプロパティをVerticalにし、ボタンの上マージンを設定しています。

ボタンクリック時のイベントを実装

見た目ができたので後はボタンがクリックされた時の処理を記述します。 inputButtonのプロパティウィンドウのClickイベントハンドラーに「Button_Click」と入力してEnterキーを押すとMainPage.xaml.csファイルに空のButton_Clickメソッドが追加されるのでその中に処理を記述します。最終的に下記のような実装となりました。

private void Button_Click(object sender, RoutedEventArgs e)
{
    greetingOutput.Text = "Hello, " + nameInput.Text + "!";
}

TextBoxに入力された文字列を使って文字列を整形し、TextBlockに表示しているだけですね。

エミュレータで動かしてみる

アプリが出来たのでモバイルエミュレータで動かしてみましょう。 6インチのエミュレータで動かしてみます。

縦表示

縦表示だとTextBlockがTextBoxの下に配置されています。 f:id:katoj:20151214002205p:plain

横表示

横表示だとTextBlockはTextBoxの右に表示されています。ちゃんとVisualStateManagerによる見た目の変更が効いていることがわかります。 f:id:katoj:20151214002219p:plain

まとめ

今回は最初のアプリとしてすごくシンプルなアプリを作ってみました。実際にコーディングしたロジックがエミュレータや実機上で動くのを見ると楽しいですね！

今回は以上っす。

2015-12-07

【Windows 10アプリ開発環境構築】 Visual Studioをインストール

Windows Windows 10 Mobile Visual Studio

はじめに

前回はMacにParallelsをインストールしてWindows 10の仮想マシンを作成しました。今回はWindows 10にVisual Studioをインストールします。

Visual Studioのエディション

Visual Studio（以下、VS）には幾つかのエディションがあります。今回は無料のVisual Studio Community（以下、VSC）をインストールしましょう。 VSCはこちらからダウンロードできます。

言語で日本語、形式はWebインストーラーを選択し、「ダウンロード」をクリックします。 f:id:katoj:20151206223927p:plain

「vs_community_JPN.exe」がダウンロードされるのでダブルクリックします。 f:id:katoj:20151206224025p:plain

セキュリティ警告が出ますが「実行」をクリックします。 f:id:katoj:20151206225820p:plain

インストールの種類で「カスタム」を選択して「次へ」をクリックします。 f:id:katoj:20151206224142p:plain

「ユニバーサル Windows アプリ開発ツール」を選択して「次へ」をクリックします。 f:id:katoj:20151206224209p:plain

「インストール」をクリックします。 f:id:katoj:20151206224308p:plain

ユーザーアカウント制御の画面が表示されるので「はい」をクリックします。 f:id:katoj:20151206224320p:plain

インストールが始まります。しばらく時間がかかります... f:id:katoj:20151206224331p:plain

インストールが完了しました！マシンを再起動しましょう。 f:id:katoj:20151206234807p:plain

まとめ

これでWindows 10アプリを開発する環境が整いました！ Visual Studioのインストールは少々時間がかかりますがじっと待ちましょう。

参考

MSDN Blogs

2015-12-06

【Windows 10アプリ開発環境構築】 Mac上にWindows 10環境を準備する

Windows

はじめに

普段はMacを使っていますがKATANA 01を購入したこともあり、Windows 10アプリの開発環境を構築してみようと思います。

現在の開発環境

Macのスペックはこんな感じです。

MacBook Pro (Retina, 15-inch, Mid 2015)
プロセッサ 2.5GHz Intel Core i7
500GB フラッシュストレージ
メモリ 16GB

仮想化ソフトウェアのインストール

まずはMac上でWindowsを動かすために仮想化ソフトウェアをインストールします。仮想化ソフトウェアは幾つかありますが、今回は評判の良いParallelsのトライアル版を使ってみます。良さそうだったら購入しよう(๑•̀ㅂ•́)و✧ こちらからParallels Desktop 11 for Macのトライアル版をダウンロードします。

メールアドレスを入力して、「ダウンロードに進む」をクリックします。 f:id:katoj:20151206204415p:plain