こぐまBLOG: ASP.NET "Atlas" で Gadget を作成する

2006年4月17日 (月)

ASP.NET "Atlas" で Gadget を作成する

０．前提環境
　　・Windows XP SP2
　　・Visual Web Developer 2005 Express Edition (以下 VWD2005)
　　　インストール方法はこちら
　　・ASP.NET "Atlas"
　　　インストール方法はこちら

１．"Atlas"プロジェクトの作成

１．１ VWD2005 を起動し、「ファイル」メニューの「新しいWebサイト」を選択します。

１．２「新しいWebサイト」画面が開きますので、
　　　・テンプレート: "Atlas" Web Site
　　　・場所: HTTP 、 http://localhost/AtlasGadget/
　　　・言語: Visual C# (Visual Basic でもかまいません)
　　　を、選択・入力し「OK」ボタンをクリックして下さい。

１．３ "Atlas" プロジェクトが作成されます。

※ "Atlas"で提供されるコントロールをツールボックスに追加する方法はこちらをご覧下さい。

２．Gadget の作成

２．１「Default.aspx」ページに Gadget コントロールを貼り付けます。
　　　「Default.aspx」ページにはあらかじめ「ScriptManager」コントロールが張り付いています。
　　　この「ScriptManager」コントロールはAtlasのいろいろな制御を行うためのサーバコントロールです。

２．２ Gadget コントロール内に表示したい内容を記入します。
　　　ボタンなどを配置したい場合には Webコントロールでなく、HTMLコントロールを貼り付けて下さい。
　　　今回は「Input(Text)」コントロールと「Input(Button)」コントロールを貼り付けました。

２．３ソリューションエクスプローラで「Webサイト」を右クリックし、「新しい項目の追加」を選択して下さい。

２．４「新しい項目の追加」画面で、「JScriptファイル」を選択し、「追加」ボタンをクリックして下さい。
　　　今回ファイル名はデフォルトの「JScript.js」のままとしました。

２．５ JavaScript イベントの定義
　　　今回はHTMLコントロールのボタンのonclickイベントハンドラを定義します。
　　　「Default.aspx」の <input id="Button1"…/> タグに「onclick="Button1_OnClick();"」を追加します。
　　　この結果「Default.aspx」の <input id="Button1"…/> タグは下記の通りとなります。

<input id="Button1" type="button" value="button" onclick="Button1_OnClick();" />

２．６ JScript.js ファイルへイベントハンドラの追加
　　　今回はボタンが押された時にテキストボックスに"Hello World"と表示してみます。
　　　下記のコードをJScript.jsファイルに追加して下さい。

function Button1_OnClick()
{
  document.getElementById("Text1").value = "HelloWorld";
}

２．７テスト
　　　 Default.aspx ファイルを表示した状態で実行してみましょう。
　　　テキストボックスとボタンが表示されると思います。ボタンをクリックすると、テキストボックスに HelloWorld と表示されます。

２．８ "Atlas" 風の記述方法
　　　 "Atlas" では、JavaScriptでも、いろいろな便利な記法が使えるようになっています。
　　　例えば、２．６のコードは下記のような書き方も出来ます。

function Button1_OnClick()
{
  $("Text1").value = "HelloWorld";
}

３． Windows Live で使ってみる

３．１ Windows Live で自作 Gadget を使うためにはブラウザの設定が必要です。
　　　 *.live.com と *.start.com を信頼済みサイトに追加します。

３．１．１ Internet Explorer のツールメニューからインターネットオプションを選択します。

３．１．２「インターネットオプション」画面が開きますので、「セキュリティ」タブで「信頼済み」アイコンをクリックして下さい。

３．１．３「サイト」ボタンをクリックして下さい。

３．１．４「信頼済みサイト」画面が開きますので、「次のWebサイトをゾーンに追加する」欄に *.live.com を入力し、「追加」ボタンをクリックして下さい。また、*.start.com についても同様に追加して下さい。
　　　　　このとき、「このゾーンのサイトはすべてサーバの確認(https:)を必要とする」にチェックが入っていると追加できませんのでご注意下さい。