SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Swift 4で最初に知っておきたい3つのポイント

Swift 4の外部ライブラリを利用して機能を実装する

Swift 4で最初に知っておきたい3つのポイント 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ライブラリの機能を利用する/拡張する【Swift 4】

 前節までの手順で、プロジェクトに組み込んだライブラリPMSuperButtonを実際に利用してみます。ライブラリの機能をそのまま利用する方法と、ライブラリの機能を拡張して利用する方法の2通りについて、例を挙げて説明します。

ライブラリの機能を利用する

 CocoaPodsでインストールしたライブラリ内のクラスは、UIlkitやプロジェクト内に存在するクラスと同様に扱うことができます。例えば、次のようにストーリーボードでライブラリ内のUIを画面に配置することも可能です。サンプルでは、PMSuperButtonオブジェクトを画面に配置しています。

PMSuperButtonオブジェクトを画面に配置
PMSuperButtonオブジェクトを画面に配置

 PMSuperButtonクラスはUIButtonクラスのサブクラスなので、ストーリーボードではUIButtonオブジェクトを配置した後にタブでクラスをPMSuperButtonクラスに切り替えて配置しています。

ストーリーボードでのクラスの切り替え
ストーリーボードでのクラスの切り替え

 PMSuperButtonクラス内のプロパティも、ストーリーボード上で値を指定できます。

PMSuperButtonクラス内のプロパティ
PMSuperButtonクラス内のプロパティ

 ストーリーボードでは特別に意識しなくて構いませんが、プログラムからライブラリを利用する場合にはimport文が必要です。PMSuperButtonオブジェクトを配置する画面では、リスト6の通りimport文でライブラリPMSuperButtonを利用することを宣言します。

リスト6 ViewController.swift
import UIKit
import PMSuperButton

class ViewController: UIViewController {

    @IBOutlet weak var button: PMSuperButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        button.touchUpInside{              // ---------------(1)
            print("ボタンを押しました")
        }
    }
# 後略
}

 import文を記述した後は、通常のクラスと同様に利用できます。サンプルでは、PMSuperButtonクラスのtouchUpInsideメソッドを利用してボタンが押された際の処理を記述しています(1)。

ライブラリを拡張する

 ライブラリを導入してアプリの機能を拡充するだけでなく、ライブラリ内のクラスをさらにカスタマイズしてオリジナルの機能を作成することや、独立したクラスとして定義したい場合もあります。自分で作成したクラスの場合は、そのままクラスのソースコードに記述を追加すればさらなる機能を作成することは可能です。ですが、CocoaPodsでインストールしたライブラリの場合は、外部から導入したものなのでソースコードを変更することはできません。サブクラスやextensionを利用して機能を拡張します。

 連載第1回で説明した通り、Swift 4ではprivateで定義されたプロパティやメソッドもextension内で利用できるようになったため、ライブラリの拡張もしやすくなっています。

 サンプルでは次のようにボタンがハイライトした場合に、バウンドする機能の実装を考えてみます。

ボタンのハイライト時にバウンドするサンプル
ボタンのハイライト時にバウンドするサンプル

 PMSuperButtonクラスの親クラスのUIButtonクラスが継承している、UIControlクラスのisHilightedプロパティの値がtrueになった際の処理として、ボタンがバウンドするアニメーションを入れます。プロパティの値が変更された処理に関しては連載第4回を参照してください。

 最初に機能を拡張するためのクラスを定義します。次のように「SampleButton」の名前でPMSuperButtonクラスのサブクラスを宣言します。

リスト7 SampleButton.swift
import UIKit
import PMSuperButton

class SampleButton: PMSuperButton {
  
}

 ライブラリのクラスを継承してサブクラスを作成する際に特別な処理は必要ありません。ただし、ライブラリを利用するのでimport文を忘れないようにしてください。isHilightedプロパティの値の変化に伴うアニメーションを次のように指定します。

リスト SampleButton.swift
class SampleButton: PMSuperButton {
  
  override open var isHighlighted: Bool {
    didSet {
      if !isHighlighted { return }  // ハイライトされた場合のみアニメーションを実行
      
      self.transform = CGAffineTransform(scaleX: 0.4, y: 0.4)  // スケールを指定   // ------(1)
      self.alpha = 0.0
      UIView.animate(withDuration: 0.2,  // ------(2)
              delay: 0,
              animations: {
                self.alpha = 1.0
              },
              completion: { Void in
                UIView.animate(withDuration: 2.0,  // ------(3)
                         delay: 0,
                         usingSpringWithDamping: CGFloat(0.20),     // 振動の幅
                         initialSpringVelocity: CGFloat(6.0),                // 速度
                         options: UIViewAnimationOptions.allowUserInteraction,  // アニメーション中に操作は可能に
                         animations: {
                          self.transform = CGAffineTransform.identity  // 恒等変換
                        },
                         completion: nil
                )
              }
      )
    }
  }
}

 ボタンに適応するアニメーションに関しては、遅延させてアニメーションを実行するanimate(withDuration:animations:completion:)メソッドと、バネ風のアニメーションを行うanimate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)メソッドを組み合わせて作成しています。

 最初にボタンの縦横のサイズを0.4倍に縮小し、alphaを0.0にして不可視化しています(1)。その後、0.2秒後に可視化し(2)、バネ風のアニメーションに進みます(3)。バネ風のアニメーションは2秒で実行し、振動の幅/速度/オプション/変換の詳細に関してそれぞれ値を指定します。アニメーションに関しては、値の組み合わせ次第で思わぬ動きになることもあるので、実際にアプリを実行しながら確認してください。

 SampleButtonクラスを作成した後は、前項と同様にストーリーボード上でSampleButtonオブジェクトを画面に配置します。

SampleButtonオブジェクトを画面に配置
SampleButtonオブジェクトを画面に配置

 サンプルを実行すると、節の冒頭の画像のようにボタンがバウンドする動きが確認できます。

まとめ

 今回のサンプルでは、一般に公開されているライブラリをアプリの中で利用し、機能を実装する方法について説明しました。外部のライブラリを利用して機能を作成することで、開発者自身が作成することの難しい高度な機能を、比較的簡単にアプリに実装できます。GitHub上では、Swift 4に対応した高度なライブラリが日々公開されているので、アプリを開発する際にはぜひ使ってみてください。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Swift 4で最初に知っておきたい3つのポイント連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 片渕 彼富(カタフチ カノトミ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10677 2018/03/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング