Recommended
More Related Content
Similar to 個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
Similar to 個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。 (20)
Recently uploaded
Recently uploaded (8)
個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
- 2. 2 目次 01 ピックコレクションとは 02 開発背景 03 分析と施策 04 個人情報を非表示化する機能をご紹介 05 LINEアイコン非表示化の技術スタックをご紹介 06 サービス初期を見据えた 投稿閲覧画面の設計 07 サービス分析 08 TikTokの設計に基づく施策 09 TinderUIの技術スタックをご紹介 10 実装した機能のご紹介
- 3. 3 目次 13 位置指定メソッドについて 14 Human Interface Guidelinesへ の準拠とデザイン性の両立 16 開発の取り組み方についてご紹介 17 現在の取り組み 11 検索機能のアップデート 12 Storyboardを使わずに実装 10 コメント機能で工夫したこと 15 利用したライブラリのご紹介
- 5. 開発背景 5
- 7. 分析と施策 7
- 20. サービス分析 20
- 29. 実装した機能のご紹介 29
- 34. コメント機能で工夫したこと 34
- 36. 検索機能のアップデート 36
- 39. Algoliaライブラリ Swiftコード（Firestoreクエリ） メリット 高度な検索機能 実装コスト：低 デメリット 実装コスト：高 大量のデータに対応できない 当初、Swiftコードで実装していましたが、検索対象が数千件を超えると遅延が起こると確認できたため、Algoiaの導入 を決めました。 39 検索機能のアップデートに向けた技術選定
- 43. 共通のデザインや機能をモジュール化 し、再利用することで新しい画面や機 能を効率的に追加しました。 共通のスタイルのUIパーツを利用する ことでアプリ全体の統一感を保つこと ができました。 コードのみを使った開発で工夫したこと UIパーツのモジュール化 Githubを利用したバージョン管理 各機能ごとに細かなブランチを切り、 プッシュを行いました。 開発初期は巻き戻し作業が多く時間を 要していました。これを改善するため にコードのみの実装に切り替えました。 バグが発生した時も素早く復元ができ 作業時間を大幅に短縮しました。 レスポンシブ対応 ユーザーの様々なスマホサイズに対応 するため、Auto Layoutを取り入れま した。 これによりiPhone SEからiPad Proま で、デバイスサイズに応じてUIパーツ が適切に配置されるようになりました。 43
- 45. UIViewの拡張メソッド 利用例 効果 extension UIView { func anchor(top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil, paddingTop: CGFloat = 0, paddingLeft: CGFloat = 0, paddingBottom: CGFloat = 0, paddingRight: CGFloat = 0, width: CGFloat? = nil, height: CGFloat? = nil) { translatesAutoresizingMaskIntoConstraints = false if let top = top { topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true } if let left = left { leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true } if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true } if let right = right { rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true } if let width = width { widthAnchor.constraint(equalToConstant: width).isActive = true } if let height = height { heightAnchor.constraint(equalToConstant: height).isActive = true } } } textLabel.anchor(top: view.topAnchor, left:view.leftAnchor,paddingTop:100, paddingLeft: 50) 好きな位置に UIパーツを配置すること ができます。 45
- 46. UIViewの拡張メソッド 利用例 効果 func center(inView view: UIView, yConstant: CGFloat? = 0) { translatesAutoresizingMaskIntoConstraints = false centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: yConstant!).isActive = true } textLabel.center(inView: self) UIパーツを中央配置しま す。 func centerX(inView view: UIView, topAnchor: NSLayoutYAxisAnchor? = nil, paddingTop: CGFloat? = 0) { translatesAutoresizingMaskIntoConstraints = false centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true if let topAnchor = topAnchor { self.topAnchor.constraint(equalTo: topAnchor, constant: paddingTop!).isActive = true } } textLabel.centerX(inView: likeButton) UIパーツをX軸方向に中央 配置します。 func setDimensions(height: CGFloat, width: CGFloat) { translatesAutoresizingMaskIntoConstraints = false heightAnchor.constraint(equalToConstant: height).isActive = true widthAnchor.constraint(equalToConstant: width).isActive = true } textLabel.setDimensions(height: 15, width: 15) UIパーツの縦横幅を指定 します。 46
- 48. z 問題点 控えめなボタンに タップ領域は44pxにしつつ、透明の 余白を作ってボタンを小さくしデザ イン性を保ちました。 48 Human Interface Guidelines 44px 45-57px 人差し指の平均幅は45〜57px。 ボタンの大きさは44px以上が推奨 されています。 ボタンを縦に積むと 圧迫感が出てしまう 44px タップ領域 ボタンサイズ 36px ボタンサイズ 44px
- 49. 利用したライブラリのご紹介 49
- 50. ライブラリ 説明 AlgoliaSearchClient 高度な検索機能を提供するライブラリ AuthenticationServices 認証サービスに関するライブラリ CryptoKit 暗号化およびハッシュ関数を提供するフレームワーク Firebase FirebaseプラットフォームのiOS SDK FirebaseAuth Firebaseの認証サービスを利用するためのライブラリ FirebaseDynamicLinks Firebaseのダイナミックリンクを扱うためのライブラリ FirebaseFirestore FirebaseのCloud Firestoreデータベースを操作するためのライブラリ FirebaseMessaging Firebase Cloud Messaging（FCM）を扱うためのライブラリ FMPhotoPicker 写真およびビデオの選択および表示を容易にするライブラリ GoogleSignIn Googleアカウントを使用したサインインをサポートするライブラリ JGProgressHUD ユーザーフレンドリーな進捗表示を提供するユーティリティ Koloda Tinder UIのユーザーインターフェースを作成するためのライブラリ NotificationCenter 通知センターに関するライブラリ NVActivityIndicatorView カスタマイズ可能なローディングインジケーターを提供するライブラリ opencv2 画像処理を得意としたOpenCVライブラリ Parchment ページングをサポートする柔軟なタブコントロールライブラリ SDWebImage 非同期でウェブイメージをロードおよびキャッシュするためのライブラリ 50
- 52. 工夫して取り組んだこと 1/4 構成案の事前作成 実装前にAdobeXDで構成案を作成し ました。 UIパーツの配置に迷うことがなくなり 効率的に開発をすることができました。 データベース設計図を作成 Firebase内のデータ構造を設計図に起 こして開発を進めてました。 これにより、データ間の整合性や命名 規則が担保されるようになりました。 52 Collection: 'users' - Document ID: 'uid' - Field: 'fullname' - Collection: 'alreadyRead' - Document ID: 'postID' エラーが発生した際、コード修正に入 る前にエラー情報を基に問題の仮説を 立てることを意識しました。 簡単なエラー修正でも、その根底にあ る原因まで辿り着くことで、大きなト ラブルを未然に回避できると考えてい ます。 エラーに仮説を立てる
- 56. 現在の取り組み 56
- 58. ありがとうございました 58
Editor's Notes
- いいねをおす