Template for Win8 UI Design

Windowsストアアプリ制作のためのWeb標準技術でできるテンプレート

  • デザイン・フロントエンドとプログラムを分離して制作

  • HTML5ベースのWebアプリとコードなどを共通化して制作

「Template for Win8 UI Design」とは

「Template for Win8 UI Design」はWindows ストアアプリをレスポンシブWebデザインで簡単に開発するための、Visual Studioのプロジェクトテンプレートです。

CSSのみでモダンUIの特徴である、横スクロールのレイアウトを実現しました。
このテンプレートを元にWindows ストアアプリを制作したり、モダンUIベースのレイアウトを実現したWebサイトを制作することができます。

Windowsストアアプリでは、階層を2階層で表現されているアプリケーションが多いのですが、このテンプレートでは3階層でのアプリケーションも可能になるように作られています。
要素はモジュール化されているので、必要な部分を抽出してカスタマイズすることが可能です。

このテンプレートを使ってWindows ストアアプリをブラウザで開発することができます。
ただし、開発したプロジェクトをWindows ストアアプリにビルドするときには、Windows 8 PCVisual Studio 2012が必要です。

メリット

  1. デザイン・フロントエンドとプログラムを分離して制作することで、開発期間の短縮が可能
  2. デザイナー・フロントエンドが編集可能なテンプレートでUIの質を高めることが可能
  3. HTML5+CSSでのテンプレートなので、デザインにWeb開発者のノウハウが生かすことが可能
  4. 従来のウェブコンテンツ制作(HTML5、CSS3、JavaScript)を得意とするチームでの開発が可能
  5. デベロッパーはHTML5ベースのテンプレートをベースに開発することでアプリの品質を高められる
  6. HTMLやCSSを編集する事でレイアウト変更が可能
  7. HTML、CSSで細部のレイアウト調整が可能なため、複雑なUIを構築することも可能
  8. HTML5をベースとしたテンプレートなので、既存のWebアプリをベースにしたアプリを作成可能
  9. HTML5で制作することで、アプリケーションのメンテナンスのコストが軽減
  10. 新機能の開発と実装により注力することが可能
  11. Windows 8のモダンUIでのアプリ開発もHTML5をベースとした共通化が可能に

テンプレートの構成

ダウンロードボタンを押すと。「allWeb-Win8-RWD.zip」というZIPファイルがダウンロードされます。

このZIPファイル内には、テンプレートに使うHTML/CSSが格納されています。利用条件等はテンプレート同封のreadme.txtをごらんください。

開発手順

  • 自前のエディタかブラウザで制作

    1. テンプレートのファイルを一度ローカルに展開
    2. 中のテンプレートのHTML/CSS/JavaScriptをカスタマイズ
      HTML/CSS/JavaScriptのみをカスタマイズして下さい
  • Visual Studio 2012にインストール

    1. カスタマイズしたテンプレートをZIPファイル化
    2. ZIPファイルをテンプレートとしてVisual Studio 2012にインストール
    3. Visual Studio 2012でストアアプリ用にプログラムを組み込む
    4. Windowsストアアプリへのビルドとデバッグ
    5. ストアへのアプリ申請

Visual Studio 2012へのインストール

  1. Visual Studio 2012を起動すると、「マイドキュメント(ドキュメント)」フォルダー内に「Visual Studio 2012」フォルダーが作成されます。

  2. ダウンロードしたテンプレート(allWeb-Win8-RWD.zip)を解凍ソフト等で解凍します。「allWeb-Win8 RWD-flexbox.zip」「allWeb-Win8 RWD-noflexbox.zip」の2つのZIPファイルが出てきます。
    それぞれのZIPファイルを「Templates\ProjectTemplates\JavaScript」フォルダーにコピーします。

  3. コピーが終わったら、メニューから新しいプロジェクトを作成します。
    新しいプロジェクトダイアログで「JavaScript」を選択し、「テンプレート」を選択してプロジェクトを開発します。

サンプルファイルを見る

ブラウザで実際に確認できるサンプルファイルを用意しました。

スクリーンショット

スナップモードにも対応

ライセンスと注意事項

  • ライセンスはMITライセンスです。
  • 当テンプレートを利用した事によるいかなる損害もallWebクリエイター塾は一切の責任を負いません。自己の責任の上でご利用ください。
  • 同封されている「package.appxmanifest」は必ず書き換えた上でご使用ください。

Page Top