モバイル 開運研修

2 この講義について ▌想定受講者 lWebアプリ開発の基礎知識がある⽅ lモバイルアプリの開発経験のない⽅ ▌学ぶこと lWebアプリ開発から⾒たモバイルアプリ開発 lモバイルアプリ開発の特徴

3 ネイティブアプリとWebアプリ (1/5) ▌ネイティブアプリはOSの上 OS (Operating System) ネイティブアプリ

4 ネイティブアプリとWebアプリ (2/5) ▌ネイティブアプリはOSの上 ▌WebアプリはWebブラウザの上 Webアプリ Webブラウザ OS ネイティブアプリ

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

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

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

8 ネイティブアプリとモバイルアプリ ▌モバイルアプリ à モバイルOS向けのネイティブアプリ モバイル向けOS (iOS, Androidなど) Webブラウザ モバイルアプリ Webアプリ

9 ここまでのまとめ ▌ネイティブアプリはOSの上で動作 à OSのAPIを呼び出す ▌WebアプリはWebブラウザの上で動作 à ブラウザのAPIを呼び出す ▌Webブラウザはネイティブアプリ ▌モバイルアプリはモバイル向けOS⽤のネイティブアプリ

10 モバイルアプリとWebアプリの違い

11 Webアプリの利⽤ ▌WebアプリはサーバーからHTMLやJSなどのファイルをロード ▌プログラムもリソースもブラウザが⼀時的に保持 サーバー HTML CSS JS PNG サーバーからロード 端末 ブラウザ x JS ダウンロードされたファイル群は キャッシュされる

12 モバイルアプリの利⽤ ▌アプリストアからアプリをインストール ▌アプリのプログラムやリソースは本体の永続記憶領域に保存 モバイルアプリ アプリストアから インストール 端末 アプリ アプリストア アプリ パッケージ アンインストールしない限り 消えない

13 アプリストアの存在 ▌モバイルアプリはアプリの配布に Google Play Store / App Store を使⽤ アプリ開発 ストアの審査 公開 アプリ開発 公開 アプリ開発者 ストア管理者 Webアプリ モバイルアプリ

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

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 技術が⼤きく違う︕︕

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アプリをそのままモバイルアプリで再現するには ⼯数がかかる

17 動作環境 - Webアプリの開発 ▌複数のブラウザで利⽤可能 lブラウザの仕様の違いを考慮して開発 Firefox Chrome Safari x JS x JS x JS x JS 同じアプリを複数ブラウザで動かす

18 動作環境 - モバイルアプリの開発 ▌OSごとにアプリを作成 l世界観やデザイン、設計思想がOSによって異なる lOSごとに開発⽤SDKが提供 ▌ライフサイクルやスレッド、OS独⾃の機能への対応 iOS Android iOS アプリ Android アプリ OS専⽤のアプリ

19 MPAとSPA ▌MPA (Multi Page Application) lサーバーはリソースごとに異なるHTMLを返す l複数のHTML (ページ) から構成 ▌SPA (Single Page Application) lHTMLをJSなどで動的に書き換える l単⼀のHTML (ページ) から構成 サーバー サーバー ブラウザ x JS ブラウザ x JS /usersをくれ /v1/usersをくれ { "users": [] } 返ってきたデータを元に 再描画

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

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に相当

22 モバイルとWebの違いのまとめ Webアプリ モバイルアプリ • ファイルをサーバーからダウンロード • ファイルはキャッシュされる • デプロイしたら公開 • 同じアプリを複数のブラウザで実⾏ • アプリストアからインストール • 明⽰的に削除しなければ消えない • アプリストアの審査が⾏われる • OSごとにアプリを開発 • OSごとに設計思想や世界観がある • コンポーネントの集まりで構成 • HTTP APIを呼び出す場合が多い SPA

iOSとAndroidの違いと共通点 23

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)

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)

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)

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

28 アクセシビリティ ▌iOSとAndroidはWebと同様に読み上げ機能を提供可能 // Android (Jetpack Compose) Button(onClick = {}) { Icon( painter = ..., contentDescription = "送信" ) } // iOS (SwiftUI) Button(action: {}) { Image( "...", label: Text("送信") ) }

29 サイボウズのアプリリリースまでの流れ (1/2) 開発 Dev ビルド CI ⾃動テスト CI アーカイブ CI 社内配信 CI 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者

30 サイボウズのアプリリリースまでの流れ (2/2) 主導権はCybozu (開発側) 主導権はプラットフォーマー (Apple / Google) 開発 Dev ビルド CI ⾃動テスト CI アーカイブ CI 社内配信 CI 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者 審査には ガイドラインやポリシーが存在

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

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 • 継続的に楽しめる何らかの価値 • ⼗分な有⽤性

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

34 リリースタイミングの調整 ▌審査が終わるまでの時間は不確定 l通常は半⽇から3⽇ほどで完了 ▌審査で問題が起きた場合 à 追加対応と再審査が必要 ▌任意のリリース⽇を指定するにはテクニックが必要 lリリース予定⽇の⼗分前に審査を通す l審査が通ったバージョンを⼿動リリースまたは公開⽇時指定を⾏いリリース

35 リジェクトされることがある ▌審査に通るためにはプラットフォーマーの要件を満たす必要がある lストア審査のガイドラインやポリシーへの準拠 lデザインガイドラインへの準拠 lプライバシーポリシーの提供 lデータポリシーの提供 ▌リジェクトされた場合 l要件を満たして審査に再提出 l審査員に事情を説明して交渉 l場合によっては⼿詰まりでストアでの公開ができないことも

36 iOSとAndroidの違いと共通点のまとめ ▌デザインや操作性についての規定がある liOS: Human Interface Guidelines lAndroid: Material Design ▌ガイドラインやポリシーに従いストアの審査が⾏われる liOS: App Store Reviewガイドライン lAndroid: Google Play Policies ▌審査にかかる時間は予想できない l審査⾃体、リジェクト、再提出などはかかる時間が予想できない lリジェクトされ公開できない場合もある

他のモバイルアプリの形態 37

38 マルチプラットフォーム ▌複数の異なるOSや環境で動かすことができること l同じコードでAndroid⽤、iOS⽤アプリが作れるという感じ lクロスプラットフォームとも ▌モバイル向けの代表的なマルチプラットフォームフレームワーク Kotlin Multiplatform Flutter React Native

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

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

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

42 PWA (Progressive Web Apps) ▌新しいウェブ API と伝統的なプログレッシブな拡張戦略を使⽤して、クロスプラットフォームの ウェブアプリケーションにネイティブアプリと同様の使い勝⼿をもたらすウェブアプリのことです。[1] ▌PWAはネイティブアプリのように lホーム画⾯に追加可能 lオフラインでも使える l通知を受け取れる [1] "プログレッシブウェブアプリ (PWA) | MDN" https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

43 まとめ ▌モバイルアプリはネイティブアプリの⼀種 ▌モバイルアプリとWebアプリは使⽤する環境が異なるため 使⽤する技術も関⼼事も異なる ▌プラットフォームごとに世界観が存在 lデザインガイドライン / デザインシステムが存在 lリリース前に審査が⾏われガイドラインやポリシーなどのチェックが⾏われる l要件を満たさない場合はリジェクトされることもある ▌モバイルアプリの形態は複数存在 lネイティブSDKやマルチプラットフォームフレームワーク、PWA