App Studio

https://appstudio.windowsphone.com/

個人的な感想

結論から書くと、この App Studio はモバイル向けのアプリケーションを作る上での流れをつかむうえで、とても良いサービスなのかなと感じました（Windows Phone アプリやWindows ストアアプリに限らず）。特に初心者におすすめですが、完成したアプリはユニバーサルアプリとしてのソースコードをダウンロードできるので、これをベースに機能を付け加えていくということもできるので、様々な活用の方法があるのではないでしょうか。

全体の流れ

基本的に上のメニューの流れです（アプリ開発の画面で出てくるので、後ほど解説します）。一般的なアプリ開発の流れに沿っていると思います。そんなにカスタマイズしなければ、本当に 5 分程度で RSS リーダーは作れてしまいます。

1. プロジェクトを作る
2. コンテンツを決める
3. テーマ（デザイン）を決める
4. アイコン（アプリの顔）を設定する

5. 公開に必要な情報を決める
6. 完了！

順次やっていきましょう。

準備

App Studio (https://appstudio.windowsphone.com/) にアクセスすると、以下のような画面が出てきます。右上の「Start New Project」から始めます。

ログインするように求められるのでログインします。

プロジェクトを作る画面がこちらです。いくつかのサンプルアプリのプロジェクトが用意されています。

今回はゼロから作ってみたいので、「Empty App」を選びます。（もっといろいろな作り方を知りたい場合は、サンプルアプリをベースに作ってみるのも良いと思います）

Empty App を選ぶと、確認画面が出てくるので、[Create] を選んで次に進みます。プレビューに表示されている、この空のアプリケーションをどんどんカスタマイズしていきます。

そして以下の画面が開発のメイン画面です。ここから開発を進めていきましょう！

コンテンツを決める

アプリにとって何よりコンテンツが王様です。どのようなコンテンツを表示するかで、アプリの価値はほぼ決まると言ってもいいでしょう。なのでどのようなコンテンツを表示するかを決める画面がこちらになります。

左側にはプレビューが、右側にはコンテンツの設定画面が出ています。

何はともあれ、左上のタイトル表示を変えてみましょう。標準だと「Empty App」という名前が入っています。今回はこれを「RSS リーダー」に変更してみました。

Windows Phone のプレビュー画面も変わるのが確認できるかと思います。

次にメインコンテンツである RSS を追加してみます。画面右側の Basic Section の中にある RSS というアイコンをクリックします。

すると RSS の設定を行う以下のような画面が出てきます。とはいえ、名前と URL を指定するだけです。今回は私のこのブログを表示してみます。終わったら [Create] を押します。

すると RSS がプレビュー画面に表示されます。プレビュー画面はタッチのエミュレートもできますよ！

ちなみに左下の [Windows Preview] というボタンを押すと、Windows ストアアプリ版のプレビュー画面が出てきます。ストアアプリ版は画面が大きいのでポップアップの中に表示してくれます。

ここまで確認できれば画面右上の [Save] ボタンを押して保存してください。保存しないと設定が消えてしまいます。

グレーアウトされれば保存されています。

※今回は RSS だけの表示にしてみますが、2個目の RSS を表示したり、Facebook の情報なども表示でき、最大 6 画面まで設定できるようになっています。画面の切り替えは横スクロールで行えます。

以上でコンテンツの設定は完了です。

テーマ（デザイン）を決める

次にテーマ（デザイン）の設定です。画面上部のメニューから [Theme] をクリックします。

すると以下のような画面が表示され、テーマの設定を行えるようになります。

標準だと「Dark Style」が選択されていますが、ちょっと味気ないのでデザイン変更しておいたほうが良いかと思います。「Custom Style」を選択しましょう。

アプリバーのスタイルを変えてみます。[Application Bar] の右側にあるカラーパレットから色を選択できます。

次に背景も画像に変更してみます。[Background Image] のチェックボックスにチェックを入れます。

背景画像の選定をします。そのためアップロードボタンを押します。

すると以下のような画面が出てきます。自分のコンピュータの中の画像や OneDrive の画像から選べますが、とりあえず一番右の App Studio Garelly にたくさんの画像があるので、こちらから選ぶと楽です。

様々な画像が表示されるので、好きな画像を選択し、[Select] を押して決定します。

背景画像がプレビュー画面に反映されているのを確認したら [Save] します。[Windows Preview] も選択して、Windows ストアアプリだとどのような表示になるのかも確認しておきましょう。

次は Tiles に移ります。

タイルを決める 

タイルはアプリの顔となるものです。魅力的であればあるほどアプリの起動頻度が高まります。いくつかのテンプレートがありますので、今回はFlip template で進めてみます。

文字を入力するところは [Title], [Back title], [Back content] の3種類、そしてその他のグレーの四角には画像を挿入できます。文字を入力してみて、プレビュー画面が変わるのを確認しながら進め、次に画像は App Studio resources から適切なものを選んでみてください。

変更したら [Save] しましょう。

次は Publish Info です。

公開情報を設定する

Publish Info からは公開のための情報を設定していきます。まずはアプリの名前と説明を変えておきます。

言語は日本語に変更しておきます。

インターネットを使うアプリは、プライバシーポリシーの設定も忘れずに。

[Save] して完了です。

以上でアプリは完成です！ [Finish] を押して完成させましょう。

最後の確認 

最後の確認画面ではプレビューが二つ表示されています。タッチのエミュレートもされているので、一度触ってみてください。

触ってみて変更が必要そうだったら、上のメニューから [Content], [Theme], [Tiles], [Publish Info] を選択して変更してみてください。

問題なければいよいよいアプリの作成です。画面右下の [Generate] を押してください。

このような画面が出てきたら、次は [Windows Phone 8.1 and Windows 8.1] （右側）を選択して、[Generate] してください。

Generating… という画面表示に切り替わります。このまま少しお待ちいただければアプリが完成します。

完成すると、以下のような画面が出てきます。

Windows 8.1 のアプリをインストールしてみたいので、まず Prerequisites から [Install Windows 8.1 Certificate] を選択し、Zip ファイルをダウンロードします。

Zip ファイルを解凍すると、4つのファイルが入っています。

Add-RootCertificate.ps1を右クリックして [PowerShell で実行] しましょう。管理者権限が求められるので指示に従って進みます。

次に Installable Package をダウンロードします。こちらも [Windows 8.1 installable package] のリンクから Zip ファイルをダウンロードします。

StoreApp.zip を回答すると以下のファイルが見つかります。

Add-AppDevPackage.ps1を右クリックして、こちらも [PowerShell で実行] を行います。するとインストールが開始されます。

インストールが完了するとアプリ一覧に追加されています。起動して動くかどうか確認してみてください！

さらに編集を加えたい方はソースコードをダウンロードして編集することも可能です。

上記のステップで完成です。手順の説明が長くなってしまったので、長そうに見えますが、慣れれば 5 分もかからず RSS リーダーを作れます。

是非試してみてください。 

■ VS100-086 このショートカットがすごい！ Visual Studio の便利なキーボードショートカット by 馬田 隆明

マウスとキーボードを行き来するのは非常に面倒。そんなときキーボードショートカットを覚えておけば、多くの操作をキーボードから手を離さずに行うことができます。
このビデオでは、覚えておくと便利な C# 用のキーボードショートカットを説明します。

■ VS100-087 続このショートカットがすごい！ Visual Studio の便利なキーボード ショートカット by 馬田 隆明

Ctrl + K から派生するショートカットがいくつかあります。
コメントアウトやブックマークなど、意外とよく使う機能のキーボードショートカットを「Ctrl + K」をキーワードに覚えておきましょう。

■ VS100-088 Visual Studio のブックマーク機能を使う喜びはあった by 馬田 隆明

ブックマーク、意外と使っていない人も多いんじゃないでしょうか。ブックマークを使えば、気になるところにすぐに戻ってくることができます。
今回はブックマークの作り方と使い方について紹介します。

■ VS100-089 やったぜ。「TODO」でタスク管理 by 馬田 隆明

やるべきことをのちの自分のために残しておきたい。やり終えたことを確信したい。そういうときにタスク機能を使えば、コメントよりも楽にタスクを管理することができます。
本ビデオではタスク機能の解説と、コメントアウトと連動した便利な使い方を解説します。

■ VS100-090 VS でも蛇使い！ Python Tools for Visual Studio の紹介 by 馬田 隆明

Python Tools for Visual Studio (PTVS) を使えば、Visual Studio はその優れた機能と操作性をそのままに Python の開発環境へと早変わりします。
今回は Python 好きな皆さんに贈る PTVS の入門ビデオです。

Semantic Zoom を試したいなーと思って Semantic Zoom のタグ <SemanticZoom> を XAML に書いてみたところ、なんかうまく表示されない……という方がいらっしゃると聞きました。ということで簡単にやるコツを紹介します。

まずはグリッドテンプレートを作りましょう。GroupedItemsPage.xaml で試してみます。

以下のような Grid タグがあります。

 <Grid Style="{StaticResource LayoutRootStyle}">
 <Grid.RowDefinitions>
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 

この下に Semantic Zoom のタグを書いていきます。

 <SemanticZoom>
 <SemanticZoom.ZoomedInView> 
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 </SemanticZoom.ZoomedOutView> 
 </SemanticZoom> 

青い波線が出て、値を入れるよう指示されますので、すぐ下にある GridView のタグをそのままコピーしてみましょう。

<SemanticZoom>
 <SemanticZoom.ZoomedInView>
 <GridView
 x:Name="itemGridView" ... 
 </GridView>
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 <GridView
 x:Name="itemGridView2" ... 
 </GridView>
 </SemanticZoom.ZoomedOutView>
 </SemanticZoom>

名前が重複するのでふたつめの itemGridView を itemGridView2 とでも直しておきます。

通常はここで実行してみると Semantic Zoom が出てくるはず……と思われると思うのですが、出てきません。

これには理由があって、最初の Grid の定義を見てみると、二つの Row が定義されています。そして今の状態だと Height が 140 に設定されてある、ページ上側の狭い Raw に Semantic Zoom が表示されていることになります。

これを解決するには、Semantic Zoom の RowSpan を設定するだけで OK です。(GridView もよく見るとそうしています)

なので、Semantic Zoom のタグを

 <SemanticZoom Grid.RowSpan="2">

 ...
 </SemanticZoom>  

と RowSpan を設定して実行すると Semantic Zoom がきちんと見えるようになります。

あとは ZoomedOut か ZoomedIn の GridView の ItemTemplace を換えればさらに分かりやすくなると思います。

ということで簡単に Semantic Zoom を試す Tips でした。

（画像は Office.com から取ってきました。）

このような配置を簡単に実現するには、GridView の Header を使えば簡単に実現可能です。

 <GridView
 x:Name="itemGridView"
 AutomationProperties.AutomationId="ItemGridView"
 AutomationProperties.Name="Grouped Items"
 Grid.RowSpan="2"
 Padding="116,137,40,46"
 ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
 ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
 SelectionMode="None"
 IsSwipeEnabled="false"
 IsItemClickEnabled="True"
 ItemClick="ItemView_ItemClick">
 <GridView.Header>
 <StackPanel>
 <Image Source="xxx" />
 </StackPanel>
 </GridView.Header>
... 

と、GridView.Header の中に XAML を書いていくだけで、最初に画像を置くような、先ほどの配置が可能になります。

大きなニュースなどを最初に置きたい場合は、このように Header を使えば簡単に実現できます。

こんな感じで Tips 記事を連載していければなと思っています。

NewsAppCS.zip

同様のことを Windows 8 で行う場合、ScrollViewer の ViewChanged イベントを使って実装できます。

ただ、GridView を使う場合、ScrollViewer の ViewChanged を触るためには、以下の方法を使う必要があります。

Grid テンプレートを使う場合、まず GroupedItemPage.xaml を開いていただき、GridView (標準では x:name = ItemGridView となっています) の中にstyle=”{StaticResource GridViewStyle1}” と追記いただき、そのページのリソース部分に、以下のタグをご記入ください。  

 <Style x:Key="GridViewStyle1" TargetType="GridView">
 <Setter Property="Padding" Value="0,0,0,10"/>
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="TabNavigation" Value="Once"/>
 <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
 <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
 <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
 <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
 <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
 <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
 <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
 <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
 <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
 <Setter Property="IsSwipeEnabled" Value="True"/>
 <Setter Property="ItemContainerTransitions">
 <Setter.Value>
 <TransitionCollection>
 <AddDeleteThemeTransition/>
 <ContentThemeTransition/>
 <ReorderThemeTransition/>
 <EntranceThemeTransition IsStaggeringEnabled="False"/>
 </TransitionCollection>
 </Setter.Value>
 </Setter>
 <Setter Property="ItemsPanel">
 <Setter.Value>
 <ItemsPanelTemplate>
 <WrapGrid Orientation="Vertical"/>
 </ItemsPanelTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="GridView">
 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
 <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" ViewChanged="OnViewChanged" >
 <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
 </ScrollViewer>
 </Border>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
 

これはGridViewのテンプレートを、ハイライトの部分だけ変更したものになります。

(GridView のテンプレートを確認するには、Blend を開いていただき、itemGridView を右クリックして [テンプレートの編集] -> [コピーして編集] で確認いただけます)

次に ViewChangedイベントを取って以下のように処理することで右端まで行ったかどうかを判別することができます。

 private async void OnViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
 {
 var sv = GetChild<ScrollViewer>(itemGridView);
 
 if (sv != null)
 {
 var horizontalOffset = sv.HorizontalOffset;
 var maxhorizontalOffset = sv.ExtentWidth - sv.ViewportWidth;
 
 if (maxhorizontalOffset < 0 || horizontalOffset == maxhorizontalOffset)
 {
 pageTitle.Text = "右端まで行きました";
 }
 }
 }
 
 private T GetChild<T>(DependencyObject obj) where T : FrameworkElement
 {
 var count = VisualTreeHelper.GetChildrenCount(obj);
 for (int i = 0; i < count; i++)
 {
 var child = VisualTreeHelper.GetChild(obj, i);
 if (child is T)
 {
 return child as T;
 }
 
 var result = GetChild<T>(child);
 if (result != null)
 {
 return result;
 }
 }
 return null;
 }
 

 以上です。

Windows 8、皆さんインストールされていますでしょうか。「まだ」という方のために、パーティションを切ってインストールする方法を解説させていただきます。OS インストール済みのハードディスクからパーティションを新たに作成することによって、現行の OS と環境を維持したまま、新たなパーティションに Windows 8 をインストールできるようになります。

今回の記事ではパーティションの切り方を説明させていただきます。またこの方法は Windows Vista 以降の Windows で可能です。スクリーンショットは Windows 7 で撮っています。

1. Windows キーを押し、スタートメニューを出して、「パーティション」と入力します。すると「ハードディスク パーティションの作成とフォーマット」というプログラムが出てきますので、クリックします。

2. [ディスクの管理] が起動します。

3. C ドライブを右クリックし、[ボリュームの縮小] を選択します。

4.  ウィザードが起動します。縮小後のサイズを指定します。現在の半分以下にはできないので、ご注意ください。またできるだけ大きめのサイズにしてください。少なくとも 20GB は確保する必要があります。

5. サイズが決まれば [縮小] ボタンを押します。縮小作業には少し時間がかかります。

6. すると [未割当の領域] が作成されます。

7. 右クリックして [新しいシンプル ボリューム] を選択します。

8. 新しいシンプル ボリューム ウィザードが開始されますので、[次へ] をクリックします。

9. ボリューム サイズを指定します。最大にしておいてください。[次へ] をクリックします。

10. ドライブを割り当てます。E: など、標準で指定されているものにしてください。[次へ] をクリックします。

11. ボリュームをフォーマットします。[NTFS]、[規定値] になっていることを確認して、[クイック フォーマット] のチェックボックスにチェックが入っていることを確認してください。[次へ] をクリックします。

12. ウィザードが完了します。[完了] ボタンを押します。

13. フォーマットが完了すると元の画面に戻ります。

あとは再起動して、新しく作ったドライブに Windows 8 をインストールすれば OK です。

https://apps.microsoft.com/webpdp/ja-JP/app/express-yourself/0131c5bb-0a19-48c4-ad96-99d52a442496

このアプリケーションは、Windows 8 アプリ開発体験テンプレートの「NewsReader テンプレート XAML/C# 用 Version 1.4」を使って作りました。（皆様の作成の際には、最新版のテンプレートをご利用ください）

本アプリケーションのサポートや問い合わせは、こちらのエントリのコメント欄に書いていただけますと幸いです。

今後アップデートしていければと思いますので、何卒宜しくお願い申し上げます。

2012 年 7 月から Windows 8 担当になりました。

今後本ブログでは Windows 8 に関する情報を書いていきたいと思います。取り急ぎでは、開発の際に参考になる本などを紹介できればと考えています。

宜しくお願い致します。