まえがき

まずは本書を手に取って頂きまして、本当にありがとうございます。私は現在、主にiOSアプリ開発(使用言語はSwift/Objective-C)を行っており、特にその中でもアプリのUI実装に関する部分のことに携わる機会が多くありました。

また業務以外の場所でも、僭越ながら皆様の前で登壇する機会を頂きその中でUI実装に関することをお話したり、TIPSを投稿する等の活動をこれまでも行ってきたり、勉強会の中で同業のエンジニアの方々との交流の中で「Web制作ではUI実装に関する紹介書籍があるならば、もしかしたらiOSアプリ開発においてもUI実装に関する書籍の需要はあるのではないか?」と感じることもありました。さらには筆者のキャリアのはじめがデザイナーから始まり、そこからWebエンジニアを経てモバイルアプリエンジニアになった経緯もあったので、今でもUI実装に関する部分に一番関心が高い部分です。

iOSアプリのUIに関しては、「Human Interface Guidelines」というiOSアプリ開発において極めて大切なドキュメントがありますが、アプリ個々のUIを見てみるとOSのバージョンアップやトレンドの変化はもちろん、プロダクトのデザインによってそれぞれの構成や実装方法、選択しているアーキテクチャーによっても変わってくる部分かと思います。

その点も踏まえ、本書ではいくつかのまとまったサンプル実装を例にUI構築をする上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。一手間を加えた実装を加えることやサードパーティーのライブラリを上手に活用することで、既存のUIに素敵な彩りを添えることで実現可能ものもあります。本書で紹介しているものは筆者が業務でのアプリ開発で利用したTIPSや勉強会での登壇の際に作成したサンプルで利用したものも掲載しています。

基本的な理解ができるようになって、これからiOSアプリを本格的に開発していこうと考えている方や、UI実装や表現に関する部分にさらなる磨きをかけていきたい方にとって本書が少しでもお役に立つことができれば幸いです。そして、筆者自身も現状に甘んじることなく自分の開発技術や表現の幅を広げる努力を惜しまずに歩み続けていこうと思う所存です。

動作環境及びバージョン

本書の内容及び紹介しているサンプルのコードに使用したバージョンにつきましては、下記の通りになります。またXcodeやSwiftのバージョンが上がった際にはGithubリポジトリ等、何かしらの形でお伝えしていく予定です。

掲載しているサンプルに関しては、2020.12.26(Ver1.3改訂時)のものになります。

  • macOS Big Sur 11.0.1
  • Xcode 12.3
  • Swift 5.3
  • CocoaPods 1.10.0

※ サンプルで利用しているライブラリの中にはSwift4.2のまま利用しているものがあります。

【必要な前提知識】

  • XcodeやSwiftに関する基本的な知識
  • AutoLayoutやStoryboard・Xibに関する基本的な知識

サンプルに関して

書籍で紹介しているサンプルのリポジトリは下記になります。

誤表記などに関するお問い合わせに関して

本書で掲載している内容につきましては、誤りがないように細心の注意を払っておりますが、もし訂正等がございましたら下記にありますメールアドレスや、GithubのissueやTwitter等を通してでも構いませんので、ご一報頂けますと幸いです。

  • Mail: just1factory@gmail.com

サンプルのURLと見た目

第1章

サンプル実装の難易度: ★★★★☆☆☆☆☆☆

  • サンプルプロジェクト名: MenuContentsExample
第1章のサンプル

図1: 第1章のサンプル

第2章

サンプル実装の難易度: ★★★★★★★★★☆

  • サンプルプロジェクト名: InteractiveUIExample
第2章のサンプル

図2: 第2章のサンプル

第3章

サンプル実装の難易度: ★★★★★★★☆☆☆

  • サンプルプロジェクト名: LikeTinderExample
第3章のサンプル

図3: 第3章のサンプル

第4章

サンプル実装の難易度: ★★★★★★☆☆☆☆

  • サンプルプロジェクト名: ReservationFormExample
第4章のサンプル

図4: 第4章のサンプル

Podfileの記載

第2章・第4章で紹介しているサンプルで利用しているライブラリ及びPodfileの記載はこちらになります。

リスト1: Podfile(第2章)

target 'InteractiveUIExample' do
  use_frameworks!

  # Pods for InteractiveUIExample
  pod 'Cosmos'
  pod 'ActiveLabel'
  pod 'FontAwesome.swift'
end

リスト2: Podfile(第4章)

target 'ReservationFormExample' do
  use_frameworks!

  # Pods for ReservationFormExample
  pod 'KYNavigationProgress'
  pod 'Popover'
  pod 'FontAwesome.swift'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    # KYNavigationProgressのSwiftバージョンは4.0へ固定
    if ['KYNavigationProgress'].include? target.name
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.0'
      end
    end
    # PopoverのSwiftバージョンは4.2へ固定
    if ['Popover'].include? target.name
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.2'
      end
    end
  end
end

iOS14から利用可能な新機能や仕様変更に関する補足事項

本書ではiOS14から追加されたUI実装に関する新機能や仕様変更のうち、

  • URLを外部ブラウザで開く処理においてSafari以外をデフォルトブラウザに設定している場合にcanOpenURLがfalseとなる点への対応

に関しては対応しております。

該当箇所に適用するコード例については、「リスト3」の様な形となります。

リスト3: iOS14からの新機能対応部分に関するコード解説

// URLを外部ブラウザで開く処理においてSafari以外をデフォルトブラウザに設定している場合にcanOpenURLがfalseとなる点への対応
// 本書の中では、当該処理に関する部分は下記の様な形で実装しています。
private func showWebPage() {
    if let url = URL(string: "http://www.example.com/") {
        if UIApplication.shared.canOpenURL(url) {
            UIApplication.shared.open(url, options: [:])
        } else {
            showAlertWith(completionHandler: nil)
        }
    }
}

// MEMO: iOS14からSafari以外のブラウザをデフォルトに変更することが可能です。
// その場合には「LSApplicationQueriesSchemes」の設定をしないとcanOpenURLでfalseになってしまいます。
// ※ 詳細はInfo.plistを参照
// 確認したSafari以外のブラウザは下記の通りになります。
// 検証ブラウザ: Google Chrome / Opera / Microsoft Edge / Firefox
private func showAlertWith(completionHandler: (() -> ())? = nil) {
    let alert = UIAlertController(
        title: "リンクを開くことができませんでした。",
        message: "アプリ内部の設定が誤っている可能性があります。",
        preferredStyle: .alert
    )
    let okAction = UIAlertAction(title: "OK", style: .default, handler: { _ in
        completionHandler?()
    })
    alert.addAction(okAction)
    self.present(alert, animated: true, completion: nil)
}

iOS14以降で利用可能なアップデートにつきましては、UICollectionViewに関するレイアウト表現及び実装に関するアップデートやUIImagePickerControllerにとって変わるPHPickerViewControllerといった新しいAPIの登場による大きなアップデートだけではなく、前述したコードの様に頻出な表現に関する細かな部分に関するアップデートもありました。掲載しているサンプルコード内での対応についてはUI実装や表現上最低限の対応としていますが、更に細かな*1こちらの資料や *2こちらの技術ブログ記事等に掲載している内容を参考にしながら変更点の概要と対処方法を知っておくとより理解が深まるように思います。

今回例示した資料や技術ブログの他にも、様々なiOS14から利用できる新機能やバージョンアップ時のノウハウをまとめてくださっているものもたくさんありますので、多くの情報に触れながら機能開発を進めていく様にすると良いではないかと感じております。

サンプルにおけるiOS13以降の機能や変更に未対応の部分

本サンプルでは下記の部分に関しては、今回は対応していませんのでご注意下さい。

  • DarkModeの無効化(現在は強制的にLightModeにしています。)
  • SceneDelegateの利用(現状は挙動に問題はありませんが非推奨です。)

目次

まえがき

動作環境及びバージョン
サンプルに関して
誤表記などに関するお問い合わせに関して
サンプルのURLと見た目
  • 第1章
  • 第2章
  • 第3章
  • 第4章
  • Podfileの記載
  • iOS14から利用可能な新機能や仕様変更に関する補足事項
  • サンプルにおけるiOS13以降の機能や変更に未対応の部分

第1章 サイドナビゲーション型のUI

1.1 ContainerViewに関するおさらい
1.2 ContainerViewの活用ポイント
1.3 スライドするメニュー表示の概要と実装
1.4 StoryBoard構成とコードの解説
  • サイドナビゲーション部分の実装
  • コンテンツの開閉に関する処理
  • 子から親のViewControllerを操作する
1.5 サイドナビゲーション実装における別解
1.6 コーヒーブレイク

第2章 写真を拡大する画面遷移UI

2.1 View実装に関するTips集
  • Xibを使用した部品単位のView分割
  • UIScrollViewとUIStackViewの合わせ技
  • UICollectionViewを扱いやすくする
  • その他本書で利用しているExtension
2.2 使用したライブラリのご紹介
  • ActiveLabel.swiftの紹介
  • Cosmosの紹介
  • Fontawesome.swiftの紹介
2.3 カスタムトランジションの基本実装
  • まずは押さえておきたい基本のポイント
  • Present/Dismissの遷移をカスタマイズする
  • Push/Popの遷移をカスタマイズする
2.4 画面遷移前の一覧画面の実装
  • ヘッダー部分の実装における注意点
  • セルに配置した画像情報を取得する
2.5 画面遷移後の詳細画面の実装
  • サムネイル画像の視差効果表現
  • ヘッダー部分のアニメーション表現
2.6 本サンプルにおける画面遷移表現のまとめ
2.7 コーヒーブレイク

第3章 Tinder風のUI

3.1 実装する上でのポイント
3.2 処理の橋渡しを行うプロトコル実装
3.3 画面に追加した際の演出
3.4 カード状のViewとUIPanGestureRecognizer
  • UIPanGestureRecognizer内の処理概要
  • UIPanGestureRecognizerの処理で利用するメソッド
3.5 UIViewControllerとの連携部分の実装
  • 表示データとの連結部分の処理
  • カード状のViewに定義したプロトコルとの連携
3.6 UIScrollViewを利用した画像表示の実装
3.7 コーヒーブレイク

第4章 入力フォームの実装例

4.1 入力に関するView部品の実装
  • フォームの入力や選択用のView部品
  • 個数を入力するためのView部品
  • UITableViewを扱いやすくする
4.2 使用したライブラリのご紹介
  • KYNavigationProgressのご紹介
  • Popoverの紹介
4.3 UITableViewを利用した表現Tipsの紹介
  • アコーディオン型の開閉する表現を実装する
4.4 入力フォームの部分に関する画面実装
  • UIPageViewControllerとの組み合わせ
  • キーボードの操作を考慮した画面構成
4.5 コーヒーブレイク

あとがき

今回の執筆に当たって
筆者プロフィール
試し読みはここまでです。
この続きは、製品版でお楽しみください。