http://www.lepracaun.info/blog/

WebクリエイターLepracaunのサイトです。 Ajax、Flash、Silverlightなど、RIAを実現するためのツールやスクリプトについての話題を取り上げていきます。

2008年6月28日

Yahoo!動画に続き、GyaoもSilverlight正式採用へ。

 

gyao_sil.jpg

Gyaoが7/1(火)にリニューアル予定で、今後にSilverlightを視聴環境に推奨予定となりました。 

「GyaOリニューアルのお知らせ」

SilverlightがインストールされていないPCでGyaoにアクセスすると、Silverlight利用推奨の案内が表示されます。
 

以前、「Yahoo! 動画 Silverlight採用へ・・・」という記事で、Yahoo!動画のSilverlight採用について書かせていただきましたが、いよいよDRM(デジタル著作権管理)の必要な動画サイトはSilverlightで統一の可能性が濃厚になってきました。

著作権管理が必要な動画サイトで、WindowsのInternetExplorerでしか閲覧できない理由は、メディアプレイヤーのプラグインがDRMに対応していないからという点につきます。
逆にこれさえクリアすれば、OSもブラウザも関係が無くなるはずです。
つまり、Mac OSXだろうが、Linuxだろうが、あるいは他のデバイスであろうが、閲覧できるようになるわけです。

RIA市場で、競争原理が働くのは大歓迎です。クリエイターとしては追いかける技術が増えて大変ですが・・・

 

投稿者 lepracaun : 11:20 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2008年6月15日

各RIAプラットフォーム・・・真の狙いはOSを影の存在にすることか!?

このブログでは、立ち上げ当初からAdobe AIRやSilverlightなどの、RIA技術を追いかけてきました。
いまでは随分と余計な要素(いわゆるノイズ)が混じるようになってしまいましたが・・・

Adobeの「AIR」Microsoftの「Silverlight」Googleの「Gears」Sunの「Java FX」Curlの「Nitro」等々・・・
いずれも、ブラウザとデスクトップの両方にRIAを実現する技術で、アプローチ方法やベースとなる技術が違うだけで、その狙いはほぼ同じものだと思います。

それは、OSを影の存在にすることです。

ブラウザの枠を超えて、リッチなWebアプリケーションを実現するとか、ブラウザからPCのローカルデータにアクセスすることが「真の」目的ではないと思います。
どちらかというとそれはMicrosoftやAppleといった、OSを提供している企業を刺激しないための目くらましだと思います。

さて、ここ最近の私が個人的に気になった記事が3つあります。

 

第一段階として、インストールして使うアプリケーションから、ブラウザを使うWebベースに移行があります。
Google  ドキュメントや、Zohoなどで提供しているワープロソフトや表計算ソフトなどがその代表。
両者とも一部でGoogle Gearsを使って、PCのローカルデータにアクセスできます。
Webアプリケーションがどんどん進化して、インストールタイプのアプリケーションソフトと同等になったとしても、オンライン上でしか使えなかったら用途は限られますが、その問題はすでに実用レベルで解決目前にまでi至っています。

こうなると、なんでもWebベースで・・・となるのが自然の流れ。
企業でも個人のPCに保存して欲しくないデータは、サーバーで管理。そうでなければローカルに保存することを許可する。こういったデータの管理の仕組みも実現可能です。ローカルにインストールするタイプのアプリケーションより企業側のコントロールがしやすい点、導入コストが安くなるケースもあるでしょう。

なんでもWebベースで・・・となると、OSは何でもいいや・・・ってことになります。
まず、インストールして使うタイプのアプリケーションから、その存在価値が低下を始め、やがてはOS自体の存在価値が低下を始める・・・

 Adobeの「AIR」Microsoftの「Silverlight」Googleの「Gears」Sunの「Java FX」Curlの「Nitro」等々・・・はいずれもその可能性を秘めています。
私は前から実用的なAIRアプリなどの出現を歓迎してきました。なぜなら企業が採用に至るような実用的なRIAがこれらRIA技術の革新の要だと思うからです。逆に言いますと、ガジェットのようなお遊び的なものしか出てないうちはまだまだといえるでしょう。

ここまで見えてくると、将来有望な企業・技術が見えてきます。
まず、上記の技術を開発・提供している企業(どれが将来の覇者になるかはわかりませんが・・・)
そして、これらの技術を使って開発できるクリエイターやデベロッパー・・・
さらに、これらをSaaSやASPとして提供する企業・・・ということになります。

個人ベースで考えれば、これらの技術を使って、デザイン・開発できるように日々情報を追いかけておくことが必要そうです。
それにしてもどれかがスタンダードな技術になるとしたら、いったいどれでしょうね?
WebクリエイターとしてはAdobe AIRあたりになってくれるとありがたいですが、実はGoogle Gearsが最も有望ではないかと感じています。
 

投稿者 lepracaun : 14:03 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2008年4月 9日

Yahoo! 動画 Silverlight採用へ・・・

とうとうYahoo! 動画 Silverlight採用へ・・・
各ニュースサイトで、同様の記事がありました。

マイクロソフト自身も同様の発表をしています。
「Microsoft Silverlight テクノロジをヤフー株式会社が採用することを表明」

GyaoもすでにSilverlightを採用しており、試験的に映画予告編をSilverlightで配信しています。

GAGA映画予告編|Macでも視聴可能|無料動画 GyaO [ギャオ]

YouTubeニコニコ動画といったユーザー参加型の動画配信サービスと違って、GyaoやYahoo!動画などのDRM(デジタル著作権管理技術)に対応した動画を配信しています。

アドビ、FlashコンテンツをDRMで保護するサーバーソフトを発表

この記事にもあるように、将来的にはFlash VideoでもDRMに対応するが、現時点ではSilverlightに分があると、GyaoもYahoo!動画も判断したのでしょう。
Flash一極集中から、Silverlightと鎬を削るような状況になってきましたね。
個人的にも面白いことになってきたと思います。

投稿者 lepracaun : 23:53 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年10月 4日

Silverlightを使った検索サイト「tafiti」

tafiti.jpg

MicorsoftがSilverlightを使った検索サイトを公開しました。
その名も「tafiti」
http://www.tafiti.com/

実際試しにアクセスしてみました。
残念ながら私の環境ではFirefoxでは見れませんでした。
仕方が無いのでInternet Explorerでアクセスしなおすと、無事表示されました。

WEB検索、イメージ検索、RSS検索、ニュース検索とエフェクトかけながら検索対象を切り替えることができます。
検索結果をドラッグして、右側のボックスに登録してラベル名をつけることもできます。
ちなみに検索エンジンは、同社のWindows Live Searchのエンジンを使っているようです。

特に気に入ったのは、検索結果の上にあるTreeViewという木のアイコンをクリックすると、樹木の枝葉に検索結果が表示されるところ。実用性はまったくありませんけどね。

ただ残念なのは、動きがモッサリしていること。
これは「tafiti」に限らず、Silverlightというか、WPFを使ったもの全般に共通して言えることです。
このブログでもExpression Blendを使用していくつか実験的に作ってみた例を記載していますが、正直言ってどれも動きはモッサリしています。

私の作り方が悪いわけではなく、Expression Blendをインストールするとついてくるサンプルアプリも動きがモッサリしています。
ゆくゆくはプラグインのアップグレードでパフォーマンスが改善されていくとは思いますが・・・

しかしながら面白い試みであることは確かで、今後に期待ですね。

投稿者 lepracaun : 01:08 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年6月10日

Expression Blend:データバインド(RSSのフィード取得)

Microsoft Expression Blendで今度はRSSの取得をしてみます。

新規プロジェクトを作成。
[Combo Box]と[Text Block]を配置します。

[Objects and Timeline]パネルでLayoutRootを選択します。
画面右側の[Projects]パネルで[Data]の[+XML]をクリック。
[Add new XML data source]ダイアログが開きますので、取得したいRSSフィードのURLを入力します。
ちなみにRSSフィードの取得に失敗するとエラー画面が表示されます。

070620-4.gif

続いて、[Properties]パネルで[Common Properties]の[Data Context]のNEWボタンの横にある[Advanced property options]をクリックして、[Create Data Binding]ダイアログを開きます。

070620-5.gif

Data Fieldタブを選択。
右側のData SourceでrssDSを選択。
左側のFieldsでItem(Array)を選択します。

次はアートボード上に配置した[Combo Box]を選択。
[Properties]パネルの[Common Properties]のItem Sourceの欄の右側にあるボタンをクリックしてData Bindingを選択。

[Create Data Binding]ダイアログが開いたら、一番右側のタブ[Explicit Data Context]を選択します。
下の[Use a custom XPath expression]にチェックを入れて、右の欄を空欄にします。

次にアートボード上の[Text Block]を選択。
[Properties]パネルの[Common Properties]のTextの欄の右側にあるボタンをクリックしてData Bindingを選択。
[Create Data Binding]ダイアログが開いたら、一番右側のタブ[Explicit Data Context]を選択します。
今回の例では、discription:(String)を選択。
これはRSSフィードのdiscriptionを表示させるためです。

070620-6.gif

次はアートボード上に配置した[Combo Box]を選択して右クリック。
[Edit Other Templates]→[Edit Generated Items]→[Create Empty]を選択。

070620-7.gif

ダイアログが表示されますが、そのまま[OK]をクリック。
すると、Data Templateの画面が開きます。
[Objects and Timeline]パネルで[Data Template]の子要素に[Text Block]を追加します。
[Properties]パネルの[Common Properties]のTextの欄からData Bindingします。

070620-8.gif

[Create Data Binding]ダイアログが開いたら、一番右側のタブ[Explicit Data Context]を選択します。
下の[Use a custom XPath expression]にチェックを入れて、右の欄に「title」と入力します。
これはRSSフィードのtitleをコンボボックスに表示させるためです。

[Objects and Timeline]パネルで[Data Template1]の左側に上向きの矢印ボタンがありますので、それをクリックすると、Data Templateの画面から元の画面に戻れます。

次はアートボード上に配置した[Combo Box]を選択して右クリック。
[Edit Other Templates]→[Edit Generated Items]→[Edit Template]を選択。
[Objects and Timeline]パネルで[Text Block]を選択。
[Properties]パネルの[Common Properties]のTextの欄の右側にあるボタンをクリックしてData Bindingを選択。
[Create Data Binding]ダイアログが開いたら、一番右側のタブ[Explicit Data Context]を選択します。
Fieldでtitle:(String)を選択します。

070620-9.gif

プロジェクトをビルドしてテストしてみます。
コンボボックスでRSSフィードのタイトルを選択。
テキストブロックに選択したRSSフィードのタイトル(title)に対応した説明文(discription)が表示されたら成功です。


投稿者 lepracaun : 22:45 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

Expression Blend:データのバインド

Microsoft Expression Blendをちょこちょこと触っています。
今度はデータのバインドのやり方です。
ちなみに画面はすべてMicrosoft Expression Blend RC(英語版)です。
話もRC(英語版)で進めていきますが、ベータ(日本語版)でもそんなに違いは無いと思います(たぶん)

■STEP1

新規プロジェクトを作成。
[ToolBox]にある[Asset Library]からアートボードにつぎの4つを配置していきます。

まず[ScrollViewer]を配置。
これはスクロールバーが出る領域と考えてください。
次に、その中に[TextBlock]を追加。
中に適当に長いテキストを流し込みましょう。できれば[ScrollViewer]の領域をはみ出るくらいに。

※注意点その1
[TextBlock]オブジェクトが[ScrollViewer]内にあることを確認しましょう。
画面左下の[Objects and Timeline]パネルに、オブジェクトの階層が表示されています。
子要素を持つオブジェクト名の左側には白い逆三角マークがついています。
[ScrollViewer]の左側に白い逆三角マークがついており、そこをクリックすると[TextBlock]が表示されることを確認しておきます。

オブジェクトの階層に注意"

※注意点その2
[TextBlock]のサイズはAutoにします。
[TextBlock]を選択した状態で、画面右にある[Properties]パネルの[Layout]にWidthとHeightがあります。
ここに数字が入っている場合は、その欄の横に[Set to Auto](四角に矢印が入っているマーク)があるので、クリックしてサイズをAutoにしておきます。
すると、横幅は親要素である[ScrollViewer]の範囲一杯に広がり、縦幅は流し込んだテキストが終わるまでに広がると思います。

次に[Slider]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントサイズを変更できるようにしたいと思います。
画面右にある[Properties]パネルの[Common Properties]があります。
[Maximum]の項目に100と入力。
[Minimum]の項目に5と入力。
[Value]の項目に12と入力。

アートボードに配置

続いて[Combo Box]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントを変更できるようにしたいと思います。
[Combo Box]の子要素として[ComboBoxItem]を配置します。
[Objects and Timeline]パネルで[Combo Box]と[ComboBoxItem]がツリー上に階層表示されていることを確認して置いてください。
[ComboBoxItem]が[Asset Library]に表示が無かったら、[Asset Library]ウインドウの右上にある[Show All]にチェックを入れれば出てくると思います。
[ComboBoxItem]を選択して、画面右にある[Properties]パネルの[Common Properties]を表示させます。
[Content]欄があるので、そこにフォント名を入力します。例えば、「Arial」とか、「Tahoma」とか、「Courier New」などなど。

■STEP2

配置が終わったらデータのバインドをしていきます。
先程の作業で、長いテキストに対してスクロールバーで表示される部分をコントロールできるようになっています。
簡単ですねえ。

では、配置した[Slider]でフォントのサイズを変更、[Combo Box]でフォント名を変更できるようにしてみましょう。

それではまず、[TextBlock]を選択。
画面右側の[Properties]パネルにある[Text]に、4つほどタブがあります。
一番左のタブが[Font]タブで、選択すると[TextBlock]に使われているフォント名とフォントサイズが表示されます。

フォント名の欄の右側の小さな四角いボタン[Advanced property options]をクリック。
するとFontFamilyという一覧が出ますので、[Data Binding...]を選択。

[Create Data Binding]というウインドウが表示されます。
3つタブがありますが、真ん中の[Element Property]を選択。
左側の[Scene elements]の欄から配置した[Combo Box]を選択。
右側の[Properties]から、Text:(String)を選択。

こうすることによって、[Combo Box]で選択した[ComboBoxItem]のContent欄に記載したフォント名が、[TextBlock]に流し込んだテキストのフォント名になります。
つまり、[Combo Box]でフォントを選択できるようになったわけです。

combo box


■STEP3

では再び、[TextBlock]を選択。
画面右側の[Properties]パネルにある[Text]の一番左のタブが[Font]タブを選択。
フォントサイズの欄の右側の小さな四角いボタン[Advanced property options]をクリック。
するとFontSizeという一覧が出ますので、[Data Binding...]を選択。

[Create Data Binding]の真ん中のタブ[Element Property]を選択。
左側の[Scene elements]の欄から配置した[Slider]を選択。
右側の[Properties]から、Value:(Double)を選択。

こうすることによって、先程[Slider]で最高100、最低5、最初が12の値の範囲内でフォントサイズを変更できるようになりました。

余談ですが、Value:(Double)とかText:(String)のカッコの中はなんなの?って思った人もいると思います。
プログラマな方は当然わかるでしょうけど、デザイナな方はわからないかもしれません。
これは、変数の型です。Doubleってのは浮動小数点の実数型の一つです。Stringっていうのは文字列型です。
Value:(Double)に入るのは、小数点を含めた数字のみで、文字は入れられないってことがわかりますよね。

slider


■STEP4

プロジェクトをビルドして、テストしてみましょう。
テキストはスクロールバーで上下できますし、スライダーを動かすとフォントサイズが変わります。
コンボボックスからフォントを選んで変更できますね。
以上で、終了です。

投稿者 lepracaun : 08:46 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年6月 5日

Expression Blend:制御プログラム言語について

Microsoft Expression Blendは制御するためのプログラム言語に複数の選択肢があるのが特徴です。

Expression Blend RC(英語版)でもVisual BasicとC#が選択できます。

■Visual Basicの場合
Image1_070604.jpg

■C#の場合
Image2_070604.jpg

今後、RubyやPython、Javascriptなどの他の言語が追加されるかどうかはわかりません。

VBAの経験があるので、とりあえずVisual Basicを選択しましたが、どうせだったらこの機会にC#を学んでみるのも良いかも?と思いました。
WPFプログラミングも、どうやらデフォルトはC#のようですから。

投稿者 lepracaun : 03:16 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年6月 3日

Expression Blend:ムービーの追加とコントロール

Microsoft Expression Blendで今度はWMVビデオを追加とコントロールをしてみます。

ちなみに前回でインストールしたExpression Blend RC(英語版)で話を進めていきます。

Menu > Project > Add Existing Item...で、配置したいムービーファイルを追加します。
今回はWMVファイルにしました。

ツールパネルのAsset LibraryのMediaタブに選択したムービーファイルが表示されます。
アートボードにムービーを配置します。

ついでボタンを2つ配置。
イベント・トリガで、ムービーをポーズさせるボタンと、ムービーを再開させるボタンを作成します。

Image2_070602.jpg

アートボードに配置したボタンには必ず[プロパティ]パネルで名前をつけておきます。
選択ツールでボタンオブジェクトを選択。
左上の[トリガ]パネルでイベント・トリガを追加します。

ポーズボタンを作成するのだったら、Pause。
プレイボタンを作成するのだったらResumeを割り当てます。

これでプロジェクトをビルド、ショートカットのF5でプロジェクトのテストをすれば確認できます。
この要領で、ムービーをストップさせたり、最初から再生させたりするボタンをどんどん作成できます。

投稿者 lepracaun : 23:09 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

Expression Blend:RC(英語版)をダウンロード

Microsoft Expression Blend:RC(英語版)をダウンロードしました。
RC=Release Candidate つまり、リリース候補っていうことで、いよいよ製品版に近づいてきたわけです。
英語版ではありますが、ベータ(日本語版)を使ってみたところ、特にメニューとかが英語に変わっても問題無さそうだったので、RC(英語版)を使ってみることにしました。

インストールするにはベータ(日本語版)をアンインストールする必要があります。

添付されているサンプルがクオリティの高いものになっています。

■Animation Studio
blend_spl5.jpg
→お絵かきソフトです。

■Color Swatch
blend_spl2.jpg
→部屋の模様替えができます。

■Grand Piano
blend_spl4.jpg
→見ての通りピアノです。

■Photo Book
blend_spl3.jpg
→ページフリップです。

■Video Shelf
blend_spl6.jpg
→5本のビデオクリップが見れます。

■Viewer3D
blend_spl1.jpg
→3Dモデリングされたオブジェクトをいろんな角度から見れます。

私のPCスペックが低いのが理由かもしれませんが、全体的に動作がモッサリしているというか、カクカクしたりします。

投稿者 lepracaun : 12:19 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年6月 1日

Expression Blend:タイムラインとプロパティ

Expression Blendの続きです。

今度はコードを記述せず、イベントとアニメーションの基礎をやりたいと思います。
前回と同じように、ボタンとラベルを配置します。
前回はボタンオブジェクトを選択して、右側にある[プロパティ]パネルにある雷マークのついた「イベント」をクリックして、イベント・ハンドラを定義しました。

Expession Blendでは、トリガという機能を使うと、コードを記述しなくてもUI部分の動作をさせることができます。
例えば、ラベルの文字を変えたり、ボタンを色を変えたりすることが、コードを記述しなくてもできるのです。

トリガは2種類あります。
イベント・トリガとプロパティ・トリガです。

イベント・トリガは、ボタンをクリックしたりとかイベントが発生したときに実行されるもの。
プロパティ・トリガは、プロパティの値が変更されたときに実行されるものです。

次の例は、ボタンをクリックしたときに実行されるイベント・トリガです。

まず、アートボードに配置した、ボタンオブジェクトを選択します。
イベント・トリガを作成するには、[組み合わせ]パネルの[トリガ]にある[+ イベント トリガの追加]ボタンをクリックします。

トリガのオブジェクト(ボタンとかウインドウとかラベルとか)と、対応するイベントがドロップダウンリストで選択できます。

選択したボタンオブジェクトと、イベントにClickを選択することで、ボタンをクリックした際に実行されるトリガになります。

ドロップダウンリストの右下にある、プラス記号のマーク([新しい値の追加]ボタン)をクリックして、このトリガに対するアクションを追加します。

Image2_070531.jpg

「使用できる、またはコントロールできるタイムラインが存在しません。タイムラインを1個作成します。」というダイアログが表示されますので、[OK]をクリック。

メニュー・バーの[ウィンドウ]-[アニメーションワークスペース]を選択して、タイムラインを見やすくします。

Image3_070531.jpg

[タイムライン]パネルの下にある[タイムラインズーム]で、目盛りの幅を調節できます。
黄色い線([再生ヘッド])をドラッグして、希望するタイムライン上に移動。

右の[プロパティ]パネルで、配置したボタンやラベルのプロパティをいじります。

アニメーションをすべて設定し終えたら、[アートボード]の左上にあるタイムラインの記録をオフにするボタンを押し、メニュー・バーの[ウィンドウ]-[デザインワークスペース]を選択して通常のウィンドウ・レイアウトに戻します。

[オブジェクトとタイムライン]の一番上にあるドロップダウンリストを、「OnClick1」から「既定」に戻すことで、タイムラインを設定するモードから通常のデザインを行うモードに切り替わります。

メニュー・バーの[プロジェクト]-[プロジェクトのテスト]を選択すると、タイムラインに沿って設定したプロパティどおりにアニメーションします。

投稿者 lepracaun : 00:03 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年5月29日

Silverlight Streamingの準備

太っ腹のMicrosoftは、Silverlight Streaming というサービスを開始しました。

  • 4GBまでの無料ホスティングサービス。
  • 700kbpsでのストリーミングが可能。
  • 1ヶ月間100万分間分の映像配信が可能。

ライバルであるAdobeは、有料でFlash Media Serverを提供しています。
これに対して、資金力にモノを言わせて、無料で大容量のストリーミング配信用ホスティングサービス提供という形でをぶつけてきたわけです。
この手の手法は、Microsoftの伝統的なやり方です。

それはともかくとして、さっそくSilverlight Streamingの準備に取りかかりたいと思います。

download_070529_1.jpg

先日すでに、Silverlight 1.1 Alpha Runtimeをダウンロードしてインストール済みなので、Microsoft Expression Media Encoder Free Trial
をダウンロードします。
まだ、Silverlight 1.1 Alpha Runtimeをインストールしていないのなら、先にインストールしておきます。

download_070529_2.jpg

ダウンロードして、インストールします。
今のバージョンですと、Windows日本語版にインストールした場合、ダウンロードしてきたテンプレートファイルが使用できないそうです。
そこで、インストール先のフォルダの中にTemplatesフォルダがあり、その中のenフォルダをそっくりコピーして、同じ階層にja-JPフォルダとしてペーストします。

Image1_070529.jpg

続いて、Silverlight Streamingのアカウント作成。

Microsoft Silverlight Streaming - Admin Homeのページへアクセスして、GetFreeボタンをクリックして、アカウント作成手続きをします。
その際、Windows Live IDが必要になるので、持っていない場合は作成する必要があります。

download_070529_3.jpg

Silverlight Streaming Accountが作成され、Account ID と Account Keyが発行されます。

これで、コンテンツ制作するための準備はできました。

投稿者 lepracaun : 06:51 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

2007年5月27日

Expression Blend:コードの記述には別途エディタが必要

引き続き、Expression Blendを試していきます。

参考サイトの「Expression Blendで始めるWPFアプリケーション(前編)」の3ページ目にしたがって、ボタンにコードを記述します。

blend01_14.gif

ここで注意点。
コードの記述にはVisual Studio 2005のStandard EditionかProfessional Editionが必要とのダイアログが出ます。

Image6_070527.jpg

プログラマな方々は既にお持ちでしょうが、一般的なWebデザイナーな方々はお持ちではないと思われます。
当然、私も持っていません。

そこで太っ腹なマイクロソフトはVisual Studio 2005 Express Editionというものを無償(ダウンロード版のみ)で提供してくれています。
私がダウンロードしたのは「Visual Basic 2005 Express Edition 日本語版」です。

こいつをインストールしたのですが、やはりコードエディタの直接起動はできませんでした。
Standard Edition以降じゃないとダメみたいです。

仕方が無いので、プロジェクトを保存したフォルダの中から、「Window1.xaml.vb」ファイルを見つけて、「Visual Basic 2005 Express Edition 日本語版」で開いて編集しました。

Image5_070527.jpg

本当は今回のケースは単純なのでテキストエディタで十分なのですが、せっかくダウンロードしたわけですし、コード入力補完やコードの折りたたみ、デバッグ機能もありますので使ってみることにしました。

Clickイベントの右側にあるイベント・ハンドラ名を記述するテキストボックス部分をダブル・クリックした際にダイアログが表示されますので、[OK]をクリックするとクリップボードにソースがコピーされます。

それを、「Window1.xaml.vb」のソースの中の下記の場所に挿入。
参考にしたサイトではどこに記述を加えるということは書いていませんでした。
プログラマな方々にとっては当たり前すぎるので説明を省いたのでしょうが、Visuarl Basicに触れたことが無い人は、どこにコピーしたソースを入れたらいいかわかりませんよね!?

Imports System
Imports System.IO
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation

Partial Public Class Window1
  Public Sub New()
    MyBase.New()
    Me.InitializeComponent()

    ' Insert code required on object creation below this point.
  End Sub
  Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
    Label1.Content = "Hello, World!!"
  End Sub

End Class

保存したら、メニュー・バーの[プロジェクト]-[プロジェクトのテスト]で動作を確認。
無事、ボタンをクリックしたら「Hello, World!!」と表示されるようになりました。

投稿者 lepracaun : 03:24 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

さっそくExpression Blendを使ってみる

まだベータ版が提供されたばかりのため、Expression Blendに関する情報は少ないのが現実です。
どういうソフトなのか?という概念的なことを説明しているサイトは多々あるのですが、実際の使い方を解説しているサイトは非常に少ないと思われます。

インストール以降、使い始めの初期段階でもっとも参考になると思われるサイトが下記のサイトです。
@IT(アットマーク・アイティ)
Expression Blendで始めるWPFアプリケーション(前編)
Expression Blendで始めるWPFアプリケーション(後編)
です。

上記のサイトを参考にしながら、実際に進めていきますが、全く同じ事を書いても仕方ないですよね。
Windowsアプリケーション開発者向けのサイトですので、かなり詳しく書いてくれていますが、対象はあくまでもプログラマな人々です。
そこで私は、Webデザイナーの視点で書いていこうと思います。

blend01_02.gif

[新しいプロジェクト]をクリックして、新規プロジェクト作成します。

blend01_03.gif

Windowsアプリケーション用の「標準アプリケーション(.exe)」を選択。
製品版になれば、ブラウザアプリケーションも作れるようになるらしいのですが、このベータ版ではムリのようです。
プロジェクト名は既定の「UntitledProject1」のままで。
言語は「Visual Basic」します。

言語は、C#でもVisual Basicでもどちらでもいいのでしょうが、私はC#の経験値がありません。
Visual Basicだったら、昔MicrosoftExcelとかでVBAでマクロ組んでたりしたことがあります。
文法的に似ているのではないかと思っているので、全く知らないC#よりはマシだろうという安易な判断です。
幸い、上記の参考サイトもVisual Basicで話を進めてくれていますし、C#よりもVisual Basicの方が、プログラマじゃない人にもわかりやすいのではないかという偏見もあります。

画面レイアウトは、デザインワークスペースとアニメーションワークスペースの2種類があります。
デザインワークスペースで、デザイン作成やプロジェクトのビルドなんかを行い、アニメーションワークスペースでタイムラインの編集という感じでしょうか?

デザインワークスペースの画面はこんな感じです。

Image3_070527.jpg

さっそく真ん中の白い領域であるアートボードに、ボタンとラベルを配置。
[ツールボックス]の[選択ツール]にある白い矢印の[直接選択]でオブジェクトを配置したボタンを選択。
[プロパティ]パネルの上部にある[名前]を“<名前なし>”から“Button1”に変更、ラベルに対しても同様にして“Label1”に変更しました。

この時点で、XAMLを見てみます。
アートボードの右上にある[デザイン][XAML]の切り替えタブで、XAMLを表示。
なるほど、これがUI設計で使われるXMLベースの言語XAMLですな・・・
プログラマな方々はVisual StudioなんぞでXAMLをシコシコとコーディングされるのでしょうが、デザイナな方々は、Expression Blendが書き出すに任せておきましょう。

Image4_070527.jpg

メニュー・バーの[プロジェクト]-[プロジェクトのビルド]でプロジェクトをビルドします。

次にコードを記述するのですが、ちょっと陥りがちなワナがあるので、次回に回します。

投稿者 lepracaun : 02:17 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

Microsoft Expression Blend ベータ日本語版をインストール

Microsoft Expression Blend ベータ日本語版をインストールしました。

Microsoft Expression Blend 公式サイトにインストール方法が書いてありますので、順を追って必要なものをインストールしていきます。

boxShot_Blend.jpg

■インストール方法

私の使用環境がWindows XPのため、.NET Framework 3.0が必要です。

Micorosoftダウンロードセンターから、「Microsoft .NET Framework 3.0 再頒布可能パッケージ」をダウンロードしてインストールしておきます。

同じくMicrosoftダウンロードセンターから「Microsoft Expression Blend ベータ 1」をダウンロードしてインストール。

Visual Basic 2005 Express Editionか、Visual C# 2005 Express Editionのいずれかが必要と書いてあるのでよくわからないけど、Visual Basic 2005 Express Editionの方をインストール。

さて、準備は整いましたので、実際にいじってみたいと思います。

投稿者 lepracaun : 00:48 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

Microsoft Silverlightランタイムをインストール

最近、話題になってきたMicrosoft Silverlight
そしてデザイナー向けオーサリングツールであるMicrosoft Expression Blend
このカテゴリーでは、これらを扱っていきます。
なんと言ってもこのブログのモットー「実践」です。
実践や体験の無い情報は、他のニュースサイトやブログを参考にしていただくとして・・・
何はともあれインストールして、実際に使ってみた内容をアップして行こうと思います。

logo_main_sl.gif


■Silverlightのインストール方法

この記事を書いている2007年5月26日現在では、Silverlightのランタイムは2種類あります。


  • Microsoft Silverlight 1.0 Beta

  • Microsoft Silverlight 1.1 Alpha


ただし、現時点ではSilverlight公式サイトからダウンロードできるのは、1.0ベータ版のランタイムだけです。

1.1アルファ版やSDKに関してはMSDNのSilverlightのサイトからだけのようです。
いずれも、Windows版とMac版があります。が、Windows版をインストール。

検索かければデモサイトなど拾えますが、1.1アルファ版以降でないと動作しないものや、逆に1.0ベータ版しか動作しないものなど様々ですので、場合によっては切り替える必要があるかもしれません。

投稿者 lepracaun : 00:14 | コメント (0) | トラックバック このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加