Recommended
More Related Content
Similar to Pwa night vol.20~初めてのPWA開発で学んだ事～
Similar to Pwa night vol.20~初めてのPWA開発で学んだ事～ (20)
Pwa night vol.20~初めてのPWA開発で学んだ事～
- 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ） VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社（100％） 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。 令和初の上場企業！！ 親会社が！！
- 3. 自己紹介 3 名前 山下大輔（やました だいすけ） 所属 開発部 マネージャー 出身 横浜市青葉区（たまプラーザ） 住まい 宝塚市（兵庫県） 趣味 競馬、陸上 得意分野 ３D全般（OpenGL、DirectX、Unity） SNS Facebook：@longjumper.daisuke Instagram：@deepimpact_daisuke Twitter：@jumper_daisuke 資格 Android技術者Basic、JSTQB FL
- 10. 各フェーズでの出来事-設計フェーズ 10 • システム概要 – ザックリいうと、検索システム • 検索した物の状態を確認 • 検索内容を保存できる • マップと連携 – ユーザー認証 • Azureの認証機能使ってログイン – プロジェクト前提事項 • 既存のPC版があり、機能限定としてモバイル版を設計
- 14. 各フェーズでの出来事－設計フェーズ 14 • 設計フェーズの出来事 – 基本的にWeb、モバイル開発と変わらない。 • ユーザーから見たら今回の要件でPWAだからはほぼなかった。 • 弊社としても特別なフローが入ったわけではない。 –画面設計書作成 –デザイン（Prottでプロトタイプレビュー） • ハイブリッドアプリ開発同様のフローで行った。 何か起こったわけではない。 平和そのもの。
- 16. 各フェーズでの出来事－製造フェーズ 16 • Safariが大変 – とにかくクセが強い • レイアウト崩れがおこりやすい –マイナーバージョンでレイアウトが異なることがある • Chromeに合わせるのではなく、Safari優先 • データの持ち方が大変 –リソースの持ち方など、考える必要がある とにかくSafari
- 22. 各フェーズでの出来事－テストフェーズ 22 • バルテスメソッドで品質向上 – 体系的なアプローチ • テスト計画、設計、実施、分析を実施 –テストの抜け漏れを防ぐ • 品質管理チームが基本設計から参画 –異常系や競合ケースでの考慮漏れに特化してレビュー https://www.valtes.co.jp/software_test/method.html QRコード：バルテスメソッド
- 23. 各フェーズでの出来事－テストフェーズ 23 • テストで意識したこと – ハイブリッドアプリと変わらない • PWAといっても、テスト自体変わらなかった –Monaca開発でモバイルになれていた –こんなものかと思って、気にせずにテストを進めていた – ホーム画面追加の挙動には注意 • ホーム画面系のテストは面倒くさかった • マニフェストファイルを更新すると、データを消さないと更新されない
- 25. めちゃ困ったこと 25 • Azureとの連携でハマった – 問題はログインできない • サーバー環境が整う迄、別画面を作っていた • いざ連携したがうまくいかない • そこから先に進めない。困った。。。 – ログインはシングルサインオンを採用 • 問題はクロスドメインが発生 • ログイン認証はできたが、その結果がクライアントに帰ってこなかった。
- 27. めちゃ困ったこと 27 • クロスドメインが発生した原因 – サーバーがシングルサインオンに向いていない • シングルサインオンとはトークン情報でユーザー認証すること • 元も子もないが、Webサーバーが古い仕組みだった。 • ドメインのセッション情報（URL）しか返ってこなかった。 • GateWayが邪魔してた。。 • PWAと他アプリやブラウザはドメインのセッション情報が共有できない 向いてないことを一生懸命 一週間ほど悩みました。
- 28. めちゃ困ったこと 28 • 悩んだ末解決 – クライアント側のenvファイルを編集 • リダイレクト設定を変更 –サーバーが返すURLを、クライアントと同じドメインのURLにする ようやく解決！
- 30. めちゃ困ったこと 30 • 外部アプリ連携でハマった – うまく外部アプリを起動できない • URLスキームでシンプルにできるだろうと思った • 某チャットアプリを起動しようとしたが、うまくいかない – HTTPSで指定 • PCのWebアプリだったら、うまくいったがPWAはうまくいかない • 別のアプリだと、HTTPSでもうまくいった –タグ指定でもうまくいった • PWAだけうまくいかない。。。。謎。
- 31. めちゃ困ったこと 31 • URI指定方法が異なったことが原因 – アプリによっては指定方法を変えないといけない • うまくいったアプリ – HTTPSの指定でうまくいった – タグしていてもうまくいった • うまくいかなかったアプリ – JavaScriptで呼び出した – URLをコンポーネントを呼び出したらうまくいった – 結論から言えば、呼び出したいアプリがHTTPSのに対応してなかっただけ これも1週間ほど悩んで解決 実装例はこちら
- 32. めちゃ困ったこと 32 <template> <div> <img :src="img.LINE" @click="line()" /> <img :src="img.LINEWORK" @click="lineworks()" /> </div> </template> <script> import { CommonConstants } from '~/constants/common.js' export default { props: ['copyText'], computed: { LINEURL() { return CommonConstants.LineUrlSchema + encodeURIComponent(this.copyText) }, LINEWORKSURL() { return ( CommonConstants.LineWorksUrlSchema + encodeURIComponent(this.copyText) ) } } } </script> components/xxxxx.vue
- 33. めちゃ困ったこと 33 export const CommonConstants = { // LineURLスキーム LineUrlSchema: 'https://line.me/R/msg/text/?', // LineWorksURLスキーム LineWorksUrlSchema: 'lineworks://message/send?version=11&message=', } constants/common.js 見えへんって。 小っちゃくてごめんなさい。
- 34. 34 最後に 【最後に】 - Safariはクセが強い - PWAのデザイン（レイアウト）は（弊社では）iOSに寄せる - Monacaと同じと思っちゃダメ - PWAはあくまでWebでサーバー上で動作（MonacaはOS上） - サーバー構成を把握する必要があった - Monacaでの開発経験を活かせたが、逆にそれもアダになった。 PWAはiOSが面倒くさい。