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 2013 Update 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

ご静聴ありがとうございました。