まずは本書を手に取って頂きまして、本当にありがとうございます。私は現在、主に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改訂時)のものになります。
※ サンプルで利用しているライブラリの中にはSwift4.2のまま利用しているものがあります。
【必要な前提知識】
書籍で紹介しているサンプルのリポジトリは下記になります。
本書で掲載している内容につきましては、誤りがないように細心の注意を払っておりますが、もし訂正等がございましたら下記にありますメールアドレスや、GithubのissueやTwitter等を通してでも構いませんので、ご一報頂けますと幸いです。
第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から追加されたUI実装に関する新機能や仕様変更のうち、
に関しては対応しております。
該当箇所に適用するコード例については、「リスト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から利用できる新機能やバージョンアップ時のノウハウをまとめてくださっているものもたくさんありますので、多くの情報に触れながら機能開発を進めていく様にすると良いではないかと感じております。
まえがき
第1章 サイドナビゲーション型のUI
第2章 写真を拡大する画面遷移UI
第3章 Tinder風のUI
第4章 入力フォームの実装例
あとがき