2018/01/31 html5j プラットフォーム部 Responsive Web Design の回で喋りました。 実りのない内容ですが、とあるバックエンドエンジニアが頑張ってレスポンシブ対応したドタバタが伝われば幸いです。

1. 初体験で挑む！
ぼっちのRWD対応
html5j Webプラットフォーム部 第20回勉強会
2018/01/31

2. お前だれだ！
大道寺 寿文(だいどうじ としふみ)
某エンタメ系事業系会社のバックエンドエンジニア
● 主なお仕事
○ 自社サービスのバックエンド開発、保守
(Java、PHP、WordPressなど)
● 過去
○ 業務系SI孫請け会社から現職に転職
○ ロボットのアプリ作成、イベント出展 & 登壇サポート
○ IoT試作とか

3. アジェンダ
1. どうしてRWD構築に携わることになったか
2. やったこと
3. できたもの
4. 失敗したこと
5. やってみてよかったと思ったこと
6. まとめ

4. ● 3月、実家業のWebサイトの構築を引き受ける
● 7月、PCサイトリリース(WordPress製)
● 9月、SPサイト構築を引き受ける
レスポンシブでよろしく
10月中にリリースよろしく
レスポンシブかぁ。聞いたことあるけど
きっとできるやろ、勉強にもなるし、
と思って引き受ける
1. どうしてRWD構築に携わることになったか

5. 1. どうしてRWD構築に携わることになったか
☝こちらがベースとなるサイトです☝

6. 2. やったこと
● SPサイトデザインのpsdファイルをいただいた
● viewportを定義した
● メディアクエリを入れた
● SPのみに出てくるコンテンツの追加
● 後は地道なパーツ単位の調整

7. 2-1. SPサイトデザインのpsdファイルをいただいた
Photoshopのスマートガイドの存在を知らず、
空白やエリアのサイズを調べるために四角で埋めるという愚行を・・・
(いきなりRWD関係ない話)

8. 2-1. SPサイトデザインのpsdファイルをいただいた

9. 2-2. viewportを定義した
Google先生「viewportというものを設定し、デバイスでどう表示されてほしい
かを定義しましょう」
どう表示されてほしいか？
● デバイスの横幅サイズフルにレンダリングされてほしくて
● 拡大縮小はしてほしくない(考えたくない)
ということで、こうなりました。
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
きっといいんだろうこれで。

10. 2-3. メディアクエリを入れた
メディアクエリの境界
● 1000px以下はモバイル表示
○ PCサイトデザインの最低幅が1000pxだったから・・・
● 700px以下は崩れるのでちょっと変える
○ リリース後に崩れたので入れた
＿人人人人人人人人人＿
＞ なんとなく状態 ＜
￣^Y^Y^Y^Y^Y^Y￣
いいのかこれで・・・？

11. 2-4. SPのみに出てくるコンテンツを追加
SP対応で追加されたコンテンツを追加しました。
追加してCSSで表示/非表示を制御しただけなので、
HTML上は冗長な状態に・・・
PCヘッダ SPヘッダ
いいのかこれで・・・？

12. 2-5. 地道なパーツ単位の調整
デザイン通りに表示する定義をMedia Query内に記述していった。
この時点で時間が無くなってきたのでとりあえずデザインに合えばOKな感じで
どんどん場当たり的なコーディングになる。
● vw定義を使って、デバイス幅に合わせてエリアや文字の幅を設定する
○ 縦長のコンテンツなので、vwを基準にしました
最終的にcssが2500行を超えました。
いいのかこれで・・・？

13. 3. できたもの
https://juji-ya.jp

14. 4. 失敗したこと
● 一人だけで誰にも相談しないのはよくなかった
○ 何が正しいのかわからない
○ 無償でコードレビューしてくれる友達が欲しい
● 悶々とせずに、デザイナーさんに相談もっとすればよかった
○ 愚直にデザインを再現しようとしすぎて大変だった
○ メディアクエリの定義聞けばよかった(ごめんなさいデザイナーさん)
○ PhotoShopの使い方も聞けばよかった
● CSS設計ってなんだろう状態だったこと
○ 場当たり的なCSSコーディングばかりになってしまった
○ 文字の指定方法⇒px, vw, em, rem全部あるよ・・・
○ 最終更新から数か月経った今、自分に理解できないコードになりつつある・・・
○ これを機に勉強してみよう、CSSのDRY

15. 4. 失敗したこと
● 最初から実機で確認をする環境を作っておけばよかった
○ PC版Google Chromeのスマホ表示では、実機とフォントサイズが全然違うという罠
○ ある程度できた⇒Staging公開⇒実機確認⇒全然思ったんと違う
○ プルリクマージですぐ公開される環境を用意して運用するなど

16. ● 挑戦したことには意味はあった
○ 知らぬ存ぜぬではなく、やってみたことでわかったことは色々あった
○ 簡単に「レスポンシブ対応やろうず」とか言わないだろうきっと
○ でも、ある程度枯れつつあるのかな
■ ggれば実装の情報は色々出てくる
● 本業でのフロントエンドさんとの協業がやりやすくなった
○ フロントエンドさんを意識するようになった(すごいお方や)
○ フロントエンドさんのプルリク見たり
■ 人のコード見るのすごい勉強になる
5. やってみてよかったと思ったこと

17. 5. やってみてよかったと思ったこと
● リリース後に、ユーザーテスト代わりにFacebookにリンク投稿した
個人で検証できるデバイスには限りがあるので、とりあえず知り合いに見てもら
ってフィードバックをもらった。
● 特定幅でのデザイン崩れ
● typoを見つけてもらった
○ 例：「鑑別書」⇒「鑑別所」になってた
● タップしても上に行かない上へボタン
フィードバックくださった皆様、ありがとうございました。

18. 6. まとめ
● ただのやってみたLTでした！学びがなくてごめんなさい！