モバイル対応やサイト高速化について正しく学習「これからの「標準」を学ぶ マルチデバイス対応サイト構築」
スポンサーリンク
「これからの「標準」を学ぶ マルチデバイス対応サイト構築
全然チェックしていなかったけど、本屋に並んでるのを発見、パラパラと見てみたら面白そうだったので買って帰りました。
デバイス判別についての記述がやたら細かい
デバイス判別については、レスポンシブCSSを組んでいる場合はあまり気にしていない方も多いかもしれません。
ここ１～2年でタブレットも増え、画面の大きさだけならまだしも、Retinaなどの解像密度の高いものが増えたりと、Webを作る側にとっては猛烈に面倒くさいことになってきております。
そこを抜け目なく細かく解説する、エビスコムさん。「ここまで必要か！？」と思えるくらいの細かさです。
大企業や大手ポータルなどでは必要な技術だと思いますが、Welcartなどで小さなECをしているくらいなら、ここまではいらない気も（そこまで人的コストをかけられる余裕もない場合多し）。
しかしながら、知識として覚えておいて損はないでしょう！
画像の使い分けも、Retina対応に
Retinaディスプレイが登場して数年。最初は「解像密度が今までの2倍」程度のものだったのが、今はもっと細かくなっているとか。
Retina対策としては、2倍の大きさの画像をもう一つ用意して、Retina対応機器でウェブサイトが開かれたときに画像を大きいほうに（jQueryプラグインで）置き換える、なんていうことを私もしておりましたが、もっと効率的？な対応方法が掲載されています。
方法は一つではなく、かなり様々な対応の仕方を提案。
WordPressでも、モバイル用の画像最適化向けプラグインはあると思いますが、それにしても、画像のモバイル対応って本当に大変です。面倒くさくて投げ出したくなりますね・・・。
ウェブサイト高速化について
本の購入きっかけとなった一番の内容はこちら、ウェブサイトの高速化についての章です。
Googleで提供されている「PageSpeed Insights」を使ったことがある方も多いと思いますが、「これはどう解決すればいいんだ？」な項目を放置していた自分としては、かなり勉強になりました。
レンダリングブロックって何？な人は要チェック
ただ、実際のウェブサイト運営では外部プラグインやSNSボタンなど、多くの機能を載せることが殆どで、この本のように100点を取るのは難しいでしょう。
例えば、「レンダリングブロック」をなくすために、「ファーストビューに必要なだけ、スタイルシートをheadに書く」という対策があったりします。
スタイルシートは今は殆ど外部ファイル（style.css）に記述し、linkタグでhead内で読み込んでいるため、外部参照となる分表示速度が落ちます。それをなくすため、ファーストビューで最低限必要なスタイルはheadに書いておき、style.cssは後からゆっくり読み込むと、表示遅延も減らせるという按配です。
ちなみに、ファーストビューでのCSSは、英語では「Critical CSS」といい、以下のサイトに掲載の方法で、自身のサイトのファーストビューに必要なCSSをチェックすることが出来ます（ビデオを見るとわかりやすい）。
Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)
この方法を使って私もHTMLサイトでものは試しにとやってみたのですが、かなりの手間な上に成功に至っておりません。結構難しい。
PageSpeed Insightsのスコアは、ある程度は妥協も必要ですが、それでも解決策について学べるのは大きいと思います。
この本に向いている人
- モバイル対応はどうしたらいいかわからない
- 細かくデバイス判別して表示を振り分けたい場合
- PageSpeed Insightsでの警告表示の対応方法がわからない
ウェブサイトのレスポンシブCSSの具体的な組み方などは掲載されていません。レスポンシブCSSについて未経験の方は、著者の「HTML5&CSS3デザインブック
それにしてもエビスコムさん、さすが他とは一線を画すPC参考書を出して下さいます。企画・編集の方のお仕事も素晴らしいですね。私のようなペーペーには有難い存在、次回作も楽しみです。
これからの「標準」を学ぶ マルチデバイス対応サイト構築
- 出版社 マイナビ
- 著者 エ・ビスコム・テック・ラボ
- 価格 ￥ 3,218
- 発売日 2015/04/23
この本の紹介コーナー、何気にかなり参考にさせていただいていますwこちらで見て数冊購入しました。大型書店が近場にないので、助かっております。Googleのやつ、｢スクロールせずに見えるコンテンツ～｣は、私も放置してます。せっかく外部CSSで便利なのに、また昔のように戻るんかい？て感じです…でも点数が上がるなら一度やってみようかな。テンプレート化してるCMSなら簡単にできますしね。
akashiさん、いつもコメント有難うございます。PC本ってそこそこお値段するので、中身がわからないとなかなか買えないですよね。図書館でもたまに新刊で入る時があるので、私は先にそっちで借りてじっくり中身をチェックすることもあります。ありがたやー。
レンダリングブロック対策のCritical CSSの書き出しは、WordPressなら多少楽かもしれないですね。確かに昔（15年位前？）は、HTMLページに直接スタイル書いてましたよねー。懐かしいです。