Slide 1

Slide 1 text

アプリ開発時に 知っておくとよい アレコレ    2021.12.18 きど Web開発者が

Slide 2

Slide 2 text

Hello!! 実務歴:約1年半 PHPをメインに開発している バックエンドエンジニア jQueryはあったものの モダンJSは実務経験なしという 経歴でしたが2021夏から数ヶ月間、 React Nativeでの開発を経験しました

Slide 3

Slide 3 text

Twitter : @youraccount Facebook : your_account URL : http://example.com/ さて、みなさん・・・

Slide 4

Slide 4 text

この場に集まっている方は Webアプリ開発/制作者が多いと思いますが、 モバイルアプリ開発に興味はありませんか…?

Slide 5

Slide 5 text

Twitter : @youraccount Facebook : your_account URL : http://example.com/ アプリが開発できれば ・Webサイトとアプリを繋げれる ・できることの領域を広げられる ・楽しそう そう考える方もいらっしゃるのではないでしょ うか…?

Slide 6

Slide 6 text

Twitter : @youraccount Facebook : your_account URL : http://example.com/ ただ、Webアプリと開発の仕方が違うことがあり ます

Slide 7

Slide 7 text

Twitter : @youraccount Facebook : your_account URL : http://example.com/ React Native中心ですが、 アプリ開発で 「最初から知っておけばよかったな」 と思える内容をギュッとまとめてお話し したいと思います!

Slide 8

Slide 8 text

Twitter : @youracco unt Facebook : your_accou nt URL : http://exam ple.com/ アプリ 管理画面/一部Webview バックエンド (apiサーバー) モノ 状態管理 ユーザー 管理者 DB (MySQL) システム構成

Slide 9

Slide 9 text

React Nativeについて ・Meta(旧Facebook)が開発 ・コード1つでiOSとAndroidの両方の  アプリ開発ができる ・クロスプラットフォーム ・JavaScript(Type Script)で記述するため、 Web開発ライクに開発できるのが特長

Slide 10

Slide 10 text

開発について アプリ開発のゴール:「アーカイブファイル」をアップさせる ・iOSは「ipaファイル」 - iOS Application Archive ・Apple Developerで公開する ・Androidは「Apkファイル」 - Android Application Package ・Google Playで公開する

Slide 11

Slide 11 text

エディターについて ・XcodeとAndroid Studioを起動させる ・「ビルド」してシミュレーターを表示する時に使う ・コードは書かないが、シミュレーター起動やビルド設定、  ビルドなどのために使う(GUIで操作ができる) ・実機にビルドして動かすことも可能です(有線接続) ・VS Codeを使ってコーディング

Slide 12

Slide 12 text

iOSは証明書が必要 ・iOSは開発/公開のため証明書が別途必要 ・Bundle Identifier →アプリケーションを識別するため ・Provisioning Profile →作成したアプリに対してアプリ  開発者が署名するために  必要なデータ

Slide 13

Slide 13 text

開発について(STGまで) ・開発環境、検証環境(ステージング)では両OSともに Firebaseを  使っていました ・管理はOSごとに別となりますが、(事前登録していれば)  審査なしにipa/apkファイルをアップして送信先を指定するだけで テスト配信できるため、(本番公開と比べると)お手軽です󰢏 ※「配信」ともいう人もいれば、「配布」という人もいました(Distribution) 


Slide 14

Slide 14 text

開発について(本番環境) ・前述の通り、iOSはApple Developer、AndroidはGoogle Playで公開します ・ファイルをアーカイブします ・それぞれにあげたら即公開される訳ではないです ・「本番環境でのテスト段階」が存在します →iOSは「Test Flight 」、Androidは「内部テスト」  「クローズドテスト」「オープンテスト」があります ・両OSとも審査の時間がかかります 特にiOSは審査に一晩位かかります(Androidは20分くらいでした) →クライアントから「すぐにアップして」の要求があっても対応ができないです ※iOSは「輸出コンプライアンス」の提出があります

Slide 15

Slide 15 text

開発流れ(まとめ) 1. シミュレータor実機にビルドする 2. 開発 3. Git(PR&レビュー&マージ) 4. アーカイブして確認環境にあげてテスト配信 5. アーカイブして本番環境のテスト段階にあげてテスト配信 6. 本番環境で申請し審査 7. 公開 →ビルドやアーカイブがあるので「ちょっとの手直し」が大変です😅  

Slide 16

Slide 16 text

開発した所感 ・環境構築がWebアプリより複雑(慣れの問題?) ・キャッシュ等をクリアしないとビルドがすぐにこける ・React Nativeは日本語情報が少なく基本英語だと思っておく ・学習コストは低くはない(特にRedux) ・JSに精通している人が多いチームには良いと思う ・JS強くない&クライアント許容ならFlutterでもいいのでは? ・余談: 使えれば暦浅でもフリーランスにはなりやすい?

Slide 17

Slide 17 text

ありがとうございました Twitter : @youraccount Facebook : your_account URL : http://example.com/

Slide 18

Slide 18 text

質疑応答 わかる範囲で お答えします!

Slide 19

Slide 19 text

Metro Bundlerについて ・ビルドするときに起動される ・Metro Bundlerを起動することで  保存時に変更箇所を検知し  更新が自動でされ  「ホットリロード」されます

Slide 20

Slide 20 text

デバッグツール ・標準にあるデベロッパーツールは  スタイルは実測しか見れないなど使いづらさ があります😵   非公式(React Native Debugger)のが良い 💡tips デバッグを表示するにはデバイスを振る動 作の”shake”が必要ですが、shakeの概念 を初めて知りました…