WEB用語の基礎知識(社内用) | WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

Web・PC・アプリや日常のことを書いてます。
いまだにWEBビギナーな私が、ここまでできました!をお届する「ここでき!ブログ」

1月17日から、2人の新人が入社しました。
うちの会社は、WEB初心者の私が入社できたように、高いスキルを求めていません。
今回もイラレ、フォトショップはでき、サイト修正ぐらいはできるスキルの人たちです。

自分が入社した時のレベルより上のスキルは持っているようですが、業務としはほぼ未経験なので、先輩面してすこし教えなければと思いました。
そこで、1年半という少ない経験で得た、うちの会社でしか通用しないであろうWEB製作に関する用語の基礎知識(これを知っていればうちの会社ではやっていける!!)をまとめました。

※あくまで社内用ですので、きちんとした意味などを知りたい方はWEB用語辞典などを参照してください。


World Wide Web / Bull3t


HTML4とXHTML1.0
時代はHTML5ですが、これまでのクライアントのサイトは当然HTML4.0かXHTML1.0で製作されています。
入社したて頃、そもそもHTMLに種類があること自体知りませんでした。今でもその違いがよくわかっていません。

ソース先頭の違い

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

XHTML1.0
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

参考までに
HTML5
<!DOCTYPE html>
<meta charset=“UTF-8”>

過去記事でも少しだけHTML5について書いていますが、CSS3とセットと考えているのですが、IE6~8が未対応なので二の足踏んでます。

タグの違い
終了タグがない単独のタグ、「改行タグ」や「イメージタグ」などの>の前に、XHTMLだと半角スペースと/が入ります。

HTML4
<br>
<img src="photo.jpg">

XHTML1.0
<br /> ←半角スペース/
<img src="photo.jpg" /> ←半角スペース/


SSIと.shtml
セカンドページ以降のヘッダやメニュー、フッタなど共通する部分をssiファイルにすることにより、修正がある場合、例えばメニューが1項目増えた時など1つのファイルの修正で全ページに反映させることができる優れものの機能です。

<!--#include file="読み込むファイル.ssi" -->

上記のタグを、サイトのメニューなど繰り返し使われる箇所に貼り付けておくと、指定したファイル(メニュー)を置き換えて出力してくれます。
ただし、SSIに対応したサーバであること、拡張子が.shtmlであることが前提です。
過去記事に便利なSSI機能で少しだけ詳しく書いてます。
また、拡張子を.htmlから変更できない場合は、.htaccess(.htmlでSSIを使う方法)もあります。

Movable Type(MT)
Movable Type(MT)はSix Apart社のブログやサイト構築ができるCMSツール。

うちの会社では、クライアントのサイトに設置し、TOPページにブログまたはTOPICSとして、新着エントリーを表示、TOPページの更新頻度を高めることが目的として利用しています。
ただ、契約しているサーバーから簡単インストール(バージョンが3と4のみ)できます。
※現在は、バージョン4から5にアップデートされています。

関連記事
Movable Type について
Movable Type3にカレンダーを設置
Movable Type3の2カラム表示
Movable Type4の移動
Movable Type4:管理画面のカスタマイズ
Movable Type 4のダッシュボードをiPhone用インターフェイスに
MT4で新規エントリーに「NEW!!」マークを表示させる
Movable Type4をiPhone用で表示
MultiBlogの再構築トリガー
Movable Type4.2の文字編集パレット
Movable Type 5の前に。。。


CGI
CGIとは、Webサーバが、Webブラウザからの要求に応じて、プログラムを起動するための仕組み。従来、Webサーバは蓄積してある文書をただ送出するだけであったが、CGIを使うことによって、プログラムの処理結果に基づいて動的に文書を生成し、送出することができるようになった。現在ではほとんどのWebサーバソフトがCGIに対応している。CGIはどのような開発言語でも使用できるが、実際にはPerlなどがよく使われる傾向にある。
(引用:IT用語辞典 e-Words

使用箇所は、TOPページのアクセスカウンターメールフォームで使用しています。
※アクセスカウンターは、ログ解析ツールがサーバに標準設置、またはGoogleアナリティクスを設置しているので必要があるのか疑問です。実際に報告書に記載の訪問数と、カウンター表示の数字の違いでクライアントが誤解し、結果契約解除になったり、TOPのカウンターを削除してくれとクライアントから言われ外したこともあります。

話がそれましたが、CGIのファイルには1行目にParlのパスを記述します。

#!/usr/bin/perl または #!/usr/local/bin/perl
これは使用するサーバによって違います。

また、メールフォームを送る場合、sendmailのパスも必要なので、
$sendmail = '/usr/lib/sendmail'
こちらも、使用するサーバによって違いますので、確認してください。

設定後、FTPソフトを使用し、アップします。
その後アップしたCGIプログラムのパーミッション設定をします。

パーミッションとは...
コンピュータのハードディスクなどに保存されているファイルやディレクトリに対するユーザのアクセス権のこと。一般に、UNIXシステムにおけるアクセス権を指す言葉として用いられる。
(引用:IT用語辞典 e-Words

$WEB初心者奮闘記「ここまでできました!」

こちらは実際にFTPソフトからアップしたCGIファイルですが、赤枠の中に属性とあり、rwx r-x r-xやrw- rw- rw-といった記号があります。
これがアクセス権を記号化したもので、左から「所有者の権限」、「所有グループの権限」、「その他のユーザーの権限」となります。
では、rwxの記号の意味は、
r・・・読み出し権限
W・・・書き込み権限
x・・・実行権限
となり、さらに許可する場合を数字で表します。
r・・・許可⇒4 不可⇒0
W・・・許可⇒2 不可⇒0
x・・・許可⇒1 不可⇒0

ということで、上記のファイル(index.cgi)の属性を見てみます。

$WEB初心者奮闘記「ここまでできました!」

すると、755となっているのが確認できます。
以上のように使用するCGIファイルなどはマニュアル等でアクセス権限を設定し、正常に作動するか確認します。


まだまだあるのですが、書き始めて1週間たっても進まないので、いったんアップします。
続きはまたの機会に。

「ここでき!」