WEB制作とプログラミングの基礎知識【初級第1回】
講義の前に
これから話す内容も同義で、数年後も等しく正しいかは誰にもわかりません。
その為、当塾では用語やサービスの仕組み等を詳しくは説明せず、大まかに把握できるまでに留めております。
当塾で身に着けるべきは、プログラミングの学習方法とIT業界の慣れと理解だと考えます。
上記内容をご理解頂いた上で、講義に参加いただけますよう、宜しくお願い致します。
外部リンクについて
講義内容に外部サイトへのリンクがありますが、参考記事として紹介しております。
このような情報サイトは、検索すればWEBですぐ見つかり、わからない知識の大半が検索することで得られてしまいます。
そうした事実を実感してもらう目的でもって、教材ページでは外部リンクを多用しております。
プログラマの道のり
WEB制作の立ち位置
上の画像は中小規模のWEB制作の際の人員配置例になります。
例えば、ある企業から会社のHP制作依頼が入ったとします。
その際に相手の要望を聞き取りに行くのがディレクター、またはSEです。
依頼者にはWEBに詳しくない方も多いため、経験と知識、提案力が必要とされます。
依頼内容が固まったところで社に持ち帰り、その内容をプログラマとデザイナーに伝え、協議したうえで制作計画、見積もりを作成します。
その内容を依頼者に送り、GOサインが出たところで製作開始となります。
制作計画計画に沿って作業を割り振り、進行します。
その際になるとコーダーと呼ばれる下流行程の作業者に仕事が振られます。
ものすごく簡易的な説明ですが、大きなプロジェクトでない限りは、これに近い形が取られます。
続いて、各肩書の役割を簡単に説明します。
SE（WEBディレクター）
色々な言われ方をしていますが、要は制作プロジェクトのチーム監督です。
小さい会社であれば、管理職のような立場でしょうか。
全体を把握し、仕事を割り振る。
依頼者との折衝も行い、正しく理解し、プログラマやデザイナーに伝える。
知識と経験が必要なため、プログラムやデザインにそれなりに精通していなければなりません。
それだけでなく、チーム全体に目を配り、円滑に製作が進行されるようにコントロールする能力も必要です。
WEBプログラマ
サービスに機能を与えるため、プログラミングする人。
受けてきた依頼内容に応じた技術を身に着けておく必要があります。
もしその知識がなかったとしても、その製作中にで覚えられるだけの知的好奇心と向上心があればなんとかなる場合もあります。
人手が足らなければ、コーダーの役割を兼用します。
Webプログラマーとは？Webプログラマーの仕事内容と年収
Webプログラマーとは – Web・IT業界におけるWebプログラマーの役割やキャリアについて解説 | マイナビクリエイター
Webプログラマーの仕事内容、なるには、給料、資格など | 550種類の職業や仕事を紹介 Career Garden
WEBデザイナー
依頼者が求める見た目を作り、ユーザーが満足するデザイン配置を行う人。
ユーザービリティと呼ばれる使い勝手をデザインで満たすのもデザイナーの役目です。
優秀なデザイナーは、コーディングの効率化も考えたデザインができるという点で重宝されます。
こちらも人手不足であれば、コーダーの役割を兼用します。
Webデザイナーとは？Webデザイナーの仕事内容と将来性
Webデザイナーってどんな仕事をするの？-独学!未経験からWebデザイナーになる!!
コーダー
コーディングをする人。
プログラマ、デザイナーの殆どがここから始めるほど、重要な作業者であり、WEBの基礎を学ぶ上で素通りできない役割です。
HTMLコーダー – Wikipedia
コーダーとは？仕事内容や将来性をご紹介
《よくわかる》コーダーとプログラマーの違い | MOREWORKS
コーディングとは
コーディングに必要な3言語
- HTML
- CSS
- JavaScript
WEBページというのは、上記の3言語から成り立っています。
すなわち、この3言語が使えれば、WEBページが作れるということです。
HTML
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBページを作るための最も基本的なマークアップ言語のひとつです。
これがすべての基礎であり、土台となります。
CSS
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、WEBページのスタイルを指定するための言語です。
装飾するための言語なので、これがなくともWEBページは表示されるが、見た目がよろしくありません。
JavaScript
JavaScriptはプログラミング言語であり、ユーザー側のWEBブラウザと、WEBサイトまたはWEBサービスの相互間のやりとりを、円滑にするために使われています。
Javaと名前が似ているが、全く異なるプログラミング言語です。
JavaScriptとは何なのか！初心者向けに徹底解説 | TechAcademyマガジン
JavaScript – Wikipedia
コピー&ペーストやショートカットキーを覚えよう
コピペでHTMLファイルを作る
簡単な教材を作成します。
以下のコードを利用し、HTMLファイルを作って動作させましょう。
- フォルダ名『lesson』を作成
- テキストエディタを開く（メモ帳でも可）
- 黒のコード表の上でダブルクリックし、Ctrl + A で全選択
- Ctrl + C でコピー
- テキストエディタ上で Ctrl + V 貼り付け
- Ctrl + S でファイル名を『lesson_01.html』として保存
- 出来上がったファイルをブラウザ上にドラッグ＆ドロップで表示
※拡張子が表示されていない場合は、必ず表示するように設定しましょう。
Windows10 – ファイルの拡張子を表示/非表示にする – PC設定のカルマ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>講義1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">ここに貼り付けよう</h3>
</div>
<div class="panel-body">
<div class="form-group">
<textarea class="form-control" rows="5" id="put-data"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-warning send-data">送信</button>
<button type="button" class="btn btn-lg btn-default reset-data">削除</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div id="view-data">
<h2 class="text-center">ここに表示</h2>
</div>
</div>
</div>
</div>
<script>
// JavaScript Document
jQuery(document).ready(function($) {
//put_data
$(document).on('click','.send-data',function(){
var data = $('#put-data').val();
$('#view-data').html(data);
});
//reset_data
$(document).on('click','.reset-data',function(){
$('#put-data').val('');
$('#view-data').html('<h2 class="text-center">ここに出る</2>');
});
});
</script>
</body>
</html>
- ページ上で右クリックを押し、『ページのソースを表示』をクリック
- Ctrl + A で全選択
- Ctrl + C でコピー。
- Ctrl + V 貼り付け（ペースト）。
- 下の枠内に貼り付けたら『表示』ボタンをクリック。
※Macの場合はcommandキー
どうしてもうまくいかない人は、下のページを利用してください。
教材WEBページ
ここで何よりも重要なのは、コーディングはコピペでも成立するという事です。
この発言は賛否ありますが、私はコピペで済むものはそれでいいと思います。
HTMLタグなどの覚えなければいけないものはたくさんありますが、それらはコーディング作業をこなしていくうちに、勝手に覚えていきます。
始めからガチガチに記憶しようとせず、手を動かし続ける癖をつけましょう。
ショートカットキー
| キー操作 | 目的 |
|---|---|
| Ctrl + A | ドキュメントまたはウィンドウのすべての項目を選択する |
| Ctrl + X | 選択した項目を切り取る |
| Ctrl + C (または Ctrl + Ins) | 選択した項目をコピーする |
| Ctrl + V (または Shift + Ins) | 選択した項目を貼り付ける |
| Ctrl + Y | 操作をやり直す |
| Ctrl + Z | 操作を元に戻す |
| Ctrl + R (または F5) | 作業中のウィンドウを最新の情報に更新する |
先程使ったもののほかに、上記のようなショートカットキーが存在します。
とても重要なので、これらショートカットキーは自然と使えるようにしましょう。
Windows のキーボード ショートカット
Macにおける時短ショートカット | TIPS | BOEL Inc. ボエル
ディレクトリ構造とディレクトリパス
これは、WEBサーバーにおいても同じで、以下の画像のようにディレクトリを作り、そこにファイルを格納します。
これを理解していないと、表示したい画像や読み込みたいCSSが使えなかったりします。
重要な内容になりますので、これから解説します。
まずは以下の教材をダウンロードしてください。
絶対パスと相対パス
ディレクトリパスには、『絶対パス』と『相対パス』があります。
どちらにも長所と短所があるので、状況に応じて使うのがいいでしょう。
そのパスの書き方ですが、以下の通りです。
<!-- 絶対パス --> <img src="http://school.qomolangma.jp/beginner/01/dir/assets/images/img_001.jpg"> <!-- 相対パス --> <img src="assets/images/img_001.jpg">
上記のコードをダウンロードしたHTMLに貼り付けてみてください。
どちらも表示されるはずです。
2種類の違いとして簡単に説明すると、WEBにUPされているURLを指定して呼び出すのが『絶対パス』、呼び出そうとしているHTMLから画像の場所を指定して呼び出すのが『相対パス』です。
例えると、現在地を聞かれたときに
「日本/石川県/小松市/土居原町/１０−１０」と伝えるか
「小松市/土居原町/１０−１０」と伝えるかの違いのようなもので、状況に応じて使い分けるという事です。
<!-- 絶対パス -->
.mv{
background:url("http://school.qomolangma.jp/beginner/01/dir/assets/images/img_003.jpg") no-repeat scroll center top / cover;
}
<!-- 相対パス -->
.mv{
background:url("../images/img_003.jpg") no-repeat scroll center top / cover;
}
続いて、こちらのコードをCSSに貼り付けてみましょう。
どちらも同じ表示になります。
しかし、HTMLと書き方が違いますね。
これは、教材のディレクトリ構造によるものです。
上の画像の通り、CSSファイルは『assets/css』の中にあります。
そして、呼び出したい画像ファイルは『assets/images』の中です。
現在地である『assets/css』から上の階層に上がって『assets/images』を指定する。
その階層を上がるという指示が『../』になります。
というように文字で説明しましたが、これで理解できるものではありません。
まずは、教材を使ってパスを切り替え、教材ディレクトリ内にある画像をすべて表示してみましょう。
ローカル環境とパスの指定
教材をPC上で操作、表示しているこの環境をローカル環境と呼びます。
この環境内では、基本的に絶対パスは使いません。
使えなくはないですが、役に立たないので、相対パスを使用します。
最初は戸惑ったり、うまくいかなかったりしますが、必ず使っていくものなので、体で覚えましょう。
まとめ
特に重要なのはコーディングです。
プログラミング全体でみると知らなくてもいい分類になりますが、WEBに関わるとなると、必須の知識です。
そして、ディレクトリパスの知識。
こちらは理解できるまでもどかしい思いをするでしょうが、何回も使っていくうちに慣れてきます。
慣れるまでいろんな画像を呼び出したりして体に身につけましょう。
ショートカットキーについては、プログラミングとは無関係にパソコンを扱う上で必要な技術なので、普段から使うようにしましょう。
自主学習のススメ
自主的に学習サイトを開いて手を動かすことがなければ、何も残りません。
まずは、以下のページにある『HTMLとCSS』の項目にあるリンクを開いて、学習してみましょう。
