Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モバイル

Cybozu
July 26, 2024
220

 モバイル

Cybozu

July 26, 2024
Tweet

Transcript

  1. 6 ネイティブアプリとWebアプリ (4/5) ▌ネイティブアプリはOSの上 à 直接OSのAPIを呼び出す ▌WebアプリはWebブラウザの上 à ブラウザのAPIを介してOSのAPIを呼び出す là

    Webブラウザは直接OSのAPIを呼び出す OS Webブラウザ ネイティブアプリ Webアプリ 直接OSのAPIを呼ぶ ブラウザが提供する APIを呼ぶ ブラウザが OSのAPIを呼ぶ
  2. 7 ネイティブアプリとWebアプリ (5/5) ▌ネイティブアプリはOSの上 à 直接OSのAPIを呼び出す ▌WebアプリはWebブラウザの上 à ブラウザのAPIを介してOSのAPIを呼び出す là

    Webブラウザは直接OSのAPIを呼び出す à Webブラウザはネイティブアプリ OS Webブラウザ ネイティブアプリ Webアプリ Webブラウザはネイティブアプリ
  3. 13 アプリストアの存在 ▌モバイルアプリはアプリの配布に Google Play Store / App Store を使⽤

    アプリ開発 ストアの審査 公開 アプリ開発 公開 アプリ開発者 ストア管理者 Webアプリ モバイルアプリ
  4. 14 技術領域の違い (1/3) Webバックエンド Webフロントエンド Android iOS Visual Studio Code

    IntelliJ IDEA Storyboard SwiftUI Visual Studio Code IntelliJ IDEA Java Python TypeScript PHP Kotlin TypeScript JavaScript Spring Django express.js ktor React Vue Angular Composer Maven npm yarn yarn npm HTML CSS Android Studio Xcode Kotlin Java Objective-C Swift Android SDK iOS SDK Maven Gradle Android View Jetpack Compose Swift Package Manager
  5. 15 技術領域の違い (2/3) Webバックエンド Webフロントエンド Android iOS Visual Studio Code

    IntelliJ IDEA Storyboard SwiftUI Visual Studio Code IntelliJ IDEA Java Python TypeScript PHP Kotlin TypeScript JavaScript Spring Django express.js ktor React Vue Angular Composer Maven npm yarn yarn npm HTML CSS Android Studio Xcode Kotlin Java Objective-C Swift Android SDK iOS SDK Maven Gradle Android View Jetpack Compose Swift Package Manager 技術が⼤きく違う︕︕
  6. 16 技術領域の違い (3/3) Webバックエンド Webフロントエンド Android iOS Visual Studio Code

    IntelliJ IDEA Storyboard SwiftUI Visual Studio Code IntelliJ IDEA Java Python TypeScript PHP Kotlin TypeScript JavaScript Spring Django express.js ktor React Vue Angular Composer Maven npm yarn yarn npm HTML CSS Android Studio Xcode Kotlin Java Objective-C Swift Android SDK iOS SDK Maven Gradle Android View Jetpack Compose Swift Package Manager Webアプリをそのままモバイルアプリで再現するには ⼯数がかかる
  7. 19 MPAとSPA ▌MPA (Multi Page Application) lサーバーはリソースごとに異なるHTMLを返す l複数のHTML (ページ) から構成

    ▌SPA (Single Page Application) lHTMLをJSなどで動的に書き換える l単⼀のHTML (ページ) から構成 サーバー サーバー ブラウザ x JS ブラウザ x JS /usersをくれ <html> </html> /v1/usersをくれ { "users": [] } 返ってきたデータを元に 再描画
  8. 20 SPAとモバイル (1/2) サーバー ブラウザ x JS /v1/usersをくれ { "users":

    [] } サーバーとはHTTP APIを介してデータを送受信 サーバー /v1/usersをくれ { "users": [] } モバイルOS アプリ コンポーネントで構成 Users Articles News /users /articles /news https://spa.example.com Users Articles News UsersView ArticlesView NewsView Example App
  9. 21 SPAとモバイル (2/2) サーバー ブラウザ x JS /v1/usersをくれ { "users":

    [] } サーバーとはHTTP APIを介してデータを送受信 サーバー /v1/usersをくれ { "users": [] } モバイルOS アプリ コンポーネントで構成 Users Articles News /users /articles /news https://spa.example.com Users Articles News UsersView ArticlesView NewsView Example App モバイルアプリはWebのSPAに相当
  10. 22 モバイルとWebの違いのまとめ Webアプリ モバイルアプリ • ファイルをサーバーからダウンロード • ファイルはキャッシュされる • デプロイしたら公開

    • 同じアプリを複数のブラウザで実⾏ • アプリストアからインストール • 明⽰的に削除しなければ消えない • アプリストアの審査が⾏われる • OSごとにアプリを開発 • OSごとに設計思想や世界観がある • コンポーネントの集まりで構成 • HTTP APIを呼び出す場合が多い SPA
  11. 24 デザインガイドラインとデザインシステム iOS: Human Interface Guidelines Android: Material Design Apple

    Inc. "Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/ (参照: 2023/04/27) Google LLC "Material Design". https://m3.material.io/ (参照: 2023/04/27)
  12. 25 iOS: Human Interface Guidelines ▌アプリケーションインターフェースをより直感的で、学習しやすく⼀貫性のあるものにすることで ユーザーの体験を向上させる ▌iOS SDKに含まれるUIフレームワークを利⽤することで、デザインガイドラインに準拠したイン ターフェースを簡便に作れる

    Apple Inc. "Buttons - Menus and actions - Components - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons (参照: 2023/04/27) Apple Inc. "Action sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/components/presentation/action-sheets (参照: 2023/04/27)
  13. 26 Android: Material Design ▌現実世界に基づいたマテリアル (物質) というメタファーを⽤いて直感的な操作性と⼀貫性 を持たせたデザインを提供して、ユーザーの操作を補助 ▌Material ComponentsやJetpack

    ComposeなどのUIフレームワークを利⽤することで、 デザインシステムに準拠したインターフェースを簡便に作れる Google LLC "Common buttons – Material Design 3". https://m3.material.io/components/buttons/overview (参照: 2023/04/27) Google LLC "Elevation – Material Design 3". https://m3.material.io/styles/elevation/overview (参照: 2023/04/27)
  14. 27 デザインガイドライン / デザインシステム Apple Inc. SF Symbols. version 4.0

    (参照: 2023/04/27) Google LLC "Material Symbols and Icons - Google Fonts" https://fonts.google.com/icons (参照: 2023/04/27) iOS: SF Symbols Android: Material Symbols
  15. 28 アクセシビリティ ▌iOSとAndroidはWebと同様に読み上げ機能を提供可能 <!-- HTML --> <button type="submit"> <img src="..."

    alt="送信"> </button> // Android (Jetpack Compose) Button(onClick = {}) { Icon( painter = ..., contentDescription = "送信" ) } // iOS (SwiftUI) Button(action: {}) { Image( "...", label: Text("送信") ) }
  16. 29 サイボウズのアプリリリースまでの流れ (1/2) 開発 Dev ビルド CI ⾃動テスト CI アーカイブ

    CI 社内配信 CI 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者
  17. 30 サイボウズのアプリリリースまでの流れ (2/2) 主導権はCybozu (開発側) 主導権はプラットフォーマー (Apple / Google) 開発

    Dev ビルド CI ⾃動テスト CI アーカイブ CI 社内配信 CI 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者 審査には ガイドラインやポリシーが存在
  18. 31 ストアレビューのガイドライン / ポリシー Apple Inc. "App Store Reviewガイドライン -

    Apple Developer" https://developer.apple.com/jp/app-store/review/guidelines/ (参照: 2023/04/28) Google LLC "デベロッパー ポリシー センター" https://play.google.com/intl/ja/about/developer-content-policy/ (参照: 2023/04/28) iOS: App Store Reviewガイドライン Android: Google Play Policies
  19. 32 iOS: App Store Reviewガイドライン 4.2 最低限の機能 Appを作成する際は、Webサイトを単に再パッケージしたよ うなものではなく、優れた機能、コンテンツ、UIを作成するよう にしてください。特に便利でも、ユニークでも、「Appらしく」も

    ない場合、そのAppをApp Storeで提供することはできませ ん。Appが継続的に楽しめる何らかの価値、または⼗分な 有⽤性を備えていない場合は、承認されない可能性があり ます。Appが単に曲または映画の場合は、iTunes Storeに 提出してください。Appが単に書籍またはゲームの攻略本の 場合は、Apple Books Storeに提出してください。 Apple Inc. "App Store Reviewガイドライン - Apple Developer" https://developer.apple.com/jp/app-store/review/guidelines/#minimum-functionality (参照: 2023/04/28) • App Storeで提供できないもの • Webサイトを単に再パッケージしただけのもの • 便利でもユニークでもないもの • Appらしくないもの • 必要なもの • 優れた機能やコンテンツ、UI • 継続的に楽しめる何らかの価値 • ⼗分な有⽤性
  20. 33 Android: Google Play Policies 最低限の機能 ユーザーの興味を引き、操作に反応し、安定して動作するアプリにし てください。 違反の例 •

    何もしない、または何の機能も提供しないアプリ 不完全な機能 クラッシュ、強制終了、フリーズ、その他正常でない動作をするアプリ は認められません。 違反の例 • インストールできないアプリ • インストールできるが読み込まれないアプリ • 読み込まれるが応答しないアプリ Google LLC "最低限の機能 - Play Console ヘルプ" https://support.google.com/googleplay/android-developer/answer/9898783 (参照: 2023/04/28) • Google Play Storeで提供できないもの • 何もしないアプリ • 何の機能も提供しないアプリ • 正常でない動作をするアプリ • 必要なもの • ユーザーの興味を引く • 操作に反応をする • 安定した動作
  21. 36 iOSとAndroidの違いと共通点のまとめ ▌デザインや操作性についての規定がある liOS: Human Interface Guidelines lAndroid: Material Design

    ▌ガイドラインやポリシーに従いストアの審査が⾏われる liOS: App Store Reviewガイドライン lAndroid: Google Play Policies ▌審査にかかる時間は予想できない l審査⾃体、リジェクト、再提出などはかかる時間が予想できない lリジェクトされ公開できない場合もある
  22. 39 マルチプラットフォームアプリの構成 (1/3) iOS Android Web 共通 コード Web専⽤ コード

    Android 専⽤ コード iOS専⽤ コード iOS⽤の アプリ Android⽤の アプリ Web⽤の アプリ
  23. 40 マルチプラットフォームアプリの構成 (2/3) iOS Android Web 共通 コード Web専⽤ コード

    Android 専⽤ コード iOS専⽤ コード iOS⽤の アプリ Android⽤の アプリ Web⽤の アプリ プラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独⽴の部分 • ビジネスロジック • UI etc...
  24. 41 マルチプラットフォームアプリの構成 (3/3) iOS Android Web 共通 コード Web専⽤ コード

    Android 専⽤ コード iOS専⽤ コード iOS⽤の アプリ Android⽤の アプリ Web⽤の アプリ プラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独⽴の部分 • ビジネスロジック • UI etc... ビジネスロジックなどアプリの機能を 複数のプラットフォームで共通して提供可能 OSのAPIを直接呼ぶのが苦⼿ UIに違和感が残る可能性がある