ネットワーク入門

Size: px

Start display at page:

Download "ネットワーク入門"

たつぞうごみぶち
5 years ago
Views:

1 情報科学 A 第 7 回インターネットと Web ページ情報科学 A 今日のフォルダー作成第 1 回第 7 回 images xxxxx.html xxxxx.jpg 1

2 今日やること Excelによるマクロ機能インターネットの仕組み Webページ閲覧の仕組み Webページの作成 2

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

4 マクロ毎月上位 10 件を出す作業をするとき効率化する方法はないか? やりたいこと自動で賃料が安い上位 10 件を抽出しリセットも行いたい上位 10 件を抽出 1 Stuサーバより Sample7-1.xlsx をダウンロード 2 表示タブのマクログループをクリックしマクロの記録を選ぶ 3 マクロの記録を右の通りにする 4 OK で記録開始 4

5 マクロ 1 セル B6 をクリック 2 データタブの並び替えとフィルタ- からオートフィルタをクリック 3 セル G6 の賃料の三角形をクリックし数値フィルタートップテンオートフィルター 4 セル G6 のオートフィルタマークから昇順を選ぶ 5 表示タブのマクロから記録終了を選択ピンク字はマクロ記録中なので操作を間違えないように! 5

6 リセットマクロ 1 さっきと同様にマクロを記録するマクロ名はリセット 2 セル B6 をクリックしデータタブの並び替えとフィルターのロートマークをクリックしオートフィルタ解除 3 更にセル B6 をクリックし昇順フィルタ(A Zマーク) をクリック 4 表示タブのマクロから記録終了実行 1 表示マクロからマクロの表示を選択 2 ウィンドウから賃料が安い上位 10 件を選択し実行 3 リセットも同様 6

7 ボタン作成マクロ 1 ボタン作成するフォームをリボンに追加するためファイルオプション 2 リボンのユーザ設定カテゴリよりリボンのユーザー設定内の開発にチェックしOK 3 リボンに追加された開発タブコントロールの挿入をクリックしフォームコントロールの四角をクリック 7

8 ボタン作成つづきマクロ 1 シート上でドラッグして適当な大きさのボタンを作成し賃料の安い上位 10 件を選択しOK 2 ボタン内のテキストにも同様に賃料のと書く 3 リセットについても同様 8

9 マクロの実行マクロ 1 ボタンをクリックしてマクロを実行マクロの保存 1 いつもと同様に名前を付けて保存 2 ただしファイルの種類は Excelマクロ有効ブックを選択する練習 ( 今使用したブックにマクロ設定 ) 面積の広い上位 5 件を抽出し降順に並び替えるマクロを記録するまたそのマクロをフォームボタンに登録し実行する 9

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

11 インターネットの歴史 1969 年にアメリカの国防総省 ARPA が 4 台のコンピュータを接続カリフォルニア大学 LA カリフォルニア大学サンタバーバラスタンフォード大学 ( 研究所 ) ユタ大学 11

12 インターネットの歴史 LAN の接続方式 Asahi-net より抜粋 12

13 インターネットの構造 Net と Net を相互接続したもの Inter Net プロバイダー (ISP) 一次プロバイダー二次プロバイダー 1 次プロバイダ会社 1 次プロバイダ会社 2 次プロバイダ大学 2 次プロバイダ会社 IX 大学 1 次プロバイダ 2 次プロバイダ会社大学会社 13

14 ネットワーク間通信インターネットは ISP を介してつながる AS5 AS8 AS1 AS6 AS2 AS9 北里大学 AS4 AS3 AS7 大学等

15 AS5 AS8 北里大学 AS1 AS2 AS6 AS9 AS7 AS4 AS3 大学

16 インターネットでできること Web サイトの閲覧メールの送受ファイル転送 (FTP) 16

17 アプリケーション層のプロトコルメール WWWのサーバはクライアントからのリクエストに対応 ( アプリケーションプロトコル ) TCPやUDPを使ってデータのやり取りプロトコル : 約束事 17

18 アプリケーション層のプロトコル次のアプリケーション層のプロトコルの正式名称と何のためのプロトコルか調べてみましょう HTTP Hxxxxx Txxxxx Txxxxx Pxxxxx 何をするプロトコル? HTTPS Hxxx Txxx Txxx Pxxx Sxxx 何をするプロトコル? 18

19 Web ページ閲覧の仕組み世界中に広がるクモの巣 WWW(World Wide Web) インターネット上の文書を閲覧する仕組み Web サーバに Web ページや画像を保存 HTTP(Hyper Text Transfer Protocol) プロトコルを使って情報送受信クライアント PC に閲覧ソフト ( ブラウザ ) ブラウザで表示するデータは HTML (Hyper Text Markup Language) Web 上の文書を記述するための言語 19

20 Web ページ閲覧の仕組み DNS DNS サーバ Web ブラウザ 1URL の指定 2DNSサーバに名前解決を依頼 3IP アドレスを返信 4Web ページ転送のリクエスト HTTP WWW サーバ 6 結果をレスポンスとして返信 5Web サーバが処理 20

21 Web ページ閲覧の仕組み ( キャッシュ ) DNS サーバ WWW サーバ 2 名前解決リクエスト 3IP アドレス返信 5 ページのリクエスト Web ブラウザプロキシサーバ 6 ページ情報の送信 1URL の指定 4 ページリクエスト 5 キャッシュの送信 7 ページ情報の送信キャッシュ過去に読み込んだ Web コンテンツなどを一時保存することプロキシサーバプロキシサーバが代理でアクセス 21

22 HTML 言語 22

23 HTML の歴史 1990 年に CERN のティムバーナーズリーによって開発同時期に HTTP や WWW や Web ブラウザも開発 1993 年に CERN が WWW を公開 HTML 仕様の標準化は初期は IETF ver.3.2 からは W3C 1993 年 HTML 年 HTML 年 HTML 年 HTML 年 HTML 年 HTML5 23

24 HTML HTML 言語で書かれたファイルを HTML ファイルと呼び.htm や.html の拡張子がつく HTML5 ができること画面遷移同じページのまま情報をやり取りできるマルチメディアの強化動画や音楽の再生 / 停止が簡単 UI やデータ処理の強化フォーム機能 ( アンケートなど ) の強化ドラッグアンドドロップのサポート 24

25 Web 作成者の心構え Webサイトを通じて危険やトラブルに遭遇する場合がある問題を引き起こさないWebサイト作成を心がける必要がある不特定多数の人が見ることを念頭に性別年齢宗教地域などにも注意誇大な表現などに注意をし信頼性の高い情報発信をすること著作権に違反しない閲覧するユーザの立場に立った制作 25

26 著作権 (P.6 参照 ) 著作物著作者とは著作権の権利の発生著作を侵害しないために基本的に他人の制作したものは許可なく使用しない Webサイトなどのフリー素材を使用するときは使用条件を確認著作者から承諾を得てもその使用範囲を確認よくわからない場合は使用しない 26

27 Web サイトの作成手順 (P.8 参照 ) 1. 企画目的コンセプト調査サイトマップ 2. 素材の収集制作テキスト写真イラスト 3. サイトのマークアップ HTML によるコーディング 4.CSS の適用 Web ページのデザイン 5. デバック不具合のチェック手直し 6. 運用更新 Web サーバの公開日々の更新 27

28 Web サイトの構成ユーザにとって分かりやすいページを作成するように心がけるトップページを最上位として 2 階層で作れることが望ましい ( ページのボリュームによる見せたいページの優劣を考えるコンテンツをリストアップしカテゴリ分けトップページ薬学部獣医学部医学部一般教育部部長より組織沿革開講科目様々な Web サイトのページ構成を調べてみよう! 28

29 ヘッダーナビゲーションコンテンツフッター 29

30 HTML5 の基礎知識 (P.34) タグ属性 このサイトは HTML5 で記述しています 開始タグ修了タグ内容 <a href= profile.html > プロフィール </a> 属性名値 30

31 Web サイト作成の準備 (P.38) メモ帳を起動ファイルを保存するときはファイルの種類をすべてのファイル (*.*) にして拡張子を.html にする文字コードは UTF-8 とする 31

32 HTML の基本構造 (P.41) <!DOCTYPE html> <html lang= ja > HTML5で作成されたものであることを宣言 HTMLドキュメントの開始 <head> ヘッダーの開始 <meta charset= UTF-8 /> <title> 今日の天気 </title> </head> ヘッダーの終了ヘッダー部コンテンツ部 <body> コンテンツの開始今日の天気は晴れです </body> コンテンツの終了 </html> HTML ドキュメントの終了タグを開いたら必ず閉じる 32

33 構文の意味 (P.41) 構文の意味は教科書 (P.41~P.44) の通り実際にドキュメント (P.41) を入力し ( ファイル名を Sample7-2.html) ブラウザで確認しましょう title body 33

34 簡単な Web ページの作成 (P.45) 先ほどのドキュメントに追加するここから追加 34

35 簡単な Web ページの作成 (P.45~) 教科書 (p.45~) に従って下ファイルになるように修正する段落 段落 見出し <h1> 日付の指定 <time> 太字 改行 強調 35

36 簡単な Web ページの作成先ほどのドキュメントを参考に下のように表示できるドキュメントを作成しましょう ( ファイル名を Practice7-1-1.html) 見出し (h1) 段落 太字 段落 日付の指定 <time> 強調 改行 36

37 画像の表示 (P.68) images フォルダーがなければ作成し stu サーバから flower01.jpg をダウンロードしておく下構文の意味は教科書 (P.68~P.70) の通り Practice7-1.html の </body> 直前行に以下を追加 <img src=../images/flower01.jpg > 一つ上のフォルダ images フォルダ flower01.jpg のこと完成 Web ページは次ページ 37

38 できた人は自分の出身地に関するページを画像入りで作成するファイル名はPractice7-2.html 38

39 まとめインターネットの仕組み HTTP HTMLはどのようなものか Webページ閲覧の仕組み 39

ネットワーク入門

ネットワーク入門情報科学 A 第 7 回インターネットと Web ページ情報科学 A 第 1 回第 7 回今日のフォルダー作成 xxxxx.html 1 Excel の復習次ページ以降の 4 つの曲線を描く 2 散布図リサジュー曲線 Curve1.xlsx 座標 (x, y) は左の式から出せる時角度 0~360 で下グラフを描くこの時 A B a b は下参照情報科学 A グラフは散布図 ( 平滑線