ちょっとの工夫でスムーズに!iOSアプリ開発のコツ9つ(コーディング・デザイン編)

このエントリーをはてなブックマークに追加

ショッピングアプリでの経験やiOSガイドライン(またはマテリアルデザイン)から学んだiOS開発のプラクティスをまとめてみました。
弊社より8月30日にリリースしたカウルのアプリ開発でとった対応も併記しています。

iOSアプリ開発で意識すべきポイントは、チームやコミュニティの中では共有されているものの、まとまった情報を得ることがなかなか難しいかと思います。
これから企業でiOSアプリを初めて開発するエンジニア な方々の参考になれば幸いです。

「サービス・システム設計」の観点から新規アプリ開発において意識すべきポイントはこちらの記事にまとめています。
「iPhoneアプリを作り始める前に考えておきたい5つのこと」



コーディング

1.Storyboardを積極的に利用する

UI要素はコードだけで生成することもできますが、Storyboardを積極的に使って実装すると、実行時の画面の状態がプレビューできるので新しくプロジェクトに関わる人がいても理解がしやすくなります。

一方でデメリットは、AutoLayoutとConstraintsの挙動を覚える必要があること、複数人で同じStoryboardを編集する際にGit上でコンフリクトすることが挙げられます。
Storyboardを分割しておくことでコンフリクトは極力減らせます。

またStoryboardから変更できないようなUI要素については、IBDesignableを使って拡張します。
例えばカウルではIBDesignableを使ってStoryboardからボタンの角丸を変更できるようにしつつ、各種ボタンに一定の丸みを持たせるようにしています。

2.SchemeとPreprocessor Macrosを使って環境を切り分ける

DebugRelease以外にもStagingのようなスキームも定義して、プリプロセッサマクロで以下のような処理をビルド毎に切り分けます。

  • APIの接続先
  • クラッシュトラッキングやアナリティクスのON/OFF
  • データのキャッシュ時間
  • ・・などなど

本番(または開発中)のバージョンにだけ出したい機能・設定の切り分けに使いましょう。

3.UIWebViewよりWKWebViewやSFSafariViewを使う

UIWebViewよりWKWebViewの方が、描画が速く、クラッシュも少なく安定します。
SFSafariViewはカスタマイズできる部分が少なくなりますが、SafariアプリとCookie等が共有されるので自分のサービス外のURLを開く際などに使うとユーザにとって便利です。

3つを主に以下のような用途で使い分けて、webとネイティブを繋ぎます。

  • カスタムURLスキーム: Safari等からアプリへの遷移。kawlu://のようなURLでアプリを起動してくれます。
  • ユニバーサルリンク: Safari等からアプリへの遷移。https://kawlu.comのようなURLでアプリを直接起動してくれます。
  • WKScriptMessageHandler: アプリ内のWebViewからアプリへの情報渡し。JavaScriptからWebView内に処理を渡してくれます。

カウルではユニバーサルリンク中心に利用する予定でしたが、このブログを書いている時点では Safari以外のアプリでリダイレクトリンクを踏んだ際は作動しない という挙動があったためカスタムURLスキームも利用しています。
以下が具体的にユニバーサルリンクが作動しない事例です。

  1. トラッキングのためSendgrid経由でメールを送る
  2. ユーザがGmailアプリでメール開いてリンクをクリックする
  3. リンクはSendgridドメインを経由するリダイレクトになっており、ユニバーサルリンクが作動しない

5.こまめにプルリクエストをマージする

複数人で開発を行っているとpbxprojファイルやStoryboardが、コンフリクトして解消に時間を取られるので、プルリクエストを長い間放置しないようしてコンフリクトを減らします。

6.ベータ版を定期的に社内配信する

動作確認をしたり、認識を合わせる上で一番良いのは実際にアプリをデバイスにインストールして使ってもらうことです。
インストールしたくなる度にMacにiPhoneをUSB接続するのでは効率が悪いため、Crashlytics Beta等のツールからいつでも関係者がインストールできるようにします。

カウルの開発では帰宅時に最新版のビルドを配信するようにしていました。
今後はfastlaneなどを利用して、新しいコミットがある度に自動配信できるようにしようと検討中です。

デザイン

基本的には、標準的なiOSのUI要素を使いつつ、アプリ内での一貫性を重視するようにします。

1.滑らかにアニメーションさせる

要素が現れたり消えたり、移動する際に滑らかにアニメーションするようにします。
また、時間がかかる処理をしている間はユーザに「読み込みしている」ということを分かるようにします。

見た目のカッコ良さだけでなく、直前のタップやスクロールという動作から次のアクションへの繋がりが見えるようアニメーションを利用することを心がけます。

画面描画が重たくなる場合、ユーザに見えていない部分の要素の描画がされてることもあるので描画中のビューを見てデバッグするのが有効です。

2.UI要素のレイアウトを揃える

UI要素のサイズには、標準的なiOSのUI要素がもともと持っているサイズを使うか、サービス内で定義したサイズを使うことで、iOSやサービスの一部として馴染むようにします。

例えば、ボタン等のタッチ領域は44pt以上にするようにしたり、サービス内で独自に定義するサイズは8の倍数を使います。

他にも角丸を統一したり、色についてもサービス用のパレットを追加したり、定数化して統一化します。

3.web処理を意識させない

アプリ内で同一サービスのwebページを開く際、それがwebビューであるかどうかユーザが認識する必要はありません。

具体的にカウルでは、「戻る」ボタンをタップした際や、画面左からのスワイプをした際に、一貫して「直前まで見ていたものに戻る」ために以下のような処理をしています。

  • webViewであれば、1ページ前に戻る
  • webViewでなければ、1つ前のviewに戻る

ここに書いてあることはカウルの開発で実施していることの一部です。是非みなさんの意見や、やり方も教えていただけると幸いです!

カウルのアプリはこちらです。基本料無料で使えますので、是非ご利用ください!
https://itunes.apple.com/app/id1143903849

by まっくす

このエントリーをはてなブックマークに追加