2008年01月08日

ExpressionBlendとsilverlight

現時点でリリースされている
ExpressionBlendはWPFアプリケーションを開発する為のツールで
silverlight開発には対応していないらしい。

silverlightを開発する為には
プレリリース版の
ExpressionBlend2(英語版のみ)を利用する必要がありそうだ。

Expression製品については
http://www.microsoft.com/japan/products/expression/default.mspx
posted by zis at 18:29| Comment(38) | TrackBack(4) | Silverlight | このブログの読者になる | 更新情報をチェックする

silverlight.net

silverlightのショーケースや
コミュニティなど
silverlight関連の情報を調べるには
必要不可欠なサイト

http://silverlight.net/
タグ:Silverlight
posted by zis at 16:31| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

SilverlightのHelloworld(サンプル付き)

今回はsilverlightを利用して
テキストを表示する方法を紹介したい。

これまではJavaScriptを利用して
Silverlightコンテンツを表示させる方法しか
解説しなかったが、今回はSilverlightのコンテンツに
様々なオブジェクトの表示を指示する
XAML(ザムル)言語について解説する。

XAMLはXML系言語でタグベースでコーディングをおこない
Silverlight上に配置するオブジェクトの情報をまとめるファイルである。

以下がhelloworld.xamlのサンプルとなる。

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock x:Name="title"
    FontSize="40" FontFamily="Georgia"
    FontStyle="Italic" FontWeight="Bold"
    Canvas.Top="10" Canvas.Left="10"
    Foreground="#FF0000"
  >
    Hello World!!
  </TextBlock>
</Canvas>

CanvasノードはSilverlightのコンテンツ全体を現すノードで
XAMLファイルの一番親ノードとなる。
また入れ子にすることもでき、Flashで言うところの
MovieClipに近似するように思われる。
この場合のCanvasノードはFlashの_rootと同一と考えると分かりやすい

その子階層に設定されている
TextBlockノードがテキストを表示させる為のノードで
このノードに挟まれた部分が実際に表示させるテキストとなる。
Silverlight1.0が通常サポートしているフォントは
欧文フォントのみなので、日本語の表示方法については
今回は紹介しない。この例ではシングルバイト文字のみを表示可能とする。

各属性値については、
おそらく直感的に理解できると思われるので、あえて説明は省略する。

・完成形イメージ
http://www.iretj.com/~ak/study/silverlight/helloworld.html
posted by zis at 00:25| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

(続)初めてのSilverlight

前回Silverlight.jsから
Silverlight.createObjectを利用して
Silverlightのコンテンツを表示させる方法を紹介した。

前回は必要最低限度の情報だけだったが
今回はより多くの情報を紹介したい。

前回は
Silverlight.createObjectの引数は全部で5つと紹介したが
省略可能なものも含めると全部で7つのパラメーターが存在する。

Silverlight.createObject(
XAMLファイルのパス,
HTML内の表示位置,
オブジェクト名,
イニシャライズオブジェクト,
エラー処理等のオブジェクト,
引渡しパラメーター(文字列)(省略可),
コンテキストストリング(省略可)
)

これら合計7パラメーターが非省略時の全てで
場合によって利用することとなる。

Silverlight.createObjectは熟練するとコーディング量は
こちらの方が少ないので、悪くはないが
パタメーターをより認識しやすい形式に変更した
Silverlight.createObjectExという関数があるので
今回はそちらを紹介したい。

Silverlight.createObjectExは
Silverlight.createObjectと異なりパラメーターは1つのみとなる。
ただし1つだけの引数はオブジェクトの形式で引渡し、
そのオブジェクトのプロパティ名を決められた名前にすることで
実行が可能となる。サンプルを見てもらえれば
可読性の高さをお分かりいただけると思う。


01:<html>
02:<head>
03:<script type="text/javascript" src="js/Silverlight.js"></script>
04:<script language="JavaScript">
05:<!--
06:  function init(){
07:    Silverlight.createObjectEx(
08:      {
09:        source:"test.xaml",
10:        parentElement:document.getElementById("helloworld"),
11:        id:"helloworld",
12:        properties:
13:        {
14:          width:'500',
15:          height:'450',
16:          inplaceInstallPrompt:false,
17:          background:'#FF0000FF',
18:          isWindowless:'false',
19:          framerate:'24',
20:          version:'1.0',
21:          ignoreBrowerVer:false,
22:          enableHtmlAccess:true
23:        },
24:        events:{onError:null, onLoad:null},
25:        initParams: "param data string",
26:        context:"context data string "
27:      }
28:      );
29:  }
30://-->
31:</script>
32:</head>
33:<body onLoad="javascript:init();">
34:<center>
35:<div id="helloworld"></div>
36:</center>
37:</body>
38:</html>

前回紹介しなかったパラメーター等を簡単に紹介したい。

inplaceInstallPrompt:
Silverlightプラグインがインストールされていなかった場合に
表示される、ダウンロード先のリンクに詳細説明を表示させるか
どうか。trueなら詳細を表示する。デフォルトはfalse

background:
8桁指定の場合は初めの2桁はアルファチャンネルとなる。
isWindowlessをtrueなどにしてアルファチャンネルを00にすると
背景が完全に透過する。

isWindowless:
ウィンドウレス・コントロールとして表示するかを指定。
SilverlightオブジェクトのSettings.Windowlessプロパティに相当

frameRate:
フレームレート。デフォルト24 最大64

ignoreBrowserVer:
実行するWebブラウザのタイプやバージョンの確認を無視するか指定

enableHtmlAccess:
コンテンツがHTMLのコンテンツへアクセスすることを許可するか指定。
SilverlightオブジェクトのSettings.EnableHtmlAccessプロパティに相当

・完成形イメージ
http://www.iretj.com/~ak/study/silverlight/SilverlightCreateObjectEx.html
posted by zis at 00:03| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

2008年01月07日

初めてのSilverlight

Silverlight本体はブラウザのplugin形式のアプリケーションであるが
Silverlight1.0のコンテンツは
JavaScript+XAML(XML型言語)という単純な構成で開発可能であり
テキストエディタ1つで開発が可能となる。

Silverlightのコンテンツ上に配置するオブジェクト等は
主にXAML上にタグの形式で記述していくのだが
今回は初歩の初歩という意味で
ブラウザ上にSilverlightのオブジェクトを表示させる為の
JavaScriptの紹介だけに留めたい。

まず初めにSilverlightの開発環境であるSilverlightSDKを
ダウンロード、インストールする。

・MS Silverlight SDK
http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en

このページからSilverlightSDKをダウンロードし
インストールが完了すると
デフォルトでは
C:\Program Files\Microsoft Silverlight 1.0 SDK
にSDK一式がインストールされる。
SDKの中にはオンラインヘルプやクイックスタートなどの
学習用素材などが含まれているが
基本的に必要なのは
Tools\Silverlight.js\Silverlight.js
のファイルのみとなる。

このファイルをSilverlightを埋め込むhtmlのファイルで
読み込んで利用することでSilverlightコンテンツの利用が
可能となる。

手始めに利用するSilverlight.js内の関数は
Silverlight.createObject()という関数のみで
5つの引数を渡すことでSilverlightのコンテンツが表示される。

Silverlight.createObject(
XAMLファイルのパス,
HTML内の表示位置,
オブジェクト名,
イニシャライズオブジェクト,
エラー処理等のオブジェクト
)

参考までにXAMLファイルを用意せずに
Silverlightの領域のみを描くHTMLを紹介する。

01:<html>
02:<head>
03:<script type="text/javascript" src="js/Silverlight.js"></script>
04:<script language="JavaScript">
05:<!--
06:  function init(){
07:    Silverlight.createObject(
08:      "test.xaml",
09:      document.getElementById("helloworld"),
10:      "helloworld",
11:      {width: "500",height: "450",background: "#0000FF",version: "1.0"},
12:      {}
13:    )
14:  }
15://-->
16:</script>
17:</head>
18:<body onLoad="javascript:init();">
19:<center>
20:<div id="helloworld"></div>
21:</center>
22:</body>
23:</html>

最後になったが当然ながらRuntime環境となる
Silverlightがインストールされていないと
動作を確認できないので、インストールがまだの方は
以下のURLからインストールください。

http://www.microsoft.com/japan/silverlight/downloads.aspx

・完成形イメージ
http://www.iretj.com/~ak/study/silverlight/SilverlightCreateObject.html
タグ:Silverlight xaml
posted by zis at 17:41| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

2007年12月31日

SilverlightのHelloWorld!!

とりあえず
ExpressionBlendは使わずに
SilverlightSDKとXAMLの手書きレベルで
簡単に初めてのSilverlightアプリを試しで作ってみました。

ただwmvを流すだけのものです。
印象として非常にFlexに近い感覚を覚えました。
Silverlight1.0と1.1で自由度がかなり異なるようですが
とりあえず、1.0から覚えてみようと思います。

何かできたら公開しますね!
posted by zis at 17:16| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

2007年12月30日

神戸にて

久しぶりに神戸に帰郷しました。
神戸の地で懐かしのジュンク堂書店で
BlendBookを見つけたので早速購入しました。

・BlendBook
http://www.amazon.co.jp/gp/product/4798114863?ie=UTF8&tag=2ndfactory-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4798114863

その他
・初めてのSilverlight
http://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AESilverlight%E2%80%95Flash%E3%83%A9%E3%82%A4%E3%82%AF%E3%81%AAWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92MS%E3%81%AE%E6%9C%80%E6%96%B0%E6%8A%80%E8%A1%93%E3%81%A7-I-BOOKS-%E6%B8%85%E6%B0%B4-%E7%BE%8E%E6%A8%B9/dp/4777513270/ref=sr_1_5?ie=UTF8&s=books&qid=1199004655&sr=8-5

も共に購入

年末年始で読めるだけ読むつもりです。
来年はMicrosoftYearです。

それにしても神戸の地はほっとさせてくれます
タグ:Silverlight
posted by zis at 17:52| Comment(3) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

2007年12月25日

Silverlightへの挑戦

長い間WebインタラクションはFlashという考え方で
Flashの追求はおこなって来ましたが
来年からSilverlightとの付き合いが始まりそうです。

・Silverlight
http://www.microsoft.com/japan/silverlight/default01.aspx

初めてFlashに取り組んだ時の初心に戻って
Silverlightに取り組んでいきたいと思います。
Silverlight、WPF、Expressionあたりがキーワードになりそうです。

これまでユーザーエクスペリエンス(UX)というと
AdobeやAppleのイメージが強くありましたが
いよいよMicrosoftが、その領域に手を出してきたという意味で
UI、UXを意識する立場としては、研究の余地がありそうです。
今後研究レポートなどもアップしていきたいと思います。

posted by zis at 23:07| Comment(0) | TrackBack(1) | Silverlight | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。