ウェブページの基本的な更新手順について、見ていきましょう。
- HTML ファイルを編集する前に行うこと
- HTML ファイルを編集する際に行うこと
- HTML ファイルを編集した後に行うこと
以上のような時系列に分け、解説を行います。
例として、事業所に関する情報を記したウェブページを更新する手順を見ていきます。具体的には、「 訪問介護 」のページの「 介護サービスさくら砂田橋事業所 」の情報を更新する方法を取り上げます。
先ほど 3 つに区分した作業手順について、より詳しく分けた場合には、以下の作業を行っていくことになります。
HTML ファイルを編集する前に行うこと
- 編集を行う対象となるファイルを確認
- 編集を行う対象の行の目安を確認
- FTP ソフトやファイルマネージャーで、さくらインターネットのウェブサーバに接続
- 編集を行う対象となるファイルを、ダウンロード
- ダウンロードしたファイルをコピーし、バックアップ
HTML ファイルを編集する際に行うこと
- 編集対象の範囲を確認
- テキストエディタで編集対象のテキストを、新しい情報に書き換え更新
- 編集したファイルをウェブサーバにアップロード
HTML ファイルを編集した後に行うこと
- ブラウザでの表示確認
- 作業ファイルの削除
ウェブページの更新手順
HTML ファイルを編集する前に行うこと
編集を行う対象となるファイルを確認
編集したいウェブページを、まずはブラウザで表示してみましょう。
https://www.kaigo-sakura.com/homehelp/index.html
今回の例では、「 訪問介護 」ページの「 介護サービスさくら砂田橋事業所 」の情報を更新します。
ここでは、[ FAX 番号 ] を [ 012 – 345 -6789 ] に更新することを目標とします。
ウェブブラウザのアドレスを見ると
https://www.kaigo-sakura.com/homehelp/index.html
と表示されています。( Google Chrome では kaigo-sakura.com/homehelp/index.html と表示されます )
https://www.kaigo-sakura.com/
までについては、さくらインターネット側の FTP サーバ上のアドレス・フォルダである、
/home/kaigo-service/www/kaigo-sakura.com/
との対応関係にあります。( 下図参照 )
それ以降、上の画像では、黄色い下線をつけたアドレス ( homehelp/index.html ) が、編集する対象となる HTML ファイルとなります。すなわち、
homehelp フォルダ内にある index.html という名前の HTML ファイルを開くと、上の画像に表示されている「 介護サービスさくら砂田橋事業所 」の情報を編集することができます。
FTP ソフトや、ファイルマネージャーで同フォルダを表示した画面を以下に示します。
kaigo-service > www > kaigo-sakura.com フォルダの中に homehelp フォルダがあり、
その中に index.html ファイルが存在していることがわかる。
編集を行う対象の行の目安を確認
「 ソースの表示 」または「 検証 」などの機能を利用して、編集を行いたい箇所が、HTML ファイルのどの行にあたるのか、だいたいの見当をつけます。
ブラウザ Google Chrome で「 訪問介護 」のページを開き、今回更新を行いたい箇所 [ FAX 番号 ] を
- 左クリックで、テキスト [ 052-715-3106 ] と表示されている箇所を選択
- 右クリックメニューから [ 検証 ] を選択
すると、上の画像下部のように、このページを構成している HTML の情報などが表示されます。
今回の例では、この [ FAX 番号 ] は <td> タグで記載・囲まれており、前後には <th> タグや <tr> タグ、つまりは表組み ( テーブル <table> ) に関連するタグによって表示されていることがわかります。
<tr>
<th>FAX番号</th>
<td>052-715-3106</td>
</tr>上記の HTML ファイル内の記載のうち、<td> に囲まれた 052-715-3106 の箇所を書き換えることで、目標の更新を行うことができそうであることがわかります。
後ほど、実際に HTML ファイルを編集する際に、この箇所を探す必要がありますが、その目印として記憶しておきましょう。
FTP ソフトやファイルマネージャーで、さくらインターネットのウェブサーバに接続
「 FFFTP 」などで、さくらインターネットのウェブサーバに接続をします。
なお「 FFFTP 」による接続方法については、さくらインターネットの公式ページに解説あります。
編集を行う対象となるファイルを、ダウンロード
編集を行う対象となるファイルを、FTP ソフトやファイルマネージャーで、作業をしているパソコンにダウンロードします。
ダウンロードしたファイルをコピーし、バックアップ
これから行う編集作業の中で、もしファイルの内容を誤って編集して保存してしまっても、すぐに元に戻せるよう、ダウンロードしたばかりのファイルをコピーし、バックアップを取ります。
以上で、HTML ファイルを編集する準備が整いました。
HTML ファイルを編集する際に行うこと
編集対象の範囲を確認
テキストエディタの検索機能を用いて、編集対象となるテキストを探します。
今回は、homehelp フォルダ内にある index.html をテキストエディタで開いて、052-715-3106 で検索をすると、すぐに該当箇所が表示されるはずです。
テキストエディタの検索機能は、ほとんどのエディタソフトでは Ctrl キー を押しながら、[f] を押すと表示されるでしょう
テキストエディタで編集対象のテキストを、新しい情報に書き換え更新
ワープロソフトで文字を編集するように、テキスト情報を編集・更新します。
今回は、homehelp フォルダ内にある index.html の 120 行目付近に該当箇所がありました。
テキスト「 052-715-3106 」の箇所を、新しい情報「 012-345-6789 」に更新して、保存をします。
編集したファイルをウェブサーバにアップロード
FFFTP などの FTP ソフトやファイルマネージャーを利用して、さくらインターネットのウェブサーバに、編集をしたファイルをアップロードします。
この際に、編集内容に誤りがなさそうであれば、「 上書き保存 」をしてもいいでしょう。
一度、表示確認を行った上で、「 上書き保存 」を行いたい場合には、編集したファイルの名前を [ index-1.html ] などと違う名前に変更をしてアップロードし、ブラウザで確認を行ったあと、問題がなければファイルの名前を [ index.html ] などに戻して「 上書き保存 」を行います。
HTML ファイルを編集した後に行うこと
ブラウザでの表示確認
アップロードをしたファイルをブラウザで表示し、今回の編集内容が反映されているか、確認をします。
内容が反映されない場合は、ブラウザのキャッシュをクリアするなどして、最新の情報を表示しているか、確認をします。
作業ファイルの削除
今回の作業によって、パソコンに生じた HTML ファイルについては、再利用の予定がない場合には早めに「 ごみ箱 」にいれて削除しましょう。
以上の手順で、ウェブページに新しい情報を掲載することができます。