2015年5月2日土曜日

Build2015 Day2 Session 視聴メモ

私はおじさんなので、一度見てもすぐ忘れてアルェーどのセッションであれ言ってたっけ…となるので今年はメモ取って見よう、という趣旨の記事です。


基本的には後でMSDNの文書が更新されるのでそっち見れば済む話ではあるのですが…API Referenceだと、この仕組みが要る背景、どれが大事か、というような背景の話が無くてどのMethodもFlatに説明される事が多いです(QuickStartやOverview等で説明の入る部分も多いですが、全部では無い)。作った奴が自分で説明する話を聞くのは貴重であり、価値があるものです(「詳しい使用者」の話にもまた価値があるのですが、それはまた別種のものでしょう)。



2-660 Surface Hub: Building Windows Universal Apps for Surface Hub and the Large Screen
2-664 All That is New in the Windows Store
2-672 Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer
2-679 From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML
2-681 Introducing DirectInk: Learn How to Unlock New Opportunities Using Ink in Your App
3-610 Compiling Objective-C Using the Visual Studio 2015 C++ Code Generation that Builds Windows, SQL, .Net, and Office
2-692 'Project Centennial': Converting your Classic Windows App (Win32, .Net, COM) to a Universal Windows App for Distribution in the Windows Store
2-695 App Packaging and Deployment for Universal Windows Apps
2-702 “PROJECT ASTORIA“: Build Great Windows Apps with Your Android Code
2-703 Optimizing Windows Apps for Continuum
2-790 Deep Dive into XAML and .NET Universal Windows App Development
3-698 XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML
3-705 Harness the Full Power of Digital Inking in Your Universal Windows App with Ink Recognition, Advanced Ink Processing, and More
3-710 Store: Deep Dive on Publishing Universal Windows Apps
2-724 Windows for Makers: Raspberry Pi 2, Arduino and More


2-660 Surface Hub: Building Windows Universal Apps for Surface Hub and the Large Screen

James Fiduccia, Eric Flo, Roberto Sonnino
お薦め度 1億(DeviceFamilyとトリガの使い方のところ)
http://channel9.msdn.com/Events/Build/2015/2-660

(最初音が聞こえなかったが、何度か一時停止・再生してると聞こえた)


  • Surface Hub runs UWP 'Only' ... Win32, StoreAppは動かない へー
  • DeviceFamilyは「Windows Team
  • Neutral, x86 or x64で作れ (ARM無しのintel systemという事?)
  • Surface hub上でSessionを作成する事にAppは毎回「初回起動」の如く動作する(後述)
  • ペン・タッチに特化 一応ソフトキーボードもある(けど使いにくいヨナ…との事)


Session Cleanup 重要!

  • セッション開始…会議始めるとか…、で使い終わってセッション終了時に、AppData、文書、画像、テンポラリファイルは全て消去される 
  • 保存したい場合は自分でCloudに保存(つまりSurface Hub自身はStorageLessなDesign)
  • セッション開始=アプリにとってはクリーンインストール後の初回起動になるので、ここに色々くっつけている(チュートリアルだのようこそ画面だの)とSurfaceHubでは使いづらいものになる

Interaction and consumption zones


  • Zone 1 : 操作者、直接操作する人のゾーン 腕を伸ばせばSurface Hubに届く範囲 1.3m程度, 
  • Zone 2:出席者、プレゼンを見る人ゾーン 1.3-4m(55inch), 1.3-6m(84inch model)
  • このゾーンを考慮してUIを作る また、操作者に近いところにもってくる


デモ …Small sizeを考慮して作ったアプリをSurface hub対応にする

  • SplitView, Button, ContentにFlipViewを持つシンプルなもの 明るい青色背景
  • そのまま起動すると…Hubの画面一杯に同じアプリが表示される それなりに動く ただ背景が明るすぎる、サイズでかすぎ、NavMenuのサイズは常にOpenのほうが良い等…直すところが出てくる
  • VSでの作業…SurfaceHub用のVisualStateを作る ここでは既定とWindowsTeam用を作る Blendを使うと簡単 サイズ、色等をいじる ここではPresentaionよりはCollaborationに特化したいのでMaxWidth/Heightで小さくする
  • 又、VisualStateを二つ定義するだけでは勿論ダメで、Stateを変更するTriggerも書く ここでは、サイズでなく「DeviceFamily」そのものをトリガにする。 3000x2000のNotebookと同じUIを出したいわけではないから。  Windows.System.Profiles.AnalyticsInfo.VersionInfo.DeviceFamilyが目的のファミリだったらばアクティブにする、という「DeviceFamilyStateTrigger」クラスを、StateTriggerBaseから派生させて作っている 動画の36分あたり 
  • ここで作ったトリガを、Xamlの中でDeviceFamily="Windows.Team"として指定する。Oh!
  • DataTemplateの切り替え…ここではInkCanvas付きを使う。あれ、切り替えの話飛ばされた気配
  • ここからは同一Viewを使うのでなく、SurfaceHub専用のView(XAML)を作る話
  • ここでは、App.xaml.csからrootFrame.Navigateで飛ばす際、AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Team"ならSurfaceHub用のViewに飛ばす、というやり方を使っている

SurfaceHub特有のUI

  • 操作者の数に応じてUIを変える ペンのIDを見て、ユニークなペンが2本現れたら二人、と見なして「いいね!」ボタンを2セット見せるとか 面白い

Wrap-up

  • Collaboration Scenarioを真剣に検討すべき SurfaceHubでは複数の人が使うシナリオがメインであるし、また遠隔地と繋げて使う事もあるだろう 一人だけで使うアプリから頭の切り替えが要る


2-664 All That is New in the Windows Store

Ashish Babbar, Adrian Maziak
http://channel9.msdn.com/Events/Build/2015/2-664

動画がまだ無くスライドのみなのでざっと眺めるだけ…大体は既知の話が多いけど

Page18
  • Application Flighting  今はWPだけのBetaTesting、UWP全部で使えるようになるのかな?かな?スライドの一行だけなのでわからんけど!期待

Page21
  • Engage ... 'Public and private response' 今はWPだけでPrivateResponseが使える状態だけど あれ実際使ってみると結構便利という印象なので期待

Page22
  • Monetize ... subscription modelがサポートされる


2-672 Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer

James Clarke
お薦め度 3
http://channel9.msdn.com/Events/Build/2015/2-672

「Visual Layer」の今後の話 VisualLayerが具体的に何を指すのかは後述
最初にかっこいいUIのデモビデオ ここに至るにはどうしよう、という話

New programming model - WinRT Composition API

  • Windows.UI.Composition  c#, standard c++, C++/CX
  • All UWPで使用可
  • In preview .... まだ出来て無い!


振り返り Win8.1のVisual Layer


  • App→Framework Layer (XAML)→Visual Layer(DirectComposition / DirectManipulation)→Graphics Layer(DirectX)
  • VisualLayerについてはVistaでDWMとして入ってきた部分 ただWin8まではAPIとしてApp開発者には特に意識される部分では無かった AppはFrameworkLayerとしてXAMLを、GraphicsLayerとしてDirectXを触っていたがVisualLayerにはInterfaceが無かった(Win32には少しあったが)


Win10のVisual Layer

  • App→Framework Layer (XAML)→Visual Layer(Windows.UI.Composition)→Graphics Layer(DirectX)
  • 今までWinRT Worldからは見えない・触れない所に居たVisualLayerに触れるようになる

デモ・TweetWall
  • Streamを見せるApp 呟いてる人のアイコン多数がAlphaBlend付きで滑らかに流れる (HTML/JSでも出来そうだけどナ)一人アニメアイコンが居るな?
  • UWPなので電話でも動く

Light-Weight Visual Layer
  • CompositionObjectの親がVisual Object
  • 派生 SolidColorVisual, ImageVisual, EffectVisual 今後増える予定 Geometryとか
  • ContainerVisualが子供としてVisualsを持つ

Visualで何ができるか
  • Resize, Positioning, Clipping, Transforms, Properties, BuildTree

デモ:Visual Types
  • うn 画面にがりがりVisual Objectで物を描いていくデモ ただベタ書きではなくVisualTreeの構造は持っているのが面白いところ UI ElementとしてRichなXAMLでは無く、純粋にVisualLayer上の存在なのが違う所なのかな

デモ:Transforms  Doomチックな迷路表示

XAML and Composition

  • Visual Layerを使う理由...より複雑なアニメーション・エフェクト、多数のXAML Elementのアニメーション、を少ないコードで実現可能(確かに…XAMLでやるのは大騒ぎになりがちではある VisualLayerでCodeだけで書けるのは便利かもしれない)
  • 使うには…使いたいUI ElementをWindows.UI.Xaml.Hosting.ElementCompositionPreview に渡してContainerVisualを取得し、Compositorにアクセス(今後変わるかも)

デモ:XAML Integration

Effects
  • Blend/Composite/…。将来的にはシェーダを使ったエフェクトも

Animations
  • Keyframe/Duration等…XAMLと似てる というよりはXAMLがこれ使ってるのかも
  • 42分 Tweetium作者がアイコンで写ってる(笑)
DirectX Interop

スケジュール
  • Insider buildのWin10「では」動く
  • Win10 RTM Buildではinbox-callerだけが使える(つまり普通のアプリからは使えない) (えーーーー)
  • 2015年末にはV1 APIをリリースし、アプリから使えるようになる予定

感想…XAMLだけでは無理なCosmeticな効果、アニメーションをつけたい!場合に役に立つかもしれない。



2-679 From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML

Tim Heuer, Harini Kannan
お薦め度 5

XAML親分Timのお話

  • Tim的にはUWPでのXAML UIは「ほぼ」ウィンドウサイズで切り替え、必要ならCapabilityで解決できるという立場 (ただ、上のSurfaceHubであったようにDeviceFamilyで切り替える場合も出てくるのだろう)
  • PopupMenuがマウス・タッチでサイズが変わる話(3回目)
  • Pivotの紹介 Windowが狭くなると自動的に左右にタブ部分のスクロールコントロールが出る

Scalingの話

  • 100、200、400を(Bitmap)Assetでサポートするのが大事
  • 別セッションで詳しくやるよ!


デモ Kliva app...UWPへのMigration

  • SplitView, VisualState, Trigger, RelativePanel等既知の話が続くので略(Speakerのお姉ちゃんが早口すぎて付いてけないというのもありますが)
  • 「幅が変わったらVisualStateでRelativePanelの取り付き先を切り替える」というデモをしてる なんかこう・・・うーn・・・この時点で既に茨の道な気がすんだけど


VisualStateTriggerおさらい

  • ここではSurfaceHubでやってたDeviceFamilyで切り替えるという荒業は紹介されない…
RelativePanelおさらい
SplitViewおさらい


ApiInformation...XAMLだけではどうもならん場合

  • Windows.Fouindation.Metadata.ApiInformation

デモ:Custom Trigger 説明は41分あたり

  • 基本的には上のSurfaceHubでやってたのと同じ StateTriggerBaseから派生させる 
  • ここではポインタのDeviceTypeを拾い、マウスだったらTriggerを飛ばす形にしている 
  • 話としてはSurfaceHubの説明のほうが判りやすい が、タッチだったらUI大きくするのはこれ使うと簡単にできるのかもしれない

GithubにCustomTriggerのサンプルがあるよ!
http://github.com/dotMorten/WindowsStateTriggers

KeyMessage

  • 繰り返し「UWPのVisualState変更はほぼほぼWindowSizeで出来る 必要ならCapabilityを使う」  (Tim的にはまず前者でやってほしい、というのがMessageなようだ)
  • Win10のInboxAppはほぼ前者である
  • ContinuumModeだと話が少し変わる この場合Capabilityを見る必要があるかも
  • Xbox, Surface HubのようなUnique物は後者にならざるを得ない これはレアケースである(ここでフォルダ分けを使ったDeviceFamily別XAMLの画像が一枚だけ入る…)


(感想 Desktop/Mobileの切り替えをDeviceFamily別XAMLでさらっと済ませたい人も多いんでないかなぁと思うが ただContinuumな使い方を考えると、安易にDesktop/Mobileで分けるのはあまり宜しくないはず)



2-681 Introducing DirectInk: Learn How to Unlock New Opportunities Using Ink in Your App


Sriram Subramanian
http://channel9.msdn.com/Events/Build/2015/2-681

(概要の話だったので略)



3-610 Compiling Objective-C Using the Visual Studio 2015 C++ Code Generation that Builds Windows, SQL, .Net, and Office


Salmaan Ahmed, Jim Radigan
http://channel9.msdn.com/Events/Build/2015/3-610

…僕には難しくて良く判りません(特に前半)後半は僕がiOS全然わからんのでわからない所が多い
後半、本当にVS2015でObjectiveCをBuildしてアプリが普通に動き、普通のC++のようにデバッガの機能が動いている すげえ


  • UWP APIとiOS apiを使うことができる、Objective-Cで書くUWP
  • OperationMode - formfactorを吸収する
  • 電話Onlyでは「ない」…Win10 各DeviceFamilyで動き、ARM/x86/x64で動作(このあたりも確かにUWP)


API

  • iOS APIのSubset
  • 特定のVersionに合わせている訳ではない
  • 良く使われるAPIから実装
  • Games...OpenGL, OpenAL, Sensors
  • UI...UIKit, CoreAnimation, CoreGraphics, CoreText, Touch (IMEはどうなるんだろう?)
  • OSの機能はWindowsにRedirectする Sharing, Notifcations,Camera, Store In-App Purchase, FileSystem(mapped), etc


これから

  • SDKを夏にリリース
  • 詳しく知りたい人はProject IslandwoodにMail送ってね


Q&A

  • UIControlの見た目はどうなるの?…(Win10)持ちのResourceはWinのもの ただAppが変えるのは勝手
  • 二つ目…ライブラリ話?(聞き取れない)
  • Swiftは?もうObjective-Cはあんまり使ってないぜ?...今日はコメントできません:)(どっと笑い)
  • XcodeからVSにMigrateしたProjectに加えた変更はどうなるの?…Oneway 共有ソースは勿論シェアされるが


2-692 "Project Centennial": Converting your Classic Windows App (Win32, .Net, COM) to a Universal Windows App for Distribution in the Windows Store


John Sheehan, David Tepper
http://channel9.msdn.com/Events/Build/2015/2-692

「SUBPOP」

「未完成、夏にSDK」

  • Classic Windows App(CWA) → Universal Windows AppへのBridge
  • MSI is 'brittle'(脆い)
  • → CWAを既にあるUWPに持っていくには


今のUWP(StoreApp, AppX)のDeployModelは良く出来てる

  • SingleClick
  • 自動アップデート
  • 落ちない
  • 「ユーザーが信頼できる仕組み」アンインストールで綺麗に戻る


デモ:PhotoShop Elements(WindowsAppsの下に入ってる 確かにStoreAppと同じ)Directoryを覗く

  • FilsSystemMetadata.xml
  • Registry.dat...仮想化されたRegisty Hive AppはこのRegistryにアクセスする
  • AppxManifest.xml...StoreAppと大体同じ FullTrustAppとしてEXEがEntryPoint 他にはFileAssosiation, LiveTile等が入る
  • Directory VFS ... System32だのなんだの、全部では無いが・・・・Oh・・・仮想化されている(パッケージどうなるんだろう すげえでかくならない?うまくやるんだろうか)
  • Assets...LiveTileのBitmapだの

どうやって作るか・・・変換


  • MSI→変換→AppX
  • MSIで入れるものをCaptureしAppXを生成する
  • テスト、そして(MSIの)更新が要る
  • 全部出来る訳じゃ無い ターゲットはApp SystemServiceやDriverはターゲット外

  • Namespace merging...Appが見るのはMergedView SystemのNameSpaceにApp Namespaceを重ねたもの 例えばAppがSystem32に置くMsvcrtは実際にはApp Namespaceに置かれる WriteOPはリダイレクトされる(32bit→64Bitの時の仮想化Filesystem/Registryと雰囲気が似てる)
  • FullTrust Activation...AppX世界のApp ContainerとFullTrustを繋ぐ


でも、

  • UWPに移行するのが正道


Q&A


  • AppXのSideloadは?...他のUWPと同じ
  • SingleUser/MultiUserは?...(質問がうまく伝わらなかったっぽい)


(感想…ElegantなIslandWoodにくらべるとこう…運用で解決というか、シス管的解決を図ってる感じがある MSIから変換する訳だけど、一発でうまくいくものもあれば結構変えないといけないものもあるだろう )



2-695 App Packaging and Deployment for Universal Windows Apps

Barclay Hill, Jason Salameh
お薦め度 1億
http://channel9.msdn.com/Events/Build/2015/2-695

UWP appxの利点 AppX、三つの利点…配置が簡単、マニフェストによる宣言、容量の削減

  • Incremental Update…V1からV2で共通のファイルは転送を省く ファイルごとにHashを取って比較している 新しいファイルのみを転送 (知らなかった)これはMobileで特に効果的
  • File Single Instanting...二つのアプリ…例えばMSGameStudioの二つのゲームが同じコンポーネントを使っている場合…広告モジュール等 この共通ファイルはストア上でシェアされる (これも知らなかった)
  • 部分リソースダウンロード...例えばスケール毎にリソースを持っている場合…デバイスに必要なものだけがダウンロードされる (これも)
  • (このあたりはWin/WP8.1のAppXで既に使ってる機能との事 AppXすごい)


UWP App Deployment


  • インストール済みのWP7/8.x、Desktop8AppをUWPで更新 (Desktop8==storeapp)
  • 一つ又は複数のデバイスファミリをターゲットに Manifestで宣言
  • 開発者モードの新設…開発者ライセンスに変わるもの (既知 ただし現状UIはあるけど動いてない状態 PolicyEditorで変える このBlogではDay1まとめで書いてある)
  • Sideload...やり過ぎ注意


デモ…Packaging

  • 開発者モードの有効化
  • Package.AppxManifestの説明(まだManifestDesigner無いもんナ…作るんだよね?)
  • PhoneProductId…Phone用Appと紐づける(Win8Universalでもやってたやつ)
  • TargetDeviceFamily…Name, MinVersion, MaxVersionTested (Testedがイイね)Versionは Featureの追加で増える
  • 複数のファミリをサポートする場合、複数のTargetDeviceFamily Elementを宣言する(コードの実行上の必要な要素としてのデバイスファミリとは又別なのかな?)
  • ストア用パッケージのビルド、PS1を使ったInstall…このあたりは8.1とあんまり変わって無い
  • Phoneでの開発者モード有効化
  • お Deploy用のコマンドラインツール  WinAppDeployCmd install -file hogehoge.appx -ip A.B.C.D  
  • デプロイしたのはボタンクリックで例のペガサス猫を表示するアプリ 猫人気過ぎる
ストレージの改善

  • Win10ではリッチデバイスから小さいデバイスまでターゲットが広いよね?
  • ストレージの小さいデバイスにより多くのAppを入れるために…Phone8.1で入れたExternalMediaへのインストール機能をWin10に持ってきた (mjk!)
  • 外部メディアへのインストール又は移動が可能 (素晴らしい)
  • 外部メディア上でのアプリ(ユーザー+アプリ)データは暗号化される
  • 同一パブリッシャーのアプリ間でストレージを共有可能 (後述)

デモ:外部メディア上のアプリ
  • Settings→System→Storage ここからアプリ・ゲームの保存先を変更できる (10074で既に使用可能)ここでポイント・デバイス毎に暗号化されるので、あるデバイスでカードにアプリをインストールした場合、そのカードを別の他のデバイスに挿しても使用できない  (同じアカウントの場合はどうなんだろう)
  • インストール済みアプリのストレージ変更はSettings→System→Storage→コンテンツ上部の「PC」又は外部メディアのバーグラフをクリック→「アプリとゲーム」、で「インストールされたアプリと機能」画面に遷移 ここからアプリ毎にストレージを移動・アンインストール可能

デモ:パブリッシャー共有ストレージ(Win10での新機能)
  • 例えばパブリッシャーDDLGでアプリAとアプリBを出してる場合、この二つのアプリ間で(デバイス上に)共有のストレージを持てる
  • Package.AppxManifestの中にExtensionを作り、Category Attributeに"windows.publisherCacheFolders"をセット この子要素でフォルダの名前を定義
  • Code上からStorageにAccessするには…ApplicationData.Current.GetPublisherCacheFolder(Manifestで定義した名前)でStorageFolderを取得できる 以降は普通にStorageFolderとして使える
サポートの継続
  • これまでのAppXパッケージフォーマットは今後も利用可能
  • これからも拡張します
  • AppXの歴史…ベースはWPのXAP 現在抜けているのはAppX自身の暗号化
EnterpriseのDeployについてはIgniteでやるよ!




2-702 “PROJECT ASTORIA“: Build Great Windows Apps with Your Android Code


John Justice, Rajesh Sundaram
http://channel9.msdn.com/Events/Build/2015/2-702


AstoriaではAndroid StudioのIDEを使う (IslandwoodではVSそのまま使ってた 個人的にはVSのほうがイイナー)

デモ アンドロアプリの移植

  • 画像、地図サービス、共有、ソフトキーボード入力を使うサンプルアプリ、Android上で動いてるものをまず見せる
  • 次、WP上で動いてるアプリ 共有ではWPのShare、地図ではBingMap、入力はWPのキーボード、そしてアプリからWPのライブタイルを更新


Astoria App Analysis ページを開設してます

  • Webフォーム上にAPKをドロップするとAnalyzeして…推奨する変更箇所を教えてくれる 対応するWindowsサービスを表示 GooglePlayサービスはWindowsStoreAppに変えれ、GoogleMapはBingMapに変えれ等


Android Studioでのデモ

  • ProductFlavor"windows"/"android"
  • WPEmulatorに接続、デプロイ APK→APPX
  • デバッグは普通にできる BP,Stepin/out AndroidStudio上で
  • WindowsServiceが使える…LiveTile Notification, Windows Notification Service,...
  • (WNSへのMappingは良く出来てるなぁ)
  • (拍手を欲しがるPresenter イエーーー)
  • 開発はMacでも可能(WPEmuがOSXで動いてる画面 Oh)
Windows does the heavy lifting for you (Islandwoodと同じスライドだ)

「AstoriaでBuildしたAppは、Windows Appである」
  • Copy&Pasteも勿論できる (WPもWin10からだけどな!)
  • MSのCloudServiceも使える ApplicationInsights, MS Ads, In-App purchase, WNS, Xbox live services, Bing Maps, Location Services, ...
Astoriaの構造
  • スライド APKを内包するAPPXがあり、それがAstoria Subsystemの上に載っている(PureなAPPXという訳では無いんだね またSubsystemLayerもIslandwoodの説明では出てこなかったパーツ ちょっと仕組みが違うのかな)
  • Astoria Subsystemは直にWindowsKernelの上で動く、という説明(この言い方も何も言って無い気がするが)

まとめ


  • ターゲットはWin10 Mobileのみ 
  • IDEは好きなのを使え AndroidStudio, IntelliJ, Eclipse,  それぞれにAstoriaPluginがある
  • 開発はPC/MacどちらでもOK

Q&A (20分取ってるけど略)




2-703 Optimizing Windows Apps for Continuum


Keri Moran, Gino Sega, Liz Threlkeld
お薦め度 5億
http://channel9.msdn.com/Events/Build/2015/2-703


「皆電話が大好きよね、私も好きだわ!日本のティーンの90%はシャワー中も電話をそばに置いているそうよ」 (そうなの?)
Continuumによって…電話で動くUWPはどの画面でも使えるようになる これはまさに「Write once, run everywhere」   (死亡フラグっぽくていやだなこれ)

デモ

  • Keynoteの後聞かれたけども…Continuumに特別はハードウェアは必要無い このデモで使うのも、Win10の電話、Bluetooth Keyboard/Mouse、Miracastなモニタ、これだけである
  • 電話でExcelを起動し、NotificationCenterからMiracastで外部モニタに接続…するとWin10 Desktopとスタートメニューが画面に写る 「ようこそContinuumへ、ようこそ未来へ」(ドヤァ)
  • このスタートメニュー、PCのスタートメニューと少し違う 左ペインのListViewが無く、右のタイルのみが表示される このタイルは電話のスタート画面のタイルと同じ
  • この時点ではExcelは電話上で動いている
  • スタートメニューのExcelをタップすると、Excelは外部モニタに移動する 電話はスタート画面
  • 電話の通知センターから「Continuum(Control)」を起動 すると電話はタッチパッド画面(何も表示してないが)になる これで電話をタッチパッドにして外部モニタ上のアプリを操作できる
  • 外部モニタ上でHDビデオを全画面再生 この間も電話上ではカレンダー、Mailアプリを使うことが出来る

(この一連のContinuumのデモは今回のBuildでは1、2を争うAttractiveさだと思う)


新興市場のようなスマートフォンがFirstDeviceである市場にもPC UserExperienceを届ける事が可能 (日本のヤングにも当てはまる話ダナこれ)

Continuumが想定するConfiguration

  • Wired Dock
  • Wireless Dock
  • Wireless Dongle  (HDMI直差しスティックみたいなの)

Continuum対応アプリを作るには…Effective Pixelの理解が鍵 (TimのUWPセッションでも出てきたやつ)、スクリーンサイズへの動的な対応が必要

大事な三要素…Fluid UI, Responsive UI, Tailored UI

Fluid UI

  • 「Screen」のResizeに動的に追随する必要がある WrapGridを使ってContentをReflowさせるのがお勧め
  • 別の例…2ペインレイアウトでは絶対サイズではなく相対サイズを使う .3*/.7*みたいな
  • RelativePanelも鍵


Responsive UI

  • 例えば Effective Width <= 768なら電話UI、>768ならBigScreen UI
  • AdaptiveTriggerを使って表示を動的に変更


Tailored UI

  • Viewに応じてコントロールそのものを切り替える ListView→GridViewとか NavigationModelも切り替える
  • ここでも切り替え契機はAdaptiveTrigger


デモ
天気アプリ

  • BigScreenではSplitViewのSmallSizeを常に見せてるスタイル、Phoneではハンバーガーのみ
  • ContentはBigではWrapGridで横に並べる、電話では縦に並べる


Mail

  • BigではMultiColumn、電話ではSingleColumn


カレンダー(失敗)

Packaging…AdaptiveなUWPを作ればそれはContinuum対応である

デモ…フォト、ファイル

Scaling

  • Scale 300, 100, 150, ...
  • 今の電話はScale 200-400, PCは大体Scale 100-150 だが300のもある
  • Downscaling...400で作っておくと、それから100、150を自動的に縮小して作る だが予め高品質なDowscaledを作っておく方がいいのは当然
  • Assetsはファイル名にhogehoge.scale-300.png とScaleを入れる方法と、Scale毎に「Scale-ABC」フォルダを作りその中にhogehoge.pngを入れる方法がある どちらにしても表示ディスプレイに応じたScaleのResourceが選択され、ms-appx:///Assets/hogehoge.png でアクセス可能
Multi-Screen
  • Cast API...MediaElementを特定のモニタに全画面表示する
  • ProjectionManager API...Appで複数モニタ表示を制御 例:rootFrame.NavigateでPageを作った後rtProjectingAsync(rootpage.id, thisviewid) として指定のモニタに表、await ProjectionManager.Sta示する StopProjectingもある  例えば…PresentationAppで、外部モニタにプレゼン本体、電話にプレゼンのノートを表示する等

まとめ
  • UWP対応アプリを作って!
  • アプリが電話・PCどちらでも動くことを確認
  • Big/Small用のアセットをアプリに含める
  • MultiScreenAPIも使ってみて
(大きな拍手)



2-790 Deep Dive into XAML and .NET Universal Windows App Development


Unni Ravindranathan
お薦め度 1億

(このセッション、何があったか知らんけどタイトルが明らかに間違いで 全部.NET Nativeの話) unniのXAML話は2-697で聞けるらしい

.NET Native ... 「全てのWin10 .NET Appは.NET NativeでCompileされたものがユーザーデバイスに届けられる」 

何故.NET Native?
「Mobileのため」

  • NoJITでCPU負荷が減る
  • Coldで最大60%、Warmで40%StartupTimeが減らせる
  • 最大30%メモリ占有量を減らせる

「Adaptive Appsのため」

  • UWPは複数のDeviceFamilyで動くため、対応していないContractを呼んでしまうエラーケースが増える(はず)SDK、Contractのアップデートが重なるにつれさらに増える
  • この場合JITだとそこで落ちる
  • .NET Nativeの場合は「大丈夫」(何故JITだとダメで.NET NativeだとOKなのか、詳しくは説明してくれなかった 興味ある → 同じ質問を会場の人がしてて答えてたが JITがダメでNativeが良い答えにはなって無かったような)


「更新ペースを早めるため」

  • AppとClient Systemの.NET Gapが存在しなくなる
  • (今まであったような).NET X の普及を見てそろそろ移行…的な事がなくなる



.NET Nativeの開発フロー

  • 開発中も.NET Native Chainを有効にしてDebugしてほしい、というのがメッセージみたい (VS2013+.Net Native に比べるとVS2015RCの.NET Native buildは偉く速いのでここはOnのままで大丈夫と思う)
  • AppX VersionのRevision Field(4桁の一番最後)はStore側でのコンパイル用にReserve つまりユーザー(開発者)はRevision Fieldを使えない (初耳)
VS2015RTM での既定のパッケージング


  • Debug…AppX: MSIL .appxupload: no build
  • Release…AppX:.NET Native, .appxupload: MSIL (.NET NativeへのビルドはStoreが行う)
Runtime Directives


  • ほぼほぼ既定のままでOK
  • 弄ってApp Footprintを減らすことも可能


.NET Native best practices


  • 開発中はDebugビルド
  • ただ、マメにRelease(.NET Native)でビルドしてテストを行うべき


Libraryについて


  • PCL….NETCore 4.5.1
  • Native Win/Phone 8.1 ... VS2013 CRT
  • Native UWP ... VS2015 CRT



3-698 XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML


Mark Alcazar, Kiran Kumar
お薦め度 3
http://channel9.msdn.com/Events/Build/2015/3-698



  • XAMLは充分なパフォーマンスを出せるか?...完全にYes
  • XAMLが車だったとしたら…どんなタイプの車だろうか? パフォーマンスだけのフォーミュラカー?快適(生産性)だけのリムジン?いや違う、素晴らしいパフォーマンスと高い快適性(生産性)をバランスよく両立させたAudi A4みたいな車がXAMLだ!(ドヤ) (A5? アウディがお好きらしい)


パフォーマンス10の原則


  1. パフォーマンスの「禅」を受け入れよ
  2. 問題を明らかにし目標を定めよ
  3. UWPに変換すれ
  4. アプリのプロファイリングをすれ
  5. スタートアップの改善
  6. 要素を減らせ
  7. 仮想化を使え
  8. バインディングを最適化せよ
  9. 画像を最適化せよ
  10. テキスト描画を最適化せよ

#1 Zen of Performance...「最も速いコードは実行しないコードである」 (禅だ…)

具体的には...

  • 機能とパフォーマンスのバランスを取るよう努力せよ
  • 後で出来るタスクは後でやる
  • 可能な限り整理する

デモ:WP8.1のカレンダー 

  • 右上に天気を表示してる この為にWebServiceにアクセスし天気を取得してる ただこれのために遅くなってる これはカレンダーの本質じゃない このためカレンダーAppチームに行ったアドバイスは「まずカレンダーの予定を表示し、後で天気を取得」するようにCodeを変えることだった


#2 問題と目標を定める

何が問題?

  • アプリのスタートアップが遅い
  • 電話で(メモリが足りなくて)Hang
  • スクロール等の反応


何がゴール?

  • 1、2秒に収める
  • メモリ50MB以下のSystemでの動作
  • Responsiveなスクロール


#3 UWPへの移行

  • Win10では多くのパフォーマンスの改善がシェル・アプリ共に行われた
  • 多くのパフォーマンス最適化コードがWin10に入っている
  • x:Bind, x:DeferLoadStrategy 等はUWPだけで使用できる
  • UWPへの移行でスタートアップ時間は15%-30%、メモリ使用量は25%-40%の改善が見られる

#4 アプリのプロファイリング
  • プロファイリングを行い、どこが問題点かを明らかにする
  • VS2015を活用…タイムラインツール、遅いコードの同定、メモリ使用量の確認、診断
デモ:お馴染のFabrikam
起動から画面表示までがやたら遅い
DebugのAnalyzeDashboardを表示 ここからTimelineを選択して「Start」…実行した結果のタイムラインビューが表示される 起動から終了までの各タスクに掛かった時間 アプリのコード、Layout, Rendering, etc UIスレッド内の割合等 Parsing…SystemがXAMLのParseに掛けてる時間
このデモではスタートアップに数秒掛かってる Layoutにやたら時間掛かってる

#5 スタートアップの改善

  • 初期化タスクを別スレッドに移す
  • ロード中・進行中表示を上手に使う


#6 要素の数を減らす


  • ざっくり言って、1000エレメントで1秒くらいの感じ 1万エレメントなら10秒くらい掛かっちゃう
  • スタートアップ時にParseに掛かる要素の数をチェック
  • 使って無いスタイルを探す
  • テンプレートをチェック

x:DeferLoadStrategy


  • Win10 XAMLの新機能
  • UIの部分をロードするのに大変便利
  • 特定のエレメントツリーのインスタンス化を遅らせる事ができる
  • MVVMで特に便利

使用例

  • XAML...<StackPanel x:Name="hogePanel"... x:DeferLoadStrategy="Lazy"></StackPanel>
  • Codebehind...var deferredPanel = FindName("hogePanel"); ←-ここでインスタンス化


デモ:エレメント数の削減(略)

(飽きてきた…)

#7 仮想化

  • List/Gridviewの仮想化を使うべき
  • 落とし穴…ScrollViewerの中にListViewを置く、ListView/GridViewで使ってるPanelを変更する

#8 binding

  • DataTemplateは極力シンプルに
  • x:Bind...compiled time databindingを使う x:BindについてはDay1 のSessionに詳しいので略
  • x:Phase, ContainerContentChanging ... 同じくDay1のSession

#9 画像
  • 大きな画像はメモリ食う
  • 大体はFramework側で最適化するが…
  • DecodePixelWidth/Height で必要なサイズにデコードすれ (このあたりはお馴染の話なので略)

#10 テキスト
  • Win10はテキストレンダリングが50%速くなった!
  • 既定で有効
  • 幾つかのTypography Featureは無効にできる CharacterSpacings, Typography, LineStackingStrategy,...  (Win10は既定で無効、と言いたいのだと思う、多分 後のデモと合わせると)
  • 新API IsTextPerformanceVisualizationEnabled ... TextのDebug表示
デモ TextとImage
  • App.xaml.cs で一発IsTextPerformanceVisualizationEnabledを呼ぶ Framerate表示と同じ雰囲気
  • TextがGreenで表示される部分は「速く」表示されているという意味 つまりOK
  • Greenにならない所は遅いという意味 デモではDataTemplateでCharacterSpacingを1に指定していたため、黒表示になっていた
まとめ
  • UWPに移行しよう
  • このSessionのTop10Listに従ってパフォーマンスを改善しよう
  • 更新版のパフォーマンスWhitePaperを出す予定です
  • XAMLとOfficeの組み合わせも速いんだ!ロケットバスだ!詳しくはDay3のSessionで!


3-705 Harness the Full Power of Digital Inking in Your Universal Windows App with Ink Recognition, Advanced Ink Processing, and More


Xiao Tu, Francis Zhou
お薦め度 2
http://channel9.msdn.com/Events/Build/2015/3-705


DirectInk... Rich built-in functions, flexible APIs, extensible design

デモ

  • CodeでInkCanvasのInkPresenterに色・太さを持つペンを作ってる
  • (Stroke・Colorを選ばせる組み込みのツールパレット的なのは無いのかな?)
  • 文字列への変換はInkRecognizer
  • 手書き…StrokeはStorkeContainerが保持
  • 35言語の手書き文字認識に対応 デモでは「Microsoft 中文」Recognizerを指定して中国語を認識させている
  • StrokeCollection… ひと塊のStrokeをCollectionにし、サイズを変えて画面の別部分にそのStroke Putが可能 UserDefinedBrushのStroke版みたいな感じ


(後でSlideとDocument読めば充分な感じなので中断)



3-710 Store: Deep Dive on Publishing Universal Windows Apps


Matthew Cowan, Ted Driggs, Jonathan Garrigues
お薦め度 5
http://channel9.msdn.com/Events/Build/2015/3-710


同一アプリの場合、電話・Desktop共通の価格、ストア上の表示、IAP
明日詳しい所をBlogに載せるから見てほしい →

Get ready for the Unified Dev Center dashboard preview and upcoming Store changes
http://blogs.windows.com/buildingapps/2015/05/01/get-ready-for-the-unified-dev-center-dashboard-preview-and-upcoming-store-changes/

↑読んでおくべき

StoreでのDesktopAppのListingは終了との事(UWP Bridgeがあるしね)

Packaging (これはBlogに載って無い所)
ユーザーのデバイスにおいて、Manifestで宣言するこれらの定義を満たすアプリがListingされる
Device Family

  • Universal, Desktop, Mobile, Xbox, Team(surface hub), Holographic
  • それぞれのファミリで必要とする最低限のバージョンを指定できる

プロセッサ

  • ARM, x86, x64, Neutral

Foreground Memory (Optional)

  • アプリをForegroundで実行時に使用するメモリ量を指定
  • 300MB, 750MB, 1000MB, 2000MB

DirectX (Optional)

  • 必要なDirectX APIのVersion, DirectX HardwareのFeatureLevelを指定

Selection

  • 複数パッケージが存在する場合、ストアはManifestのRequirementを満たし、もっとも新しいバージョンのものをPickする
  • DeviceFamilyのVersion、DirectXのVersion等複数ファクタが絡んでくると案外ややこしいので注意


Listing


  • ストア上のアプリの説明文は全デバイスファミリで共通
  • スクリーンショットも「共通」…登録したスクリーンショットは全デバイスファミリで表示される
  • 説明とスクリーンショット以外の要素は全てOptional


デモ…アプリの登録

  • (スクリーンショット、登録上はDesktopとMobileでカテゴリ分けされている)


ハードウェアの必要要件


  • 必要なハードウェア条件を定義するとストアはそれを表示
  • アプリのレビューは、この条件を満たすシステムからの投稿のみを受け付ける
  • タッチスクリーン、マウス、キーボード、カメラ、NFC HCE(?)、NFC、Bluetooth LE、Telephony


Business Store


  • Enterprise Userは自前のBusiness Store内に向け自前アプリを配布可能


Q&A

  • Business Storeについて…詳しくはIgniteで!


2-724 Windows for Makers: Raspberry Pi 2, Arduino and More

Steve Teixeira
http://channel9.msdn.com/Events/Build/2015/2-724

(前半のRasPi2は特にメモする事が無かった)

Project Margherita: Windows Virtual Shield for Arduinoは面白い

  • Shield山盛りのArduinoよりLumia530のほうが安い! (Lumiaは安すぎるしArduinoは部品として使うには高価だヨナ… 物の値段はムツカシイ…)
  • LumiaをArduinoのShiledの代わりにして入力をArduinoに送ってあげる
  • そういう動作をするUWPをLumiaで動かす

デモ:Lumiaのカメラで写真を撮り、BluetoothでArduinoに転送(でも肝心のArduino側表示をセッションのカメラが映してくれないという…)

デモ:Wikipediaから取得した色をArduinoで表示(これもArduino側は映してくれない)

デモ:.NET Micro ... 略

Sessionに出た人はRasPI2+ロボットキットが貰えたようだ よかったね

2015年5月1日金曜日

Build2015 Day1 Session 視聴メモ


セッション見ていて気の付いた所メモ 見たら順に更新するスタイルです
既知の所は特に触れないです(RasPi2でも電話でも同じXAMLで動くんだぜ、とか)

2-629 What's New in XAML for Universal Windows Apps
3-626 App Lifecycle: From Activation and Suspension to Background Execution and Multitasking in Universal Windows Apps
2-650 Developing Universal Windows Apps in Visual Studio 2015
3-635 Data Binding: Boost Your Apps' Performance Through New Enhancements to XAML Data Binding
2-639 Microsoft Passport and Windows Hello: Moving Beyond Passwords and Credential Theft
2-757 Leveraging Maps and Location Across Phone, Tablet, and PC in Your Windows Apps
2-658 Design: UX Patterns and Responsive Techniques for Universal Windows Apps
3-677 Debugger Tips and Tricks for .NET Developers with Visual Studio 2015


2-629 What's New in XAML for Universal Windows Apps

Joe Stegman
お薦め度 5億
http://channel9.msdn.com/Events/Build/2015/2-629

  • 一部のControlはMouse・Touchどちらで触ったかでサイズが自動的に変わる Popup Menu等

新しいコントロールのご紹介

  • Pivot…Mobileでは片手操作、DesktopではTab操作 お勧め
  • ContentDialog…子ウィンドウ的なやつ Modal 
  • AutoSuggestBox…IME, Glyphサポート SearchBoxとは別
  • Maps…Offline, 3D, StreetSidePanorama

Tairolingについて

  • Viewは大体再利用可能だが…Tailoringが要る 幾つかのPatternがあるPhoto等が良い例
  • Pattern…SplitView DisplayMode="a|b|c|d" inline, overlay, ...
  • AdativeTrigger使ってWindow幅に合わせてDisplayModeを切り替えていく(ように自分で書く
  • 別の例…OSのContorlPanel(Settings)
  • 広いウィンドウではアイコンのGrid、狭くするとList ここで注目すべきはItemの中身で、サイズに応じて画像とTextの位置が変わる これはRelativePanelによる実装 今まではTemplate事入れ替える所だった
  • Demo…「SplitViewと、SettingsのItemっぽいRelativePanelの使い方」SplitViewのMainPaneにRelativePanelを使ったItemのListを載せるデモ


  • VSMを使ってSplitViewのDisplayModeを変える(さっきやったべや)
  • DataTemplateの方…このDemoではTemplateにUserControlを使い、その中のRelativePanelの中でVSMの定義をしている へー なんでUserControlを噛ましたんだろう?
  • (LiveCodingでハマるおじさん)

XAML Performanceの話

  • ほんとに速くないとダメなとこでもWin10 XAMLはいけるぜ!mjk!
  • スピード要る所にBinding使う奴はいねえよな!(会場笑)
  • Compiled Bindings...{x:Bind}

その他の新しい所

  • 全てのコントロールのプロパティでChangeNotificationが使える(DPなんだが)
  • PerspectiveTransform3D…スタートメニューで使ってるやつ ぐるっと回す、Parallax
  • Window…Chrome, branding, sizing タイトルバーいじりがXAMLからできる 色を変える、タイトルバーを引っこ抜く、デフォのタイトルバーの代わりに自前のカスタムタイトルバーをセットする等
  • Ink Canvas…TerryのCreepyな写真 Palm Rejection、Smoothingもデフォで入ってるよ!
  • Drag and Drop
  • Demo…GridView上に「3D」の箱が乗って、クリックするとくるっと回る(Rotation)、GridViewをスクロールすると視差効果(Parallax) かっこいい Parallaxいいなぁ 無駄に使ってウザがられたい
  • WebView…こっちでもEdge使う?の?

VSのXAMLサポート向上したよ話

  • デザイナ上で各DeviceFamilyに典型的なサイズを表示できるよ
  • Performance Analyzer
  • Visual Tree Inspector
  • 再びLiveCodingの闇に飲まれるPresenter
  • Demo…ControlPanel(Settings)にVSでアタッチしてVisualTree見てる SpyみたいにOverlayで強調表示 Marginとか弄ることも可能 面白い これ素晴らしいな
  • 他にも改善点沢山(といってリストだけ見せる)…気になるのは Silverlight memory improvements(まじか), Software Bitmap Source(これは今まで欲しがられてた奴?), Improved ScrollViewer APIs(わーい), Framework Element Loading Event, Listview Enhancements


2-631 Introducing Win2D: DirectX-Powered Drawing in C#

Simon Tao
お薦め度 3
http://channel9.msdn.com/Events/Build/2015/2-631


(個人的にWin2D はもうアプリで使っているので新しい所だけ…と思ったけど特に新しい話無かったですね Win10UWP、Win8.1、WP8.1で使えるPCLなDirectX ライブラリ 超便利 今現在ばりばり進化中 ゲーム云々より、Bussiness系で表現力上げるようなデモのほうがいいのではと個人的には思った Unityな世の中だし )


3-626 App Lifecycle: From Activation and Suspension to Background Execution and Multitasking in Universal Windows Apps


Shawn Henry, John Vintzel
お薦め度 1億
http://channel9.msdn.com/Events/Build/2015/3-626

(Win8.1でのALM話は既知としてメモ、新しい所だけ  ただ、今までWin32/Desktopしかやってなかった人は一度お勉強しないとダメな大事なところでもある)

Windows.Application.ExtendedExecution namespaceが追加に

  • 今までのDefferedナントカより細かい?
  • Running→Extension→Not Running、Extension状態に入れることが出来る カラオケで延長入れる的な Extensionが終わるときはRevoked EventがFire 
  • といっても延長できるのは1秒以下みたい

Background Execution

(これまでのあらすじから説明)

  • WP7.5…Agent
  • Win8・8.1・WP8…BackgroundTask
  • Win10…「Background Execution Model」
  • BackgroundTaskは基本的に「TriggerBased」予め登録しといたトリガ発生でタスクが呼ばれる感じ この原則は今までと変わらんみたい
  • Win10ではTriggerがたくさん追加になった BluetoothLEWatcher、AcrivitySensor, ToastNotificationAction、SocketActivity、DeviceWatcher、等々
  • Opportunistic Background Task」の追加…「リソースが許す限り動いてていいよ」!!緩い!!!「ただし実行の保証はない」ハイ DefaultとOpportunistic の二種類になる メモリ積んでる量で使えるメモリが制限される、バッテリセーバー時は動かない等、OSの厳しい管理下にあるのは共通
  • In-Proc Background Tasks の追加 今までは基本BGTaskは別プロセス動作だったが、同じProcessで動けるInProcが追加に
  • Application Trigger の追加…Systemでなく、Appから自分で発生させられるトリガ 相手はOpportunistic Task
  • Socket Trigger Task ... App suspend時はBroker(OS)にSocketを預ける 受信した時点で又BrokerからSocketをもらう 寝る前にクロークに草履を預ける的な

まとめ

  • 仕組みはWin10共通
  • 色々新しい仕掛けが加わった
  • でもリソース限られてるのは変わらんからな!

2-650 Developing Universal Windows Apps in Visual Studio 2015

Navit Saxena
お薦め度 2
http://channel9.msdn.com/Events/Build/2015/2-650

(今までKeynoteで出てきたり、UAPメモでお勉強してたUWP話と大体同じ? 質問に時間とったセッションみたい 略)



3-635 Data Binding: Boost Your Apps' Performance Through New Enhancements to XAML Data Binding


Sam Spencer
お薦め度 5億
http://channel9.msdn.com/Events/Build/2015/3-635


  • Runtime時のReflectionでなく、compile時に解決するBinding
  • XAML上は「x:Bind」
  • Demo:Performance BackgroundColorをBindingでセットする■Borderを1600 個並べる Nobindだと 27msec、Classic bindingだと490msec → x:Bindだと数十msec 速い Profiler で見ても一目瞭然の差 メモリ使用量も減る
  • Strongly typed, PageとUserControl(?どういうことだろう), デフォは「OneTime」
  • Demo Pageに直接乗ったTextblockでx:Bindを使う 
  • SampleをDLすれ!とのこと Classic, x:Bind-OneTime, OneWay, etc... Sampleみたほうが早いねこれ
  • Classicでやってた他ElementへのBindingは直で名前書くスタイル {x:Bind LocalTextBlock.Text} みたいな
  • FallbackValue もアリ
DataConversionについて
  • 文字列へ → ToString()で そらそうだ
  • 文字列から → XAMLのパーサーロジック使え これClassicであったっけ?
  • それ以外でコンバータ
  • Onewayの場合の通知は InotifyPropertyChanged/DP/INotifyPropChanged/IObservableVector このへんも同じか?(自信無い)
  • TwoWayはDPが必要 ただしTextboxだけは特例、LostFocusで飛ぶ?


DataTemplate


  • <DataTemplate x:DataType="model:IEmployee">みたいなDataTypeの指定が要る その中ではx:Bind 何とか みたいに名前で引ける
  • ResourceDictionaryの中で作るには、Dictionaryにx:ClassでCodeBehindを指定する まぁそうだよな型指定誰かがしなきゃいけないもんね  …ただそうすると、それってUCなのではという気がちょっとする
  • デモ リソースディクショナリで定義したDataTemplateを使う んーちょっと気を付ければ普通に使える感じだなーという感想

x:Phase - progressive rendering for list items

  • おおお何か怪し気なのが 前にイカさん言ってたやつかこれ
  • Win10ではx:Phase でレンダリングフェーズを指定できる x:Phase="0"が「無指定」 Demo ここで指定して、ぐりぐりスクロール中はRenderしない的な使い方なのかな?(聞き取れなかった)


Binding for Events


  • <Button Click="{x:Bind Model.foobar.hoge[0].bang}>bang</button>
  • パラメータは無しか、EventParameter object sender, routed...ってやつ No overloading 全てのEventで使用可  これは色々使えそう
  • ICommand/EventToCommand behavior を置換可能、だがCommandParameterは渡せない CanExecuteもダメね  (僕はMVVM者では無いのでこのへんあまり気にしないが)
  • デモ EventBining

Binding Lifecycle

  • Bindingの初期化はLoadイベントで行われる Binding.Initialize() (これは明示的に自分でやる必要があるのかな?わからん → 自動生成っぽい) AsyncものはBindings.Update()  StopTracking()で一時停止、Update()で再開  一時停止中にPropety変更になった場合はどうなるんだろう?
  • OneTime bindingはOneWayより軽い その上OneTimeでもUpdate()は使える お得やな
  • ListのBindingではINPCよりINCCがイイヨといってるけど INCCって何?後でお勉強だ
  • 全部のNodeがChangeNotification要るわけじゃないよね?
  • x:Bindのコードはシェアされる (要素ごとに同じBind先を使ってたらそこのロジックはシェアされるという事かな?)


まとめデモ x:Bindを使う場合の自動生成コード MainPage.g.cs を見てみようぜという企画  PageにIComponentConnectorが生えていて、Updateやなんかがここに入っている OneTime/OneWayの場合も  自動生成が随分色々仕事してるなーという印象

こんなときどうする


  • RelativeSource=Self, ElementName=... → 直でElementNameを書く(上で出てた奴)
  • RelativeSource=TempaltedParent → x:Bindではサポートしない TemplateBindingを使うべき
  • Source / DataContext → x:Bindでは固定、子エレメントも変更不可 (DataTemplateは別)


ClassicBindingを使う場合とは


  • 色んなObjectを突っ込んで、それぞれが同じ名前のProperty持ってるときはClassicのが便利(「Title」とか)
  • JsonみたいなUntypedものを突っ込む場合 x:Bindでは無理
  • 「動的なBindの追加と削除」はx:Bindでは無理
  • Styleの中はx:Bindでは無理 Style中のDataTemplateでは可(?)


今後の展望(予定は未定)


  • functions in binding expressions  コンバータではなくBindingそのもので
  • DataTemplateのCodeBehind…今だと他からアクセスしづらい(できない?)けど その辺を何とかしたい的な話
  • Phasing…DataTemplateだけでなく他のControlでもやりたいなと
  • Dictionary…json/xmlでも出来ないものか

「xBindSample」がSDKに入ってる


2-639 Microsoft Passport and Windows Hello: Moving Beyond Passwords and Credential Theft


Anoosh Saboori
お薦め度 2
http://channel9.msdn.com/Events/Build/2015/2-639


Fingerprint, Face, Iris - Windows Biometric Framework で動く (ISVはこのフレームワーク上に自前のもの作れるのかな?CredentialProviderみたいな感じで そのあたりを知りたい…と思ったけど 使い勝手等メインの話だったので略)


2-757 Leveraging Maps and Location Across Phone, Tablet, and PC in Your Windows Apps


Mike Ammerlaan, Rohan Thakkar
お薦め度 2
http://channel9.msdn.com/Events/Build/2015/2-757


今はBing Maps APIで行っているReverse Geocoding…緯度経度→住所名への変換が今後どうなるか知りたい Locationsとの取り合い等も(Win8ではLocationにGeocodingのクチだけ開いたけどReverse Geocodingは出来ず、BingMapsAPIが必要だった)


  • Win8.1では5種類(here含む)あった地図が10では1つになるよ
  • Download、StreetView、Route、3D…
  • One service token ... www.bingmapsportal.com
  • Windows.UI.Xaml.cControls.Maps / Windows.Devices.Geolocation / Windows.Services.Maps   ... (…そんなにUnifiedって感じでも無いが…)
  • LaunchUriAsyncで起動が可能になった 別窓で地図出すだけならこれで充分かも
  • Location ConsentがOS持ち、リクエストベースになった これは良い所
  • Reverse Geocodingは結局わからなかった 自分でAPI叩けばいいんだけども


余談 Mapsを見てると微妙に不安になるのは、HTMLベースで出来るサービスをXAMLで再構成したものは魅力的なんだろうか?という一つの実例だからなのかもしれない いや、機能的にはOSの基盤地図サービスとしては全く文句のないレベルだとは思うが



2-658 Design: UX Patterns and Responsive Techniques for Universal Windows Apps


Jeff Arnold, Carmen Zlateff
お薦め度 5
http://channel9.msdn.com/Events/Build/2015/2-658


  • マウス・タッチでPopupMenuのサイズが変わる件がここでも
  • Pixel Scaling…「Effective Pixel」の件 画面までの距離とピクセル密度でスケーリングを決めるよねと ViewingDistanceはDevice Familyに依存するという ただ難しいよなこれ 動画11分あたり 別セッションで詳しくやるぞと
  • Effective Pixel とサイズの境界…画面幅が…320epxまでが「SmallScreen」…電話に限った話ではなく、PC上の小さいウィンドウもここで考える、720epxまでが所謂タブレット的な2Pain表示可能なもの、それ以上…と三種類くらいで考える
  • 例・MailAppの場合…Smallがメールの中身だけのView、Midがタイトルと内容の2Pane, Largeは加えてフォルダのSplitView Paneも展開


UWP App Pattern


  • 3 elements .... Content / Commanding / Navigation フォトでいうとContentが写真エリア、Commandingが上下AppBar、NavigationがSplitViewのNavPane


UWPで良く使われるNavigation Patternの紹介

Pivots

  • 一番使い出の良さそうな子
  • Large・Small どちらにも馴染む 片手UIには便利
  • 中身がHorizontalに移動するものは避ける
  • 「No more than 6」(制限ではなく、6つ以上は混乱するからやめとけという話)
  • どのInputにも馴染む


Tabs

  • Controlの中身としてはPivot SelectonのボタンUIを別に作る Win10のClockがこれ
  • Small Screenに適する 片手UIには便利 Pivotよりは場所を取る
  • Large Screenでは無駄な余白が増える
  • どのInputにも馴染む
Hub
  • XBOXのDashboardや、Win8のStoreのようなやつ
  • 多くのセクションを選択させる場合に適する
  • どのサイズにも適する 片手UIには便利
  • コンテンツ消費型アプリに適する
  • タッチとゲームコントローラーに最も適する
  • (別セッションでも説明あり)

Master-Detail
  • メールで良くあるパターン PeopleHubでも
  • Win8 TemplateのItemList-DetailViewみたいなやつ
  • Smallでは1ペイン、Largeでは2ペイン表示
  • どのInputにも馴染む

Hamburger
  • (アンドロさんその他で良くあるパターン)Win10ではフォト、マップ等多くがこれを使う
  • Content ページそのものをNavigationさせたい時
  • 実現にはSplitViewを使う事が多いだろう
  • どのInputにも馴染む
  • 悪いことは言わないからボタンは左上につけとけ


Commanding


  • Context Menu
  • Command Bar
  • Mobileのお勧めはBottom CommandBar
  • AppBarと異なり、CommandBarはPageでなくPane毎につけられる Pane毎で使うのがお勧め
  • SecondaryItemsでCommandBarからメニューを生やすことも可能


Content

  • 別セッションで詳しく! → Timのやつ

3-677 Debugger Tips and Tricks for .NET Developers with Visual Studio 2015

Andrew Hall
お薦め度 1億
http://channel9.msdn.com/Events/Build/2015/3-677

スライド4枚だけ、残り50分でひたすらデバッグのデモを見せるストロングスタイル


  • Diagnostic Tools Window 
  • PerfTips…デバッガで1行進めるたびに掛かった実行時間が出る 凄まじい便利さ
  • UI Debugging Tools for XAML - Visual Tree Inspector, Live property Explorer, アプリの部分をクリックするとそこがツリーで展開される (会場内拍手)
  • Android Support…VS Emulator for Android C# Xamarin, C++, Cordovaサポート
…と思ったら割と基本的なデバッガの使い方話が続くので途中は飛ばした
  • CallStackWindowではParameterを表示できる
  • FullScreenは便利
  • TaskWindowを使おう
Speakerが熱心に喋る喋る 今日見た中で一番早口 






2015年4月30日木曜日

Build2015 1日目メモ(何か作らないと死んでしまう人用)

MSの戦略だのUI哲学だのHoloLensだの、大所高所からのお話、未来のお話には特に触れないです。今何か作らせろや!!!という人用。

VS2015RC

出た GoLive
DL community, enterprise RemoteToolsはページの下のほう
https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs

但し、現状以下の問題が有るので・・・新規にUWP Project作るのは中々ハードルが高い。

解説ではWin10SDKインストール要らないよ!となっているが、実際にはVS2015RCで新規にUAP Projectを作ろうとするとSDKのインストール解説ページに飛ばされ、コントロールパネルのプログラム追加削除→VS2015 RC→Modify SetupからSDKをインストールすれと。
で、実際やってみると…インストールの最後に「ユーザーによって取り消されました」というエラーになってしまいインストールできない。えー。

ここに多数報告が上がっているが現状回避策は無い。
https://social.msdn.microsoft.com/Forums/en-US/fd16256b-6a36-4aab-ac88-13d367471701/

→ 直るまで、以下のページ右下のStandaloneSDKを使ってくれというガイドがフォーラムに出ていました。

https://dev.windows.com/en-US/downloads/windows-10-developer-tools

UWP

Universal Windows Platform
今までUAP, Universal Application Platformと呼んでいたけどこれからこっちになるのかな?

既存ProjectのMigration/Update
方法は色々載ってるんだけど、上に書いた問題があるのでまだお預け状態。もどかしい。
https://msdn.microsoft.com/en-us/library/dn975273(v=vs.140).aspx

※DeviceFamilyとXAMLの件
お勉強メモ
http://ddlgjp.blogspot.jp/2015/04/windows-10-uap.html
で触れたDeviceFamily毎のXAMLの件ですが…デモでやっていたような、電話を大きいモニタに繋げてPCの様に扱うという使い方を見せられると…やっぱこう、基本線としてはOne WindowsとしてRelative Panel 駆使して頑張るのが(MS的には)正しいのかなぁという気がしますね。

Developer Mode


今までのWin8~以前のWin10 Buildでは、Appをストア以外から入れる…サイドロードする場合、「開発者ライセンス」を当該Systemで取得する必要があった。今回のWin10 10074では「開発者モード」に変わった。
が、現状開発者モードのSettings UIは問題があるので、


  • Win10 Desktop: ポリシーエディタで手動で変えれ
  • Win10 Mobile: Windows Phone Developer Registration Tool を使え

というお達しが出ているので注意。
(PhoneのRegistrationToolは大体 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Windows Phone SDK 8.1 あたりに入っています)

Enable your device for development
https://msdn.microsoft.com/library/windows/apps/xaml/dn706236.aspx

Store

解説
Distributing Windows Apps to the World
http://blogs.windows.com/buildingapps/2015/04/29/distributing-windows-apps-to-the-world/


  • Windows/Phone Store, PubcenterのDashboardが合流する
  • 2013までは追加SDKだったPubcenterのAd、Ad Mediatorが最初からVS組み込みになる
  • HTMLベースのCorporate Storeが出来る
  • Win10 UAPの受付はまだダメ
  • App用のアフィリエイトプログラムを開始するんだと。まじか。


Dashboardのプレビュー版がオープンしている。今上げてるものの確認する機能のみにアクセス可能。
https://dev.windows.com/en-US/publish/dashboard-selection


UWP bridge

AndroidのApp, Objective-CのiOS App, 'Classic Windows Apps', web をストアに載せて動かそうぜ、という話。

Introducing the Universal Windows Platform Bridges
https://dev.windows.com/en-US/uwp-bridges/

Android, iOS, 'Classic Windows Apps' については「夏に詳しい情報出すよ」それまでは興味のある奴はメールを寄越せスタイル。

WebAppについては夏にRelease。

…Win10夏リリースという話がまだ生きているなら、WebApp以外の三者は別スケジュールなのかな?かな?という気がするけどどうなんでしょう。

また、UWP(UAP)のDeviceFamily Model… 全ファミリがCoreをサポートし、ファミリ事に追加のExtensionをサポートする…というスタイルと、このUWP Bridgeがどう折り合いつけるのが興味があるんだけど、そういう話はまだ出ていない。夏まで待てと。





2015年4月6日月曜日

Windows 10 UAP : Photo っぽいSplitView を作るには(途中)

 Win10 UAP のお手本として参考にしているMicrosoft の「Photo」、良く見ると結構謎な動きをしていて…


Win10 の Photo
ダンジョン出会いの奴面白いですね作画もいいし(関係無い)

  • 動作からすると画面上部のバーはCommandBar (※)
  • CommandBarの上には基本AppBarButton、AppBarToggleButton, Splitterくらいしか置けないはずなんだけど何故か「Collection」という字が乗っている
  • CommandBar、の親のTopAppBar・BottomAppBarはPageに生やすので、その上に何か乗ったりはしないはずなんだけど、SplitViewのPaneを展開すると上に被さってるように見える
※ CommandBar・AppBar共に見え方がWin8.1から変わっています 既定はボタンが見えてる状態の「Compact」State  昔のツールバーチックな使い方が想定されてるように見えます。



どうやってんでしょうね?


うーnうーnとそれっぽいのを作ってみたのが下です。

フォトのまねっこ


実現のキモとしては、


  • CommandBarのCompositeModeをMinBlendにして、他のElementの上書きを許す 又下の文字を透かす
  • そのままだとAppBarButtonのHoverが効かないので、ボタンのCompositeModeはそれぞれSourceOverに設定
  • そのままだとSplitViewのPaneを展開したときにCommandBarのBgColorが透けて見えてしまうので、PaneのOpen・Closeに合わせてCommandBarのLeftMarginを変える(ダサい…)
  • 「CommandBar上の」TextBlockは、実はCommandBarでは無くその下のRelativePanelに置いてしまう(ダサい…)


現状、動作の面でPhotoと違うのはCommandBar右端の「…」のHoverEffectが効かない所です。


ただ、ご覧になると判るようにかなり無理やりなので、今後の保守性・拡張性、また電話用にVisualState をくっつけていくと破綻するのでは…等、大いに不安が残る所です。
話半分で見て下さい。


 



    
        
               
    
    
        
                
                    
                        
                            
                            
                            
                            
                            
                                
                            
                        
                    
                    
                        
                        
                    
                
            
                
                    
                        
                            
                            
                            
                            
                            
                        
                         
                    
                        
                            
                                
                            
                        
                    
                
            
        
    






加えて、CodeBehindでCommandBarのMarginを変えています。

 

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (mySplitter.IsPaneOpen)
            {
                cbTop.Margin = new Thickness(mySplitter.CompactPaneLength, 0, 0, 0);
                mySplitter.IsPaneOpen = false;
            }
            else
            {
                cbTop.Margin = new Thickness(gdSplitterPane.ActualWidth, 0, 0, 0);
                mySplitter.IsPaneOpen = true;
            }
        }



2015年4月4日土曜日

Windows 10 UAP お勉強メモ

5/23 追記… //build 2015から一か月経ち、MSDNのドキュメントも大分整備されているので…ここの古い記述よりも、MSDNやBuild セッション等、MSの一次情報を見て頂いたほうがいいかと思います。

Build2015 Day1 Session 視聴メモ
http://ddlgjp.blogspot.jp/2015/05/build2015-session.html

Build2015 Day2 Session 視聴メモ
http://ddlgjp.blogspot.jp/2015/05/build2015-day2-session.html

(三日目は見る前にMSDN側の文書が出てきたので結局見てないです)

↓のメモ、そんなに外してはいないのですが… 一個大きく外しているのはデバイスファミリの扱いです。結局ファミリを直で読めるAPIは存在しており、ファミリ毎に別個のUIを作ることができます。

ただBuildのセッションを見ていると、デバイスファミリとUIの持ち方については場合によりけりなのかな、という感じがします。

XAML Teamのセッションで強く打ち出されていたのは、各デバイスファミリで共通のXAML を使用し、画面サイズのみに依存して画面構成をAdaptiveに変更することで基本的にはいける、という考え方でした。
ファミリ毎に異なるUIを複数持つのは手間であり、また、Continuumのように「Win10 Mobileで動作するが、大きなモニタに接続した場合はWin10 Desktop『のような』UIを表示したい」 場合を考えると、安易にデバイスファミリ毎にUIを別に持つのは確かに危ない感じがあります。

一方、「SurfaceHub」…80インチの巨大画面を持つWin10システム、デバイスファミリは「Windows Team」…に合わせたアプリを書こう、というセッションは、あっさりデバイスファミリで場合分けして別UIをもりもり作る、というデモでした。 SurfaceHubの場合 Win10 Desktop / Mobile とはアプリのUsage Model が大きく異なるため、これもまた理にかなった書き方なのだろうと思います。

※ ContinuumについてはXAMLのUI Elementに怪しい感じのPropertyが生えているようなので…この先説明がされると思うんですが、現状まだよくわからん所はあります。


以下は4月頭時点での記述です。

-----


Windows 10 UAP について、2015年4月4日現在で一番詳しく書いているのはこの文書と思われます。

Guide to Windows universal apps
https://msdn.microsoft.com/library/windows/apps/dn894631.aspx

これを読んで自分なりに気の付いた所をまとめたよというお勉強メモです。//Build 前でもあり、予想・憶測が多めに含まれているのでご注意下さい。

※分量が多くて全部見切れていないのですが、Microsoft Virtual Academyの動画

A Developer's Guide to Windows 10 Preview
http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10-preview

こちらではみんな大好きJerry Nixon がかなり突っ込んだ所まで動画で説明してくれてるようです。これもお勧め。字幕が無くてつらいけども。

※2015.04.19 - デバイスファミリをRuntimeに見分ける件について追記しました
※2015.04.25 - 複数のXAMLでCodeBehindをShareする件について追記しました

★★★


Win8.1 / WP8.1 "Universal" app

まず、今までの「Universal」Appについて軽く復習して何が違うのか理解の助けにしようと。

  • Win・WPそれぞれの実行バイナリは別、プロジェクトも別
  • 両者を1つのソリューション内に整理し、共用コードはShared フォルダに納める
  • Shared内での差分はIFDEFで吸収

物凄く雑に言うと、二つの別バイナリを楽に作るための仕組み。

こう書くと結局設計時に分けてるだけで全然別じゃん?という印象であるが、実際作ってみるとUI等非共用部でも…WinRTとしては同じところが凄く多いので簡単ではある。
ただ、似たコードが増えるので保守的にはあまり宜しく無い。
CodeBehind から又ViewModel として共通部分を分離していけば綺麗にはなるが、毎回毎回MVVMだなんだと頑張るのもちょっとなーという所はあった。


Win10 UAP


実行時にデバイスのCapabilityを見て使うAPIを判断する、One Binary形式。




ルートにいるのがUniversal。
子供の各デバイスは全てUniversal App Platform としての機能と、加えてデバイス特有の機能を「Contract」として持つ。

※各Contract は排他では無い事に注意。例えばWindows.Devices.SmartCards.SmartCardDeviceContract はPC・電話両方に同じものが存在する。

VS2015 でテンプレート「Win10 UAP」で作成したアプリは「.NET for Windows Store App」と「Universal App Platform」をReferenceとして持つ。

このUniversal App Platform のNamespace範囲内で書く分には、それは上に挙げた全部で「動作」する。

(「動作」…動くけども、UIとして各デバイス用に作りこむかはまた別の話と思われる。この辺りの話は下のほうで又触れる。)

今までのWin8.1 / WP8.1 で言えば、例えばWindows.Storage, Windows.Storage.Stream 、それとUI…GridViewであるとか。そういう基本的な所はUniversal App Platform に格納されており、これらだけを使う分には Win10 では全てのDevice で使う事ができる。はず。


各デバイス特有の機能を使う場合、設計時にプロジェクトへExtension 単位で追加することになる。
現在使用できるのは

  • Windows Desktop Extension SDK  (所謂Win32 DesktopApp の事ではなく、PC・タブレットの事)
  • Windows Mobile Extension SDK  (電話 だがドキュメント読んでると、こっちに入る小さなタブレットも想定には入っているようだ)
の二つ。
例えばPC・電話両方で動くOne Binary なアプリを作る場合、上二つのExtension 両方をReference として追加する事になる。

それぞれのデバイスが対応するContract 一覧はSDKManifest.xmlに書いてある。XBOX・IoT のExtensionはまだ拾えていない。


Desktop…PC・タブレット等 がサポートするContract

Mobile 電話がサポートするContract



実行時のCapability 確認


設計時から分かれているWin8.1/WP Universal とは対照的にUAP はOne binaryであるため、実行時にDevice のCapability を確認する作業が必要になる。

そのためのAPIがWindows.Foundation.Metadata.ApiInformation

型・イベント・メソッド単位で「これは現在実行中のデバイスで使用可能か」を取得し、OKなら使ってよし、という書き方が可能

Windows.Foundation.Metadata.ApiInformation
IsTypePresent
IsEventPresent
IsMethodPresent
...

ただメソッド単位とかやってられんので、IsApiContractPresent 、Contract 単位で見るのが現実的な感じ。


手元のVS2015で試してみた様子


例えば、PC・電話 両方のExtension を追加したアプリで、電話だけにある機能 Windows.Phone.StartScreen.DualSimTile を「PC上で」使おうとした場合…

var obj = new Windows.Phone.StartScreen.DualSimTile();

実はこれはPCで実行してもエラーにならない。
こいつを

await obj.UpdateAsync();

とすると、ここで初めて例外となる(DualSimTile ではたまたまコンストラクタで何もしてないからエラーにならないだけかも。ただインスタンスとして作れてしまうことは判る)。

勿論、正しい書き方は上で出たAPIを使い、

if( Windows.Foundation.Metadata.ApiInformation.IsApiContractPresent("Windows.Phone.StartScreen.DualSimTileContract", 1, 0)
{
  // hogehoge
}

というように、デバイスのCapability を見ることになる。

なお、Windows.Foundation.Metadata.ApiInformation には特にメタデータ変わったイベント等は無いので…アプリ動作中にデバイスが変わる心配はしなくて良い、はず。


Extension と Contract …デバイス間の境界はどこにあるのか


ここまでで気づくのは、設計時と実行時でCapability の粒度が異なる所。

  • 設計時  Extension  デバイス種別単位
  • 実行時  Contractが最大  各機能単位

(おそらく)実行時にコード上で「もしデバイスが電話なら」「もしPCなら」と切り分けができるようなAPI は用意されていないように見える。最大の単位はContract。

※もしあったらごめんなさい。ただ今回の見ててもそれっぽいのがなく、またWin8.1/WP8.1の時もWindows.Security.ExchangeActiveSyncProvisioning.EasClientDeviceInformation みたいな妙な所にしか無かったので…意図的に作って無い感じがするんですよねこれ。One Windows だから?

※2015/04/19 追記
以下の記事によると、Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValuesKey"DeviceFamily" にファミリ名が入っているとの事です。実機でみた所、PCでは"Desktop", 電話では"Mobile"が入っていました。
Using Custom Visual State Triggers
http://www.sharpgis.net/post/2015/03/24/Using-Custom-Visual-State-Triggers

※2015/04/25 追記
以下の記事によると、
特定のDeviceFamily用にXAMLを持つことが可能であり、またXAMLは一つのCodeBehindを共有できるとの事です。

デバイスファミリ名のフォルダを作り、そこに同名のXAML(のみ)を置く
例)フォルダ'DeviceFamily-Mobile' 内に’MainPage.xaml'を置く
CodeBehindはRootのMainPage.xaml.csをシェア

又は
XAMLのファイル名をIdentifier付きにする
既定のDeviceFamily用→「MainPage.xaml」
特定のDeviceFamily用→「MainPage.DeviceFamily-Mobile.xaml」

(記事にある「XAML Viewの追加」メニューは僕のVS2015CTP6には無く、手動でフォルダにXAMLをコピーする必要がありました。)

Building adaptive layout in Windows 10 with RelativePanel and AdaptiveTrigger
http://blog.galasoft.ch/posts/2015/04/building-adaptive-layout-in-windows-10-with-relativepanel-and-adaptivetrigger/


電話用のMainPage.xaml がフォルダ DeviceFamily-Mobileに置いてある様子

XAMLのファイル名にIdentifierつけるのもアリ
CodeBehindは共通のMainPage.xaml.cs
既定の3カラムレイアウトがDesktopで動いている様子

電話用1カラムが動いている様子
(ScreenCaptureが動かないので写真です…)




例えば実行時にExtension 単位で見分けることが出来れば便利かもしれないが、Extension は結局Reference であるため…設計時にそれを追加したという話でしかない。つまり「アプリが走っているこのデバイスで使用可能かどうか」という情報では無い。

今回追加になったContract ではWindows.Fountation.Metadata.ApiInformationによってデバイスがその機能を実行可能かどうか、(アプリ)実行中に知ることができるようになったと。そんな理解で良いのではないかと思う。

また、Contract がこのように実行時にCapability を提供できるということは、デバイス自身がメタデータとして「自分は何を実行できるのか」情報を持っているという事でもある。

今のところは電話・PCで大別して「電話ならこれらのContractを全てサポート」という切り方だけども、将来的には「電話だけどこのコントラクトをAdditionalにサポート」みたいなデバイスも作ることはできるのかもしれない(出す出さないでなく、APIのありかたとして可能という意味)

UIと入力


ここまで見てきたCapability についてはデバイスにより有り・無しの厳然とした違いがあり、コードは実行時に確認することができた。

だがしかし、UIと入力については様子が随分異なる。

新規に追加されたRelativePanel と、拡張されたVisualState とInkCanvas 等を駆使してUnifiedな一つのXAMLを、対象とするデバイス全てについて動かそうという考え方に見える。つまり、XAMLを「分ける」…Win8.1/WP Universal Appの様な「電話用XAML・PC用XAML」的な作り方はあまり想定されていないように見える。

勿論、電話用・PC用XAMLを作り分けページ遷移時に切り分ける、という方法はテクニカルには可能かもしれない。
だけれども、上のExtension とContract の扱いで分かるように、Win10 UAP では実行時環境を「デバイス単位」で切り分ける手段が(おそらく)無いため、間接的に「電話にしかないContract があるから電話」という切り方にならざるを得ず…この方法は可能だが正しいとは言いづらい。DualSimTile を持つPCが出てこないとは言えない。

むしろ、作り分けをせざるを得ないのならそもそもアプリを一つにまとめるのが無理な話で、アプリ別々に作ればいいのでは?と。UAP はそういうスタンスなのだろう、多分。


ストアへのDeploy(まだ情報が出て無い部分)


ここはまだ情報が出ていない。
1バイナリのUAPが完成したとして、それをストアへデプロイする際デバイス種別はどうなるの?ストアが勝手に分ける?その場合スクリーンショットは全デバイスで撮るの?全部で撮るんなら超めんどくせえな!!的な謎な部分は多い。

上の例で言えば、UAPの範囲内で作ったので動かせば全デバイスで動作はしてしまうけども、UIのサイズとしては電話しか想定していないアプリ、というのは当然存在するはずで、デプロイ時に開発者が「このアプリはこのデバイス用」と宣言する、のが自然な形なのではと思う。

また、Win8.1/WP Universalのように「バイナリ・パッケージは別だが、AppIDを共有しているので購入情報やRoaming Storageを同期している」電話用・PC用 Win10 UAP、という形もサポートされていると便利だと思うけど。どうなのかな。

余談


結局、Win8.1 / WP8.1 の 「Universal」Appは僅か1年でお役御免となった訳ですが…というか、MFC で10年以上ご飯食べられていた時代を思うとびっくりしちゃいますね。





2015年3月30日月曜日

アプリ開発に失敗した話

こんなの出来たよ!もいいけど、たまには失敗についても語ろうぜという企画です。

どんなアプリ(のつもり)だったか


WiFiSD カード上にインストールするWeb アプリケーションです。
 (※Windows Store Appでは無いです)

一般に、WiFiSD カード上の写真をブラウズする際、Exif情報を取得するには一度画像をホスト(PC・スマートフォン等)に転送する必要があります。1枚のサイズが数MB~数十MBになる最近のカメラではそれなりに時間が掛かります。

そこで、WiFiSD カード上でLua スクリプトによりExif 情報を抽出し、ファイルとして保存しておけば便利だろうと考えました。
画像1枚あたりのExif情報はせいぜい1KB程度ですから、カード内の画像全ての情報を取得し、Exif 情報…露出補正のEV値、シャッタースピード、焦点距離、使ったレンズ等でカテゴリ分け・並べ替えも現実的な話になります。

実際、自分が外でカメラ+WiFiSD カード+スマートフォン・タブレット で使う場合、「あの時EV すこし弄って撮ったあの写真を原寸で確認したい!」と思っても、それを「探す」には結局何枚も時間をかけて転送するか、又はカメラの小さい液晶で探すかしなければならず…これはあるべき姿では無いだろうという問題意識がありました。

なお、WiFiSD カード上にインストールし、基本インターネットには接続していないという形式上、所謂ストアのような支払や、広告表示等による収益化は困難です。
このため、このアプリについては…DLページにPaypalのリンクでも貼り、便利に感じてくれたら少し払ってください、くらいが現実的な所かな…程度に考えていました。

開発計画


開発に当たっては、大ざっぱに3段階で進めようかなという計画でした(このあたりMSCC の効果が見られる)。


  • Phase 0 Jpeg 画像からExif 情報を抽出しJsonファイルで書きだすLua スクリプトの製作(PC上のLua 環境で)
  • Phase 1 WiFiSD カード実機での動作確認、摺合せ
  • Phase 2 WinJS を使ったWebインターフェースの作成


0・1については合わせて2週ほど、2は各OS上のWebブラウザ動作確認が手間なので1か月程度、全体では2か月くらいで出来るかなという目算でした。なので、もし継続していれば3、4か月は掛かったかもしれません。

Phase 0

少しググったところ、「Luaだけ」で書かれたExif 抽出コードはどうも存在しないようなので自前で書くことにしました。
Lua スクリプトを触るのは初めてで、そもそもバイナリファイル読めるの?というレベルでした。が、Lua はシンプル故理解しやすく、Exif の仕様書を横に見ながら進める事でIFD0、Exif・GPS・Interoperability IFD をデコードしてファイルに落とすコードが出来ました。

なお、JPEG・Exif構造の理解にはこちらのページが大変、大変参考になりました。
JpegAnalyzer Plus オンラインヘルプ
http://hp.vector.co.jp/authors/VA032610/contents.htm

Phase 1

WiFiSD カード上のLua 実行環境でのExif 情報抽出自体は成功しました。

が、
原因は判りませんが、WiFiSD カード上でスクリプトを動かすとWiFiSD カードがPC・カメラからアクセス出来なくなる、という現象が頻発しました。最初はファイル書き込みアクセスが宜しくないのかな?と、ファイルサイズを減らす・頻度を減らす等試していたのですが、一度試行する毎にアクセス不可→カード再フォーマットという状況に陥っていました。
最後はファイルの読み込み・Exif デコードのみを行い書き出しはしない、というスクリプトを試しましたが、それでも状況は変わりませんでした。十数回のトライ&エラーの後、遂に再フォーマットすら出来なくなってしまいました。

後で気づいたのですが、
Segmentation Fault 氏が遭遇した現象に近いものであったようです。
出たばかりという事もあり、なかなか気難しいカードでした。

新たにWiFiSD カードを買ってくる、という手もあるにはありますが…

  • 4000円の追加出費は痛い
  • 同じFirmware なら新しいカードで試しても結局同じでは?

という事もあり、ここで諦める事にしました。
無念。

Phase 2

Microsoft のJavaScript Framework WinJS を使い、Webブラウザ上にStore App のようなフラットなUIを出せたら面白いだろうなータッチでも使いやすいしAndroid やiOS でも動くし~~~でもWinJS 実際使ってる人見たことねえな~ホワワワーンと考えていたのですが、妄想だけで終わってしまいました。

教訓

ハードウェアは壊れることがある

余談

最初はWiFiSD カード についての記事として書いてたのですがどうも違和感があり…よくよく考えてみると、WiFiSD カード飛ばしてしまった事よりも、それでアプリを作られなくなった事が自分は残念だったのだと気づいて書き直したのでした。



2015年3月14日土曜日

FlashAir W-03 の WebDAV 対応について

東芝さんのWiFi SDカード FlashAir、第三世代の「W-03」が発売になりました。
SDカード「自身が」Lua スクリプトを実行できるという大変趣味的な(でも某高音質カードよりは真っ当な)製品です。

FlashAir W-03
ちなみにパッケ・説明書に日本語が無いチャイナ仕様?は
日本語の正規品より安いです

本稿は、FlashAir W-03のもう一つの新機能「WebDAV 対応」について、使い方を考えてみようぜという趣旨の記事です。

注意


この記事、クライアント側のWebDAV 実装については、Windows 8.1のみの話です。他のVersion・他のOSでは話が違う可能性が大いにあります(例えば、昔のWindowsではWebDAV でサムネイル表示出来なかったような記憶があります)。

FlashAirとは?WiFiSDカードとは?


WiFi アクセスポイント と、HTTPサーバ を内蔵したSDカードです。これをカメラに入れ、PC・タブレットやスマートフォンからこのアクセスポイントにWiFi接続することで、内蔵HTTPサーバから今撮った写真を転送できるという便利な製品です。

WebDAV とは?


HTTP 経由でディレクトリのブラウズ・ファイルの転送を行うプロトコルです。
物凄く雑に言うと、HTTPで流せるFTP的な感じです。

  • サーバー側 Apache やIIS の様な有名どころではほぼサポートされています。今回、FlashAir W-03 がこのサーバー機能をサポートしました。(※1)
  • クライアント側 Windows ではかなり前から対応しており、エクスプローラーからネットワークドライブの様にWebDAV サーバに接続すると、UI上ではローカル フォルダのファイルと同じような操作が可能になります。(※2)(※3)


※1) FlashAir 第一・第二世代でWebDAV 対応の予定は無いとの事です。

※2) FlashAir のWebDAVでは、PC から FlashAir へのファイルコピー、並びにファイル削除は出来ません。FlashAir の場合、カメラに挿したまま使うのが前提なのですが…カメラ側からのアクセスとバッティングしてしまい、最悪ファイル破損に至る可能性があるためこういう設計になっている、という説明がされています。

※3)ネットワーク接続後は、WinRT API の Storage Class でもローカルフォルダ同様のアクセスが可能です。

Webホスティングサービスにファイルをアップロードする場合など、知らず知らずの内に使っていた人は多いのではと思います。

ですが、「本当の」NASの様なネットワークドライブ…SMB接続 に比べると結局はHTTPなので、それほどサクサク動くという訳ではないです。FlashAir 自体それほど速いサーバーという訳でもないので、同じWiFi 接続のNAS に比べると若干のんびりした感じにはなります。

エクスプローラー上での表示


Windows 8.1 から FlashAir にWebDAV で接続すると「サムネイル付き」でカード内のファイルをブラウズすることが可能です。

が、ちょっと遅い。
下の画像は、実際にFlashAir にWebDAV 接続してサムネイル表示をしている様子です。
画像ファイルは1枚3MB~6MBで、下のように24枚分のサムネイル表示には1分程かかります。

WebDAV で FlashAir 内のファイルをサムネイル付き表示している様子
この枚数表示で約一分かかります


パケットモニタ等で確認した訳では無いのですが、画像のファイルサイズとサムネイル表示に掛かる時間をみると、「おそらく」…OSは画像ファイルを一度丸ごと転送し、そのあとでサムネイルを生成・表示しているように見えます。

他方、ファイル名・生成日時については(HTTPで文字列情報飛ばすだけなので)すぐに表示されます。


WebDAV にマッチする使用シーンとは


A) 選択転送:外出先でFlashAir に タブレット・スマートフォン等で接続し、画像を転送する場合


この場合、転送する画像をサムネイルで選択する形が多いと思います。
ですが、上で述べたように WebDAV ではサムネイル表示のために画像の全転送が発生してしまいます。
サムネイル表示で転送するファイルを選ぶためにファイル丸ごと転送していたのでは本末転倒な話で、この使い方は馴染みません。

今まで通り、FlashAir 独自の Command.cgi / Thumbnail.cgi を使ったHTTP 転送、つまりはWebブラウザや、FlashAir 用アプリを使うのが適切であろうと思います。

B)一括転送:撮影した画像をまとめて転送したい場合


例えば、撮影後に帰宅し、撮ってきた画像をPCに転送する場合です。ここではファイルをサムネイルで一々選んだりはせず、「今日撮った写真全部」を一度に転送することが多いでしょう。

この場合、エクスプローラ(WebDAV) 上でファイルを日時順に整理し、一括でPC上にドラッグ&ドロップでコピーすれば済む事になります。とても簡単。

ただ、ここでもサムネイルを表示していると余計な転送が発生してしまうので、エクスプローラー上で表示を「詳細」に変更するのがお勧めです。

先程と同じフォルダを「詳細」表示にしている様子

(注意)PC から FlashAir の WebDAV にWiFiで接続する場合、PCが有線LAN 等別のネットワークに繋ぎっぱなしだとうまくいかない場合があるようです。
メトリック調整すればいいのかもですが、LANケーブルを引っこ抜き、ネットワークをFlashAirとの無線LANだけにするのが一番簡単。