なぜデザインが崩れるのか調査開始
どういうときに崩れるのか調査
なぜ崩れを起こすのか、原因を想像してみる。
担当者の報告による「画面が崩れる」を改めて詳しく聞いてみると
・画面に追加したパーツは正常な位置に反映されていた。
・画像は新規リリース分だったが、正しく表示されていた。
・上記からHTMLは正しくリリースされているように見えた。
・スタイルシートに追加した新しいスタイルが適用されなかった。
という報告が得られた。
報告内容をまとめると「css(たぶん画像とJavaScriptも)をキャッシュから読んでいて、HTMLをサーバから取得しているから。」という仮説を立てることが出来る。
ではなぜその現象が起こるのか整理してみると下表のようになる。
| ケース | HTML | CSS | 結果 |
|---|---|---|---|
| ケース１ | 古い | 古い | 古い画面が出る |
| ケース２ | 新しい | 古い | デザインが崩れる |
| ケース３ | 古い | 新しい | デザインが崩れる*1 |
| ケース４ | 新しい | 新しい | 新しい画面が出る |
今回の依頼はケース２（またはケース３、ただし担当さんの証言からはケース２の方が有力）が起こっていた事になる。
前回のエントリで記述した「リリースの問題」を含めて考えると、
になるけど、リリースは「同じ時刻」だったことを考えると「ケース４」だったことになる。
他にどんな時に「ケース２」「ケース３」が発生するのか考えてみると『HTTP Responseの返却値』が正しくない(想定していない動作をした)時という事になる。
改めて整理してみると下表のようになる。
| ケース | HTMLに対するResponse | CSSに対するResponse | 結果 |
|---|---|---|---|
| ケース１ | 304 | 304 | 古い画面が出る |
| ケース２ | 200 | 304 | デザインが崩れる |
| ケース３ | 304 | 200 | デザインが崩れる*2 |
| ケース４ | 200 | 200 | 新しい画面が出る |
リリース直後の正常な状態は、ケース４のみで、ケース１〜３は想定外の事が起こっていると言えるだろう。
ここまでをいったん偉い人にレポート。疑うべきはまず身内からということで、Response返却方法の調査に進む。
WEBリリース時のデザイン崩れに対処してほしいという依頼
またも社内「なんでも屋」の出番です。しつこいですが、所属はマーケティング部です。
今回の依頼は「WEBリリース時にデザイン崩れが起こるので、解決方法はないのか」というものでした。
現象
起こっている現象について担当さんから報告をもらう。
- WEBデザインの大幅な修正をリリースするとデザイン崩れを起こす。(かなりの確率で！)
- 明確に報告をもらったことがあるのは、Firefoxとsafari(Windows版)のみ。
- IE、Opera、safari(Mac版)、Chromeでは報告なし。(が起こっている可能性あり。つまりよくわからんとｗ)
- safari(iPad版)もらしい。今日の依頼のきっかけがたぶんこれ。
まず真っ先に疑ったのが「リリース手順の問題では？」
リリースの手順
担当さんにヒアリングした順番は以下の通り。
- 画像
- JavaScript
- css
- HTML
ふむ、まぁ妥当だよね。
と思いきや、順番に作業しているだけで、最新版がリリースされているか恐らく確認していない。＠管理担当者
その順番に作業しているだけとか言われると、タイミングでリリースが前後する可能性が否定できない気がするんですが。
まさに仕事ではなく「ボタンをぽちぽちする簡単な作業です。」って事かい。
しょうがないのでシステムの人にリリースのログを調べてもらってリリース時刻を確認。
本番サーバへの反映は２分毎のため、ほぼすべてのファイルが、同じ時刻にリリースされてました。
しかし同じ時刻にリリースされているなら、画面崩れを起こす理由がないはず。(過去は知らんが、少なくとも今回は！)
じゃあ、残る可能性は
・css(たぶん画像とJavaScriptも)をキャッシュから読んでいて、HTMLをサーバから取得しているから。
に絞られるのかな。
簡単に解決出来る方法を探してみたら、「Pumpkin Moonshine JavaScriptやCSSの更新時にキャッシュから読ませない」という方法を見つけた。
ということで偉い人に「この方法でどうですか？」と持っていったら、「ダメ」と言われますた。
えーっとダメですかｗ
「ダメ」＝恒久的解決方法が無いか探して欲しい
という意味です。
私の提案は、「運用で何とかしてください」だったため、「最終的にこの方法しかないなら、それは仕方がないけど、何かあるんじゃないの？」と。
ここから怒涛の２日間が始まりました(^_^;)
OB会
高校剣道部のOB会で池袋の土風呂にいって来た。
この店、最近なんかで飲んだような記憶があるけど。。。
参加したのは
- 78-79 1名
- 79-80 2名
- 80-81 4名
- 81-82 1名
- 82-83 1名
- 合計9名
19時スタートで飲み始めて、まぁ社会人だけなんで、なかなかスタートで全員というのも難しいけどね。
ぱらぱら集まりながら、9名そろったのは20時半頃だったかな。
測量のお仕事、建設機器の設計、溶接工、ホテルマン、不動産の営業とか、みんないろいろな仕事してて、それぞれに感心したりしてました。
結婚してたり、子供ができてたり、離婚してたり（離婚率が高い！）、自分の話もやっとカミングアウトしたり(ぉ
昔の話も、今の話もそれなりに楽しくしてきました。
23時ごろお店を追い出されてお開きでした。
カミングアウトしたおかげで、OB会のあと小一時間ほど、池袋駅の改札付近で、お説教（？）されたりしてたら、丸の内線が茗荷谷行きしか残ってなく、若干悲惨な目にあいましたが。
帰りの電車の中でTwitterのTLみてたら、お説教されてる時にリアル友人がほろ酔いでその付近を通過していたようなことをつぶやいてて冷や汗ものだったり。
今回は誰かのメールアドレスの変更がきっかけで集まることになったようだけど、もう少し定期的に集まりたいよね。
参加できなかった人は次回は参加してほしいです。
その前にどうやって連絡先を調べるかそれが問題。
フキドウガワシタ
3本目
明日飛行機に乗るので、水深の浅いところへ。
17日にも潜りましたが台風後にどんな状況か見るためというのもあり、レッツゴー。
最後ということもあり、菊ちゃんのガイドで楽しみました。
ちょっと濁っている場所なので、迷子にならないようと。。。。。。
ふと目の前を見てたら、菊ちゃんのフィンに反応して、穴から出てきた魚が。。。
そしてフィンがいなくなると、器用に同じ穴にバックで入っていく。
ミナミギンポという魚らしいです。
車庫入れ上手だねｗ
ハリセンボン がやたら沢山いたのですが、台風で流れてきたのか、前回気がつかなかったのか。。。汗
そして菊ちゃん、ウミウシ見つけるの得意や。
すごい。あれよあれよと沢山。どうしてそんなに見つかるの？
3本目だけで7種類もみました。
とかいってるうちに、一人行方不明者が。。。。
あれー。いねーよｗ
だから迷子になるなと。
菊ちゃん海面にでて捜索。
おれ海菖蒲の根元でエビをみつけて、撮影タイム。
お尻フリフリしててかわいい。
菊ちゃんが戻るジェスチャーをしているので、着いていく。
周囲を気にしながら、進んでいくんだけど、濁りがひどくて、全然わからん。
まぁ見つかんなくても、浅いし、上がれば船見えるし大丈夫でしょう的な。
しばーらく泳いでると、足をつかまれる。つかまれる？だれに？
ぇ？サメ？(なわけねーか
振り返ったら、行方不明になっていた奴です。前を見ると菊ちゃんは気づいてないのでダッシュで追いかけ、発見したことを報告。
まったく。
そのあとは珍しい魚(台風で流されてきた？)などを見てダイビング終了。
キンギョハナダイの根
2本目
名前のとおり、キンギョハナダイが沢山います(笑)
ここも特に目当ての魚は無く、潜って沢山写真を撮ることが目的。
エントリーしてすぐにハマクマノミとセジロクマノミがお出迎え。
被写体としては、最適だし人気もある。世の中的にはカクレクマノミのニモのほうが人気あるよね。たぶんｗ
アオスジスズメダイがいたんだけど、結局うまく撮影できず。
その後はただひたすらカクレクマノミと格闘。最後の最後でやっときれいに収まってくれた(汗
ちょっと移動した根のところで好奇心旺盛（もとい警戒心が強い？）なハマクマノミのペアを発見。
片方の手で大きいほうと格闘しながら、もう片方で小さいの方を撮影。
これは結構きれいに撮れたんじゃないでしょうか。
で最後あがってくるときに一枚。キンギョハナダイの群れ。
こういうのは、南の海という感じできれいです。
