BLOG.tass.io

iOSアプリ開発に便利な「Swift Bootstrap」

2015-06-12

イギリスのiOSアプリ開発者 @lucasjgordonさんが立ち上げた「Swift Bootstrap」の紹介です。

Bootstrapという名前なので(Twitter) Bootstrapみたく「インストールするだけでだいたい見た目が出来上がる」ようなものを想像してしまうかもしれませんが、残念ながら違います…。 SwiftでiOSアプリ開発する際に必要となるファイルを、web上で簡単に作成できるツール群です。

日々増えていってるようなのですが、本日2015/6/15時点では以下の4つのツールが公開されています。

  • Palette
    アプリのカラーパレット(メインカラーや2ndカラーなど)を生成するツール

  • Onboarding
    画像をスライドショーする画面を生成するツール

  • Screenshots\

    1枚のスクリーンショットから各サイズのスクリーンショットを生成してくれるツール

  • Color
    カラーピッカーの選択色をUIColorのコードで表示するツール

Palette

http://www.swiftbootstrap.com/palette.html

ぽちぽちを色を選んでいくだけで、アプリで使う主要な色情報が出力できるツールです。 好みの色を選ぶだけでもそれっぽい色を候補に表示してくれるので、深く考えなくても大丈夫(?)です。 もちろん、細かに調整しながら選んでいくこともできます。

まずはメインカラーを選んで、、、

つぎは2ndカラーを選びます。わかりにくいですが、右上のNavigationBaritemの色が変わってます(^o^;)

文字色を選択

最後に背景色を選んで完成です。

“Generate”ボタンを押すと、メインカラー、2ndカラー、文字色、背景色の4つを定義したswiftファイルがダウンロードできます。

Paletteの出力サンプル

import UIKit

let mainColor = UIColor(red: 52.0/255.0, green: 152.0/255.0, blue: 219.0/255.0, alpha: 1.0)

let secondaryColor = UIColor(red: 219.0/255.0, green: 118.0/255.0, blue: 52.0/255.0, alpha: 1.0)

let darkColor = UIColor(red: 207.0/255.0, green: 72.0/255.0, blue: 72.0/255.0, alpha: 1.0)

let lightColor = UIColor(red: 215.0/255.0, green: 215.0/255.0, blue: 215.0/255.0, alpha: 1.0)

Onboarding

http://www.swiftbootstrap.com/onboarding.html

画像をアップロードするだけで、チュートリアルで使われるようなスライド画面を作成できるツールです。 最終的には、ViewControllerのソースコードがまるごと出力されます。

まずはスライドに使用する画像をアップロードします。

使用する画像をもっとアップロードしていきます。

各スライドに、文字入れすることも出来ます。

最後に背景色を指定して完成です!

あとは “Generate” ボタンを押せば、この画面のswiftのコードがダウンロードできます。

Onboardingの出力サンプル

import UIKit
class OnboardingController: UIViewController, UIScrollViewDelegate {
    let backgroundColor = UIColor(red: 241.0/255.0, green: 196.0/255.0, blue: 15.0/255.0, alpha: 1.0)
    let slides = [
        [ "image": "pasta-527286_640.jpg", "text": "パスタを用意するやろ?"],
        [ "image": "food-shoot-675564_640.jpg", "text": "肉っぽい野菜を入れるやろ?"],
        [ "image": "food-712662_640.jpg", "text": "グラタンができるやん!"],
    ]
    let screen: CGRect = UIScreen.mainScreen().bounds
    var scroll: UIScrollView?
    var dots: UIPageControl?
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = backgroundColor
        scroll = UIScrollView(frame: CGRect(x: 0.0, y: 0.0, width: screen.width, height: screen.height * 0.9))
        scroll?.showsHorizontalScrollIndicator = false
        scroll?.showsVerticalScrollIndicator = false
        scroll?.pagingEnabled = true
        view.addSubview(scroll!)
        if (slides.count > 1) {
            dots = UIPageControl(frame: CGRect(x: 0.0, y: screen.height * 0.9, width: screen.width, height: screen.height * 0.05))
            dots?.numberOfPages = slides.count
            view.addSubview(dots!)
        }
        for var i = 0; i < slides.count; ++i {
            if let image = UIImage(named: slides[i]["image"]!) {
                var imageView: UIImageView = UIImageView(frame: getFrame(image.size.width, iH: image.size.height, slide: i, offset: screen.height * 0.15))
                imageView.image = image
                scroll?.addSubview(imageView)
            }
            if let text = slides[i]["text"] {
                var textView = UITextView(frame: CGRect(x: screen.width * 0.1 + CGFloat(i) * screen.width, y: screen.height * 0.75, width: screen.width * 0.8,  height: 100.0))
                textView.text = text
                textView.editable = false
                textView.selectable = false
                textView.textAlignment = NSTextAlignment.Center
                textView.font = UIFont(name: "Helvetica Neue", size: 17)
                textView.textColor = UIColor.whiteColor()
                textView.backgroundColor = UIColor.clearColor()
                scroll?.addSubview(textView)
            }
        }
        scroll?.contentSize = CGSizeMake(CGFloat(Int(screen.width) *  slides.count), screen.height * 0.5)
        scroll?.delegate = self
        dots?.addTarget(self, action: Selector("swipe:"), forControlEvents: UIControlEvents.ValueChanged)
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    func getFrame (iW: CGFloat, iH: CGFloat, slide: Int, offset: CGFloat) -> CGRect {
        var mH: CGFloat = screen.height * 0.50
        var mW: CGFloat = screen.width
        var h: CGFloat
        var w: CGFloat
        var r = iW / iH
        if (r <= 1) {
            h = min(mH, iH)
            w = h * r
        } else {
            w = min(mW, iW)
            h = w / r
        }
        return CGRectMake(
            max(0, (mW - w) / 2) + CGFloat(slide) * screen.width,
            max(0, (mH - h) / 2) + offset,
            w,
            h
        )
    }
    func swipe(sender: AnyObject) -> () {
        if let scrollView = scroll {
            let x = CGFloat(dots!.currentPage) * scrollView.frame.size.width
            scroll?.setContentOffset(CGPointMake(x, 0), animated: true)
        }
    }
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) -> () {
        let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        dots!.currentPage = Int(pageNumber)
    }
    override func prefersStatusBarHidden() -> Bool {
        return true
    }
}

Screenshots

http://www.makescreenshots.com/

高解像度のスクリーンショットを用意するだけで、iPhone4/5/6/6plusの画像と合成して、各サイズのスクリーンショットを生成してくれるツールです。

背景色を選んだり、フォントを指定して文字入れをしたりもできます。 これでさくっとストアにアップロードできますねヽ(=´▽`=)ノ

“Download Images”からダウンロードできるzipに、4つのスクリーンショットが入っています。

Color

http://www.swiftbootstrap.com/color.html

最近できたツールで、最もシンプルなツールです。

カラーピッカーで選んだ色や透明度の結果が、リアルタイムにUIColorのソースとして表示されます。

ぽちっと。

透明度も指定できます

画面上に表示されているUIColorのコードをコピペするだけで、ドンピシャその色が使えます。

UIColor(red: 60.0/255.0, green: 123.0/255.0, blue: 163.0/255.0, alpha: 0.61)
    

Michael Kuroneko

Written by Michael Kuroneko. Follow me on twitter, github.