推しアイデア
・QRコード3Dキラキラ ・リポジトリをTinderUIで表現
Gitagram
―
Swift
GitHub
Figma
Firebase
Firestore
インスタ感覚でGithubを交換できるアプリ
作った背景
・自分のGithubアカウント/リポジトリを気軽に共有したい ・SNSよりGithubを共有したい
推し技術
・クリーンアーキテクチャ ・MVVM ・QRコード3Dキラキラ ・TinderUI
プロジェクト詳細
うし
うらっしゅ Twitter さっきー Twitter 璃乃 Twitter みのりん Twitter
経緯,目指しているもの
ギャル,エンジニアに刺さるものを制作したい インスタ感覚でGithubを交換できるアプリ
UIデザイン
- ロゴ
アルファベット部分はGitのかくかく感を表現する為に角ゴシック体にしました。
多様なリポジトリを表現する為に、それぞれのアルファベットの大きさや角度を揃えていません。
また、Gに猫耳をつけてGit感を表現しました。
ひらがな部分は目立ちすぎないように丸めで太すぎず細すぎないフォントにしました。また、アルファベット部分と違和感無くくっつける為に弧上に配置しました。
色は、インスタのアイコンから連想される色を使いました。
また、暖色と寒色がなるべく隣合わないようにすることも意識しました。
単色だけだと情報が少ないので、繋がった波線を引いて一部の色を少し変えています。
背景に茶色太い縁をつけることにより、ロゴとしてより纏まりが出て強調されるようになっています。
QRコード画面(案)
今回のテーマに合わせ、交換する時にテンションが上がるような可愛いポップなデザインを作成しました。
実際の画面
キラキラします
https://youtube.com/shorts/C58m2S08dyA?feature=share
TinderUI
https://youtube.com/shorts/edlS12lFMBU?feature=share
アーキテクチャ説明
Gitgramでは、MVVMを採用し、Model部分ではクリーンアーキテクチャを採用しています。
採用理由
- Firebaseなどの詳細な実装を待たなくても他の実装ができるから。
- 技術の交換が圧倒的にしやすい。(Firebase辞めても、Repository以下は変更しなくても良くなる。)今後firebaseから脱却して、別のAPIを設ける場合も影響範囲はClient層飲みの変更でも良くなっています。
- Modelの実装をViewが待たなくても実装ができる！(Dummyの実装である程度動いて、切り替えがしやすい。)
設計図
構造
- Client層 : Firebaseなどの外部APIとやり取りをする層。Firebase独自のメソッドなどはここで取り扱う。これ以下の層はFirebaseを知らない。
- Repository層 : APIレスポンス(Json)をアプリで使えるデータ型に変換したり、機能群を実装する。
- UseCase層 : Repositoryの機能群から、1つの機能に関する関心事に特化した層。例えば一つの動作で2つ以上のRepositoryに干渉する場合はこのそうで取りまとめる。
- ViewModel層 : View独自ロジックをまとめたり、UseCase層を使ったりする層。
- View層 : UIに関する実装はここで取りまとめる。
DI部分
UseCase実装
Repository実装
Client実装
DetaModel実装
├── Gitagram │ ├── Assets.xcassets │ ├── GitagramApp.swift │ ├── GoogleService-Info.plist │ ├── Model │ │ ├── Client │ │ │ ├── Developer │ │ │ │ └── DeveloperClient.swift │ │ │ └── Product │ │ │ ├── ProductClient.swift │ │ │ └── ProductImageClient.swift │ │ ├── DataModel │ │ │ ├── CardDataModel.swift │ │ │ ├── Developer.swift │ │ │ └── Product.swift │ │ ├── Repository │ │ │ ├── Developer │ │ │ │ └── DeveloperRepository.swift │ │ │ ├── Product │ │ │ │ ├── ProductImageRepository.swift │ │ │ │ └── ProductRepository.swift │ │ │ ├── Protocol │ │ │ │ ├── DeveloperClientProtocol.swift │ │ │ │ ├── ProductClientProtocol.swift │ │ │ │ └── ProductImageClientProtocol.swift │ │ │ ├── QRCode │ │ │ │ └── QRCodeRepository.swift │ │ │ └── RepositoryDI.swift │ │ └── UseCase │ │ ├── Developer │ │ │ ├── CreateDeveloperUseCase.swift │ │ │ ├── GetDeveloperQRCodeUseCase.swift │ │ │ ├── GetDeveloperUseCase.swift │ │ │ └── GetLoginDeveloperUseCase.swift │ │ ├── Product │ │ │ ├── GetProductImageUseCase.swift │ │ │ ├── GetProductListUseCase.swift │ │ │ └── PostProductUseCase.swift │ │ ├── Protocol │ │ │ ├── DeveloperImageRepositoryProtocol.swift │ │ │ ├── DeveloperRepositoryProtocol.swift │ │ │ ├── ProductImageRepositoryProtocol.swift │ │ │ ├── ProductRepositoryProtocol.swift │ │ │ └── QRCodeProtocol.swift │ │ ├── UseCaseDI.swift │ │ └── Util │ │ └── TakeScreenShotUseCase.swift │ ├── Preview Content │ │ └── Preview Assets.xcassets │ │ └── Contents.json │ └── View │ ├── InputformView │ │ └── View │ │ └── InputFormView.swift │ ├── MatchingView │ │ ├── AccountView │ │ │ ├── View │ │ │ │ ├── AccountView.swift │ │ │ │ └── Variation │ │ │ │ └── OneAccountView.swift │ │ │ └── ViewModel │ │ │ ├── AccountViewModel.swift │ │ │ ├── SheetViewModel.swift │ │ │ └── TextCute.swift │ │ ├── Component │ │ │ ├── CardStackView.swift │ │ │ ├── CardView.swift │ │ │ ├── SwipeActionButtonsView.swift │ │ │ ├── SwipeActionIndicatorView.swift │ │ │ └── UserInfoView.swift │ │ ├── MatchingView.swift │ │ ├── MatchingViewModel.swift │ │ ├── Model │ │ │ └── User.swift │ │ └── Utils │ │ └── SizeConstants.swift │ ├── PostView │ │ ├── Component │ │ │ └── ImagePickerView.swift │ │ ├── PostDiscriptionView.swift │ │ ├── PostImageView.swift │ │ ├── PostURLView.swift │ │ └── PostView.swift │ ├── TabView │ │ └── AllView.swift │ └── frankfrt.ttf └── Gitagram.xcodeproj
