初めてのアプリを Project Siena で作成する

  • [アーティクル]

 

プログラミング言語を知らなくても、おしゃれで興味を引く便利な Windows 用アプリをデザインおよび作成できます。Project Siena アプリでは、オンライン オークションで掘り出し物を探したい場合であれ、見込み客を請求可能な仕事時間に変えたい場合であれ、自分でゼロから入力したデータを追跡して表示することができます。さらに、Excel、SharePoint、ソーシャル メディア、Azure、または REST サービスなどの既存のソースから大規模なデータ セットを追加することもできます。その後、個人用にアプリをインストールしたり、友人、家族、または企業組織と共有したりできます。

このトピックの手順に従うことにより、アプリの 1 つの画面でユーザーからの投票を収集し、別の画面で結果を集計できます。

3 色で縦方向に配置された 3 つのボタン、それぞれに別のテキストが付いている

Three labels that show how many of each vote was cast

基本プロセスを理解したら、より複雑なコレクションを作成して管理したり、外部ソースからデータを追加したりできるようになります。初期のデータ セットを追加または収集したら、それをギャラリーに表示し、データをフィルター処理してソートし、他のタスクを実行することができます。

  • Project Siena の概要や、サンプル アプリ、ビデオ チュートリアル、フォーラムなどのリソースへのリンクについては、「Project Siena」を参照してください。

  • Project Siena で作成可能なアプリの他の例については、Channel 9 にあるビデオをご覧ください。

必須コンポーネント

Project Siena だけを使用してアプリの開発とテストができますが、アプリをインストールするには、他のいくつかの前提条件を満たす必要があります。

Project Siena をインストールして開く

  1. Windows ストアから Project Siena をインストールし、他の Windows アプリを開くときと同じ方法でアプリを開きます。

    プロジェクト Siena の [スタート] 画面のタイトル

    アプリは既定ではスタート画面にピン留めされていませんが、Windows のチュートリアルの「スタート画面」ページにある「よく使うアプリをピン留めする」セクションの手順に従うことによって、より簡単に Project Siena にアクセスできます。

  2. Project Siena を初めて開くと、短いビデオが自動的に再生されます。そのビデオを見るか、右下隅付近にある [ツアーをスキップ] をクリックします。

  3. (省略可能) アプリを保存するには、Ctrl + S を押してテキスト ボックスに名前を入力し、[保存] をクリックします。

    既定では、Project Siena のファイルは現在のユーザーの [ドキュメント] フォルダーに保存されますが、別の場所を指定することもできます。

コントロールの追加、サイズ変更、および移動

  1. 画面の中央にある [ビジュアルの追加] をクリックすると、アプリに追加できるコントロールのリストが開きます。

    代わりに Alt+V を押すか、上部のアプリ バーが閉じている場合は、ウィンドウの右上隅に表示される + 記号をクリックすることによっても、その同じリストを表示できます。

    ビジュアル ボタンを追加

  2. コントロールのリストを下にスクロールし、[ボタン] コントロールが表示されたら、それをクリックします。

    Click this icon to add a button to your app

    アプリの画面にボタンが表示され、[テキスト] ダイアログ ボックスが自動的に開きます。このダイアログ ボックスはこの手順の後のほうで使用しますが、今は閉じておきます。

  3. [テキスト] ダイアログ ボックス以外の場所をクリックしてそれを閉じてから、ボタンをクリックして選択します。

    UI 要素を選択すると、グレーの太線のボックスで囲まれる

    太い灰色のボックスでボタンが囲まれて選択された状態になり、ウィンドウの上部近くのコントロールのリストにボタンの名前が表示されます。

  4. ボタンの名前を変更するには、ウィンドウの上部近くにある [ボタン1] をクリックしてカーソルを表示させ、「オプション1」と入力し、Enter キーを押します。

    ウィンドウの最上部近くにある UI 要素のリストをクリックしてから、入力して、その名前を変更する

  5. ボタンが選択されている状態で、選択ボックスの右下隅にある小さい白い三角形をドラッグして、ボタンのサイズを変更します。

    ボタンのサイズを元の幅の約 2 倍に変更してから、ボタンの高さを増やすことで、正方形にすることができます。

    ボタンは、元の 2 倍の幅の四角形にします。

  6. 選択ボックスをドラッグしてボタンを下に移動し、画面の左端の中心近くに表示されるようにします。

    注意

    コントロールを削除する場合は、選択し、Delete キーを押します。

コントロールの構成

このセクションでは、前のセクションで追加したコントロールのプロパティを構成します。これらのプロパティは、デザイン、データ、および動作の 3 つのカテゴリに分類されます。デザイン カテゴリのプロパティではコントロールの外観を決定し、データ カテゴリのプロパティでは表示内容を決定します。動作カテゴリのプロパティではコントロールに対して何らかの処理が行われた場合 (たとえば、ユーザーがボタンをクリックした場合) にアプリが何を行うかを決定します。アプリに追加できる他のコントロールにも同じカテゴリが当てはまります。

  1. ボタンのデザイン プロパティを表示するには、ボタンを選択し、ウィンドウの下部近くに [デザイン] アイコンが表示されたらそれをクリックします。

    [デザイン] アイコン

  2. ボタンのテキストを変更するためのダイアログ ボックスを開くには、ウィンドウの下部近くにある [テキスト] アイコンをクリックします。

  3. ボタンのテキストのサイズを大きくするには、表示されるダイアログ ボックスの左側にある [11] をクリックしてから、スライダーをドラッグするか、テキスト ボックスに [40] と入力します。

    文字のサイズが 40 の青ボタン

  4. (省略可能) [塗りつぶし] アイコンをクリックしてから、表示されるダイアログ ボックスにある緑のボックスをクリックします。

    注意

    テキスト ボックス内の値を変更することにより、色を変更することもできます。たとえば、RGBA(0, 176, 80, 1) と入力すると、ボタンを緑色に変更できます。

    緑で塗りつぶされたボタン

  5. ボタンを選択した状態で、ウィンドウの左下隅に [データ] アイコンが表示されたらそれをクリックすると、ボタンのデータ プロパティが表示されます。

    プロパティのカテゴリが Data のアイコン

  6. [テキスト] アイコンをクリックし、ダイアログ ボックスが表示されたら、"はい" と入力します (引用符もそのまま入力してください)。

    ボタンのテキスト プロパティの設定

    注意

    プロパティがどのカテゴリのものか分からなくなった場合は、ウィンドウの右下隅にある [エクスプレス ビュー] アイコンをクリックしてプロパティのリストを表示できます。必要なプロパティが既定では表示されない場合は、それが属するカテゴリの下矢印をクリックします。そのカテゴリのすべてのプロパティが表示されます。[エクスプレス ビュー] を閉じるには、ウィンドウの右下隅にあるアイコンを再度クリックします。

データの収集

このセクションでは、アプリで各ボタンをクリックした回数に基づいてデータを収集します。Project Siena では、コレクションは少なくとも 1 つのフィールドを持つ少なくとも 1 つのレコードを構成するデータ セットです。たとえば、アドレス帳には各個人または各会社に対して 1 つのレコードがあり、各レコードにはそれぞれのフィールドに名前、住所、および電話番号があります。

独自のアプリを設計する際には、既存のソースからデータを追加したり,ユーザーから他の種類のデータを収集したり、あるいはその両方を行ったりするかもしれません。しかし、この例では最小限の準備で学習できます。

  1. ウィンドウの下部近くにある [選択時] アイコンをクリックします。

    画面下部近くの [選択時] ボタン

    [選択時] プロパティは [動作] カテゴリに属しています。このカテゴリには、このコントロールの他のプロパティは含まれません。このカテゴリに複数のプロパティが含まれるコントロールの場合、[動作] アイコンをクリックして、このカテゴリのプロパティのアイコンを表示します。

    プロパティのカテゴリが Behavior のアイコン

  2. 表示されるダイアログ ボックスに、以下の関数を入力します。

    Collect(Responses, "はい")

    後で [プレビュー] モードを開いてこのボタンをクリックすると、単一列で成る Responses というコレクションが作成され、"はい" を含む 1 行がこのコレクションに追加されます。コレクションの詳細については、「Project Siena でコレクションを作成および管理する」を参照してください。

  3. ボタンを選択した状態で Ctrl+C を押してボタンをコピーし、Ctrl+V を 2 回押してさらに 2 つのボタンを作成します。

  4. ウィンドウの上部近くにあるコントロールのリストの新しい名前を入力することによって、[オプション2] と [オプション3] の 2 つの新しいボタンに名前を付けます。

  5. [オプション2] ボタンを [オプション1] の右に移動して、[オプション3] ボタンを [オプション2] の右に移動し、3 つのボタンすべてがスクリーンの垂直方向の中央付近にある行に表示されるようにします。

    注意

    Alt キーを押すことによって、スクリーンにすべてのコントロールの名前を表示できます。

    1 行に並んだ 3 つのボタン

  6. [オプション2] ボタンの [テキスト] プロパティを "いいえ" に変更し、[オプション3] ボタンの [テキスト] プロパティを "おそらく" に変更します。

     

    注意

    既定のテキストをダブルクリックし、テキストを入力することにより、ボタンの [テキスト] プロパティを変更できます。

  7. [オプション2] ボタンの [塗りつぶし] プロパティを赤色に変更し、[オプション3] ボタンの [塗りつぶし] プロパティを黄色に変更します。

    3 色で縦方向に配置された 3 つのボタン、それぞれに別のテキストが付いている

  8. [オプション2] ボタンの [選択時] プロパティを以下の関数に設定します。

    Collect(Responses, "いいえ")

  9. [オプション3] ボタンの [選択時] プロパティを以下の関数に設定します。

    Collect(Responses, "おそらく")

    3 つのボタンのいずれかをクリックした時点で、コレクションがまだ存在しない場合はここで作成され、クリックしたボタンのデータが最初の行に設定されます。コレクションがすでに存在する場合、データは後続の行に追加されます。

    注意

    セッションをまたいでデータを格納しておく場合は、アプリを閉じる前にデータを保存し、アプリを再度開くときにコレクションに読み込み直す必要があります。詳細については、「Project Siena でコレクションを作成および管理する」を参照してください。

アプリをテストする

  1. F5 を押してプレビュー モードを開きます。

    注意

    ウィンドウの空白の領域を右クリックして、上部のアプリ バーの右端付近のプレビュー アイコンをクリックすることでも、プレビュー モードを開くことができます。

    Siena のプレビュー

  2. 各ボタンを任意の順序で任意の回数クリックしてから、Esc キーを押してプレビュー モードを閉じて、デザイン ワークスペースに戻ります。

    注意

    これらのボタンはデザイン ワークスペースで機能しますが、すべてのコントロールがそのように機能するわけではありません。アプリを他のユーザに公開および配布する前に、すべての機能をプレビュー モードでテストし、期待どおりに動作することを確認します。

  3. Alt+F を押して上部のアプリ バーを開き、[アプリのデータ] をクリックしてから、[コレクション] をクリックします。

    プレビューには、Responses コレクションの最初の 5 行が表示されます。

    回答コレクションの最初の 5 行

  4. Esc キーを押して デザイン ワークスペースに戻ります。

もう 1 つのスクリーンとナビゲーション UI の追加

ここまでで、ユーザーがボタンをクリックしてコレクションにデータを送信するためのスクリーンが作成できました。次の 2 つのセクションで、作成したコレクション内のデータを集計するスクリーンを作成します。

  1. ウィンドウの左上隅で、[Screen1] をクリックしてカーソルを表示させ、[投票] と入力します。

    画面 1 の名前を「投票」に変更

  2. Alt + F をクリックして上部のアプリ バーを開き、[スクリーンの追加] をクリックします。

    アプリに画面を追加するボタン

  3. 追加したばかりのスクリーンをクリックして、その名前を [結果] に変更します。

  4. [結果] の横にある下矢印をクリックしてから、[投票] をクリックすることで、前のスクリーンに戻ります。

  5. Alt+V を押して、[図形] (表示されるリストの途中付近) をクリックしてから、[次へ矢印] コントロール (表示されるリストの下部) をクリックしてスクリーンに追加します。

    右向きの矢印 (丸で囲まれている)

  6. 矢印をスクリーンの右下隅にドラッグしてから、ウィンドウの左下隅にある [選択時] アイコンをクリックします。

  7. [選択時] ダイアログ ボックスで、[移動] をクリックします。これにより、矢印の [選択時] プロパティは以下の関数に設定されます。

    Navigate(結果, ScreenTransition!Fade)

    [プレビュー] モードを開いて矢印をクリックすると、[結果] スクリーンがフェードインして表示されます。

  8. ダイアログ ボックス以外の場所をクリックすることで、[選択時] ダイアログ ボックスを閉じます。

  9. [結果] スクリーンに [戻る矢印] を追加し、その [選択時] プロパティを以下の関数に設定します。

    Navigate(投票, ScreenTransition!Fade)

データの表示

  1. [結果] スクリーンで、Alt+V を押して [ラベル] コントロールを追加し、左矢印の下に移動させます。

  2. ラベルを選択した状態で、[データ] が左下隅に表示されたらそれをクリックし、ラベルの [テキスト] プロパティを以下の関数に設定します。

    "はい: " & CountIf(Responses, "はい" in Value)

    このラベルは、Responses コレクションで Value 列に "はい" が現れる回数を示します。

  3. (省略可能) ラベルのフォント サイズを 25 に設定し、テキストを太字にし、内容に合わせてラベルのサイズを変更します。

  4. ラベルのコピーを 2 つ作成し、最初のラベルを含む列に配置します。

  5. 最初のラベルの名前が [ラベル1] でない場合、名前を [ラベル1] に変更します。

  6. 2 番目のラベルの名前を [ラベル2] に変更し、[テキスト] プロパティを以下の関数に設定します。

    "いいえ: " & CountIf(Responses, "いいえ" in Value)

  7. 3 番目のラベルの名前を [ラベル3] に変更し、[テキスト] プロパティを以下の関数に設定します。

    "おそらく: " & CountIf(Responses, "おそらく" in Value)

    3 つのラベルには、[投票] ページで各ボタンをクリックした回数が表示されます。

    Three labels that show how many of each vote was cast

機能の追加

Project Siena の基本的なタスクを理解したら、さまざまな方法でアプリを強化できます。たとえば、他のコントロールを構成することにより、以下の機能を追加できます。

  • 投票数のグラフを作成します。(このリストを紹介するリンクをクリックし、[コントロール] セクションを展開し、[グラフ] セクションを展開します。)

  • SharePoint の他のコンピューター上のユーザーからの投票数を記録します。(このリストを紹介するリンクをクリックし、[コントロール] セクションを展開し、[SharePoint 更新] セクションを展開します。)

  • 最新のデータを自動的に示すメールを送信します。(このリストを紹介するリンクをクリックし、[コントロール] セクションを展開し、[Office 365 (Preview)] セクションを展開します。)

アプリのインストール

アプリの開発とテストが完了したら、開発に使用したのと同じデバイス、テスト デバイス、または組織全体で使用しているデバイスにそのアプリをインストールできます。アプリをインストールするには、現在の Windows 8 の開発者用ライセンスなど、いくつかの前提条件が必要です。ライセンスは無料ですが、アプリを継続して実行するには更新する必要があります。アプリ キーを必要とするデータ ソース (Bing Search など) に接続した場合は、アプリ キーも必要です。すべての前提条件と手順のリストについては、「Project Siena アプリをインストールする」を参照してください。