HP作成メモ目次
第1章インターネットとは何か
- インターネットとは？
- ホームページの仕組み
- ホームページ（Webページ）は、文章、画像などでできあがっている
- ＨＴＭＬ【 Hyper Text Markup Language 】とは
- FTP 【 File Transfer Protocol 】 ファイル転送プロトコルとは
- HTML編集ソフトとは
第1章インターネットとは何か
1.1 インターネットとは？
ネットワーク
インターネットは、世界中のコンピュータなどの情報機器を接続するネットワークです。1990年ごろから、世界的に広く使われ始め、近年はその利活用が目覚しく進展してきました。現在では、私たちの生活や仕事などのさまざまな場面で使われる、不可欠な社会基盤（インフラ）となっています。
私たちがインターネットを利用するためには、さまざまな方法があります。家庭や学校、職場で利用する場合には、インターネットサービスプロバイダ（光回線、ADSL回線、ケーブルテレビ回線などを通じて、インターネットに接続してくれるサービス事業者）と契約することによって、インターネットに接続できるようになります。携帯電話会社と契約することで、携帯電話回線を通じてインターネットを利用することもできます。
インターネットの仕組み
複数のコンピュータを、ケーブルや無線などを使ってつなぎ、お互いに情報をやりとりできるようにした仕組みをネットワークと呼びます。
インターネットは、家や会社、学校などの単位ごとに作られた１つ１つのネットワークが、さらに外のネットワークともつながるようにした仕組みです。外のネットワークと接続するために、ルータと呼ばれる機器や、インターネットサービスプロバイダと呼ばれる通信事業者のサービスを利用します。世界規模でコンピュータ同士を接続した、最も大きいネットワークといえます。
ネットワーク上で、情報やサービスを他のコンピュータに提供するコンピュータをサーバ、サーバから提供された情報やサービスを利用するコンピュータをクライアントと呼びます。私たちが普段使うパソコンや携帯電話、スマートフォンなどは、クライアントにあたります。
インターネット上には、メールサーバやWebサーバといった、役割の異なる多数のサーバが設置されています。それらのサーバが、クライアントからの要求に従って、情報を別のサーバに送ったり、持っている情報をクライアントに渡したりすることで、電子メールを送信したり、Webブラウザでホームページを見たりすることができるようになっているのです。あなたのパソコンを直接インターネットに繋ぐのは、高速道路を幼児が三輪車で走るようなもので、不可能です。
1.2. ホームページの仕組み
ウエブサイト/Webサーバ/URL
インターネット上で情報を公開する仕組みを、ホームページと言います。ホームページのコンテンツ（内容）は、インターネット上に点在する、Webサーバというホームページ公開専用のコンピュータのなかに保存されています。私たちの端末から、そのパソコンに命令を出し、情報を送ってもらうことで、ホームページを見ることができます。
ここでいうホームページとは、Webサイトと呼ばれるインターネット上のひとまとまりのWebページのことです。元々は、Webサイトの入り口のページをホームページと呼んでいましたが、日本ではWebサイトと同じ意味で使われるようになりました。
ホームページを閲覧する場合には、Webブラウザという専用のソフトウェアでURL 【 Uniform Resource Locator 】 を指定します。URLを指定すると、Webブラウザがインターネット上のWebサーバを探して、目的のホームページをコンピュータの画面上に表示します。
"URL"とは、インターネット上に存在する情報資源（文書や画像など）の場所を指し示す技術方式です。 通常「プロトコル://ドメイン名/ディレクトリパス名/ファイル名」という形式で構成されるホームページページの住所（アドレス）のことです。ドメインの説明は、こちら。
http://とは何の略でしょうか?
HTTPは 【Hyper Text Transfer Protocol】 の略です。 WWW(World Wide Web)上でWebサーバとクライアントが、 HTMLで書かれた文書などの情報をやりとりする時に使われる通信手順(プロトコル)を意味します。
http:// 以降には、その情報の住所や形式が示されていて、FTP やメールなども含めたネット上のリソースの位置情報やアクセス手段を示すものです。
Webブラウザ【web browser】とは
ブラウザーのロゴ
Browseとは「拾い読みをする」という意味です。Webブラウザとは、ホームページ（Webページ）を閲覧するためのアプリケーションソフトのことです。利用者の指定したWebページを管理するWebサーバへデータの送信を要求し、サーバから送られてきたHTMLファイルや画像ファイルなどをパソコンやスマホで読み込んで指定されたレイアウトで表示します。
現在の日本では、パソコン向けではMicrosoft社のInternet ExplorerやMicrosoft Edge、Google社のGoogle Chrome、Mozilla Foundation（モジラ財団）のFirefoxが人気で、Macでは開発元のアップル（Apple）社のSafari（サファリ）が標準的に使われています。
スマートフォンやタブレット端末の場合、Androidでは標準のAndroid BrowserやGoogle社のChrome（Android版）が、iOS（iPhone/iPad）ではApple社のSafari（iOS版）。また、スマートフォン向けのOSでは標準ブラウザの機能を部品（モジュール）化したものをアプリケーションソフトに組み込むWebViewという仕組みがあり、多くのアプリがこの仕組みを利用してWebブラウザの機能を内蔵してます。どのブラウザーが最も使われているかは、地域（国）や時代により異なります。
インターネットエクスプローラーや「edge」を使用する人が多いのは、日本だけとも言われています。いづれにせよ、使い慣れたブラウザーで良いでしょう。ただし、Internet Explorerの11以前の古いバージョンはsecurityの問題がありますので、最新版にして下さい。
EC千葉のホームページは、さくらインターネット（株）のサーバ内にあります。
EC千葉のホームページは、大阪が本社のさくらインターネット株式会社 （SAKURA Internet Inc.）が運営しているレンタルサーバ内にあります。大きなマンション（サーバ）の一部屋を借りていると考えてください。上の図のWebサーバにあたるものです。現在借りている容量は100GBで、家賃は年間約6000円です。
この会社のURLは、こちら。
参考と引用ＵＲＬ：
1.3． ホームページ（Webページ）は、文章、画像などでできている
図1
図2
ホームページ（Webページ）の構成
インターネット上で公開される文書のことで、レイアウト情報、文章、画像、動画などのデータで構成されています。ブラウザーを用いてパソコン等で閲覧することができます。
ウエブページはHTMLと呼ばれる言葉で書かれています。
このページの画面構成（ソース）を見る
- このページの空白部分を右クリックしてください。すると図1のような表示がでます。
その中の「ページのソースを表示（V）」をクリックします。
- すると、図2にような画面が表示（画像をクリックすると拡大）されます。これが、このページを構成しているプログラムです。（計算や条件式がないので厳密には違いますが、「プログラム」と考えて下さい。）
- ここには、このページをブラウザーがどのように表示すべきかが書いてあります。
実際に右クリックして表示してみて下さい。
- ここで使われている言語が、ＨＴＭＬ【 Hyper Text Markup Language 】と呼ばれるものです。
- 今あなたが使用しているブラウザーの種類（edgeやグーグル等）あるいはパソコン画面のサイズ、タブレットかスマホかでウエブページの見え方が異なります。
多くの方は、「edge」で閲覧しているでしょうが、それを「google chrome」に変えて確かめてください。
ホームページを見るにはブラウザ、編集にはFTPソフトとHTMLソフトが必要
ホームページを見る人と管理人
右の図に示すようにウエブページを閲覧するには、Webブラウザが必要です。管理人がウエブページを編集するにはHTMLソフトが、できあがった原稿をwebサイトにアップロードするFTPソフトが必要になります。
1.4. ＨＴＭＬ【 Hyper Text Markup Language 】とは
印刷用の校正記号のようなもの
マーキングアップとは、英語圏で原稿用紙の余白に印刷に関する指示の記号を書き加えることです。
印刷用の校正記号のようなものと考えて下さい。その指示に従って、Windows Internet ExplorerやMozilla Firefox等のブラウザが（印刷時には人が）HTMLを読み取り、そのページをパソコンに表示（校正記号では紙に印刷）をします。
校正記号では
ＨＴＭＬでは
p:paragraph
br:break
空白は無視される
人が作業するのであれば図示でも可能ですが、ブラウザ(パソコン）への指示ですので文字（HTML）で指示をします。指示用語（HTML）は、英語の略字です。大変なようですが、元の英語の意味と関連づけると、逆に容易に覚えられます。上の例のように易しい英語が多いです。
1.5. FTP 【 File Transfer Protocol 】 ファイル転送プロトコルとは
ホームページを見る人と管理人
ホームページを編集するツールのひとつ
FTPとは、ネットワーク上でファイル等の転送を行う通信プロトコルの1つです。簡単に言うと、FTPとはファイルを転送するときに使うプロトコル＝約束事のことです。
もっと単純化すると、ホームページの管理人がさくらインターネットのサーバー内にあるＥＣ千葉のホームページを、自分のパソコンで編集し、データをやり取り（アップロード/ダウンロード）するソフトウエアです。普通の閲覧者はパソコンやスマホでコンテンツを見ることはできますが、内容は編集できません。FTPの接続をパスワードで保護しています。これが破られると、ホームページの改竄事件です。
FTPソフト（FTPクライアントとも）の役割は？
FTPソフトの役割は主に、PCとサーバとの間でFTPを使ってファイルを転送することです。PCにあるファイルをサーバへコピーする(送る)ことを「アップロード」、サーバにあるファイルをPCへコピーする(取り寄せる)ことを「ダウンロード」と言います。この作業は編集者しかできないように暗号で保護してあります。データ改竄を防ぐ必要があるからです。
FTPソフトのFFFTP（無料）を入手する
FFFTPのロゴ
FTPソフトには無料のソフトもあれば、有料ソフトもあります。windowsの場合であれば、国産ソフトで「定番」と言われているFFFTPが良いと考えます。このソフトは1997年に曽田純（Sota）によって開発されたFTPクライアントソフトウェア。漢字などのマルチバイト文字を名前に含むファイルを扱えるのが特徴で、日本語版と英語版が公開されています。作者による開発は2011年8月31日をもって終了しましたが、その後は有志によるオープンソースでの開発が続けられているようです。（Wikipediaより）
「このソフトは、通信過程を暗号化するSFTPに対応していません。」とされていましたが、下に記載してあるように、対応しているともいわれています。EC千葉ホームページのセキュリティ強化目的で通信過程を暗号化する時には今後の検討課題です。
当初の開発者によう開発が終了したFFFTPでは、パスワードやファイルを暗号化せずに送受信するFTP接続しか対応していませんでしたが、開発引継ぎ版では、暗号化された状態でセキュアな通信が出来るFTPS接続に対応しています。2019-05-22参照先
暗号化の簡単な説明は、こちら。
FTPクライアントソフトFFFTPは、窓の杜から入手できます。窓の杜
FFFTPのダウンロードと使用方法に関しては、多くのウエブサイトがあるので参考にしてください。難しいものではないので、慣れるだけです。一例をあげると、こちらです。
1.6. HTML編集ソフトとは
HTMLエディターとWebオーサリングツール
HTMLは表示方法を指示するマークアップ言語であり、プログラミング言語のような構造を持っています。そのような特質に対応したテキストエディタを特にHTMLエディターと言いいます。 HTMLエディターにない編集機能を持っているのがWebオーサリングツールです。（用語「テキスト」の簡単な説明）
Webオーサリングツール（Web Authoring Tool)とは、いわゆるウェブページ作成ソフトのことで、ウェブページを構成するHTML、CSSなどのファイルを編集するデザインツールです。インターネットの黎明期から存在し、フリーウェアも多い。HTMLエディタのようにソースコードを編集するのではなく、ワープロソフトあるいはグラフィックソフトウェアのような感覚で、視覚的に編集するツールを指す場合が殆どです。 日本で最も普及しているのはホームページ・ビルダー（IBM、ジャストシステム）でしょう。
名詞のAuthorは著作者の意味で、動詞は〈本・記事などを〉書くことを意味します。
コンテンツ管理システム（contents management system, CMS）
ロゴ
ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。他のページにある記事や画像とのリンクが可能となる等、ページ毎を編集基本とするWebオーサリングツールより複雑な編集が可能となっています。
代表的な例が、WordPressやJimdoです。これらのCMSの売り文句に「HTML（ホームページを作るときに使う言葉）を知らない人でもホームページが簡単に作れて運営できますよ～」と書いてありますが、経験的にまず無理です。CMSで実際にページを作るには、それなりの知識が必要です。
誤解されることを恐れずに例えると、HTMLは全く知らないがWebオーサリングツールやCMCでホームページを作成するのは、製図の基本は知らないけれどＣＡＤで設計を行おうとするようなものです。
コンテンツの配置や連携がうまく作動しなくなった時には、「何を、どうするば良いかが分からずにパニック状態」となる恐れがあります。「絵文字と英語」、そして「不正確な日本語訳」での説明が多く、理解できなくなります。これは体験談です。
ＥＣ千葉のホームページの構成は、非常に単純です。また、複雑なページにする必要性は殆どありません。いくつかの言葉（HTML）とルールを覚えてさえいればページの編集は可能です。ＥＣ千葉には複雑な動作や表示をするページは不要です。複雑なウエブページ作成をするのは、ページ作成をビジネスとしているデザイナーには必要なテクニックです。さもないと注文が来ません。
まず、鉛筆で紙の上に設計図を書くことから始めましょう。
HTMLエディタには「Cresent Eve」をお薦めします。有料ソフトですが・・・。
無料ダウンロード画像
「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」
「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」
「文字コードの自動認識は、絶対失敗しないようにしよう」
以上が著作者の作成意図とのことです。（こちら）
ダウンロード先：著作者のウエブページあるいは
窓の杜からもダウンロードできます。もちろん他のソフトでも結構です。使い慣れることが重要です。
