次の方法で共有

Blend を使用した初めての Windows ストア アプリの作成、パート 1: マスター ページ (HTML と JavaScript)

  • [アーティクル]

Blend for Visual Studio の HTML および CSS 用の一連のツールを使用すると、Windows ストア アプリをよりすばやく効率的に開発できます。 このチュートリアルでは、新しいムービーの一覧を参照できる PickaFlick という簡単なアプリのビルドについて説明します。 この一覧の生成にはロッテン トマトの API を使用するため、ロッテン トマトに登録して API キーを取得し、そのキーをコードに貼り付ける必要があります。

PickaFlick アプリのホーム ページ

初めての Windows ストア アプリの作成 - Blend (HTML)

このチュートリアルのパート 1 では、アプリのホーム ページを作成します。 作業の中で、次の方法について説明します。

サンプル ギャラリーからこのプロジェクトをダウンロードすると、コードだけでなく、アセットもすべて確認できるため、作業を進めながらプロジェクトをビルドできます。

このチュートリアルは、HTML、CSS、または JavaScript を使ったことがなくても進められるように構成されています。 ただし、HTML、CSS、および JavaScript に関するある程度の知識があれば、Blend をより使いこなすことができます。

プロジェクト テンプレートからプロジェクトを作成する

Blend と Visual Studio には、Windows ストア アプリの開発を始めるのに役立つ同じプロジェクト テンプレートが用意されています。 その他の種類のアプリの開発用に Blend と Visual Studio で使用できるテンプレートの詳細については、「アプリ開発を高速化するためのテンプレート」を参照してください。

プロジェクトを作成するには

  1. Blend で、[ファイル] メニューの [新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスの左側に、プロジェクトの種類の一覧が表示されます。 プロジェクトの種類をクリックすると、その種類に関連付けられているプロジェクト テンプレートが右側に表示されます。

    Blend の [新しいプロジェクト] ダイアログ ボックス

  2. プロジェクトの種類の一覧で [HTML (Windows ストア)] をクリックします。

  3. プロジェクト テンプレートの一覧で [空のアプリケーション] をクリックします。

  4. [名前] ボックスに「PickaFlick」と入力します。

  5. [場所] ボックスでプロジェクトの場所を確認します。

  6. [言語] ボックスで選択できるのは [JavaScript] だけです。

アプリへの変更が Blend の UI に反映されているようすを確認する

Blend の既定のワークスペースは、Windows ストア アプリのビルドに使用できるビジュアル インターフェイスであり、デザイン サーフェイス、パネル、ワークスペース構成、オーサリング ビュー、およびメニューから構成されています。 詳細については、「Blend アプリケーション ワークスペース (HTML)」を参照してください。

プロジェクトでの作業時にアプリの 1 つの領域で変更を行うと、その変更がインターフェイス全体に反映されます。

左上の [プロジェクト] タブをクリックすると、[空のアプリケーション] テンプレートからプロジェクトを作成したときに自動生成されたファイルとフォルダーが表示されます。

  • 参照   JavaScript の読み取り専用の CSS と Windows ライブラリが含まれています。

  • css   アプリの .css ファイルが含まれています。

  • イメージ   アプリの既定のイメージ アセットが含まれています。

  • js   アプリの既定の .js ファイルが含まれています。

  • default.html   アプリの既定のスタート ページです。

  • package.appxmanifest   アプリのコンテンツの一覧とその機能 (ユーザーの Web カメラにアクセスできるかどうかなど) が記述されたファイルです。 アプリのスタート ページもこのファイルで指定します。

Blend - 既定のプロジェクト ファイルとフォルダー (HTML)

詳細については、「プロジェクト パネル (HTML)」を参照してください。

[プロジェクト] パネルの下 (インターフェイスの左下) に [ライブ DOM] パネルがあります。 [ライブ DOM] パネルには、default.html の構造が表示されます。 body を展開すると、p 要素が表示されます。

[ライブ DOM] パネルには、作業している HTML ページのオブジェクト階層が表示されます。 [ライブ DOM] パネルを直接操作することで、作業に合わせてオブジェクト階層をすばやく簡単に変更することができます。

Blend の既定プロジェクト パネル (HTML)

詳細については、「ライブ DOM パネル (HTML)」を参照してください。

p 要素には、デザイン サーフェイスに表示されるテキスト "コンテンツをここに挿入" が含まれています。

Blend の既定デザイン サーフェイス (HTML)

関連ドキュメント ビューに、default.html と default.css の両方のコードが表示されます。 デザイン サーフェイスに表示されている要素を変更すると、関連するドキュメントが自動的に更新されます。 JavaScript に変更を加えた場合は、ビューを更新するように求める警告が表示されます。 アプリの右上隅の [更新] 更新アイコン をクリックすると、デザイン サーフェイスに変更が反映されます。

Blend の既定の関連ドキュメント ビュー (HTML)

詳細については、「関連ドキュメント ビュー (HTML)」を参照してください。

default.html と default.css が表示されない場合は、デザイン サーフェイスの右上隅の [分割] ビュー アイコン  をクリックします。

この手順では、default.html から既定の p 要素を削除し、body に背景色を追加して、それらがコードに反映されることを確認します。

default.html の表示を変更するには

  1. [ライブ DOM] パネルで、[p] を右クリックし、[削除] をクリックします。

  2. [スタイル ルール] パネルで、[default.css] を展開し、[body] をクリックします。

    body のセレクターも関連ドキュメント ビューの default.css で選択されていることに注意してください。

  3. [CSS プロパティ] パネルで [背景] カテゴリを展開します。

  4. [background-color] の横の [設定なし] をクリックします。

  5. [16 進数値] ボックスに「#D5BF9A」と入力し、Enter キーを押します。

    default.css の body セレクターにスタイル ルール background-color: #D5BF9A が追加されます。

項目テンプレートをプロジェクトに追加する

プロジェクト テンプレートに加えて、Blend と Visual Studio のいずれにも項目テンプレートが用意されています。項目テンプレートには一般的なコードが含まれていて、 アプリ開発を高速化するためにプロジェクトに簡単に追加できます。 「アプリ開発を高速化するためのテンプレート」を参照してください。

PickaFlick アプリの場合、既存のプロジェクトに HTML ページの項目テンプレートを追加します。 ページにはアプリのホーム ページの HTML が含まれています。

HTML ページの項目テンプレートを追加するには

  1. [ファイル] メニューの [新しいアイテム] をクリックします。

    [新しいアイテム] ダイアログ ボックスが表示されます。

    Blend - [新しい項目の追加] HTML ページ (HTML)

  2. 項目テンプレートの一覧で [HTML ページ] をクリックします。

  3. [名前] ボックスに「homepage.html」と入力し、[OK] をクリックして項目テンプレートを追加します。

関連ドキュメント ビューで、homepage.html のマークアップが最小限であることに注意してください。

Blend - 基本 HTML ページ

homepage.html はフラグメントとして default.html 内に表示され、default.html のスタイルを継承するため、homepage.html に CSS や HTML の参照を追加する必要はありません。

次に、div 要素をページに追加し、div の名前を変更します。 div の名前を変更し、id 属性を適用すると、div をそのページおよびアプリ全体の他の div 要素との間で識別しやすくなります。

HTML ページに要素を追加するには、次の方法があります。

  • コード エディターで直接入力する

  • [アセット] パネルを使用して要素を挿入する

  • [ライブ DOM] パネルで要素を直接挿入する

次の手順では、HTML ページに要素を追加する 3 種類の方法をすべて示しています。 div を追加したら、[ライブ DOM] パネルで名前を変更して、id 属性を div に追加します。

div を homepage.html に追加するには

  1. [ライブ DOM] パネルで、[body] を右クリックし、[要素の挿入] をクリックして [div] をクリックするか、Ctrl キーと Shift キーを押しながら = キーを押します。

    ヒント

    Blend でデザイン サーフェイスに要素を追加するその他の方法は次のとおりです。

    • 関連ドキュメント ビューの homepage.html で、body の開始タグと終了タグの間にカーソルを置き、「<div>」と入力します。終了タグが自動的に追加されます。

    • [ライブ DOM] パネルで [body] をクリックし、[アセット] パネルで [検索] ボックスに「div」と入力して div 要素を見つけ、次のいずれかを行います。

      • [div] をダブルクリックして、div 要素をページに追加します。

      • [アセット] パネルからデザイン サーフェイスに div をドラッグします。

      • [アセット] パネルから [ライブ DOM] パネルに div をドラッグします。

      • デザイン サーフェイスに div を直接配置します。

    新しい div が [ライブ DOM] パネルおよび homepage.html の HTML に表示されます。

  2. [ライブ DOM] パネルで、次のいずれかを行って、新しい div に id を適用します。

    • [div] をダブルクリックし、テキスト フィールドに「homepageContainer」と入力します。

      Blend - ライブ DOM パネル - 名前変更 (HTML)

    • [div] を右クリックして [ID の編集] をクリックし、「homepageContainer」と入力します。

    • [HTML 属性] パネルで、[id] フィールドに「homepageContainer」と入力します。

    関連ドキュメント ビューの homepage.html で、値が homepageContainer である id 属性が div に追加されます。

    Blend homepagecontainer ID (HTML)

単一ページ ナビゲーション モデルを実装する

このセクションでは、次の作業を行う方法について説明します。

  • 単一ページ ナビゲーション モデルを実装する

  • Blend と Visual Studio を切り替えて JavaScript を変更する

PickaFlick アプリでは、単一ページ ナビゲーション モデルを使用します。これは、単一ページを使用して、必要に応じてアプリを表示したり、他のページからそのページにデータを読み込んだりすることを意味します。 さらにアプリを複数ファイルに分割する場合、ページ間を移動する (マルチページの移動) 代わりに、他のページがページのフラグメントとして既定のページに読み込まれます。 「クイックスタート: 単一ページ ナビゲーションの使用 (JavaScript と HTML を使った Windows ストア アプリ)」を参照してください。

Visual Studio との間で切り替えを行う

homepage.html のコンテンツを default.html に読み込むには、default.html でページのフラグメントをレンダリングするための Win.JS UI.Fragment 名前空間を呼び出す必要があります。 .js ファイルは Blend でも変更できますが、Visual Studio の組み込みのツールを使用すると、さらに簡単に JavaScript の追加、変更、デバッグを行うことができます。 それらのツールの詳細については、「JavaScript IntelliSense」を参照してください。

開発者は、Blend と Visual Studio の間を気軽に切り替えながら 1 つのプロジェクトの作業を進めることができます。 プロジェクト ファイルは、同じコンピューター上の Blend と Visual Studio で同時に開いておくこともできます。 一方のツールでファイルに変更を加えて保存し、他方のツールに切り替えると、ファイルを再読み込みするだけでプロジェクトのビューが更新されます。

注意

Blend と Visual Studio の間でコードをコピーして貼り付けることもできます。ただし、JavaScript の作成や編集のための推奨ツールは Visual Studio です。ここでは、単一のプロジェクトで作業している場合でも Blend と Visual Studio を簡単に切り替える方法を示します。

Visual Studio でプロジェクトに新しいファイルを追加した場合は、Blend に戻る前に、[すべてを保存] (Ctrl + Shift + S) を使用してプロジェクトを保存するか、アプリをビルドして実行する必要があります。Blend に切り替えると、プロジェクトを再読み込みするかどうかを確認するメッセージが表示されます。[はい] をクリックすると、Blend で新しいファイルがプロジェクトに追加されます。

Windows JavaScript API への参照を追加する

これで、Windows JavaScript Fragment 名前空間への参照を追加する準備ができました。

WinJS.UI.Fragments 名前空間への参照を default.js に追加するには

  1. [プロジェクト] パネルで、PickaFlick を右クリックし、[Visual Studio で編集] をクリックします。

    Visual Studio で PickaFlick プロジェクトが開きます。

  2. Visual Studio のソリューション エクスプローラーで、js フォルダーを展開し、default.js をダブルクリックして開きます。

  3. 次のコードを app.start(); のすぐ下に貼り付けます。

    //add DOMContentLoaded event
    document.addEventListener("DOMContentLoaded", loadInitialPage, false);

  4. 次のコードをスクリプトの末尾に貼り付けます。

    //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
var target;

function loadInitialPage() {
    target = document.querySelector("body");
    WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
}

  5. Ctrl キーと Shift キーを押しながら S キーを押してすべての変更を保存し、Blend に戻ります。

  6. プロジェクトの再読み込みを求めるメッセージが表示されたら、[再読み込み] をクリックします。 Visual Studio でプロジェクトに対して行った変更が Blend に反映されます。

homepageContainer が [ライブ DOM] パネルに表示されるようになったことに注意してください。 アプリの上部の [default.html] タブをクリックすると、 [ライブ DOM] パネルの homepageContainer の背景色が [ライブ DOM] パネルの他の要素と異なっており、別のページのものであることがわかります。 また、homepageContainer の右に、フラグメントであることを示すアイコン Blend の [フラグメント] アイコン が表示されます。

Blend - LiveDOM パネル内のフラグメント

[ライブ DOM] パネルで [homepageContainer] をクリックすると、関連ドキュメント ビューで homepage.html が開きます。 これらの手掛かりに加えて、default.html の作業中に homepage.html の要素を選択すると、アプリの上部の [default.html] タブの下に、「選択されたコンテンツは homepage.html のパーツです」という通知が表示されます。 単一ページ ナビゲーション モデルのコアである default.html で作業をしている場合、このメッセージによってデザイン サーフェイスに表示されるオブジェクトまたは要素のソースを識別できます。

Blend - 選択された内容のメッセージ (HTML)

イメージをプロジェクトに追加する

PickaFlick アプリはグラフィック デザイナーによって作成されたイメージでビルドされます。 このチキン イメージは、視覚的な効果を高めるだけでなく、ユーザーがアプリを起動するときにクリックするボタンの役割も果たします。

イメージは次の方法でプロジェクトに追加できます。

  • [プロジェクト] メニューの [既存項目の追加] を使用する

  • コピーして貼り付ける

  • ドラッグ アンド ドロップする

この例では、イメージをコピーして貼り付けます。

イメージをプロジェクトに追加するには

  1. このサンプル プロジェクトには次のイメージが含まれています。

    • ChickenSprite

    • FilmStrip

    • MainLogo

    • SmallLogo-Chicken

    • TempBoxArt

    サンプル プロジェクトをダウンロードしたら、Assets フォルダーを開き、Ctrl キーを押しながら A キーを押してから、Ctrl キーを押しながら C キーを押します。

  2. Blend の [プロジェクト] パネルで、[イメージ] フォルダーを右クリックし、[貼り付け] をクリックします。

アプリのスタイルを設定するときにデザイン サーフェイスにイメージを追加できるようになりました。

CSS スタイル ルールを定義する

アプリの外観を変更する基本的な方法は CSS スタイルを適用することです。 スタイルは任意のテキスト エディターを使用して編集できますが、Blend に組み込まれている一連の高度な CSS ツールを使用すると、より簡単に作成したり編集したりできます。

Blend では、次の方法で特定の CSS プロパティを設定できます。

  • コード エディターで直接入力します。

  • 目で見て探すか、[検索または設定] ボックスにプロパティ名を入力して [CSS プロパティ] パネルで変更するプロパティを見つけ、そのプロパティの値エディターに必要な値を入力します。

  • 正しい CSS 構文を使用して、[検索または設定] ボックスにプロパティの宣言を直接入力します。 たとえば、background-repeat プロパティを repeat-x に設定するには、[検索または設定] ボックスに「background-repeat: repeat-x」と入力し、Enter キーを押します。

    [検索または設定] ボックスに複数のプロパティの名前と値を直接入力して、同じ要素について複数のプロパティを入力することもできます。 正しい CSS 構文に従って、それぞれのスタイル定義をセミコロン (;) で区切ります。 たとえば、background-repeat プロパティを repeat-x に設定し、position-y プロパティを center に設定するには、[検索または設定] ボックスに「background-repeat: repeat-x; position-y: center」と入力し、Enter キーを押します。

[CSS プロパティ] パネルでは、カテゴリまたは名前のどちらかに基づいてプロパティを並べ替えることができます。

Blend - [CSS のプロパティ] パネルの [並べ替え] オプション

カテゴリに基づいて並べ替えた場合、CSS プロパティがカテゴリ別にまとめられ、それぞれのカテゴリでアルファベット順に表示されます。 名前に基づいて並べ替えた場合は、使用できるすべての CSS プロパティがアルファベット順に表示されます。

次に、height プロパティを homepageContainer に適用し、イメージを追加してスタイルを設定します。

homepageContainer の高さを変更するには

  1. [ライブ DOM] パネルで、[homepageContainer] を右クリックし、[要素 ID からスタイル ルールを作成] をクリックします。

    #homepageContainer が [スタイル ルール] パネルに表示されるようになったことに注意してください。 緑のアウトラインは現在選択されているスタイルを示します。 #homepageContainer の下の黄色のインジケーターは新しいスタイルの挿入位置を示します。 新しいスタイルを別の位置に挿入する場合は、挿入位置をドラッグできます。 [CSS プロパティ] パネルで、[#homepageContainer (default.css)] が [適用されるスタイル] ウィンドウに表示されていることにも注意してください。

  2. [CSS プロパティ] パネルで、[検索または設定] ボックスに「height」と入力して高さのプロパティを見つけます。

  3. height の値エディターに、「100%」と入力します。

    カテゴリに基づいてプロパティを並べ替えている場合は、line-height が一覧の先頭に表示されます。 名前に基づいてプロパティを並べ替えている場合は、height が一覧の先頭に表示されます。

背景イメージを追加してスタイルを設定するには

  1. [検索または設定] ボックスで [x] をクリックして、前の手順で選択した内容をクリアします。

  2. [CSS プロパティ] パネルの [背景] カテゴリで、[レイヤー] ボックスを見つけ、[追加] [追加] ボタン をクリックして、イメージ リソース ボタン Blend の背景イメージ ボタン をクリックします。

  3. ソースの一覧で [FilmStrip.png] をクリックします。

  4. position-y を center に設定し、repeat を repeat-x に設定します。

    Blend FilmStrip.png ビフォー/アフター (HTML)

メイン ロゴを追加してスタイルを設定するには

  1. [レイヤー] ボックスで、[追加] [追加] ボタン をクリックし、イメージ リソース ボタン Blend の背景イメージ ボタン をクリックします。

  2. ソースの一覧で [MainLogo.png] をクリックします。

    MainLogo.png が filmstrip.png の後ろに表示される点に注意してください。

  3. z-index (レイヤーの順序) を変更するために、[レイヤー] ボックスの [MainLogo.png] をクリックし、上向きの矢印をクリックして、イメージの一覧で filmstrip.png の上に MainLogo.png を移動します。

    これで、MainLogo.png が filmstrip.png の手前に表示されます。

    Blend MainLogo.png ビフォー/アフター (HTML)

  4. position-x と position-y を center に設定し、repeat を no-repeat に設定します。

    Blend MainLogo.png (HTML)

フレックス ボックス レイアウト コンテナーを作成する

このセクションでは、チキン イメージを追加してスタイルを設定します。 チキン イメージはマスター ページの中央に表示されますが、ポインターを合わせると位置が変わります。 この効果は実際のアニメーションではなく、イメージに適用される hover 擬似クラスによるものです。 既定では、イメージの半分だけが表示されます。 ポインターを合わせると、イメージの非表示の部分が表示され、既定の表示が置き換えられてアニメーションがシミュレートされます。

Blend ChickenSprite.png (HTML)

さらに簡単にイメージを配置するには、homepageContainer の display プロパティを変更して、flexbox レイアウト コンテナーを作成します。 「可変ボックス ("Flexbox") レイアウト」を参照してください。

フレックス ボックスを追加してスタイルを設定するには

  1. [ライブ DOM] パネルで、[homepageContainer] をクリックします。

  2. [プロジェクト] パネルで、[イメージ] フォルダーを開き、[ChickenSprite.png] をダブルクリックしてデザイン サーフェイスにチキン イメージを追加します。

    [homepageContainer] をクリックして、ChickenSprite.png を homepageContainer の子として追加しました。 img 要素がアクティブになり、チキン イメージがデザイン サーフェイスに表示されます。

    デザイン サーフェイス上の Blend chickenSprite.png (HTML)

  3. [ライブ DOM] パネルで、[homepageContainer] をクリックします。

  4. [CSS プロパティ] パネルで、[レイアウト] カテゴリを見つけ、[display] の一覧で [flex] をクリックします。

  5. [フレックス ボックス] カテゴリで、align-items と justify-content を center に設定します。

  6. [ライブ DOM] パネルで、[img] 要素を右クリックし、[グループ化設定] をクリックして [div] をクリックするか、Ctrl キーを押しながら G キーを押します。

    ヒント

    img 要素を div にドラッグすることもできます。

    イメージ要素は div コンテナーでラップされるようになりました。

  7. [div] をクリックし、テキスト ボックスに「spriteContainer」と入力します。

  8. [spriteContainer] を右クリックし、[要素 ID からスタイル ルールを作成] をクリックします。

  9. [CSS プロパティ] パネルで、height を 180px に設定し、overflow-y を hidden に設定します。

    Blend chickenSprite.png ビフォー/アフター (HTML)

  10. [ライブ DOM] パネルで、[img] をクリックし、テキスト ボックスに「chickenButton」と入力します。

    ヒント

    img 要素が表示されない場合は、spriteContainer を展開します。

  11. [スタイル ルール] パネルで、[default.css] の右側の [追加] [追加] ボタン をクリックします。

  12. [スタイル ルール] パネルで、[.newStyle] をクリックし、「#chickenButton:hover」と入力して chickenButton の擬似セレクターを作成します。

    入力時、スタイル ルールの開発を容易にするために、CSS Intellisense によって使用できる CSS 参照が表示されます。

    Blend の CSS Intellisense スタイル ルール パネル (HTML)

  13. [CSS プロパティ] パネルの [余白] カテゴリで、margin-top を -180px に設定します。

F5 キーを押してアプリをビルドして実行するか、Ctrl キーを押しながら I キーを押して対話モードでアプリをプレビューします。 チキン イメージにポインターを合わせて、チキン イメージの状態が切り替わることを確認します。 Alt キーを押しながら F4 キーを押して、アプリを閉じます。

これで、詳細ページを作成する準備が整いました。 続行するには、「Blend を使用した初めての Windows ストア アプリの作成、パート 2: 詳細ページ (HTML と JavaScript)」を参照してください。