[swift3] macOSアプリでCollectionViewを使おうとして躓いた

## 概要 ##
iOSアプリ開発のノリでmacOSアプリを開発しようとしたら、NSCollectionViewで躓いたのでメモ。
UICollectionViewを使うときに加えて一手間必要でした。
途中までiOSの場合と変わらないので読み飛ばして大丈夫です。

## 実装 ##
まずは適当なプロジェクトを新規で作ってみます。

<img width="737" alt="new.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/655861c4-3b74-91be-e570-c8e023dc9ab8.png">
<img width="731" alt="スクリーンショット 2017-08-17 16.46.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/2c0e4e5c-c044-893f-101e-574891650cc5.png">

以下は作成したプロジェクトの初期状態です。

<img width="1400" alt="スクリーンショット 2017-08-17 15.32.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/38f516b0-66a0-4e86-1846-349031cf0566.png">

### **CollectionViewの配置とDelegate等の設定** ###
NSCollectionViewを配置します。

<img width="1401" alt="スクリーンショット 2017-08-17 15.33.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/54102cec-ec44-411d-16d1-9d5ac0fec5ff.png">

<img width="886" alt="スクリーンショット 2017-08-17 15.34.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/e6bb2898-71a7-bd81-6518-6c3a4c367c05.png">

NSCollectionViewのOutlet接続をします。

<img width="1680" alt="スクリーンショット 2017-08-17 15.50.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/2f7f8458-3039-7586-743f-a16fe05520e9.png">

iOSの場合と違って、CollectionViewの要素はCellではなく、Itemとなっています。
要素を設定する際にも、dequeueReusableCell(withReuseIdentifier:, for:)メソッドではなく、makeItem(withIdentifier:, for:)メソッドを使います。
また、DataSourceのメソッドも名前が結構違ってるので、実装すべきものはリファレンスで確認するといいと思います。下みたいな感じで確認できます。

1. NSCollectionViewDataSourceを選択して三本指タップ
<img width="514" alt="スクリーンショット 2017-08-17 17.09.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/45d98054-8fb9-5d5d-16de-2f30258117f8.png">

2. Protocol Referenceをクリック
3. 検索窓で"required"を検索
<img width="1401" alt="スクリーンショット 2017-08-17 17.09.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/5ab46d6d-50d5-96c1-afb9-f246e03df6e9.png">

### **Item(NSCollectionViewの要素)の作成** ###
Cocoaフレームワークのクラスを作成します。

<img width="730" alt="スクリーンショット 2017-08-17 15.39.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/ced15899-3ecc-f9b2-5846-e5c003b90cde.png">

NSCollectionViewItemを継承したクラスを作成します。このとき、XIBを同時に作っておきます。

<img width="731" alt="スクリーンショット 2017-08-17 15.39.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/c60bb3d1-93b4-abf1-291e-f9086f53932e.png">

今回はLabelのみのItemを作りました。

<img width="1421" alt="スクリーンショット 2017-08-17 17.31.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/4d514975-aab5-b926-a5b1-b8ab2deff97a.png">

Itemを作成したので、ViewControllerで使えるように編集します。

<img width="1157" alt="スクリーンショット 2017-08-17 17.33.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/9a761251-a05e-83af-1e7a-a090efe6604e.png">

### **ここから一手間** ###
iOSアプリの場合は以上の工程で終わりでしたが、macOSの場合はエラーを吐きます。
そこで、最後に一手間加えてやります。ItemのXIBで操作をします。

1. CollectionViewItemを追加
<img width="1421" alt="スクリーンショット 2017-08-17 17.41.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/c6bafeb8-140a-380d-4347-781400a0c77a.png">

2. 追加したItemのCustom Classを作成したItemファイルの名前に変更

<img width="1421" alt="スクリーンショット 2017-08-17 17.57.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/69f16b82-da09-677e-6a39-7d17921281a1.png">


これでCollectionViewが使えるようになります。最後の一手間に気づかず、手間取ってしまいました...

### 実行 ###
このまま実行するとこんな感じになります。

<img width="481" alt="スクリーンショット 2017-08-17 17.30.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/1c520b27-490c-42d5-799d-4ea7f2e6bd22.png">

最後にCollectionViewのレイアウトでItemのサイズを変更します。これはiOSの場合と同じです。ItemのViewの大きさに応じて値を変えてください。

<img width="1422" alt="スクリーンショット 2017-08-17 16.33.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/96939221-6c5f-63ab-d522-ac12737a0aa9.png">

最終結果はこんな感じです。

<img width="480" alt="スクリーンショット 2017-08-17 17.28.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/175434/39991ac8-e748-1454-661b-56b0698f9823.png">

## まとめ ##
macOSアプリ開発について書いてある記事って以外と少ないので、こういった簡単なことでも躓いてしまうと大変です(実際自分がそうでした)。大したことは書いてないですが、同じことで悩んでいる人の解決に役立てば幸いです。∩(´∀｀)∩ﾜｧｲ♪