Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~

2019年10月26日サイボウズ社で行われた
MonacaUGカンファレンスでの登壇資料です。

  • Be the first to comment

  • Be the first to like this

Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~

  1. 1. 2019年10月26日 Monacaを使ってアプリ開発ビジネスを 加速させ、そして色々と苦労した話 バルテス・モバイルテクノロジー株式会社
  2. 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社(略称:VMT) VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社(100%) 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
  3. 3. 自己紹介 3 名前 山下大輔(やました だいすけ) 所属 開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) SNS Facebook:@longjumper.daisuke Instagram:@deepimpact_daisuke Twitter:@jumper_daisuke 資格 Android技術者Basic、JSTQB FL
  4. 4. 4 自己紹介
  5. 5. 5 自己紹介-終わり 実は「マンガでわかるMonacaUG」に出てます。
  6. 6. 6 • Monaca導入からビジネスを加速させるためにした事 • Monacaとの格闘の歴史「あるある」 アジェンダ
  7. 7. 7 Monaca導入の歴史 Monaca導入からビジネスを加速させるためにした事
  8. 8. 8 やりたい事 Monaca導入からビジネスを加速させるためにした事 QCDの達成
  9. 9. 9 Q:Quality(品質) Monaca導入からビジネスを加速させるためにした事 C:Cost(工数) D:Delivary(納期)
  10. 10. 10 どうやってQCDを達成するのか? Monaca導入からビジネスを加速させるためにした事 その前にQCDで一番大事なのは?
  11. 11. 11 Quality(品質) Monaca導入からビジネスを加速させるためにした事 は建前で 本音はC・Dです。
  12. 12. 12 その、C(工数)とD(納期)を達成 する為にPDCAを回す。 Monaca導入からビジネスを加速させるためにした事 つまり、有限な工数と納期(CとD)で、 工夫して品質(Q)を上げる
  13. 13. 13 PDCAとは? Monaca導入からビジネスを加速させるためにした事
  14. 14. 14 P: Monaca導入からビジネスを加速させるためにした事 D: C: A: ピンチになっても どうにかなるさと ちゃんとやったら 明るい未来が待っている
  15. 15. 15 Monaca導入前の課題(その1) Monaca導入からビジネスを加速させるためにした事 ネイティブアプリのビルド環境構築が面倒くさい 他のPCに映すとビルドが通らない XcodeやAndroidStudioの設定が複雑 環境構築で余計なコスト(人+時間) が掛かってしまう!!
  16. 16. 16 Monaca導入前の課題(その2) Monaca導入からビジネスを加速させるためにした事 Cordovaアプリの環境構築がさらに面倒くさい 一から作るのでとにかくビルド環境構築が大変 環境構築手順書が無いと運用できない 環境が壊れて、大変なことになり、 更に余計なコストが掛かってしまった・・・。
  17. 17. 17 無駄を省き、生産性を上げる為の開 発環境は無いものか? Monaca導入からビジネスを加速させるためにした事 これらの課題を解決したい。 新しい何かを取り入れる必要がある。
  18. 18. 18 当時、経費が掛かるので、有料のサー ビスは取り入れる気はなかった。 無料でやるのが当たり前と思ってた。 Monaca導入からビジネスを加速させるためにした事 当時の上司から、よさそうなハイブリッド アプリ環境がある、と言う事を思い出し ました。
  19. 19. 19 直近でオンラインセミナーがあったので、 話聞いてみようと思い、セミナーの内容 を聞いて、「これは」と思い。 導入を即決しました。 Monaca導入からビジネスを加速させるためにした事 それが「Monaca」でした。
  20. 20. 20 上司(部門長):「いいよ」 Monaca導入からビジネスを加速させるためにした事 上司(部門長)に 私:「Monaca導入します」。 早っ!
  21. 21. 21 Monaca導入した感想 Monaca導入からビジネスを加速させるためにした事 クラウドIDEですぐに開発出来るので、 環境構築超ラク!! ソースコードの受け渡しもラクなので、PCを変え てもビルドが通らない事は無い。
  22. 22. 22 Monacaビジネスの始まり Monaca導入からビジネスを加速させるためにした事
  23. 23. 23 どのようにMonacaビジネスを加速させたのか? Monaca導入からビジネスを加速させるためにした事 そもそもどうやって実績ゼロで受注したのか?
  24. 24. 24 Monacaあくまで開発手段 Monaca導入からビジネスを加速させるためにした事 Web技術で開発できるので そこにリスクはない
  25. 25. 25 Webは実績があるので、出来ない理由が無い。 Monaca導入からビジネスを加速させるためにした事 Cordovaプラグインはもともとネイティブアプリの 実績があるので問題ない。 「出来ます!!」と 自信を持って、顧客に提案した。
  26. 26. 26 Monacaで開発するメリット、デメリットを 明確にする。 Monaca導入からビジネスを加速させるためにした事
  27. 27. 27 「Monacaでやるから」受注の理由にならない Monaca導入からビジネスを加速させるためにした事 そもそもユーザーメリットは少ない
  28. 28. 28 メリット Monaca導入からビジネスを加速させるためにした事 iOS/Androidでデザイン統一しやすい Web技術なので、それでUI/UXの設計が出来る 1コードで開発 OS毎のアサインは不要 工数と工期を短縮
  29. 29. 29 デメリット Monaca導入からビジネスを加速させるためにした事 単純に安く出来ると思われがち メリットをしっかり説明する 設計やテスト工数が大幅に削減できるわけではない。 ネイティブアプリより劣ると言われる それは要件によって変わるもの。 Cordovaプラグインであれば、ネイティブ機能を補える。 ネイティブアプリ開発の実績があるので、そこにリスクもない。
  30. 30. 30 あくなきチャレンジ精神 Monaca導入からビジネスを加速させるためにした事 大事なのは 出来ないのではなく、「やる。」
  31. 31. 31 Monaca導入前にアプリの引き合 いがあって、ネイティブ版ハイブリッド 版を提案 Monaca導入からビジネスを加速させるためにした事 実績ゼロで受注したのは
  32. 32. 32 顧客が安い方(ハイブリット版)に 傾いている Monaca導入からビジネスを加速させるためにした事 ハイブリッドアプリ版の方が安い じゃあMonacaでやるよーって 提案
  33. 33. 33 Monacaでやるしかない。 Monaca導入からビジネスを加速させるためにした事 結果、受注したので
  34. 34. 34 P: Monaca導入からビジネスを加速させるためにした事 D: C: A: ピンチになっても どうにかなるさと ちゃんとやったら 明るい未来が待っている
  35. 35. 35 Monaca導入からビジネスを加速させるためにした事 これです。
  36. 36. 36 メリットを説明、デメリットを把握しメ リットに変えて、リスクなしでできると いう自信とPDCAです。 Monaca導入からビジネスを加速させるためにした事 実績ゼロで受注できたのは
  37. 37. 37 Monaca案件で得たナレッジを共 有してMonaca開発プロセスの PDCAを回しました。 Monaca導入からビジネスを加速させるためにした事 あとはこれの繰り返し
  38. 38. 38 ビジネスを加速させる手段 Monaca導入からビジネスを加速させるためにした事
  39. 39. 39 Monacaはあくまで手段 Monaca導入からビジネスを加速させるためにした事 問題はプラスα、会社としてのプラスαが 何か?を考える。
  40. 40. 40 ゆるぎない開発手法 セキュアで高品質 Monaca導入からビジネスを加速させるためにした事
  41. 41. 41 手戻りを防ぐ開発プロセス Monaca導入からビジネスを加速させるためにした事 工夫をして品質を上げる
  42. 42. 42 手戻りを防ぐ開発プロセス(その1) Monaca導入からビジネスを加速させるためにした事 プロトタイピングによる事前の認識合わせ プロトタイピングツール(Prott)を活用 画面デザイン、UI、画面遷移を実装前に顧客と共有 早期に認識の乖離を防ぎ、完成系をイメージさせる
  43. 43. 43 手戻りを防ぐ開発プロセス(その2) Monaca導入からビジネスを加速させるためにした事 設計テンプレートの作成 要件定義、基本設計、テスト設計等 フェーズ毎にチェックリスト、QualityGateを設定 ネイティブアプリ開発の経験を基に、各OSの特徴や懸 念点を常に考慮し、開発を進めていける。 プロジェクトを繰返していく中でブラッシュアップする 作ったら終わりにせずに、 しっかりとPDCAを回す。
  44. 44. 44 工夫をして品質を上げる Monaca導入からビジネスを加速させるためにした事 バルテスメソッドによる体系的なテストアプローチ 1:10:40:100法則を考慮する。 上流工程からしっかり、アプローチを行う。 テスト工程ではテスト計画~設計~実施~分析の体 系的なアプローチにより、テストの抜け漏れを防ぐ 端末が充実(800台以上)の為、保守もお任せ。 バルテスメソッドはググるか、そこにいる バルテスの江添に聞いてください。
  45. 45. 45 VMTのプラスα Monaca導入からビジネスを加速させるためにした事  手戻りの少ない開発プロセスの確立  セキュアで高品質な体系的なアプローチ 結果的に納期(D)を守り、品質(Q)を上 げる事によって、コスト増(C)が防げる。 保守契約、継続案件につながる。
  46. 46. 46 更に、プラスαのメリット Monaca導入からビジネスを加速させるためにした事 保守、継続案件で開発機会が増え、 社内でも技術共有・継承の場が増える
  47. 47. 47 その結果、提案内容にも説得力と VMTで開発することによりメリットを説 明でき、理解してもらるようになった。 Monaca導入からビジネスを加速させるためにした事 案件も増えて、さらに ナレッジも増えていきました。
  48. 48. 48 ここまでがMonaca導入から ビジネスを加速させるためにしたこと Monaca導入からビジネスを加速させるためにした事 次はみなさんお待ちかね。。。
  49. 49. 49 Monacaあるある Monacaとの格闘の歴史(あるある)
  50. 50. 50 •iOSタップ遅延問題 •Crosswalkプラグイン神隠し事件 •ビルドサーバーエラー事件 アジェンダ
  51. 51. 51 iOSタップ遅延問題 Monacaとの格闘の歴史(あるある)
  52. 52. 52 iOSアプリでテキストボックスのタップの反 応が悪い。 タップ後にカーソルがフォーカスして キーボードが出るまでが遅い。 Monacaとの格闘の歴史(あるある) 保守契約をしている顧客から問合せ
  53. 53. 53 確かに、そう言われれば遅い。 気にしないでいいと思うが、気になると 言えば気になる。 Monacaとの格闘の歴史(あるある) 確認したところ
  54. 54. 54 iOS12以降でタップ遅延問題が発生し ていました。 Monacaとの格闘の歴史(あるある) 調査したところ。 原因はFastClickのバグでした。
  55. 55. 55 物理的なタップからモバイルブラウザでの イベントの発生までの300ミリ秒の遅延 を排除するためのシンプルで使いやすい ライブラリです。 Monacaとの格闘の歴史(あるある) FastClickとは? だからそれがバグってんねん!!
  56. 56. 56 L17925~遅延問題の対応済みの FastclickのforkBranch参考 Monacaとの格闘の歴史(あるある) 対処法(その1) https://github.com/lasselaakk onen/fastclick
  57. 57. 57 OnsenUIをお使いの方 Monacaとの格闘の歴史(あるある) 対処法(その2) loader.jsを書換える必要があります。
  58. 58. 58 Monacaとの格闘の歴史(あるある) * @param {EventTarget|Element} targetElement */ FastClick.prototype.focus = function (targetElement) { var length; // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724. if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email' && targetElement.type !== 'number') { l ength = targetElement.value.length; targetElement.setSelectionRange(length, length); // 2018/11/01 iOS12のタップ遅延問題 targetElement.focus(); } else { targetElement.focus(); } }; ちっちゃっ! loader.jsの17915行目あたりです
  59. 59. 59 Monacaとの格闘の歴史(あるある) if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email' && targetElement.type !== 'number') { l ength = targetElement.value.length; targetElement.setSelectionRange(length, length); // 2018/11/01 iOS12のタップ遅延問題 targetElement.focus(); ←ここに追加 } else { targetElement.focus(); } }; 見えた?
  60. 60. 60 OnsenUIのloader.jsを直接書き換 えると、ビルドサーバーに書換らえる可 能性がある。 Monacaとの格闘の歴史(あるある) 注意点 オーバーライドするか、ローカルコピーして そこを参照する様にする。
  61. 61. 61 CrossWalkプラグイン 神隠し事件 Monacaとの格闘の歴史(あるある)
  62. 62. 62 それを補うAndroid用のプラグイン Monacaとの格闘の歴史(あるある) CrossWalkプラグインとは? Android4.4まではOS毎にバージョン があった為、JavaScriptの動作に差分 が出てしまう。
  63. 63. 63 なので、CrossWalkを外して アプリをアップデートしないといけない Monacaとの格闘の歴史(あるある) しかーし、もうCrossWalkは 現在サポートしていません。 なので、Android4,4以上のOSでは 不要になり、使う必要が無くなった。
  64. 64. 64 完了!! Monacaとの格闘の歴史(あるある) なので、CrossWalk削除して 必要な改修を行い。 アプリをアップデート!! 動作確認も問題なし
  65. 65. 65 ガーン!! Monacaとの格闘の歴史(あるある) っが、問題発生! アプリをアップデートしたら、前のデータが 全部消えた。。。
  66. 66. 66 それを外したので、なくなるのは当たり前。 Monacaとの格闘の歴史(あるある) 原因は CrossWalkはWebViewと独立して いる為、LocalStrageのデータも CrossWalkで保持している。
  67. 67. 67 神プラグインを発見!! Monacaとの格闘の歴史(あるある) CrossWalkを削除=CrossWalkの データをWebViewに移行しないと。。。 色々な方法を模索。。。 何かいい方法が無いか?
  68. 68. 68 やりたい事がすべて詰まってる。 Monacaとの格闘の歴史(あるある) cordova-plugin-crosswalk- data-migration https://github.com/dpa99c/co rdova-plugin-crosswalk-data- migration
  69. 69. 69 Monacaとの格闘の歴史(あるある) 内容を確認すると。。。 • AndroidアプリケーションでCrosswalkを使用する場合、Web ビューの永続データ(ローカルストレージ、IndexedDBなど)は システムWebviewとは別に保存されます。 • つまり、AndroidアプリからCrosswalkを予防措置なしで削除す ると、Crosswalkを含む以前のバージョンからの更新時にすべて の永続データが失われます。 • このプラグインは、Crosswalkストレージの場所からシステムの Webviewストアの場所にデータをコピーする移行メカニズムを提 供し、その永続データをシステムのWebviewで利用できるように して保存します。
  70. 70. 70 Monacaとの格闘の歴史(あるある) はい、神プラグインです。 まぁ、その前に移行する前に良く調べよ ろよ、言う事でもあるのですが。。。 結果的に、それを適応して うまく行きました。
  71. 71. 71 ビルドサーバーエラー事件 Monacaとの格闘の歴史(あるある)
  72. 72. 72 Monacaとの格闘の歴史(あるある) はじめに アシアルさんごめんなさい 今から話すことは 決して、悪口ではありません。 私たちの経験談をただ、面白おかしく しゃべるだけです。
  73. 73. 73 ガーン!! Monacaとの格闘の歴史(あるある) Androidアプリをビルドしました。 Androidのバックボタンの挙動が おかしく、デグレ発生 動作確認後、問題発生!!
  74. 74. 74 Monacaとの格闘の歴史(あるある) 原因は ビルド時に 「Error: TypeError: Invalid Version: android-N」 っと言うエラーが発生
  75. 75. 75 Monacaとの格闘の歴史(あるある) ?? ビルドエラーなら、実行できなのでは? APKファイルが出来ないのでは?
  76. 76. 76 Monacaとの格闘の歴史(あるある) APKが出来たんです!! インストール出来たので、ビルドが出来 たと勘違いして、動作確認してしまった のです!!
  77. 77. 77 Monacaとの格闘の歴史(あるある) よくよく調査すると バックボタンを操作する「cordova- plugin-background-mode」プラグ インを使っていて、それがビルドエラーを 起こした際に、スキップした状態でAPK が出来ていた。
  78. 78. 78 Monacaとの格闘の歴史(あるある) どう言う事やねん!! アシアルさん 当然のごとく問合わせ
  79. 79. 79 Monacaとの格闘の歴史(あるある) サポートからの回答 Cordovaプラグインの設定にAndroidSDKバージョンをチェックする 設定がある場合、Cordova側の処理で、ビルドサーバー側にインス トールされている、最新のAndroidSDKバージョンを取得する際に、 「android-27」のような、末尾が「数字」の場合は正しく処理され るのですが、 「android-N」のような、末尾が「数字以外」の場合は、正しく処 理することができず、今回のエラーになっていることが分かりました。
  80. 80. 80 Monacaとの格闘の歴史(あるある) サポートからの回答(つづき) 現在、弊社側で使用している全てのビルドサーバーを確認したところ、 数台のビルドサーバーに「android-N」が適用されていましたが、 特定のビルドサーバーのみ設定が適応されていない為、処理され た際に、今回のエラーが発生する状況となっておりました。 えーーー!! ハズレひいたの??
  81. 81. 81 Monacaとの格闘の歴史(あるある) アシアルさんごめんなさい 今話した事は 決して、悪口ではありません。 私たちの経験談をただ、面白おかしく しゃべっただけです。
  82. 82. 82 Monacaとの格闘の歴史(あるある) 教訓 ビルド設定にはアルファベットを使わずに、 数値を設定しましょう。 リリース前にデグレチェック(最低限の 動作保証のテストケース)項目を作っ て運用しましょう!!
  83. 83. 83 最後に 【最後に】 - 有限なコスト(C)と期間(D)で、工夫して品質(Q)を上げる。 - あくなきチャレンジ精神でPDCAを回す。 - 自分達の開発スタイルを確立する。 - Monacaは最高!!、サポートも最高!! - Monacaソムリエ最高!! - Monacaでの活用やそれ以外で聞きたい事、事例を聞きたい方はこ の後の懇親会で聞いてください。
  84. 84. ご清聴ありがとうございました。 84

×