Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
C#/WPFで作る
デスクトップマスコット入門
ver1.1
2015/1/12
東京大学大学院 工学系研究科
Kenji Fujikido
要約
- 既存のデスクトップマスコット紹介(少し)
- WPFの紹介(少し)
- 具体的なコードとともにサンプル作成
+自作デスクトップマスコットの宣伝
要求知識: 前半は誰でも読める話題、
後半はプログラミングできる人/C#知ってる人向け
方...
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
自己紹介
 東京大学大学院 工学系研究科所属
 本名はヒミツ
連絡先: njslyr.trpg@gmail.com
 研究では機械学習とかやってます
 普段使ってる言語: C#/C/Python
+教養レベルでプログラマブルロジック(v...
注意とか免責
・本資料の見解は所属機関と一切関係ありません
・ソースコードを掲載していますがご利用は自己責任にて
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
デスクトップマスコットって何?
デスクトップにマスコットが常駐して何かする(あるいは何もしない)
ソフトウェアの総称
代表例
チューチューマウス
伺か
しめじ
アプリコタン
…
「伺か(SSP)」の初期ゴースト「Emily」
デスクトップマスコットの使いみち
 マウスを使いそうな場所へ移動
 メール/SNSチェック
 RSS購読
 眺める
 撫でる
可愛い ここ重要
ケーススタディ1: 伺か(Emily)
とにかく歴史のあるデスクトップマスコット
複数キャラが喋る
とにかく多機能
イベント駆動に強い
(頭を撫でるとか)
Emilyの頭を撫でた結果
ケーススタディ2: しめじ
勝手に動き回るマスコット
開発者曰く「しめじは何の役にも立ちません」
最大表示数50キャラ
歩行移動 + よじ登り
しかも掴んで投げられる
ケーススタディ3: アプリコタン
RSSフィードリーダーだが可愛さ特化型
機械学習を導入し流行語を検知可能
TwitterなどSNSとの連動も標準サポート
動きが綺麗: 恐らくWPFで動作
Pythonで機能拡張可能
ゆっくりWindowWalker(YWW)
2014年7月から公開
東方Project二次創作「ゆっくり」用ソフト
縦横無尽に移動 + 60FPSアニメ
音声会話を標準搭載
Python対応
ケーススタディ4宣伝:拙作の紹介
各ソフトの性能比較
伺か しめじ アプリコタン YWW
キャラ差し替え ○ ○ ○ ○
アニメーション(仕草) △ △ ○ ◎
アニメーション(移動) △ ○ △ ◎
多キャラ表示 ○ ◎ △ △
Web接続機能 ○ - ◎ △
テキスト会話 ...
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
WPFって何?
Windows Presentation Foundationの略
Windows Formの跡継ぎ
GPUレンダリングに対応
滑らかなUI
XAMLで作るGUI
WPFで作れるソフト
ぐらばくさんの「KanColleViewer」
フリーでキレイなGUI
本人も使っていらっしゃるらしい
詳細:
http://grabacr.net/kancolleviewer
WPFの特徴
Windows Presentation Foundationの略
Windows Formの跡継ぎ
GPUレンダリングに対応
滑らかなUI
XAMLで作るGUI
動作比較イメージ
どっちが速い?
アニメーションはとても辛い アニメーションは想定済み
Windows Form: CPUで描画 WPF: GPUで描画
0
2
4
6
8
10
12
14
10 20 30 40 50 60
CPU使用率(%...
高パフォーマンスの裏舞台
GPUは氷山の一角に過ぎない
ビジュアルツリー, 遅延実行, Freeze,...
詳細は長くなるのでぜんぶ省略!
ビジュアルツリー:こういうの。
WPFの特徴
Windows Presentation Foundationの略
Windows Formの跡継ぎ
GPUレンダリングに対応
滑らかなUI
XAMLで作るGUI
滑らかなユーザーインターフェース
現代アプリに不可欠なアニメーション機能がWPFで標準サポート
⇒「動くマスコット」と好相性
具体例:
- ウェブブラウザのタブ操作
- Windows8のタイル
WPFの特徴
Windows Presentation Foundationの略
Windows Formの跡継ぎ
GPUレンダリングに対応
滑らかなUI
XAMLで作るGUI
XAMLって何?
XAML (eXtensible Application Markup Language)
ベースはXMLでGUIをHTMLのように記述可能。とても便利だが。
詳細解説するとキリが無いので勉強は余所でお願いします…
参考(sl...
ホントにWindows Formじゃダメ?
Windows Form
Win32API+GDIで初心者バイバイ
1. Win32APIとGDIからのDllImport
2. FormのCreateParamsをオーバーライド
3. Bitmap...
現代のデスクトップマスコットはWPFで
じゃあ作ろー!
ハッキリ言って比較は不要!
デスクトップマスコットはWPFで決まり
※Windows Formサイド限定機能も知ってた方がお得
色選択用のColorDialog, フォント選択用のFont...
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
想定する事前知識と計算環境
事前知識
- C#の基本文法
- XMLの基礎知識(タグ、要素)
計算環境
- Windows 7 SP1以降
- Microsoft Visual Studio 2012以上
※無償版(Express)でOK
なんでC#?
ホントはC#以外(C++, IronPython, Visual Basic)でも大丈夫だが…
世間の評判
C# Python VBC++
難易度
有償版Visual Studioの必要性
Winner!
なんでC#?
参考:
Petzold氏の公式解説書「プログラミングWindows 第6版」でも
C#を使用
2冊合わせてお値段13,000、高いけど良い本
C#を知らない人へ
本で勉強するならこの2冊。
粂井 康孝「猫でも分かるC#プログラミング 第2版」
Ian Griffiths「プログラミングC# 第6版」(※版数に注意!)
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
プロジェクト作成
・VSを起動
⇒ 「新しいプロジェクト」で「Visual C#」の「WPFアプリケーション」を選択
⇒ 適当なプロジェクト名を入れて「OK」
⇒ C#コードではなくXAMLデザイナウィンドウが表示: GUI設計用のウィンドウ
...
まずはHello World
Windows FormのLabelに相当するものを配置
追加
まずはHello World
上部のプレビューでウィンドウ中央に”Hello, World!”が出現
F5(デバッグ実行)やCtrl+F5(デバッグ無し実行)で
プレビューと同じようなウィンドウが出ればOK
画像の表示
リソースとして透過pngファイルを用意
今回使う画像(“yukkuri.png”)
リソース画像の追加
ソリューションエクスプローラを開き、
画像をフォルダかプロジェクトめがけてドラッグ&ドロップ
リソース画像の追加
画像ファイルがソリューションエクスプローラに追加されていれば成功
画像表示用の要素を追加
XAMLを書き換え。TextBlockを消して
<Image Source=“yukkuri.png” />
を追加。画像ファイル名は自分で使ってるモノに修正
画像表示用の要素を追加
・プレビューに画像が出たら成功。デバッグ実行でも動作確認
※実行時に画像が出なかった場合
画像ファイルの「ビルドアクション」設定を確認。
画像ファイルのプロパティからチェックし、
「Resource」になっていなければ「Resource」に直す
ウィンドウが邪魔!
デスクトップマスコットにウィンドウ枠は不要なので消す
AllowTransparency=“True”
WindowStyle=“None”
を指定すると描画がレイヤードウィンドウ上で行われる
(レイヤードウィンドウ: Windows 2003くらいから追加された非矩形ウィンドウ用機能)
さらに
...
ウィンドウが消えた!
ウィンドウ表示が消えれば成功。実行して動作確認
※「閉じる」ボタンが無いのでタスクバーから消すかAlt+F4で終了
動作チェック
うまく行ってる場合の実行結果
機能を増やしてみる
現状はただ表示しただけなので最低限の改善が必要
- 「終了」コマンドの用意
- 掴んで動かす
「終了」コマンドを追加
右クリックメニューを作成: <Grid>の手前に追記
イベントハンドラの宣言
イベントハンドラの実装
イベントハンドラをC#で実装(やっとC#の出番)
ソースコードファイル”MainWindow.xaml.cs”に追記
掴めるウィンドウ
掴んで動かす機能、たったの4行
動作確認
ちょっとした落とし穴
現状ではまだ最大化問題が残存
Windows 7でキャラを掴んで画面左上に持って行くと通常のウィンドウ同様に最大化
⇒ 画面を覆う!
リサイズの禁止
リサイズ禁止で解決: リサイズ、最小化、最大化のいずれも無し
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
会話機能の追加
キャラ描画の次はスタンダードな「喋り」機能を実装
※ホントにスタンダード過ぎるので改良必須
会話機能の作成手順
子ウィンドウの追加
子ウィンドウに文字列表示機能を追加
子ウィンドウの追加
子ウィンドウを新しく作る
「プロジェクト」>「クラスの追加」>「ウィンドウ(WPF)」から
”SerihuWindow.xaml”を作成(もちろん別の名前でもOK)
会話機能の作成手順
子ウィンドウの追加
子ウィンドウに文字列表示機能を追加
子ウィンドウの追加
子ウィンドウに文字列を表示できるようにする
子ウィンドウのXAMLにTextBlock要素を追加
子ウィンドウに文字列を表示できるようにする
コードビハインド(SerihuWindow.xaml.cs)にpublicメソッドを定義して
MainWindowからの指示待ち
x:Name属性を与えておくことで
コードビハインドから参照可能
とても大事な注意事項、忘れてるとクラッシュの原因に。
//セリフを表示する
public void DisplayMessage(string message)
{
Dispatcher.Invoke(() => this.serihu.Tex...
スレッド越しアクセスはダメ、ゼッタイ。
WPFではUI要素に第三者スレッドからアクセスすると怒られる!
UIスレッド
TextBlock
x:Name=“serihu”
SerihuWindow
他スレッド
生成
UIスレッドの聖域
「何ヒトの...
スレッドセーフなUI要素アクセス
解決策: スレッド(=Dispatcher)を教えてもらい、処理を「お願い」する
UIスレッド
TextBlock
x:Name=“serihu”
SerihuWindow
他スレッド
生成
UIスレッドの聖域...
スレッドセーフなUI要素アクセス
解決策: スレッド(=Dispatcher)を教えてもらい、処理を「お願い」する
UIスレッド
TextBlock
x:Name=“serihu”
SerihuWindow
他スレッド
生成
UIスレッドの聖域...
スレッドセーフなUI要素アクセス
UIスレッド
TextBlock
x:Name=“serihu”
SerihuWindow
他スレッド
生成
UIスレッドの聖域
実際の処理(UIスレッドからなのでOK)
解決策: スレッド(=Dispatch...
補足の補足: Dispatcher必要?
※今回は全処理がUIスレッド上なのでDispatcher不要
しかしマルチスレッドシナリオではほぼ確実に必要
マルチスレッドあるある:
Web接続
スクリプト読み込み
重たいファイル処理
etc...
会話機能の作成手順
子ウィンドウの追加
子ウィンドウに文字列表示機能を追加
簡単なメッセージを表示
メッセージ表示用コード(1/3)
MainWindow.xaml.csにコードを追加
タイマーを用いてセリフ出力
追加
メッセージ表示用コード(2/3)
続き: 二種類のセリフを交互に表示
追加
メッセージ表示用コード(3/3)
続き: 終了前処理を追加(Q. コレが無いとどうなるか?)
追加
実行結果
目次
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
更に改造するためのヒント
まだまだ課題は沢山!いくらやってもキリがない。
参考:「ゆっくりWindowWalker」のコード量: 約1万行
ここからは大雑把な方針付けだけ紹介
更に改造するためのヒント
見た目
動き方
プログラム機能
デザインパターン
見た目の改善
主にセリフ枠に改善の余地
セリフ枠に透過画像または
"WindowStyle=None"を適用
「次へ」「閉じる」ボタンがあると便利
こだわるならTextBlockを使い倒す!
- Span
- HyperLink
- LineB...
更に改造するためのヒント
見た目
動き方
プログラム機能
デザインパターン
動き方の改善
「しめじ」や「ゆっくりWindowWalker」を眺めると発見あり
ウィンドウ枠を地面代わりに
掴む/投げる
画像サイズ伸縮で「ぐにぐに」
- マウス追尾
- ジャンプする
- アプリケーション開始/終了時アニメーション
...
標準アニメーションを使おう!
WPFの標準アニメーションは簡単なわりに多機能
「Storyboard, DoubleAnimation, DoubleKeyFrame」
といった単語で調べて実例検索 & コピペで遊ぶべし
標準アニメーションで作...
更に改造するためのヒント
見た目
動き方
プログラム機能
デザインパターン
プログラム機能の改善
最初の方で触れたような機能含めて色々。
C#はオールラウンダー: 大概のことはググれば出来る
RSS購読
メール/ツイートチェック音声会話
複数キャラトーク
迷ったら「可愛さ第一」が原則!
喋り機能の作成手順
見た目
動き方
プログラム機能
デザインパターン
コードが汚くなる前に: MVVM
※コードが多い or 複数人開発の場合の話
MVVM(Model-View-ViewModel)
- 最近流行ってるデザインパターン、WPFとは相性抜群
SlideShareにもMVVMの解説スライドはたくさん...
更に改造するためのヒント宣伝
ラストにもう一度だけ。
拙作「ゆっくりWindowWalker」は主に動き方の参考になるので
ニコニコ動画で各バージョンの変遷を見てくれるとウレシイナー
動画マイリスト: http://www.nicovideo....
おしまい。
自己紹介 / 注意と免責
デスクトップマスコットって何?
WPFって何?
想定する事前知識と計算環境
キャラを表示する
会話っぽいものを作る
更に改造するためのヒント
知識準備
実際に
作る
まとめ
個別のテクは所詮小技。ただし知らないと作れないので大事にしよう。
愛情
コーディングスキル
デザインセンス
デスクトップマスコットの中身
質問等はメールにて。
njslyr.trpg@gmail.com
Thank yor for listening!
補足. 紹介したソフトのダウンロード先
「伺か」 独立伺か研究施設 ばぐとら研究所
http://ssp.shillest.net/
「しめじ」 しめじ ホームページ
http://www.group-finity.com/Shimeji/
「...
Upcoming SlideShare
Loading in …5
×

C#/WPFで作るデスクトップマスコット入門

29,087 views

Published on

娯楽特化のソフトウェアである「デスクトップマスコット」をWPFで作成する方法の導入をコードつきで紹介します。何かのプログラミング経験がある方を対象とし、特にC#の開発経験がある方には読みやすい内容になっていると思います。

Published in: Software
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

C#/WPFで作るデスクトップマスコット入門

  1. 1. C#/WPFで作る デスクトップマスコット入門 ver1.1 2015/1/12 東京大学大学院 工学系研究科 Kenji Fujikido
  2. 2. 要約 - 既存のデスクトップマスコット紹介(少し) - WPFの紹介(少し) - 具体的なコードとともにサンプル作成 +自作デスクトップマスコットの宣伝 要求知識: 前半は誰でも読める話題、 後半はプログラミングできる人/C#知ってる人向け 方向性 : 娯楽特化。ネタとしてどうぞ。
  3. 3. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  4. 4. 自己紹介  東京大学大学院 工学系研究科所属  本名はヒミツ 連絡先: njslyr.trpg@gmail.com  研究では機械学習とかやってます  普段使ってる言語: C#/C/Python +教養レベルでプログラマブルロジック(vHDL)とか 並列計算(CUDA, MPI)とか
  5. 5. 注意とか免責 ・本資料の見解は所属機関と一切関係ありません ・ソースコードを掲載していますがご利用は自己責任にて
  6. 6. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  7. 7. デスクトップマスコットって何? デスクトップにマスコットが常駐して何かする(あるいは何もしない) ソフトウェアの総称 代表例 チューチューマウス 伺か しめじ アプリコタン … 「伺か(SSP)」の初期ゴースト「Emily」
  8. 8. デスクトップマスコットの使いみち  マウスを使いそうな場所へ移動  メール/SNSチェック  RSS購読  眺める  撫でる 可愛い ここ重要
  9. 9. ケーススタディ1: 伺か(Emily) とにかく歴史のあるデスクトップマスコット 複数キャラが喋る とにかく多機能 イベント駆動に強い (頭を撫でるとか) Emilyの頭を撫でた結果
  10. 10. ケーススタディ2: しめじ 勝手に動き回るマスコット 開発者曰く「しめじは何の役にも立ちません」 最大表示数50キャラ 歩行移動 + よじ登り しかも掴んで投げられる
  11. 11. ケーススタディ3: アプリコタン RSSフィードリーダーだが可愛さ特化型 機械学習を導入し流行語を検知可能 TwitterなどSNSとの連動も標準サポート 動きが綺麗: 恐らくWPFで動作 Pythonで機能拡張可能
  12. 12. ゆっくりWindowWalker(YWW) 2014年7月から公開 東方Project二次創作「ゆっくり」用ソフト 縦横無尽に移動 + 60FPSアニメ 音声会話を標準搭載 Python対応 ケーススタディ4宣伝:拙作の紹介
  13. 13. 各ソフトの性能比較 伺か しめじ アプリコタン YWW キャラ差し替え ○ ○ ○ ○ アニメーション(仕草) △ △ ○ ◎ アニメーション(移動) △ ○ △ ◎ 多キャラ表示 ○ ◎ △ △ Web接続機能 ○ - ◎ △ テキスト会話 ◎ - ○ ○ 音声会話 - - ○ ◎ 学習機能 - - ◎ - スクリプト拡張性 ◎ - ○ ○
  14. 14. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  15. 15. WPFって何? Windows Presentation Foundationの略 Windows Formの跡継ぎ GPUレンダリングに対応 滑らかなUI XAMLで作るGUI
  16. 16. WPFで作れるソフト ぐらばくさんの「KanColleViewer」 フリーでキレイなGUI 本人も使っていらっしゃるらしい 詳細: http://grabacr.net/kancolleviewer
  17. 17. WPFの特徴 Windows Presentation Foundationの略 Windows Formの跡継ぎ GPUレンダリングに対応 滑らかなUI XAMLで作るGUI
  18. 18. 動作比較イメージ どっちが速い? アニメーションはとても辛い アニメーションは想定済み Windows Form: CPUで描画 WPF: GPUで描画 0 2 4 6 8 10 12 14 10 20 30 40 50 60 CPU使用率(%) フレームレート(FPS) Windows Form WPF
  19. 19. 高パフォーマンスの裏舞台 GPUは氷山の一角に過ぎない ビジュアルツリー, 遅延実行, Freeze,... 詳細は長くなるのでぜんぶ省略! ビジュアルツリー:こういうの。
  20. 20. WPFの特徴 Windows Presentation Foundationの略 Windows Formの跡継ぎ GPUレンダリングに対応 滑らかなUI XAMLで作るGUI
  21. 21. 滑らかなユーザーインターフェース 現代アプリに不可欠なアニメーション機能がWPFで標準サポート ⇒「動くマスコット」と好相性 具体例: - ウェブブラウザのタブ操作 - Windows8のタイル
  22. 22. WPFの特徴 Windows Presentation Foundationの略 Windows Formの跡継ぎ GPUレンダリングに対応 滑らかなUI XAMLで作るGUI
  23. 23. XAMLって何? XAML (eXtensible Application Markup Language) ベースはXMLでGUIをHTMLのように記述可能。とても便利だが。 詳細解説するとキリが無いので勉強は余所でお願いします… 参考(slideshare): めとべや東京5_XAML http://www.slideshare.net/okazuki0130/20140802-5-xaml
  24. 24. ホントにWindows Formじゃダメ? Windows Form Win32API+GDIで初心者バイバイ 1. Win32APIとGDIからのDllImport 2. FormのCreateParamsをオーバーライド 3. BitmapをLock 4. スクリーンのDeviceContext取得 5. CompatibleDeviceContext取得 6. Bitmapのハンドル取得 7. ブレンディング方法を設定 8. UpdateLayeredWindow呼び出し 9. コンテキストとハンドルを解放 10. ビットマップのLock解除 WPF AllowTransparency=“True” Background=“Transparent” WindowStyle=“None” 以上。 そもそも「キャラ表示」の時点で雲泥の差
  25. 25. 現代のデスクトップマスコットはWPFで じゃあ作ろー! ハッキリ言って比較は不要! デスクトップマスコットはWPFで決まり ※Windows Formサイド限定機能も知ってた方がお得 色選択用のColorDialog, フォント選択用のFontDialog, ...
  26. 26. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  27. 27. 想定する事前知識と計算環境 事前知識 - C#の基本文法 - XMLの基礎知識(タグ、要素) 計算環境 - Windows 7 SP1以降 - Microsoft Visual Studio 2012以上 ※無償版(Express)でOK
  28. 28. なんでC#? ホントはC#以外(C++, IronPython, Visual Basic)でも大丈夫だが… 世間の評判 C# Python VBC++ 難易度 有償版Visual Studioの必要性 Winner!
  29. 29. なんでC#? 参考: Petzold氏の公式解説書「プログラミングWindows 第6版」でも C#を使用 2冊合わせてお値段13,000、高いけど良い本
  30. 30. C#を知らない人へ 本で勉強するならこの2冊。 粂井 康孝「猫でも分かるC#プログラミング 第2版」 Ian Griffiths「プログラミングC# 第6版」(※版数に注意!)
  31. 31. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  32. 32. プロジェクト作成 ・VSを起動 ⇒ 「新しいプロジェクト」で「Visual C#」の「WPFアプリケーション」を選択 ⇒ 適当なプロジェクト名を入れて「OK」 ⇒ C#コードではなくXAMLデザイナウィンドウが表示: GUI設計用のウィンドウ XAMLエディタ 編集は基本ココ プレビュー画面
  33. 33. まずはHello World Windows FormのLabelに相当するものを配置 追加
  34. 34. まずはHello World 上部のプレビューでウィンドウ中央に”Hello, World!”が出現 F5(デバッグ実行)やCtrl+F5(デバッグ無し実行)で プレビューと同じようなウィンドウが出ればOK
  35. 35. 画像の表示 リソースとして透過pngファイルを用意 今回使う画像(“yukkuri.png”)
  36. 36. リソース画像の追加 ソリューションエクスプローラを開き、 画像をフォルダかプロジェクトめがけてドラッグ&ドロップ
  37. 37. リソース画像の追加 画像ファイルがソリューションエクスプローラに追加されていれば成功
  38. 38. 画像表示用の要素を追加 XAMLを書き換え。TextBlockを消して <Image Source=“yukkuri.png” /> を追加。画像ファイル名は自分で使ってるモノに修正
  39. 39. 画像表示用の要素を追加 ・プレビューに画像が出たら成功。デバッグ実行でも動作確認
  40. 40. ※実行時に画像が出なかった場合 画像ファイルの「ビルドアクション」設定を確認。 画像ファイルのプロパティからチェックし、 「Resource」になっていなければ「Resource」に直す
  41. 41. ウィンドウが邪魔! デスクトップマスコットにウィンドウ枠は不要なので消す
  42. 42. AllowTransparency=“True” WindowStyle=“None” を指定すると描画がレイヤードウィンドウ上で行われる (レイヤードウィンドウ: Windows 2003くらいから追加された非矩形ウィンドウ用機能) さらに Background=“Transparent” を加えることでウィンドウが不可視化 ※デバッグ中は完全透明でなく半透明にするのも有効 補足:今設定したのって何? 半透明にしたい場合 Background=“#80008000” A R G B
  43. 43. ウィンドウが消えた! ウィンドウ表示が消えれば成功。実行して動作確認 ※「閉じる」ボタンが無いのでタスクバーから消すかAlt+F4で終了
  44. 44. 動作チェック うまく行ってる場合の実行結果
  45. 45. 機能を増やしてみる 現状はただ表示しただけなので最低限の改善が必要 - 「終了」コマンドの用意 - 掴んで動かす
  46. 46. 「終了」コマンドを追加 右クリックメニューを作成: <Grid>の手前に追記 イベントハンドラの宣言
  47. 47. イベントハンドラの実装 イベントハンドラをC#で実装(やっとC#の出番) ソースコードファイル”MainWindow.xaml.cs”に追記
  48. 48. 掴めるウィンドウ 掴んで動かす機能、たったの4行
  49. 49. 動作確認
  50. 50. ちょっとした落とし穴 現状ではまだ最大化問題が残存 Windows 7でキャラを掴んで画面左上に持って行くと通常のウィンドウ同様に最大化 ⇒ 画面を覆う!
  51. 51. リサイズの禁止 リサイズ禁止で解決: リサイズ、最小化、最大化のいずれも無し
  52. 52. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  53. 53. 会話機能の追加 キャラ描画の次はスタンダードな「喋り」機能を実装 ※ホントにスタンダード過ぎるので改良必須
  54. 54. 会話機能の作成手順 子ウィンドウの追加 子ウィンドウに文字列表示機能を追加 子ウィンドウの追加
  55. 55. 子ウィンドウを新しく作る 「プロジェクト」>「クラスの追加」>「ウィンドウ(WPF)」から ”SerihuWindow.xaml”を作成(もちろん別の名前でもOK)
  56. 56. 会話機能の作成手順 子ウィンドウの追加 子ウィンドウに文字列表示機能を追加 子ウィンドウの追加
  57. 57. 子ウィンドウに文字列を表示できるようにする 子ウィンドウのXAMLにTextBlock要素を追加
  58. 58. 子ウィンドウに文字列を表示できるようにする コードビハインド(SerihuWindow.xaml.cs)にpublicメソッドを定義して MainWindowからの指示待ち x:Name属性を与えておくことで コードビハインドから参照可能
  59. 59. とても大事な注意事項、忘れてるとクラッシュの原因に。 //セリフを表示する public void DisplayMessage(string message) { Dispatcher.Invoke(() => this.serihu.Text = message); } 補足: Dispatcher? これ何?
  60. 60. スレッド越しアクセスはダメ、ゼッタイ。 WPFではUI要素に第三者スレッドからアクセスすると怒られる! UIスレッド TextBlock x:Name=“serihu” SerihuWindow 他スレッド 生成 UIスレッドの聖域 「何ヒトのモンに 手ぇ出しとんじゃワレ!」
  61. 61. スレッドセーフなUI要素アクセス 解決策: スレッド(=Dispatcher)を教えてもらい、処理を「お願い」する UIスレッド TextBlock x:Name=“serihu” SerihuWindow 他スレッド 生成 UIスレッドの聖域 Dispatcherとして取得 「お前どこスレッド出身?」
  62. 62. スレッドセーフなUI要素アクセス 解決策: スレッド(=Dispatcher)を教えてもらい、処理を「お願い」する UIスレッド TextBlock x:Name=“serihu” SerihuWindow 他スレッド 生成 UIスレッドの聖域 「お宅のとこのserihuの Textにコレ書いて下さい」
  63. 63. スレッドセーフなUI要素アクセス UIスレッド TextBlock x:Name=“serihu” SerihuWindow 他スレッド 生成 UIスレッドの聖域 実際の処理(UIスレッドからなのでOK) 解決策: スレッド(=Dispatcher)を教えてもらい、処理を「お願い」する
  64. 64. 補足の補足: Dispatcher必要? ※今回は全処理がUIスレッド上なのでDispatcher不要 しかしマルチスレッドシナリオではほぼ確実に必要 マルチスレッドあるある: Web接続 スクリプト読み込み 重たいファイル処理 etc...
  65. 65. 会話機能の作成手順 子ウィンドウの追加 子ウィンドウに文字列表示機能を追加 簡単なメッセージを表示
  66. 66. メッセージ表示用コード(1/3) MainWindow.xaml.csにコードを追加 タイマーを用いてセリフ出力 追加
  67. 67. メッセージ表示用コード(2/3) 続き: 二種類のセリフを交互に表示 追加
  68. 68. メッセージ表示用コード(3/3) 続き: 終了前処理を追加(Q. コレが無いとどうなるか?) 追加
  69. 69. 実行結果
  70. 70. 目次 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  71. 71. 更に改造するためのヒント まだまだ課題は沢山!いくらやってもキリがない。 参考:「ゆっくりWindowWalker」のコード量: 約1万行 ここからは大雑把な方針付けだけ紹介
  72. 72. 更に改造するためのヒント 見た目 動き方 プログラム機能 デザインパターン
  73. 73. 見た目の改善 主にセリフ枠に改善の余地 セリフ枠に透過画像または "WindowStyle=None"を適用 「次へ」「閉じる」ボタンがあると便利 こだわるならTextBlockを使い倒す! - Span - HyperLink - LineBreak など(HTMLにすごく似てる!)をMSDNで調べてみよう! WindowStyle=“None”のセリフ枠
  74. 74. 更に改造するためのヒント 見た目 動き方 プログラム機能 デザインパターン
  75. 75. 動き方の改善 「しめじ」や「ゆっくりWindowWalker」を眺めると発見あり ウィンドウ枠を地面代わりに 掴む/投げる 画像サイズ伸縮で「ぐにぐに」 - マウス追尾 - ジャンプする - アプリケーション開始/終了時アニメーション ...
  76. 76. 標準アニメーションを使おう! WPFの標準アニメーションは簡単なわりに多機能 「Storyboard, DoubleAnimation, DoubleKeyFrame」 といった単語で調べて実例検索 & コピペで遊ぶべし 標準アニメーションで作った飛び跳ね動作
  77. 77. 更に改造するためのヒント 見た目 動き方 プログラム機能 デザインパターン
  78. 78. プログラム機能の改善 最初の方で触れたような機能含めて色々。 C#はオールラウンダー: 大概のことはググれば出来る RSS購読 メール/ツイートチェック音声会話 複数キャラトーク 迷ったら「可愛さ第一」が原則!
  79. 79. 喋り機能の作成手順 見た目 動き方 プログラム機能 デザインパターン
  80. 80. コードが汚くなる前に: MVVM ※コードが多い or 複数人開発の場合の話 MVVM(Model-View-ViewModel) - 最近流行ってるデザインパターン、WPFとは相性抜群 SlideShareにもMVVMの解説スライドはたくさん公開されている。
  81. 81. 更に改造するためのヒント宣伝 ラストにもう一度だけ。 拙作「ゆっくりWindowWalker」は主に動き方の参考になるので ニコニコ動画で各バージョンの変遷を見てくれるとウレシイナー 動画マイリスト: http://www.nicovideo.jp/mylist/45125374 「ゆっくりWindowWalker」沿革 2014/7/14 ver1.0 : Windows Form実装 2014/9/8 ver3.0 : 会話機能追加! WinForm + Lua 2014/11/3 ver4.0 : WinForm + IronPytyon 2014/12/25 ver4.5β : WPFへ移行 + IronPython
  82. 82. おしまい。 自己紹介 / 注意と免責 デスクトップマスコットって何? WPFって何? 想定する事前知識と計算環境 キャラを表示する 会話っぽいものを作る 更に改造するためのヒント 知識準備 実際に 作る
  83. 83. まとめ 個別のテクは所詮小技。ただし知らないと作れないので大事にしよう。 愛情 コーディングスキル デザインセンス デスクトップマスコットの中身
  84. 84. 質問等はメールにて。 njslyr.trpg@gmail.com Thank yor for listening!
  85. 85. 補足. 紹介したソフトのダウンロード先 「伺か」 独立伺か研究施設 ばぐとら研究所 http://ssp.shillest.net/ 「しめじ」 しめじ ホームページ http://www.group-finity.com/Shimeji/ 「アプリコタン」 アプリコタン http://blog.apricotan.net/ 「ゆっくりWindowWalker」 ゆっくりWindowWalker配布所 https://sites.google.com/site/ywwdevelop/

×