エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 で初めてのアプリを作成する方法

2014/06/18

このトピックでは、Windows Phone の最初のアプリを作成するための手順を順番に説明します。ここでは、基本的な Web ブラウザーを作成します。ユーザーがこの簡単なアプリを使用して URL を入力し、[移動] ボタンをクリックすると、Web ページが読み込まれます。

C# または Visual Basic.NET の完全なミニブラウザーのサンプルをダウンロードできます。

このトピックは、次のセクションで構成されています。

 

このチュートリアルでは、エミュレーターでアプリをテストすることを前提としています。電話でアプリをテストする場合は、追加の手順を実行する必要があります。詳細については、「Windows Phone 8 で電話を開発用に登録する方法」を参照してください。

このトピックの手順では、Visual Studio Express 2012 for Windows Phone を使用することを前提としています。Visual Studio 2012 Professional 以上を使用しているか、Visual Studio でレイアウトやメニューをカスタマイズした場合、ウィンドウ レイアウトやメニュー コマンドが多少異なることがあります。

Windows Phone アプリ作成の最初の手順は、Visual Studio で新しいプロジェクトを作成することです。

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

  1. Windows Phone SDK をダウンロードしてインストールしたことを確認します。詳細については、「SDK を取得する」を参照してください。

  2. Windows のスタート画面から Visual Studio を起動します。登録ウィンドウが表示された場合、製品を登録するか、一時的にウィンドウを閉じます。

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

  4. [新しいプロジェクト] ウィンドウで、インストールされている [Visual C#] または [Visual Basic] テンプレートを展開し、[Windows Phone] テンプレートを選択します。

  5. [Windows Phone] テンプレートの一覧で、Windows Phone アプリ  テンプレートを選択します。

  6. [新しいプロジェクト] ウィンドウの下部にプロジェクトの [名前] として「MiniBrowser」を入力します。

    GetStartedNewProject
  7. [OK] をクリックします。[新しい Windows Phone アプリケーション] ダイアログ ボックスの [対象の Windows Phone OS のバージョン] で [Windows Phone OS 8.0] を選択します。

    • 対象バージョンとして [Windows Phone OS 8.0] を選択すると、アプリは Windows Phone 8 デバイスでのみ実行できます。

    • [Windows Phone OS 7.1] を選択すると、アプリは Windows Phone OS 7.1 と Windows Phone 8 の両方のデバイスで実行できます。

    GetStartedSelectPlatform
  8. [OK] をクリックします。新しいプロジェクトが作成され、Visual Studio で開かれます。デザイナーに、アプリのユーザー インターフェイスが含まれている MainPage.xaml が表示されます。メイン Visual Studio ウィンドウには、次の項目が含まれています。

    • 中央のペインにはページのユーザー インターフェイスを定義する XAML マークアップが含まれます。

    • 左ペインには、XAML マークアップの出力を表示するスキンが含まれます。

    • 右ペインにはソリューション エクスプローラーが含まれ、プロジェクト内のファイルが一覧表示されます。

    • 関連付けられた分離コード ページ MainPage.xaml.cs または MainPage.xaml.vb は、ユーザーとページとのやり取りを処理するコードが含まれ、既定では開かれず、表示されません。

    New project open in the Visual Studio designer.

次の手順では、Visual Studio デザイナーを使用して、アプリの UI を構成するコントロールを配置します。コントロールを追加した後、最終的なレイアウトは次のスクリーンショットのようになります。

GetStartedFirstAppLayout

UI を作成するには

  1. Visual Studio 内に [プロパティ] ウィンドウが開いていない場合、[表示] メニューの [プロパティ ウィンドウ] をクリックして開きます。[プロパティ] ウィンドウが開き、Visual Studio ウィンドウの右下隅に表示されます。

  2. アプリのタイトルを変更します。

    1. Visual Studio デザイナーで、MY APPLICATION TextBlock コントロールをクリックして選択します。コントロールのプロパティが [プロパティ] ウィンドウに表示されます。

      GetStartedProperties

    2. Text プロパティで、アプリ ウィンドウのタイトル名を MY FIRST APPLICATIONに変更します。[プロパティ] ウィンドウでプロパティがカテゴリごとにグループ化されている場合、Text は [共通] カテゴリにあります。

  3. ページの名前を変更します。

    1. デザイナーで、ページ名 TextBlock コントロールをクリックして選択します。

    2. Text プロパティを Mini Browser に変更し、アプリのメイン ページの名前を変更します。

  4. サポートされている方向を変更します。

    1. [XAML コード] ウィンドウで、XAML コードの最初の行をクリックします。PhoneApplicationPage のプロパティが [プロパティ] ウィンドウに表示されます。

    2. SupportedOrientations プロパティを PortraitOrLandscape に変更し、縦向きと横向きの両方の表示方向のサポートを追加します。[プロパティ] ウィンドウでプロパティがカテゴリごとにグループ化されている場合、SupportedOrientations は [共通] カテゴリにあります。

  5. Visual Studio のツールボックスが開いていない場合、[表示] メニューの [ツールボックス] をクリックしてツールボックスを開きます。ツールボックスは一般に Visual Studio ウィンドウの左側に開き、ユーザー インターフェイスを構築するために使用できるコントロールのリストが表示されます。既定で、ツールボックスは使用していないときに折りたたまれます。

    Visual Studio Toolbox
  6. URL 用のテキスト ボックスを追加します。

    1. ツールボックスの [Windows Phone 共通コントロール] グループから、TextBox コントロールをデザイナー画面に追加します。それにはツールボックスからコントロールをドラッグし、デザイナー画面にドロップします。TextBoxMini Browser テキストのすぐ下に配置します。マウスを使用して、上記のレイアウト イメージに示した幅に近いサイズにコントロールを調整します。[移動] ボタンの右側は空けておきます。

    2. [プロパティ] ウィンドウで、新しいテキスト ボックスに対して次のプロパティを設定します。

      プロパティ

      名前

      URL

      Text

      http://www.xbox.com

      TextWrapping

      NoWrap

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Stretch

      VerticalAlignment

      Top

      これらの設定によって、縦向きモードと横向きモードの両方でコントロールのサイズと位置を自動的に正しく設定できます。

  7. [移動] ボタンを追加します。

    1. [移動] ボタンの入るスペースを空けるために、テキスト ボックスのサイズを変更します。次に、ツールボックスの [Windows Phone 共通コントロール] グループから、Button コントロールをドラッグ アンド ドロップして追加します。それを追加したばかりのテキスト ボックスの右側に配置します。前のイメージとほぼ同じ幅になるようにボタンのサイズを変更します。

    2. [プロパティ] ウィンドウで、新しいボタンに対して次のプロパティを設定します。

      プロパティ

      名前

      移動

      Content

      移動

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Right

      VerticalAlignment

      Top

      これらの設定によって、縦向きモードと横向きモードの両方でコントロールのサイズと位置を自動的に正しく設定できます。

  8. WebBrowser コントロールを追加します。

    1. ツールボックスの [Windows Phone のすべてのコントロール] グループからアプリに WebBrowser コントロールをドラッグ アンド ドロップして追加します。前の手順で追加した 2 つのコントロールの下に配置します。マウスを使用して、残りのスペースに収まるようコントロールのサイズを変更します。

      WebBrowser コントロールの詳細については、「Windows Phone 8 の WebBrowser コントロール」を参照してください。

    2. [プロパティ] ウィンドウで、新しい WebBrowser コントロールに対して次のプロパティを設定します。

      プロパティ

      名前

      MiniBrowser

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Stretch

      VerticalAlignment

      Stretch

      これらの設定によって、縦向きモードと横向きモードの両方でコントロールのサイズと位置を自動的に正しく設定できます。

レイアウトは完了しました。MainPage.xaml の XAML コードで、コントロールがあるグリッドを探します。コードは次のようになります。レイアウトを前の図と正確に一致させる場合、次の XAML をコピーしペーストして、MainPage.xaml ファイルのグリッド レイアウトと置き換えます。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="http://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

アプリをテストする前の最後の手順として、[移動] ボタンを実装するコードを追加します。

コードを追加するには

  1. デザイナーで、追加した [移動] ボタン コントロールをダブルクリックして、ボタンの Click イベントに対する空のイベント ハンドラーを作成します。C# コードのページで [MainPage.xaml.cs] タブ、または Visual Basic コードで [MainPage.xaml.vb] タブに空のイベント ハンドラーが表示されます。

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using MiniBrowser.Resources;
    
    namespace MiniBrowser
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Go_Click(object sender, RoutedEventArgs e)
            {
    
            }
        }
    }
    

    [移動] ボタンをダブルクリックすると、Visual Studio で MainPage.xaml の XAML も更新され、ボタンの Click イベントが Go_Click イベント ハンドラーに接続されます。

        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>
    
    
  2. MainPage.xaml.cs または MainPage.xaml.vb で、コードの強調表示された行を Go_Click イベント ハンドラーに追加します。このコードは、ユーザーがテキスト ボックスに入力した URL を取得し、MiniBrowser コントロールでその URL に移動します。

    private void Go_Click(object sender, RoutedEventArgs e)
    {
        string site = URL.Text;
        MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
    }
    

これで最初の Windows Phone アプリが完成しました。次にアプリのビルド、実行、デバッグを行います。

アプリをテストする前に、コンピューターでインターネットにアクセスでき、Web ブラウザー コントロールをテストできることを確認してください。

エミュレーターでアプリを実行するには

  1. [ビルド] メニューの [ソリューションのビルド] をクリックして、ソリューションをビルドします。

    エラーが発生した場合、[エラー一覧] ウィンドウにエラーが表示されます。[エラー一覧] ウィンドウが開いていない場合、[表示] メニューの [エラー一覧] をクリックして開くことができます。エラーがある場合、上記の手順を確認し、エラーを修正した後、もう一度ソリューションをビルドします。

  2. 標準ツール バーで、アプリの配置対象が Emulator WVGA 512MB など、Windows Phone Emulator の値の 1 つに設定されていることを確認します。

    Target on Standard Toolbar selecting emulator

  3. F5 キーを押すか [デバッグ] メニューの [デバッグの開始] をクリックして、アプリを実行します。これによってエミュレーター ウィンドウが開き、アプリが起動します。エミュレーターを初めて起動したときは、アプリの起動に数秒間かかることがあります。

    Windows Phone 8 Emulator には特別なハードウェア、ソフトウェア、および構成の要件があります。エミュレーターに問題がある場合、次のトピックを参照してください。

  4. 実行中のアプリをテストするには、[移動] ボタンをクリックし、指定した Web サイトにブラウザーが移動することを確認します。

    GetStartedFirstAppRunning
  5. 横向きモードでアプリをテストするには、エミュレーターのツール バーで回転コントロールの 1 つを押します。

    rotate left button または rotate right button

    エミュレーターが回転して横向きモードになります。コントロールのサイズは横向き画面形式に合わせて自動的に変更されます。

    GetStartedFirstAppRunningLandscape
  6. デバッグを停止するには、Visual Studio の [デバッグ] メニューの [デバッグの停止] を選択します。

    デバッグ セッションを終了したら、エミュレーターを実行したままにしておくことをお勧めします。次回アプリを実行したときに、エミュレーターが既に実行しているため、アプリの起動が速くなります。

これで処理は完了しました。これで最初の Windows Phone アプリが正しく完成しました。

Windows Phone の開発を開始します。

電話の登録

アプリを電話にインストール、実行、デバッグできるように、電話を登録します。

Windows Phone 8 で電話を開発用に登録する方法

他のサンプル アプリをダウンロードする

多くのサンプルから選択して、特定のコントロール、機能、およびアプリケーションの種類がどのように動作するかを学習できます。

Windows Phone デベロッパー センターのサンプル ギャラリー

オンライン コースで詳しく学習する

関心のある機能について、ビデオを見たりデモを実行して学習してください。

初心者向け Windows Phone 8 の開発 (35 パート)

Windows Phone 8 Jump Start 用アプリの簡単構築 (21 パート)

作業開始のチェックリストをもう一度確認してください

SDK で何が実行できるかを知り、優れたアプリを構築するためのガイダンスを見つけてください。

Windows Phone 8 の開発の概要

表示:
© 2014 Microsoft