Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yahoo! JAPANアプリ上で動くWebVIewサービス開発
Search
Naoya Ishii
November 25, 2018
Technology
2
2k
Yahoo! JAPANアプリ上で動くWebVIewサービス開発
アプリ内WebViewで作る実践的なサービス開発について説明します。
Naoya Ishii
November 25, 2018
Tweet
Share
More Decks by Naoya Ishii
See All by Naoya Ishii
React/Reduxで秩序あるコードを書く
naoishii
8
6.5k
JS/Reactを初心者に説明するときに困ったポイント
naoishii
3
470
Other Decks in Technology
See All in Technology
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
18
3.1k
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
160
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
2.1k
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
240
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
460
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
7
1.8k
WHOLENESS, REPAIRING, AND TO HAVE FUN: 全体性、修復、そして楽しむこと
snoozer05
PRO
3
6.4k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
180
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
120
都市伝説バスターズ「WebアプリのボトルネックはDBだから言語の性能は関係ない」 - Kaigi on Rails 2024
osyoyu
18
10k
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
4
420
で、ValhallaのValue Classってどうなったの?
skrb
1
620
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
A Tale of Four Properties
chriscoyier
156
23k
How to Ace a Technical Interview
jacobian
275
23k
The Invisible Side of Design
smashingmag
297
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Transcript
Yahoo! JAPANアプリ上で動く WebVIewサービス開発 Web技術で動くライブクイズ「ワイキュー」 HTML5Conference 2018 ヤフー株式会社 ⽯井直⽮ Copyright (C)
2018 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介 • ⽯井 直⽮ @kaidempa • ヤフー株式会社 • スマホ版トップページ開発 •
現在はワイキューの開発をやっています。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
今⽇お話すること • WebApp on ネイティブアプリ • メリット/デメリット • デバッグの仕⽅ 画像:アフロ
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
ワイキューとは • ライブクイズアプリ • 毎⽇夜9時から配信中! • 技術要素として • 動画 •
リアルタイム配信 • コメント • Yahoo! JAPANアプリ上で動く1サービス Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
ワイキューはweb技術で開発している • React • Redux • TypeScript • (styled-jsx, video.js,
reselect…) Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
アプリ内WebViewで作ってます • Cordova(PhoneGap)とかReact Nativeとかそういうのではない • ヤフーにはこういうサービスがいくつもある • 天気 • ニュース記事
• カレンダー • オリンピックタブ・甲⼦園タブ(期間限定タブ) Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 画像:アフロ
画像:アフロ 画像:アフロ
WebViewによるサービス提供のメリット • アプリ本体の開発チームと 全く別のチームで開発できる • iOS/Androidを同時に開発できる 画像:アフロ Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
アプリ本体の開発チームと全く別のチー ムで開発できる • シンプルなインター フェイスを持つだけ で粗に結合している • アプリ本体との余計 なコンフリクトなく 各サービスの提供に
集中できる Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
アプリ本体の開発チームと全く別のチー ムで開発できる • 各サービスはそれぞれ ⾃前のBEアーキテク チャを持っている • (もちろん、それは全社 で利⽤しているデータ ベースやログインなど
のプラットフォームを 利⽤している) Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
iOS/Androidを同時に開発できる • Web技術は基本的にiOS/Androidに依存しないので同時開発が 容易 • PCと違ってIEのことも考えなくていい • 実⾏ファイルはES5に落とせば動いてくれる Copyright (C)
2018 Yahoo Japan Corporation. All Rights Reserved.
同時に開発できなかった事例 • 時間の⽂字列の取り扱い • Android(Chrome) • iOS(Safari) Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
同時に開発できなかった事例 • HLSの取り扱い • HLS = Http Live Stream •
Safariだと再⽣するだけならぱっとできる。 • ワイキューでは動画の中にメタ情報をつけて問題を出すタイミングな どを制御していますが、そのメタ情報の取得の仕⽅がライブラリを使 うときとSafariネイティブの書き⽅で違いがあった。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
デメリット 画像:アフロ Copyright (C) 2018 Yahoo Japan Corporation. All Rights
Reserved.
デメリット • パフォーマンス • ネイティブアプリほどのパフォーマンスは出ない • WebViewの⽣成にもコストがちょっとかかる • ネイティブ機能を使うのにちょっと⼿間がかかる •
あとで説明します! Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
• メリデメが出たところで、WebViewならではの話をします。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights
Reserved.
ネイティブの機能を使わせてもらう 画像:アフロ Copyright (C) 2018 Yahoo Japan Corporation. All Rights
Reserved.
Push • アプリ任せ • 通知すべきかどうか、いつ通知するかなどはサービスで管理し ている。 Copyright (C) 2018 Yahoo
Japan Corporation. All Rights Reserved.
ログイン情報の共有 • WebViewでのログイン情報はCookieで管理している。 • 普通にWebでログインしている。 • Webでログインした情報をアプリと共有して、アプリでもログインしている。 Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
URLSchemeでネイティブとやりとりする • Web→ネイティブはURLScheme • ネイティブ→webはカスタムイベント • ユーザー情報をください! • 未ログインなのでログインさせてください! •
別のIDでログインさせてください! • もう終わるんでWebView閉じてください! • など Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Web→ネイティブ • iframeを使ってURLSchemeを呼び出している • 呼ぶだけしかしてない Copyright (C) 2018 Yahoo Japan
Corporation. All Rights Reserved.
ネイティブ→web • URLSchemeによってネイティブアプリが何かしらの処理を⾏ い、処理結果などをwebに送ってもらう。 • 予め取り決めしておいたカスタムイベントをアプリに発⽕して もらい、JSではイベントをlistenするだけ。 Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
ネイティブアプリのように⾒せる 画像:アフロ Copyright (C) 2018 Yahoo Japan Corporation. All Rights
Reserved.
WebViewのフチをなくして全画⾯に • アプリ側の設定 • もちろん、必⽤なら つけてもOK 画像:アフロ Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
SPAで作る • 通常の遷移だとwebっぽいのでSPAで作っていく。 • SPA = Single Page Application •
遷移なしのアプリケーションでもいいけどURLという概念があったほ うが作りやすいと思う • URLはつけてもユーザには⾒えない • ので、多少変なURLでも⼤丈夫 • 適当なURLって恥ずかしくないですか? Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
SSRは必要に応じて • 必⽤に応じてSSRする • SSR = Server Side Rendering •
ワイキューではやっていない • 初期レンダリング速度を要求されるようなサービスではない • 任意のページに直接アクセスされることもない • アプリ内から⾒られるのでSEO対策も必要ない Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Androidの戻るボタンをオーバーライド • デフォルト動作のブラウザバックの代わりに、戻るボタンを押 したというイベントを起こしてもらう • SPA的にブラウザバックでいいときはブラウザバックさせるし、 確認ボタンとか出したいときはそういうふうにフックさせる Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
• 実例 戻るボタン 戻るボタン Copyright (C) 2018 Yahoo Japan Corporation.
All Rights Reserved.
実際の開発について 画像:アフロ Copyright (C) 2018 Yahoo Japan Corporation. All Rights
Reserved.
開発環境 • Google Chrome • Safari • iOS Emulator •
Android Emulator • Chrome/Safari : Emulator = 9 : 1 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
ブラウザでのデバッグ • アプリからのイベントは通常のカスタムイ ベントなので、イベントを発⽣させるボタ ンがあればエミュレートできる。 • その他のAPIやSocketなども最終的には ReduxのActionとして処理される。 • 対応するActionを叩くボタンがあれば確認
ができる。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
シミュレーターでのデバッグ • iOSシミュレーターでのデバッグ • localhostに開発環境を⽴てる • アプリのWebViewでlocalhostにアクセスするようにしてビルド • エミュレーターでアプリのWebViewを開く •
PCでsafariを開く • 開発→シミュレーター→localhost • インスペクタが開く✌('ω')✌ Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
シミュレーターでのデバッグ • 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.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
まとめ • Web開発者もアプリ開発に貢献できる! • Webの開発/デバッグ技術をそのまま使える • アプリ開発チームと仲良くしてより便利でリッチなサービスへ Copyright (C) 2018
Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ブースもやってます
ワイキューよろしくね Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
ありがとうございました。 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.