【ソースをgitにて公開中！】RealmとリッチなUIライブラリを駆使してルーレットアプリを作ってみた！

# 【ソースをgitにて公開中！】RealmとUIライブラリを駆使してルーレットアプリを作ってみた

* ソースがみたい方は[コチラ](https://github.com/yyokii/RouletteApp)にて👍
* [AppStoreにて配信しています](https://itunes.apple.com/jp/app/%E3%83%9E%E3%82%A4%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88/id1437125078?mt=8)

また、
個人開発において重要となる

・目標設定
・モチベーションの維持

の方法について科学的な手法をまとめました👇
ぜひご覧下さい！きっと誰にでも役立ちます！

 **[開発を支える科学的な目標設定の仕方とモチベーションの持続について](https://qiita.com/yyokii/items/2a28d1c4dd7dbd554da6)**

# はじめに

はじめまして、渋谷でエンジニアをしているYokiです👋
25才の2年目エンジニアとして働いています。

もともと文系で、it系に特別強くもない自分がエンジニアをしていてずっとつきまとうのは「スキル」への不安です🤭

そんな自分が、すごいエンジニアに早く追いつこうと思いやっているのが「週末プロダクト」です。
仕事とは別に個人で作りたいものを週末などの時間を利用して開発しており、スキルの向上になればと思いやっています。

「週末プロダクト」として今回は「ルーレット」アプリを作ってみました！
今回の記事では開発にあたって使用したライブラリやツールをまとめてみました😊
開発の参考になると幸いです。

# 作ったもの

シンプルなルーレットアプリをつくりました。


<img width="100" alt="Side By Side.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/a2d6e153-4d07-a66e-fb45-f54ae9148979.png"><img width="100" alt="Text Above 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/0b54d0a3-90e8-8f78-6271-587089f12c6f.png"><img width="100" alt="Text Above.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/5689f011-3616-c8e9-22ed-99300addd537.png"><img width="100" alt="Text Above, full device 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/befabd06-f381-75ab-c2c2-b38922318a56.png">

UIライブラリやRealmの勉強がてらに作るのに良いなと思いつくりました。

* ランチ決めや順番決め
* パーティーの企画でテーマが決まらない
* 今日のレシピをランダムに決めたい
* 行き先をランダムに決めたい

などの場面で使っていただけると幸いです☺️


# 使用したライブラリ

使用したライブラリの一覧は以下の通りです⬇️

```
  pod 'Charts'
  pod 'CariocaMenu', '~> 2.0.1'
  pod 'ChromaColorPicker'
  pod 'MaterialComponents/Buttons'
  pod 'MaterialComponents/Cards'
  pod 'MaterialComponents/Snackbar'
  pod 'RealmSwift'
  pod 'PopupDialog', '~> 0.8'
  pod "ViewAnimator"

```

## DB系

### RealmSwift

[Realm公式サイト](https://realm.io/jp/docs/swift/latest)

Realmはオープンソースで開発されているモバイルアプリ向けのデータベースです。
高速で、使いやすく、10万人以上の開発者に利用され、20億回以上ダウンロードされている有名なデータベースです。

swiftでは以下のような感じでDB処理が記述できます。

```.swift

// オブジェクトの定義
class Dog: Object {
    @objc dynamic var name = ""
    @objc dynamic var age = 0
}
class Person: Object {
    @objc dynamic var name = ""
    @objc dynamic var picture: Data? = nil // optionals に対応
    let dogs = List<Dog>()
}

// Swiftのオブジェクトと同じように利用できます
let myDog = Dog()
myDog.name = "Rex"
myDog.age = 1
print("name of dog: \(myDog.name)")

// Realmインスタンスの取得
let realm = try! Realm()

// クエリ実行の例（２才以下の犬を検索）
let puppies = realm.objects(Dog.self).filter("age < 2")
puppies.count // => 0 Realmにまだ追加されていないので。

// 保存データの変更処理はwrite内で行う
try! realm.write {
    realm.add(myDog)
}

puppies.count // => 1

// 別スレッドからの実行も可能
DispatchQueue(label: "background").async {
    autoreleasepool {
        let realm = try! Realm()
        let theDog = realm.objects(Dog.self).filter("age == 1").first
        try! realm.write {
            theDog!.age = 3
        }
    }
}

```

ルーレットアプリではお気に入り登録にてRealmを使用しました。


＜Ralm入門におすすめの記事＞
 [【永久保存版】RealmSwiftの使い方 – Swift4.0
](http://somen.site/2018/02/02/realmswift%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98%E7%89%88-swift4-0/)[Realm Swiftのまとめ
](https://qiita.com/See_Ku/items/6211690df3c56255fde4)[[iOS] Realmを使ってみた 〜環境構築からCRUDまで〜](https://dev.classmethod.jp/smartphone/iphone/start-ios-realm-crud/)

## UI系

### Charts

[Charts github](https://github.com/danielgindi/Charts)

いい感じのチャート、グラフ表示を簡単に作成できるライブラリです。
公式のサンプルプロジェクトのソースを読めばサクッとイケてるチャートやグラフが作れます👍

ルーレットアプリでは、パイチャートを利用しそれを回転されることでルーレットとして利用しました。

### CariocaMenu

[cariocamenu github](https://github.com/arn00s/cariocamenu)

![cariocamenu.gif](https://qiita-image-store.s3.amazonaws.com/0/138735/cc4d87f9-2de9-e194-be2f-1228200e8cc8.gif)


おしゃれなメニューライブラリです。
[iOS Cookies](https://ioscookies.com/)を眺めていて「お、！これ面白い」と思ったので、今回のメニューUIとして採用しました。

ぬるぬる動いて気持ち良いですし、実装もサンプルプロジェクトがあるので楽に使用できます！

### ChromaColorPicker

[ChromaColorPicker github](https://github.com/joncardasis/ChromaColorPicker)

![chromaColorPickerGif.gif](https://qiita-image-store.s3.amazonaws.com/0/138735/644a3e83-a9b2-1938-da4b-d6dde5022148.gif)

簡単に実装でき、自由に選択できるカラーピッカーライブラリです。

ルーレットアプリにおいては、アイテムの色選択時に使用しました。

### MaterialComponents

[MaterialComponents iOS 公式サイト](https://material.io/develop/ios/)

Material Designの適用をサポートしてくれるライブラリのiOS版です。
これめっちゃ良いです！！
基本的なコンポーネントは用意されており、このライブラリを使用するだけでもアプリの完成度はグッと上がると思います。

⬆️のリンクのメニューからコンポーネントを確認できますので是非見てみてください😊
素敵なUIばかりでUIのアイデアが広がるはずです！

今回は以下の３つを使用してみました。
特にスナックバー使い勝手がいいと思います。

* MaterialComponents/Buttons
* MaterialComponents/Cards
* MaterialComponents/Snackbar

![materialBtnGif.gif](https://qiita-image-store.s3.amazonaws.com/0/138735/66174821-b197-b633-2535-52e2b071ecc6.gif)

![materialCards.png](https://qiita-image-store.s3.amazonaws.com/0/138735/9e9fba44-4863-6cbe-c1f8-f32c7de70dd7.png)

<img width="375" alt="materialSnackBar.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/85877c9b-35a1-a54e-b1d1-37ebb3ec85cb.png">


### PopupDialog

[PopupDialog github](https://github.com/Orderella/PopupDialog)

![PopupDialogGif.gif](https://qiita-image-store.s3.amazonaws.com/0/138735/7341e56f-c40e-e2ff-cc96-1f88c0c3a2a9.gif)

シンプルでアニメーションがついたダイアログのライブラリです。
システムダイアログを利用するよりリッチな印象がありますね！
カスタム性も高いです。

### ViewAnimator

[ViewAnimator github](https://github.com/marcosgriselli/ViewAnimator)

UIViewへ簡単に、複雑なアニメーションを付けれるライブラリです。
アニメーションをちょっとつけるだけでもアプリの印象は変わります😉

# そのほか使用したもの

## [ICOOON MONO](http://icooon-mono.com/) 
商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。

## [ロゴメーカーショップ](https://itunes.apple.com/jp/app/%E3%83%AD%E3%82%B4%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97/id1190077343?mt=8)

ロゴ作成用のiOSアプリ（無料）です。
テンプレートの使用も可能で、iPhoneでサクッとロゴが作成できます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138735/2a0ffd02-c170-0291-0cac-486a2b33dcbd.png" width=25%>

## [ScreenshotDesigner](https://screenshotdesigner.com/)

1300円ぐらいのストアで表示されるイケてるスクショを作成する為のMac用アプリです。
使い勝手は良い感じなのですが、iPad対応していないのがちょっと残念。。

<img width="200" alt="Side By Side.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/3010749a-ba41-1c7a-466e-d01f00c0c582.png"><img width="200![uploading-0]()
" alt="Text Above, full device 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/6d70e25e-49ad-111f-d991-d3e828b38be5.png">


# おわりに
ソースは[こちら](https://github.com/yyokii/RouletteApp)で公開しております。
アプリが気になった方はダウンロードして頂けると嬉しいです🤗開発のモチベーションが上がります！
（[ダウンロードはコチラ](https://itunes.apple.com/jp/app/%E3%83%9E%E3%82%A4%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88/id1437125078?mt=8)）

ルーレットアプリぐらいすぐ作れるだろ、
て思い作ってみたら思いの外時間かかってしました。笑

とはいえやっぱり「週末プロダクト」は楽しいですね！

もっとスキル磨いていきたい！！
それでは楽しいエンジニアライフを👋

👇こちらの記事もおすすめです
[開発を支える科学的な目標設定の仕方とモチベーションの持続について](https://qiita.com/yyokii/items/2a28d1c4dd7dbd554da6)