Submit Search
Upload
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
•
1 like
•
843 views
Fumiya Sakai
Follow
【オンライン開催】YUMEMI.swift #7 ~あつまれルーキーの森~での登壇資料になります。 https://yumemi.connpass.com/event/172733/
Read less
Read more
Technology
Report
Share
Report
Share
1 of 26
Download Now
Download to read offline
Recommended
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
Fumiya Sakai
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
Fumiya Sakai
2022年の抱負とここ数年続けてきたインプット
2022年の抱負とここ数年続けてきたインプット
Fumiya Sakai
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
Fumiya Sakai
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
Fumiya Sakai
最近の業務やAndroid関連のインプットと振り返り
最近の業務やAndroid関連のインプットと振り返り
Fumiya Sakai
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
More Related Content
What's hot
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
Fumiya Sakai
少しずつキャッチアップしていくAndroidアプリ開発
少しずつキャッチアップしていくAndroidアプリ開発
Fumiya Sakai
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
Fumiya Sakai
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
Fumiya Sakai
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
Fumiya Sakai
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
Fumiya Sakai
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)
Fumiya Sakai
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ
Fumiya Sakai
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
Fumiya Sakai
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
Fumiya Sakai
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
Fumiya Sakai
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
Fumiya Sakai
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
Fumiya Sakai
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
Fumiya Sakai
Swift勉強会2
Swift勉強会2
Hikari Yanagihara
What's hot
(20)
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
少しずつキャッチアップしていくAndroidアプリ開発
少しずつキャッチアップしていくAndroidアプリ開発
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
Swift勉強会2
Swift勉強会2
Similar to iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
Fumiya Sakai
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Fumiya Sakai
あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
Fumiya Sakai
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Akira Iwaya
Go言語で色々試行錯誤して フレームワークもどきを作ってみた話
Go言語で色々試行錯誤して フレームワークもどきを作ってみた話
Fumiya Sakai
Adobe DPSで電子書籍アプリを作ってApp Storeで販売しよう
Adobe DPSで電子書籍アプリを作ってApp Storeで販売しよう
Takashi Oonishi
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
20131005 cocoa関西
20131005 cocoa関西
Yosuke Uno
Uicollectionview
Uicollectionview
towaki777
Flex入門
Flex入門
Shinjiro Watanabe
APIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjp
Takeshi Komiya
使うっきゃない!iOS9で楽になったAuto Layout!
使うっきゃない!iOS9で楽になったAuto Layout!
SatoTakeshi
使うっきゃない!iOS9で楽になったAuto Layout!
使うっきゃない!iOS9で楽になったAuto Layout!
SatoTakeshi
OpenCV on mobile
OpenCV on mobile
Daisuke Yamashita
サーバーレスWebアプリケーションを作ろう~AWSと比べてみる~
サーバーレスWebアプリケーションを作ろう~AWSと比べてみる~
拓将 平林
UIを作る際にライブラリにする? それともDIYする?の切り分け(僕の見解)
UIを作る際にライブラリにする? それともDIYする?の切り分け(僕の見解)
Fumiya Sakai
Similar to iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
(16)
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Go言語で色々試行錯誤して フレームワークもどきを作ってみた話
Go言語で色々試行錯誤して フレームワークもどきを作ってみた話
Adobe DPSで電子書籍アプリを作ってApp Storeで販売しよう
Adobe DPSで電子書籍アプリを作ってApp Storeで販売しよう
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
20131005 cocoa関西
20131005 cocoa関西
Uicollectionview
Uicollectionview
Flex入門
Flex入門
APIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjp
使うっきゃない!iOS9で楽になったAuto Layout!
使うっきゃない!iOS9で楽になったAuto Layout!
使うっきゃない!iOS9で楽になったAuto Layout!
使うっきゃない!iOS9で楽になったAuto Layout!
OpenCV on mobile
OpenCV on mobile
サーバーレスWebアプリケーションを作ろう~AWSと比べてみる~
サーバーレスWebアプリケーションを作ろう~AWSと比べてみる~
UIを作る際にライブラリにする? それともDIYする?の切り分け(僕の見解)
UIを作る際にライブラリにする? それともDIYする?の切り分け(僕の見解)
More from Fumiya Sakai
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Fumiya Sakai
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
Fumiya Sakai
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
Fumiya Sakai
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
Fumiya Sakai
Hint of a little ingenuity about UI.
Hint of a little ingenuity about UI.
Fumiya Sakai
書籍執筆からの今後に向けてのロードマップ
書籍執筆からの今後に向けてのロードマップ
Fumiya Sakai
ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
Fumiya Sakai
More from Fumiya Sakai
(8)
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
Hint of a little ingenuity about UI.
Hint of a little ingenuity about UI.
書籍執筆からの今後に向けてのロードマップ
書籍執筆からの今後に向けてのロードマップ
ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
Recently uploaded
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
Recently uploaded
(11)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
2024 03 CTEA
2024 03 CTEA
2024 04 minnanoito
2024 04 minnanoito
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
1.
iOSアプリ開発で意識すると役立ちそうな 「つなぎ目」の部分について YUMEMI.swift #7 @ オンライン 2020/05/15 Fumiya Sakai
2.
自己紹介 ・Fumiya Sakai ・Freelance iOS Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now
3.
iOSのUI実装本を執筆しています!(新刊構想中…) 少しの工夫で実現できるTIPS集 ライブラリ表現の活用集 書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。
4.
技術書典8(応援祭)で電子版だけ頒布した書籍紹介 前回及び前々回に頒布したものの中で書籍に載せきれなかったものを紹介 第1章: メディアアプリ型のUI 第2章: 構造が複雑な写真表示UI 記事一覧を無限スクロールする様な形のアプリ UIを一覧/詳細表示を簡素化した実装を紹介。 現在はBoothにて販売中です! https://booth.pm/ja/items/1835468 ¥1,000 - iOSアプリ開発「UI実装であると嬉しいレシピブック まかない編」 サンプルコードはこちら: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase 第3章: Combine + UICollectionViewCompositionalLayout タイル状のフォトギャラリーや一覧表示型のア プリUIでライブラリを活用した実装を紹介。 実務でも利用&考察したもの 特に第1章と第2章の内容に関し ては、実際に相談されたり、実 装アイデアとして活用する機会 があったものになります。
5.
今回の発表における「つなぎ目」とは? iOSアプリを実装する上での「つなぎ目」という言葉が示す部分の例 (1) SwiftやXcodeで実現する以外の部分とつなげるための実装が必要となる部分 ⭐ バックエンド側のAPI通信に関わる部分紹介する具体例: (2) 実現するために結節点となる実装が必要となる部分 ⭐ 少し複雑になりそうなUI実装に関わる部分紹介する具体例: これ以外にももっと細かく挙げていけばたくさんありますが、本発表ではこの3つに関して解説できればと思います。 (3) iOSアプリ開発をする上で必要な周辺知識の部分 ⭐
Push通知関連の知識に関わる部分紹介する具体例:
6.
何故に「つなぎ目」の部分を意識すると良いのか? 技術要件を満たすと同時に関係するセクションとの円滑なやり取りのため ビジネスサイドからの 要望の実現可否 iOSアプリに限らず昨今の高機能化や深くプロダクトに携わる中で必要な知識や知見は増えていく。 様々な場面でiOSアプリを開発する上で「つなぎ目」となる部分の知識や知見の大切さを感じるタイミングはあるはず。 📱 アプリ利用ユーザーからの お問い合わせの原因調査 Web / Android 等の他deviceと 比べた時の違いの見極め デザインとの兼ね合いや Animation / Interaction バックエンド側で提供している API通信処理との連携対応 内部アーキテクチャや継続的 なデリバリー環境の整備 高機能化・複雑化 機能開発・改善・保守 iOS App
7.
(1) SwiftやXcodeで実現する以外の部分と つなげるための実装が必要となる部分 バックエンド側のAPI通信との「つなぎ目」の事例紹介
8.
API通信との「つなぎ目」となる部分の実装(1) スクロールの最下部に到達した際に次の表示要素を読み込む場合 (1) has_next_page: Bool → 次ページが取得可否 (2) current_page: Int → 取得データのページ番号 // MEMO:
NSCollectionLayoutSectionのScrollではUIScrollViewDelegateは呼ばれない func scrollViewDidScroll(_ scrollView: UIScrollView) { // MEMO: UIRefreshControl表示時は以降の処理を行わない if mainRefrashControl.isRefreshing { return } // MEMO: UIScrollViewが一番下の状態に達した時にAPIリクエストを実行する if scrollView.contentOffset.y + scrollView.frame.size.height > scrollView.contentSize.height { viewModel.inputs.fetchPhotoTrigger.send() } } @Query(value = "SELECT * FROM articles ORDER BY id DESC LIMIT :limit OFFSET :offset" , nativeQuery = true) UIScrollViewDelegate & UIRefreshControlを利用したハンドリングiOS: paginationを伴ったデータの取得Backend: レスポンスのJSONに一覧データと一緒に必要なもの
9.
API通信との「つなぎ目」となる部分の実装(2) 画像サムネイルの比率に合わせてセルの高さが変化するMaisonryLayout 生成時にModel内に比率を 持つ構成にしておき、レ イアウト生成時に適用。 ●●●●●●●●●●●●●● ●●●●●● △△△△△△△△△△△△△△ △△△△△… 2行固定 2行固定 写真の 縦横比に 合わせる (1) データを表示するためのAPIレスポンス内に写真の縦横比を計算す るための値を持っておく。 (2) NSCollectionLayoutSectionを作成する処理を実行する際にに表示 用データを利用した写真の縦横比を基く高さ計算ロジックを仕込んで おく。 { "id": 1, “title":
"タイトルが入ります。", "summary": "概要が入ります。", "image": { "url": "...(画像のURL)...", "width": 425, "height": 640 }, "gift": { "flag": false, "price": null } } セルに表示するJSONデータの抜粋 処理のポイント 補足: レイアウト構築時に画像 から縦横比計算するとパ フォーマンスに難あり。
10.
前述したサンプルの紹介及び活用しているもの 最低限のMasonryLayoutをiOS13〜のトピックスを用いて実装したもの 利用している技術 Mock用ツール ⭐ サンプルリポジトリ: https://github.com/fumiyasac/DiffableDataSourceExample ・MVVM Architecture ・UICollectionViewCompositionalLayout ・Combine Framework ・NSDiffableDataSource ・json-server API通信のMock & 正常系Check API通信部分の振る舞いを再現する
11.
API通信に関するやり取りを効率化するための工夫 Mockツールの活用を採用したり、Swagger等を活用する方針も良さそう 例. Postman https://bit.ly/3cpbqas APIの開発がむちゃくちゃ捗る「Postman」の使い方 例. GoDoc + Swagger https://github.com/swaggo/swag Swag (API定義の整理) ⭐ Go & Swaggerのサンプルリポジトリ: https://github.com/fumiyasac/SampleApiOfGo どちらの担当とする方が運用しやすいか? デザインや構造としての負担が少ないか? 等を考える材料となるかを考えると良い
12.
(2) 実現するために結節点となる実装が必要となる部分 UI実装における「つなぎ目」の事例紹介
13.
デザインから紐解ける疑問点や気づきをまとめる 実装の際に気をつけるべき点を洗い出しておけば相談もしやすくなる ・小さい画面でも表示できるようにUIScrollViewを利用する デザインを見た際に気をつけられそうな部分 さらにもう一段「深く読んでみて」気をつけられそうな部分 ・フォーム要素の部分に入れる文言のうち高さ可変になりえる部分がある ・キーボードが表示されている時に表示要素が隠れないようにする ・パスワードの表示と非表示が切り替えることができる ・入力部分は1つのViewに切り出して使いまわせるようにできないか? ・利用規約 / プライバシーポリシーは外部リンクまたはアプリ内か? ・エラーメッセージ表示のタイミングは入力中に表示する形か? ・キーボードを閉じるのは表示中にUITaxtField以外のタップ時した時か? ・サインアップボタンを有効にするのは全ての値が正しい時か?
14.
平素の業務で利用しているものを深く知る ここではUIライブラリ:SnapKitでの例を紹介します View同士の親子関係を利用してAutoLayoutを付与… 親View … 子View 親Viewの中に子ViewをaddSubViewで追加して制約を付与 ① GUIよりもViewの重なり方には注意する。 SnapKitレイアウト概論(1): GUIを利用しないAutoLayoutに慣れて頂く 10 24 contentView.addSubview(childView) childView.snp.makeConstraints
{ make in make.top.equalToSuperview().offset(10.0) make.right.equalToSuperview().offset(24.0) make.left.equalToSuperview().offset(24.0) make.bottom.equalToSuperview().offset(10.0) } 任意のViewに対して、上下左右の AutoLayout制約を付与する場合の実装 パターン 24 10 CenterX CenterY 200 280 contentView.addSubview(childView) childView.snp.makeConstraints { make in make.centerX.equalToSuperview() make.centerY.equalToSuperview() make.height.equalTo(200.0) make.width.equalTo(280.0) } 任意のViewに対して、 中央寄せの位置関係と幅・高さの AutoLayout制約を付与する場合の 実装パターン 全ての制約をコードで付与する形なのでGitで の差分が見やすい等のメリットがある
15.
平素の業務で利用しているものを深く知る ここではUIライブラリ:SnapKitでの例を紹介します View同士の親子関係を利用してAutoLayoutを付与… 親View … 子View 親Viewの中に子ViewをaddSubViewで追加して制約を付与 ② Animation時は実装がつらい場合がある。 SnapKitレイアウト概論(2): レイアウトを組み立てる上で頻出の表現 SnapKitで付与したAutoLayout制 約に対してアニメーションを実行 する場合 移動前 移動後 self.layoutIfNeeded() self.targetConstraint1?.activate() self.targetConstraint2?.deactivate() 予め決めておいた制約値を適用・除外する UIView.animateメソッドの中で制約の適用を実行 UIStackViewを利用した配置について (SnapKitとは直接関係はないがよく 利用する部分)Child 2 Child 1 contentsStackView.addArrangedSubview(contentView1) contentsStackView.addArrangedSubview(contentView2) contentView1.removeFromSuperview() contentView2.removeFromSuperview() UIStackViewの中に別途配置したView要素を追加する View要素をUIStackViewから削除する 制約の変更だけでは困難なアニメーションの場 合には、ライフサイクルを活用
16.
ライブラリを利用するか?自前で作るか?の選択 自前で実装する場合の方針を理解しながらライブラリを上手に活用する https://github.com/zenangst/Blueprints ⭐ Blueprints: https://github.com/rechsteiner/Parchment ⭐ Parchment: iOS13〜のUICollectionViewCompositionalLayoutを 利用する、ないしはUICollectionViewLayoutを継承 したレイアウト用のクラスを利用する方法となる。 自前で実装する場合の方針 タブ下のコンテンツを表示するためのエリアに関し てはUIPageViewControllerを利用する。タブ表示部 分はUICollectionViewやUIScrollViewを利用する。 自前で実装する場合の方針
17.
複雑なView構造を考えていく場合の例 満たすべき理想形やデザインから読み取れる情報も基にして決めていく どの方針を採用するか? 実際の構造事例 単一のUICollectionViewで実装 ・UICollectionViewCompositionalLayout ・UICollectionViewCellに別画面を表示 ・UIScrollView内にContainerViewを表示 画面を分割して実装 ⭐ デザインから紐解いた仮説 ・スクロール最下部到達時の読み込み有無 ・PullToRefreshの有無と更新対象範囲 実際の理想形から構造を考えていく
18.
① ② ③ ④ ⑤ ⑥ ① ③ ⑤ ② ④ ⑥ 試してみる・作ってみる経験の中で得られるもの UICollectionViewCompositionalLayoutを使っても難しそうなレイアウト例 自分なりに考察してみる UICollectionViewCompositionalLayoutを利用しても実 現がしにくい場合はどんな時か? ・タイマーで切り替えるカルーセル型のUI構築時 ・セルの変形処理やアニメーション処理をセルの スワイプ実行時に付与する必要なUI構築時 ・無限循環型のスクロールは必要なUI構築時 ⭐ 試した物の積み重ねが実務で役に立つことがある 簡単でも良いので自分で試した経験や知見を大切に! この並び方の実装であれば 比較的簡単に実現可能。 この並び方の実装であれば 難しそうな気がした。 UICollectionViewLayoutで作る方針でも良さそう
19.
(3) iOSアプリ開発をする上で必要な周辺知識の部分 Push通知まわりの知識に関する「つなぎ目」の事例紹介
20.
Firebaseを利用したPush通知基盤例 Firebase Cloud Messagingとの連携やデバイストークンまわりの処理がポイント Server アプリ起動時における処理の流れ ① registerRemoteNotification()実行 ※この部分はAppDelegate.swiftで実施 (MessagingDelegate) ② デバイストークンを受け取る ③ デバイストークンをサーバーへ登録する プッシュ通知許可 この時に表示されるリモートプッシュ通 知の許可ダイアログはFCMに対して実行す るもの。 補足: ※①〜③は起動時に毎回実施される処理 DBにUserのに紐づ くDeviceTokenを 保持しておく。 初回起動時 GoogleAPIを介してFCMへ Push通知送信処理を実行 📱 Push通知を受信する 後は内容に応じた処理を実施 APIsのサービスアカウン トキーの作成及び管理 送信処理 実行 iOS App
21.
AWSを利用したPush通知基盤例 Amazon SNS & AWS Lambdaを利用した場合のPush基盤設計の例です ※この部分はAppDelegate.swiftで実施 (UNUserNotificationCenterDelegate) 初回起動時 ①Push通知で送る内容 を組み立ててLambdaを 実行 ②SNSの処理を実行して APNsへPush通知を送信 📱 APNs 送信処理実行 Push通知を受信する 後は内容に応じた処理を実施 iOS App アプリ起動時における処理の流れ ① registerRemoteNotification()実行 ② デバイストークンを受け取る プッシュ通知許可 この時に表示されるリモートプッシュ通 知の許可ダイアログはFCMに対して実行す るもの。 補足: ③ デバイストークンをサーバーへ登録する ※①〜③は起動時に毎回実施される処理 Server DBにUserのに紐づ くDeviceTokenを 保持しておく。
22.
Push通知の証明書に関連する知識の整理 Push通知の証明書まわりの知識はなかなか整理する大変さを感じる部分 例. p8ファイルとp12ファイルに関する違いを整理する ・AppleDeveloperでadmin権限が必要 ・1度作成してしまえば有効期限は無制限 ・最大2個までしか作成ができない ・1つのp8ファイルで複数のAppに対応が可能 Firebase Cloud Messagingでの設定 ・p8ファイルをUpload p8ファイル作成時に取得する TeamIDとKayIDを記載する ⭐ 設定手順: https://qiita.com/matsuyoro/items/77408e5d09ef00be8577 ・1年の有効期限があるので都度更新が必要 ・APNs証明書のキーチェーン登録等の付随作業がちょっと大変 Amazon SNSでの設定 ・p8ファイルは非対応 p8 p12 開発用&本番用2つのp12ファ イルが必要になる ⭐
設定手順: https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb ※UNUserNotificationCenterDelegate ※MessagingDelegate (iOS10~)
23.
まとめ 実装や周辺知識における「つなぎ目」の意識でより仕事がしやすくなる。 1. インプットとアウトプットを自分の言葉でまとめて試してみるのが初めの1歩: 様々な知識や最初はなかなか難しく感じてしまう部分があるかもしれない。 業務以外で少しずつできそうな所からまずは試して、ある程度の所まで形にして、その道のりをまとめると良いと思います。 2. 技術面でも自分が得た知識や知見を可視化する: 自分にとっては些細に感じそうな部分ではあっても、他人からみるとそうではないことがある。 僕が意識的にやっているのは「ノートに書き出す」ことと「ドキュメントの整備」の2つはなるべくするようにしています。 まだまだ社会的に大変な時期ではありますが、僕自身もこれ以降の新しい取り組みができるようにしていく次第です。 3. お互いが「優しい気持ち」の状態で開発に取り組んでいけるための心理的安全: ともすると「つなぎ目」に関わる実装に関する部分は、コミュニケーション面でも連携が必要な部分。 少しでもお互いが「優しい気持ち」となる状態を作り出すための部分も立派なエンジニアとしての仕事と考えています。
24.
おまけ:その1 少しのヒントがあるだけでグッと考えやすくなるアプローチの例 考えやすくするためのヒントをつける (問題)円周率は3.05より大きいことを示せ (問題)円周率は3.05より大きいことを示せ ※ ただし、1.73 < √3 < 1.74であることを用いても良い 本題を解くための準備となる形にする (問題)tan1°は有理数か (問題)次の問いに答えよ (1) tan(α+β) = (tanα+tanβ) / (1-tanαtanβ)を証明せよ (2) tan1°が無理数であることを背理法を用いて証明せよ 全く方針が立たなそうな問題であっても少し形を変える → 考えやすい形にもっていくことができれば解きやすくなる 理解するためのヒントとなる部分や考えていくための道のりを整理する手段がドキュメントの役割と考えています。 ここで紹介している数学の問題はどちらも「解き方に気付く&証明方針を思いつくまでが難しい」問題だと思います。
25.
おまけ:その2 過去に登壇した資料の中で同じようなことに触れているものの紹介 できることや新たな知識が増えていくことは、自分にとっても他人にとっても嬉しいこと。 今回の事例と併せてこのような形で「つなぎ目」の部分に触れていくのも良いかもしれません。※もうちょっと詳細実装寄り ⭐ 発表資料: https://www.slideshare.net/fumiyasakai37/webiosswift
26.
Thank you for listening !
Download Now