Entertainment Photoはアプリケーションストレージを使ってる

Entertainment Photoアプリテンプレートは、シナリオに基づいてグループや写真・図を追加できるアプリのテンプレートなんですが・・・ グループや項目を増減できるアプリのポイントって何? それはね!! 何の仕掛けもなしにアプリが動いている間にグループ加えて、写真・図を加えて、アプリを終了したら…はい、次にアプリ起動したら元に戻りますよねぇ。そう、追加した情報をどこかに記録しておかないといけないんです。って事で、 アプリケーションストレージです。 Entertainment Photoアプリテンプレートでは、追加されたグループ、追加された写真・図をアプリケーションストレージに記録しています。アプリケーションストレージに関するコードは、DataModelフォルダーのPhotoDataAppStorage.csで実装されています。※このテンプレートはもとはグリッドアプリテンプレートです。SamleDataSource.csファイルは、感じを出すためにPhotoDataSource.csと名前を変えています。 WinRT APIでは、My Documentsなどの一部のフォルダーを除き、ファイルのパスを指定してファイルを作成したりファイルのストリームを開いたりできません。また、My Documents以下でも、どこにアプリ向けのフォルダーを作ればよいか、決めるのは結構難しいので、アプリの設定やファイルは、アプリケーションストレージを使いましょう。 Entertainment Photoでは、キーとバリューで管理するLocalSettingsと、ファイルを格納するLocalFolderを使っています。どちらの機能も、Windows.Storage名前空間のApplicationDataクラスを使います。 先ず、LocalSettingsの使い方です。 アプリケーションのLocalSettingsの参照方法は、     var localSettings = ApplicationData.Current.LocalSettings; です。localSettingsは、ValuesとContainersの二つのプロパティを持っています。単にあるキーに対する値を格納したいだけであれば、     string key = “…”;    string value = “…”;    localSettings.Values.Add(key, value); これで、keyに対応してvalueを関連付けて保存できます。値は数字でもOKです。keyに対する値の参照は、     string value = localSettings.Value[key] as string; です。valueが単純な値ならこれでいいのですが、グループやアイテムといった複数のプロパティの組を保存したい場合は、ApplicationDataCompositeValueを使います。     PhotoDataGroup group = …;    var composite = new ApplicationDataCompositeValue();    composite[“Title”] = group.Title;   …

0

Windows 8 ストアアプリテンプレート – 検索ページ解説

Basic Photo、Entertainment Photoプロジェクトテンプレートで対応している、検索チャーム利用の検索ページについて説明します。 Basic PhotoのSearchResultsPage.xaml、Entertainment PhotoのSearchExtResultsPage.xamlは、Visual Studio 2012に元々用意されているアイテムテンプレート、”検索コントラクト”を使ってプロジェクトに追加しました。このアイテムテンプレートを使ってプロジェクトに検索機能を追加すると、以下の変更がプロジェクトになされます。 SearchResultsPage.xaml、SearchResultsPage.xaml.csファイルの追加 Package.appxmanifestの宣言タブに”検索”追加 ※この設定でアプリ外からの検索が有効になる App.xaml.csにOnSearchActivatedメソッドが追加される これでアプリがフロントに来ていない状態も含め、検索チャームからの検索が可能になります。OnSearchActivatedメソッドを覗くと、下から三行目に frame.Navigate(typeof(SearchResultsPage),args.QueryText); というコードがあり、ここで、SearchResultsPage.xamlのページを開く指示がなされています。 次にSearchResultsPage.xamlを開いてみてください。このページは、アプリケーション名の直下に、検索クエリーテキストに合致するアイテムを保持するグループのリストを水平方向に並べたフィルターリスト、その下に合致するアイテム群のリストが表示されるようなデザインになっています。  SearchResultsPage.xamlの33行目から始まるGrid(x:Name=”resultPanel”)が検索結果表示の全体の宣言です。その内部は、 44行目から始まるGrid(x:Name=”typicalPanel”)  上の図の”All(6)、 Group Title:1(1)、…”を表示している部分 69行目から始まるGridView(x:Name=”resultsGridView”)  上の図のItem Tilte: 1等の検索結果アイテムリストを表示している部分 typicalPanel Gridでは、47行目にある                     ItemsSource=”{Binding Source={StaticResource filtersViewSource}}”  で<ItemsControl…/>のソースを指定し、そのコレクションの子要素の表示方法を56行目からはじまる<ItemsControl.ItemTemplate…/>で指定するという構成になっています。ここでは58行目で宣言されている、 58                            <RadioButton59                                GroupName=”Filters”60                                IsChecked=”{Binding Active, Mode=TwoWay}”61                                Checked=”Filter_Checked”62                                Style=”{StaticResource TextRadioButtonStyle}”>63                                <TextBlock Text=”{Binding Description}”  Margin=”3,-7,3,10″ Style=”{StaticResource GroupHeaderTextStyle}” />64                            </RadioButton> の60行目と63行目のBinding指定で、filtersViewSourceで指定されたコンテナの要素のプロパティが連結されるようになっています。47行目のfilterViewSourceを更にたどっていくと、16行目に         <CollectionViewSource x:Name=”filtersViewSource” Source=”{Binding Filters}”/> という宣言があり、filtersViewSourceは”Filters”に連結されています。SearchResultsPageはLayoutAwarePageクラスであり、このクラスはXAML上の表示とC#のコードビハインド側を、DefaultViewModelを通じてModelとViewをつなぐ構造になっています。C#のコードビハインド側で、DefaultViewModel[“Filters”]に既定の構造の要素を持つコンテナを代入してやれば、XAML側のフィルターリストに表示を反映できます。 検索チャームから受信したクエリテキストは、SearchResultsPage.xaml.csのLoadStateメソッドで受けています。Basic…

0

Windows 8 ストアアプリテンプレート – Basic Photo紹介

Basic Photo テンプレートの解説です。 準備は、こちらを参照してください。http://blogs.msdn.com/b/hirosho/archive/2012/09/09/apptemplateforwin8storeapp_5f00_intro.aspx このテンプレートは、Visual Studio 2012がデフォルトで提供しているVisual C#のWindowsストアテンプレートのグリッドアプリテンプレートを基に作っています。グリッドアプリテンプレートで作成したプロジェクトに、 アイテムテンプレートの検索を追加 検索時の検索ロジック(SearchResultsPage.xaml.cs)を追加 アイテムテンプレートの共有ターゲットを追加 ItemDetailPage.xaml.csに共有ソースロジック(OnDataRequestedメソッド)を追加 GroupedItemsPageにSemanticZoomを追加 App.xaml.csで設定チャームのヘルプとプライバシーポリシーの表示を追加 ヘルプページ(HelpPage.xaml)を追加 等の追加を行っています。元々のグリッドテンプレートで作られたページのデザインはいじっていないので、Snap表示も含め、デザインガイドラインに従った表示になっています。 各アプリ向けには、各画面の背景をアプリのフレーバーに即した背景色や画像への変更を行ってください。以下、カスタマイズのポイントをいくつか紹介していきます。 固定画像の埋め込み 表示されている画像は、プロジェクトのAssetsフォルダーに格納されています。表示するグループ化された画像が固定的な場合は、一式をAssetsフォルダーに追加してください。エクスプローラーで画像が格納されたフォルダーを開き、追加したい画像を選択し、Visual Studio 2012のソリューションビューのAssetsフォルダーにドラッグ&ドロップすれば、プロジェクトに画像が追加されます。F5実行で表示される画像群とグループ-項目の構成は、DataModelフォルダーのSampleDataSource.csのSampleDataSourceクラスのコンストラクターで実装されています(260行目付近)。この辺りのコードは、一目瞭然ですね。画像は、Assets/XXX.png等で指定されているので、そこを書き換えればOKです。 SampleDataGroupがグループの名前や画像を保持するクラスです。コンストラクタの引数は順番に 識別子デフォルトでは文字列。GUID等でも可。キーとして使われ表示には使われない。 タイトルGroupedItemsPage、GroupDetailPage、ItemDetailPageのグループ名表示に使われる サブタイトルGroupDetailPageのサブタイトル表示に使われる コメントGroupDetailPageのGroup Descriptionで表示される文字列 です。アプリ向けに変えていきましょう。 SampleDataItemがグループに所属する項目の名前や画像を保持するクラスです。コンストラクタの引数は順番に 識別子デフォルトでは文字列。GUID等でも可。キーとして使われ表示には使われない。 タイトルGroupedItemsPage、GroupDetailPage、ItemDetailPageのアイテム名表示に使われる。 サブタイトルGroupDetailPage、ItemDetailPageの各項目表示のアイテムのサブタイトルとして表示される。 コメントItemDetailPageの詳細説明で使われる。 です。アプリ向けに変えていきましょう。作りたいアプリ向けに表示項目を追加したい場合は、SampleDataSource.csのSampleDataItemクラスにプロパティを追加します。たとえば”撮影者名”を追加したければ、     private string _photographer;    public string Photographer    {        get { return this._photographer; }        set { this.SetProperty(ref this._photographer, value); }    } といったように追加していきます。プロパティを新たに追加したら、SampleDataSourceのコンストラクタでのプロパティ値設定を忘れずに。 ネット上の画像を埋め込む…

0

Windows 8 ストアアプリテンプレート

Windows ストアアプリを簡単に作るためのプロジェクトテンプレートを作成して公開中です。 http://msdn.microsoft.com/ja-jp/jj556277 私は、Basic Photo、Entertainment Photo、Touch De Poの3つを作って公開してます。他にも色々と作っていこうかなと思っておりますが、ここではテンプレートを使うための準備方法を解説します。以後のポストでそれぞれのテンプレートの使い方を紹介していきます。テンプレートを使ってどんどん、アプリを作ってWindowsストアから公開してくださいね。 上のサイトから公開されているテンプレートを使って開発するには、Windows 8 PCとVisual Studio 2012が必要です。RTM(正式版)は、MSDN Subscriptionを契約している人は、MSDNサブスクリプションのダウンロードサイト(http://msdn.microsoft.com/ja-jp/subscriptions/dd179313.aspx)からダウンロード可能です。それ以外の人は、http://msdn.microsoft.com/ja-jp/windows/apps/br229516 からダウンロードが可能です。Windows 8とVisual Studio 2012をインストールしたら、一度、Visual Studio 2012を起動してください。 Visual Studio 2012を起動すると、マイドキュメントの下のVisual Studio 2012フォルダーが作成されます。ダウンロードしてきたテンプレート(ZIPファイル)は、このフォルダーの下のTemplates\ProjectTemplates\フォルダーのそれぞれの言語の下にコピーします。私が作ったBasic Photo、Entertainment Photo、TouchDePoは、XAML/C#なので、Visual C#フォルダーにコピーします。 コピーが終わったらVisual Studio 2012を起動して、メニューから新しいプロジェクトを作成(ファイル→新規作成→プロジェクト)します。新しいプロジェクトダイアログで、Visual C#を選択すれば最後の方に、テンプレートが表示されるので、使いたいテンプレートを選択して、プロジェクトを作成します。そのままF5実行ですべて動きます。また、WACK(Windowsストアアプリの検証ツール)の検査も通っているので、後は、自分のアプリに適した修正を加えていけばOKです。  

0

Windows ストアアプリ開発への近道 – 2012年8月現在

皆さん、Windows 8とVisual Studio 2012のRTMが公開されました。 http://msdn.microsoft.com/ja-jp/windows/apps/br229516/ からダウンロードが可能ですが、ダウンロードしてインストールしたら、Windows ストアにアップして、Win8ユーザーに使ってもらいたくなるのは人情でしょう。 現時点で、アプリ開発からWindowsストアにアプリを上げるまでで活用可能な日本マイクロソフトが提供しているセミナーやサービスをここでまとめておきます。※2012年8月16日現在の説明です。数か月後には事情は異なる可能性があるのでご注意です。 Windowsストアの今の状況は、 http://blogs.msdn.com/b/windowsstore_ja/archive/2012/08/03/rtm-windows.aspx を先ずきちんと読んでくださいね。そしてWindows 8、Visual Studio 2012のRTMをインストールしていただいてっと。 さてその後ですが、基本の流れは、 Developer Camp概要編セミナー Developer Campデザイン編セミナー ハンズオントレーニング で基本知識の獲得と腕を磨いていただく。これらのセミナーのスケジュールは、 https://www.facebook.com/5Metro/events で公開されているので、都合のよい日程と場所で受講してください。受講料は無料です。   そして、アプリのアイデアを練ってアプリを開発して、Windowsストアのアプリ要件、 http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083 をきちんと読んで開発したアプリが要件を満たしているかざっと確認してください。…いろいろ面倒くさそうだ…なんて思った方、Windowsストアに登録可能なアプリの開発の近道的な施策も用意しているので、興味のある方は kk5metro@microsoft.com に問い合わせてみてくださいね。 一通りできたら、アプリパッケージを作成します。アプリパッケージは、Windowsストアにアプリを登録するときに使います。アプリパッケージの作成は、 Visual Studio 2012のメニューの”ストア”→”アプリパッケージの作成”を選択 パッケージの作成ダイアログで”いいえ”を選択し、”次へ”ボタンをクリック パッケージの構成と選択で、設定をそのままに”作成”ボタンをクリック パッケージの作成が完了しましたで、”OK”ボタンをクリック の手順で行います。 次に、Visual StudioのWACK(Windowsアプリ認定キット)を使ってアプリの検証を行います。このツールはWindowsストアのチェックでも最初に使われるものなので、このツールでパスしないとWindowsストアには登録できません。パッケージを作成する流れで、WACKを起動できますが、単体でも起動可能です。http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694081.aspx に書いてありますが、検索チャームをタップして、”Windows Ap”ぐらいまで入力して”アプリ”を検索すれば、”Windows App Certification Kit”がリストに現れるので、そのアイコンをタップして起動してください。このツールで指摘された事項はFixしておきましょう。 最初のうちは、Windowsストアアプリの流儀に則った、使い勝手の良いアプリを作成するのはなかなか困難です。Windowsストアにアプリを登録する前に、UIのチェックを受けてください。 https://www.facebook.com/5Metro/app_384971174888643 ここからAEL(Application Excellence Labo)を申込みいただけます。このLaboでは、要件を満たしているかのチェックと修正方法をフィードバックしてくれます。面倒くさいな…と思う方もいらっしゃるかもしれませんが、ここで指摘される事項は結局WindowsストアでもFailの元になってしまう可能性があるので、受講しておいた方がよいでしょう。AELの受講は、 日本マイクロソフトの品川オフィスに来ていただく オンラインで遠隔地で受けていただく メールで送って指摘事項をメールでフィードバック から選択できるので、状況に合わせて活用してくださいね。 指摘事項を修正し終わったら、いよいよWindowsストアへのアプリの登録です。アプリの提出方法は、 http://msdn.microsoft.com/ja-jp/library/windows/apps/hh923028.aspx…

0

Visual Studio 2012 RCのテンプレート – VC++によるコンポーネント作成とSDK作成

前回のポストに引き続き、Visual Studio 2012 RCの機能を説明しているMSDNサイトの紹介です。 独自に作成したC++の共通ライブラリを提供する場合、SDK化して配布すると使い勝手が良くなります。 SDKの作成方法は、 http://msdn.microsoft.com/en-us/library/hh768146(VS.110).aspx で説明されています。Toolboxに独自の項目の追加やアイテムテンプレートの追加も出来きるので、カスタムコントロールやライブラリを使う時の定型コードの生成機能など、ライブラリを使う際に便利な機能をSDKを通じて提供可能です。 このページでは更に、Walkthrough形式で、C#、C++を使ってSDKを作成する方法が解説されています。 C#http://msdn.microsoft.com/en-us/library/jj127119(VS.110).aspx C++http://msdn.microsoft.com/en-us/library/jj127117(VS.110).aspx#createclasslibrary 画像処理や音声処理などの数理計算ロジック、特定用途のグラフィックス、業界標準IF向けのプロトコルスタックなど、様々なアプリケーションで利用可能なライブラリ開発のスキルを持っている方、このページを参考にSDK作成にチャレンジしてみてください。          

2

Visual Studio 2012 RCのテンプレート

このポストでは、Visual Studio 2012 RCのテンプレートを紹介します。 Metroスタイルアプリ開発関連のテンプレートは、Visual C#/Basic/C#、JavaScriptの各言語の下に”Windows Metro style”というカテゴリーの下に用意されています。 用意されているテンプレートは、 http://msdn.microsoft.com/en-us/library/windows/apps/hh738343.aspx で、詳細に説明されています。 Visual C#/Basic Blank App(XAML) Grid App(XAML) Split App(XAML) Class Library(Metro style apps) Windows Runtime Component Unit Test Library(Metro style apps) Visual C++ C#/VBのテンプレート一式あり Direct2D App(XAML) Direct3D App DLL(Metro style apps) Static Library(Metro style apps) JavaScript 空のアプリケーション Grid App 分割アプリケーション 固定レイアウトアプリケーション ナビゲーションアプリケーション 以下、C#/VB/VC++のテンプレートをベースに紹介していきます。 1ページもののアプリを開発する場合には、Blank App(XAML)が使えます。グループ化されたコンテンツを表示するアプリは、Grid…

0

Windows 8 WDDとDev Campに関する担当セッション補足情報

皆様、だいぶ時間がたってしまいましたが、WDD(Windows Developer Days)で担当したセッションと、Dev Campで担当している主にC++に関する詳細情報へのリンクを紹介します。 Dev Campに関する情報も含まれるので、WDDのセッションをベースに紹介します。 【WA-004】 XAML/C++を活用したMetro スタイルアプリケーション開発概要 (Day1/2) Windows 8で新しく登場したXAML(UI定義)+C++の組合せでMetroスタイルアプリケーションを開発する為の、取っ掛かりについて解説しました。公開されている資料としては、昨年9月のBUILDのセッション Metro style apps using XAML:what you need to knowXAML/C++で開発する為の基礎の基礎 A lap around Visual Studio 11 Express for Metro style apps using C++XAML/C++ Metroスタイルアプリ開発における、Visual Studio 11がサポートする様々な機能 Tips and tricks for developing Metro style apps using C++Metroスタイルアプリで使うWinRTの基本的な型と、非同期プログラミング等の説明 を参考にしてください。C++そのものに関する説明は、2日目の【WA-008】マイクロソフトプラットフォームにおけるC++の最新動向を踏まえたプログラミング で解説されていました。 このセッションは、BUILDのWriting modern C++ code:how C++ has evolved…

0