マルチブラウザ やりました

sugie takafumi

アジェンダ

・自己紹介

・話の概要

・なにをやったか

・振り返り

自己紹介

sugie takafumi (@sssgggiii)

frontend engineer

and server-side

- i.Color co.,Ltd

- playing guitar, drums

話の概要

Chromeだけでプレイできるゲームを、

他ブラウザでもプレイできるようにした話

その時の苦労とか、知見とか

ここから内容

プロジェクト立上げ

マルチブラウザ対応して！

3人で1.5ヶ月で！

Firefox, Edge, IE11

プロジェクト立上げ

マルチブラウザ対応して！

3人で1.5ヶ月で！

Firefox, Edge, IE11

メンバー

フロントエンドエンジニア３人

全員マルチブラウザ対応未経験

溢れ出る不安

溢れ出る不安 本当にこの工数でできるのか？

溢れ出る不安 本当にこの工数でできるのか IEとかEdgeとかFFとかIEとか、ちゃんと動くのか？

溢れ出る不安 本当にこの工数でできるのか IEとかEdgeとかFFとかIEとか、ちゃんと動くのか？不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不安不

安不安

とりあえず動かしてみよう ＠開発環境Edge：それなりに動く！

とりあえず動かしてみよう ＠開発環境Firefox：チュートリアルで止まる！！

とりあえず動かしてみよう ＠開発環境IE11：ログインできない！！！！！！！！！！

え・・このPJやばくね？

え・・このPJやばくね？

怖くなってきたので 予防線を張ろうOKとするライン=最低ラインを決める

→えらい人と

・動作止まらないこと

・ゲームの進行に支障をきたさないこと

そして 当面の目標をたてた全ブラウザでチュートリアル突破！

チュートリアル突破への道

まずは「動作しない」系のバグ対応

チュートリアル突破への道

IE11ログインできない問題

別ドメインからのCookie受け入れが拒否

コンパクトポリシーをHTTPヘッダに追加で解決！ http://www.ark-web.jp/sandbox/wiki/240.html

チュートリアル突破への道

IE11ログインできない問題

別ドメインからのCookie受け入れが拒否

コンパクトポリシーをHTTPヘッダに追加で解決！ http://www.ark-web.jp/sandbox/wiki/240.html

チュートリアル突破への道

Firefoxチュートリアルで止まる問題

指定のanimation-nameが無いと怒られている

クォーテーションで括られてると認識できない→クォート外して解決！

http://kuroanco.hateblo.jp/entry/20130929/1380407952

チュートリアル突破への道

Firefoxチュートリアルで止まる問題

指定のanimation-nameが無いと怒られている

クォーテーションで括られてると認識できない→クォート外して解決！

http://kuroanco.hateblo.jp/entry/20130929/1380407952

チュートリアル突破への道

音声でない

→boombox呼び出し時の書き方

チュートリアル突破への道

フルアニメーションがクリックできない

→座標の指定方法

etc ……

チュートリアル突破！！！

同時に、問題を洗い出せた →チケット約５０件

同時に、問題を洗い出せた →チュートリアルの特性

チュートリアル機能の特性

一通りの機能をユーザーに見せる

→ 一通りの機能は確認できた！

このあたりから感じた

結構いけるかもしれない！

いけるかも、の理由

サーバサイドの問題がほぼ出てない

いけるかも、の理由

サーバサイドの問題がほぼ出てない

問題量：js < CSS

いけるかも、の理由

サーバサイドの問題がほぼ出てない

問題量：js < CSS

タスクランナー(gulp)導入済み

いけるかも、の理由

サーバサイドの問題がほぼ出てない

問題量：js < CSS

タスクランナー(gulp)導入済み

→autoprefixerで解決じゃね？

autoprefixer

is 何 css normal style

autoprefiexer

config

css normal style

+ vendor prefix style

autoprefixer

autoprefixerで解決！

autoprefixer

autoprefixerで解決！

だが問題が

autoprefixer

autoprefixerで解決！

だが問題が

元々Chromeでのみ動作する想定のゲーム・・・

autoprefixer

cssはこんな感じ

あっ・・・（察し）

通常のスタイルに戻す必要

autoprefixer

perl + 正規表現で自動化するぞ！

autoprefixer

perl + 正規表現で自動化するぞ！

→i am a programmer!

autoprefixer

perl + 正規表現で自動化するぞ！

→i am a programmer!

無理でした

autoprefixer

パターンありすぎ

autoprefixer

パターンありすぎ

元々のCSSの書き方のバラつき

例：-webkit-gradient

autoprefixer

パターンありすぎ

直し方のパターンも

手で直した(置換)

ノーマルスタイルへ

Can I Use?やpleeeaseで直し方確認

ノーマルスタイルへ

gradient

どうしても変換できないパターン(角度指定)

→グラデーション作り直し

cssの物量 20,000line * 1file 1,000line * 10file

２日かけて直した

autoprefixer実行！ いい感じに直った

この後は細かいレイアウトのバグを残すのみ

順調に外部デバッグ、 ステージング確認完了

リリース！！！

DAUあげ！！！ やった！！！！

DAUあげ！！！ やった！！！！

振り返り１

問題の規模感が分かった時点で精神的に楽になった

→洗い出し作業重要

→チュートリアル特性活かせた

振り返り２

どこまでやるかを予めキッチリ決めておく

→「動く」という言葉の定義

振り返り３

CSSの書き方について、いろいろ分かった

boxスタイルの書き方の経緯

gradientスタイル カオス過ぎ

はじめからマルチブラウザ想定しておくのが吉

マルチブラウザやるなら

OKのラインは決めよう

調査・手戻りあるよ

→認識合わせないと不幸が起こる

タスクランナー必須

最後に

未知なるものに挑戦するのは楽しいよ！

以上