情報科学 A 第 7 回インターネットと Web ページ 情報科学 A 今日のフォルダー作成 第 1 回 第 7 回 images xxxxx.html xxxxx.jpg 1
今日やること Excelによるマクロ機能 インターネットの仕組み Webページ閲覧の仕組み Webページの作成 2
Excel のマクロ機能 マクロ 繰り返し同じ操作を行うとき その一連作業を マクロ に記録しておくと 作業の効率が上がる 3
マクロ 毎月上位 10 件を出す作業をするとき 効率化する方法はないか? やりたいこと自動で賃料が安い上位 10 件を抽出し リセットも行いたい上位 10 件を抽出 1 Stuサーバより Sample7-1.xlsx をダウンロード 2 表示 タブの マクロ グループをクリックし マクロの記録 を選ぶ 3 マクロの記録 を右の通りにする 4 OK で記録開始 4
マクロ 1 セル B6 をクリック 2 データ タブの 並び替えとフィルタ- からオートフィルタをクリック 3 セル G6 の賃料の三角形をクリックし 数値フィルター トップテンオートフィルター 4 セル G6 のオートフィルタマークから 昇順 を選ぶ 5 表示 タブの マクロ から 記録終了 を選択 ピンク字はマクロ記録中なので操作を間違えないように! 5
リセット マクロ 1 さっきと同様にマクロを記録する マクロ名は リセット 2 セル B6 をクリックし データ タブの 並び替えとフィルター のロートマークをクリックしオートフィルタ解除 3 更にセル B6 をクリックし 昇順フィルタ(A Zマーク) をクリック 4 表示 タブの マクロ から 記録終了 実行 1 表示 マクロ から マクロの表示 を選択 2 ウィンドウから 賃料が安い上位 10 件 を選択し実行 3 リセットも同様 6
ボタン作成 マクロ 1 ボタン作成する フォーム をリボンに追加するため ファイル オプション 2 リボンのユーザ設定 カテゴリより リボンのユーザー設定 内の 開発 にチェックしOK 3 リボンに追加された 開発 タブ コントロール の 挿入 をクリックし フォームコントロール の四角をクリック 7
ボタン作成つづき マクロ 1 シート上でドラッグして適当な大きさのボタンを作成し 賃料の安い上位 10 件 を選択しOK 2 ボタン内のテキストにも同様に 賃料の と書く 3 リセットについても同様 8
マクロの実行 マクロ 1 ボタンをクリックしてマクロを実行 マクロの保存 1 いつもと同様に名前を付けて保存 2 ただし ファイルの種類 は Excelマクロ有効ブック を選択する 練習 ( 今使用したブックにマクロ設定 ) 面積の広い上位 5 件を抽出し 降順に並び替えるマクロを記録する また そのマクロをフォームボタンに登録し 実行する 9
これからやること これまでは データを見やすい形にまとめたり 膨大なデータの中から条件に合うものだけを抽出した これからは そのデータを公開するための手法である Web ページの作成を学ぶ 10
インターネットの歴史 1969 年にアメリカの国防総省 ARPA が 4 台のコンピュータを接続 カリフォルニア大学 LA カリフォルニア大学サンタバーバラ スタンフォード大学 ( 研究所 ) ユタ大学 11
インターネットの歴史 LAN の接続方式 Asahi-net より抜粋 12
インターネットの構造 Net と Net を相互接続したもの Inter Net プロバイダー (ISP) 一次プロバイダー 二次プロバイダー 1 次プロバイダ 会社 1 次プロバイダ 会社 2 次プロバイダ 大学 2 次プロバイダ 会社 IX 大学 1 次プロバイダ 2 次プロバイダ 会社 大学 会社 13
ネットワーク間通信 インターネットは ISP を介してつながる AS5 AS8 AS1 AS6 AS2 AS9 北里大学 AS4 AS3 AS7 大学等 www.washington.edu www.maroc.ma 14
AS5 AS8 北里大学 AS1 AS2 AS6 AS9 AS7 AS4 AS3 大学 http://lg.eastlink.ca/ http://lg.he.net/ https://www.sprint.net/lg/ http://as9370.bgp4.jp/ 15
インターネットでできること Web サイトの閲覧 メールの送受 ファイル転送 (FTP) 16
アプリケーション層のプロトコル メール WWWのサーバはクライアントからのリクエストに対応 ( アプリケーションプロトコル ) TCPやUDPを使ってデータのやり取り プロトコル : 約束事 17
アプリケーション層のプロトコル 次のアプリケーション層のプロトコルの正式名称と何のためのプロトコルか調べてみましょう HTTP Hxxxxx Txxxxx Txxxxx Pxxxxx 何をするプロトコル? HTTPS Hxxx Txxx Txxx Pxxx Sxxx 何をするプロトコル? 18
Web ページ閲覧の仕組み 世界中に広がるクモの巣 WWW(World Wide Web) インターネット上の文書を閲覧する仕組み Web サーバに Web ページや画像を保存 HTTP(Hyper Text Transfer Protocol) プロトコルを使って情報送受信 クライアント PC に閲覧ソフト ( ブラウザ ) ブラウザで表示するデータは HTML (Hyper Text Markup Language) Web 上の文書を記述するための言語 19
Web ページ閲覧の仕組み DNS DNS サーバ Web ブラウザ 1URL の指定 2DNSサーバに名前解決を依頼 3IP アドレスを返信 4Web ページ転送のリクエスト HTTP WWW サーバ 6 結果をレスポンスとして返信 5Web サーバが処理 20
Web ページ閲覧の仕組み ( キャッシュ ) DNS サーバ WWW サーバ 2 名前解決リクエスト 3IP アドレス返信 5 ページのリクエスト Web ブラウザ プロキシサーバ 6 ページ情報の送信 1URL の指定 4 ページリクエスト 5 キャッシュの送信 7 ページ情報の送信 キャッシュ過去に読み込んだ Web コンテンツなどを一時保存することプロキシサーバプロキシサーバが代理でアクセス 21
HTML 言語 22
HTML の歴史 1990 年に CERN のティムバーナーズリーによって開発 同時期に HTTP や WWW や Web ブラウザも開発 1993 年に CERN が WWW を公開 HTML 仕様の標準化は初期は IETF ver.3.2 からは W3C 1993 年 HTML1.0 1995 年 HTML2.0 1997 年 HTML3.2 1997 年 HTML4.0 1999 年 HTML4.01 2014 年 HTML5 23
HTML HTML 言語で書かれたファイルを HTML ファイルと呼び.htm や.html の拡張子がつく HTML5 ができること 画面遷移同じページのまま情報をやり取りできる マルチメディアの強化動画や音楽の再生 / 停止が簡単 UI やデータ処理の強化フォーム機能 ( アンケートなど ) の強化ドラッグアンドドロップのサポート 24
Web 作成者の心構え Webサイトを通じて危険やトラブルに遭遇する場合がある 問題を引き起こさないWebサイト作成を心がける必要がある 不特定多数の人が見ることを念頭に 性別 年齢 宗教 地域などにも注意 誇大な表現などに注意をし 信頼性の高い情報発信をすること 著作権に違反しない 閲覧するユーザの立場に立った制作 25
著作権 (P.6 参照 ) 著作物 著作者とは 著作権の権利の発生 著作を侵害しないために 1 2 3 4 基本的に他人の制作したものは許可なく使用しない Webサイトなどのフリー素材を使用するときは 使用条件 を確認著作者から承諾を得ても その使用範囲を確認よくわからない場合は 使用しない 26
Web サイトの作成手順 (P.8 参照 ) 1. 企画 目的 コンセプト 調査 サイトマップ 2. 素材の収集 制作 テキスト 写真 イラスト 3. サイトのマークアップ HTML によるコーディング 4.CSS の適用 Web ページのデザイン 5. デバック 不具合のチェック 手直し 6. 運用 更新 Web サーバの公開 日々の更新 27
Web サイトの構成 ユーザにとって分かりやすいページを作成するように心がける トップページを最上位として 2 階層で作れることが望ましい ( ページのボリュームによる 見せたいページの優劣を考える コンテンツをリストアップし カテゴリ分け トップページ 薬学部獣医学部医学部一般教育部 部長より組織沿革開講科目 様々な Web サイトのページ構成を調べてみよう! 28
ヘッダー ナビゲーション コンテンツ フッター 29
HTML5 の基礎知識 (P.34) タグ 属性 <P> このサイトは HTML5 で記述しています </P> 開始タグ 修了タグ内容 <a href= profile.html > プロフィール </a> 属性名 値 30
Web サイト作成の準備 (P.38) メモ帳 を起動 ファイルを保存するときは ファイルの種類 を すべてのファイル (*.*) にして拡張子を.html にする 文字コードは UTF-8 とする 31
HTML の基本構造 (P.41) <!DOCTYPE html> <html lang= ja > HTML5で作成されたものであることを宣言 HTMLドキュメントの開始 <head> ヘッダーの開始 <meta charset= UTF-8 /> <title> 今日の天気 </title> </head> ヘッダーの終了 ヘッダー部 コンテンツ部 <body> コンテンツの開始今日の天気は晴れです </body> コンテンツの終了 </html> HTML ドキュメントの終了 タグを開いたら必ず閉じる 32
構文の意味 (P.41) 構文の意味は教科書 (P.41~P.44) の通り 実際にドキュメント (P.41) を入力し ( ファイル名を Sample7-2.html) ブラウザで確認しましょう title body 33
簡単な Web ページの作成 (P.45) 先ほどのドキュメントに追加する ここから追加 34
簡単な Web ページの作成 (P.45~) 教科書 (p.45~) に従って下ファイルになるように修正する 段落 <p> 段落 <p> 見出し <h1> 日付の指定 <time> 太字 <strong> 改行 <br> 強調 <em> 35
簡単な Web ページの作成 先ほどのドキュメントを参考に 下のように表示できるドキュメントを作成しましょう ( ファイル名を Practice7-1-1.html) 見出し (h1) 段落 <p> 太字 <strong> 段落 <p> 日付の指定 <time> 強調 <em> 改行 <br> 36
画像の表示 (P.68) images フォルダーがなければ作成し stu サーバから flower01.jpg をダウンロードしておく 下構文の意味は教科書 (P.68~P.70) の通り Practice7-1.html の </body> 直前行に以下を追加 <img src=../images/flower01.jpg > 一つ上のフォルダ images フォルダ flower01.jpg のこと 完成 Web ページは次ページ 37
できた人は自分の出身地に関するページを画像入りで作成する ファイル名はPractice7-2.html 38
まとめ インターネットの仕組み HTTP HTMLはどのようなものか Webページ閲覧の仕組み 39