ITリテラシー教育

Slide 1

Slide 1 text

ITリテラシー教育 2023.03.21　森山宏啓

Slide 2

Slide 2 text

▼プロフィール • 1984年生まれ、38歳。 • 法学部法律学科卒業 • 新卒で中小SIerに入社。 →創業期ベンチャー →医療介護業界向け事業会社 →2019年に株式会社うるるへジョイン • エンジニアを軸に、バックオフィス・セールス・事業責任者を経験 • 現在は、本業でエンジニアリングマネージャーとして従事しつつ、複業フリーランスとして「茂エンヂニヤリング」という屋号で活動中。 https://type.jp/et/feature/12958/ 自己紹介

Slide 3

Slide 3 text

アジェンダ ● パソコンの仕組み ○ パソコンを構成する要素 ● インターネットの仕組み ○ インターネット通信の基礎 ○ ドメインとDNSについて ● Webサービスの仕組み ○ Webサービスの仕組み ○ サーバーの基礎知識 ○ HTML/CSSの概要

Slide 4

Slide 4 text

パソコンの仕組み

Slide 5

Slide 5 text

パソコンの仕組みまずはじめに、パソコンの仕組みについて説明します。ここでは、みなさんが使っているパソコンはどのような部品でできていて、それぞれの部品がどのような役割をしているのかを説明します。

Slide 6

Slide 6 text

パソコンの仕組みパソコンの構成要素は ● 入力装置 ● 出力装置 ● 記憶装置 ● 制御装置 ● 演算装置の５つで成り立っています。

Slide 7

Slide 7 text

パソコンの仕組みパソコンの構成要素は ● 入力装置：パソコンへの命令を行う ● 出力装置：操作の結果を人間が見られるようにする ● 記憶装置：入力されたデータなどを保存しておく ● 制御装置：命令の実行をコントロールする ● 演算装置：計算をするの５つで成り立っています。

Slide 8

Slide 8 text

パソコンの仕組みパソコンの構成要素は ● 入力装置：マウス・キーボードなど ● 出力装置：ディスプレイ（モニター）・プリンターなど ● 記憶装置：ストレージ（HDD・SSD）・メモリなど ● 制御装置：CPU ● 演算装置：CPU・GPUなどの５つで成り立っています。

Slide 9

Slide 9 text

CPU ストレージメモリ入力出力パソコンのパーツの役割を例えてみると？

Slide 10

Slide 10 text

● CPU ○ 人の命令（マウス・キーボード含む）を処理する ○ 『デュアルコア』『Core2Duo』は料理人が二人のイメージ！ ● メモリ ○ CPUが、処理をする時に使う場所 ○ 流し台が狭いと効率よく料理するのが大変・・・ ● ストレージ ○ データを保存しておく場所 ○ HDD（ハードディスク）やSSDなど種類がある ○ ストレージが大きいからと言って、快適というわけではない！ CPU／メモリ／ストレージ

Slide 11

Slide 11 text

インターネットの仕組み

Slide 12

Slide 12 text

インターネットの仕組みパソコンやスマホがあれば、ブラウザ（Microsoft Edge・Google Chromeなど）を使って、簡単にインターネットにアクセスして様々なサイトを利用できます。ここでは、インターネットとパソコンがどのようにつながっているか？ブラウザの裏側で何が起こっているのか？を解説します。

Slide 13

Slide 13 text

インターネットとパソコンはどう繋がっているの？プロバイダ

Slide 14

Slide 14 text

⑦ブラウザは⑥で返ってきた情報をブラウザに表示する ⑥サーバーは届いた情報を元に人間が見たい情報を返す ⑤パケットをIPアドレスのサーバーにインターネット経由で届ける ③ブラウザがURLからIPアドレスを調べる ①人間が見たいサイトのURL を入力する ②ブラウザが「どのサイトが見たいか」のリクエスト用のメッセージを作る ④ブラウザが②のメッセージと③のIPアドレスを1つにまとめたパケットを作るブラウザの裏側で何が起こっているの？ ⑧見たいサイトを見ることができる

Slide 15

Slide 15 text

普段何気なく見ているURLの中にはドメインというものが含まれています。このドメインは、平たく言うと人間が理解しやすくするために付けられたインターネット上の住所のようなものです。ドメインは一部を除き、誰でもレジストラを通じて取得（購入）することができますが、取得するだけでは何もできず、サーバー等との紐付けをする必要があります。【補足】ドメインって何だろう？

Slide 16

Slide 16 text

誰でも取得できるドメインですが、TLD（Top Level Domain）毎にそれぞれ管理する団体がいます。 ※TDL：ドメインの最後の部分（〇〇.net、△△.info）私たちは、レジストラという取得代行をしてくれるサービスを通じて、それぞれの管理団体からドメインの使用権を購入することになります。【補足】ドメインって何だろう？

Slide 17

Slide 17 text

ドメインを取得したら、まずはドメイン自身のDNS/ネームサーバー（住所録の原本）の場所を設定し、その住所録内にドメイン（住所）とIP アドレス（緯度経度）の紐付けをしていきます。インターネット上では、このネームサーバーに書かれているドメインと IPアドレスの情報を相互にコピーしあう仕組みが存在しているので、原本の設定を行うと自然に全世界からURLから場所の特定をすることができるようになります。 ※新しい設定が全世界に行き渡るのは最大48時間かかります。【補足】ドメインって何だろう？

Slide 18

Slide 18 text

■取得に条件のあるドメイン　.jp：日本に住所がある個人・団体・組織 co.jp：日本国内に法人登記がある企業（1法人１つまで） go.jp：日本の政府組織　.jm：ジャマイカに住所がある個人・団体・組織【補足】ドメインって何だろう？

Slide 19

Slide 19 text

ドメインをインターネット上の住所と例えましたが、whois情報という住民票のようなものもあります。 https://ja.asuka.io/whois などのサイトを使って、ドメインの持ち主などを調べることができます。【補足】ドメインって何だろう？

Slide 20

Slide 20 text

異なる情報をURLで分けるとき、サブドメインとディレクトリという分け方があります。サブドメイン：https://hoge.example.com ディレクトリ：https://example.com/hoge これらは「どのような目的で分けるのか？」や「どのような影響があるのか？」を意識して選択する必要があります。【補足】サブドメインとディレクトリって何？

Slide 21

Slide 21 text

【サブドメインを使うとき】 ● ベースは一緒だが、内容が大きく異なり別物として扱いたいときに使用 ● 例えば、同一ブランドの別サービスを分ける時 ○ 「Yahoo!ブランド」の「Yahoo!メール」と「ヤフオク!」など【ディレクトリを使うとき】 ● ベースが一緒で、情報のジャンルの一部のときに使用 ● 例えば、同じサービスの情報を整理する時 ○ メニューの「食事」と「飲み物」を分ける時など【補足】サブドメインとディレクトリって何？

Slide 22

Slide 22 text

Webサービスの仕組み

Slide 23

Slide 23 text

Webサービスの仕組みインターネットでWebサービスを見るときの動きを学びました。次はWebサービス側には何があるのか？どのようなものがあるのか？を説明します。

Slide 24

Slide 24 text

Webサービスの仕組み〜Webサービスの代表的な構成〜データベース Webサーバープログラムサーバー

Slide 25

Slide 25 text

Webサービスの仕組み〜サーバーってなに？〜 ● 深く考えず、超高性能なパソコンと考えてもらってOKです。 ● 個人が使うPCに比べて、CPUやメモリ、ストレージが業務用のレベルといった感じです。

Slide 26

Slide 26 text

AWSとかAzureとかのクラウドと言われるサービスも実態はこんな感じです！

Slide 27

Slide 27 text

● HTMLはハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、Webサイトに表示させたい情報を構造化するために用いる言語です。 ● HTMLは、「要素」と「属性」という考え方で成り立っています。 Webサービスの仕組み〜HTMLってなに？〜

Slide 28

Slide 28 text

ホゲホゲホゲ株式会社 Webサービスの仕組み〜HTMLやCSSってなに？〜要素属性開始タグ終了タグ要素の内容

Slide 29

Slide 29 text

Webサービスの仕組み〜HTMLやCSSってなに？〜

Slide 30

Slide 30 text

● CSSは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略で、文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。 ● HTMLで書かれた構造化された情報を「装飾」するために活用します。 Webサービスの仕組み〜CSSってなに？〜

Slide 31

Slide 31 text

Webサービスの仕組み〜CSSってなに？〜 CSS（右側のファイル）で、 aタグに　・文字を太字にする　・太めの水色の下線を設定してみました。

Slide 32

Slide 32 text

Webサービスの仕組み〜CSSってなに？〜

Slide 33

Slide 33 text

実は、HTMLファイル内にCSSの記述を書くことや、HTMLタグ内で装飾を指定することもできます。しかし、別々に記載することが望ましいです。その理由としては以下の2点があげられます。 ● CSSのファイルを分けていることで、別のHTMLファイルからも装飾の設定を利用できる。 ● HTMLタグで個別設定すると同じ設定をすべてのタグで書く必要があるが、CSSで設定しておくと1箇所修正することで、該当箇所の装飾を一気に変更できる。 HTML/CSSを別ファイルで準備するメリットは？

Slide 34

Slide 34 text

Appendix 何かございましたら、ご連絡ください！ Facebook：https://www.facebook.com/HM.moriyamahiroaki/ Twitter：https://twitter.com/pilot_ﬁsh Mail：moriyama@s-eng.info