外部からの接続(HTTP,FTP,SSH・・・)

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

サーバーとの接続方法

ブラウザを通して接続できるのはサーバの下記のポートのみである。

  • HTTP(80)
  • HTTPS(443)

それ以外にもサーバとの接続には様々な形式が利用され、それらには個別にポート番号が割り当てられている。

  • FTP(データ:20、制御21)
  • SSH(22)

  • Telnet(23)

  • SMTP(25)

  • DNS(53)

  • DHCP(サーバ:67、クライアント:68)
  • POP3(110)

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

3 会話集


4 より深く理解する為に


5 関連ワード


6 要点チェック


7 一般的な規約


8 前提知識・資料


9 テスト、デバッグ方法


10 その他・関連ツール


11 補足

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

アクセシビリティとは

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

JIS X 8341-3:2016 解説

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

3 会話集


4 より深く理解する為に


5 関連ワード


6 要点チェック


7 一般的な規約


8 前提知識・資料


9 テスト、デバッグ方法


10 その他・関連ツール


11 補足

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

1-1 UI,UXとは何か?

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

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

1-2 Mobile Firstとは?

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

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

3 会話集


4 より深く理解する為に


5 関連ワード


6 要点チェック


7 一般的な規約


8 前提知識・資料


9 テスト、デバッグ方法


10 その他・関連ツール


11 補足

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

Index

初めての方へ

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

より深く追求される方へ

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

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 関連ワード

  • ブラウザの種類
  • デバイス
    • OS(PC)
      • Windows
      • Mac
      • Linux
      • ・・・etc
    • OS(Tablet,Smart Phon)
      • iOS
      • Andoroid
      • ・・・etc

    ※ ブラウザやデバイスの違いをUA(ユーザーエージェント)として様々なプログラムで取得可能です。


6 要点チェック

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

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

  • 主に表示くずれに影響※


7 一般的な規約

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

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


8 前提知識・資料

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

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

※ レンダリングエンジンの違い
※ W3C(ウェブ標準)の実装の違いやブラウザバグ

9 テスト、デバッグ方法

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

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

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

  • クラウドサービス

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


10 その他・関連ツール

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

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

11 補足

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

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

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

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

  • HTML
  • CSS
  • JS

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

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

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

3 会話集


4 より深く理解する為に


5 関連ワード


6 要点チェック


7 一般的な規約


8 前提知識・資料


9 テスト、デバッグ方法


10 その他・関連ツール


11 補足

Conf / 設定ファイル(htaccess,各種conf)

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

サーバのミドルウェアは各種設定が必要になる。
Webサーバを始め、何の設定も無しに動作する物はほとんどない。
ただ、設定項目は非常に多いため、自らサーバの設定をする場合を除き、細かく動作を検証してもらう必要がある。

レンタル共用サーバ場合と同じと思って.htaccesすら使えない、phpなどが使えないなどという事もありえる。

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

3 会話集


4 より深く理解する為に

どんなサーバであれ、それぞれ設定ファイルを持ちます。

4-1 設定ファイルの役割

代表的なWebサーバとして
– apache web server
– nginx
– windows server
などが挙げられますが、それぞれ設定ファイルに記述する事により機能を有効にしたり制限したりすることが可能です。

4-2 各種conf

例えば apache web server では ***.confという系統のファイルを編集する事によりドキュメントルートや各プログラムの実行権限などを設定する事ができます。
もちろん、ウェブサーバ以外にも、サーバの挙動を制御するconfが存在しています。

403 .htaccessとは?

.htaccessは主にapache web server で使用されます。

先程あげたconfファイル系統だけで色々なWebサーバの動きを制御できるのですが、バーチャルホストなどを切ってドメイン毎にや、ディレクトリ毎に何かしら権限や挙動を変えたい場合は .htaccessファイルを使用します。

nginxやウィンドウズサーバでは.htaccessとは違ったファイルや形式で設定を行わなければいけないという事も頭に入れておきましょう。


5 関連ワード


6 要点チェック


7 一般的な規約


8 前提知識・資料


9 テスト、デバッグ方法


10 その他・関連ツール


11 補足