Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Yahoo! JAPANアプリ上で動くWebVIewサービス開発

Naoya Ishii
November 25, 2018

Yahoo! JAPANアプリ上で動くWebVIewサービス開発

アプリ内WebViewで作る実践的なサービス開発について説明します。

Naoya Ishii

November 25, 2018
Tweet

More Decks by Naoya Ishii

Other Decks in Technology

Transcript

  1. ⾃⼰紹介 • ⽯井 直⽮ @kaidempa • ヤフー株式会社 • スマホ版トップページ開発 •

    現在はワイキューの開発をやっています。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  2. ワイキューとは • ライブクイズアプリ • 毎⽇夜9時から配信中! • 技術要素として • 動画 •

    リアルタイム配信 • コメント • Yahoo! JAPANアプリ上で動く1サービス Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  3. ワイキューはweb技術で開発している • React • Redux • TypeScript • (styled-jsx, video.js,

    reselect…) Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  4. アプリ内WebViewで作ってます • Cordova(PhoneGap)とかReact Nativeとかそういうのではない • ヤフーにはこういうサービスがいくつもある • 天気 • ニュース記事

    • カレンダー • オリンピックタブ・甲⼦園タブ(期間限定タブ) Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  5. 同時に開発できなかった事例 • HLSの取り扱い • HLS = Http Live Stream •

    Safariだと再⽣するだけならぱっとできる。 • ワイキューでは動画の中にメタ情報をつけて問題を出すタイミングな どを制御していますが、そのメタ情報の取得の仕⽅がライブラリを使 うときとSafariネイティブの書き⽅で違いがあった。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  6. URLSchemeでネイティブとやりとりする • Web→ネイティブはURLScheme • ネイティブ→webはカスタムイベント • ユーザー情報をください! • 未ログインなのでログインさせてください! •

    別のIDでログインさせてください! • もう終わるんでWebView閉じてください! • など Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  7. SPAで作る • 通常の遷移だとwebっぽいのでSPAで作っていく。 • SPA = Single Page Application •

    遷移なしのアプリケーションでもいいけどURLという概念があったほ うが作りやすいと思う • URLはつけてもユーザには⾒えない • ので、多少変なURLでも⼤丈夫 • 適当なURLって恥ずかしくないですか? Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  8. SSRは必要に応じて • 必⽤に応じてSSRする • SSR = Server Side Rendering •

    ワイキューではやっていない • 初期レンダリング速度を要求されるようなサービスではない • 任意のページに直接アクセスされることもない • アプリ内から⾒られるのでSEO対策も必要ない Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  9. 開発環境 • Google Chrome • Safari • iOS Emulator •

    Android Emulator • Chrome/Safari : Emulator = 9 : 1 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
  10. シミュレーターでのデバッグ • Anfdroidシミュレーターでのデバッグ • localhostに開発環境を⽴てる • アプリのWebViewで10.0.2.2にアクセスするようにしてビルド • AndroidのエミュレーターからはPCのlocalhostに10.0.2.2でアクセスできる •

    エミュレーターでアプリのWebViewを開く • PCでChromeを開く • chrome://inspectにアクセス • 該当のWebViewをinspect • インスペクタが開く✌('ω')✌ Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.