新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。もう新人じゃないかも…

学習記録:モバイル・マルチデバイス対応、参加記録:AtCoder

[学習記録] Webフロントエンド

内容:8章 モバイル・マルチデバイスへの対応

モバイル対応・マルチデバイス対応
  • モバイル環境
    • 画面サイズ
    • タッチディスプレイ
      • 指での操作
      • マウスに比べて細かいところは苦手
    • 不安定なネットワーク
    • 低スペック
      • アプリケーションが止まったり落ちたりする
      • 電池の消費も抑えたい
    • 細切れな利用シーン
  • モバイル環境のユーザインタフェース
    • 画面いっぱいに使う
      • たくさんの要素を億とスペースの取り合いになる
      • 画面いっぱいにコンテンツを表示
      • カラムを無くし、リスト形式にして自動的にローティングするなどの工夫も必要
    • ページを階層で表現
      • 複数のナビゲーションを表示できない
      • 左右や上下の階層で表現する
    • フィードバックをする
      • ハードウェアキーボードがない
      • 動作の開始・終了のフィードバックが必要
      • タップ時には色を変えるなど
    • 対話的な表現
    • オフライン対応を書かさない
  • モバイルへの対応
    • モバイルファースト
      • デスクトップより先にモバイルのデザインから考えてみる
      • 制限の多いモバイルでは必要な要素やアクションに絞る(フォーカスする)ことが有効
      • モバイルから生まれるイノベーションを大事に
    • アプリ・専用サイト・汎用サイト
      • ネイティブアプリ:OSがサポートしているObjective-CJavaで作成。動作が軽やかだがマルチでバイス対応には不向き
      • 専用サイト:デバイスごとのWebサイト。各デバイスに最適な表示ができるが、管理の行程が増え煩雑になる
      • 汎用サイト:1つのソースで様々なデバイスに対応。コスパがよい
モバイル専用サイト
  • ユーザエージェントによる振り分け
    • サーバ再度やjavaScriptのっプログラムを使って振り分ける
    • ユーザエージェント:iPhoneAndroidを識別できる文字列
  • viewport
    • スマホでサイトを表示すると、文字や画像が小さく表示されてしまう
      • 初期値ではディスプレイを980pxとして表示するため
      • 横幅に応じてみやすくするには、viewportという設定をHTMLのmeta要素内に記述
      • 横画面にしたときに文字サイズが変わらないようにもする必要
      • さらに、幅をデバイスサイズに合わせ、拡大縮小できないようにすることでネイティブアプリと同様の表示になる
<!-- 横幅に応じてみやすく&文字サイズをかえないように -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
/* 拡大縮小できないように */
body {
  -webkit-text-size-adjust: 100%;
}
viewportプロパティ名 内容 デフォルト
width 可視領域の幅。device-widthでその端末の幅を指定可能 980px
height 可視領域の高さ。デフォルト値はwidthとの比率から算出
initial-scale ページ読み込み時の表示倍率
minimum-scale ページを縮小するときの最小倍率 0.25
maximum-scale ページを拡大するときの最大倍率 1.6
user-scalable ズーム操作できるかどうか yes
  • 画面解像度
    • Retina環境では画像がぼやけてしまう
    • ピクセルに関しての知識が必要
      • デバイスピクセル:端末自体の物理的なピクセル
      • CSSピクセル:論理的なピクセル
    • Retinaではデバイスピクセルは640x960、CSSピクセルは320x480
      • 4つのデバイスピクセルを使って1つのCSSピクセルを表示
      • デバイスピクセルとCSSピクセルの比率をDevice Pixel Ratioと呼ぶ。Retinaは1:2
  • タップエリア
    • 様々な画面サイズの端末を指で操作するため、不確実性があがる
    • Appleではタップエリアを44px(7mm)で、Googleでは48px(9mm)で作成するよう推奨
  • Webクリップアイコン
    • スマホのホーム画面に追加されるアイコンのこと。
    • このアイコンをきちんと設定していると、一目でどのサイトに遷移するかわかる
    • デスクトップ用のfaviconと一緒に設定しておくとよい
レスポンシブWebデザイン
  • 増え続けるデバイスに対応するのではなく、画面サイズに応じてWebサイトを作る
    • 基本的に同一URL、ワンソースで実現
    • 特徴
      • レイアウトを変更しやすいようにグリッドを中心にしたデザイン
      • 画面サイズの変更に追随する可変レイアウト
      • 画面サイズごとにレイアウトを振り分けるためにメディアクエリを使用
  • ワークフロー
    • 通常のWebサイトでは
      • 画面設計・ワイヤーフレームが完成後、Photoshopなどでデザインカンプを作成
      • 画面をスライスしたあとにマークアップ
      • さまざまな画面サイズに対応したいとき、従来の方法では全てのパターンが想定できない
    • 近年では
      • 画面設計後、基本的なページやボタン・フォームなど各パーツのデザインで済ませる
      • コーティングしながら作っていく
      • 作ってみたら崩れていた、あるパターンに対応できていなかった、という問題を防ぐ
    • 具体的なフロー
      • 1) 画面設計・ワイヤーフレーム完成
      • 2) 基本的なページのデザイン・各パーツのデザイン
      • 3) 各パーツをHTML、CSSで組みモジュール化
      • 4) スタイルガイド作成
      • 5) 各ページ作成
  • 画面設計
    • Webサイトに必要なパーツを考える
      • ロゴ、ナビゲーション、画像、コンテンツなど
    • それらのパーツをどのように表示するかワイヤーフレームを作成
    • グリッドデザイン
      • ページを水平・垂直方向のカラムに分割し、それにそってレイアウトしていく
    • 可変レイアウト
      • 画面サイズに応じて、それぞれの要素の幅も伸縮して表示されるレイアウト
      • それぞれの要素の幅を相対的な値で指定
      • 全て相対的にしてしまうと見づらくなることがあるので、一番外側のボックスだけは固定値にする
    • メディアクエリ
      • 解像度やウィンドウ幅、向きなどの条件によって適用するCSSを切り替える機能
      • 条件や分岐が多かったり、それぞれたくさんのスタイルを適用させると管理が複雑になる
      • レイアウト共通部分をかえる際のプラスαとして使用することを推奨
      • ブレークポイント(スタイルを切り替える基準となるウィンドウ幅)を決め、適用するCSSを記述

[参加記録] AtCoder Regular Contest 027

結果

  • A問題100点、B問題30点の計130点

感想

  • 初参加だったが、なかなか楽しかった
    • ぱっと見簡単そうなB問題に手こずりすぎた
      • 数字と対応している既知の文字から連鎖的に数字がわかる場合が難しい
      • 最初に汚いコードを書いてしまった結果、それを弄くり回しているうちに訳分からなくなってしまったのが残念。
      • 力技だけど解いた http://arc027.contest.atcoder.jp/submissions/207639
      • とりあえず先の問題に進んでみても良かったかも
    • なかなか楽しかったので次回以降も参加してみる予定
      • Union-Findとか勉強します。