モバイル

モバイル開運研修

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

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

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をくれ <html> </html> /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と同様に読み上げ機能を提供可能  <button type="submit"> <img src="..."
alt="送信"> </button> // 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⽤のアプリ

Android 専⽤コード iOS専⽤コード iOS⽤のアプリ Android⽤のアプリ Web⽤のアプリプラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独⽴の部分 • ビジネスロジック • UI etc...

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

モバイル

モバイル

More Decks by Cybozu

Featured

Transcript