SlideShare a Scribd company logo
1 of 35
Download to read offline
Web Application Template(WAT) ハッカソン ~結果発表~ 
2014年09月28日(日) 
@fullvirtue 
Copyright © @fullvirtue. All rights reserved.
今回やった内容 
今回のハッカソンでやった内容について説明します 
Copyright © @fullvirtue. All rights reserved. 2
Web Application Template(WAT) ハッカソン 
今回やった内容 
起業家のためのITスクール(Tech Garden School)のWeb サイトからWeb Application Template(WAT)を使って 『Windows ストアアプリ』 『Windows Phone 8.1 アプリ』 を作る 
Copyright © @fullvirtue. All rights reserved. 3 
既存のWebサイト 
http://www.techgardenschool.com/
Web Application Template(WAT) ハッカソン 
今回やった内容 
起業家のためのITスクール(Tech Garden School)のWeb サイトからWeb Application Template(WAT)を使って 『Windows ストアアプリ』 『Windows Phone 8.1 アプリ』 を作る 
Copyright © @fullvirtue. All rights reserved. 4 
既存のWebサイト 
http://www.techgardenschool.com/
STEP.1 Web Application Template の適用 
Copyright © @fullvirtue. All rights reserved. 5
Web Application Template(WAT) ハッカソン 
STEP.1 Web Application Templateの適用 
1.開発環境を準備 
Windows 8.1 
Visual Studio 2013Update 3 
2.Web Application Template をインストール 
http://wat.codeplex.com/ 
3.Visual Studio 2013 でWAT を使用したプロジェクトを 新規作成 
Copyright © @fullvirtue. All rights reserved. 6
Web Application Template(WAT) ハッカソン 
STEP.1 Web Application templateの適用 
4.適用するWebサイトのURLを設定 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
Copyright © @fullvirtue. All rights reserved. 7 
URLを変更
Web Application Template(WAT) ハッカソン 
STEP.1 Web Application templateの適用 
5.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 8 
既存のWebサイト 
http://www.techgardenschool.com/
Web Application Template(WAT) ハッカソン 
STEP.1 Web Application templateの適用 
5.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 9 
既存のWebサイト 
http://www.techgardenschool.com/ 
Windows ストアアプリ 
Windows Phone アプリ
Web Application Template(WAT) ハッカソン 
STEP.1 Web Application templateの適用 
6.この時点で、動画が再生可能なことを確認 
Copyright © @fullvirtue. All rights reserved. 10
STEP.2 ヘッダーのカスタマイズ 
Copyright © @fullvirtue. All rights reserved. 11
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
1.デフォルトで非表示にされている<header>を復活 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
Copyright © @fullvirtue. All rights reserved. 12 
削除
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
2.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 13
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
2.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 14
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
3.標準で表示にされているタイトルを非表示に変更 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
Copyright © @fullvirtue. All rights reserved. 15 
変更
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
4.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 16
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
4.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 17
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
5.標準で表示にされている検索フォームを非表示に変更 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
Copyright © @fullvirtue. All rights reserved. 18 
変更
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
6.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 19
Web Application Template(WAT) ハッカソン 
STEP.2 ヘッダーのカスタマイズ 
6.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 20
STEP.3 アプリのロゴを設定 
Copyright © @fullvirtue. All rights reserved. 21
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
1.ロゴを準備 
2.アプリ用のロゴ作成サービスへアクセス 
http://wat-docs.azurewebsites.net/Tools 
3.上記サービス内にロゴをアップロードして、 アプリのロゴをダウンロード 
Copyright © @fullvirtue. All rights reserved. 22 
用意したロゴ
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
4.ダウンロードしたロゴを確認 
Copyright © @fullvirtue. All rights reserved. 23
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
5.ダウンロードしたロゴをWindows ストアアプリに反映 
プロジェクト名/プロジェクト名/images 
Copyright © @fullvirtue. All rights reserved. 24
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
6.ダウンロードしたロゴをWindows Phoneアプリに反映 
プロジェクト名/プロジェクト名.WindowsPhone/images 
Copyright © @fullvirtue. All rights reserved. 25
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
7.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 26
Web Application Template(WAT) ハッカソン 
STEP.3 アプリのロゴを設定 
7.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 27
STEP.4 ナビゲーションバーのボタンを 設定 
Copyright © @fullvirtue. All rights reserved. 28
Web Application Template(WAT) ハッカソン 
STEP.4 ナビゲーションバーのボタンを設定 
config.jsonは、デフォルトのままでは日本語が使えない →日本語を使えるようにする 
1.config.jsonを開いたら、UTF-8 で保存しなおす 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
手順参考URL: http://blogs.msdn.com/b/osamum/archive/2013/05/27/windows-js-wack-utf-8.aspx 
Copyright © @fullvirtue. All rights reserved. 29
Web Application Template(WAT) ハッカソン 
STEP.4 ナビゲーションバーのボタンを設定 
2.ナビゲーションを変更 
プロジェクト名/プロジェクト名.Shared/Config/config.json 
Copyright © @fullvirtue. All rights reserved. 30 
変更
Web Application Template(WAT) ハッカソン 
STEP.4 ナビゲーションバーのボタンを設定 
3.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 31
Web Application Template(WAT) ハッカソン 
STEP.4 ナビゲーションバーのボタンを設定 
3.実行して動作確認 
Copyright © @fullvirtue. All rights reserved. 32
参考資料 
Copyright © @fullvirtue. All rights reserved. 33
Web Application Template(WAT) ハッカソン 
参考資料 
1.Web Application Template インストール配布元 
http://wat.codeplex.com/ 
2.Web Application Template 日本語簡易版チュートリアル 
http://bit.ly/monoesblog_WAT 
3.Web Application Template Document 
http://wat-docs.azurewebsites.net/ 
4.Windows Store Image Generator 
http://wat-docs.azurewebsites.net/Tools 
Copyright © @fullvirtue. All rights reserved. 34
Copyright © @fullvirtue. All rights reserved. 35 
ご静聴ありがとうございました。

More Related Content

Similar to Web Application Template ハッカソン 成果発表 - 2014/09/28

jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発Akira Inoue
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう! 中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう! switch3000
 
Android sdk manual_1.02
Android sdk manual_1.02Android sdk manual_1.02
Android sdk manual_1.02Tomohiro Kondo
 
Android sdk manual_1.02
Android sdk manual_1.02Android sdk manual_1.02
Android sdk manual_1.02Tomohiro Kondo
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)Masanori Ishigami
 
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門Amazon Web Services Japan
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development Shotaro Suzuki
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Shotaro Suzuki
 
チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション FatWireKK
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編Koichiro Nishijima
 

Similar to Web Application Template ハッカソン 成果発表 - 2014/09/28 (20)

jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Vue入門
Vue入門Vue入門
Vue入門
 
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう! 中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
 
Android sdk manual_1.02
Android sdk manual_1.02Android sdk manual_1.02
Android sdk manual_1.02
 
Android sdk manual_1.02
Android sdk manual_1.02Android sdk manual_1.02
Android sdk manual_1.02
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
 
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
 
チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション
 
Force.com Canvas アプリケーション
Force.com Canvas アプリケーションForce.com Canvas アプリケーション
Force.com Canvas アプリケーション
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Firefoxosハンズオン
FirefoxosハンズオンFirefoxosハンズオン
Firefoxosハンズオン
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Gaej Explorer
Gaej ExplorerGaej Explorer
Gaej Explorer
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 事前準備編
 

More from 満徳 関

なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug
なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjugなんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug
なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug満徳 関
 
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjugXPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug満徳 関
 
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpoAgile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo満徳 関
 
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会満徳 関
 
制約を外そう!XPからその先へ #xpjug
制約を外そう!XPからその先へ #xpjug制約を外そう!XPからその先へ #xpjug
制約を外そう!XPからその先へ #xpjug満徳 関
 
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazugAzure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug満徳 関
 
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために満徳 関
 
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処 #eaug
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処  #eaugプロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処  #eaug
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処 #eaug満徳 関
 
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会満徳 関
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会満徳 関
 
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjug
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjugヘビプロのすゝめ XP祭り2018 LTトーク #xpjug
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjug満徳 関
 
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjugエンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug満徳 関
 
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy満徳 関
 

More from 満徳 関 (20)

なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug
なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjugなんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug
なんちゃってアジャイルをアジャイルにした話 ~ライトニングトーク版~ #xpjug
 
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjugXPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug
XPプラクティスをオンラインで体験しよう!計画ゲーム(ストーリーの作成、リリース計画) #xpjug
 
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpoAgile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo
Agile Tech EXPO mini #0 - 僕らが伝えたいあじゃてく - #agiletechexpo
 
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会
Q思考 シンプルな問いで本質をつかむ思考法 ITコンサルタントへの第一歩シリーズ #eLV勉強会
 
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ:正しい疑問をもつ技術 #eLv勉強会
 
制約を外そう!XPからその先へ #xpjug
制約を外そう!XPからその先へ #xpjug制約を外そう!XPからその先へ #xpjug
制約を外そう!XPからその先へ #xpjug
 
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazugAzure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
 
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019
Visual Studio 2019 / Visual Studio Code + Live Shareではじめるモブ・プログラミング #vs2019
 
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~
【eLV】ITコンサルタントへの第一歩シリーズ ~セルフブランディング戦略~
 
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)②~ #elv勉強会 「システム原型図」を使ってビジネスに影...
 
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...
【eLV】ITコンサルタントへの第一歩シリーズ ~システム思考(SystemThinking)①~ 「因果ループ図」を使ってビジネスに影響を与える変数を見...
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ #elv勉強会
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案②~ 課題候補を課題にするために
 
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処 #eaug
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処  #eaugプロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処  #eaug
プロダクトオーナーがエンタープライズアジャイルで抱える苦悩と対処 #eaug
 
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...
知識集約型の製品開発においてプロダクトオーナーがやるべき3つのこと #agilejapan #agilejapannagasaki #agilejapan...
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案①~ #elv勉強会
 
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会
【eLV】ITコンサルタントへの第一歩シリーズ ~課題の仮説立案③~ 課題立案10本ノック #eLV勉強会
 
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjug
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjugヘビプロのすゝめ XP祭り2018 LTトーク #xpjug
ヘビプロのすゝめ XP祭り2018 LTトーク #xpjug
 
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjugエンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug
エンジニアのためのプロダクトマネジメント入門 XP祭り2018 #xpjug
 
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy
[終日研修資料] 企画担当者のためのリーン・アジャイル・プロダクトマネジメント集中特訓講座 ~課題発見からバックログ作成へ~ #postudy
 

Web Application Template ハッカソン 成果発表 - 2014/09/28

  • 1. Web Application Template(WAT) ハッカソン ~結果発表~ 2014年09月28日(日) @fullvirtue Copyright © @fullvirtue. All rights reserved.
  • 3. Web Application Template(WAT) ハッカソン 今回やった内容 起業家のためのITスクール(Tech Garden School)のWeb サイトからWeb Application Template(WAT)を使って 『Windows ストアアプリ』 『Windows Phone 8.1 アプリ』 を作る Copyright © @fullvirtue. All rights reserved. 3 既存のWebサイト http://www.techgardenschool.com/
  • 4. Web Application Template(WAT) ハッカソン 今回やった内容 起業家のためのITスクール(Tech Garden School)のWeb サイトからWeb Application Template(WAT)を使って 『Windows ストアアプリ』 『Windows Phone 8.1 アプリ』 を作る Copyright © @fullvirtue. All rights reserved. 4 既存のWebサイト http://www.techgardenschool.com/
  • 5. STEP.1 Web Application Template の適用 Copyright © @fullvirtue. All rights reserved. 5
  • 6. Web Application Template(WAT) ハッカソン STEP.1 Web Application Templateの適用 1.開発環境を準備 Windows 8.1 Visual Studio 2013Update 3 2.Web Application Template をインストール http://wat.codeplex.com/ 3.Visual Studio 2013 でWAT を使用したプロジェクトを 新規作成 Copyright © @fullvirtue. All rights reserved. 6
  • 7. Web Application Template(WAT) ハッカソン STEP.1 Web Application templateの適用 4.適用するWebサイトのURLを設定 プロジェクト名/プロジェクト名.Shared/Config/config.json Copyright © @fullvirtue. All rights reserved. 7 URLを変更
  • 8. Web Application Template(WAT) ハッカソン STEP.1 Web Application templateの適用 5.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 8 既存のWebサイト http://www.techgardenschool.com/
  • 9. Web Application Template(WAT) ハッカソン STEP.1 Web Application templateの適用 5.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 9 既存のWebサイト http://www.techgardenschool.com/ Windows ストアアプリ Windows Phone アプリ
  • 10. Web Application Template(WAT) ハッカソン STEP.1 Web Application templateの適用 6.この時点で、動画が再生可能なことを確認 Copyright © @fullvirtue. All rights reserved. 10
  • 11. STEP.2 ヘッダーのカスタマイズ Copyright © @fullvirtue. All rights reserved. 11
  • 12. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 1.デフォルトで非表示にされている<header>を復活 プロジェクト名/プロジェクト名.Shared/Config/config.json Copyright © @fullvirtue. All rights reserved. 12 削除
  • 13. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 2.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 13
  • 14. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 2.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 14
  • 15. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 3.標準で表示にされているタイトルを非表示に変更 プロジェクト名/プロジェクト名.Shared/Config/config.json Copyright © @fullvirtue. All rights reserved. 15 変更
  • 16. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 4.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 16
  • 17. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 4.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 17
  • 18. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 5.標準で表示にされている検索フォームを非表示に変更 プロジェクト名/プロジェクト名.Shared/Config/config.json Copyright © @fullvirtue. All rights reserved. 18 変更
  • 19. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 6.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 19
  • 20. Web Application Template(WAT) ハッカソン STEP.2 ヘッダーのカスタマイズ 6.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 20
  • 21. STEP.3 アプリのロゴを設定 Copyright © @fullvirtue. All rights reserved. 21
  • 22. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 1.ロゴを準備 2.アプリ用のロゴ作成サービスへアクセス http://wat-docs.azurewebsites.net/Tools 3.上記サービス内にロゴをアップロードして、 アプリのロゴをダウンロード Copyright © @fullvirtue. All rights reserved. 22 用意したロゴ
  • 23. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 4.ダウンロードしたロゴを確認 Copyright © @fullvirtue. All rights reserved. 23
  • 24. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 5.ダウンロードしたロゴをWindows ストアアプリに反映 プロジェクト名/プロジェクト名/images Copyright © @fullvirtue. All rights reserved. 24
  • 25. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 6.ダウンロードしたロゴをWindows Phoneアプリに反映 プロジェクト名/プロジェクト名.WindowsPhone/images Copyright © @fullvirtue. All rights reserved. 25
  • 26. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 7.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 26
  • 27. Web Application Template(WAT) ハッカソン STEP.3 アプリのロゴを設定 7.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 27
  • 28. STEP.4 ナビゲーションバーのボタンを 設定 Copyright © @fullvirtue. All rights reserved. 28
  • 29. Web Application Template(WAT) ハッカソン STEP.4 ナビゲーションバーのボタンを設定 config.jsonは、デフォルトのままでは日本語が使えない →日本語を使えるようにする 1.config.jsonを開いたら、UTF-8 で保存しなおす プロジェクト名/プロジェクト名.Shared/Config/config.json 手順参考URL: http://blogs.msdn.com/b/osamum/archive/2013/05/27/windows-js-wack-utf-8.aspx Copyright © @fullvirtue. All rights reserved. 29
  • 30. Web Application Template(WAT) ハッカソン STEP.4 ナビゲーションバーのボタンを設定 2.ナビゲーションを変更 プロジェクト名/プロジェクト名.Shared/Config/config.json Copyright © @fullvirtue. All rights reserved. 30 変更
  • 31. Web Application Template(WAT) ハッカソン STEP.4 ナビゲーションバーのボタンを設定 3.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 31
  • 32. Web Application Template(WAT) ハッカソン STEP.4 ナビゲーションバーのボタンを設定 3.実行して動作確認 Copyright © @fullvirtue. All rights reserved. 32
  • 33. 参考資料 Copyright © @fullvirtue. All rights reserved. 33
  • 34. Web Application Template(WAT) ハッカソン 参考資料 1.Web Application Template インストール配布元 http://wat.codeplex.com/ 2.Web Application Template 日本語簡易版チュートリアル http://bit.ly/monoesblog_WAT 3.Web Application Template Document http://wat-docs.azurewebsites.net/ 4.Windows Store Image Generator http://wat-docs.azurewebsites.net/Tools Copyright © @fullvirtue. All rights reserved. 34
  • 35. Copyright © @fullvirtue. All rights reserved. 35 ご静聴ありがとうございました。