【swift】イメージをサーバーから取ってきて表示させるやつをgithubで公開してみました

2018/11/18

WRITER

ロッキーカナイ

SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。

今回やること

「イメージをサーバーから取ってきて表示させるやつ」を作るぞ
　githubでソースコードを公開する前の準備
　githubでソースコードを公開するぞ
　最後に

「イメージをサーバーから取ってきて表示させるやつ」を作るぞ

ざっくりとした説明ですが、要は、非同期通信でイメージをサーバーから取得するまではインジケータをクルクルさせて、取得したら、画像を表示するよく見るアレです。

作るにあたっては、以下の機能を入れたいと思います。

一度読み込んだ画像はキャッシュする（次回から通信なしで表示できるようにする）
タイムアウトをパブリック変数にする（使う人がいじれるようにする）
取得に失敗した時に表示する画像をセットできるようにする

import UIKit

class HLURLImageView : UIImageView {
    
    // public member
    
    var timeout: TimeInterval = 10
    var indicatorDefaultWidth: CGFloat = 20.0
    let indicator = UIActivityIndicatorView()
    
    // private menber
    
    private static let imageCache = NSCache<AnyObject, AnyObject>()
    
    // public method
    
    /// loadImage
    /// Load and display images from the server.
    /// - loadImage: String of image address on server
    /// - noImageName: Image file character string at acquisition failure
    public func loadImage(urlString: String, noImageName: String? = nil) {
        
        let url = URL(string: urlString)
        if let imageFromCache = HLURLImageView.imageCache.object(forKey: urlString as AnyObject) as? UIImage {
            self.image = imageFromCache
            return
        }
        
        startIndicator()
        
        URLSession.shared.dataTask(with: url!) { (data, urlResponse, error) in
            
            DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                self.hideIndicator()
                
                if error != nil {
                    if let noImageName = noImageName {
                        self.image = UIImage(named: noImageName)
                    }
                    print("Error: \(String(describing: error))")
                    return
                }
                
                let imageToCache = UIImage(data:data!)
                self.image = imageToCache
                HLURLImageView.imageCache.setObject(imageToCache!, forKey: urlString as AnyObject)
            }
            }.resume()
    }

    // private method
    
    /// startIndicator
    /// Start animation of indicator.
    private func startIndicator() {
        indicator.style = .gray
        indicator.frame = CGRect(x: frame.size.width / 2 - indicatorDefaultWidth / 2, y: frame.size.height / 2 - indicatorDefaultWidth / 2, width: indicatorDefaultWidth, height: indicatorDefaultWidth)
        addSubview(indicator)
        indicator.startAnimating()
    }
    
    /// hideIndicator
    /// Finish the animation of the indicator.
    private func hideIndicator() {
        
        indicator.stopAnimating()
    }
}

条件を盛り込むとこんな感じになりました。

使う場合は、以下の感じで使えます。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var urlImageView: HLURLImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        urlImageView.loadImage(urlString: "https://www.~~~")
    }
}

シンプルですが、これで完成しました。

githubでソースコードを公開する前の準備

ソースコードを公開する際にどのライセンスに準ずるかを決める必要があります。この話をすると膨大になってしますので、参考サイトを紹介します。

Qiita 公開ライセンスの話

とりあえずMITライセンスにしたいと思います。

ソースコード上部に以下を追加しました。

/*
The MIT License (MIT)

Copyright (c) 2018 Takayuki Kanai

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

次にライセンスのテキストを用意するのですが、githubの場合はLicenseを選ぶチェックを入れるとLICENSE.txtが作られるのでよいのですが、自分は間違えてチェックを入れなかったので作成方法をご説明しますw。

MITライセンスの原文がこちらにありあす。

これを全文コピって、”Copyright <YEAR> <COPYRIGHT HOLDER>”の<YEAR>に現在年と<COPYRIGHT HOLDER>に名前を入れて、ファイル名をLICENSE.txtとします。

次に「このコードはなんていう名前で、こんな使い方ができて、ライセンスはこうだよ」といった内容を記載するREADME.mdファイルを作ります。これもgithub上でワンクリックで生成できますし、ローカルで追加してプッシュしてもOKです。

README.mdはMarkdown記法で記載するのですが、こちらに詳しく載ってます。

ちなみに、今回は以下のようにしてみました。

# HLURLImageView ←タイトル。かっこいい感じにしてみましょうw
Obtain and display the image from the server by asynchronous communication ←説明

### How to use ←見出し　使い方の説明
```
    @IBOutlet weak var urlImageView: HLURLImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        urlImageView.loadImage(urlString: "https://~~~")
    }
ソースコードを載せて、使い方について説明
```
 
### Supported ←見出し　サポート
Swift 4.x ←サポートバージョン

 
### License ←見出し　ライセンス
MIT: http://www.opensource.org/licenses/mit-license.php  ←ライセンスのurlを載せておくとベスト
Copyright © 2018 Takayuki Kanai