スタディサプリ Product Team Blog

株式会社リクルートが開発するスタディサプリのプロダクトチームのブログです

SwiftUI の検索結果:

FigmaのCode ConnectとCode Generation APIを導入しました

…。 記事執筆時点ではSwiftUI、React、Jetpack Composeに対応しています。本記事ではJetpack Composeでの使用例をご紹介します。 まずはドキュメントを読んでCode Connectのセットアップを行います。 次にコードとFigmaのコンポーネントを紐づけるコードを書きます。 先ほど紹介したMainButtonに対してCode Connectを設定するコードは以下のようになります。 @FigmaConnect(url = "https://ww…

スタディサプリ小中高プロダクト開発部2023年の登壇資料紹介

…150 想定読者: SwiftUI を利用している開発者 内容サマリ: SwiftUI のバージョン移行方法とその運用の紹介 speakerdeck.com モバイルアプリの技術的負債 みんなで学ぶ Lunch LT 登壇日: 2023/4/11 登壇者: manicmaniac 想定読者: iOS アプリ開発者 内容サマリ: React Native 卒業後のスタディサプリ iOS アプリの技術選定方針の紹介 speakerdeck.com Android Shibuya.…

SwiftUI: Explicit Identity の正しい使い方と落とし穴

…nkmrh です。 SwiftUI が発表されてからはや4年が経ち、昨今のプロダクションコードでも多く活用されているのではないでしょうか。 そこで本稿では SwiftUI を活用する上で欠かすことのできない SwiftUI.View の Explicit Identity についておさらいしていきたいと思います。 Explicit Identity とは まずはじめに、SwiftUI の Explicit Identity とはなんなのかを説明しておきたいと思います。 Exp…

スタディサプリ中学講座iOSアプリの開発環境

…Swift 5.7 SwiftUI Swift Pckage Manager Combine, async/await GraphQL + Apollo XCTest CircleCI, Github Actions fastlane Danger スタディサプリ中学講座のiOSアプリは2022年2月に新規アプリとしてリニューアルしたばかりのプロダクトということもあり、最新の技術を積極的に導入しています。 例えば、UIはFull SwiftUIで実装されています。SwiftU…

「スタディサプリ 中学講座」のSwiftUI x In-App Purchase設計と結合テストのノウハウ

…書きたいと思います。SwiftUI x IAPの事例をお探しの方必見です! 背景 「スタディサプリ 中学講座」では、ユーザーが月額料金を支払うことで、講座の動画を見る・演習をすることができます。iOSアプリでの決済手段として、In-App Purchase(IAP)機能を提供しています。 「スタディサプリ 中学講座」のApp内課金導線 既存アプリの実装が参考にできるとはいえ、IAPの仕様はかなり複雑で理解しにくい部分が多いです。また、UIKitで開発された既存アプリと違って、…

SwiftUI.NavigationView のバックボタンをカスタマイズする方法

…。 最近、Full SwiftUI で開発したスタディサプリ 中学講座をリリースし、アプリ開発の醍醐味を味わっています。 はじめに 本稿では、スタディサプリ中学講座 iOS アプリで実装した SwiftUI の NavigationView のバックボタンをカスタマイズする方法について紹介します。 この記事で紹介している方法は iOS 14 以上で動作確認しています。 それでは早速みていきましょう! カスタムバックボタン まずはじめに、ナビゲーションバーのバックボタンとして表…

SwiftUIで対応しきれずUIKitを使ったコンポーネントのまとめ

…サプリ」がFull SwiftUIを選択した先に見えてきたものの発表で紹介させて頂いた通り、SwiftUIで開発してきた「スタディサプリ中学講座」ですが、SwiftUIでは対応しきれず、ごく一部UIKitを利用した機能も存在しています。この記事ではそれらのケースと対応策を紹介します。 事前知識 その前にSwiftUIからUIKitを使うため、先に知って貰えたいものがあります。 一つは UIViewRepresentable / UIViewControllerRepresen…

iOS バージョン による SwiftUI の機能差分・制限まとめ

… バージョンによる SwiftUI の挙動差異と制限のまとめをご紹介します。 SwiftUI の採用とサポートバージョンについて 「スタディサプリ 中学講座」では、SwiftUI を全面的に採用した開発を行っており、アプリのサポートバージョンを iOS 14 以上としています。 プロジェクト発足当初は iOS 13 以上をサポートバージョンにする方針で議論していましたが、プロジェクト期間途中の2020年9月にリリースされた iOS 14 にて、iOS 13 時点で一般に認識さ…

SwiftUI x Combineのメモリリークを防ぐ3つのTips

…Mアーキテクチャで、SwiftUIとCombineを使って開発をしています。SwiftUIのViewはとても軽いのでメモリ管理についてはあまり意識しなくてもいいですね。しかし、ViewModel の方は気をつけなければ循環参照が発生して、メモリリークが起きてしまうことがあります。それを防ぐ3つのTipsを、この記事で紹介します。ぜひ試してみてください! 前提 本記事で紹介したコードと現象は、Xcode 13.2.1 / iOS 15.2のシミュレーターで再現しています。 Sw…

SwiftUI コーディングガイドのすすめ

…iOS チームでは SwiftUI.View の実装経験が浅いこともあり、実装者によって書き方や、View の粒度がまちまちで、コードが肥大化したり、メンテナンスしづらくなる課題がありました。 その為、Swift のコーディングガイドとは別に SwiftUI.View のコーディングガイドラインを作成しています。 本記事では、このコーディングガイドがどのようなものかをご紹介します。 それでは早速みていきましょう! Screen サフィックス View の命名規則です。View…

SwiftUI でスポットライト機能を実装する

…サプリ」がFull SwiftUIを選択した先に見えてきたもの。のトークセッションで収まりきれなかったTipsを紹介いたします。 はじめに 本記事では、Spotlight機能の実装方法について紹介します。 Spotlight機能とは、アプリのチュートリアルなどで画面はそのままに一部分を切り抜いた半透明Viewを重ねてユーザーの次の行動を促すことができる機能を指します。 要件としては次の要件を想定しています。 全画面を覆ったViewで任意の箇所を透過させたい 利用イメージ 例と…

SwiftUI でカスタムアニメーションを簡単に実装する

…サプリ」がFull SwiftUIを選択した先に見えてきたもの。で紹介した、 SwiftUI におけるアニメーションの実装方法方法について詳しく解説します。 SwiftUI のアニメーション実装 SwiftUI の View にアニメーションを適用する方法として、対応する View Modifier を組み合わせることで簡単に実装することが出来ます。 なお、SwiftUI の基本的なアニメーション実装は Apple の SwiftUI Tutorials の一つとしても公開さ…

SwiftUIで全画面モーダルを無限に重ねる

…サプリ」がFull SwiftUIを選択した先に見えてきたもの。のトークセッションの時間の都合上、ご紹介できなかった「全画面モーダルを重ねる」実装方法をご紹介します。 全画面モーダルを重ねるとは? 全画面モーダルを重ねるとは、一度全画面モーダルを開いたあと、その上にさらに全画面モーダルを開くことです。このようなイメージの遷移方法になります。 モーダルを重ねるイメージ なぜモーダルを重ねる必要があるか? 私たちが新規開発している学習系アプリの機能要件には、プッシュ通知の受信によ…

SwiftUIの隠しNavigationLinkを使って画面遷移をプログラムで制御する

…サプリ」がFull SwiftUIを選択した先に見えてきたもの。のトークセッションで紹介された、プログラムで画面遷移を制御する方法について詳しく解説します。トークで話しきれなかった背景等についても触れます。 完成イメージ ※本記事のサンプルコードは Xcode 12.5.1、iOS14で作成しています。 実現したい機能要件 APIと通信して条件に適した場合のみ、一覧画面から詳細画面をプッシュ遷移したい。 よくある要件だと思いますが、UIKitでは navigationCont…

SwiftUIのディープリンク対応:プッシュ通知から画面遷移する方法

…開発を担当しており、SwiftUIを本格的に採用したプロジェクトになります。 背景 ネイティブアプリ開発に当たって、プッシュ通知を受信して、ユーザーが開いたら特定の画面を開く、いわゆるディープリンク対応が必ずといっていいほど要件に入ります。プッシュ通知こそがウェブアプリに比べて、ネイティブアプリの最大の強みと言っても過言ではないでしょう。 そんな大事な機能ですが、SwiftUIに関してはベストプラクティスが確立しておらず、チュートリアルも少ないのが現状です。実際にストアに出し…

サクッとわかる SwiftUI in WWDC 2020

…ンで開催されました。SwiftUI の新機能も発表され、いよいよ実戦投入の気運が高まってきているのではないでしょうか! 以下の2つのセッションで SwiftUI の新機能が紹介されていましたので、本稿ではこれらのセッションで、特にポイントとなりそうな項目をピックアップしてご紹介したいと思います。 Data Essentials in SwiftUI App Essentials in SwiftUI Data Essentials in SwiftUI このセッションでは、ビ…