Index

初めての方へ

(ビギナー用セクション・プロジェクトマネージャー、ディレクター向け)
  1. はじめに
  2. ビギナー向け・ドキュメント
  3. 会話集

より深く追求される方へ

(開発者・フルスタックエンジニア向け)
  1. その他

1 はじめに

アクセシビリティとは

特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。
アクセシビリティは2、高齢者や障害者なども含めたあらゆる人が、どのような環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる

JIS X 8341-3:2016 解説

2 ビギナー向け・ドキュメント

3 会話集

  • 官公庁のサイトでのアクセシビリティ対応は必須

4 その他

  • アクセシビリティ 対応ツール

http://bashalog.c-brains.jp/18/02/28-153729.php

また、一部PowerCMSなどのCMSには8341対応用のプラグインなども存在する。

  • アクセシビリティ 評価ツール

Index

初めての方へ

(ビギナー用セクション・プロジェクトマネージャー、ディレクター向け)
  1. はじめに
  2. ビギナー向け・ドキュメント
  3. 会話集

より深く追求される方へ

(開発者・フルスタックエンジニア向け)
  1. その他
  2. リンク
  3. テスト・デバッグ・ツール
  4. 未整理

1 はじめに

1-1 UI,UXとは何か?

  • UI: ユーザーインターフェイス(User Interface)
  • UX: ユーザーエクスペリエンス(User Experience)

UIとはメニューやボタンの外観、構成を指し、UXとはそれらの利用の快適さを指すと考えておけば良いでしょう。
ただ、良いUI,UXを作るにはそれなりのアイディアと工夫、コンセプトが必要になります。

1-2 Mobile Firstとは?

主にWeb開発において、PC版に先行してモバイル版から開発する手法、またはコンセプト。
言うまでもないですが、モバイル端末はPCに比べ、情報表示量が少なく、操作にも制限があります。
それに最適化する形の開発がモバイルファーストとなります。

2 ビギナー向け・ドキュメント

3 会話集

  • デザイナーがUIだけじゃなくUXまで設計してくれるとありがたいが

4 その他

  • リッチデザイン
  • レスポンシブデザイン
  • アトミックデザイン
  • フラットデザイン
  • マテリアルデザイン
  • フルーエントデザインシステム

5 リンク


6 テスト・デバッグ・ツール


7 未整理

  • 情報デザイン

このセクションではブラウザやデバイスの違いにまつわる様々な要件について述べております。

Index

初めての方へ

(ビギナー用セクション・プロジェクトマネージャー、ディレクター向け)
  1. はじめに
  2. ビギナー向け・ドキュメント
  3. 会話集

より深く追求される方へ

(開発者・フルスタックエンジニア向け)
  1. より深く理解する為に
  2. 関連ワード
  3. 要点チェック
  4. 一般的な規約
  5. 前提知識・資料
  6. テスト、デバッグ方法
  7. その他・関連ツール
  8. 補足

1 はじめに

1-1 ウェブブラウザ・デバイス問題

自分のPCで作ったHTML、CSS,JSのサイトが他人のPCでは上手くレイアウトが再現されない場合があります。
段組みが崩れたりして表示がおかしくなる事が多々あるのですが、その原因は何でしょうか?

原因の多くは下記の2点です。

  • 使っているブラウザが違う(もしくは設定が違う)
  • 使っているデバイス(PCもしくはタブレットやスマホ)が違う

このように使用するブラウザやデバイスの違いで表示崩れなどが起こる問題を

「ウェブブラウザ・デバイス問題」と言います。

2 ビギナー向け・ドキュメント

  • どんなブラウザの種類があるのか?
    • Google Chrome(グーグルクローム)
    • Firefox(ファイヤーフォックス)
    • Microsoft Edge(マイクロソフト エッジ)
    • Internet Explorer(インターネットエクスプローラー)
    • Safari(サファリ)
  • どんなデバイスの種類があるのか?
    • PC windows,mac,linux
    • スマホ、タブレット iOS,Android

3 会話集

  • どんなブラウザやデバイスに対応するのか、推奨ブラウザ を定義しないといけない。

  • 未だに 古いIE を使ってる企業がいるので、対応に困るね。

  • 開発者ツールでレスポンシブ対応してるか確認できたんだけど、実機 だと崩れていたね。


4 より深く理解する為に

本来であればブラウザはウェブサイトを表示する物であり、ウェブサイト製作者はブラウザを開発するわけではない。

しかし、ブラウザの種類は多岐にわたっており、デバイスの違いも含め 差異バグ が存在する。

例えば、IE自体には潜在的なバグや、ブラウザの実装が他の物に比べると独自の物が多数ある。互換性表示などの機能も初歩的なCSSの崩れを生み出す。
企業、工場ではIE系統のブラウザを未だ使用する会社は多いため、気をつけるポイントがいくつか存在する。

IE以外でもブラウザによる差異は複数存在する。(例えばChromeのセキュリティに対する考え方やアラートは年々厳しくなってきている等)

またデバイスによる違い(同じ名称のブラウザであっても)存在する。

これらは主にCSSの表現やJSの挙動、場合によってはクッキー、セッション、SSLの取り扱いにまで影響を及ぼす。

5 関連ワード


6 要点チェック

  • IEのバージョンだけでなく、OSのバージョンにも依存した挙動の違いが存在する。

  • OSに含まれるセキュリティソフトやファイアウォールなどの設定も動作に影響する。

    • browserの設定、ファイアウォール、Windows Defender 等

    • セキュリティソフトを多重に入れる事の弊害も近年多い。

  • 主に表示くずれに影響


7 一般的な規約

  • サイト作成の要件定義時には、ブラウザ問題を踏まえ、必ず推奨ブラウザおよびデバイスを定義する。

  • HTML,CSS,JSに関してもブラウザの対応状況を確認し使用可能、不可な物を明示する。


8 前提知識・資料

  • なぜブラウザ間で実装の違いが生まれるのか?

今更ながらブラウザの違いが気になったので、Chrome・Safari・Firefox・IEのエンジンを調べてみた

※ レンダリングエンジンの違い
※ [W3C(ウェブ標準)](w3c)の実装の違いやブラウザバグ
  • 開発者ツールはJSでのDOMまで生成されている。ソースはサーバで吐き出されたbody

9 テスト、デバッグ方法

  • 開発者ツールで、各デバイスをエミュレート

    ※ ただし、一部正確に再現できない場合あり。
    iOSなど実機で見たら崩れている場合もあるので注意

  • 古いIEなどの動作検証を行うにはどうすれば良いのか?

  • クラウドサービス

    クラウドサービスの中には様々なブラウザやデバイスをエミュレートする物があります。


10 その他・関連ツール

10-1 ブラウザの拡張機能

- Chrome Extention
    クロームエクステンションなどブラウザの機能を拡張する物は多く提供されています。

11 補足

11-1 主にIEに纏わる問題

HTML,CSS,JSはウェブサイトの基本

Index

初めての方へ

(ビギナー用セクション・プロジェクトマネージャー、ディレクター向け)
  1. はじめに
  2. ビギナー向け・ドキュメント
  3. 会話集

より深く追求される方へ

(開発者・フルスタックエンジニア向け)
  1. その他
  2. リンク
  3. テスト・デバッグ・ツール
  4. 未整理

1 はじめに

Webサイトを最終的に構成するのはHTML,CSS,JSこれら3つのファイルです。
いくらPHPなどが背後で動いてたとしてもサーバーによって解釈されユーザーのブラウザに届けられる形式はHTML,CSS,JSの3つとなります。

  • HTML
  • CSS
  • JS

2 ビギナー向け・ドキュメント

  • web に関する全て(フロント技術&HTTP)を知りたい場合
    MDN web docs

    初学習には重厚すぎる内容ですが、確実で性格にフロントエンドやWebまわりのナレッジを習得する事ができるでしょう。

3 会話集

  • HTML4でいきますか? HTML5で行きますか?
  • SASSを使った方がCSSの管理が楽だよね。
  • javascript初心者でもjQueryを使えば便利なライブラリがたくさんあるから、できる事が広がるよね。

4 その他

4-1 トランスパイラという考え方

cssをセレクタを一つづつ書いていくのは大変なのでsass記法などを利用する場合が多い。
またjavascriptに関してもES6など、より便利にプログラミングできる記法でプログラムを作成し変換するという利用法が一般的になっている。

4-2 フレームワーク

ライブラリの集合と言えるのがフレームワークという考え方。
多くのフレームワークには、それぞれの設計思想があり、CSSではBootstrapやFoundationのようなノンデザイナーで、CSSを一つも書く事なくHTMLだけで、特定のデザインを実現させてしまう物もある。
また、javascriptに関してはReactやAngular、Vue.jsなどウェブサイトや、大規模なSPAアプリケーションを制作するのに向いているフレームワークも多い。


5 リンク

5-1 CSS フレームワーク

5-2 Javascript フレームワーク


6 テスト・デバッグ・ツール

CSS,JSともにデバッグの定義は幅広いが、共通して言える事はブラウザによる実装の違いをしっかりと把握する必要があるという事だ。

6-1 CSS

  • chromeやFirefoxをはじめとした開発者ツールを使う事で、レイアウトの崩れなどをデバッグする事ができる。

  • その他、LINT系の静的解析ツール

6-2 JS

  • テストツール: mocha

  • ブラウザ開発者ツール : chrome BlackBox Script等


7 未整理

ポストES6

開発ツール&サーバーサイドJS