ITリテラシー教育

複業として大学生・インターン生向けに実施したITリテラシー教育の基礎編となります。

Transcript

1. ITリテラシー教育 2023.03.21　森山宏啓
2. ▼プロフィール • 1984年生まれ、38歳。 • 法学部法律学科卒業 • 新卒で中小SIerに入社。 →創業期ベンチャー →医療介護業界向け事業会社 →2019年に株式会社うるるへジョイン • エンジニアを軸に、バックオフィス・ セールス・事業責任者を経験 • 現在は、本業でエンジニアリングマネージャーとし て従事しつつ、 複業フリーランスとして「茂エンヂニヤリング」とい う屋号で活動中。 https://type.jp/et/feature/12958/ 自己紹介
3. アジェンダ • パソコンの仕組み ◦ パソコンを構成する要素 • インターネットの仕組み ◦ インターネット通信の基礎 ◦ ドメインとDNSについて • Webサービスの仕組み ◦ Webサービスの仕組み ◦ サーバーの基礎知識 ◦ HTML/CSSの概要
4. パソコンの仕組み
5. パソコンの仕組み まずはじめに、パソコンの仕組みについて説明します。 ここでは、みなさんが使っているパソコンはどのような部品でで きていて、それぞれの部品がどのような役割をしているのかを説 明します。
6. パソコンの仕組み パソコンの構成要素は • 入力装置 • 出力装置 • 記憶装置 • 制御装置 • 演算装置 の５つで成り立っています。
7. パソコンの仕組み パソコンの構成要素は • 入力装置：パソコンへの命令を行う • 出力装置：操作の結果を人間が見られるようにする • 記憶装置：入力されたデータなどを保存しておく • 制御装置：命令の実行をコントロールする • 演算装置：計算をする の５つで成り立っています。
8. パソコンの仕組み パソコンの構成要素は • 入力装置：マウス・キーボードなど • 出力装置：ディスプレイ（モニター）・プリンターなど • 記憶装置：ストレージ（HDD・SSD）・メモリなど • 制御装置：CPU • 演算装置：CPU・GPUなど の５つで成り立っています。
9. CPU ストレージ メモリ 入力 出力 パソコンのパーツの役割を例えてみると？
10. • CPU ◦ 人の命令（マウス・キーボード含む）を処理する ◦ 『デュアルコア』『Core2Duo』は料理人が二人のイメージ！ • メモリ ◦ CPUが、処理をする時に使う場所 ◦ 流し台が狭いと効率よく料理するのが大変・・・ • ストレージ ◦ データを保存しておく場所 ◦ HDD（ハードディスク）やSSDなど種類がある ◦ ストレージが大きいからと言って、快適と いうわけではない！ CPU／メモリ／ストレージ
11. インターネットの仕組み
12. インターネットの仕組み パソコンやスマホがあれば、ブラウザ（Microsoft Edge・Google Chromeなど）を使って、簡単にインターネットにア クセスして様々なサイトを利用できます。 ここでは、インターネットとパソコンがどのようにつながっている か？ブラウザの裏側で何が起こっているのか？を解説します。
13. インターネットとパソコンはどう繋がっているの？ プロバイダ
14. ⑦ブラウザは⑥で返ってきた情報をブラウザに表示す る ⑥サーバーは届いた情報を元に人間が見たい情報を 返す ⑤パケットをIPアドレスのサーバーにインターネット経 由で届ける ③ブラウザがURLからIPアドレスを調べる ①人間が見たいサイトのURL を入力する ②ブラウザが「どのサイトが見たいか」のリクエスト用 のメッセージを作る ④ブラウザが②のメッセージと③のIPアドレスを1つに まとめたパケットを作る ブラウザの裏側で何が起こっているの？ ⑧見たいサイトを見ることがで きる
15. 普段何気なく見ているURLの中にはドメインというものが含まれ ています。 このドメインは、平たく言うと人間が理解しやすくするために付け られたインターネット上の住所のようなものです。 ドメインは一部を除き、誰でもレジストラを通じて取得（購入）す ることができますが、取得するだけでは何もできず、サーバー等と の紐付けをする必要があります。 【補足】ドメインって何だろう？
16. 誰でも取得できるドメインですが、TLD（Top Level Domain）毎 にそれぞれ管理する団体がいます。 ※TDL：ドメインの最後の部分（〇〇.net、△△.info） 私たちは、レジストラという取得代行をしてくれるサービスを通じ て、それぞれの管理団体からドメインの使用権を購入することに なります。 【補足】ドメインって何だろう？
17. ドメインを取得したら、まずはドメイン自身のDNS/ネームサーバー （住所録の原本）の場所を設定し、その住所録内にドメイン（住所）とIP アドレス（緯度経度）の紐付けをしていきます。 インターネット上では、このネームサーバーに書かれているドメインと IPアドレスの情報を相互にコピーしあう仕組みが存在しているので、原 本の設定を行うと自然に全世界からURLから場所の特定をすることが できるようになります。 ※新しい設定が全世界に行き渡るのは最大48時間かかります。 【補足】ドメインって何だろう？
18. ▪取得に条件のあるドメイン 　.jp：日本に住所がある個人・団体・組織 co.jp：日本国内に法人登記がある企業（1法人１つまで） go.jp：日本の政府組織 　.jm：ジャマイカに住所がある個人・団体・組織 【補足】ドメインって何だろう？
19. ドメインをインターネット上の住所と例えましたが、whois情報と いう住民票のようなものもあります。 https://ja.asuka.io/whois などのサイトを使って、ドメインの 持ち主などを調べることができます。 【補足】ドメインって何だろう？
20. 異なる情報をURLで分けるとき、サブドメインとディレクトリという 分け方があります。 サブドメイン：https://hoge.example.com ディレクトリ：https://example.com/hoge これらは「どのような目的で分けるのか？」や「どのような影響 があるのか？」を意識して選択する必要があります。 【補足】サブドメインとディレクトリって何？
21. 【サブドメインを使うとき】 • ベースは一緒だが、内容が大きく異なり別物として扱いたいときに使用 • 例えば、同一ブランドの別サービスを分ける時 ◦ 「Yahoo!ブランド」の「Yahoo!メール」と「ヤフオク!」など 【ディレクトリを使うとき】 • ベースが一緒で、情報のジャンルの一部のときに使用 • 例えば、同じサービスの情報を整理する時 ◦ メニューの「食事」と「飲み物」を分ける時など 【補足】サブドメインとディレクトリって何？
22. Webサービスの仕組み
23. Webサービスの仕組み インターネットでWebサービスを見るときの動きを学びました。 次はWebサービス側には何があるのか？どのようなものがある のか？を説明します。
24. Webサービスの仕組み〜Webサービスの代表的な構成〜 データベース Webサーバー プログラム サーバー
25. Webサービスの仕組み〜サーバーってなに？〜 • 深く考えず、超高性能なパソコンと考えてもらってOKです。 • 個人が使うPCに比べて、CPUやメモリ、ストレージが業務用の レベルといった感じです。
26. AWSとかAzureとかのクラウドと言われる サービスも実態はこんな感じです！
27. • HTMLはハイパーテキスト・マークアップ・ランゲージ （Hyper Text Markup Language）の略で、Webサイトに表示さ せたい情報を構造化するために用いる言語です。 • HTMLは、「要素」と「属性」という考え方で成り立っています。 Webサービスの仕組み〜HTMLってなに？〜
28. <a href="https://hogehoge.co.jp/" target="_blank">ホゲホゲホゲ株式会社 </a> Webサービスの仕組み〜HTMLやCSSってなに？〜 要素 属性 開始タグ 終 了 タ グ 要素の内容
29. Webサービスの仕組み〜HTMLやCSSってなに？〜
30. • CSSは、カスケーディング・スタイル・シート （Cascading Style Sheets）の略で、文字の色や大きさ、背 景、配置といったスタイル（見た目）を設定する言語です。 • HTMLで書かれた構造化された情報を「装飾」するために 活用します。 Webサービスの仕組み〜CSSってなに？〜
31. Webサービスの仕組み〜CSSってなに？〜 CSS（右側のファイル）で、 aタグに 　・文字を太字にする 　・太めの水色の下線 を設定してみました。
32. Webサービスの仕組み〜CSSってなに？〜
33. 実は、HTMLファイル内にCSSの記述を書くことや、HTMLタグ内で装飾を 指定することもできます。しかし、別々に記載することが望ましいです。 その理由としては以下の2点があげられます。 • CSSのファイルを分けていることで、別のHTMLファイルからも装飾の設 定を利用できる。 • HTMLタグで個別設定すると同じ設定をすべてのタグで書く必要がある が、CSSで設定しておくと1箇所修正することで、該当箇所の装飾を一気 に変更できる。 HTML/CSSを別ファイルで準備するメリットは？
34. Appendix 何かございましたら、ご連絡ください！ Facebook：https://www.facebook.com/HM.moriyamahiroaki/ Twitter：https://twitter.com/pilot_fish Mail：moriyama@s-eng.info