Oitec
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
996
On Slideshare
910
From Embeds
86
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 86

http://d.hatena.ne.jp 85
http://webcache.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 0 から始める Expression Blend + Phone 7
    • 蜜葉  優
  • 2. profile
    • H.N. : 蜜葉 優 [mitsuba yu]
    • 本名 : 泉本優輝 [izumoto yuuki]
    • Community:Silverlight Square Windows Phone Arch
    • twitter: @mitsuba_tan
    • Web: http://c-mitsuba.com
    • blog: http ://d.hatena.ne.jp/c-mitsuba
  • 3. commercial
  • 4. commercial
  • 5. other
  • 6.
    • Blog[0 から始める Expression Blend 4 再入門 ] の実習版
    • + Windows Phone 7
    • Blend で出来ることを網羅できれば
    • C# は基本的にない方向で
    • XAML 手書きも極力少なめで
    • ライブコーディングなので 会場で一緒にやれそうな人は是非
    today
  • 7.
    • TL もやりながら確認しようとおもいます。
    • 難しそうなところは、随時聞いてもらえればいいです。
    • できれば@ついてたら補足しやすいので嬉しいです。
    today
  • 8.
    • インストールしよう
    • プロジェクトをつくる - Hello Blend -
    • Rectangle 、 Ellipse を使ってみる
    • グラデーションを操作する
    • ボタンを使ってみる
    • (一応)イベントハンドラを書く
    agenda
  • 9.
    • レイアウトまわり
    • Grid
    • StackPanel
    • Canvas
      • ツールキット
    • WrapPanel
    agenda
  • 10.
    • アニメーションをやってみる
    • イージングをつかってみる
    • ビヘイビアでアニメーションを再生する
    • ビヘイビアでメディアファイルを再生する
    agenda
  • 11.
    • Visual State Manager を覚えよう
    • Sample Data を使ってみる
    • Binding で生成した Item をレイアウトする
    agenda
  • 12.
    • psd ファイルを取り込む
    • ai ファイルを取り込む
    • コントロールにパースをかける
    • Effect 効果をつけよう
    agenda
  • 13.
    • SketchFlow を使ってみる
    • 画面遷移
    • アニメーション
    • Component Screen
    agenda
  • 14.
    • SketchFlow を使ってみる
    • サイドバーを操作する
    • フィードバック機能を利用する
    • 仕様書(ぽいもの)を作る
    • Windows Phone 7 アプリの SketchFlow
    agenda
  • 15.
    • Windows Phone 7
    • プロジェクトを作る
    • Device パネル
    • PhoneAccentColor
    • Panorama & Pivot
    • Tile UI をつくる
    agenda
  • 16.
    • #1 Expression Blend ってあった、ような…
    • #2 使えるようになったら嬉しいなって
    • #3 もうアニメーションも怖くない
    • #4 フォトショも、イラレも、あるんだよ
    • #5 C# なんて、あるわけない
    • #6 こんなの絶対おかしいよ (SketchFlow を知らないなんて )
    • #7 フィードバックと向き合えますか?
    • #8 わたしの最高の友達
    story
  • 17.
    • Microsoft Expression Studio Ultimate に入ってる
    • Expression Blend 最新バージョンは4
    • SL/WPF/WP7 のデザインツール
    • 値段は?
    • 学生は?
    • 条件に合えば
    • 買えないよ!
    Blend ?
  • 18.
    • SL4 なら>
    • 基本的にインストーラを叩くだけで入ります。
    • まずは評価版で試してみるといいでしょう
    • SL5 なら> Preview をどうぞ
    • WP7 なら> AppHub からどうぞ
    install
  • 19.
    • プロジェクトをつくる - Hello Blend -
    • Rectangle 、 Ellipse を使ってみる
    • グラデーションを操作する
    • ボタンを使ってみる
    • (一応)イベントハンドラを書く
    第1話
  • 20.
    • プロジェクトをつくる - Hello Blend -
    • Rectangle 、 Ellipse を使ってみる
    • グラデーションを操作する
    • ボタンを使ってみる
    • (一応)イベントハンドラを書く ここまでは VS のデザイナでできますね!
    第1話
  • 21.
    • レイアウトまわり
    • Grid
    • StackPanel
    • DockPanel
    • Canvas
      • ツールキット
    • WrapPanel
    第2話
  • 22.
    • レイアウトまわり
    • Grid
    • StackPanel
    • DockPanel
    • Canvas
      • ツールキット
    • WrapPanel ここまで出来ればとりあえず画面はつくれますね!
    第2話
  • 23.
    • アニメーションをやってみる
    • イージングをつかってみる
    • ビヘイビアでアニメーションを再生する
    • ビヘイビアでメディアファイルを再生する
    第3話
  • 24.
    • アニメーションをやってみる
    • イージングをつかってみる
    • ビヘイビアでアニメーションを再生する
    • ビヘイビアでメディアファイルを再生する
    • アニメーションができれば、 SL/WPF/WP7 アプリじゃなくても、 モック作るぐらいはできますね!
    第3話
  • 25.
    • アニメーションをやってみる
    • イージングをつかってみる
    • ビヘイビアでアニメーションを再生する
    • ビヘイビアでメディアファイルを再生する
    • さらにビヘイビアにも慣れれば、静的な部分は大体ノンコーディングで可能です!
    第3話
  • 26.
    • psd ファイルを取り込む
    • ai ファイルを取り込む
    • コントロールにパースをかける
    • Effect 効果をつけよう
    第4話
  • 27.
    • psd ファイルを取り込む
    • ai ファイルを取り込む
    • コントロールにパースをかける
    • Effect 効果をつけよう
    • グラフィッカー / デザイナーとも仲良くなれそう!
    第4話
  • 28.
    • psd ファイルを取り込む
    • ai ファイルを取り込む
    • コントロールにパースをかける
    • Effect 効果をつけよう
    • むしろここまで出来る デザイナさんがすてき!
    第4話
  • 29.
    • Style
    • DataBinding
    • Visual State Manager
    • Sample Data を使ってみる
    • Binding で生成した Item をレイアウトする
    第5話
  • 30.
    • Style
    • DataBinding
    • Visual State Manager
    • Sample Data を使ってみる
    • Binding で生成した Item をレイアウトする
    • ここまでできれば、 もう Blend マスター!?
    第5話
  • 31. SketchFlow
    • Silverlight で開発できるプロトタイプ開発機能
    • スケッチのように簡単に動くものが作れる
    • ほとんどプログラミングすることがなく、マップで視覚的に画面作成が可能
    • さらにフィードバックやドキュメント出力機能がある
  • 32.
    • SketchFlow を使ってみる
    • 画面遷移
    • アニメーション
    • Component Screen
    第6話
  • 33.
    • SketchFlow を使ってみる
    • 画面遷移
    • アニメーション
    • Component Screen
    • さくっと作ってアプリの提案とかできそうですね!
    第6話
  • 34.
    • SketchFlow を使ってみる
    • サイドバーを操作する
    • フィードバック機能を利用する
    • 仕様書(ぽいもの)を作る
    • Windows Phone 7 アプリの SketchFlow
    第7話
  • 35.
    • SketchFlow を使ってみる
    • サイドバーを操作する
    • フィードバック機能を利用する
    • 仕様書(ぽいもの)を作る
    • Windows Phone 7 アプリの SketchFlow
    • 企画をどんどんブラッシュアップしていきます。
    第7話
  • 36.
    • Microsoft が発表したスマートフォン
    • 3 D サクサク!ぬるぬる!
    • SL/XNA で開発
    • MetroUI
    WP7
  • 37.
    • Windows Phone 7
    • プロジェクトを作る
    • Device パネル
    • エミュレータ / 実機実行
    • PhoneAccentColor
    • Panorama & Pivot
    • Tile UI をつくる
    最終話
  • 38.
    • Blend は VS よりも 簡単にリッチな UI を作れるいいツールです。
    • しかも、ほとんどの UI 周りをノンコーディング で行えます。
    • もちろん基本的に XAML なので XML や DOM に慣れていれば、苦手意識はないはず。
    まとめ
  • 39.
    • モックや画面設計目的ならば技術に縛られないので、 SketchFlow で手早く動く物を作ってしまう 、という使い方もできます。
    • GUI なツールなのでぜひ デザイナさん に Blend を使えるようになってほしい。
    まとめ
  • 40.