HTMLの編集・修正をFTPで！ 書き換え更新時に先祖返りを防ぐ方法

HTMLはほぼテキストファイル

HTMLの本質とは「誰でも書き直すことができるテキストファイル」だということです。HTMLは「ウェブを記述する言語」ですが、プログラムのように人間には読めないような特殊なファイルではありません。その中身は「ほとんどただのテキストファイル」で、手持ちのテキストエディタで開くことができるファイルです。まずは、ウェブサイトのHTMLの見方を説明します。

HTMLを見てみたいウェブサイトのページを右クリックし、「名前をつけて保存」をしてみましょう。すると、拡張子が「.html」のファイルを保存できます。

次に、保存したファイルを右クリックし、「プログラムから開く」→「テキストエディタ」を選んで開くことで、文字列が適宜改行されたテキストファイルとして扱うことができます。ここではテキストエディタの「秀丸」を使って開きます。

ただ、HTMLを読むのは一般にブラウザや各種プログラムなので、文字コードと改行コードが一般にパソコンで扱うのとは違う場合があるので注意が必要です。下手にエディタで開いて保存してしまうと、HTMLで設定されている文字コードと改行コードが、パソコンの文字コードと改行コードに変わってしまうことがあります。たとえば、次の図を見てみてください。

図には、以下のように文字コードが「utf-8」と指定されています。

<meta charset="utf-8">

ウェブ担当者になったら、自分のサイトがどの文字コード、改行コードで記述されているか、知っておく必要があります。最初に制作会社に確認しておきましょう。

次の図は、HTMLを「秀丸」という人気のテキストエディタで「名前をつけて保存」した場合の画面です。一般にはただ名前をつけて、保存先を決めて保存するだけですが、画面下部に「エンコード」（文字コードのこと）と、「改行コード」が選べるようになっています。

ここまで説明したことのポイントを覚えておきましょう。

• HTMLの本質はテキストファイルで、テキストエディタから開ける
• 文字コードと改行コードは複数あり、自社のサイトがどれで記述されているかを知っておく必要がある

HTMLを見ることに慣れよう

まず、ウェブ担当者になったら「HTMLを見る」ということに慣れましょう。簡単にサイトのHTMLを見るには、サイトをブラウザで表示して、ページの上で右クリックし、「ページのソースを表示」を選ぶだけです。以下の図を見てください。

これがHTMLです。ソースの前半部分はアルファベットだらけで難しく感じますが、これはブラウザに対する指示が大半です。慣れれば意味はわからなくても「どこのサイトも同じようなことが書いてあるんだな」と思えるようになります。

HTMLの書き換え時にタグを消さないようにする

HTMLに見慣れたら、次はHTMLファイルを書き換えていきます。そのとき、タグを消さないように注意しましょう。たとえば、次のような文章があるとします。

この文章のうち、「自分で更新」というところを強調したい、と考えたとしましょう。強調したい部分を、以下のように「太字にする」という指示のタグ「<b>」と「</b>」で挟みます。

このように指示することを「タグ付けする」と言います。タグというのは洋服などの商品につける値札や荷札のことで、タグをつければ好きな場所に情報を追加できる便利なものです。

タグ付けすることを英語では「マークアップ」と言います。印を付けるような感覚です。HTMLは「HyperText Markup Language」の略ですが、このマークアップがタグ付けのことです。

先ほど見た図ではアルファベットだらけでしたが、最初の方はブラウザへの指令です。今回書き変えたいのはブラウザへの指令ではなく、日本語のテキスト部分なので飛ばして読んで大丈夫です。以下の図のように、まずは日本語の文章を探しましょう。

この日本語の部分を見ると、ソースもとてもシンプルです。

以上のように、簡単なタグが使われているだけで、ほとんど単純な日本語文です。タグは段落を指定する「<p>」と「</p>」、改行を指定する「<br />」だけです。このタグを消してしまわないように注意しながら、日本語を書き直してみましょう。

「の」ひと文字だけ書き加えて、htmlファイルを保存してみましょう。書き換えるときに注意するのはタグを消さない、変えないということだけです。「>」を1つ消して、「<p>」を「<p」にしてしまったら表示されなくなってしまいます。

また、太文字タグ「<b>」は、必ず終了タグ「</b>」とセットで使って「ここからここまで太文字にする」とブラウザに教えますが、もし終了タグ「</b>」を消してしまったら、「<b>」からあとの文章が全部太文字になってしまうので、注意しましょう。

HTML更新してみよう

HTMLに見慣れてきたら、いよいよHTML更新をしてみましょう。先ほど保存したhtmlファイルを以下の手順にそって更新してみましょう。

ウェブの更新作業は、次の通りです。

1. FTPでウェブサーバーに接続
2. ページのデータを取ってくる
3. 書き直す
4. ウェブサーバーにデータをアップする

順番に説明します。

1. FTPでウェブサーバーに接続

HTMLを更新するためには、ウェブサーバーにHTMLファイルを転送しなければいけません。ウェブサーバーに転送するときは、HTTPではなく「FTP（エフティーピー）」という方法でアクセスします。FTP（ファイル・トランスファー・プロトコル）と呼ばれるもので、ファイルを送受信するときの約束事です。FTPを行うためのアプリは無料で手に入れられますから、パソコンにダウンロードしてください。

ウェブサーバーとは、閲覧者から「このページを見たい」というリクエストがあれば、「はい、そのページはこれですよ」とデータを送り出してくれるものです。サーブしてくれるのでサーバーだと思っておくと良いでしょう。リクエストは多くの場合、閲覧者がブラウザ上で何かのリンクをクリックすることで発生します。

上の図のように、FTPで接続しようとすると、ホストの設定名、ホスト名、ユーザー名、パスワードなどを設定してくださいと、設定画面が出てきます。この情報は、レンタルサーバー会社から最初に提供されているはずです。

この情報をなくしてしまって、サーバーに接続できなくなってしまう会社は結構多いです。このパスワードはウェブ運営で大切な情報の1つですから、制作会社任せにせずに自社内で大切に保管してください。もしあなたが異動でウェブ担当でなくなることがあれば、後任の担当者に必ずこうした情報をしっかり引き継いでください。

FTPアプリを設定して「接続」ボタンを押せば、アプリの窓の中に、自社ウェブサイトのデータが置かれたサーバーの中が見えるはずです。

2.  ページのデータを取ってくる

FTPでウェブサーバーに接続できたら、下図のように、FTPアプリの窓の中に、いくつかのフォルダが表示されます。サーバーも、パソコンと変わらず、フォルダの中にフォルダをつくってその中にファイルを入れて分類整理するという仕組みです。どのフォルダの中に自分が更新したいファイルがあるかを見つけましょう。

データを探すには、更新したいページをブラウザで開けばわかります。ニュースの1つのページだとすれば、ブラウザのアドレス欄に以下のように表示されます。

http://www.yourdomain.co.jp/news/20201208.html

これがフォルダやファイル名を表しています。

「www.yourdomain.co.jp」というフォルダの中に、「news」というフォルダがあって、その中に「20201208.html」という名前のファイルを今表示しているよ、という意味です。そこで、今見ているFTPアプリの窓で「news」というフォルダを探し、それを開いてその中に「20201208.html」があるかを探すのです。

階層構造については、「階層構造を考えたホームページ構成とは サイト構造やツリーの作り方のヒント【第9回】」を参照してください。

3. 書き直す

更新したい情報が入っているファイルを選んでダウンロードボタンを押せば、手元のパソコンに更新すべきデータが飛んできます。これをテキストエディタで開いて日本語テキストを書き直し、保存します。

4. ウェブサーバーにデータをアップロードする

最後にFTPアプリのアップロードボタンを押せば、ファイルがサーバーに飛んでいって更新完了です。

アップロードする場合は、元通りのフォルダに返さなければいけません。別の場所にアップして「あれ、リロードしても表示が変わらない！」と困っている人がいますが、気をつけましょう。

HTML更新に本当に必要な5ヶ条

このように、更新というのは骨組みだけ覚えるのは何も難しいことはありません。ダウンロードして、日本語を書いて保存し、アップロードするだけです。しかし、本当に大切なのはここからです。

ウェブのファイルはウェブサーバー上にある、と言いましたが、実は他の場所にもあるので、これが注意すべき点です。厳密にはウェブのデータは以下の4か所にあります。

• ウェブ担当者のパソコンの上
• 制作会社のパソコンの上
• テストサーバーの上
• 本番サーバーの上

ここまで説明してきたのは、「本番サーバー」上のファイルを想定していました。自分のパソコンで書き直してアップしましたから、ウェブ担当者のパソコンと本番サーバーのファイルは同じものになっているでしょう。しかし、このままだと制作会社の持っているデータと食い違ってしまいます。制作会社が本番サーバーのファイルが更新されたことに気づかずに、別の部分を直してアップしたら、ウェブ担当者が直した部分は古い状態に戻ってしまうかもしれません。これを「先祖返り」と言います。

ウェブはさまざまな人が関わり、チームで進める仕事です。複数の人がデータを持っていてそれぞれに更新していると、こうした先祖返りは良く起こることです。 ウェブ担当者が自分で更新できることはとても良いことですが、このコミュニケーションができていないと大事故が起こります。「データを消してしまった！」「ファイルをアップしたら表示がおかしくなってしまった！」という問題を避けるためには簡単なルールがありますので、次の5ヶ条を守ってください。

1. ウェブ担当者と制作会社で更新の分担を決める
2. 必ずバックアップをとってから変更する
3. テストサーバーで確認してから本番サーバーにアップする
4. 更新日時、ファイルを記録する
5. チームに情報共有する

それぞれについて説明します。

1条目 ウェブ担当者と制作会社で更新の分担を決める

まず、分担をおおむね決めましょう。社内では「ニュース」だけ更新するので、他の部分は制作会社が行う、といった分担です。制作会社がもしニュースを更新することになったら、必ずサーバーから最新ファイルをダウンロードして更新することにします。

2条目 必ずバックアップをとってから変更する

次に、サーバーからファイルをダウンロードしたら、必ずいったんコピーをとってから変更しましょう。サーバーにアップして万が一表示がおかしくなったり、サーバー上のファイルを誤って削除してしまったりしても大丈夫。慌てずにコピーしたバックアップファイルをアップすれば、元に戻すことができます。

3条目 テストサーバーで確認してから本番サーバーにアップする

多くのサイトが「テストサーバー」という非公開の領域を持っています。更新するときは、テストサーバーにアップして、問題がないことを確認してから本番サーバーで公開するようにしましょう。自社内で更新する場合にも同じようにします。テストサーバーは本番サーバーと基本的には同じ状態になっているようにしましょう。

4条目 更新日時、ファイルを記録する

記録を取ることも重要です。面倒だと思うかもしれませんが、これは絶対に習慣づけましょう。たとえば「気がついたらページの表示が崩れていた」といったことがよく起こりますが、記録があれば、「何月何日にアップしたときに問題が起こったのかもしれない」と追いかけることができるでしょう。

これは問題を防ぐというだけでなく、攻めの運営を行うためにも重要です。多くのサイトである時点から急にアクセスが増えた、ということが起こります。しかし、いつ何を更新したのか記録がなければ、理由がわかりません。アクセスが増えた理由がわかれば、また同様の作業をすればもっとアクセスを増やすことができるでしょう。しっかり記録をとって、ノウハウを蓄積し、運営を加速していけるようにしてください。

5条目 チームに情報共有する

最後に、チーム全体に情報共有することです。「このページを更新したので、更新記録ファイルを見てください」と、更新メーリングリストに一報するだけ、といった手軽な方法でOKです。これがあれば、更新連絡のメールを一覧するだけで、先祖返りを防ぐことができるようになります。