More Related Content
Similar to Web Application Template ハッカソン 成果発表 - 2014/09/28 (20)
Web Application Template ハッカソン 成果発表 - 2014/09/28
- 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/
- 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
- 12. Web Application Template(WAT) ハッカソン
STEP.2 ヘッダーのカスタマイズ
1.デフォルトで非表示にされている<header>を復活
プロジェクト名/プロジェクト名.Shared/Config/config.json
Copyright © @fullvirtue. All rights reserved. 12
削除
- 15. Web Application Template(WAT) ハッカソン
STEP.2 ヘッダーのカスタマイズ
3.標準で表示にされているタイトルを非表示に変更
プロジェクト名/プロジェクト名.Shared/Config/config.json
Copyright © @fullvirtue. All rights reserved. 15
変更
- 18. Web Application Template(WAT) ハッカソン
STEP.2 ヘッダーのカスタマイズ
5.標準で表示にされている検索フォームを非表示に変更
プロジェクト名/プロジェクト名.Shared/Config/config.json
Copyright © @fullvirtue. All rights reserved. 18
変更
- 22. Web Application Template(WAT) ハッカソン
STEP.3 アプリのロゴを設定
1.ロゴを準備
2.アプリ用のロゴ作成サービスへアクセス
http://wat-docs.azurewebsites.net/Tools
3.上記サービス内にロゴをアップロードして、 アプリのロゴをダウンロード
Copyright © @fullvirtue. All rights reserved. 22
用意したロゴ
- 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
- 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
変更
- 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