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

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

サーバーとの接続方法

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

  • HTTP(80) ・・・ http://
  • HTTPS(443) ・・・ https://

※ ws:// , wws://(ウェブソケット)も上記ポートを利用する

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

  • FTP(データ:20、制御21 ※パッシブモード時はコネクション側から指定) , FTPs , SFTP
  • SSH(22)

  • Telnet(23)

  • DNS(53)

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

  • Mail Protocol

    • POP3(110) , POP3s (995)
    • IMAP4(143) , IMAP4s (993)
    • SMTP(25/587), SMTPs(465)
  • VPN

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

3 会話集

  • FTP接続方法だけど、SFTPとFTPSは名前が似てるけど全然意味が違うよね。
  • メールサーバがS対応(POP OVER SSL等)してるかどうかは重要だけどみんなあまりわかってないよね。

4 その他

  • コマンドで操作する事も可能

通常はGUIのソフトウェアを使用してFTPやSSHなどを行うだろうが、CLIでコマンドだけでサーバにつなげる事も可能。


5 リンク


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

6-1 接続、確認の為のツール

FTP(データ:20、制御21 ※パッシブモード時はコネクション側から指定) , FTPs , SFTP

  • Filezila,Winscp

SSH(22)

  • Teraterm

Telnet(23)

DNS(53)

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

  • コマンド:nslookup

Mail Protocol

  • ThunderBird

VPN

  • VPN Client Soft

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

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

Index

初めての方へ

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

より深く追求される方へ

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

1 はじめに

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

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

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

3 会話集

  • htaccessを使えるように設定してほしいが、これはapacheがわの設定でしか出来ない。
  • 443ポートでのhttps接続が出来るように設定してほしい。vHostやらopenSSLやら色々準備がいるな。

4 その他

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

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

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

4-2 各種conf

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

4-3 .htaccessとは?

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

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

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

4-4 SSL種証明書の設定や、脆弱性対策にも

SSL証明書の設定後、confで証明書のファイルの指定をしたり、
脆弱性対応の場合、confの設定でHTTPリクエストの一部を制限が必要な事があります。


5 リンク

5-1 httpd.confの概要理解


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

6-1 apache

6-2 nginx


7 未整理


8 関連