フローサービス管理コンソールAPIとMicrosoft "Project Siena"

日本マイクロソフト主催のイベント「de:code」が先月末に開催されました。ASTERIA WARPをご利用の開発者の方で参加された方も多いかと思います。私はMicrosoftの最新情報に興味があったため、主にDevicesトラックセッションに参加しました。そこでMicrosoft "Project Siena"について初めて知り「これは使える!」と思いましたので、WARPの「フローサービス管理コンソールAPI」と連携させてご紹介します。

Microsoft "Project Siena"とは

  1. 高度なプログラミングスキルなしで Windows 8 タブレットアプリを開発できるタブレットアプリ
  2. みんな大好きExcelやRESTなどでデータバインドができる
  3. きれいなUIが簡単にすぐできる

以上、セッションに参加してのMicrosoft "Project Siena"の概要というか感想です。RESTでデータ取得できると聞けば、WARPの各種APIを使いたくなりますよね。っということで、WARP4.8で追加された「管理コンソールAPI」を使用してWindows8タブレットアプリでログを表示してみることにします。

開発手順

  1. Microsoft "Project Siena"のインストール
  2. WARPの環境設定
  3. Microsoft "Project Siena"で開発

開発環境

以下のように2台の環境で開発を行いました。

  • ASTERIA WARPが起動する環境:IPアドレス「192.168.1.1」
  • Microsoft "Project Siena" で開発する環境:IPアドレス「192.168.1.2」

Microsoft "Project Siena"のインストール

storeicon.pngストアのアプリの検索に「microsoft project siena」と入力すると見つかりますので、インストールします。

storesiena.pngのサムネイル画像

インストールした環境のIPアドレスは192.168.1.2です。


WARPの環境設定

WARPは何も設定する必要が無く、起動するだけです。
起動している環境のIPアドレスは192.168.1.1、各種ポート番号はデフォルトとします。
今回使用する「フローサービス管理コンソールAPI」のポート番号は28080です。
「フローサービス管理コンソールAPI」のテストを行うための画面もありますので、APIのみの動作を確認する場合に使用してみてください。

URL:http://192.168.1.1:28080/mcapi/apitest.html


Microsoft "Project Siena"で開発

環境が整いましたので、作ります。
作成するアプリは以下のように左右に分割した構成で、左にINFOログ以上、右に指定したレベル以上のログを表示します。これは、APIのパラメーターを変えて使用しています。
logapp.pngのサムネイル画像
UIの作り方は、使ってみればわかりますので詳しく解説しませんが、Microsoft "Project Siena"よくできてます。
以下のような手順で作っていきます。

まず稲妻タイルsienaicon.pngからMicrosoft "Project Siena"を起動します。
siena1.pngのサムネイル画像


右上の siena01.pngマークからUIアイテムを選択・追加します。
追加できるUI用のLabelやButtonなどが表示されます。今回ログ表示に使用するのは、Galleriesですのでアイコンをクリックします。

siena2.png


Gallerisにも色々な種類がありますが、Text Gallery(縦に表示するタイプ)をクリックします。アイコンが並んでいると、ついついドラッグアンドドロップで配置したくなりますが、アイコンをクリックすると左上の既定の位置に配置されます。
siena3.png


Text Galleryを配置すると、Galleryのデータに「TextualGallerySample」が指定してあり、データの配置がわかりやすくなっています。
siena4.pngのサムネイル画像


GalleryのItem内の各データ(Heading1やSubtitle1など)はそれぞれ配置やデザインの変更も可能です。
デザインの変更は画面下に並んでいる、Font、Size、Style、Colorなどを使用します。
siena5.png



Galleryの各Itemのデータ設定は、Galleryを選択状態にしたときに左下に表示される「Items」から行います。
siena6.png


まずは簡単にMicrosoft "Project Siena"を使ってみるところまでを紹介しました。
次回は「Data Sources」への追加手順や追加したData SourceのText Galleryへの設定など、開発時に壁にあたりそうな所について説明します。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

他のキーワードで検索する