[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介

by teamLab

Slide 1

Slide 1 text

アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの【超入門】流れをご紹介チームラボ株式会社スマートフォンチーム最上優細谷博之

Slide 2

Slide 2 text

Today’s Program 01 04 02 05 03 【超入門】スマホのOSとは 06 アプリ開発の基礎知識マルチプラットフォームどんなアプリを作るかいざ開発！アプリの申請とリリースとは 07 アプリ開発の良いところ

Slide 3

Slide 3 text

【超入門】スマホのOSとは 01 02 03 04 05 06 07 01

Slide 4

Slide 4 text

【超入門】スマホのOSとは iPhone？ Android？スマホのOSとは

Slide 5

Slide 5 text

【超入門】スマホのOSとは iPhone？ Android？スマホのOSとはいやいや、 iPhoneじゃなくて iOSだよ

Slide 6

Slide 6 text

【超入門】スマホのOSとは iPhone？ Android？スマホのOSとはいやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね

Slide 7

Slide 7 text

【超入門】スマホのOSとは iPhone？ Android？スマホのOSとはいやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね HuaweiがHarmony OS を開発したみたい

Slide 8

Slide 8 text

【超入門】スマホのOSとは iPhone？ Android？スマホのOSとはいやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね HuaweiがHarmony OS を開発したみたい次世代はFuchsiaだ！！

Slide 9

Slide 9 text

iOS スマホのOSとは【超入門】スマホのOSとは

Slide 10

Slide 10 text

iOS スマホのOSとは【超入門】スマホのOSとは

Slide 11

Slide 11 text

iOS (iPhone) iPhone = スマホ iOS = Appleが開発したスマホのOS iOSで動作しているスマホはiPhoneのみ iPadには iOSをカスタムした iPadOSが搭載されている【超入門】スマホのOSとは

Slide 12

Slide 12 text

Android Googleが開発したスマホのOS オープンソースで公開されている OSをカスタムすることができ、様々なメーカーからAndroidを搭載したスマホが発売されている Pixel (Google) Xperia（Sony） Galaxy（Samsung） AQUOS（Sharp）【超入門】スマホのOSとは

Slide 13

Slide 13 text

Android Bot Androidのマスコット的キャラクター日本では「ドロイドくん」と呼ばれている最近3D化され、名称が ”Bugdroid” から変更された旧【超入門】スマホのOSとは

Slide 14

Slide 14 text

両OSの共通点高いセキュリティ毎年新しいバージョンが公開されているアプリストアから利用したいアプリをインストールする【超入門】スマホのOSとは

Slide 15

Slide 15 text

アプリストアアプリをダウンロードできるストア厳正に審査され、審査に合格したアプリが掲載されている iOS, Androidどちらにもアプリを公開したい場合、両方のストアに申請する必要がある App Store 【超入門】スマホのOSとは

Slide 16

Slide 16 text

各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 日本 33.82% 65.87% 【超入門】スマホのOSとは

Slide 17

Slide 17 text

各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 33.82% 65.87% 日本グローバル【超入門】スマホのOSとは世界全体では？

Slide 18

Slide 18 text

各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 33.82% 65.87% 日本グローバル 71.43% 27.84% 【超入門】スマホのOSとは

Slide 19

Slide 19 text

おさらい ✔ スマホのOSには主にiOSと Androidがある ✔ iOSはiPhoneを動かすためのOS ✔ Androidは様々なスマホを動かすためのOS ✔ 日本はiOSのシェアが多いが、世界ではAndroidのシェアが多い【超入門】スマホのOSとは iOS

Slide 20

Slide 20 text

アプリ開発の基礎知識 02 02 03 04 05 06 07 01

Slide 21

Slide 21 text

開発における違いアプリ開発の基礎知識 iOS 言語？デザイン？開発環境？

Slide 22

Slide 22 text

Mac 必要なPC Mac, Windows Human Interface Guidelines デザインガイドライン Material Design プログラミング言語　　Xcode 開発環境 (IDE) 　　　Android Studio 開発における違い iOS アプリ開発の基礎知識

Slide 23

Slide 23 text

iOSのデザイン Human Interface Guidelines Apple製品を利用するユーザーにとって優れた体験を設計できるようにするためのガイドアプリ開発の基礎知識

Slide 24

Slide 24 text

Androidのデザインどのプラットフォームにおいても高品質なUXを実現するデザインシステム紙とインク、光の反射や影の落とし方など、物理世界とそのテクスチャからインスピレーションを得ている Material Design アプリ開発の基礎知識

Slide 25

Slide 25 text

Androidのデザイン Material Design 3 new!! Material Designの最新バージョン以前のMaterial Designから大きく変更されたアプリ開発の基礎知識

Slide 26

Slide 26 text

言語 : Swift iOSやMac向けアプリを開発するため、Appleが開発したオブジェクト指向プログラミング言語今話題のVision Pro向けのアプリも開発できるアプリ開発の基礎知識

Slide 27

Slide 27 text

開発環境 : Xcode iOSやMac向けアプリを開発することができる開発環境(IDE) macOSで利用できるアプリ開発の基礎知識

Slide 28

Slide 28 text

開発環境 : Xcode iOSやMac向けアプリを開発することができる開発環境(IDE) macOSで利用できる＝ Windowsでは利用できない Macが必要アプリ開発の基礎知識

Slide 29

Slide 29 text

言語 : Kotlin JetBrains社が開発した、Javaと互換性を持つオブジェクト指向のプログラミング言語 Java よりも簡潔に書けることを目指して開発され、現在ではAndroidアプリ開発にて広く利用されている Android開発ではJava言語も利用されているアプリ開発の基礎知識

Slide 30

Slide 30 text

開発環境 : Android Studio Androidアプリを開発することができる開発環境(IDE) JetBrains社が開発した IntelliJ IDEAがベースになっている MacでもWindowsでも利用できるアプリ開発の基礎知識

Slide 31

Slide 31 text

Mac 必要なPC Mac, Windows Human Interface Guidelines デザインガイドライン Material Design プログラミング言語　　Xcode 開発環境 (IDE) 　　　Android Studio 開発における違い（おさらい） iOS アプリ開発の基礎知識

Slide 32

Slide 32 text

クロスプラットフォーム 03 04 05 06 07 01 02 03

Slide 33

Slide 33 text

アプリ開発するならどっち？ iOS アプリ作るんだったら、どっちのユーザーにも使ってもらいたい... 学習コストも大変... クロスプラットフォーム

Slide 34

Slide 34 text

アプリ開発するならどっち？クロスプラットフォーム

Slide 35

Slide 35 text

Flutter Googleが開発したクロスプラットフォームSDK iOS, Androidなど複数のプラットフォームで利用できるアプリを同時に作成できる Flutter開発と比較して、Swift, Kotlinで開発することを「ネイティブ開発」と呼ぶクロスプラットフォーム

Slide 36

Slide 36 text

Flutterのメリット・デメリット１ソースコードで両OSのアプリを開発することができる各OSの新機能や仕様変更への追従に時間がかかる片方のOSにしかない機能を実装するのが大変 😄 😢 クロスプラットフォーム

Slide 37

Slide 37 text

言語 : Dart Flutter開発で使用する言語 Googleが開発したオブジェクト指向型のプログラミング言語動的型付けと静的型付けの使用が可能クロスプラットフォーム

Slide 38

Slide 38 text

Flutterの開発環境お好きな方で👍 Visual Studio Code Android Studio plugin plugin クロスプラットフォーム

Slide 39

Slide 39 text

Visual Studio Code クロスプラットフォーム Microsoft社が提供する無償のコードエディタ動作が軽く、拡張機能が豊富なのが特徴 “VS Code”と呼ばれることも

Slide 40

Slide 40 text

アプリ開発するならどっちどれ？ iOS クロスプラットフォーム

Slide 41

Slide 41 text

スマホゲームを開発したい！ゲーム開発にはゲームに特化した開発環境であるゲームエンジンを利用しましょう UnityとUnreal Engineが主流 Flutterと同じく、１ソースコードで両 OSのアプリを開発できるクロスプラットフォーム

Slide 42

Slide 42 text

Unity 米国のUnity Technologiesが開発したゲームエンジンゲーム開発では世界シェアナンバー１スマホ向けゲームアプリの開発が得意クロスプラットフォーム

Slide 43

Slide 43 text

Unreal Engine 米国のEpic Games社が開発したゲームエンジン PCゲームやコンシューマーゲーム開発の方が得意だが、スマホゲーム開発できるクロスプラットフォーム

Slide 44

Slide 44 text

おさらい ✔ FlutterはDart言語のクロスプラットフォームSDK ✔ FlutterはVisual Studio Codeか Android Studioで開発を行う ✔ ゲームアプリを開発したい場合はUnity やUnreal Engineがおすすめクロスプラットフォーム

Slide 45

Slide 45 text

どんなアプリを作るか 04 02 03 04 05 06 07 01

Slide 46

Slide 46 text

どんなアプリを作るか ● アプリ？ゲーム？ ● どんなオリジナル要素を入れる？ ● 何の機能を使う？ ○ データ保存 ○ ネットワーク通信 ○ アラーム機能 etc… どんなアプリを作る？こんなアプリあったらいいな.oO

Slide 47

Slide 47 text

どんなアプリを作るかガイドラインは守りましょう ● 年齢制限 ● 公序良俗 ● 個人情報の取り扱いどんなアプリを作る？

Slide 48

Slide 48 text

どんなアプリを作るか何から始めたらいいんだろう…？ → とりあえず手を動かしてみましょう ● 入門書を購入し、本の通りに実装してみる ● Webの入門ガイドを一通り触るどんなアプリを作る？

Slide 49

Slide 49 text

iOS App Dev Tutorials どんなアプリを作るか

Slide 50

Slide 50 text

Training courses どんなアプリを作るか

Slide 51

Slide 51 text

codelab どんなアプリを作るか

Slide 52

Slide 52 text

iOS 好きな開発環境を１つを選ぶんじゃどんなアプリを作るか開発環境を決めよう

Slide 53

Slide 53 text

iOS 日本のユーザーが多い！機種依存が少ない（Apple製のスマホ） Macが必要アプリをストアに公開するために、毎年$99 必要 😄 😢 どんなアプリを作るか開発環境を決めよう

Slide 54

Slide 54 text

公式ドキュメントがとても充実している Macが無くても開発できる海外ユーザーが多い日本ではユーザーが少ないメーカーや端末固有のバグが発生する 😢 どんなアプリを作るか開発環境を決めよう 😄

Slide 55

Slide 55 text

iOS, Androidどちらのアプリも開発できる iOSの動作確認や申請をしたい場合はMacが必要両OSの知識が必要になる（申請周り, ハードウェア, etc…） 😄 😢 どんなアプリを作るか開発環境を決めよう

Slide 56

Slide 56 text

どんなアプリを作るか開発環境を決めよう iOS この選択がきっかけで人生が決まる人もいるよ

Slide 57

Slide 57 text

02 03 04 05 06 07 01 Speaker交代します！小休止

Slide 58

Slide 58 text

いざ開発！ 05 02 03 04 05 06 07 01

Slide 59

Slide 59 text

開発に必要なもの ● PC ● スマホ実機 (optional) ○ 各開発環境にシミュレーターが同梱されており、PC上で動作確認が可能 ○ Bluetoothなどハードウェアの機能を利用した動作確認では実機が必要 ● デベロッパー登録いざ開発！

Slide 60

Slide 60 text

デベロッパー登録 ✔ アプリを各ストアへの申請する際に必要 ● iOS：App Store Connect ● Android：Google Play Console ✔ 一部の機能を利用する場合に事前に各ストアでの設定が必要 ● プッシュ通知、アプリ内課金、 etc. ✔ 登録費用 ● Apple Developer Program：年間 $99 ● Google Play Console：初回登録時 $25 いざ開発！

Slide 61

Slide 61 text

開発 ※開発について語ると１講義では終わらないので、ここでは　良くあるTipsを紹介しますいざ開発！

Slide 62

Slide 62 text

実装に困った時は ● 各OSが提供している機能で迷ったらまず公式、公式が一番正しい ● 機能名や表示されたエラーをキーワードにWebで調べるのもありいざ開発！

Slide 63

Slide 63 text

git・GitHub git：ソースコードのバージョン管理システム Github：gitの機能を提供するオンラインサービス ● 改変履歴がわかりやすい ● 過去のバージョンに戻せるチーム開発においてはほぼ必須いざ開発！ MyApp_20240324 MyApp_20240325 MyApp_20240326 MyApp_20240326_2

Slide 64

Slide 64 text

Firebase アプリの構築と拡大を支援するアプリ開発プラットフォーム ● ユーザー分析 ● クラッシュ分析 ● プッシュ通知の配信 ● 簡易的なサーバー構築 ● ユーザー認証機能 ● etc. いざ開発！

Slide 65

Slide 65 text

テスト実機やシミュレーターで実際にアプリを動かして、想定通りに動作するか確認しましょう ● 正常パターンはきちんと動作するか？ ● エラーパターンの網羅は？ ● 複数のスクリーンサイズでレイアウトは崩れはないか？ ● OSバージョンによって挙動が変化しないか？いざ開発！

Slide 66

Slide 66 text

テスト１画面・１機能・１パーツと細かい単位で日頃から動作確認していくと◎ → 影響・修正範囲が把握しやすくなるいざ開発！

Slide 67

Slide 67 text

アプリの申請とリリースとは 06 02 03 04 05 06 07 01

Slide 68

Slide 68 text

ストアに掲載するためには必ずApple・Googleによる審査を通過する必要がある申請する → アプリを審査に提出する審査ではどんなことをチェックされる？ ● ガイドライン満たしているか ● ストアに掲載する情報は正確か ○ タイトル・説明・スクリーンショット・価格・年齢制限・配信国・etc. ● きちんと動作するか ○ 画面が遷移できるか・機能が利用できるか・etc. ○ サーバーに接続できるか・Webページが表示されるか・etc. ● etc. アプリの申請とはアプリの申請とリリースとは

Slide 69

Slide 69 text

なぜ審査が必要なのかユーザーに安全で、品質が高く、使いやすいアプリを提供するため ✔ 品質の確保インターフェース、パフォーマンスなどが一定の品質基準を満たしているか ✔ セキュリティとプライバシーの保護マルウェアやスパイウェアなど個人情報を脅かすリスクの低減 ✔ 法律と規制への準拠知的財産権の侵害、不正行為など法律や規制に準拠しているか ✔ ユーザーエクスペリエンスの一貫性ガイドラインに準拠することでストア全体で一貫性と利用しやすさの担保アプリの申請とリリースとは

Slide 70

Slide 70 text

申請するまでの流れ初回ではなく、アップデートやストア掲載情報の更新時も申請が必要アプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請！　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 71

Slide 71 text

申請用ファイルの作成各開発環境で作成する ● iOS：Xcode → ipaファイル ● Android：Android Studio → aabファイルアプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 72

Slide 72 text

ストアへアップロード iOS → ipaファイルを App Store Connect へアップロード Android： → aabファイルを Play Console へアップロードアプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 73

Slide 73 text

アプリ情報の入力 App Store Connect・Play Console上で入力 ● タイトル・説明・検索キーワード ● スクリーンショット ● 問い合わせ先・サイトURL ● 年齢制限・配信国 ● 価格・課金アイテム価格・サブスク価格 ● 収集するユーザー情報の取り扱い ● etc… ✔ 以降は変更がある項目の編集と更新情報のみで OK アプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 74

Slide 74 text

申請リリース方法が選択可能 ● 審査通過後に自動で公開 ● 審査通過後に手動で公開 ● 日時指定（iOSのみ） App Store Connect・Play Console上の審査提出ボタン押下で申請！ ● 審査期間 ○ iOS：平均24時間以内 ○ Android：数時間から最長で 7 日程度 → アプリの内容・規模によって前後するため、余裕をもった申請が必要アプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 75

Slide 75 text

通過 or NG… 通過 ● おめでとうございます！アプリをリリースする準備が整いました！ ● この状態からアプリ情報の更新はほぼ不可 ○ 変更内容によっては再申請が必要 NG ● 各ストア上やメールにてNG理由が案内される ○ 修正して再度申請 ● 審査に落ちることをよく「リジェクトされる」と呼ばれているアプリの申請とリリースとは　申請用ファイルの作成ストアへアップロードアプリ情報の入力　通過 or NG… 申請

Slide 76

Slide 76 text

NG例アプリの申請とリリースとは

Slide 77

Slide 77 text

リリース ✔ 🎉🎉🎉 ✔ 公開ボタンを押下するとストアに反映され、アプリが表示されるようになる ✔ 実際に表示されるまで１時間ほどかかる - ストアへのデータ反映まで時間がかかる模様 ✔ 良いアプリだと「おすすめ」や「新着」にとりあげられることもアプリの申請とリリースとは

Slide 78

Slide 78 text

リリース後に起こること ✔ 不具合の修正 ● 各ストアのクラッシュログやレビューから確認・分析 ● Firebaseなど分析ツールを導入しておくとより詳細がわかり修正しやすくなる ✔ 毎年公開される新バージョン OSへの対応 ● 互換性やOSレベルの仕様変更への対応 ● 開発環境も定期的に更新していく必要がある ✔ 新機能の追加 ● 自分が持っているアプリのビジョンやユーザーレビューの反映 → 繰り返し行うことでユーザビリティ・ユーザーエクスペリエンスの向上させていく → 更なるユーザーの獲得・満足度向上による継続利用率の上昇アプリの申請とリリースとは

Slide 79

Slide 79 text

ここまでの内容を聴いておそらく皆さんが考えている事… やること・考えること、多くない…🤔？？

Slide 80

Slide 80 text

アプリ開発の良いところ 07 02 03 04 05 06 07 01

Slide 81

Slide 81 text

アプリ開発の良いところ ✔ 自分のアイディアや作ったサービスを世界中の人々に手元に届けることができる ● 世界のスマートフォン普及率は約70％、55億人 ○ 日本の普及率は約90% → 多くの人に触ってもらえる可能性があるアプリ開発の良いところ

Slide 82

Slide 82 text

アプリ開発の良いところ ✔ 外部ハードウェア・規格との連携によるアプリの範囲を超えたサービスの提供 ● QRやタッチによる決済・スマホが鍵になる・リモートで操作でハードウェアを操作できる・etc. アプリ開発の良いところ

Slide 83

Slide 83 text

アプリ開発の良いところ ✔ 毎年新しいOSの発表があり、技術革新が進む ● スマートウォッチとの連携・ホーム画面のカスタマイズ・etc. アプリ開発の良いところ

Slide 84

Slide 84 text

アプリ開発の良いところ ✔ パソコン１つで始められるアプリ開発の良いところ

Slide 85

Slide 85 text

アプリ開発の良いところ ✔ パソコン１つで始められるあなたもアイディアを形にしてみませんかアプリ開発の良いところ

Slide 86

Slide 86 text

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik ご清聴ありがとうございました本日はチームラボによるアカデミアにご参加いただき、誠にありがとうございました！

Slide 87

Slide 87 text

EOF