ゼロから始める Drag and Drop

CA.swift #3 WWDC17 報告会
（ https://cyberagent.connpass.com/event/58796/ ）での発表資料です。

Demoアプリは以下のリンクから。
https://github.com/cokaholic/DragAndDropDemo

Transcript

1. Drag and Drop CA.swift #3 2017/06/19 Keisuke Tatsumi
2. Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github, Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi • WWDC 2017 attendee
 ʢMy First Time! ʣ
3. ຊ೔ͷςʔϚ͸…
4. Drag and Drop
5. Agenda • What’s Drag and Drop • How To Use • Draggable Items in the Same Screen • Summary
6. Agenda • What’s Drag and Drop • How To Use • Draggable Items in the Same Screen • Summary
7. What’s Drag and Drop • iOS11ͷ৽ػೳ
9. iPhone5 iPhone5c
10. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ
11. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ • iPadͰͷΈ࢖͑Δ
13. ͱ͜Ζ͕…
14. iPhoneͰ΋࢖͑ΔͬΆ͍ʁ
15. iPhoneͰ΋࢖͑ΔͬΆ͍ʁ • ݱࡏʢ2017.6.19ʣ·Ͱʹ഑෍͞Ε͍ͯΔiOS11 betaͰ΋ɺಈըͷ௨Γਖ਼͘͠ػೳ͢Δ • ΋ͱ΋ͱAppleࣾ಺Ͱ͸iPhoneͰ΋ςετ͞Εͯ ͍ΔػೳΒ͍͠ • ΋͔ͨ͠͠Βɺਖ਼ࣜϦϦʔε൛Ͱ΋iPhone্Ͱ࢖ ͑Δ͔΋
16. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ • iPadͰͷΈ࢖͑ΔʢiPhoneͰ΋Մʁʣ
17. Agenda • What’s Drag and Drop • How To Use • Draggable Items in the Same Screen • Summary
18. How To Use • APIͷྲྀΕ͸େ͖̏ͭ͘ͷηΫγϣϯʹ෼͔ΕΔ ‣ ϦϑτηΫγϣϯʢ্࣋ͪ͛Δʣ ‣ υϥοάηΫγϣϯʢಈ͔͢ʣ ‣ υϩοϓηΫγϣϯʢམͱ͢ʣ API Roadmap
19. How To Use • ·ͣ͸લஈ֊Ͱ͋ΔViewͱͷ઀ଓΛߦ͏ API Roadmap
20. How To Use import UIKit class ViewController: UIViewController { @IBOutlet weak var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() // υϥοά&υϩοϓ͢Δʹ͸༗ޮʹ͢Δඞཁ͕͋Δ imageView.isUserInteractionEnabled = true // UIImageViewʹυϥοάΠϯλϥΫγϣϯΛ௥Ճ͢Δ let dragInteraction = UIDragInteraction(delegate: self) imageView.addInteraction(dragInteraction) // ViewControllerͷviewʹυϩοϓΠϯλϥΫγϣϯΛ௥Ճ͢Δ let dropInteraction = UIDropInteraction(delegate: self) view.addInteraction(dropInteraction) } } ViewController.swift ᶃViewͱͷ઀ଓ
21. ϦϑτηΫγϣϯ ্࣋ͪ͛Δ
22. ϦϑτηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
23. υϥοάηΫγϣϯ ಈ͔͢
24. υϥοάηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
25. υϥοάηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ͳʹ͜Εʁ ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
26. NSItemProviderWriting • υϥοά&υϩοϓػೳͷυϥοάͷࡍʹ౉͢ΦϒδΣΫτ ͷॻ͖ࠐΈ༻Ϋϥε • ॻ͖ࠐΉ͜ͱ͕Ͱ͖ΔΫϥε͸جຊతʹ͸Լهͷ̑ͭ ‣ NSString ‣ NSAttributedString ‣ NSURL ‣ UIColor ‣ UIImage
27. υϩοϓηΫγϣϯ མͱ͢
28. υϩοϓηΫγϣϯ import UIKit import MobileCoreServices // UTCoreTypesΛ࢖༻͢Δࡍʹඞཁ extension ViewController: UIDropInteractionDelegate { // υϩοϓ͞ΕΔΞΠςϜ͕༗ޮ͔Ͳ͏͔൑ఆ͢Δࡍʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession) -> Bool { // ૹΒΕͯ͘ΔΞΠςϜͷ൑ఆ͸UTIͰߦ͏ // kUTTypeImage͸ը૾ͷ৔߹ͷidentifierͰɺUTI͸ public.image ͱͳΔ // ͜ͷ৔߹ɺը૾Ͱ͋ΓɺૹΒΕ͖ͯͨΞΠςϜ਺͕̍ͭͷ৔߹ͷΈ௨͢ͱ͍͏ҙຯʹͳΔ return session.hasItemsConforming(toTypeIdentifiers: [kUTTypeImage as String]) && session.items.count == 1 } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
29. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal { // υϥοάதͷΞΠςϜͷ࠲ඪ let dropLocation = session.location(in: view) let operation: UIDropOperation if imageView.frame.contains(dropLocation) { // imageViewͷதͰ཭ͨ͠৔߹ɺίϐʔѻ͍ʹͳΔ operation = .copy } else { // ͦΕҎ֎ͷҐஔͰ཭ͨ͠৔߹ɺΩϟϯηϧ͞ΕΔ operation = .cancel } return UIDropProposal(operation: operation) } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
30. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal { // υϥοάதͷΞΠςϜͷ࠲ඪ let dropLocation = session.location(in: view) let operation: UIDropOperation if imageView.frame.contains(dropLocation) { // imageViewͷதͰ཭ͨ͠৔߹ɺίϐʔѻ͍ʹͳΔ operation = .copy } else { // ͦΕҎ֎ͷҐஔͰ཭ͨ͠৔߹ɺΩϟϯηϧ͞ΕΔ operation = .cancel } return UIDropProposal(operation: operation) } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏ UIDropOperationʁ
31. UIDropOperation • ΞΠςϜΛͦͷҐஔͰυϩοϓͨ͠ࡍͷڍಈ ͕Ͳ͏ͳΔ͔ΛϢʔβʔʹࣔ͢͜ͱ͕Ͱ͖Δ
32. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) { // ηογϣϯ͔Βड͚औͬͨը૾Λϩʔυ͢Δ session.loadObjects(ofClass: UIImage.self) { [weak self] imageItems in guard let images = imageItems as? [UIImage] else { return } // ड͚औͬͨը૾ΛimageViewʹηοτ͢Δ self?.imageView.image = images.first } } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
33. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) { // ηογϣϯ͔Βड͚औͬͨը૾Λϩʔυ͢Δ session.loadObjects(ofClass: UIImage.self) { [weak self] imageItems in guard let images = imageItems as? [UIImage] else { return } // ड͚औͬͨը૾ΛimageViewʹηοτ͢Δ self?.imageView.image = images.first } } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏ ͜͜·ͰͰυϥοά&υϩοϓ͸׬੒
34. Agenda • What’s Drag and Drop • How To Use • Draggable Items in the Same Screen • Summary
35. Draggable Items in the Same Screen • υϥοάηΫγϣϯʹ͓͍ͯɺυϥοάͰ͖ ΔΞΠςϜ͕ಉҰը໘಺ʹ̎ͭҎ্͋Δ৔߹ɺ ͲͷΑ͏ʹͯ͠൑ఆ͢Δ͔Λߟ͑ͯΈͨ
36. import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ϫϯύλʔϯͰ͔͠౉ͤͳ͍ʁ ઌ΄Ͳͷ࣮૷ͩͱ… Draggable Items in the Same Screen
37. Draggable Items in the Same Screen import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
38. Draggable Items in the Same Screen import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
39. Draggable Items in the Same Screen import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
40. Demo
41. Agenda • What’s Drag and Drop • How To Use • Draggable Items in the Same Screen • Summary
42. Summary • υϥοάˍυϩοϓ͸iOS11͔Βͷ৽ػೳͰ iPad ΋͘͠͸ iPhone Ͱ࢖༻Ͱ͖Δ • υϥοάˍυϩοϓʹ͸Ϧϑτɺυϥοάɺ υϩοϓͷ̏ͭͷηΫγϣϯ͕͋Δ • υϥοάˍυϩοϓ͸ಉҰը໘಺ʹෳ਺ͷυ ϥοάՄೳͳΞΠςϜ͕͋ͬͯ΋൑ఆͰ͖Δ
43. Demo Source https://github.com/cokaholic/DragAndDropDemo
44. Thank youʂ
45. ࢀߟϦϯΫ • iOS11Ͱ͸iPhoneͰ΋υϥοάˍυϩοϓ͕Մೳʙ։ൃऀ͕ ൃݟ
 http://iphone-mania.jp/news-171425/ • Introducing Drag and Drop - WWDC 2017
 https://developer.apple.com/videos/play/wwdc2017/203/ • Data Delivery with Drag and Drop - WWDC 2017
 https://developer.apple.com/videos/play/wwdc2017/227/