waりとnaはてな日記

Azure Diagnostics Manager 2 が Public Beta に！

Windows Azure | 01:47 |

訓練されたあじゅらー各位なら良くご存じであろうRed Gate Software（旧Cerebrata）のリリースしている Windows Azure 向けツールの一つ、Azure Diagnostics Manager 2 が Public Beta となった。Windows Azure で出力可能なログは多々存在するが、それらを容易に取り扱うためのツールだ。

以下のサイトにアクセスすることで、 Azure Diagnostics Manager 2を入手することができる。

• http://www.cerebrata.com/Products/AzureDiagnosticsManager2/

Click Onceを利用する場合は、以下のURLにアクセスすることで入手可能だ。

• http://www.cerebrata.com/Downloads/ADM2/AzureDiagnosticsManager2.application

画面のスクリーンショット

• ツールの起動画面

以下が Azure Diagnostics Manager 2の起動画面となる。

• アカウント情報のインポート機能

今までは Subscription や証明書の情報を設定するのが面倒だったが、昨今 Cloud9 IDE 等でも利用されているホスティッドサービス側の認証情報をインポートする機能を利用することが可能になった。これにより、以下のように当該認証情報を読み込むだけでLive IDに紐づけられたSubscription管理が可能になる。

Visual Studio Tools for Office プロジェクトのことはじめ

VSTO, Visual Studio, C# | 19:15 |

Visual Studio Tools for Office（以下、VSTO）を触る機会があったので、備忘録もかねて情報を記載する。VSTOではVBAスクリプトを利用した開発とは異なり、.NET Frameworkを利用したアドオン開発が可能であるため、.NET開発者にとって開発勝手の良い開発手法だといえる。

VSTOプロジェクトの作成

Visual Studio を管理者モードで起動し、[ファイル]-[新規作成]-[プロジェクト]から新規作成ダイアログを起動する。Officeのカテゴリから Excel 2010 アドオンを選択してVSTOプロジェクトを作成する。

プロジェクト内にはThisAddIn.cs が自動生成されており、以下のメソッドが記載されている。

• アドインが読み込まれた際に実行される ThisAddIn_Startupメソッド http://msdn.microsoft.com/ja-jp/site/ee247707
• アドインがアンロードされる際に実行される ThisAddIn_Shutdownメソッド http://msdn.microsoft.com/ja-jp/library/microsoft.office.tools.addinbase.shutdown.aspx

こちらに対し、以下の処理を追記する。

• ThisAddin.cs の抜粋

namespace ExcelAddIn1
{
    public partial class ThisAddIn
    {
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            //追記
            System.Windows.Forms.MessageBox.Show("アドオンのロード");
        }

        private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
        {
            //追記
            System.Windows.Forms.MessageBox.Show("アドオンのアンロード");
        }

次に、Visual Studioからアドオンを実行する。F5を押下するとExcelが起動し、「アドオンのロード」と表示されたダイアログが起動するはずだ。また、、Excelを閉じる際に「アドオンのアンロード」と表示されたダイアログが起動する。

リボンインタフェースの追加

プロジェクトを右クリックし、メニューの[新規項目の追加]から[リボン（ビジュアルなデザイナー）]を選択する。Ribbon1.cs が追加され、デザイナが起動する。ここからボタンを新規に配置し、Clickイベントにメソッドを追加し、メソッド内に以下を記載する。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Office.Tools.Ribbon;

namespace ExcelAddIn1
{
    public partial class Ribbon1
    {
        private void Ribbon1_Load(object sender, RibbonUIEventArgs e)
        {
        }

        private void button1_Click(object sender, RibbonControlEventArgs e)
        {
            var activeSheet = ExcelAddIn1.Globals.ThisAddIn.Application.ActiveSheet
                as Microsoft.Office.Interop.Excel.Worksheet;

            //Excelのセルは添え字が１から開始な点に注意
            activeSheet.Cells[1, 1] = "書き込んでみるでござる";
        }
    }
}

上記の記述後、Visual Studio からアドオンを起動する。Excelのリボンインターフェースに[アドオン]が追加されるので、[アドオン]から追加したボタンを押下して処理を実行する。正常にアプリケーションの処理が実行されれば、以下の画面が表示されるはずだ。

アドイン本体とリボンインターフェースで値を共有する

ThisAddInインスタンスとRibbon1インスタンスで値を共有する際にも ExcelAddIn1.Globals を利用する。以下の様に処理を記述する。

• ExcelAddIn1.cs の抜粋

namespace ExcelAddIn1
{
    public partial class ThisAddIn
    {
        public string Status { get; set; }

        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            Status = "読み込まれたでござる";

            System.Windows.Forms.MessageBox.Show("アドオンのロード");
        }

        private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
        {
            System.Windows.Forms.MessageBox.Show("アドオンのアンロード");
        }

• Ribbon1.cs の抜粋

namespace ExcelAddIn1
{
    public partial class Ribbon1
    {
        private void Ribbon1_Load(object sender, RibbonUIEventArgs e)
        {
        }

        private void button1_Click(object sender, RibbonControlEventArgs e)
        {
            var activeSheet = ExcelAddIn1.Globals.ThisAddIn.Application.ActiveSheet
                as Microsoft.Office.Interop.Excel.Worksheet;
            activeSheet.Cells[1, 1] = "書き込んでみるでござる";
            activeSheet.Cells[2, 1] = ExcelAddIn1.Globals.ThisAddIn.Status;
        }
    }
}

処理の記述後にVisual Studio からアドオンを起動し、リボンインタフェースの追加 と同様の手順でアドオンの処理を実行する。以下の画面が表示されれば処理は完了だ。

Windows Azure SDK for Node.js でテーブルストレージを利用する〜失敗編？〜

Node.js, Windows Azure | 03:27 |

Windows Azure 上での Node.js 開発が非常に容易になったが、今回は Windows Azure SDK for Node.js の簡単な利用方法について更に紹介する。以前記述したエントリである Windows Azure の大幅更新 〜Node.js編〜 id:waritohutsu:20111213:1323798292 を事前に一読して頂けると幸いだ。

前回までの記事では、Node.js 単体の機能しか利用しておらず、 express や socket.io といった Node.js の著名ライブラリのほか、Windows Azure ストレージサービスを利用する Node.js ライブラリ等も利用していなかった。今回は、これらの機能を利用するための簡単なTIPSを紹介する。

Node Package Manager について

Node.js をご存じの方には今更説明するまでもないことだと思うが、Node.js には npm(Node Package Manager)と呼ばれるパッケージ管理機構が存在する。.NETに詳しい方には、「Node.js版のNuGet」と言えば理解が容易だろう。以下にコマンドの実行例を紹介するが、インストールするライブラリの依存関係も含めて解決してくれる便利な機能だ。

以前は Windows版の Node.js では利用できなかったが、最近の Node.js では npm が利用できるようになった。

npm を利用してWindows Azure アプリケーションをセットアップ

前回の記事で紹介した手順を参考にサービスを作成する。まず、Azureのサービスを作成し、Workerロールを追加する。Windows Azure SDK for .NET のPowerShellコマンドは Windows Azure PowerShell for Node.js Cmdlet Reference を参照して欲しい。

PS C:\temp> New-AzureService AzureNodeBlog

Service has been created at C:\temp\AzureNodeBlog

PS C:\temp\AzureNodeBlog> Add-AzureNodeWorkerRole

Role has been created at C:\temp\AzureNodeBlog\WorkerRole1. For easy access to
Windows Azure Services from your application code, install Windows Azure client
 library for Node.js by running ‘npm install azure’.

次に、Workerロールのディレクトリに移動して必要なライブラリをインストールする。本来は azure と express だけで十分だが、stylus ejs node-uuidをインストールした理由は後で述べる。

PS C:\temp\AzureNodeBlog> cd .\WorkerRole1
PS C:\temp\AzureNodeBlog\WorkerRole1> npm install azure
azure@0.5.1 ./node_modules/azure
├── xmlbuilder@0.3.1
├── qs@0.4.1
├── mime@1.2.4
├── xml2js@0.1.13
├── log@1.2.0
└── sax@0.3.5
PS C:\temp\AzureNodeBlog\WorkerRole1> npm install express stylus ejs node-uuid
express@2.5.6 ./node_modules/express
├── mime@1.2.4
├── mkdirp@0.0.7
├── qs@0.4.1
└── connect@1.8.5
ejs@0.6.1 ./node_modules/ejs
node-uuid@1.3.3 ./node_modules/node-uuid
stylus@0.22.6 ./node_modules/stylus
├── growl@1.1.0
├── mkdirp@0.0.7
└── cssom@0.2.1

最後に、Windows Azure エミュレータでアプリケーションを起動する。ただし、この時点では npm でインストールしたライブラリは利用していない。

PS C:\temp\AzureNodeBlog\WorkerRole1> Start-AzureEmulator -launch


Creating local package...
Starting Emulator...
Role is running at tcp://127.0.0.1:81
Role is running at tcp://127.0.0.1:8
Started

テーブルストレージを利用したブログサンプルを利用する

npm install azure でインストールしたパッケージ内にサンプルが存在するためそちらを利用しよう。サンプルは「C:\temp\AzureNodeBlog\WorkerRole1\node_modules\azure\examples\blog」に配置されており、こちらのサンプルがstylus ejs node-uuidを利用するために先ほどの手順では同パッケージもインストールしていただいた。こちらのサンプルを「C:\temp\AzureNodeBlog\WorkerRole1」に上書きする。次に、同フォルダに存在する blog.js を開き、以下の様に編集する。

//var azure = require('./../../lib/azure');
var azure = require('azure');
var ServiceClient = azure.ServiceClient;
var TableQuery = azure.TableQuery;
var uuid = require('node-uuid');

var tableName = 'posts';
var partition = 'part1';

Blog = function () {
  this.tableClient = azure.createTableService(ServiceClient.DEVSTORE_STORAGE_ACCOUNT, ServiceClient.DEVSTORE_STORAGE_ACCESS_KEY, ServiceClient.DEVSTORE_TABLE_HOST);
};

(以下略)

上記の完了後、再度以下の手順でエミュレータを起動する。

PS C:\temp\AzureNodeBlog\WorkerRole1> Start-AzureEmulator -launch


Creating local package...
Starting Emulator...
Role is running at tcp://127.0.0.1:81
Role is running at tcp://127.0.0.1:8
Started

無事アプリケーションの実行が完了した場合、次の画面が表示されるはずだ。

しかし、ポストを投稿したところうまく反映されなかった。Compute Storageを確認したところ、テーブルそのものは作成されていたので、引き続き問題を解析したいと思う。

テーブルストレージの利用方法

今回はテーブルストレージを利用したブログサンプルであり、以下の様に .NET版ライブラリと大差ないインターフェースでストレージサービスを利用できる（はずだったが。。。）。以下は参考LVで書いたコードであるため、実際に動作検証をしてるわけではないので注意してほしい。

var ServiceClient = azure.ServiceClient;
var TableQuery = azure.TableQuery;
var uuid = require('node-uuid');

var tableName = 'posts';
var partition = 'part1';

Blog = function () {
  //開発ストレージの利用設定
  this.tableClient = azure.createTableService(ServiceClient.DEVSTORE_STORAGE_ACCOUNT, ServiceClient.DEVSTORE_STORAGE_ACCESS_KEY, ServiceClient.DEVSTORE_TABLE_HOST);
};

//全県検索
var tableQuery = TableQuery.select().from(tableName);
tableClient.queryEntities(tableQuery, callback);

//ID検索
tableClient.queryEntity(tableName, partition, id);

//エンティティを削除
var entity = { PartitionKey: partition, RowKey: id };
tableClient.deleteEntity(tableName, entity);

//エンティティの挿入
tableClient.insertEntity(tableName, { PartitionKey: partition, RowKey: uuid(), title: 'Post one', body: 'Body one', created_at: now });

WinJS でタッチデバイス向けUIのWinJS.UI.TimePickerを利用する

JavaScript, WinJS | 01:58 |

Windows 8 Developer Preview の機能についてのTIPSを今回も紹介する。HTML+JSでネイティブアプリが作成できるWinJSだが、こちらで利用できるUIコンポーネントには以下の分類がある。

• HTML+CSS で表現できる既存のUIコンポーネント（ボタン等）は、そのままHTML+JSを利用する
• タッチデバイス向けのUIコンポーネントは、HTML5の拡張属性 data-XXXX を利用する

今回は、タッチデバイス向けのUIコンポーネントのうち、WinJS.UI.TimePicker を利用して紹介する。

サンプル

早速サンプルを紹介する。Windows 8 Developer Preview でWinJS向けの新規プロジェクトを作成し、以下のソースコードを記述する。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinWebApp3</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp3 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            WinJS.UI.processAll();
        }
</script>
</head>
<body>
    <div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement: 15}">
    </div>
</body>
</html>

サンプルコードで注意して頂きたい点は、data-win-control でUIコンポーネントを指定している点と、data-win-options でUIコンポーネントのオプションを指定している点だ。

この様な<div>タグを配置したのち、windows.onload 等で WinJS.UI.processAll() を利用してUIコンポーネントを活性化する。当該処理後にタッチデバイス向けのUIコンポーネントが利用可能だ。

実行結果

以下の様なUIが表示される。

data-win-options で指定した通り、15分毎の刻みで時間を指定できる。

Metro UI向けアプリを作るWinJSを利用した音声ファイル再生

JavaScript, WinJS | 03:01 |

Windows 8 Developer Preview が出て大分時間が経過したが、HTML5 + JavaScript でネイティブアプリの開発が可能な WinJS のTIPSをしようと考えている。今回は、WinJS を利用した音声ファイルの再生を紹介する。なお、今回の音声ファイルには MSDN > ホーム > クラウド ガール > キャラクター利用ガイドライン、解説集 の クラウディア・窓辺 ボイス サンプル を利用させて頂いた。

音声ファイルの再生方法

WinJS は HTML5+JS で作成されるとはいえ、ネイティブアプリである。音声ファイルは専用の名前空間（私の妄想では WinRT.Media.Sound とか）が存在するのかと思ったが、HTML5 の仕様で策定されている <audio>タグを利用するのが一般的なようだ。つまり、音声ファイルを適切な場所に配置すれば以下のコードを書くだけで音声ファイルの無限ループが可能だ。

<audio id="my_sound" src="＜プロジェクトルートからの相対パス等、どっかのURI＞" autoplay loop />

サンプル

まず、Visual Studio 11を起動してWinJSプロジェクトを作成する。次に、 プロジェクトルートに sound フォルダを作成し、クラウディア・窓辺 ボイス サンプル から 01sahajimeru.wav ファイルを抜き出して同フォルダ内に配置した。下準備は完了したので、以下の様に記述することでWinRTを利用した音声ファイルの再生が可能になる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024, height=768" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixed-layout">
            <div>
                <audio id="my_sound" src="sound/01sahajimeru.wav">
                </audio>
            </div>
            <input type="button" value="開始" onclick="document.getElementById('my_sound').play();">
        </div>
    </div>
</body>
</html>

<head>タグ内でWinRT用の共通ライブラリが色々読み込まれているが、原則的に HTML5 のWebアプリケーションとなんら変わりない方法で音声ファイルが再生されることが分かると思う。是非、各位も存分にクラウディア様に叱責されればよいだろう。