狠狠撸
Submit Search
マルチブラウザやりました (DMM.Study Night)
?
1 like
?
2,578 views
Takafumi Sugie
Follow
DMM.Study Night フロントエンド勉強会 https://atnd.org/events/71568
Read less
Read more
1 of 68
Download now
Download to read offline
More Related Content
マルチブラウザやりました (DMM.Study Night)
1.
マルチブラウザ やりました sugie takafumi
2.
アジェンダ ?自己紹介 ?話の概要 ?なにをやったか ?振り返り
3.
自己紹介 sugie takafumi (@sssgggiii) frontend
engineer and server-side - i.Color co.,Ltd - playing guitar, drums
4.
話の概要 Chromeだけでプレイできるゲームを、 他ブラウザでもプレイできるようにした話 その時の苦労とか、知見とか
5.
ここから内容
6.
プロジェクト立上げ マルチブラウザ対応して! 3人で1.5ヶ月で! Firefox, Edge, IE11
7.
プロジェクト立上げ マルチブラウザ対応して! 3人で1.5ヶ月で! Firefox, Edge, IE11
8.
メンバー フロントエンドエンジニア3人 全員マルチブラウザ対応未経験
9.
れ出る不安
10.
れ出る不安 本当にこの工数でできるのか?
11.
れ出る不安 本当にこの工数でできるのか IEとかEdgeとかFFとかIEと か、ちゃんと動くのか?
12.
れ出る不安 本当にこの工数でできるのか IEとかEdgeとかFFとかIEと か、ちゃんと動くのか?不安 不安不安不安不安不安不安不 安不安不安不安不安不安不安 不安不安不安不安不安不安不 安不安
13.
とりあえず動かしてみよう @開発環境 Edge:それなりに動く!
14.
とりあえず動かしてみよう @開発環境 Firefox:チュートリアルで止まる!!
15.
とりあえず動かしてみよう @開発環境 IE11:ログインできない!!!!!!!!!!
16.
え??この笔闯やばくね?
17.
え??この笔闯やばくね?
18.
怖くなってきたので 予防線を張ろう OKとするライン=最低ラインを決める →えらい人と ?動作止まらないこと ?ゲームの進行に支障をきたさないこと
19.
そして 当面の目標をたてた 全ブラウザでチュートリアル突破!
20.
チュートリアル突破への道 まずは「動作しない」系のバグ対応
21.
チュートリアル突破への道 IE11ログインできない問題 別ドメインからのCookie受け入れが拒否 コンパクトポリシーをHTTPヘッダに追加で解 決! http://www.ark-web.jp/sandbox/wiki/240.html
22.
チュートリアル突破への道 IE11ログインできない問題 別ドメインからのCookie受け入れが拒否 コンパクトポリシーをHTTPヘッダに追加で解 決! http://www.ark-web.jp/sandbox/wiki/240.html
23.
チュートリアル突破への道 Firefoxチュートリアルで止まる問題 指定のanimation-nameが無いと怒られている クォーテーションで括られてると認識できない →クォート外して解決! http://kuroanco.hateblo.jp/entry/ 20130929/1380407952
24.
チュートリアル突破への道 Firefoxチュートリアルで止まる問題 指定のanimation-nameが無いと怒られている クォーテーションで括られてると認識できない →クォート外して解決! http://kuroanco.hateblo.jp/entry/ 20130929/1380407952
25.
チュートリアル突破への道 音声でない →boombox呼び出し時の書き方
26.
チュートリアル突破への道 フルアニメーションがクリックできない →座標の指定方法
27.
etc ……
28.
チュートリアル突破!!!
29.
同時に、問題を洗い出せた →チケット約50件
30.
同時に、問題を洗い出せた →チュートリアルの特性
31.
チュートリアル機能の特性 一通りの機能をユーザーに見せる → 一通りの機能は確認できた!
32.
このあたりから感じた
33.
结构いけるかもしれない!
34.
いけるかも、の理由 サーバサイドの問題がほぼ出てない
35.
いけるかも、の理由 サーバサイドの問題がほぼ出てない 問題量:js < CSS
36.
いけるかも、の理由 サーバサイドの問題がほぼ出てない 問題量:js < CSS タスクランナー(gulp)導入済み
37.
いけるかも、の理由 サーバサイドの問題がほぼ出てない 問題量:js < CSS タスクランナー(gulp)導入済み →autopre?xerで解決じゃね?
38.
autopre?xer is 何 css normal style autopre?exer con?g css normal
style + vendor pre?x style
39.
autopre?xer autopre?xerで解決!
40.
autopre?xer autopre?xerで解決! だが問題が
41.
autopre?xer autopre?xerで解決! だが問題が 元々Chromeでのみ動作する想定のゲーム???
42.
autopre?xer cssはこんな感じ
43.
あっ???(察し)
44.
通常のスタイルに戻す必要
45.
autopre?xer perl + 正規表現で自動化するぞ!
46.
autopre?xer perl + 正規表現で自動化するぞ! →i
am a programmer!
47.
autopre?xer perl + 正規表現で自動化するぞ! →i
am a programmer! 無理でした
48.
autopre?xer パターンありすぎ
49.
autopre?xer パターンありすぎ 元々のCSSの書き方のバラつき 例:-webkit-gradient
50.
autopre?xer パターンありすぎ 直し方のパターンも
51.
手で直した(置换)
52.
ノーマルスタイルへ Can I Use?やpleeeaseで直し方確認
53.
ノーマルスタイルへ gradient どうしても変換できないパターン(角度指定) →グラデーション作り直し
54.
cssの物量 20,000line * 1?le 1,000line
* 10?le 2日かけて直した
55.
autopre?xer実行! いい感じに直った
56.
この後は細かいレイアウトの バグを残すのみ
57.
順調に外部デバッグ、 ステージング確認完了
58.
リリース!!!
59.
DAUあげ!!! やった!!!!
60.
DAUあげ!!! やった!!!!
61.
振り返り1 問題の規模感が分かった時点で精神的に楽になっ た →洗い出し作業重要 →チュートリアル特性活かせた
62.
振り返り2 どこまでやるかを予めキッチリ決めておく →「動く」という言葉の定義
63.
振り返り3 CSSの書き方について、いろいろ分かった boxスタイルの書き方の経緯 gradientスタイル カオス過ぎ
64.
はじめからマルチブラウザ想 定しておくのが吉
65.
マルチブラウザやるなら OKのラインは決めよう 調査?手戻りあるよ →認識合わせないと不幸が起こる タスクランナー必須
66.
最后に
67.
未知なるものに挑戦するのは 楽しいよ!
68.
以上
Download