LogoMark.png

リカレント講座/Webデザイン/第1回

福岡商工会議所x九州産業大学 リカレント講座

Webデザイン基礎講座 第1回


受講者の方へ|補足とお詫び

10日の講座中にご紹介したFileZilla Client のインストールの際、WinZip あるいは AVAST! Free AntiVirus など、FileZilla 本体とは別のオプションソフトウエアのインストールに同意された方がおられるかと思います。

フリーソフトウエアのインストール時には、そうしたスポンサー企業の関連ソフトのインストールを推奨されることがあります。悪意のあるソフトではありませんが、有料版のインストールを推奨するなど、使っていて邪魔になることがありますので、不要であれば、アンインストールすることをお勧めします。

日常的に Windows を使っていないので、このような現象が起こることを予期できておりませんでした。ソフトウエアのインストールについて、私のご説明不足をお許し下さい。

アンインストールの方法は、お使いの Windows の環境によって方法が異なる場合がありますので、 [ WinZip アンインストール ] などで検索して、その方法をご確認くださいますようお願い申し上げます。

以上、追加の説明とお詫びでした。



はじめに

ごあいさつ

Webを支える技術には、HTML, CSS, JavaScript, PHP といった複数の言語が存在しますが、本講習で体験していただくのは、HTMLCSSによるWebサイトの構築です。
 Webに関連する技術とその応用分野は多岐に渡りますが、現代社会に広く受け入れられた標準技術とその背景にある思想を知ることは、「情報とは何か」、「情報はいかに収集・整理・共有・管理されるべきか」、また「情報社会とはいかなる性質のものであるか」を考える契機となります。皆様の今後の活動にとって、本講習での体験が何らかの視野の拡大につながれば幸いです。

自己紹介

井 上 貢 一(いのうえこういち)
九州産業大学 芸術学部 ソーシャルデザイン学科 教授
日本デザイン学会 / 芸術工学会 / 日本映像学会 / greenz people

CONTENTS




1. 前提の確認

1.1. 情報発信の様々なかたち

1.2. Webサイトの公開方法

Webサイトを公開するには、以下のような方法があります。

1.3. インターネットとWeb

2. PC環境の確認

2.1. インターネットに接続できていますか?

2.2. Windows でファイルの「拡張子」が見えていない方へ

拡張子というのは、index.html photo.jpg document.docx などの、ファイル名の後ろについている「ファイルの種類を明示する文字列」のことです。

買ったばかりの Windows は、初心者がこの拡張子を間違って書き換えてしまうことがないように、あえてこの部分が「非表示」になっています。プロとして仕事をする際、これが諸悪の根源となるので、システムの設定を変更して「表示」にしておきましょう。以下その手順です。

folderoption.jpg

参考:Windows で実行可能な18種類の拡張子
http://tooljp.com/qa/75C3F9E971AE05FB49257D9200499246.html


2.3. 基本操作の確認

3. 開発環境の準備

Webデザインには以下の3種類のソフトウエアが必要です。いずれもオープンソースのフリーソフトウエアとして入手できるので、金銭的な負担は一切ありません。PCが一台あれば、誰でもすぐにはじめることができます。

3.1. 作るソフト(テキストエディタ)

ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です*1

3.2. 見るソフト(ブラウザ)

Chrome、Firefox、Safari、Microsoft Edge(Internet Explorer)、などホームページを閲覧するソフトをブラウザといいます。~.htmlをダブルクリックすると、通常これ(デフォルトブラウザ)が起動します。ページが正しく表示されるか複数のブラウザで確認する必要があります。

3.3. 転送するソフト(FTPクライアント)

FileZilla、FFFTP、Cyberduck、FireFTP(Firefox拡張)など、出来上がった~.html ファイルや画像データを、自分のパソコンから、リモート(遠隔地にある)・サーバーへ転送するのが、主な役割です。作ったファイルは、サーバーにアップロードすることによって、はじめて世界中から見えるページになります。

参考

上記サイトからうまくダウンロードできない場合は以下をご利用ください。
すみません、Windowsのバージョンが様々なようで、逆に混乱を招くようでしたので、リンクを外しました。公式サイトより、お手持ちのPCに最適なものをダウンロードしてご利用下さい。

付記1
ソフトウエアのインストール時には、インストーラーの指示に従って作業を進める途中で、スポンサー企業等が作る「追加のソフトウエアのインストールをお勧め」されることがあります。基本的には不要なので「チェックを外して先に進める」ことを推奨します。

なお、配布されるソフトウエアには、インストーラータイプ の他に ZIPタイプ のものを選べる場合があります。ZIP版の場合は、解凍(展開)するだけで、すぐに使用することができます。インストーラタイプで生じるような「余計なソフトを追加インストール」する心配もないので、お勧めです。

いずれにしても、フリーソフトウエアをインストールする際には、「(当該ソフト名)+ インストール」などで検索して、インストール方法に関する紹介記事を複数確認することをお勧めします。

付記2
ソフトウエアを削除するには・・

付記3
ダウンロードとインストール(セットアップ)は別のプロセス なのですが、スマートフォンの場合は、これが同時に行われるので、スマホネイティブの方はこの区別がついていないことが多いようです。
 パソコンにフリーソフトウエアをインストールする場合、一般的にはダウンロードするだけではダメで、その次に、インストーラープログラムを起動してセットアップ(すなわち関連するファイルを必要な場所に配置)する・・という手順になります。尚、上述のZIP版は、ダウンロードして解凍するだけでそのままで実行できます(セットアップは不要です)。




4. 基本サンプルのダウンロードと動作確認

まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。

4.1. サンプルのダウンロードと解凍

HTML+CSS によるWebサンプルです。以下から丸ごとダウンロードして、フォルダを開けてみて下さい。

4.2. サンプルの表示確認

サンプルは以下と同じ形で表示されるはずです。
https://koichi-inoue.github.io/SampleSite/

4.3. サンプルのフォルダについて

5. 編集体験

では、さっそくサンプルを編集してみましょう。

5.1. Webサイト制作の基本

HTMLとCSSの本格的な説明は第2回になります。

5.2. テキストエディタを起動して下さい

5.3. 体験のプロセス

編集体験のプロセスは以下のとおりです。事前にご確認下さい。

5.4. index.html の編集体験

まず、はじめに HTMLファイルの編集を体験します。


5.5. style.css の編集体験

次に、CSSファイルの編集体験を行います。

5.6. ソースコードの書き方について





6. レンタルサーバーを利用したサイトの公開

世界へ向けてWebサイトを公開するにはサーバーが必要です。無料のレンタルサーバーでは、小さく広告が入るなどの条件がありますが、アカウントの登録だけで利用することができるので、まずは無料のものでお試しください。
 なお、レンタルサーバーにファイルをアップロードする際には、FTPクライアントが必要になります。

6.1. アカウント取得について

レンタルサーバーのアカウント取得には、メールアドレスが必須です。まず、メールで本人確認した後、正式なアカウント登録となるケースが多いようです。適宜説明にしたがって、手続きを進行させて下さい。一般に以下の情報が必要になります。メモをとって残すようにして下さい。

6.2. アカウント名について

フリーのレンタルサーバーでは、アカウント名は、あなたのサイトのアドレスに表記される文字列になります。すでに使われているものとの重複はできませんので、ユニークな名称を事前に考えておきましょう。

注)Webサイトは、つくって公開しただけでは、検索にはかかりません。ホームページの公開アドレス(URL)を、SNSで紹介する、関係先のWebサイト上でリンクしてもらう・・といった対策を施すことで、やがて検索でヒットするようになります。これには最短でも数日かかります。
参考:SEO


6.3. FTP接続情報の取得について

レンタルサーバーを使ったWebの公開で、最終的に必要となるのは、FTP接続情報です。これは、当該サービスのサイトでログインすると「管理情報」などの画面で確認することができます。接続には、以下3つの情報が必要です。

6.4. サーバーへの接続

FileZilla1.jpg
FileZilla2.jpg
FileZilla3.jpg
手順2手順3・4手順6


6.5. サーバーへのアップロード

FTPクライアントツールは、一般に左にローカルマシン(自分のPC)のディレクトリ、右にリモートサーバー(レンタルサーバー)のディレクトリーが見えます。ローカルにあるサイトの中身をそっくりそのまま(相対的な位置関係を変えずに)リモートにアップする・・というかたちで、Webサイトは公開されます。

つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。

参考事例|X-Freeサーバー

以下のページに、X-Freeサーバーでのアカウント取得から、Webサイト公開までの手順を列挙しています。参考イメージとしてご覧ください。



7. 参考:GitHub を利用したサイトの公開

7.1. GitHubとは

以下、GitHubPagesのサービスを使ってWebサイトを公開する手順です。


7.2. アカウントの作成

GitHub の無料アカウントを作成します。

以後、GitHubを使う場合は、Sign in をクリックして、ID,PW を入力してログインして下さい。

7.3. リポジトリの作成

リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。

GitHubPagesNew.png
GitHubPages01.png


7.4. ファイルのアップロード

GitHubPages02.png
GitHubPages03.png

7.5. 公開設定

サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。

GitHubPagesSettings.png
GitHubPages05.png



7.6. サイトの更新

HTML・CSSファイルの更新には、以下の2つの方法があります。


付記:不要なリポジトリの削除

作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。

GitHubPagesDelete.jpg




第1回の講習は以上です。第2回は、HTMLとCSSの文法について学びます。



PAGES

GUIDE

DATA


*1 補足:Dreamweaverやホームページビルダーの利用について
一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。

Last-modified: 2020-11-10 (火) 18:38:18