教科書には載っていないWordPressテクニック（開発環境・レンタルサーバー編）

教科書には載っていないWordPressの楽ちん開発環境（レンタルサーバー編）

自分のパソコンのテキストエディタとレンタルサーバーを接続するメリット

今回ご紹介する『自分のパソコンのテキストエディタとレンタルサーバーを接続するメリット』をまずはじめに確認しておきたいと思います。

• 開発スピードが上がる
• プログラミングが楽しくなる
• バックアップも取れる

まず1番のメリットは「スピード」です。FTPで自分のパソコンのテキストエディタとレンタルサーバーを接続することで、レンタルサーバー上のプログラムを直に編集できるようになります。いちいちローカル環境で作成したファイルをアップロードしなくても大丈夫。 これは特に何度も何度もプログラムを編集する時に効果を発揮し、開発スピードを飛躍的に押し上げてくれます。

次のメリットとして「プログラミングが楽しくなる」ことが挙げられます。これは筆者自身が実際にFTPで接続してWordPressを編集した時に感じたことで、手元で変更したことが即座にホームページの方に反映されるので、単純に面白いです。 またプログラムを書く環境も使い慣れたテキストエディタなので捗りますね。

最後の「バックアップ」ですが、多くの方がWordPressのバックアップをプラグインに任せている方が多いと思います。「でも、本当に大丈夫かな？」と思う方もいらっしゃるのではないでしょうか？FTPを使うことで、レンタルサーバーにアクセスしなくても簡単にWordPressのバックアップをとることができます。

今回のFTPでは、データベースへの接続は行いませんので、バックアップできる内容は、WordPress本体とアップロードした画像などです。

Visual Studio Codeとレンタルサーバーを接続する方法

atomやSublime TextでもFTPツールを使ってレンタルサーバーに接続できますが、今回は人気のエディタVisual Studio Codeを使ってFTP接続していきたいと思います。

FTP(File Transfer Protocol)は、サーバーと自分のパソコンの間で、ファイルを送受信するための決まりごと。

まずはVisual Studio Codeを起動し、左サイドバーの「Extensions」のアイコンをクリック。そして検索欄に「ftp」と入力するとたくさんのFTP関連のプラグインが紹介されます。今回は一番上の”ftp-simple”を選択。

Visual Studio Codeのプラグインを選ぶポイントとしては、「ダウンロード数が多い」「情報が多い」ことが挙げられます。プラグイン名でGoogle検索して複数のチュートリアルが紹介されれば、使っていて分からないことがあっても安心して対処できると思います。

ftp-simple のインストールが完了したら、次は接続設定です。自分のパソコンのキーボードの fn を押しながら F1 キーを押します。すると下図のように ftp-simple の操作メニューが表示。

まずは接続設定から行う必要がありますので ftp-simple:Config - FTP connection setting を選択（クリック）。すると下図右側のような設定ファイルが自動で開きます。

少し手間かも知れませんが、この設定ファイルにサーバー情報を書き込むことで自分のパソコンのVisual Studio Codeとレンタルサーバーが接続できるようになります。 設定ファイルの記入例は下記の通りです。

[
    {
        "name": "マイ　バリューサーバー",
        "host": "s19.valueserver.jp",
        "port": 21,
        "type": "ftp",
        "username": "レンタルサーバーログインのユーザー名",
        "password": "レンタルサーバーログインのパスワード",
        "path": "/public_html",
        "autosave": true,
        "confirm": false
    }
]

上図は一つのレンタルサーバーと接続する設定で、複数のレンタルサーバーと接続したい場合は上図のように , で区切って書くことで、接続先を切り替えて使えるようになります。

port（ポート番号）はレンタルサーバーによって予め決められています。 私のVALUE SERVERの場合は　２１　で、「value server ポート」で検索すると該当情報を確認できました。

"autosave": true　は、自動保存に関する設定で、自動保存したくない時は "autosave": false にします。
"confirm": false は、ファイルの上書きに関する設定で、 false の場合はファイルを自動的に上書きします。

設定ファイルの作成・保存ができたら次は実際にレンタルサーバーに接続していきます。また fn + F1 を押して、今度は ftp-simple: Remote directory open to workspace を選択。すると先ほどの設定ファイルで記入した name の内容が表示されます（下図参照）。

接続先のレンタルサーバーを「バリューサーバー s２」に選択。

ここからは接続先のディレクトリを選択、今回は kesuyo.o-namae.com の中のファイルと接続してみます。kesuyo.o-namae.comの項目をクリックすると、kesuyo.o-namae.comの下のディレクトリが表示されます。

今回はkesuyo.o-namae.comで公開しているファイル群全てに接続してみたいと思いますので、「.Current directory: /public_html/kesuyo.o-namae.com」を選択。すると下図のようにレンタルサーバー上にある　/public_html/kesuyo.o-namae.com の情報が表示されます（下図参照）。

レンタルサーバーと自分のVisual Studio Codeがつながったといっても物理的な変化は何も起きないため、実感湧きにくいですが、これでつながっています。尚、ローカル環境で編集した内容は、上図のようなディレクトリに保存されていきます。

ftp-simple 使用時のローカル環境保存先

/Users/a01/Library/Application Support/Code/User/globalStorage/humy2833.ftp-simple/remote-workspace-temp/cb1b365858f939611497d749dfbf21f4/public_html/kesuyo.o-namae.com

次に本当にローカル環境の変更がレンタルサーバーに反映されるかテスト。試しに hello.html をローカル側で追加し、 https://kesuyo.o-namae.com/hello.html にアクセスしてみると上記のようにhello.htmlの内容が出力されていることが確認できます。

ここで一旦、ローカル環境のファイル群の様子を確認してみます。先ほどVisual Studio Codeのターミナルで確認したftp-simpleの保存ディレクトリは、上図のような隠しフォルダ内に存在。Macの場合は、Shift + Command + . で隠しフォルダを表示することができます。

そしてftp-simpleの保存先まで辿ってみた結果、上図のように hello.html 以外は 0バイト、つまりデータがない状態です。Visual Studio Code上にはファイル群が表示されているのでデータが手元にあるような感じはしますが、実際には編集した時のみローカル環境にもレンタルサーバー上のファイルが記録されます。

最初のうちはいろいろ違和感がありますが、使っていくうちに慣れていくでしょう。上図は投稿ページを編集した様子。

レンタルサーバー上のファイル群をVisual Studio Codeでダウンロードする方法

ここまでの操作で、ftp-simpleでレンタルサーバー上のファイルを編集できるものの、ファイル群は編集したファイルしかローカルに保存されないことが分かりました。次は”編集有無関係なし”にレンタルサーバー上のファイル群をダウンロードする操作をご紹介したいと思います。

まずは fn+F1 を押して、ftp-simpleのメニューを表示します。そして

ftp-simple:Download-Download in working directory from FTP server

を選択（クリック）。

次はダウンロードするレンタルサーバーのディレクトリやファイルを指定。クリックして進めます。

今回は上図のように 2020 年にアップロードした画像群のディレクトリ（フォルダ）を指定。2020と表示されていることを確認し、

.Current directory:/public_html/kesuyo.o-namae.com/wp-content/uploads

を選択（クリック）。（上図）

次は少し似たような画面ですが、今度はダウンロード”先”のディレクトリを指定。先ほどと同じディレクトリで良さそうな感じはしますが、一つ上のディレクトリにしておかないといけません。つまり今回の場合は、

/kesuyo.o-namae.com/wp-content/uploads/2020/

の一つ上のディレクトリなので、ダウンロード先は

/kesuyo.o-namae.com/wp-content/uploads/

として、

. Current directory:/Users/a01/Library/Application　・・・・・

を選択（クリック）。（上図）

するとローカル環境のファイル群に上書きしていいか？と聞かれますのでOK。 これでレンタルサーバー上に保存されている

/public_html/kesuyo.o-namae.com/wp-content/uploads/2020/

の画像群がローカルにダウンロードできたことが確認できますね（下図参照）。

レンタルサーバーからもファイル群のダウンロードはできると思いますが、データ量が多くなるとエラーが出たりしますよね。しかし、FTP接続の場合はブラウザ操作に比べてエラーが発生しにくい特徴があります。

最後にプログラムの編集を中断する時やレンタルサーバーとの接続を切る時は、一旦ftp-simpleの接続を切ってからVisual Studio Codeを閉じるようにしましょう。

fn+F1 でftp-simpleのメニューを開いて、

ftp-simple: Close all FTP connections.

をクリック。

接続が切れたかどうかは、Visual Studio Codeの画面下、 OUTPUT --> ftp-simple で確認できます。（上図参照）

ftp-simple使用時の注意点

実際に筆者が体験した失敗談をご紹介します。

• ローカルの変更内容が正しく反映されない
• 知らない内にレンタルサーバーとの接続が切れていた

レンタルサーバー上のデータとVisual Studio Codeに表示されているデータ（コード）がリンクしていることがメリットなのに、ftp-simple使用時に上記のようなエラーが何度か発生しました。

恐らく原因は、パソコンを閉じる時に 「ftp-simpleの接続を切らなかった」ことが考えられます。 上記のような状態になると「あれっ、どこまで変えたっけ？」というパニック状態になりますので要注意です。

こうした状況を防ぐ方法としては、Visual Studio Code画面下で確認できるOUTPUTです。編集したファイルを保存する度にOUTPUTに変更内容が表示されますので、レンタルサーバーとの接続状況をライブで確認することができます。

ftp-simpleを使う様子（動画）

まとめ

WordPressのローカル環境以前に”WordPress”が？？？という方、参考書やYouTubeもいいですが、CodeCampのWordPress講座、いかがでしょうか？

無料体験レッスンも受付中ですので、一度参考にしてみてください。