Qiita
Xcode
iOS
Swift
Realm

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

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

はじめに

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

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

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

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

作ったもの

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

Side By Side.pngText Above 2.pngText Above.pngText Above, full device 2.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公式サイト

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

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

// オブジェクトの定義
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()

// クエリ実行の例(2才以下の犬を検索)
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
Realm Swiftのまとめ
[iOS] Realmを使ってみた 〜環境構築からCRUDまで〜

UI系

Charts

Charts github

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

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

CariocaMenu

cariocamenu github

cariocamenu.gif

おしゃれなメニューライブラリです。
iOS Cookiesを眺めていて「お、!これ面白い」と思ったので、今回のメニューUIとして採用しました。

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

ChromaColorPicker

ChromaColorPicker github

chromaColorPickerGif.gif

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

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

MaterialComponents

MaterialComponents iOS 公式サイト

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

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

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

  • MaterialComponents/Buttons
  • MaterialComponents/Cards
  • MaterialComponents/Snackbar

materialBtnGif.gif

materialCards.png

materialSnackBar.png

PopupDialog

PopupDialog github

PopupDialogGif.gif

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

ViewAnimator

ViewAnimator github

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

そのほか使用したもの

ICOOON MONO

商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。

ロゴメーカーショップ

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

ScreenshotDesigner

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

Side By Side.pngText Above, full device 2.png

おわりに

ソースはこちらで公開しております。
アプリが気になった方はダウンロードして頂けると嬉しいです🤗開発のモチベーションが上がります!
ダウンロードはコチラ

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

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

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