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.
MacとiOSで共通の
ビューを使う
2014.6.21
Cocoa勉強会 関西
大森智史
@oogon / satoshi.oomori
あんた、誰?
• と、いうわけで自己紹介。
• 大森智史といいます。
• 某印刷会社勤務。
• Cocoa勉強会関西は第0回からいます。
• ブログあります。
• こんなのも始めました。
XOJOニュース
• まもなく、iOSビルド機能が登場(Mac版の
み)
• 第53回でご紹介しましたXOJO
今日の話
• 前回、ゲームの話をした時、敵キャラの動き
を編集するツールが、わりと好評だったので、
公開することに。
今日の話
• 最初iPad用に作りましたが、途中からMac用
として作り変えました。
• 今日はその際の話を
とりあえず宣伝
motion editor
• SpriteKitのSKActionで使えるモーション記述
用のベジェエディタをMacApp Storeで公開中
(Ver 1.0.1)
https://itunes.apple.com/jp/app/motio...
motion editor
• v1.1で追加される機能
• 線のエクスポート、インポート
• アンドゥ(リドゥはまだ…)
motion editor
• 手書きベジェ
• 現在の編集モードを表示
• その他もろもろインターフェースの改善
motion editor
• Ver 1.1 リリース
TODAY
• 発表終了後
motion editor
• Swiftコードの書き出し(審査通りました!)
• (サンプル出せないので困ってるけど…)
世界初
たぶん
motion editor
• 今はまだ無料です。
• https://itunes.apple.com/jp/app/motion-
editor/id876088092
• http://cocoaapi.hatenablog.com/en...
motion editor
• レビューお待ちしております。
デモ
それでは、本題に
「共通のビュー」
なぜ必要か
• 複雑な描画をするビューのコードの共通化
• コード作成量の削減
• 同一の描画を実現
なぜ必要か
• ようするに、同じようなものを作るの面倒
どんな場合
• ゲーム ゲーム本体と編集ツール
• 電子書籍 表示とエディタ
• グラフィックツール 表示とエディタ
方針
• ボタン、メニューなどはそれぞれのUIパーツ
を使う
• メインビューのみ共通にする
2つの方式
• CoreGraphicsを使う
 MacとiOSではY座標が違うので注意
• Spritekitを使う
 ピクセルのみの描画の場合はこちらかな
iOS 8,OS X 10.10
• Scene KitがついにiOSにも!
• OS X版は以前ご紹介しました。
• http://www.slideshare.net/oogon/scene-kit-
cocoa201306
CoreGraphics
• 今回はCoreGraphicsを使いました。
相違点
• 似たクラスでも微妙に違うものあり
• 今回使った中から違うところをピックアップ
してみました。
Bezier
• NSBezierPathとUIBezierPath
• メソッド名が違う
Color
• NSColorとUIColor
• かなり似通ったメソッド名だけどクラス名が
違う
NSValue
• point構造体を得るにもいちいち違う
• pointValue (Mac)
• CGPointValue (iOS)
Undo Redo
• iOS側もNSUndoManager !
• (iOS側ではまだアンドゥは実装していない
けど、エラーは出ない)
• まだiOS側で使っていないので、よくわから
ない
具体的な方法
プリプロセッサマクロ
• 基本パターン
#if TARGET_OS_IPHONE
/*iOSでのみ行う処理をゴニョゴニョ*/
#elif TARGET_OS_MAC
/*Macでのみ行う処理をゴニョゴニョ*/
#endif
欠点
• コードが読みづらくなる
解決
• それぞれを継承したサブクラスを作り同じメソッ
ド名で呼び出せるように。(似たクラスがある
場合)
• プリプロセッサマクロでの切り分けはクラス内
で行う。
• これで、本体処理からはプリプロセッサマクロ
を排除
解決
• ただし…
• 数回しか出てこないようなところは、特に気
にしない。
• 何回も出てくるところだけ独自のクラスを作
る
• カスタムクラス OOOBezierPath
#if TARGET_OS_IPHONE
+ (OOOBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
{
return (OOOBezierP...
• カスタムクラス OOOColor
#if TARGET_OS_IPHONE
@interface OOOColor : UIColor
#elif TARGET_OS_MAC
@interface OOOColor : NSColor
#e...
• 呼び出し側
//フレーム枠描画
OOOBezierPath *framePath = (OOOBezierPath *)
[OOOBezierPath
bezierPathWithRect:CGRectMake(OFFSETX,OFFSET...
OS Xの座標を逆に
• iOSに合わせる
#if TARGET_OS_IPHONE
#elif TARGET_OS_MAC
//Macでは座標が反対になるのでフリップする
- (BOOL)isFlipped
{
return YES;
}
#...
画面タッチ処理
• 今回は線の位置を指定できれば良いので、タッ
チ開始、ドラッグ、タッチ終了のみ対応
画面タッチ
• OS X mouseDown:
• iOS touchesBegan:withEvent:
• タッチ・マウスダウンのロケーションは共通
なので、CGPointにして、共通処理のメソッ
ドへ
画面ドラッグ
• OS X mouseDrag:
• iOS touchesMoved:withEvent:
• タッチ・マウスダウンのロケーションは共通
なので、CGPointにして、共通処理のメソッ
ドへ
タッチ終了
• OS X mouseUp:
• iOS touchesEnded:withEvent:
• タッチ・マウスダウンのロケーションは共通
なので、CGPointにして、共通処理のメソッ
ドへ
• プラットフォーム依存部分 今回はタッチ(クリック)のロケーションだけを渡す
#if TARGET_OS_IPHONE
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)ev...
• 共通処理部分
-(void)touchBeganAndMuseDown:(CGPoint)touchPoint
{
//マウスダウンやタッチした時の共通処理
NSInteger loopCount = 0;
touchBegin = tou...
needsDisplay
!
-(void)needsDisplay
{
#if TARGET_OS_IPHONE
[self setNeedsDisplay];
#elif TARGET_OS_MAC
[self setNeedsDispla...
delegate
!
-(OOOAppDelegate *)myDelegate
{
#if TARGET_OS_IPHONE
return (OOOAppDelegate *)[[UIApplication
sharedApplication...
まとめ
• あんまり使わないところはプリプロセッサマ
クロ。
• 何度も使うところは共通のメソッドやクラス
を作って、そこでプラットフォームの切り分
けをする。
まとめ
• iOSで何か作るときの編集ツールは、Macで
動かせると何かと便利です。
いまOS Xアプリがアツい!
ありがとうございました
Upcoming SlideShare
Loading in …5
×

Cocoa勉強会20140621 macとiosで共通のコード

916 views

Published on

OS XとiOSで動くビューの作成

Published in: Education
  • Login to see the comments

Cocoa勉強会20140621 macとiosで共通のコード

  1. 1. MacとiOSで共通の ビューを使う 2014.6.21 Cocoa勉強会 関西 大森智史 @oogon / satoshi.oomori
  2. 2. あんた、誰? • と、いうわけで自己紹介。
  3. 3. • 大森智史といいます。 • 某印刷会社勤務。 • Cocoa勉強会関西は第0回からいます。
  4. 4. • ブログあります。
  5. 5. • こんなのも始めました。
  6. 6. XOJOニュース • まもなく、iOSビルド機能が登場(Mac版の み) • 第53回でご紹介しましたXOJO
  7. 7. 今日の話 • 前回、ゲームの話をした時、敵キャラの動き を編集するツールが、わりと好評だったので、 公開することに。
  8. 8. 今日の話 • 最初iPad用に作りましたが、途中からMac用 として作り変えました。 • 今日はその際の話を
  9. 9. とりあえず宣伝
  10. 10. motion editor • SpriteKitのSKActionで使えるモーション記述 用のベジェエディタをMacApp Storeで公開中 (Ver 1.0.1) https://itunes.apple.com/jp/app/motion-editor/id876088092
  11. 11. motion editor • v1.1で追加される機能 • 線のエクスポート、インポート • アンドゥ(リドゥはまだ…)
  12. 12. motion editor • 手書きベジェ • 現在の編集モードを表示 • その他もろもろインターフェースの改善
  13. 13. motion editor • Ver 1.1 リリース TODAY • 発表終了後
  14. 14. motion editor • Swiftコードの書き出し(審査通りました!) • (サンプル出せないので困ってるけど…) 世界初 たぶん
  15. 15. motion editor • 今はまだ無料です。 • https://itunes.apple.com/jp/app/motion- editor/id876088092 • http://cocoaapi.hatenablog.com/entry/ motion_editor_Japanese_support_page
  16. 16. motion editor • レビューお待ちしております。
  17. 17. デモ
  18. 18. それでは、本題に
  19. 19. 「共通のビュー」
  20. 20. なぜ必要か • 複雑な描画をするビューのコードの共通化 • コード作成量の削減 • 同一の描画を実現
  21. 21. なぜ必要か • ようするに、同じようなものを作るの面倒
  22. 22. どんな場合 • ゲーム ゲーム本体と編集ツール • 電子書籍 表示とエディタ • グラフィックツール 表示とエディタ
  23. 23. 方針 • ボタン、メニューなどはそれぞれのUIパーツ を使う • メインビューのみ共通にする
  24. 24. 2つの方式 • CoreGraphicsを使う  MacとiOSではY座標が違うので注意 • Spritekitを使う  ピクセルのみの描画の場合はこちらかな
  25. 25. iOS 8,OS X 10.10 • Scene KitがついにiOSにも! • OS X版は以前ご紹介しました。 • http://www.slideshare.net/oogon/scene-kit- cocoa201306
  26. 26. CoreGraphics • 今回はCoreGraphicsを使いました。
  27. 27. 相違点 • 似たクラスでも微妙に違うものあり • 今回使った中から違うところをピックアップ してみました。
  28. 28. Bezier • NSBezierPathとUIBezierPath • メソッド名が違う
  29. 29. Color • NSColorとUIColor • かなり似通ったメソッド名だけどクラス名が 違う
  30. 30. NSValue • point構造体を得るにもいちいち違う • pointValue (Mac) • CGPointValue (iOS)
  31. 31. Undo Redo • iOS側もNSUndoManager ! • (iOS側ではまだアンドゥは実装していない けど、エラーは出ない) • まだiOS側で使っていないので、よくわから ない
  32. 32. 具体的な方法
  33. 33. プリプロセッサマクロ • 基本パターン #if TARGET_OS_IPHONE /*iOSでのみ行う処理をゴニョゴニョ*/ #elif TARGET_OS_MAC /*Macでのみ行う処理をゴニョゴニョ*/ #endif
  34. 34. 欠点 • コードが読みづらくなる
  35. 35. 解決 • それぞれを継承したサブクラスを作り同じメソッ ド名で呼び出せるように。(似たクラスがある 場合) • プリプロセッサマクロでの切り分けはクラス内 で行う。 • これで、本体処理からはプリプロセッサマクロ を排除
  36. 36. 解決 • ただし… • 数回しか出てこないようなところは、特に気 にしない。 • 何回も出てくるところだけ独自のクラスを作 る
  37. 37. • カスタムクラス OOOBezierPath #if TARGET_OS_IPHONE + (OOOBezierPath *)bezierPathWithOvalInRect:(CGRect)rect { return (OOOBezierPath *)[super bezierPathWithOvalInRect:(CGRect)rect]; } #elif TARGET_OS_MAC + (OOOBezierPath *)bezierPathWithOvalInRect:(NSRect)rect { return (OOOBezierPath *)[super bezierPathWithOvalInRect:NSMakeRect(rect.origin.x, (rect.origin.y), rect.size.width, rect.size.height)]; } #endif
  38. 38. • カスタムクラス OOOColor #if TARGET_OS_IPHONE @interface OOOColor : UIColor #elif TARGET_OS_MAC @interface OOOColor : NSColor #endif
  39. 39. • 呼び出し側 //フレーム枠描画 OOOBezierPath *framePath = (OOOBezierPath *) [OOOBezierPath bezierPathWithRect:CGRectMake(OFFSETX,OFFSETY,300.0f, 450.0f)]; ! [[OOOColor lightGrayColor] setFill]; ! [framePath stroke];
  40. 40. OS Xの座標を逆に • iOSに合わせる #if TARGET_OS_IPHONE #elif TARGET_OS_MAC //Macでは座標が反対になるのでフリップする - (BOOL)isFlipped { return YES; } #endif • 実はすっかり忘れていたのでFBで教えてもらった
  41. 41. 画面タッチ処理 • 今回は線の位置を指定できれば良いので、タッ チ開始、ドラッグ、タッチ終了のみ対応
  42. 42. 画面タッチ • OS X mouseDown: • iOS touchesBegan:withEvent: • タッチ・マウスダウンのロケーションは共通 なので、CGPointにして、共通処理のメソッ ドへ
  43. 43. 画面ドラッグ • OS X mouseDrag: • iOS touchesMoved:withEvent: • タッチ・マウスダウンのロケーションは共通 なので、CGPointにして、共通処理のメソッ ドへ
  44. 44. タッチ終了 • OS X mouseUp: • iOS touchesEnded:withEvent: • タッチ・マウスダウンのロケーションは共通 なので、CGPointにして、共通処理のメソッ ドへ
  45. 45. • プラットフォーム依存部分 今回はタッチ(クリック)のロケーションだけを渡す #if TARGET_OS_IPHONE - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [[event allTouches] enumerateObjectsUsingBlock:^(id obj, BOOL *stop) { [self touchBeganAndMuseDown:CGPointMake([obj locationInView:self].x,[obj locationInView:self].y)]; *stop = YES; }]; } #elif TARGET_OS_MAC - (void)mouseDown:(NSEvent *)theEvent { NSPoint mouseLoc; mouseLoc = [self convertPoint:[theEvent locationInWindow] fromView:nil]; [self touchBeganAndMuseDown:CGPointMake(mouseLoc.x,mouseLoc.y)]; ! } #endif
  46. 46. • 共通処理部分 -(void)touchBeganAndMuseDown:(CGPoint)touchPoint { //マウスダウンやタッチした時の共通処理 NSInteger loopCount = 0; touchBegin = touchPoint; OOOAppDelegate *appDelegate = [self myDelegate]; NSMutableArray *pathObjects = [appDelegate pathObjects]; ! ! …(共通の処理を行なう) } ! }
  47. 47. needsDisplay ! -(void)needsDisplay { #if TARGET_OS_IPHONE [self setNeedsDisplay]; #elif TARGET_OS_MAC [self setNeedsDisplay:YES]; #endif }
  48. 48. delegate ! -(OOOAppDelegate *)myDelegate { #if TARGET_OS_IPHONE return (OOOAppDelegate *)[[UIApplication sharedApplication] delegate]; #elif TARGET_OS_MAC return (OOOAppDelegate *)[[NSApplication sharedApplication] delegate]; #endif }
  49. 49. まとめ • あんまり使わないところはプリプロセッサマ クロ。 • 何度も使うところは共通のメソッドやクラス を作って、そこでプラットフォームの切り分 けをする。
  50. 50. まとめ • iOSで何か作るときの編集ツールは、Macで 動かせると何かと便利です。
  51. 51. いまOS Xアプリがアツい!
  52. 52. ありがとうございました

×