Lepracaun's factory - レプラコーンファクトリー -: さっそくExpression Blendを使ってみる

« Microsoft Expression Blend ベータ日本語版をインストール | メイン | Expression Blend：コードの記述には別途エディタが必要 »

2007年5月27日

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

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

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

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

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

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

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

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

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

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

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