ホームページ作成の基本

コンピュータ基礎実習上級編では、皆さんにウェブページ(ホームページ)を作成してもらいます。ここでは作成に必要な基本的なことを説明します。

次回以降の授業の基本になりますので、理解しておいてください。

具体的な作成方法などは後日紹介しますので、ここではウェブページ関連の書類を取り扱うためのいくつかの注意点を把握しておいてください。

なお教科書を持っている場合は、第一章１～３も参考にしてください。

ページを公開するしくみ

ページは大学内にある「ウェブサーバー」あるいは単に「サーバー」と呼ばれるコンピュータの働きによって公開されています。ウェブサーバー内の定められた場所「ウェブページ公開用スペース」に、あなたが作成した文章や画像等のファイルを配置すると、ファイルの内容がインターネット上に公開される仕組みです。

ページを公開するには、あなたのパソコンで作ったページを、ウェブサーバーに送る必要があります。

アップロード

あなたのパソコンからサーバーなど、ネットワーク上のコンピュータにファイルを送ることを「アップロード」と言います。作成したファイルをウェブサーバーに「アップロード」することで、インターネットに公開したことになります。

ウェブサーバーは24時間稼働しており、ページ閲覧者に対してあなたのページの情報を提供します。

ダウンロード

逆にサーバーなどネットワーク上のコンピュータから自分のパソコンにデータやファイルをコピーしてくることを「ダウンロード」と言います。ダウンロードはネット上の写真や書類など、あなたが欲しいデータを保存したいときや、ソフトの不具合修正用アップデート・プログラムを取得する時などに行います。

ページでしてはいけないこと

この授業ではウェブページを制作します。ページの内容は自由ですが、それらをネット上に公開する場合は注意が必要です。

著作権侵害　　 (例) 他人が作った文章・楽曲・画像などを無断掲載
肖像権侵害　　 (例) 他人が写っている映像を本人に無断で掲載
違法な内容、誹謗中傷等の掲載　　 (例) 店の商品にいたずらしている画像など

問題が起こると、掲載した本人や、大学の管理責任が問われます。ページは自由に編集できますが、広くインターネット上に公開されるので、社会的に物議を醸さないような内容を心がけてください。

ホームページのアドレス

京都産業大学に在学中の皆さんは、自分専用のホームページ用スペースが用意されています。
アドレスは以下のようなものになっています。

http://www.cc.kyoto-su.ac.jp/~g1000000/

g1000000の部分はあなたのユーザーIDに置き換えてください。

このアドレスをブラウザのアドレスバーに入力すると、あなたのウェブページにアクセスできます。
なお、初期状態では、おそらく空白ページです……。（もし他の授業で作業をしたことがある人は、なにか書かれているかも知れません）

初期状態で何もないページ……

あなたがパソコンで作成したウェブページをサーバーに「アップロード」すると、この空白のページに、様々なコンテンツを表示でき、世界に発信できます。

この「http://」で始まる文字列のことを「URL」(Uniform Resource Locator) または「ホームページアドレス」あるいは単に「アドレス」と呼びます。
課題作成の際など、ページにアクセスするために必要となるので、自分のページのアドレスは、ブラウザの「お気に入り」などに登録しておきましょう。

（じつはこのコンピュータ基礎実習のサイトも、大学のウェブサーバーをお借りして作っています。条件は皆さんと同じです）

ウェブページの書き方

例えばWORDなどで作成した文章を、そのままアップロードしてもウェブページは正しく表示されません。

ウェブページを正しく表示させるには、「HTML形式」という書き方で文章を作成する必要があります。ルールにのっとった方法で文章を書くと、ウェブサーバーがページを整形して、正しく表示してくれます。

この授業の前半では、HTMLの書き方を学習します。

HTML形式は一見、難しく見えますが、いくつかの簡単なルールを覚えるだけで書けるようになります。(詳しくは次回の授業で説明します)

HTMLファイル

HTML形式で書かれたファイルを「HTMLファイル」といいます。特別なデータというわけではなく、単に決められた作法で文字が書かれているだけのテキストファイルです。
一般的なHTMLファイル

HTMLファイルは「サクラエディタ」などのテキスト編集アプリで簡単に作成できます。

ウェブページを作成する作業は主に、このHTMLファイルを作成し、アップロードする作業となります。

HTMLファイルの名前

HTMLファイルの名前は xyz.html というように .html (または .htm) という拡張子を付けてください。

※拡張子とは、ファイル名の最後にドット「.」に続けて記入する文字で、コンピュータがファイルの種類を識別するために使われます。たとえばWORDのファイル「提出書類.docx」なら「.docx」の部分が拡張子です。

またウェブ用のファイルやフォルダの名前には、日本語などの全角文字は使用しないでください。必ず半角英数字を使用して下さい。使用する画像など、関連ファイルに関しても同様です。

ファイル名およびフォルダ名に使用できる半角文字

種別	文字
記号	ドット「.]、ハイフン「-」、アンダースコア「_」
数字	0 ～ 9
英字	A ～ Z、a ～ z

正しいファイル名・正しくないファイル名

mypage.html          ← ○ 問題のないファイル名です。
page02.html          ← ○         〃
hyper-space_1.html   ← ○         〃               ハイフン「-」やアンダースコア「_」は使用できます。
picture001.jpg       ← ○         〃               画像なども半角英数文字のファイル名にしましょう。
マイページ.html      ← × 全角文字混じりのファイル名は正しく動作しません。
日記.html            ← ×         〃
ｐａｇｅ.html        ← ×         〃               全角英数字は見間違いやすいので注意です。
help.hrml            ← × 拡張子が正しくありません。
jyohn's page.html    ← × 記号やスペースが混じると正しく動作しません。

ウェブ制作においては、全角文字を含むファイル名は誤認識などトラブルの元であり、正しくアクセスできなくなる場合があるので、ファイルやフォルダの名前には必ず半角英数字を使用してください。¹⁾

英語の大文字の扱い

英語の大文字（A～Z）はファイルやフォルダの名前として使えますが、ウェブサーバー上でページを参照する際には正確に記述する必要があります。

ウェブサーバー上での話ですが、例えば別のページ「MyPage.html」にリンク(接続)する際に「mypage.html」を指定すると大文字・小文字が異なるためリンクできませんし、「pictuire01.JPG」という画像ファイルを表示する際に「pictuire01.jpg」を指定しても表示できません。大文字小文字を含め正しく「pictuire01.JPG」のように指定する必要があります。
これは一般的なウェブサーバーは大小文字が異なるファイルを別のファイルと認識する仕様だからです²⁾。

混乱を防ぐためにも、ファイルやフォルダの名前は小文字に統一しておくのが無難です。

アップロード方法

制作したページをインターネットに公開したいならば、必要な文章や画像などは全て、「ウェブサーバー」上の「ウェブページ公開用スペース」に「アップロード」する必要があります。

この授業での「アップロード」の扱いについて

今回、授業はオンラインで行われます。しかしアップロードの手続きは少々複雑で、操作が難しいです。

そこで、本授業では基本的に「アップロード」を行わず、制作したファイルを直接 moodle に提出することで評価をするものとします。

もちろん可能であればアップロードを行っても構いませんが、できなくても moodle にファイルを提出できれば問題ないものとします。

以下のアップロードやアクセス方法に関する情報は、課題の提出にあたっては不要なものもありますが、正式なウェブ制作を行う場合には必要となりますので、参考にしてください。

アップロードするには、専用のアプリケーションが必要になります。大学内の共用パソコンでは「FileZilla」(ふぁいるじら) というアプリが使えます。 FileZillaは「共通アプリケーション」内に標準でインストールされています。

FileZilla

なおFileZillaの詳しい操作方法を知りたい場合は、基礎実習（上級）ページの「補足資料」コーナーにある「FileZillaの使い方」の記事を参考にしてください。

FileZilla を使って行うアップロード作業は、おおむね以下のような流れになります。

FileZillaを起動します。
- 学内の共用パソコンの場合は「共通アプリケーション」→「FileZilla」で起動できます。
- 一般的なWindowsの場合は「スタート」を開くと「Ｆ」の欄の中にあるFileZillaアイコンをクリックして起動できます。
左上の「サイトマネージャを開く」ボタンをクリックし、ccftp を選択した状態で「接続」ボタンをクリックしてサーバーに接続します。このとき、画面の左側にはパソコン上のファイルが、右側にはサーバー上のファイルが表示されます。
画面右側のサーバー側で public_html フォルダを探し、ダブルクリックしてフォルダ内に移動します。このpublic_htmlフォルダ内に配置したものが、インターネットに公開される仕組みです。アップロード先のフォルダを間違えないように！現在位置はFileZilla画面の右上に表示されます。
アップロードしたいファイルを画面右側にドラッグすれば、アップロード完了です。

ページの内容を編集した場合は、再度FileZillaでアップロードし直して、アップロードしたファイルを上書きします。

そのほか、画面右側のサーバー側で「右クリック」し、「削除」や「名前変更」などを選択して、適宜修正ができます。

FileZillaは、FTP（ファイル転送）という技術を使ってファイルを転送するための無料アプリです。 FileZillaの他にも、FTPを使ってアップロードを行えるFTPアプリは複数存在するので、好みのFTPアプリを使うこともできます。どのアプリを使っても操作方法はおおむね同じなので、FileZillaで操作に慣れておくと良いでしょう。

ページにアクセスする方法

とりあえず制作したページの内容を確認したいのであれば、HTMLファイルをダブルクリックしましょう。ブラウザが開いて、ページの内容が表示されます。簡単ですね！

しかし表示されたページは、あなたのパソコン上で見えているだけで、インターネットに公開されたわけではありません。

もし正式にネット上に公開したい場合は、まずアップロードを行ってください。

今回のオンライン授業では、実際にはアップロードは行いませんが、行った場合どうなるのかという参考にしてください。

例えばpublic_html 内に mypage.html をアップロードした場合、そのファイルにアクセスするには、以下のアドレスでアクセスできます。

http://www.cc.kyoto-su.ac.jp/~gXXXXXX/mypage.html

gXXXXXXはあなたのユーザーIDに置き換えてください。
URLの後ろに mypage.html が付くのがポイントです。

例えばpublic_html 内にフォルダ profile を作成し、その中に mypage.html をアップロードしたなら、以下のアドレスでアクセスできます。

http://www.cc.kyoto-su.ac.jp/~gXXXXXX/profile/mypage.html

URLの後ろに profile/mypage.html が付きます。

このように、基本となるホームページアドレス( http://www.cc.kyoto-su.ac.jp/~gXXXXXX/ ) の後ろに、フォルダ名やファイル名をスラッシュ( / )で区切って記述することで、目的のページにアクセスできます。

これが正式にインターネットに公開したファイルにアクセスする方法です。

ファイル名の省略

では例えばファイル名を省略して、以下のようなアドレスでアクセスするとどうなるでしょうか？（ファイル名がついていない点に注目）

http://www.cc.kyoto-su.ac.jp/~gXXXXXX/

ファイル名が付いていないので、ウェブサーバーは、どのファイルを表示すれば良いのか分かりません。

実は多くのウェブサーバーでは、このようにアクセスすると、自動的に index.html という名前のファイルが読み込まれる仕様になっています。

サイトにアクセスする時には、ファイル名を省略してアクセスすることは多いです。よって上記の仕様を踏まえて、最初に表示させたいトップページを index.html というファイル名にしてサーバー上にアップロードしておきましょう。

なお、index に相当するファイルが一つもないと、出せるページがないので、ファイル名を省略してアクセスした際には「403」というエラーが発生してしまいます。注意してください。

注意： indexは一つだけ

実は厳密には index.htmlの他にも、index-j.htmlやindex.htmなど、いくつかのファイル名が自動的に読み込まれる候補として選ばれる仕様になっています。

しかし、これらのファイルがフォルダ内に「複数」存在すると、どのファイルを表示させるかで混乱が発生します。たとえば、index.htm を書き換えてアップロードしても、index.html が先に表示されるので、編集内容がまったく反映されない、といった混乱が予想されます。（ファイル名の違いは、末尾にlが付いているか、いないかだけです。何とまぎらわしい！）

そこで混乱を避けるために、１つのフォルダ内にはindexと名前のつくファイルを複数作らないようにしましょう。もちろん、ウェブサーバー上においても同様です。もし一つのフォルダ内に似た名前のindexファイルが複数存在している場合は、不要なものを削除するか、名前変更するなどして、indexが１つだけになるよう整理しましょう。

どのindexを表示するかで混乱

まとめ

ホームページ編集のポイントは以下のとおりです。

ページは「HTML形式」と呼ばれる特殊な書き方で記述する。
ファイルやフォルダ名には、日本語などの全角文字は使用しないようにする。
最初に表示するページとしてindex.htmlのようなファイルを作っておく。
FileZillaというアプリを使って、ウェブサーバーにファイルを「アップロード」することでページを公開できる。
アップロードをした場合、ホームページアドレス(URL)にアクセスすることでウェブページを表示できる。
```
http://www.cc.kyoto-su.ac.jp/~gXXXXXX/
```

次回以降、HTMLの詳しい書き方について解説を行います。ここでの基礎知識を把握しておいてください。

戻る

¹⁾

厳密には、あなたのパソコン上でHTMLファイルを開くなどして操作するのであれば、全角文字を使ったファイル名であっても動作するかもしれません。しかし正式にウェブサーバーにアップロードすることを考えた場合、世の中の一般的なウェブサーバーは全角文字の混じったファイルやフォルダ名を正しく扱えないことが多いです。そのような事情を考慮して、ファイルやフォルダの名前は半角英数字で書いておくことをおすすめします。

²⁾

なおWindowsは大文字小文字が異なっていても同一のファイルだと認識します。この仕様の違いが「ウェブサーバーにアップロードしたら本番でなぜか動かない」という面倒な問題を引き起こすのです。

目次