Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Windows ストアアプリを HTMLで作成する

2,294 views

Published on

MVP Community Camp -2nd Round- day 4 (2014/11/20) のセッションスライドです。

Published in: Technology
  • Be the first to comment

Windows ストアアプリを HTMLで作成する

  1. 1. Windows ストアアプリを HTMLで作成する あなたの既存の知識でアプリケーションの開発を実現 MVP Community Camp -2nd Round- 2014/11/20 保住匡範 1
  2. 2. 本セッションのゴール Windowsストアアプリを知っていただく 一般的なWebフロントエンド開発のスキルで 開発が行えることを知っていただく ストアアプリ開発のスキル習得から広がる メリットを知っていただく 2
  3. 3. アジェンダ Windowsストアアプリの概要と開発にあたっての基礎知識 Windowsストアアプリとは 既存のWebフロントエンド開発スキルでストアアプリを開発する HTML によるストアアプリ開発 知らないと損する、非.NET開発にも活かせる開発ツール Visual StudioによるHTML&JavaScript開発 wrap up まとめ 3
  4. 4. 自己紹介 Name 保住匡範(ほずみまさのり) Twitter @kiyokura Blog http://kiyokura.hateblo.jp/ Work 株式会社リゾーム Background Webアプリケーション開発(.NET / 非.NET ) 4
  5. 5. Windowsストアアプリとは Windowsストアアプリの概要と開発にあたっての基礎知識 5
  6. 6. Windowsストアアプリ概要 タッチネイティブ・デバイスネイティブ ストアによる配布とマネタイズ One product family, One platform, One store 6
  7. 7. タッチネイティブ・デバイスネイティブ Windows 8 / Windows RT から登場 タッチデバイスに完全なエクスペリエンスを 没入型 タッチ対応 デバイス活用(カメラ・GPS・各種センサー) 7
  8. 8. ストアによる配布とマネタイズ Windowsストアによる配布 審査を経ての公開 全世界に向けての配信 ストア非公開の企業内限定配布も可能 マネタイズを一元化 全世界に向けて販売 アプリ内課金 試用機能 8
  9. 9. One product family, One platform, One store ユニバーサルアプリケーション WindowsストアアプリとWindows Phone 来るWindows 10世代の構想 “One product family, One platform, One store” モバイルからXboxまで 9
  10. 10. 選択可能なテクノロジスタック DirectX XAML HTML / CSS C / C++ C# / VB.NET JavaScript 通信デバイスグラフィックス印刷 Windowsランタイム カーネル 10
  11. 11. 開発者登録と審査 開発者登録 個人:約19ドル・企業:約99ドル 更新料不要(2014年9月より) 「Dev Center ベネフィット」で初期費用無料! 審査と公開 提出→ 審査→ ストア公開 企業内向けの配布(サイドローディング) 11
  12. 12. 開発環境 Visual Studio 2012 以降の各エディション 2014年11月現在の最新環境: Visual Studio Professional 2013以上の有償版 Visual Studio Express 2013 for Windows Visual Studio Community 2013 特にHTMLでのWindowsストアアプリ開発には CommunityもしくはProfessional以上がお勧め 12
  13. 13. Visual Studio Community 2013 2014年11月に登場した新しいエディション http://www.microsoft.com/ja-jp/dev/products/community.aspx 有償版のProfessional相当の機能 Expressは機能制限・プラットホームごとに別製品 Professionalとの違いはライセンス 13
  14. 14. HTMLによるストアアプリ開発 既存のWebフロントエンド開発スキルでストアアプリを開発する 14
  15. 15. HTMLによるストアアプリ開発 HTML5+CSS+JavaScriptで開発可能 既存のWebフロントエンド開発のスキルセット jQuery等のライブラリの活用 ストアアプリ”ならでは” の機能とLook & Feel OSのAPIやカメラ・センサーデバイスの活用 Modern UI(旧称・メトロスタイル)のコントロール アプリケーションのライフサイクル → WinRT とWinJS の提供 15
  16. 16. Windows Runtime (WinRT) ストアアプリで利用できるネイティブAPI C/C++, C#, VB.NETなどからも共通で利用 言語プロジェクションや Windowsメタデータ(WinMD)等の仕組み 実行エンジン(Chakra)を通じて利用 特別な準備は必要ない 一般的な組み込みライブラリと同様のアクセス方法 例) Windows.Media.Capture 16
  17. 17. WinRTの利用例 // メッセージボックスの生成と表示 var msgbox = new Windows.UI.Popups.MessageDialog("Hello World!"); msgbox.showAsync(); // GPSを利用 var geolocator = new Windows.Devices.Geolocation.Geolocator(); geolocator.getGeopositionAsync().then( function (pos) { /* 座標取得時*/ }, function (e) { /* エラー時処理*/ }); 詳細はリファレンスを参照 http://msdn.microsoft.com/ja-jp/library/windows/apps/br211377.aspx 17
  18. 18. Windows Library for JavaScript (WinJS) ストアプリ向けのJavaScriptライブラリ ストアプリならではのスタイルやコントロール Modern UI を手軽に実現 単方向のバインディング 非同期プログラミングのための機能 Promiseを実装 Common JS Promises/A 提案を実装 18
  19. 19. スタイルやコントロールの提供 19
  20. 20. Promiseによる非同期プログラミング WinRTのAPIは原則として非同期 UIスレッドをロックしない そのまま利用すると煩雑になりがち Callbackが多くなる then関数とdone関数 非同期コードのチェーンを構築 20
  21. 21. Windows Library for JavaScript (WinJS) 現在ではブラウザ向けライブラリとして進化 WinJS 3.0 クロスブラウザ・OSS http://try.buildwinjs.com/ 21
  22. 22. Webフロントエンド開発スキルの活用 WinRTやWinJSはストアプリ独自の色が強い WinJSはクロスブラウザ対応、とはいえ… より一般的なWebフロントエンド開発スキルを 活用でできるか? 22
  23. 23. ライブラリを利用した開発 汎用的なライブラリの活用 jQuery等の一般的なライブラリを利用可能 ※そのままでは利用できないライブラリもある セキュリティのための制限など 回避策もある 23
  24. 24. 例:jQuery jQuery 説明不要のJavaScriptライブラリ jQuery 2.0よりストアアプリをサポート 2.x系を利用すること 1.x系ではエラーになる機能がある 参考: 『jQuery Version 2.0 でのWindows ストアアプリのサポート』 http://blogs.msdn.com/b/windowsappdev_ja/archive/2013/04/04/jquery-version-2-0-windows.aspx 24
  25. 25. 例:knockout.js knockout.js JavaScriptのUIフレームワーク 宣言的バインディング、MVVM等の特徴 双方向バインディングを利用可能 WinJSでは単方向のバインディングのみ 25
  26. 26. 例:knockout.js + jQuery + linq.js var ViewModel = function () { self = this; self.zipcode = ko.observable(""); self.addresses = ko.observableArray([]); self.executeSearch = function () { var postcode = self.zipcode(); $.ajax({ type: 'GET', url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + postcode, dataType: 'json', success: function (json) { var res = Enumerable.from(json.results) .select(function (x) { return { "address“ : x.address1 + x.address2 + x.address3 }; }) .toArray(); self.addresses(res); }, }); }; } $(function () { var vm = new ViewModel(); ko.applyBindings(vm); }); 26
  27. 27. 例:knockout.js + jQuery + linq.js <body> <div> 郵便番号: <input id="postCode" type="text" data-bind="value:zipcode" /> <input type="button" id="execute" value="検索" data-bind="click:executeSearch" /><br /> 住所候補: <select id="address" data-bind="options: addresses , optionsText: 'address'"> </select> </div> </body> 27
  28. 28. 例:knockout.js + jQuery + linq.js 28
  29. 29. 例:enchant.js enchant.jsとは カンタンにゲームやアプリを開発できるHTML5 + JavaScript フレームワーク(公式サイトより) オープンソース http://enchantjs.com/ja/ 公式にストアアプリのサンプルあり パッケージ内に同梱 29
  30. 30. 注意点 window オブジェクト alert, prompt, open等の、windowオブジェクトの一部 のメソッドは利用できない 相当するWinRTのAPIなどに置き換える必要がある 参考:HTML, CSS, JavaScript の機能と違い http://msdn.microsoft.com/ja-jp/ library/windows/apps/hh465380.aspx 30
  31. 31. 特に注意点する点 ファイルエンコードとBOM BOM付UTF-8である必要がある HTML / JavaScript / CSS ファイル ストアでの審査で不合格になる 外部ファイルの読み込み不可 外部のスクリプトの読み込み不可 すべてのスクリプトはパッケージに収める必要がある 参考:「セキュリティで保護されたアプリの開発」 http://msdn.microsoft.com/ja-jp/ library/windows/apps/hh849625.aspx 31
  32. 32. HTMLによるストアアプリ開発 Webフロントエンド開発スキルがあれば 既存スキルを生かした開発が可能 WinRTとWinJSの活用とWebアプリケーションとの差分 プラットホーム特有の事情の学習が必要 32
  33. 33. WindowsストアアプリとHTML Windows Store Apps とWebフロントエンドテクノロジの関係 WEBフロントエンドのテクノロジ JavaScript HTML CSS API WinRT & WinJS デバイス/ サービスLook & Feel OS・デバイス特有の事情 33
  34. 34. Packaged Web App Apache Cordova / firefox OS / Chrome Apps / (Titanium Mobile) 等々 WEBフロントエンドのテクノロジ JavaScript HTML CSS ライブラリ/ カスタム属性/ テーマ API SDK等の提供する デバイス/ サービスLook & Feel OS・デバイス特有の事情 34
  35. 35. Packaged Web App の魅力 Webフロントエンド開発の既存スキルがあれば 新しいプラットホーム特有の事情に 学習のリソースを集中することが可能 35
  36. 36. おすすめしたい教材 de:code で行われたセッション 『HTML/JavaScript/CSS とC++ で作るWindows、 Windows Phone、Xbox One アプリ』 http://channel9.msdn.com/Events/de-code/ 2014/DE-020 de:code 2014 セッションビデオ群 「device track」の内容が主にストアアプリ関連 http://channel9.msdn.com/Events/de-code/ 2014?sort=sequential&direction=desc&r[0]= Devices#theSessions 36
  37. 37. Visual Studioによる HTML&JavaScript開発 知らないと損する、非.NET開発にも活かせる開発ツール 37
  38. 38. Visual Studioの活用 Visual Studioを使ったストアアプリ開発の基本 コーディング支援とデバッグ機能 ストアアプリや.NET開発だけではない Webフロントエンド開発での活用 38
  39. 39. コーディング支援とデバッグ機能 インテリセンスをはじめとした入力支援 デバッグ実行 シミュレータの活用 プラグイン「Web Essentials」 39
  40. 40. HTMLの入力支援機能 タグの候補リスト 入力に合わせて絞り込み 属性の候補リスト 特定の属性で利用可能な値をリストアップ CSSファイルで定義されたクラス候補に その他さまざまな機能 閉じタグの自動補完・自動修正 ドラッグアンドドロップによる参照挿入、等々 40
  41. 41. CSSの入力支援 プロパティや値の候補リスト 入力に合わせて絞り込み 利用方法等ドキュメント表示も カラーパレット カラーパレットから色をピックアップ 41
  42. 42. JavaScriptの入力支援 高度なコード補完 C#などとそん色のないコード補完 まさに“インテリ”センスな動的解析 42
  43. 43. スニペット よく使う構文テンプレートを選択・挿入 HTML / CSS / JavaScriptで利用可能 43
  44. 44. デバッグ実行 ブレークポイントでの中断 設定したポイントでコードの実行を中断 変数の内容をウォッチ・書き換え 44
  45. 45. シミュレーターの活用 シミュレータが付属 タッチ非対応のPCでもタッチのデバッグが可能 GPS等各種デバイスのエミュレートも 45
  46. 46. プラグイン「Web Essentials」 Webフロントエンド開発用の多機能プラグイン VSを最高のWebフロントエンド開発ツールに 無償・オープンソース 多様なテクノロジへの対応 インテリセンス・スニペットの強化 CoffeeScript / TypeScript SaSS / LESS ZenCoding Minify Markdown JSHint 等々、膨大な機能 46
  47. 47. プラグイン「Web Essentials」 機能例:強化されたスニペット 47
  48. 48. プラグイン「Web Essentials」 機能例:ブラウザの対応状況ナビ 48
  49. 49. プラグイン「Web Essentials」 機能例:CSSスプライトの自動作成 49
  50. 50. Webフロントエンド開発での活用 これらの機能は ストアアプリ開発以外でも利用可能 非.NET開発でも活用しないと”損” これを超える機能を有した Webフロントエンド用IDEはおそらく無い ……といってよいと思います 有償無償問わず 50
  51. 51. まとめ 51
  52. 52. Windowsストアアプリとは スマートデバイス向けの形態・エコシステム 様々なテクノロジスタックで開発可能 52
  53. 53. Web開発スキルを生かした開発 既存のWebフロントエンド開発スキルを用いて 開発が可能 プラットフォームに特化した知識は必要だが… プラットフォーム特有の部分に集中して学習 が可能 53
  54. 54. Visual Studioという開発環境 ほぼ最上級の開発環境 無償でもフルスペックの開発が可能 ストアアプリだけでなくWeb開発にも利用可能 Webフロントエンド開発環境としても最上級 54
  55. 55. その先に…… HTMLによる スマートデバイス 向けアプリ開発 Visual Studio の 習熟 VSを使った Webフロントエンド開発 (非・.NET) 即時応用 ASP.NET による Webアプリケーション開発 55
  56. 56. その先に…… HTMLによる スマートデバイス 向けアプリ開発 Visual Studio の 習熟 ・Apache Cordova ・iOSとAndroidプラットホームの知識 クロスプラットホーム デバイスアプリ開発 56
  57. 57. その先に…… ストアアプリ開発 (WinRT とストア) Visual Studio の 習熟 ・C# or VB.NET ・XAML C# / VB.NET + XAMLによる ストアアプリ開発 C# / VB.NET による .NET開発 Xamarinによる クロスプラットホーム開発 57
  58. 58. その先に…… ストアアプリ開発 (WinRT とストア) Visual Studio の 習熟 ・C# ・Unity Unityによる ストアアプリ開発 Unity開発全般へ 58
  59. 59. その先に…… スキルとノウハウを生かしたステップアップ HTMLによるストアアプリ開発で得た知識に 少しずつ加えることで新たな領域に踏み込める 組み合わせにより更なる可能性 トレンド HTMLによるスマートデバイスアプリ Packaged Web Appsの流れ 広がるC#による開発 Unity / MonoGame .NET フレームワークのオープンソース化・クロスプラットホーム化 Visual Studio Community エディション 59
  60. 60. その先に…… HTMLによるストアアプリ開発で 得ることができるスキルとノウハウ ストアアプリ開発 HTMLによる スマートデバイス 向けアプリ開発 Visual Studio の 習熟 C# VB.NET Unity WPF iOS ASP.NET Xamarin Cordova 無限の広がりへ Android Kinect Oculus Rift 60
  61. 61. 参考 61
  62. 62. Windows デベロッパーセンター  Windowsストアアプリ開発のためのポータル  https://dev.windows.com/ja-jp/  ストア提出のためのダッシュボードや 技術資料などのリソースを集約  Windows Phoneアプリ開発の情報も統合 62
  63. 63. Dev Center ベネフィット  ストアアプリ/ Windows Phone アプリ開発者 に対する支援プログラム  http://msdn.microsoft.com/ja-jp/dn818519.aspx  ベネフィットの提供  開発者登録の初期費用が無料  アプリ開発に関する技術支援  アプリのデザインに関する技術支援 63
  64. 64. de:code セッション動画  『HTML/JavaScript/CSS とC++ で作る Windows、Windows Phone、Xbox One アプ リ』  http://channel9.msdn.com/Events/de-code/2014/DE- 020  その他のセッションビデオ群  「device track」の内容が主にストアアプリ関連  http://channel9.msdn.com/Events/de-code/ 2014?sort=sequential&direction=desc&r[0]=D evices#theSessions 64
  65. 65. Microsoft Virtual Academy (MVA)  MVA  動画と資料で学習できるコンテンツ  無償  全体を通してカバーする内容  いまさら聞けないWindows アプリ開発入門HTML/JavaScript 編  http://www.microsoftvirtualacademy.com/training-courses/windows-app-htmljavascript  [MSC2013] HTML5 + JavaScript を使ったWindows 8 アプリ開発  http://www.microsoftvirtualacademy.com/training-courses/windows_app_html5_js  個々のトピックスに注目したシリーズ  HTML5 で作るWindows ストアアプリ/アプリの起動  http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-launching  HTML5 で作るWindows ストアアプリ/印刷  http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-printing  HTML5 で作るWindows ストアアプリ/ナビゲーション  http://www.microsoftvirtualacademy.com/training-courses/html-storeapp-navigation  HTML5 で作るWindows ストアアプリ/試用版とアプリ内購入  http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-trial-purchase  HTML5 で作るWindows ストアアプリ/データバインディング  http://www.microsoftvirtualacademy.com/training-courses/store-apps-js-databind 65
  66. 66. Visual Studio Community 2013  有償版「Professional」と同等の機能を無償で  今までの「Express」のような機能制限なし  ライセンス  個人開発者・オープンソース開発・教育目的等は可  エンタープライズ利用の場合は制限あり  ライセンスの確認を  詳細・ダウンロードはこちら: http://www.microsoft.com/ja-jp/ dev/products/community.aspx 66

×