Tag: smartphone
mediaQuery における max-width, max-device-width の違い
最近改めて使い分けないとなーと実感したので、その実感を忘れないうちにメモしておこうと思います。 デバイスの幅(width)と device-width の違いについて そもそもの話ですが、そのデバイスで何ピクセル x 何ピクセルで表示できますよーという値と、 device-width の値は異なります。（結果的に同じ場合もあり得ますが） Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices Screensiz.es is a handy database of screen sizes, viewport sizes, and pixel densities for popular … screensiz.es こちらに、デバイスごとの width, device-width がまとめてあります。たまに見ます。 iPhone 3GS の時代であれば、width = 320px, device-width = 320px であったので問題なかったのですが、 retina ディスプレイが出てきてから、 width = 640px, device-width = 320px になってきています。
スマートフォンサイト構築に役立ちそうな本を読んでみた
知り合いの方が本を出されたと聞いたので、早速読んでみました。 簡単に内容をさらっと紹介しつつ、どんな人向けの本なのかも考えてみようと思います。（まだしっかりと読んだわけではないので悪しからず。。。） Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座 『HTML、CSS、JavaScriptはひととおり知っている読者を対象に、スマートフォン制作の実践的なテクニックを解説』とあるので、主にPC向けに今までやってきたような人が、スマートフォンに変わったときにつまずきやすい箇所などを分かりやすく解説している書なのかなーと思いますが、とりあえず実際に読んでみてどんな感じか感想を書いてみようかと思います。 特徴（ポイントだけ） スマートフォンの普及率やUIなどの違いなどから、対応する必要性についてしっかり書いてある 制作環境、特にデバッグ環境について細かく紹介されている ページ数の少ない中、セキュリティに関してもきちんとページ数を割いて説明してある 個人的に、大きくポイントだけ見るとこんなところなのかなーと思いました。 スマートフォンの普及率や、UIなどの違い 単に作り方だけ書いてある本はたくさんあると思いますが、このあたりの**『なぜスマートフォン向けに作る必要があるのか？』**というのは、基本的に押さえておかないといけないと思います。 1章の『スマートフォンサイトの基礎知識』や、4章の『実装設計とトップページの作成』にもあるように、PCで作るときと比べて、具体的にUIや通信速度などに違いがあるため、タッチに合わせた設計であったり、リクエスト数の削減であったり、気をつけるべきところが変わってきますよー、というのは、普通にPC向けに作っているだけでは、ここまで問題にならない箇所ですね。（もちろん気にする必要はあるのですが、比較してという意味で） 単にPC向けに作ったものを、一発変換でスマートフォン向けに変換するサービスとかが一時期（今も？）流行っていましたが、こういう事柄を知識として知っておくだけで、そういったサービスでは問題を解決できないことを理解するところから始める、というのは大事だなーと思いました。 制作環境、特にデバッグ環境 新しい分野での制作において、環境構築というのは思っている以上に時間のかかる工程です。 スマートフォン構築では、最終的にはスマートフォンで動作することになり、ここがPC向けの制作とは大きく異なるところになります。なので、スマートフォンで制作、閲覧したときにどういうネットワークの流れで閲覧できるのか、あたりも図で詳しく説明してあります。ありがたいですね。 また、PC向けに作っていたときには問題にならなかった、『制作環境と閲覧環境が別になる』というところを踏まえた、PC上でのシミュレータによるデバッグ方法から、スマートフォン実機でのデバッグ方法まで紹介されています。（iOS6から追加された、Safariからのリモートデバッグまで紹介されているので、かなり最新の情報まで網羅されているのでは？と思います。） スマートフォンでのWebの開発経験がない人にとっては、一通り詳しく紹介されているのでありがたいのではないかなーと思います。 セキュリティ これは、前に参加した 勉強会 でもそうだったのですが、自分で試す以上のことをやる上で、最低限このあたりの話は触れておかなければならないところだなーと思いました。 後半かなり全方位な内容に触れていて、内容盛りだくさんなのですが、やはりこのあたりを削らないところにこの本の意義を感じました。とはいえ、セキュリティの専門書ではないので、さらに踏み込んだ内容に関しては、きちんと自分で調べるなりする必要はあると思います。（これは自分自身に言いきかせる意味でも） 誰に向いてそうか考えてみる もともと想定されている読者はもちろんなんですが、それに加えて、通常のWebサイトを作っている制作者よりも、意外と異業種から転身されたプログラマー寄りな方に向いているのではないかな？と思いました。 そういった方が、通常のマークアップの基本的な内容が載っている本に加えて、この本を一通り読めば、スマートフォンサイトの構築には問題ないのかなーと思います。また、サイトだけではなくWebアプリであっても本の知識は十分活かせますし、最新の情報やはまりやすいポイントが網羅されているので、そういう方に効果的かもしれません。 逆に、jQueryを読み込んで、jQueryプラグインを入れるだけのWebサイト制作者にとっては、後半部分はあまり役に立ってくれないのではないでしょうか。この本の中にもあるように、基本的にjQueryを使わずに書いてあるサンプルコードが大半であるため、汎用性がある反面、jQuery経由でしか扱ったことの無い人にとっては応用が効かなくなるかもしれません。ただそれでも、前半部分を読んで前提としての知識を補う分には十分かなという印象です。 まとめ 個人的には、苦労する前にこういう本を読んでおきたかったなという感じです。『iOSで更新されないキャッシュファイルの落とし穴』あたりもそうなんですが、実際にやってみてはまった経験とかがけっこうあるので、こういうピンポイントではまりどころを紹介してくれているのは、非常に助かるなーと思いました。あといくつか知らないものもあったので勉強になりました。 tips的なところは、日々新しい内容に変わっていく部分もあると思うので、古くならないうちに読むとよりためになるのではないかなと思います。（改訂するとき大変そう・・・） 参考URL Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座(Amazon)