Wikipedia風のコラ画像を自動作成してスクショを保存する(Swift)

作ったアプリの概要

名前や出身地、職業、経歴などを入力すると自動的にコラ画像を作るくだらないアプリを作って見ました。初投稿なので至らないところもあると思いますが、参考になれば幸いです。
こんな画像を作るアプリです。デザイン面でつまづいたところを中心にまとめています。

Wikicora(アップルストア）

画面の一部をスクショする方法

画面の左上からの座標と幅、高さを指定します。iPhone Xではsafeareaの広さが違うので注意が必要です。

sukusho.swift

    // サイズを規定するだけなので位置は無視される
        let rect:CGRect = CGRect(x:self.view.frame.size.width/2-120, y: 30, width: 240, height: 382)      
        var hidari = 0 
       //左からどのくらいの位置に画像があるかを説明  今回は左右中央の幅240のため
        hidari = Int(120-self.view.frame.size.width/2) 

         // 以下は定型文通り 
         UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0) 


       let context = UIGraphicsGetCurrentContext() 
      // safeareaの上から１０の位置を示す
         let top = UIApplication.shared.statusBarFrame.height+10.0 
       //引数は負となるので注意
         let aa:CGAffineTransform = CGAffineTransform(
             translationX: CGFloat(hidari),y: -top ) 

         context!.concatenate(aa) 

         view.layer.render(in: UIGraphicsGetCurrentContext()!) 

         //コンテキストから画像を取得する。 
         let image = UIGraphicsGetImageFromCurrentImageContext() 

        //コンテキストを破棄する。 
         UIGraphicsEndImageContext()
            //画像をPhoto Albumに保存する。 
         UIImageWriteToSavedPhotosAlbum(image!, nil, nil, nil) 

文字の一部の色やフォントを変える方法

よりWikipediaに近づけるにはデザインを整える必要があります。そのために核となるテキストにおいて。フルネームを太字にする、リンクの色を青にする、行間を通常より空ける、という装飾を施しました。

sukusho.swift

   //主要な文章の変数を置く　以下ではこのテキストを編集していく
 @IBOutlet weak var setumei: UILabel!
 override func viewDidLoad() { 

         super.viewDidLoad() 


         //この色合いは公式ページに記載あり
         let linkcolor:UIColor = UIColor(red: 6/256.0, green: 69/256.0, blue: 173/256.0, alpha: 1.0) 


       //何文字目を青くするか決めるためにあらかじめ、名前、ふりがな、職業の文字数を保管してある
         let lengthArray = UserDefaults.standard.object(forKey: "length") as! [Int] 

         let stringArray = UserDefaults.standard.object(forKey: "information") as! [String] 
        // 必ず一番最初にある典型的な文を型にはめ込んで表示する 

         let text = "\(stringArray[0])（\(stringArray[1])、\(stringArray[4])-）は\(stringArray[2])出身の\(stringArray[3])。\(stringArray[5])。" 



         let style = NSMutableParagraphStyle() 
         //行間を適当に指定
         style.lineSpacing = 4

         let textAttributes: [NSAttributedStringKey : Any] = [ 
             .font : UIFont.systemFont(ofSize: 11.0), 
           .paragraphStyle : style, 
        ] 
         let text2 = NSMutableAttributedString(string: text, attributes: textAttributes) 


     // リンクに値する部分を青く表示してデザインを整える 0文字目からlengthArray[0]文字を青くしている
         text2.addAttribute(.font, value:UIFont.boldSystemFont(ofSize:11), range: NSMakeRange(0, lengthArray[0])) 
         text2.addAttribute(.foregroundColor, 
                            value: linkcolor, range: NSMakeRange(lengthArray[0]+lengthArray[1]+2, 11)) 

         text2.addAttribute(.foregroundColor, 
                            value: linkcolor, range: NSMakeRange(16+lengthArray[0]+lengthArray[1], lengthArray[2])) 

         text2.addAttribute(.foregroundColor, 
                            value: linkcolor, range: NSMakeRange(19+lengthArray[0]+lengthArray[1]+lengthArray[2], lengthArray[3])) 
       //一番最後にtext2を代入する
         setumei.attributedText = text2 



     } 

そして保存した画像をTwitterに投稿する

変数imageが画像を表しているのでそれをTwitterに投稿して行きます。しかしこの方法はSwift4では非推奨のよう。

Twitter.swift

     let twitter = SLComposeViewController(forServiceType: SLServiceTypeTwitter) 

     twitter?.add(image) 
     self.present(twitter!,animated:true,completion:nil)

投稿画面はこんな感じ

まとめ

デザインで凝ったところをまとめてみました。今はまだ画像にテキストラベルをベタ張りするだけなので、これからはもうちょっと拡張していこうと思います。