【画像あり】xserver上のHTMLファイルをatomで編集する方法
今回は、xserver上にあるファイルをatomで編集する方法としてFile Zillaを使ったSFTP接続をご紹介させていただきます。
サーバーと公開鍵暗号方式という安全性の高い方法で接続します。
秘密鍵の作成方法は以下の過去記事の中で紹介させていただいておりますので、よろしければご覧ください。
File Zilla起動から接続前の準備
以下の画像はFile Zillaを起動させた直後になります。
外部サーバーと接続するには、まず画面左上の「File」をクリックします。
「File」をクリックしたら、現れたメニューの中から「Site Manager...」をクリックします。
「Site Manager...」をクリックすると、以下のように「Site Manager」のウィンドウが開きます。
デフォルトで選択されているはずですが、右側のタブから「General」をクリックして選択します。
今回は以下の画像にも映っているように、「General」タブの中から以下の6つの項目を編集します。
- Protocol
- Host
- Port
- Logon Type
- User（後ほど出現）
- Key file（後ほど出現）
※目次から各項目へ移動できます。
設定値の入力
以下より、File Zilla側で実際に接続設定を行う際の設定値の入力方法についてご紹介させていただきます。
Protocol
まず初めにデータ通信のプロトコルを選択します。
といってもプルダウンメニューから選ぶだけです。
今回はSSHを利用したFTPファイル転送を行うのでプルダウンメニューから「SFTP - SSH File Transfer Protocol」を選んでクリックします。
Host/Port
続いてホスト名とポート番号の入力です。
今回は自分が借りているxserverのサーバーに接続するので、「sv***.xserver.jp」のように入力します。
またポート番号は、以下のリンク先の公式サイトで言及されている通り、「10022」を指定します。
SSH設定｜レンタルサーバーならエックスサーバー| SSHアカウント情報 | |
|---|---|
| サーバー（ホスト名） | サーバーID.xsrv.jp（お客様の初期ドメイン）※ホスト名（sv***.xserver.jp）でも設定が可能です。例：xsample.xsrv.jp |
| ユーザー名 | サーバーID 例：xsample |
| 認証方式 | 公開鍵認証 ※パスワード認証は利用できません。 |
| 接続ポート | 10022 |
以下は実際のxserverのアカウント画面を開いた画像です。
xserverの「契約情報」画面の「サーバー番号」に記載されている文字列がFile Zillaに入力する「sv***」の部分になります。
Logon Type
続いてログオンタイプの設定についてです。
今回は公開鍵暗号方式を利用するSSH接続を行うので、プルダウンメニューをクリックして「Key file」を選択します。
User
続いてユーザー名を入力します。
xserverに接続する場合は「サーバーID」を入力します。
「サーバーID」も先ほど確認したxserverの「契約情報」画面から確認できます。
以下の画面はxserverの契約情報の画面です。
一番上の行に書いてある「サーバーID」に記載されている文字列を「User」の部分に記載します。
以下は実際にxserverのWebサイトアカウントで作成した秘密鍵ファイル（***.key）です。
この記事の冒頭でも述べましたが、秘密鍵ファイルの作成の仕方は以下の過去記事に記載させていただいておりますので、よろしければ是非ご覧ください。
xserverにログインして作成する秘密鍵は拡張子が「key」となっていますが、File Zillaではこの「***.key」という拡張子の秘密鍵ファイルに対応していません。
ですので、この「***.key」という秘密鍵ファイルを選択すると、以下のようなウィンドウが表示されてFile Zillaが対応しているファイル形式に変換するように求められます。
以下の画面が出たら「Yes」をクリックします。
「Yes」をクリックすると以下の画像のように、秘密鍵を作成したときに設定したパスワードの入力を求められます。
パスワード入力後に「OK」をクリックします。
この記事の冒頭でも述べましたが、秘密鍵ファイルの作成の仕方は以下の過去記事に記載させていただいておりますので、よろしければ是非ご覧ください。
「OK」をクリックすると、以下の画像のようにFile Zillaに対応した鍵ファイルの保存場所を聞かれます。
フォルダを指定してファイル名を入力したら右下の「Save」をクリックします。
設定後の接続の方法
ここまでの過程で、下の画像のように「Protocol」「Host」「Port」「Logon Type」「User」「Key file」の6項目が入力された状態になりました。
ここまで入力出来たらいよいよサーバーに接続します。
ウィンドウ右下の「Connect」をクリックします。
Unknown host key
初めてサーバーにつなぐ場合は、以下のように接続先のサーバーを信用するかどうかの選択を求められます。
「Details」の中の「Host」の値を確認したら右下の「OK」をクリックします。
ちなみに以降の接続でこの画面を出さないようにするには、「Always trust this host, add this key to the cache」のチェックボックスにチェックを入れます。
Enter password
「OK」をクリックすると、下の画像のようにxserver側で設定した秘密鍵のパスワードの入力を求められます。
「Password」の欄にパスワードを入力したら、右下の「OK」をクリックします。
接続完了時
パスワードを入力して「OK」をクリックすると、ウィンドウ上部で接続状況を示すログが流れ始めます。
最終的に「Status」が「Successful」という値になるとウィンドウ右側にxserver上に格納されているフォルダが表示されます。
以上で接続までの手順は終了です。
atomでxserver上のファイルを編集する方法
xserverにSSHでアクセスできるようにしたら、File Zilla経由でxserver上のファイルをatomを使用して編集できるようにします。
ます、以下の画像のように編集したいxserver上のファイルを右クリックし、表示されたメニューの中から「View/Edit」をクリックします。
No program associated with filetype
今までFile Zillaで開いたことのないファイルを「View/Edit」で開こうとすると、以下の画像のように「No program associated with filetype」というウィンドウが表示されます。
今回はatomでファイル編集をしたいので、atomの実行ファイルを選択します。
ウィンドウの中で3つめの「Use custom program」のラジオボタンにチェックを入れて、右側の「Browse...」というボタンをクリックします。
「Browse...」をクリックしたら以下の画像のように、atomの実行ファイル（今回の場合はatom.exe）を選択して、「Open」をクリックします。
以下の画像のようにatomの実行ファイルを指定出来たら、右下の「OK」をクリックします。
「OK」をクリックすると、以下の画像のようにatomを使ってxserver上のファイルを開くことができました。
atomで編集した内容がxserver上に反映されることを確認するため、何か適当に文字を入力した後にファイルを保存します。
今回は「test」という4文字を試しにファイルに入力して保存してみました。
編集内容の反映の方法
atomで編集した後にファイルを保存すると以下の画像のように「File has changed」というウィンドウが現れます。
atomで編集して保存するだけではxserver上に反映されないので、ここで「Yes」をクリックします。
「Yes」をクリックして数秒すると「File transfer successful...」というログがFile Zillaウィンドウ上部に流れますので、それを確認できればxserverへ編集内容がされます。
以下の画像は実際にWebサイトから直接xserver上にファイルの内容を確認しに行った様子です。
さきほど入力した「test」という4文字がしっかりと反映されています。
これでxserver上のHTMLファイルをatomで編集する方法のご紹介は以上になります。
xserverのWebサイトから直接ファイルを編集するよりもかなり楽に作業が進みますので、興味のある方は是非試してみてください。
関連記事
＼ シェアする ／
