Project Siena でコントロールを構成する

Project Siena では、データを表示し、ユーザーからデータを収集し、ユーザー入力に応答するさまざまなコントロールを追加できます。各コントロールには、データ、動作、および設計のプロパティを指定できます。この指定により、コントロールの外観、このコントロールがユーザーや別のコントロールと対話するときの動作、その他の特性が決まります。

• コントロールを追加するなどの基本的なタスクを実行する方法については、「初めてのアプリを Project Siena で作成する」を参照してください。

  重要

  変更する対象のプロパティが見つからない場合は、右下隅にある [エクスプレス ビュー] をクリックすれば、プロパティの一覧がカテゴリごとに表示されます。それでも対象のプロパティが表示されない場合は、各カテゴリの下にある下矢印をクリックすると、そのカテゴリのすべてのプロパティが表示されます。

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

必須コンポーネント

このトピックで紹介している一部の機能を使用するには、2015 年 2 月 16 日より後に Project Siena をインストールする必要があります。

コントロール

Audio

オーディオ コントロールは、Internet Explorer でサポートされている任意の形式のサウンド ファイルを再生するように構成します。

1. オーディオ コントロールを追加し、左下隅に [データ] アイコンが表示されている場合はそれクリックした後、[メディア] アイコンをクリックします。

2. [メディアの追加] をクリックし、再生するサウンド ファイルを参照し、[開く] をクリックします。

   注意

   使用するファイルが格納されているフォルダーが見つからない場合は、ログオンしているアカウントの [ミュージック] フォルダーにファイルを移動またはコピーしてください。

3. 再生ボタン (オーディオ コントロールの左側にある) をクリックします。

   指定したファイルが再生されます。

マイクで録音したサウンドを再生するためにオーディオ コントロールを使用することもできます。

ボタン

例については、「初めてのアプリを Project Siena で作成する」を参照してください。

カメラ

デバイスに搭載されているカメラで写真を撮り、画像ギャラリーに表示します。

1. カメラ コントロールを追加するとき、許可を求められた場合は [許可] をクリックします。その後、コントロールに「MyCamera」という名前を付けます。

   カメラが向いている方向のライブ画像が表示されます。

2. [MyCamera] の [選択時] プロパティに以下の関数を設定します。

   Collect(MyImages, {SinglePicture:MyCamera!Photo})

   カメラをクリックするたびに写真が撮影され、MyImages という名前のコレクションに保存されます。

3. 画像ギャラリーを追加し、3 つのアイテムが表示されるように拡大し、[項目] プロパティを「MyImages」に設定します。

4. F5 キーを押してから、「MyCamera」を何回かクリックします。

   撮影したそれぞれの写真がギャラリーに表示されます。

5. Esc キーを押して、デザイン ワークスペースに戻ります。ギャラリーにある最初の画像の [選択時] プロパティを以下の関数に設定します。これにより、画像をクリックするとその画像を削除できるようになります。

   Remove(MyImages, ThisItem)

   注意

   アプリを閉じると、収集した画像は失われます。保存しておくには、画像を保存して読み込む必要があります。

グラフ

データをグラフィカルに表示するために、円グラフ、折れ線グラフ、または縦棒グラフを作成します。

• 縦棒グラフを追加し、その [項目] プロパティを以下の関数に設定します。

  Table({ProductType:"Violins", Revenue:Value(45000)}, {ProductType:"Trombones", Revenue:Value(39000)}, {ProductType:"Bongos", Revenue:Value(32000)})

  この関数では、ProductType 列と Revenue 列を含む一時テーブルを作成します。各行は、製品の種類 (バイオリン、トロンボーン、ボンゴ) と、その種類の製品の収入を示しています。

• 「初めてのアプリを Project Siena で作成する」の各投票ボタンがクリックされた回数を表示するには、そのアプリに円グラフを追加し、そのグラフの [項目] プロパティに以下の関数を設定します。

  Table({VoteType:"Yes", VoteTotal:CountIf(Responses, "Yes" in Value)}, {VoteType:"No", VoteTotal:CountIf(Responses, "No" in Value)}, {VoteType:"Maybe", VoteTotal:CountIf(Responses, "Maybe" in Value)})

  この関数では、VoteType 列と VoteTotal 列が含まれる一時テーブルを作成します。このテーブルには、投票の種類 (はい、いいえ、おそらく) ごとに 1 行と、その種類の投票でボタンがクリックされた合計回数が含まれます。

さらに別の例については、「Project Siena でグラフを追加する でグラフを追加する」を参照してください。

チェック ボックス

チェック ボックスがオンかオフかに基づいて、別のプロパティの値を指定します。この例では、ラベルに表示されるテキストを変更します。

1. チェック ボックスとラベルを追加し、チェック ボックスに「MyCheckbox」という名前を付けます。

2. (省略可能) チェック ボックスの [テキスト] プロパティを "I'm ready" に設定します。

3. ラベルの [テキスト] プロパティを以下の関数に設定します。

   If(MyCheckbox!Value = true, "Let's go!", "I'll wait.")

4. F5 キーを押して、チェック ボックスのオンとオフを何度か切り替えます。

   ラベルのテキストに 2 つのメッセージが交互に表示されます。

5. (省略可能) Esc キーを押して、デザイン ワークスペースに戻ります。

ドロップダウン リスト

ドロップダウン リストは、ラジオ ボタンと同じ方法で構成できます。

教育

Coursera データを追加する方法の例については、「外部ソースから Project Siena にデータを追加する」を参照してください。

エクスポート

別の Project Siena アプリにデータを転送するには、まず、データを圧縮されたファイルにエクスポートします。対象のアプリが異なるデバイス上にある場合は、ファイルをそのデバイスにコピーします。最後に、対象のアプリにインポートし、データをそのアプリのコレクションに追加するようにそのコントロールを構成します。

1. コレクションがない場合は、1 つ作成します。

   コレクションを作成する方法については、「初めてのアプリを Project Siena で作成する」または「Project Siena でコレクションを作成および管理する」を参照してください。

2. エクスポート コントロールを追加し、エクスポートするコレクションを [データ] プロパティに設定し、F5 キーを押します。

3. エクスポート コントロールをクリックして、データの入ったファイルを保存する場所を指定し、[保存] をクリックします。

   データがエクスポートされ、指定した場所にあるファイルに圧縮されます。

4. (省略可能) Esc キーを押して、デザイン ワークスペースに戻ります。

ギャラリー

1. テキスト ギャラリーを追加し、その [項目] プロパティを以下の関数に設定します。

   Table({Item:"Violin123", Location:"France", Owner:"Fabrikam"}, {Item:"Violin456", Location:"Chile"})

2. (省略可能) ギャラリーにあるラベルの [テキスト] プロパティに、以下の値を設定します。

   見出し1	ThisItem!Item
   サブタイトル1	ThisItem!Owner
   本文1	ThisItem!Location

その他の例については、「Project Siena ギャラリーでデータを表示する」を参照してください。

HTML ラベル

このコントロールは、RSS フィードやその他のソースにあるテキストを表示したり、HTML コード (リンク、画像、および CSS スタイルを含む) をレンダリングしたりするために使用できます。このコントロールは JavaScript を実行しません。また、Web コントロールや iframe でもありません。HTML ラベルは、ラベルを構成するのと同じ方法で構成できます。「初めてのアプリを Project Siena で作成する」の説明を参照してください。

イメージ

1 つの画像を表示するには、画像コントロールを使います。あるいは、ギャラリーに画像のセットを表示することもできます。

1. 画像コントロールを追加し、左下隅に [データ] アイコンが表示されている場合はそれをクリックした後、[画像] アイコンをクリックします。

2. [画像の追加] をクリックし、表示する画像ファイルを参照し、[開く] をクリックします。

   指定した画像がコントロールに表示されます。

   注意

   使用するファイルが格納されているフォルダーが見つからない場合は、ログオンしているアカウントの [ピクチャ] フォルダーにファイルを移動またはコピーしてください。

インポート

別の Project Siena アプリからエクスポートした場合は、そのデータを現在のアプリにインポートできます。それには、インポート コントロールを構成します。

1. インポート コントロールを追加し、名前を「MyImport」に変更し、[選択時] プロパティを以下の構文の関数に設定します。

   Collect(CollectionName, MyImport!Data)

   CollectionName は、データをインポートする先のコレクションの名前です。

2. F5 キーを押してから、コントロールをクリックします。

3. エクスポートしたデータの入っている圧縮ファイルを参照し、[開く] をクリックします。

4. (省略可能) Esc キーを押してデザイン ワークスペースに戻り、Alt キーを押しながら D キーを押し、左側のウィンドウで [コレクション] をクリックします。

   作成したコレクションの名前が中央のウィンドウの一覧に表示されます。一覧にある項目をクリックすると、右側のウィンドウにプレビューが表示されます。

テキスト入力

例については、「Project Siena でコレクションを作成および管理する」の最初のセクションを参照してください。

ラベル

例については、「初めてのアプリを Project Siena で作成する」を参照してください。

リストボックス

リストボックスでは、複数の項目を選択できます。選択した項目に応じて、他の 1 つ以上のコントロールのプロパティを決めることができます。たとえば、図形、画像、またはその他の要素を、どの項目が選択されているかに基づいて表示また非表示にできます。

1. リスト ボックスを追加し、「MyListBox」という名前を付け、[項目] プロパティを以下の関数に設定します。

   Table({Shape:"circle"}, {Shape:"triangle"}, {Shape:"rectangle"})

2. コントロールの一覧を開き、[図形] をクリックしてから、円、三角形、および四角形を追加します。

3. (省略可能) リスト ボックスの下の行に表示されるように図形を移動します。

4. 円の [表示] プロパティを以下の関数に設定します。

   If("circle" in MyListbox!SelectedItems!Value, true)

5. 三角形の [表示] プロパティを以下の関数に設定します。

   If("triangle" in MyListbox!SelectedItems!Value, true)

6. 四角形の [表示] プロパティを以下の関数に設定します。

   If("rectangle" in MyListbox!SelectedItems!Value, true)

7. F5 キーを押してから、リスト ボックスの 1 つまたは複数のオプションをクリックします。

   対応する図形だけが表示されます。

8. (省略可能) Esc キーを押して、デザイン ワークスペースに戻ります。

マイク

いくつかの録音を作成し、それをギャラリーに表示します。

1. テキスト入力コントロールを追加し、「Description」という名前を付けます。

2. マイクを追加します。許可を求められた場合は [許可] をクリックします。その後、コントロールの名前を「MyMicrophone」に変更します。

3. マイクの [停止時] プロパティを以下の関数に設定します。

   Collect(Interviews, {Recordings:MyMicrophone!Audio, Notes:Description!Text})

   この関数では、Interviews という名前のコレクションを作成します。その中に Recordings および Notes という名前の列が含まれています。各行には、マイクを使用して作成したサウンド ファイルと、録音を停止した時点でテキスト入力コントロールに含まれていた任意のテキストが格納されます。

4. ユーザー設定ギャラリーを追加し、その [項目] プロパティを「Interviews」に設定します。

5. そのギャラリーの最初の項目にオーディオ コントロールを追加し、そのオーディオ コントロールの [メディア] プロパティを「ThisItem!Recordings」に設定します。

   表示領域を節約するには、再生ボタンのみが表示されるようにオーディオ コントロールを縮小します。

6. ギャラリーの最初の項目にラベルを追加し、そのラベルの [テキスト] プロパティを「ThisItem!Notes」に設定します。

7. F5 キーを押し、[Description] ボックスに語句を入力し、[MyMicrophone] をクリックして録音を開始します。

8. 録音を終了するには、[MyMicrophone] をもう一度クリックして録音を停止します。

   入力した説明がギャラリーの最初の項目に表示され、オーディオ コントロールの [再生] ボタンをクリックすると、いま録音した内容が再生されます。

9. [Description] ボックスに他の内容を入力し、もう一度録音します。必要に応じて、この操作を繰り返します。

   それぞれの説明と録音がギャラリーに表示されます。

10. (省略可能) Esc キーを押して、デザイン ワークスペースに戻ります。

    注意

    アプリを閉じると、録音内容と説明は失われます。保存しておくには、それらのデータを保存して読み込む必要があります。

Office 365 プレビュー (メッセージの送信)

「初めてのアプリを Project Siena で作成する」の手順を実行したときに集めた投票数について、その内容を集計したメッセージの下書きを自動的に作成することができます。

1. [結果] ページで Alt キーを押しながら V キーを押し、表示される一覧から [Office 365 プレビュー] をクリックし、[メールの送信] をクリックします。

   

2. 新しいグループ化されたコントロールが表示されます。そのコントロールを、既存のコントロールの右側に移動します。

   

3. 一番上のテキスト入力コントロール (受信者) を選択します。左下隅に [データ] が表示されている場合は、それをクリックします。その後、[既定] プロパティを、メールの送信先アドレス (引用符で囲む) かエイリアスに設定します。

4. 中間のテキスト入力コントロール (件名) を選択し、その [既定] プロパティを以下の関数に設定します。

   "Vote Results (as of " & Text(Now(), "dd-mmm, hh:mm am/pm") & ")"

5. 一番下のテキスト入力コントロール (メッセージ本文) を選択し、その [既定] プロパティを以下の関数に設定します。

   Label1!Text & ", " & Label2!Text & ", " & Label3!Text & " (Next update: " & Text(DateAdd(Today(), 1), "dd-mmm") & ")"

   

6. F5 キーを押してから、[送信] をクリックします。

   少し時間をおくと、メッセージの送信先ユーザーの受信トレイにメッセージが表示されます。

ペン

複数の描画ファイル (ホワイト ボードをシミュレートしたもの) を作成し、その結果をギャラリーに表示します。

1. ペン コントロールを追加し、「Sketches」という名前を付けます。そのコントロールの [コントロールの表示] プロパティを「true」に設定します。

   [コントロールの表示] プロパティを表示するには、画面の下端近くに表示されている [デザイン] をクリックしてから (それが表示されている場合)、[オプション] をクリックします。

2. ボタンを追加し、その [テキスト] プロパティを "Add" に設定します。また、[選択時] プロパティを以下の関数に設定します。

   Collect(Creativity, {Captures:Sketches!Image})

3. 画像ギャラリーを追加し、3 つのアイテムが表示されるように拡大し、[項目] プロパティを「Creativity」に設定します。

4. F5 キーを押して、ペン コントロールで何かを描画し、この手順で追加したボタンをクリックします。

   ペン コントロールの内容が、ギャラリーの最初の項目に表示されます。

5. ペン コントロールのクリア (x) ボタンをクリックし、別の内容を描画してから、もう一度 [Add] ボタンをクリックします。

   ペン コントロールの内容が、ギャラリーの 2 番目の項目に表示されます。

6. (省略可能) 上記の手順を必要なだけ繰り返した後、Esc キーを押してデザイン ワークスペースに戻ります。

   注意

   アプリを閉じると、描画内容と説明は失われます。保存しておくには、それらのデータを保存して読み込む必要があります。

7. (省略可能) 手書きした文字をテキスト データに変換します。

   1. ラベルを追加し、その [テキスト] プロパティを「Sketches!RecognizedText」に設定します。

   2. F5 キーを押してから、ペン コントロール内に文字を書き込みます。

      手書きした文字が、テキスト データとしてラベルに表示されます。

ラジオ ボタン

ラジオ ボタン コントロールでは、表示されるオプションを指定できます。また、ラジオ ボタンの選択に応じて別のコントロールのプロパティ値 (円の塗りつぶしの色など) を変更することもできます。

1. ラジオ ボタン コントロールを追加し、「Choices」という名前を付けます。また、[項目] プロパティを以下の関数に設定します。

   Table({Color:"red"}, {Color:"green"}, {Color:"blue"})

2. すべてのオプションが表示されるようにコントロールのサイズを変更します。

3. 図形 (円など) を追加し、その [塗りつぶし] プロパティを以下の関数に設定します。

   If(Choices!Selected!Value = "Red", RGBA(192, 0, 0, 1), Choices!Selected!Value = "Green", RGBA(0, 176, 80, 1), Choices!Selected!Value = "Blue", RGBA(0, 32, 96, 1))

   この関数では、ラジオ ボタンの選択に応じて別々の色の値を指定します。

4. F5 キーを押し、ラジオ ボタンをクリックして図形の色を変更してみてください。Esc キーを押して、デザイン ワークスペースに戻ります。

評価

ユーザーが指定した評価に基づいて、コントロール (ラベルのテキストなど) のプロパティを変更するように構成します。

1. 評価コントロールを追加し、「MyRating」という名前を付けます。

2. ラベルを追加し、その [テキスト] プロパティを以下の関数に設定します。

   If(Rating1!Value > 3, "Thanks!", "Sorry!")

   ユーザーが 4 つまたは 5 つの星を指定すると、ラベルに "Thanks!" と表示されます。それ以外の場合は、ラベルに "Sorry!" と表示されます。

3. F5 キーを押し、評価コントロールに異なる値を設定して、機能をテストしてみてください。Esc キーを押して、デザイン ワークスペースに戻ります。

図形

例については、「初めてのアプリを Project Siena で作成する」を参照してください。

SharePoint 更新

SharePoint 更新コントロールを構成すると、Project Siena でデータを収集し、SharePoint リストを介して他のユーザーとその情報を共有できます。

1. 「初めてのアプリを Project Siena で作成する」の手順を実行します。

2. SharePoint で「ResponsesSP」という名前のリストを作成し、そのリスト内に「Value」という名前の列を作成します。そのリストの URL (お使いのブラウザーのアドレス バーに表示されているもの) をコピーします。

   

3. Project Siena で、Alt キーを押しながら D キーを押して、[SharePoint] をクリックします。作成したリストの種類に対して適切なオプション ボタンが選択されていることを確認してください。

4. リストの URL をテキスト ボックスに貼り付けて、[接続] をクリックします。

5. メッセージが表示されたら、要求された資格情報を提供します。

6. 表示される一覧で [ResponsesSP] チェック ボックスをオンにし、[データのインポート] をクリックします。Esc キーを押して、デザイン ワークスペースに戻ります。

   

7. [投票] ページで、[はい] ボタンの [選択時] プロパティを以下の関数に変更します。その他のボタンにも、同様の変更を加えます。

   Collect(ResponsesSP, "はい")

8. [結果] ページで、[Label1] の [テキスト] プロパティを以下の関数に変更します。ページ上のその他のラベルにも、同様の変更を加えます。

   "Yes: " & CountIf(ResponsesSP, "Yes" in Value)

9. [投票] ページで、Alt キーを押しながら V キーを押します。表示される一覧の一番下までスクロールし、[SharePoint 更新] コントロールを追加します。

   

10. (省略可能) いま追加したコントロールを、スクリーン上の既存のボタンの下に移動します。

11. SharePoint 更新コントロールの [データソース] プロパティを「ResponsesSP」に変更します。

12. F5 キーを押し、投票の各ボタンをランダムな回数クリックして、[更新] ボタンをクリックします。

    アプリの [結果] ページでは、各ラベルに、対応するボタンをユーザーがクリックした回数が表示されます。

13. ブラウザーで SharePoint リストを開くか、そのリストの表示を更新します。(Internet Explorer では、F5 キーを押します。)

    このリストの各行には、ユーザーがボタンをクリックするたびに、クリックした時刻とクリックしたボタンが格納されます。

    

スライダー

ユーザーがスライダーを使用して指定した値に基づいて、別のコントロールのプロパティ値 (円の塗りつぶしの色など) を変更します。

1. スライダーを追加し、「MySlider」という名前を付けます。

2. スライダーを選択した状態で、[データ] が左下隅に表示されている場合はそれをクリックしてから、[最大値] プロパティを「255」に設定します。

3. Alt キーを押しながら V キーを押し、[図形] カテゴリをクリックして、円を追加します。

4. 円を選択した状態で、画面の下端近くに [デザイン] が表示されている場合はそれをクリックしてから、[塗りつぶし] プロパティを以下の関数に設定します。

   RGBA(MySlider!Value, 0, 0, 1)

5. F5 キーを押し、スライダーのつまみを右端までドラッグします。

   円が、黒から赤に変化します。

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

ソーシャル

Facebook、Twitter、および Instagram からデータを追加する方法の例については、「ソーシャル メディアから Project Siena アプリにデータを追加する」を参照してください。

タイマー

タイマーが作動している時間の長さに基づいて、ラベルの [テキスト] プロパティなど、別のコントロールのプロパティ値を変更します。

1. ボタンを追加し、「MyButton」という名前を付けます。

2. タイマーを追加し、「MyTimer」という名前を付けます。[リセット] プロパティを以下の関数に設定します。

   MyButton!Pressed

3. ラベルを追加し、その [テキスト] プロパティを以下の関数に設定します。

   If(Timer1!Value=0, "", Timer1!Value<3000, "Ready!", Timer1!Value>3000 && Timer1!Value<6000, "Set!", Timer1!Value>6000, "Go!")

4. F5 キーを押してから、タイマーをクリックします。

   タイマーを開始する前は、ラベルに何も表示されていません。ラベルには、最初の 3 秒間は "Ready!" と表示され、次の 3 秒間は "Set!" と表示され、少なくとも 6 秒が経過した後は "Go!" と表示されます。

5. これら 3 つのメッセージがすべて表示された後は、[MyButton] をクリックすれば、タイマーが最初に戻ります。

6. (省略可能) もう一度タイマーをクリックして、タイマーを再開します。

7. (省略可能) Esc キーを押して、デザイン ワークスペースに戻ります。

切り替え

切り替えは、チェック ボックスと同じ方法で構成します。

ビデオ

このコントロールは、Internet Explorer でサポートされている任意の形式のビデオ ファイルを再生するために使用します。例については、「ソーシャル メディアから Project Siena アプリにデータを追加する」の「YouTube ビデオを表示する」を参照してください

Web

Bing からデータを追加する方法の例については、「Project Siena で Web 検索をしてテキストを翻訳する」を参照してください。YouTube からデータを追加する方法の例については、「ソーシャル メディアから Project Siena アプリにデータを追加する」を参照してください

プロパティ

データ

動作

デザイン