Windows 10 Desktop / Mobile / Windows Phone 用のアプリ開発のための情報一覧

#wpjp #wpdev_jp #win10jp #windev_jp Windows Phone 、Windows 10 Moible 、Windows 10 のアプリ開発の開発情報といえば、MSDNやデベロッパーセンターがありますが、巨大すぎてなかなか目的の情報にたどり着けない、検索ではまともなサイトに引っかからないということが多いです。(すいません)そこでリンクを集めてみました。(こちらのまとめに当たり yonenaga 様に感謝) なお、タイトルの後の ★★★ は高橋独断と偏見のおすすめ度です。 ① まずは Windows 10 とアプリ開発を理解する Evangelist Eye ★★★ https://msdn.microsoft.com/ja-jp/mt450454.aspx#top エバンジェリストがWindows 10 とその開発についてしっかり解説しています。 ② UWPアプリ開発のための情報 Windows デベロッパーセンター ★★ http://dev.windows.com/ja-jp 開発のためのポータルサイト、なんですが巨大すぎるので、初めに体系的に読みたい人向け ③ Windows 10 アプリのための解説・ライブラリ Windows 10 アプリに関するハウツー ガイド ★★★ https://msdn.microsoft.com/library/windows/apps/xaml/mt244352.aspx アプリ開発について解説とサンプルが体系立てて紹介してあります。 Windows ランタイム アプリの Windows API リファレンス ★ https://msdn.microsoft.com/ja-jp/library/windows/apps/br211377.aspx…

0

Windows 10 Mobile Emulator の使い方

#wpjp #wpdev_jp ① ソフトウェアボタン仕様にする 標準ではWVGA以外はハードウェアボタンに設定されていますが、設定変更することができます。>>(Tools) をおして、Optional Settings の Software Buttons にチェックを入れて Apply ボタンを押します。エミュレーターが再起動して、次からはソフトウェアボタン仕様になります。 ② 日本語エミュレーターにしたい これは普通にWindows 10 Mobile のセッティングですね。[Settings] を開いて、[Date and Language] を起動します。続けて[Language] を選んで [+Add Language]  を押して 一番下にある「日本語」を選択します。選択後は[Restart] ボタンで再起動します。 ③ Cortana が使えるようにしたい これも Windows 10 Mobile の設定です。標準では音声認識のための情報がないので追加します。[設定] → [時刻と言語] → [音声認識] → [+言語の追加] → [はい]  21MB ダウンロードなのでちょっとかかります。が、ダウンロード中のエラーが出てうまく入れられなかった。 ④ これまでの設定をデフォルトにしたい。 毎回起動するたびにこれをやっていては仕事になりません。ということでこの時点の状態を保存します。ついでにこれをデフォルトに設定します。これも簡単でエミュレーターの>>Tools を開いて、Checkpoint を選びます。New Check ポイントを押して現時点の状態をチェックポイントとして保存します。さらに、これをデフォルトにしておくと次回から起動したらこの状態から始まります。 アプリをインストールしたり、いろいろ設定したらそれをチェックポイントして保存しておけば、後からその状態を復元できます。…

1

Windows Phone の3つのボタンの表示形態

#wpjp Windows Phone には「戻る、ホーム、検索」の3つのボタンがありますが、8.1の頃からハードウェアボタンではなく、ハードウェアボタンがない機種の場合は、OSが表示するソフトウェアボタンも利用できるようになりました。いくつかの表示形態が存在することになります。   実質 画面比率 VS Emulator Hardware button Software button 480 x 800 (WVGA) 15:9 – Old Only – 480 x 854 (WVGA) 15:9 Soft – Fix (54px) 768 x 1280 (WXGA) 15:9 Hard Old Only – 720 x 1280 (720P) 16:9 Hard ○ Overray (84px) 1080 x 1920 (1080P) 16:9 Hard…

0

UWP-005 Type Converter を理解する

さて、ここでは タイプコンバーターについて解説します。 ボタンのXAMLで HorizontalAlignment プロパティは Left 文字列で設定します。 しかしこれをC#で書いた時には少し違って、HorizontalAlignment の型を持つ列挙型を使って定義されています。 なぜXAMLではC#のような厳密な型定義されたものではなく、文字列で定義することができるのかというと、タイプコンバーターという機能を使って型の変換が行われているからです。 個々の例でいえば、HorizontalAlignment にたいていMicrosoft の開発者がソースコードの特別な属性を追加していて、開発者が書いたコードの属性があるときは、Left をタイプコンバーターを使って変換します。試しにLeft の t を取ると該当する属性がないということでコンパイルエラーになります。 XAMLの特徴は、クラスのインスタンスを定義して、タイプコンバーターを使ってプロパティの設定を簡潔化することができるという点です。

0

UWP-004 XAML

タグの構文を見ればXAMLとUIとの相関関係はおおよそわかると思います。ですので、ここではパッと見ただけではわかりにくいところについて解説をします。 まずは、C#とXAMLの性質についてです。前の動画ではXAMLはHTMLと同様に見た目を定義するといいましたが、間違ってはいません。そもそも、XAMLは拡張XMLです。XAMLは2つのシステム間でのデータ転送の手段で使われ、スキーマを定義することで、同じルールを使うシステム間で通信ができます。 XAMLはXMLの特殊パターンです。HTMLのようですが大きな違いは、XAMLではクラスのインスタンスを作成してそのプロパティの値はを設定します。 前のレッスンで作ったTextBlock と同じような形で、画面に赤いボタンを追加しました。このボタンをダブルクリックするとClickイベントのハンドラが表示されるので、TextBlock のTextプロパティを設定します。実行してボタンを押すとテキスト変わります。 次に追加したボタンを <!– –>で挟んでコメントアウトします。Visual Studio のデフォルトでは緑のコメントになります。 では次にGrid コントロールをプログラムから操作するために、Grid に LayoutGrid の名前を設定します。 次は、Page クラスに Loaded イベントを loaded = “Page_Loaded” と記載して追加します。 ここでF12を押すとイベントハンドラが開きます。ここで、C#で Button インスタンスを作り、プロパティを設定するコードを記載します。 実行するとXMLと同じ機能を実行します。個々でのポイントは、約12行のC#コードを、XAMLのたった1行のみでえ定義することができるところです。

0

UWP-003 UWPアプリ開発に関するトピックのまとめ

https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-003-Overview-of-Topics-Related-to-Universal-Windows-Platform-App-Development ここでは前の回の開発に関してより細かい点について細くいきます。これにより、UWPアプリ開発におけるUI開発とそれをVisul Studio 上でやることに対しての知識を身に着けることができるでしょう。 UIデザインのパターン アプリのUIデザインに関してはいくつかの方法がありました。初めにコントロールをツールボックスからデザインビューに対してドラッグアンドドロップして、位置や大きさを調整する方法。プロパティウィンドウはコントロールが持つ様々なアトリビュートを変更すしてデザインビューで見ることができます。しかしHTMLのようにビジュアルデザイナーは必要とするすべてのプロパティの表現を完全に持っているわけではありません。 そのため、実際のXAMLの文法についてはまだやっていません。XAMLの文法については次のレッスンで紹介します。 Page クラスを構成する2つのファイル されあに、すべてのページのファイルは、C#でイベントをハンドリングするためのコードビハインドファイルが関連付けらえています。 Windows 10 においては、MainPage.xaml と MainPage.xaml.cs といったファイルの中で、ネームスペースを見ると MainPage と呼ばれるクラスが分離クラスとして定義されていることが分かります。   開発におけるこの分離クラスというのは、複数のファイルに収められた複数に分離されて定義された1つのクラスを示します。しかしファイル自体は同じクラス名を持ち、同じネームスペースを持ち、分離というキーワードを使って1つのクラスの定義を複数のファイルを使って実装することができます。 MainPage はPageと呼ばれるオブジェクトをもとに作れらています。クラスの部分をマウスでホバーすると、Pageくらすじたいは Windows.UI.Xaml.Ctontrols.Page となっていることが出見えるはずです。もしMainPage.xaml をひらいて一番初めの行のあたりを見ると、ページオブジェクトをベースにして、クラス名が HellowWorld で、ネームスペースとして、MainPage クラスがあることが分かります。 MainPage.xaml と MainPage.xaml.cs は1つのクラスを定義する2つの異なるファイルです。それぞれのファイルが一方がビジュアルを表現し、一方がふるまいを定義しています。 デバッグモードとエミュレーター 次にデバッグモードについてです。Windows 10 ではすべてのデバッグ手法が使えます。ブレークポイントを使ってコードのステップ実行を擦すことも可能ですし、アプリケーションを動かしながら途中のプロパティの値の状態を確認することができます。 また、デバッグモードで様々な異なるエミュレーターが用意されていたことに不思議に思われたかもしれません。エミュレーターは異なる画面サイズや解像度を再現しているだけでなく、異なるメモリーサイズや関連したハードウェアの違いも再現しています。そのためスクリーンの解像度や画面サイズと同様に、少ないメモリの環境だけでなくメモリが多い環境でのてすとも行うことができます。さらにエミュレーターについては右上についているボタンで様々な動作をさせることができます。それぞれのボタンで画面の回転、マルチタッチ入力、ズームといった操作を実現できます。 ツールバーのボタンの一番下には >> のボタンがあり、さらにここからより様々な機能にアクセスすることができます。これをタップしてウィンドウを開くと追加機能を見ることができます。例えば、加速度センサーの機能や、シェイクモーションの記録、ジェスチャーなどによってアプリケーションがどのように反応するのか、をテストすることができます。 同様にGPSのテストも行うことができます。ロケーションサービスをテストするときに異なる場所でのふるまいをシミュレートすることができます。 Visual Studio の MainPage.xaml に戻りますが、我々はToolboxから様々なXAMLコントロールを作ることができます。それぞれのコントロールはUIとその振る舞いを持ち、開発者がプロパティウィンドウや特定のキーイベントに対する対応をコードで書いたり、そのプロパティを変更することでカスタマイズされます。 前のデモではプロパティのイベントタブをハンドリングしてお見せしました。 コントロールと画面設計について ツールボックスは数十のコントロールを持っており、それぞれはシンプルな入力やボタンやテキストボックスといったコントロールです。そこにはTextBlock といった画面用のコントロールがあります。またDropDownlistBox や日付と時間を選ぶDateコントロールといったような選択入力型のコントロールもあります。グリッドはデータを画面に表示するために利用されるもので、グリッドのようなアプリケーション内でコントロールの位置決めをするためのレイアウトコントロールがあります。 グリッドはMainPage.xaml で使われていることがわかるでしょう。我々はもっとこれらのレイアウトコントロールを理解するために時間をとる必要があります。これはUWPアプリのアダプティブデザインのためにも非常に重要です。レイアウトコントロールを活用することで1つのソースコードで異なるデバイスフォームファクターに対応させることができるようになります。 UWPアプリは、すべてのWindowsデバイス上で動作するリッチなビジュアルコントロールを提供しています。これらはマウスでの入力だけでなく時に指での操作の場合もあります。しかし数千ネームスペースのクラス内の数千の関数を通じて同じAPIが提供されています。 例えば、もしインターネットから何かしらのリソースを取得する場合、もしkはファイルシステムにあるファイルを使って何かしたい場合、たとえすまーご論上であってもタブレット上であってもデスクトップでもXBOXであっても、同じAPIを使うことができます。そしてもし音楽やビデオを再生するなら、UWP…

0

UWP-002 はじめてのUWPアプリ

https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-002-Creating-your-First-Universal-Windows-Platform-App MVAのC#講座の中でC#を使ってデスクトップ(WPF)アプリとASP.NETでのWebアプリケーションでC#を使ったHello World アプリを同じプロセスで作っりおなじ結果が表示されることをお見せした。 そしてこのUWPにおいても同じ知識でおなじアプリを作る事ができますので、UWPでの作る方をご紹介します。 プロジェクトの作成 まず始める前に、Visual Studio 2015 がインストールされていることを確認してください。(そしてオプションでUWPアプリのSDKも入れてあることを確認してください)次にWindows 10 のエミュレーターがインストールされていることもチェックしておいてください。 準備ができたらまずは新しいプロジェクトを作るところから始めます。Visual Studio では様々な方法でプロジェクトを作ることができますが、ここではスタート画面の新しいプロジェクトの作成をクリックして作ります。すると新しいプロジェクトのダイアログが開きます。 左ペインは、インストール済み>テンプレート>Visual C#>Windows>ユニバーサル をえらびと、中央にテンプレートの一覧が表示されます。一番上のオプション”空のアプリケーション(ユニバーサル Windows)”テンプレートを選びます。 次に名前の欄をHelloWorldに変更して右下のOKボタンを押します。 するとしばらくしてVisual Studio が新しいプロジェクトを作成してくれます。 ビジュアル デザイナー 初めに(画面右上にある)ソリューションエクスプローラーから MainPage.xaml をダブルクリックします。すると2つのペインを持ったデザイン画面が開きます。画面上はビジュアルデザイナーで、下のほうがテキストタイプのコードベースデザイナーです。このデザイナーはコードを修正してスクリーン上にオブジェクトを作ることもできます。下の画面には上の画面に対応したXAMLのコードが表示されていて、これをXAMLエディターと呼んでいます。 上のペインには、アプリのビジュアルデザインが表示されています。そして、アプリをデザインもしくは1920x1080の解像度を持つ5インチの画面に表示したときにどのようにレンダリングされるのか実際に見ることができるようになっています。 このビジュアルデザイナーは今は300%のスケールで表示されています。これはデザインをするには非常に高い拡大率ですので、変更することができます。またこの表示は縦画面、横画面をボタンを押して切り替えて確認することができます。 ひとまず少し大きすぎるので、画面を確認するためにはスクロールしないと見えません。ですので画面左下の角のズームウィンドウを調整して33%に変更しましょう。これで視認性が良くなります。 はじめにデザイナー画面にいくつかのコントロールを追加します。左にあるToolBoxのタブをクリックしてパネルを表示します。右上のPinをクリックして固定しておけば自動的に隠れないようになります。そしてこのToolBoxは画面の左サイドにドッキングしています。もしこの場所を変えたいのならばToolBoxのバーをドラッグしてドッキングする場所を変更できます。 もう一つ気を付けてほしい点があります。一番を上を見るとコモンXAMLコントロールというカテゴリーがありますが、これを閉じると、もう一つXAMLコントロールという2つのカテゴリがあることが分かります。基本的に通常使うコントロールはコモンXAMLコントロールに含まれています。 さて、ではButtonコントロールをToolBoxからドラッグ&ドロップしてデザイン画面に配置します。 マウスでドロップしたところにコントロールが置かれます。 そうするとXAMLエディター側にも変更が加えられ、<>で囲まれたタグの形式でコントロールが追加されます。 このタグは、HTMLによく似ていますがHTMLではありません。しかしWebページのデザインを定義するという感覚ではHTMLに似ています。プログラミング言語であるこのXAMLを使ってアプリケーションの様々なコントロールとそのレイアウトを簡単に定義することができます。 ここでボタンコントロールを作成しましたが、そこにはコントロールの名前やコントロールの内容など様々なプロパティが定義されています。位置合わせとしては、水平位置、垂直位置、そしてMarginといったプロパティがあります。マージンであれば見るわかるように、上から10左から41ピクセルの位置で定義されてて、実際にそこに配置されています。右と下は0ですが気にする必要はありません。 しかし、ここにはXAMLエディターで追加したプロパティ要素も含まれています。もしボタン名をC#のプログラム的に変更したかったら、今度はこのClickMeButton を呼びます。 そして、Content エリアの内容をClick Me とタイプしなおすことによって変更することができます。もしここで変更するとビジュアルエディター側の表示もこれまでのものから Click Me に変更されます。 またこのボタンオブジェクトを修正するもう一つの方法があります。ボタンオブジェクトはビジュアルデザイナーにもありますし、XAMLエディターにもあります。そしてまた画面右下にあるプロパティウィンドウ、例えばTextプロパティやContent プロパティなどのように、ここでもプロパティを見つけて変更をすることができます。変更してEnterキーを押せば変更が完了です。 このプロパティウィンドウで変更すれば、デザイン画面も変更されるだけでなく、XAMLエディタ側でももちろん変更されます。Content プロパティを ”Click This” に変更します。ということで、プロパティを変更するには、ビジュアル、ソースコード、そしてプロパティの3つの変更方法があり、どこから変更してもちゃんと連動してすべてが変更される、ということを覚えておいてください。 では次にToolBox…

0

UWP-001 – シリーズ概要

https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-001-Series-Introduction   UWP開発のためのシリーズで75本以上のビデオがあります。 このシリーズは デスクトップやモバイルその他のユニバーサルプラットフォーム環境のWindows ストアから購入したりダウンロードして使うことができるアプリを作るための解説ビデオです。こういったアプリは今後XBOX ONE や Hololense , Surface Hub でも使うことができるようになるでしょう。、ユニバーサルプラットフォームアプリのすばらしさはは1つのアプリを作ればそれらすべての環境で動作ところです。UWPは1つのアプリで様々な異なる画面サイズやフォームファクターの上でも動作します。シリーズではそのように作るための手法等を紹介します。 このビデオが対象としているのは基本的には完全な初心者です。 ここでは C#とVisual Studio を使って開発をいます。ですのでC#についての基本知識は必要です。もし必要があればこちらを参照してみてください。 https://mva.microsoft.com/en-US/training-courses/c-fundamentals-for-absolute-beginners-8295?l=bifAqFYy_204984382 すでにある程度開発経験があって、もしこのビデオの進捗がゆっくり過ぎると感じるようであればこちらを見るとよいでしょう。 https://mva.microsoft.com/en-US/training-courses/a-developer-s-guide-to-windows-10-12618?l=IV8HDBpRB_9005095281 さてではここで開発のために必要なものを紹介します。 初めに、Windows 10 用の UWPを作るのでWindows10の開発環境が必要です。Windows 8.1 や 7、XPではだめです。特に後述の理由からPro バージョンを推奨します。 2つめに必要なのが VIsual Studio 2015です。ここでは Visual Studio 2015 Community Edition をお勧めします。これは個人が利用できるフリーのエディションですが、機能はPro相当だからです。ほかのエディションでもいいですが、2015よりも前のバージョンはだめです。UWPを作るには2015が必要です。 3つ目はアプリのテスト時に使う Phone エミュレーターです。画面上で動作するスマフォのようなものです。これはデスクトップ上のHyper-Vと呼ばれる仮想環境上で実際にOSが動いているものです。電話のように見える仮想環境上で本当のWIndows 10 Mobile が動いています。Phone エミュレーターを動かすには WIndows 10 Pro とそれに応じたハードウェアが必要です。それは Hyper-Vに必要だからです。特にマザーボードが SLATと呼ばれる技術に対応していなければなりません。最近のマザーボードであれば大概はサポートしていますが、とはいえすべてでサポートしているわけではありません。これについてはフォーラムでサポートできるものではありません。どうしても用意できない場合は Windows 10…

0

UWPをPCとMobileで動かしたときの環境チェック方法

  #wpdev_jp 特にUWP をContinuum で動かしたときを想定して、いまWindows 10 Mobile の Continuum なのかという判定をどうしたらよいかというとき、実装方法の記事でも紹介したとおり、UserInteractionMode がTouch かどうかでまず、判定を始めるといい。 Windows10 DeviceFamily 画面モード 外部モニタ 拡張接続 UserInteractionMode Projection Display Available メイン画面 接続先 Desktop Desktop Mode なし Mouse – False Desktop Mode 接続 Mouse Mouse True Tablet Mode なし Touch – False Tablet Mode 接続 この場合はDesktopMode に切りわかるのでこの状態は存在しない  Mobile Device なし Touch – False Device Continuum…

0

UWP を Continuum に完全対応させるには?

#wpjp #wpdev_jp UWPをContinuum に対応させるための方法をエバンジェリストの佐藤さんがまとめてくれました。 Continuum for Phone (電話用の Continuum) に対応したアプリを作成する すいません。佐藤さんのネタをそのままパクッて簡略化してまとめます。サンプルや詳細な解説はぜひ、上記の佐藤さんの記事をご覧ください。(GitHubでサンプルも公開されています) ■ Continuum に対応するには UWPを作ればOKです。   ■ いま外部モニタかデバイスかどちらにいるか判断する UIViewSettings.GetForCurrentView().UserInteractionMode の値が UserInteractionMode.Mouse なら外部モニター UserInteractionMode.Touch ならデバイス側で表示されてます。 画面サイズが変わった時などにこれで判断して、画面のデザインを変えたりするのがベター。   ■ 外部モニタとデバイスの両方に2つの別の画面を表示する 手順は4つかな? 外部モニター用のページを作る 普通にページ(XAMLビュー)を追加するだけです。 今の画面のIDを取得する ApplicationView.GetForCurrentView().Id で取れます。 新しい画面を作って、その画面のIDを取得する 画面(View)を作るには、Frameを作ってPageクラスにNavigateして、Activeにする。 つまり App.xaml.cs でやっていることと同じです。 そのまま2と同じ要領で画面ID取得できます。 var rootFrame = new Frame(); rootFrame.Navigate(typeof(ProjectionViewPage));  Window.Current.Content = rootFrame;  Window.Current.Activate(); int id = ApplicationView.GetForCurrentView().Id ;…

0