- はじめに
- 目次

はじめに

まえがき

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

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

2018年10月8日に開催された技術書典5にて頒布致しました「iOSアプリ開発 UI実装であると嬉しいレシピブック」では、UI実装においてView構造やアニメーション実装等を上手に活用して少しの工夫を施すことで実現可能なアイデアや実装例についてまとめています。また2019年7月27日に開催された技術書同人誌博覧会にて頒布致しました「iOSアプリ開発 UI実装であると嬉しいレシピブック Vol.2」では、前回の続編として更にアプリにおけるUI表現に彩りを添えるためのテクニックとしてGithubで公開されているOSSのUIライブラリを活用するアイデアや実装例についてまとめています。

このように、これまでの書籍ではUI実装のアイデアや具体的な手法についてフォーカスを当てた書籍を2冊執筆してきましたが、どうしても誌面の分量の関係等もあって見送ってしまったものもありました。本書では、Vol.1及びVol.2では惜しくも紹介ができなかったUI実装に関する実装解説を「まかない編（番外編）」として簡単でありますがまとめたものになります。また、iOS13以降で新しく登場した新機能を利用して実装したサンプルについても少しだけ触れているものもあります。

iOS13からはSwiftUI・Combine FrameWork・UICollectionViewCompositionalLayout等をはじめ、これからのUI実装を考えていく際に今から押さえておきたいトピックスもたくさんあり、ますます楽しみである反面、これまでのUIKitとの共存をはじめとして様々な課題も生まれつつあるのではないかと思います。そのような中でもUIKitを利用したUI実装に関する表現方法を学ぶことは、まだまだ意義のあることだと考えています。ですので、このタイミングで再度UIKitでの表現を活用したUI実装のサンプル解説に関する書籍を執筆することにしました。

本書では、これまでの実務の中で培ってきた知識や知見に加えて、一見するととても複雑に見えそうではあれども、実装時の少しの工夫やライブラリの有効活用をすることで実現することができるUI実装に関するサンプルを3点収録しております。

ユーザーとの直接的な接点ともなりえるUI実装の中で、アニメーション・トランジションを盛り込んだ表現や、指の動きやスクロール伴って変化する美しい表現、そして機能と調和した良いアクセントとなるUI表現とその実装手段を考えていく際に、本書が少しでもお役に立つことができれば幸いです。そして、筆者自身もさらなる表現の引き出しを増やしていくことで、表現豊かなUI実装に関しての追求と共に、UI実装を分解して紐解いていく過程の中で得られる体験や知見の共有と展開についても更に貢献できればと強く感じている次第です。

動作環境及びバージョン

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

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

macOS Big Sur 11.0.1
Xcode 12.3
Swift 5.3
CocoaPods 1.10.0

【必要な前提知識】

XcodeやSwiftに関する基本的な知識
AutoLayoutやStoryboard・Xibに関する基本的な知識
CocoaPodsの導入や活用に関する基本的な知識
iOSアプリ開発においてサードパーティー製ライブラリの導入や活用に関する基本的な知識

※ このサンプルの第3章ではnode.jsを利用した仮のAPIサーバーを準備していますが、あくまでツールとしての利用なので前述の前提知識としては特になくても大丈夫かと思います。（実際に手元でサンプルを実行する場合にはnode.jsのインストールが必要になるのでその点はご注意下さい）

サンプルに関して

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

Github: <https://github.com/fumiyasac/meals_ios_ui_recipe_showcase>
写真素材: 写真AC様

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

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

Mail: just1factory@gmail.com

第1章

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

サンプルプロジェクト名: MediaStyleInfiniteTabScroll

図1: 第1章のサンプル

第2章

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

サンプルプロジェクト名: MosaicPhotoGalleryLayouts

図2: 第2章のサンプル

第3章

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

サンプルプロジェクト名: UICollectionViewCompositionalLayoutExample

図3: 第3章のサンプル

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

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

UINavigationController左上にある戻るボタンをロングタップした際に一気に最初の画面に戻る機能への対応
URLを外部ブラウザで開く処理においてSafari以外をデフォルトブラウザに設定している場合にcanOpenURLがfalseとなる点への対応

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

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

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

// UI実装であると嬉しいレシピブック掲載サンプル変更点（iOS14対応箇所）
// 1. UINavigationController左上にある戻るボタンをロングタップした際に一気に最初の画面に戻る機能への対応
// 本書の中では、UINavigationControllerExtension.swiftに該当箇所があります。
// 戻るボタンの「戻る」テキストを削除した状態にするメソッド
func removeBackButtonText() {
    self.navigationController!.navigationBar.tintColor = UIColor.white
    if #available(iOS 14.0, *) {
        self.navigationItem.backButtonDisplayMode = .minimal
        self.navigationItem.backButtonTitle = self.navigationItem.title
    } else {
        let backButtonItem = UIBarButtonItem(
            title: "", style: .plain, target: nil, action: nil
        )
        self.navigationItem.backBarButtonItem = backButtonItem
    }
}

// 2. 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の利用（現状は挙動に問題はありませんが非推奨です。）

[*1] https://speakerdeck.com/daichikuwa0618/towards-ios-14-in-yumemi-dot-inc（戻る）

[*2] https://buildersbox.corp-sansan.com/entry/2020/12/21/110000（戻る）