情報科学asugisaki/old/2019/pre/...情報科学a 第7回インターネットとwebページ 1...

情報科学A

第7回インターネットとWebページ

1

情報科学A

第1回

xxxxx.html

第7回

今日のフォルダー作成

・・・

xxxxx.jpg

images

今日やること Excelによるマクロ機能

インターネットの仕組み

Webページ閲覧の仕組み

Webページの作成

情報科学A 第7回インターネットとWebページ2


Excelのマクロ機能

マクロ

繰り返し同じ操作を行うとき、その一連作業を「マクロ」に記録しておくと、作業の効率が上がる

情報科学A 第7回インターネットとWebページ

マクロ

4

① Stuサーバより「Sample7-1.xlsx」をダウンロード

② 「表示」タブの「マクロ」グループをクリックし「マクロの記録」

を選ぶ

③ 「マクロの記録」を右の通りにする

④ 「OK」で記録開始

やりたいこと

自動で賃料が安い上位10件を抽出し、リセットも行いたい

上位10件を抽出

毎月上位10件を出す作業をするとき、効率化する方法はないか？


マクロ

5

① セル【B6】をクリック

② 「データ」タブの「並び替えとフィルタ－」からオートフィルタ

をクリック

③ セル【G6】の賃料の三角形をクリックし、「数値フィルター」

→「トップテンオートフィルター」

④ セル【G6】のオートフィルタマーク

から「昇順」を選ぶ

⑤ 「表示」タブの「マクロ」から「記録終了」を選択

ピンク字はマクロ記録中なので操作を間違えないように！


マクロ

6

① さっきと同様にマクロを記録する。マクロ名は「リセット」

② セル【B6】をクリックし、「データ」タブの「並び替えとフィル

ター」のロートマークをクリックしオートフィルタ解除

③ 更にセル【B6】をクリックし、昇順フィルタ（A↓Zマーク）を

クリック

④ 「表示」タブの「マクロ」から「記録終了」

リセット

① 「表示」→「マクロ」から「マクロの表示」を選択。

② ウィンドウから「賃料が安い上位１０件」を選択し実行

③ リセットも同様

実行


マクロ

7

① ボタン作成する「フォーム」をリボンに追加するため、

「ファイル」→「オプション」

② 「リボンのユーザ設定」カテゴリより「リボンのユーザー設

定」内の「開発」にチェックしOK

③ リボンに追加された「開発」タブ

「コントロール」の「挿入」を

クリックし、「フォーム

コントロール」の四角

をクリック

ボタン作成


マクロ

8

① シート上でドラッグして適当な大きさのボタンを作成し、

「賃料の安い上位10件」を選択しOK

② ボタン内のテキストにも同様に「賃料の。。。」と書く

③ リセットについても同様

ボタン作成つづき


マクロ

9

① ボタンをクリックしてマクロを実行

マクロの実行

① いつもと同様に名前を付けて保存

② ただし、「ファイルの種類」は「Excelマクロ有効ブック」を選

択する。

マクロの保存

練習（今使用したブックにマクロ設定）

面積の広い上位5件を抽出し、降順に並び替えるマクロを記録する。また、そのマクロをフォームボタンに登録し、実行する。

これからやることこれまでは、データを見やすい形にまとめたり、膨大なデータの中から条件に合うものだけを抽出した。これからは、そのデータを公開するための手法である、Webページの作成を学ぶ。


インターネットの歴史 1969年にアメリカの国防総省ARPAが4

台のコンピュータを接続

11情報科学A 第7回インターネットとWebページ

カリフォルニア大学LA

カリフォルニア大学サンタバーバラ

スタンフォード大学（研究所）

ユタ大学


インターネットの歴史

Asahi-netより抜粋

LANの接続方式


インターネットの構造 NetとNetを相互接続したもの

プロバイダー（ISP）一次プロバイダー、二次プロバイダー

⇒Inter Net

１次プロバイダ



２次プロバイダ２次

プロバイダ

２次プロバイダ

会社会社

会社会社

会社

大学大学

大学IX


北里大学

大学等

ネットワーク間通信インターネットはISPを介してつながる

AS1

AS2AS9

AS4AS7

AS3

AS6

AS5AS8

www.washington.eduwww.maroc.ma

http://www.maroc.ma/

http://www.maroc.ma/


北里大学

大学

AS1

AS2AS9

AS4AS7

AS3

AS6

AS5AS8

http://lg.eastlink.ca/http://lg.he.net/https://www.sprint.net/lg/http://as9370.bgp4.jp/

https://www.sprint.net/lg/

インターネットでできること

Webサイトの閲覧

メールの送受

ファイル転送（FTP）


17

アプリケーション層のプロトコル

メール、WWWのサーバはクライアントからの

リクエストに対応（アプリケーションプロトコル）

TCPやUDPを使ってデータのやり取り

プロトコル：約束事


18

アプリケーション層のプロトコル

次のアプリケーション層のプロトコルの正式名称と何のためのプロトコルか調べてみましょう。

・HTTP⇒Hxxxxx Txxxxx Txxxxx Pxxxxx⇒何をするプロトコル？

・HTTPS⇒Hxxx Txxx Txxx Pxxx Sxxx⇒何をするプロトコル？


19

Webページ閲覧の仕組み WWW（World Wide Web）、インターネット上

の文書を閲覧する仕組み WebサーバにWebページや画像を保存 HTTP（Hyper Text Transfer Protocol）プ

ロトコルを使って情報送受信クライアントPCに閲覧ソフト（ブラウザ）ブラウザで表示するデータはHTML

（Hyper Text Markup Language）。Web上

の文書を記述するための言語


世界中に広がるクモの巣

20


①URLの指定

④Webページ転送のリクエスト

Webブラウザ

WWWサーバ

DNSサーバ

②DNSサーバに名前解決を依頼

③IPアドレスを返信

⑤Webサーバが処理

⑥結果をレスポンスとして返信

DNS

HTTP


21

Webページ閲覧の仕組み（キャッシュ）

①URLの指定

Webブラウザ

WWWサーバDNSサーバ

④ページリクエスト

②名前解決リクエスト

③IPアドレス返信

⑤‘キャッシュの送信

⑤ページのリクエスト

⑥ページ情報の送信

⑦ページ情報の送信

プロキシサーバ

キャッシュ過去に読み込んだWebコンテンツなどを一時保存することプロキシサーバ

プロキシサーバが代理でアクセス



HTML言語

23

HTMLの歴史 1990年にCERNのティムバーナーズリー

によって開発。同時期にHTTPやWWWやWebブラウザも開発

1993年にCERNがWWWを公開 HTML仕様の標準化は初期はIETF、

ver.3.2からはW3C1993年 HTML1.01995年 HTML2.01997年 HTML3.21997年 HTML4.01999年 HTML4.012014年 HTML5


24

HTML HTML言語で書かれたファイルをHTML

ファイルと呼び、”.htm”や”.html”の拡張子がつく

HTML5ができること• 画面遷移

同じページのまま情報をやり取りできる

• マルチメディアの強化動画や音楽の再生/停止が簡単

• UIやデータ処理の強化フォーム機能（アンケートなど）の強化ドラッグアンドドロップのサポート


25

Web作成者の心構え

Webサイトを通じて危険やトラブルに遭遇する場合が

ある。問題を引き起こさないWebサイト作成を心がけ

る必要がある。

不特定多数の人が見ることを念頭に、性別、年齢、

宗教、地域などにも注意

誇大な表現などに注意をし、信頼性の高い情報

発信をすること

著作権に違反しない

閲覧するユーザの立場に立った制作


26

著作権（P.6参照）

著作物

著作者とは

著作権の権利の発生

著作を侵害しないために

① 基本的に他人の制作したものは許可なく使用しない

② Webサイトなどのフリー素材を使用するときは「使用条件」を確認

③ 著作者から承諾を得ても、その使用範囲を確認

④ よくわからない場合は、使用しない


27

Webサイトの作成手順（P.8参照）

目的・コンセプト、調査、サイトマップ


１．企画

２．素材の収集・制作

３．サイトのマークアップ

４．CSSの適用

５．デバック

６．運用・更新

テキスト、写真、イラスト

HTMLによるコーディング

Webページのデザイン

不具合のチェック、手直し

Webサーバの公開、日々の更新

28

Webサイトの構成ユーザにとって分かりやすいページを作成

するように心がけるトップページを最上位として2階層で作れる

ことが望ましい（ページのボリュームによる見せたいページの優劣を考えるコンテンツをリストアップし、カテゴリ分け


トップページ

薬学部獣医学部医学部一般教育部

部長より組織沿革開講科目

様々なWebサイトのページ構成を調べてみよう！


ヘッダー

ナビゲーション

コンテンツ

フッター

タグ

 このサイトはHTML5で記述しています 

属性

<a href=“profile.html”> プロフィール </a>


HTML5の基礎知識（P.34）

開始タグ修了タグ内容

属性名値

「メモ帳」を起動

ファイルを保存するときは、「ファイルの種

類」を「すべてのファイル(*.*)」にして拡張

子を「.html」にする

文字コードは「UTF-8」とする


Webサイト作成の準備（P.38）

HTMLの基本構造（P.41）

<!DOCTYPE html><html lang=“ja”>

</html>

<head><meta charset=“UTF-8” /><title>今日の天気</title>

</head>

<body>今日の天気は晴れです。

</body>

ヘッダー部

コンテンツ部

ヘッダーの開始

ヘッダーの終了

コンテンツの開始

コンテンツの終了

HTMLドキュメントの開始

HTMLドキュメントの終了

タグを開いたら必ず閉じる

HTML5で作成されたものであることを宣言


構文の意味（P.41）

構文の意味は教科書（P.41～P.44）の通り

実際にドキュメント（P.41）を入力し（ファイ

ル名をSample7-2.html）、ブラウザで確認し

ましょう。title

body


簡単なWebページの作成（P.45）

先ほどのドキュメントに追加する

ここから追加

簡単なWebページの作成（P.45～）

教科書（p.45～）に従って下ファイルになる

ように修正する。

見出し<h1>

太字、改行 

日付の指定<time>

強調

段落

段落

簡単なWebページの作成

先ほどのドキュメントを参考に、下のように

表示できるドキュメントを作成しましょう

（ファイル名をPractice7-1-1.html）

見出し（h1）

日付の指定<time>

段落

改行 

強調

太字

段落

画像の表示（P.68）

「images」フォルダーがなければ作成し、stu

サーバからflower01.jpgをダウンロードしておく

下構文の意味は教科書（P.68～P.70）の通り

Practice7-1.htmlの</body>直前行に以下を

追加

<img src=“../images/flower01.jpg”>

完成Webページは次ページ

「一つ上のフォルダ→imagesフォルダ→flower01.jpg」のこと


できた人は自分の出身

地に関するページを画

像入りで作成する。ファ

イル名はPractice7-

2.html。

まとめ

インターネットの仕組み

HTTP、HTMLはどのようなものか



情報科学asugisaki/old/2019/pre/...情報科学a 第7回インターネットとwebページ 1...

Documents