【Windows 10アプリ】Hello worldアプリを作ってみる
最初のアプリ
前回までで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 "Hello"" 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の下に配置されています。
横表示
横表示だとTextBlockはTextBoxの右に表示されています。 ちゃんとVisualStateManagerによる見た目の変更が効いていることがわかります。
まとめ
今回は最初のアプリとしてすごくシンプルなアプリを作ってみました。 実際にコーディングしたロジックがエミュレータや実機上で動くのを見ると楽しいですね!
今回は以上っす。
【Windows 10アプリ開発環境構築】 Visual Studioをインストール
はじめに
前回はMacにParallelsをインストールしてWindows 10の仮想マシンを作成しました。 今回はWindows 10にVisual Studioをインストールします。
Visual Studioのエディション
Visual Studio(以下、VS)には幾つかのエディションがあります。 今回は無料のVisual Studio Community(以下、VSC)をインストールしましょう。 VSCはこちらからダウンロードできます。
言語で日本語、形式はWebインストーラーを選択し、「ダウンロード」をクリックします。
「vs_community_JPN.exe」がダウンロードされるのでダブルクリックします。
セキュリティ警告が出ますが「実行」をクリックします。
インストールの種類で「カスタム」を選択して「次へ」をクリックします。
「ユニバーサル Windows アプリ開発ツール」を選択して「次へ」をクリックします。
「インストール」をクリックします。
ユーザーアカウント制御の画面が表示されるので「はい」をクリックします。
インストールが始まります。しばらく時間がかかります...
インストールが完了しました!マシンを再起動しましょう。
まとめ
これでWindows 10アプリを開発する環境が整いました! Visual Studioのインストールは少々時間がかかりますがじっと待ちましょう。
参考
【Windows 10アプリ開発環境構築】 Mac上にWindows 10環境を準備する
はじめに
普段は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のトライアル版をダウンロードします。
メールアドレスを入力して、「ダウンロードに進む」をクリックします。
「ダウンロード」をクリックします。
dmgファイルがダウンロードされるのでダブルクリックします。
使用許諾契約に同意します。
インストールをクリックします。
管理者名とパスワードを入力します。
カスタマエクスペリエンスプログラムでは「いいえ」を選択しました。
サインイン画面が表示されます。今回はFacebookでサインインしました。
「 14日間の無償トライアル」をクリックします。
「Standardのトライアル」をクリックします。
Windows 10の購入〜仮想マシンの作成
ParallelsがインストールできたのでここからWindows 10を用意して仮想マシンを作成します。 今回はWindows 10 Proのダウンロード版を購入します。 購入作業はParallelsのウィザードからシームレスに行えます。
「MicsosoftからWindows 10を入手」をクリックします。
「Windows 10 Proを購入」をクリックします。
Microsoftストアが開くので「ログインして購入」をクリックします。
購入完了。「ダウンロード」をクリックします。
エディションで「Windows 10」を選択します。KNやNなどのエディションについてはこちらの記事を参照してください。
「64-bit のダウンロード」をクリックします。
isoファイルがダウンロードされます。
Parallelsのウィザードに戻ってダウンロードしたisoファイルをドラッグアンドドロップして続行をクリックします。
購入完了画面もしくは購入完了時に送られてくるメールにあるプロダクトキーを入力して続行をクリックします。
「Windows の主な用途」では「業務用ツール」を選択しました。
「名前と場所」はデフォルトのまま続行をクリックします。
仮想マシンの作成が始まります。
Windowsがインストールされます。
あと一歩です!
インストールが完了しました!!
まとめ
Parallelsのウィザードに従って進めていけばスムーズにWindows 10環境を構築することができました。 次回はVisual Studioをインストールしたいと思います。
参考
KATANA 01が届いた!
はじめに
注文しておいたFREETELのKATANA 01が届いたので早速開封してみました。
パッケージ
側面はこんな感じでシンプルでいいですね。 ちゃんとWindows 10のロゴも入っています。
正面はこんな感じ。
裏蓋
背面のフタは本体と別の形で入っていました。
スタートアップガイド
紙が1枚入っていました。 こちらはSIMカードの挿し方などが載っていました。
背面
KATANA 01はデュアルSIMなのでSIMの挿し口が2つあります。 ただしSIM2は2G専用なので海外用となります。 今回はしばらくWi-Fi運用を想定しているのでSIMは差しません。
起動していくつかアプリを入れてみた
起動してストアからTwitterなどのアプリをいくつか入れてみました。
初めてのWindows Phoneなのでこれから色々触ってみたいと思います。
AWS 認定ソリューションアーキテクト-アソシエイト (ASA) に合格しました
転職して1ヶ月経ちました
気がついたら転職してから1ヶ月が経ちました。 ここでこの1ヶ月を振り返ってみます。
※前職との比較はしません。なぜなら会社の規模も文化も違うため比較することに意味がないからです。 ここではあくまで今の会社について言及します。
仕事
10月からクラスメソッドで働いています。 現在は主にリリースしたiPhoneアプリの改修をやっています。 あとは会社の文化でもあるブログを書いたり、勉強会に参加したりです。 仕事で使うツール(CharWork、Slack、Backlog、Goole Appsなどなど)がたくさんあるので最初は覚えるのが大変でしたが徐々に慣れてきました。 慣れって恐ろしいですね。
ブログ
多い人は月に数十本とか書いてます。 私はそこまでではないですが書ける時に書いていこうと思います。 内容は自分が業務を通じて身につけたノウハウでも、趣味で勉強したことでもいいんです。
勉強会
クラスメソッドは積極的に各種勉強会(iOS、Android、AWSなどなど)をやっています。 主催の場合もあれば他社と合同の場合もあります。 いずれにしても勉強会は自分にとっても刺激になるので楽しいです。
会社の雰囲気
会社の雰囲気は実際にその会社で働いてみないとわからない部分だと思いますし、 人によって受け取り方も違うと思うのであくまで私の感想ですが、クラスメソッドの会社の雰囲気はすごく良いです。 わからないことは聞けば誰かが相談に乗ってくれますし、「自分はこれがやりたいです!」と言いたいことは主張できる環境があります。 人間関係も非常にフラットです。 なのでそういうのを望んでる人にとっては最高の環境だと思います。
今後について
引き続きiPhoneアプリの仕事をしていきます。 もちろんブログも書いていきます。 いつか(近いうち?)勉強会でも登壇しなきゃと思います。
最後に
そんなクラスメソッドですがまだまだ人が不足していて積極採用中です! こちらから応募してみてはいかがでしょうか?
よろしくお願いします。