サイト作成に欠かせないもの、まずはなんといってもエディタが必要です。
当然、IBMホームページビルダーのような高価なものを利用するのもよし、
メモ帳でHTMLの基礎の基礎から学習していくのもよしです。
しかし、いずれにせよ、HTMLのコーディングが必要になってきます。
その手法については大きく分けて2通り。
1つ目、コーディングなんていうのとは縁遠いですが、IBMホームページビルダーやMSWordのように、見たままを得られる(※)方式です。
※What You See Is What You Get、略してWYSIWYG(ウィジウィグ)と呼ばれます。
というのも、視覚的に見たものがそのままページになるため、HTMLタグなんていうものを意識する必要が無いのです。
しかし、細かい所や他のCSSやJSを自分で入れたい場合などではMSWordなどで作ったようなページに挿入するのは困難です。
IBMホームページビルダー当たりならできるかもですが、残念ながらお財布との相談になってしまいます。
2つ目、当サイトのメインコンテンツとして掲げているハンドメイドによるサイト構築、
つまりはテキストエディタによるコーディングによって作成する方法です。
エディタについては100人いれば100通りの答えが出てくるため、これというのはありません。
また、紹介サイトの紹介の仕方によっては、このエディタはHTMLは可能だがJSは出来ない、
CSSはできる、このエディタは出来ないなどと紹介していますが、厳密にいうとそれは嘘です。
というのも、HTMLもCSSもJSもテキストエディタでコーディングするだけが目的であり、
プログラミング言語のようにコンパイルして実行ファイルを生成するというな作業を一切必要としないからです。
ということはつまり、低機能ではありますが、Win付属のメモ帳でも作れるということでもあります。
要はテキストエディタ一本で勝負できるのがWebサイト作成の特徴であり醍醐味でもあるのです。
→テキストエディタ・HTML編集特化エディタはこちら ※テキストエディタを参照のこと
せっかく作ったHTMLファイル、公開するつもりなら公開用のサーバにアップロードしないと意味が有りません。
比較的多くの人はドメインを取得しサーバを立て、そしてそのための先行投資……という面倒で頭の痛いことまでは考えず、
無料のサーバスペースを借りる人の方が多いでしょうから、その際にFTP通信によるアップロードが要求されます。
無論、FTPコマンドによる手動でやる人よりももっと簡単な方を選ぶ人の方が多いでしょうから、FTPクライアントツールを入手する必要があります。
(コマンドで送信する方が楽というコアな人もいるかもしれませんが)
→FTPクライアントを参照のこと
使用するサービスにもよりますが、サービスによってはブラウザエディタもブラウザアップローダも用意している場合があります。
但し、そういうのは主にド初心者用に作られたものが多く、それだけに最低限で簡易的な機能しか用意されていないことがほとんどです。
サービスを提供する側としても、無料のサービスに対してそこまで高機能なものを用意することなど考えているハズがないですから、なおのことです。
そのため、いずれも機能的にいまいちであることも多く、自分好みの代物とは言えない可能性もあります。
基本的にどのサービスを利用するにしてもエディタもFTPソフトも使用に制限はないことがほとんどのため、自分に合ったツールを探すことから始めましょう。
実際にサイトに文字コードを反映させるのなら、編集あるいはアップロード時の文字コードに注意しなければなりません。
ファイルの編集時やアップロード時にこれらの文字コードを意識(というか統一)させておかないと、
せっかく作ったページが文字化けしてえらいことになります。
コンピュータの世界には本来日本語なんていうものはありません。
しかし、日本人が見て理解する上では日本語が使用出来なければ理解できません。
そこで登場するのが文字コードという考え方です。
ISO-2022-JP(日本語JISコード) 日本語のメール送受信では標準 Shift_JIS(ASCII・半角文字混在型) 日本語WindowsOS標準 EUC-JP(Extended UNIX Code Packed Format for Japanese) 日本語UNIX系OS標準 UTF-8(Unicode UTF-8) HTML5以降では推奨
詳細は検索してもらえればいいと思いますので概要だけ。
コンピュータは日本語をはじめとする文字を表現するのに数字(文字アドレス)だけで判断しています。
例えば1番が「あ」で2番が「い」、3番が「う」みたいな感じです。
実際にはコンピュータなので0と1のビットで番号を振っているので、0000番が「あ」で0001番が「い」、0010番が「う」みたいな感じです。
ところが、文字コードによっては1000番が「あ」で1001番が「い」、1010番が「う」に割り当てられており、
そういう場合は基本的に0000番、0001番、0010番には別の文字が割り当てられていることになります。
そうです、要するにこの差分が文字化けを起こす要因で、編集した際にこの文字コードの指定が正しくないことで起こりえます。
つまり、まずは文字コードを気にしないことには自分が伝えたい事が伝わらないことにもなりかねないのです。
サービスによってはブラウザエディタもブラウザアップローダも用意している場合がありますと書きました。
実は、これも文字コードにかかわる大きな欠点を持っています。
サービス側も基本的に特定の文字コードを使用して自分のサイトページを構築しているわけですが、
ということは当然、用意しているブラウザエディタもそのサイトページの文字コード依存の代物であることがほとんどです。
お判りでしょうか、つまり、ブラウザエディタを使う場合、文字コードの指定というのはなく、
半ば強制的にサービス側が使用しているものに合わせなければなりません。
よく、外部のサイトで<meta>タグで文字コードの指定を覚えてバカの一つ覚えの如くセットする方もいらっしゃいますが(昔の私みたいにｗ)、
実際には自分が更新する際の文字コードに合わせて設定する必要がある為、設定の際には気を付けなければなりません。
尚、HTMLの文字コードの指定はユーザ側が使っているブラウザに使用する文字コードを指定する効果になりますので、
編集したテキストの文字コードを変更する場合は保存時に決めなければいけません。
そして、サーバ提供サービス付属のブラウザエディタは保存時の選択肢を与えられていないのがほとんどのため、注意です。
逆に指定ができるのなら<meta>タグの値と合わせるようにしましょう。
<meta http-equiv="content-type" content="text/html; charset=(文字コード)">
これは古い形式ですが、
HTML 5 以前のHTMLバージョンを採用している方であれば、これを<head>～</head>の間に入れるだけです。
文字コードは各人で使用するものを指定してください。サーバ提供サービス付属エディタを使用していて、わからないよという人は、
そのページの文字コード(表示あたりからエンコードだかエンコーディングだかを参照)をくまなく見ればわかると思いますので、それを書き入れてください。
最近はブラウザ側の動作もそのあたりを考えている場合が多いため、案外無理に入れる必要もないかもしれません。
※というより、わからないまま設定するのはかえって危険なので、どうしてもわからないという場合は無理に設定しない方がいい
このタグの記載自体は<head>を書いたすぐ次でもいいぐらいです。
Pc(OSないしブラウザ)も基本的に人間と同じで、上から順にコードを読み上げますので、
何よりも先に読んでくれたほうが化ける可能性が低くなるためです。
つまり、<title>要素の内容とて例外ではなく化ける可能性があるということです。
<meta charset="UTF-8">
HTML 5の場合は「UTF-8」が推奨ですが、その場合のコード指定はこの一行だけで十分です。
UTF-8以外ならこの形式で別の文字コードを記述しましょう。
付属エディタ以外では、好きに選べるのですが、何がいいのでしょうかという話もあると思います。
こればかりは好きなものを選んでねというしかないです。が……
ISO-2022-JP(日本語JISコード) 日本語のメール送受信では標準 Shift_JIS(ASCII・半角文字混在型) 日本語WindowsOS標準 EUC-JP(Extended UNIX Code Packed Format for Japanese) 日本語UNIX系OS標準 UTF-8(Unicode UTF-8) HTML5以降では推奨
日本語のページでは「Shift_JIS」が一番多く、次が「UTF-8」です。
「Shift_JIS」が多い理由はいたって簡単で、見ての通り、日本語WindowsOSで標準であるためです。
何気に「EUC-JP」も多かったりしますが、多くのサーバ側の文字コードがこれであるためかもしれません。
(サーバ側のOSはほとんどの場合Linuxサーバで、LinuxではEUC体系が標準。
EUC体系だったYahoo！ジオシティーズなんかはまさにそうだったのかもしれない)
一方、「UTF-8」はUnicode体系で、他の3種類とは違って日本語以外の文字も扱っているため、徐々に勢力も伸びつつあります。
特にHTML5以降では推奨されているコード体系でもあることから、個人法人サイトに関わらず超加速度的に浸透しつつあります。
そんな流れもあり、「彩りの大地」でも前身サイト設立当時より「Shift_JIS」を指定しておりましたが、HTML5への移行に伴い「UTF-8」にしました。
これについてメモ帳の話から説明すると……使い勝手がよろしくないので使う可能性はないと思いますが、一応。
他のテキストエディタであれば文字コードを指定して保存する機能を持ち合わせていますが、こいつだけは例外です。
保存時の選択として、ANSIかUnicode(UTF8かUTF16(ビッグエンディアン/リトルエンディアン))しかありません。
なんだろANSIって……それに他のコードないじゃん、意味が解らん……そう思った人、簡単な話です。
ANSIはOSで使える文字の中でも原始と言える存在で、文字コードにかかわらず、常に同じアドレスで呼び出されます。
なお、そのANSIコードというのは基本的に半角文字のアルファベットや数値と記号などで構成されているものです。
ということはつまり、ANSIの範囲の文字は(2バイト)文字コードの範囲外の文字であり、
だったら(2バイト)文字コードの範囲内の文字が保存されたら、その文字はどう扱われるんだと考えるわけですが、実はそんなに難しい話ではありません。
Shift_JIS(ASCII・半角文字混在型) 日本語WindowsOS標準
はーい、そうでーす。正解はShift_JISでーす。
日本語Windowsを使っているので文字コードはつまりOS依存のShift_JISになります。
(もちろん、ほかの言語のWindowsだったらそちらに従う動作になります。)
そのため、TeraPadだろうがサクラエディタだろうが、特に設定や指定が無ければデフォルトでShift_JISでの保存が選択されるわけです。
ということはつまり、ほかの言語のWinOSを使う場合はまた違う文字コードが指定されるので注意が必要だと思えばいいです。
→ちょっと高度な文字コードに関する勘違いのお話(ウェブページ作成には直接関係しない話)
ちなみに、CSSとJSも2バイト文字(日本語)を使うと文字コードを考えないといけないということになります。
こちらも保存時に漏れなく文字コードを指定してあげてください。
文字コードのみならず、FTPで転送する際にも注意点があります。
何と言っても気を付けるべきはFTPの設定、
そのうえで必要なのは説明書嫁って話です。
サーバ提供サービス側から通信モードについて指定があることが多く、
ほとんどの場合はPASSIVEモードでの通信を要求してくることが多いです。
PASSIVEモードを要求してくる主な理由は、セキュリティ的にこちらのほうが多少なりとも都合がいいからだと思いますが。。。
しかし、次の項目を見てわかる通り、コマンドでやる面倒くさい作業を全部自動的にやってくれるFTPクライアントソフト側は、
そもそもコマンドでの通信がデフォルトでACTIVE(PORT)モードである関係か、
FTPクライアントソフト規定値自体もACTIVE(PORT)モードに設定されていることが多く、これを忘れるとFTP通信ができなくなります。
FFFTPではそんな風潮を考慮してか、PASSIVEモードがデフォになりました。
Filezillaは自動認識なので、気にする必要はないと思います。
そうでない場合などでは向こうの要求と同じ設定なのかきちんと確認するようにしましょう。
標準でFTP機能が使えるということ。さらにブラウザにもよるが、IEでも使えた。
さらにそもそも論だが、コマンドでFTPも使えるので、面倒だが……
ただし、コマンドでの通信はデフォルトでACTIVE(PORT)モードのため、PASSIVEモードでないといけない場合は切り替える必要がある。
一方で、ブラウザやエクスプローラからのFTP通信はPASSIVEモードがデフォなので何も考える必要はないが、
ACTIVE(PORT)モードを要求される場合もあるかもしれないのでやっぱり説明だけはちゃんと聞いてあげてください。
ファイルの転送モードにはアスキーモードによる転送とバイナリモードによる転送の2種類があります。
これもどちらでもいいということは無く、ファイル毎にどちらで転送すべきかの決まりがあります。
原則、テキストファイルについてはアスキーモードで転送し、画像や音声、動画などの非テキストファイルはバイナリモードで送信します。
アスキーとはAA(アスキーアート)でもお馴染みのあのアスキーのことで、つまりは、テキスト……文字のことです。
そのため、テキストエディタで開いて意味不明なバグ文字列が表示されなければアスキーモードで転送すべきファイル、
そうでなければバイナリモード転送すべきファイル、という理解でもいいと思います。
バイナリというのは要は0と1だけの文字の羅列で表現されているファイルのことですが、
当然、テキストファイルについてもこの種類に入ります。
ですが、それは改行文字などの特殊な制御文字はあくまで特殊な制御文字のままで読み取られてしまうため、
つまりは本来はテキストファイルであるはずのファイルまでバイナリで転送してしまうと、
あくまでバイナリファイルとして解釈してしまうので、それではよくありません。
※改行コードについてはWinではCR＋LF、MacOS(昔)ではCR、LinuxではLFなどと言われているのは有名。
HTML編集している環境がWinなら改行はCR＋LFだが、サーバ側はLinuxはLF、WebサーバはLinuxのApacheで構築していることが多いので、
改行コードの食い違いが発生し、改行コードの認識がうまくできず、結果的にアスキーファイルとして閲覧しようとしたところ、
正しく表示されないなどということも起こりえる。
そのため、ファイルごとにアスキーモードとバイナリモードをきちんと判別しながらファイルを転送しなければいけないことになってしまいます。
しかし、ありがたいことに、FTPクライアントツールではそれを考慮してか、転送時にファイル形式をマクロ的に自動判別して適切に転送してくれる機能を持つものが多いため、
アスキーモードとバイナリモードの別を気にして転送する必要はありません。
……そのはずですが、その設定がちゃんとしておらず、規定値がバイナリモードになっているツールなどもたまーにあったりするので、
どのツールも使用する前には必ず初期設定を一通り確かめておくことを推奨します。