【part 7】AppApp のリファクタリング過程紹介【画像・色の管理編】

どうも。Reoです。4日目だ。

最近気付いたんですけど、AppApp 機能的にも使えないし、UIも完全に崩れてしまっているので、もはやリファクタリングじゃなくてただの保守ですね。直さなきゃいけないところが多すぎる。

ゴリゴリコードも直していきたいけれど、もう少し下準備編が続きますよ。

ちなみに前回の後、UICollectionViewCellとUITableViewCellの部分をR.swiftを使うように修正しました。オフ作業は以上です。

環境

• Xcode11.3.1
• Swift 5.1.3
• iOS13.3

1.  AppApp のリファクタリングを始めます！【SwiftLint 導入編】
2. 【part 2】AppApp のリファクタリング過程紹介【SwiftLint導入後のError解消編】
3. 【part 3】AppApp のリファクタリング過程紹介【SwiftLint導入後のWarning解消編】
4. 【part 4】AppApp のリファクタリング過程紹介【コーディング規約編】
5. 【part 5】AppApp のリファクタリング過程紹介【ディレクトリ構成編】
6. 【part 6】AppApp のリファクタリング過程紹介【R.swift導入編】

リポジトリ→ uruly/AppApp

いい加減ここの下線×下線にもどうにからんのかって思いが強くなってきた…。

今回の目標

今回は画像と色の管理方法を変更していきます。

今までで一番短い記事を目指して、サクッといくぞ。

これまでの画像管理

まずは画像管理の方からやっていきます。

これまでは、Imagesフォルダを作ってぶちこんでいました。

他プロジェクトでは2xと3xでフォルダを分けたりなんだりしていましたが、これはもう全部まとめてぶちこんでますね..。

これだと何がどこにあるのかわかりづらいですし、不要になったものも放置してしまっています。

Assets.xcassets で画像管理しよう

どっちのやり方が主流なのかはわかりませんが、私が最初に勉強したときには、上記のやり方で紹介されていたと思います。

Assets.xcassets は App Icon のためだけにあると思っていましたからね。

そうではないので Assets.xcassets に画像を追加していきましょう。

1x が使われることはないだろうと思っていて、いつも設定していません。どうなんだろう。

ディレクトリの構成は結構難しくて、適当にやってます。

PDFで設定

自分はそんなに手間とか感じてなくて、 png を設定する方法で良いと思っているんですが、pdf を用いることもできます。

Xcode 9 のベクター機能がさらなる次元に – Swift・iOSコラム – Medium

【Swift】 アセット画像を３種類も書き出したくない – Qiita

一回挑戦したんだけれど、？？ってなってやめた記憶がありました。次の新規プロジェクトはもう一度手を出してみるか…？デメリットもあるみたいだしちょっと迷う…

AppAppに関しては、素材の.aiファイルがどこにあるかわからないので、png を利用します。Illustratorもめっきり使わなくなってしまったなぁ。

移行作業

移行作業をします。

Imagesフォルダ内の画像を適当にフォルダ分けしてAssets.xcassetsにぶちこみました。

名前もちょっと変えました。コード上で画像を生成しているところにはR.swiftを用いて画像を取得するようにします。

// 修正前
let back = UIBarButtonItem(image: UIImage(named: "left_arrow.png"), style: .plain, target: self, action: #selector(self.goBack))
let forward = UIBarButtonItem(image: UIImage(named: "right_arrow.png"), style: .plain, target: self, action: #selector(self.goForward))

// 修正後
let back = UIBarButtonItem(image: R.image.left_arrow()!, style: .plain, target: self, action: #selector(goBack))
let forward = UIBarButtonItem(image: R.image.right_arrow()!, style: .plain, target: self, action: #selector(goForward))

修正してきました。

意外とfor文とかを使って以下のような使い方をしている箇所がありました。

let image = UIImage(named: name + "_thumb." + type)

この辺はいじってないです。全体を見ないとわかんない。

画像の移行Done。次行ってみよう。

これまでの色管理

次は、アプリ内で用いる色の管理方法を変更していきます。

一番最初のアプリではゴリゴリのべたうちで、その次のプロジェクトからextensionを書くようになりました。

import UIKit

extension UIColor {

    // デフォルトのAllLabelの色
    class func allLabel() -> UIColor {
        return UIColor(red: 10 / 255, green: 195 / 255, blue: 255 / 255, alpha: 1.0)
    }

    // セレクションバーの裏側の色 白花色
    class func backgroundGray() -> UIColor {
        return UIColor(red: 232 / 255, green: 236 / 255, blue: 239 / 255, alpha: 1.0)
    }

    // ＋ボタンの色 鈍色
    class func plusBackground() -> UIColor {
        return UIColor(red: 114 / 255, green: 113 / 255, blue: 113 / 255, alpha: 1.0)
    }

    // 以下略
}

AppApp ではこんな感じで実装されています。

なんでクラスメソッドなんだろう、static var でよくないか？って思いはありますが、これも別に悪い方法ではないと思います。

実際にiOS11より以前はこういうのが主流だったはず。多分。わからんけど。

でも、これだとIB上での色管理はどうするんだっていう話ですよ。

AppAppでIB上で色使ってるところないんですけど（）

Named Color を使おう！

iOS11からは色の管理も画像管理と同様に Assets.xcassets で行えるようになりました。

これほんと仕事始めた時にプロジェクト見てもどうしてもわからなくて、聞きました。大抵のことはプロジェクトやドキュメントをよく見てないだけだと思っているので質問すること自体稀なんですけど、マジで見つけられなかった…。Named Color 一体どこから作るんだになってました。

Assets.xcassetsを開いて、適当にColorsフォルダを作り、その中に New Color Set で色を作ります。

作った色は右側のインスペクターでセットします。

あとは使ってみましょう。

IB上では Named Colors のところに出てきます。

コード上で利用するときは、

// R.swift を用いて
view.backgroundColor = R.color.mainBlueColor()

// R.swift なし
view.backgroundColor = UIColor(named: "mainBlueColor")

のように使うことができます。

iOS11以上が対応

AppApp、iOS10からをターゲットにしてました。なので以下のエラー。

‘mainBlueColor(compatibleWith:)’ is only available in iOS 11.0 or newer

うむ。iOS11以上にあげます。っていうかiOS11,12とiOS13ではAppStoreのURLが違うっぽいんですが、確認する手段がないので、ターゲットiOS13からにしますね。

昔は、古い端末を使っているユーザーに優しい世界線を目指していたけど、厳しいです。（単に自分が古い端末を使っているだけなんですが）

なのでiOS13からにしました。いっぱいdeprecatedのWarningが出てきたぞ…

ダークモード対応

ダークモード対応も簡単。そう、Named Color ならね。

作ったColorを選択して、Appearance > Any, Dark もしくは Any, Light, Dark を選択して、色を調整してあげます。

これ、今見つけたばっかりなんですけどね。ドヤって紹介したけど。

Named Color 使ってたらダークモード対応も結構楽なのではないでしょうか。

次回

どうしよう。とりあえず、Carthageの管理をMintに移行しようかな。

それが終わったらようやくゴリゴリコードを直す段階に行けるんじゃないかなー。どうじゃろ。

おわりに

とりあえず、投稿したらNamed Colorへの移行を終わらせます。

色々と方法があるけれど、数年も経てば変わってしまってることも多いですね。

最新をいち早く取り入れる必要はないかもしれないけれど、遅すぎると気がついたら取り残されていることもよくあります。

イノベーター理論とは少し違うかもしれないけれど、イノベーターにはなれないことはよくよくわかっています。でもアーリーマジョリティの位置にはいないと。キャズムを超えたものはデファクトスタンダードになっていることも多いですし、その段階で取り入れられるようにはなっていないと。取捨選択は必要だけれども。

言ってみたかっただけみたいな節。ちゃんと本で読んだこういう話も覚えてるもんですね（概念的に覚えてたけど名前忘れてて聞いたんですけども。）

ちょっと作業タイムに入って、終わったら飯食って次の記事を書き始めましょうかね。

ではではこの辺で。