Atom | サーバにリモート接続してフォルダ・ファイルをダウンロードする方法

スクリーンショット 2018-07-04 19.57.50

前回の記事ではATOM | さくらインターネットサーバへの接続設定方法 (.ftpconfig)を書きました。

接続するためのサーバ情報の設定が済んだら、サーバからフォルダ&ファイルをダウンロードしましょう。

Atomでサーバにリモート接続する

スクリーンショット 2018-07-04 19.57.16

サーバにつながるかどうか試してみましょう。

「Packeges」→「Remote FTP」→【Connect】をクリック。

スクリーンショット 2018-07-04 19.57.18

このように、赤いエラーが出たら、どこかが間違えています。

一番上の青は「Remote FTP:Connecting…」 FTPで接続していますという意味です。
真ん中の緑は「Remote FTP:Connected」FTPで接続しましたという意味。
そして一番下の赤でファイヤーなマークのものがエラーです。

この場合、「Remote FTP:Error:www:No such file or directory」・・・wwwのところにはファイルもディレクトリもありませんけどーと言われてしまいました。

スクリーンショット 2018-07-04 19.57.41

サーバの接続情報のところにwwwって書いてあったのにーと思いつつ、「”remote”: “/”」に戻します。

この【/】1つだけというのは、ルートディレクトリ(一番大きなフォルダ)を指します。

そこにアクセスすると、必要ないファイルまでたくさん出てきてしまいますが、仕方がありません。

スクリーンショット 2018-07-04 19.57.50

再度、サーバにつながるかどうか試してみましょう。

「Packeges」→「Remote FTP」→【Connect】をクリック。

スクリーンショット 2018-07-05 11.09.49 1

つながりました!

エラーが出ていないので大丈夫です。

スクリーンショット 2018-07-04 19.58.37

一旦Atomを終了させましょう。

左上の「Atom」→【Quit】をクリック。

サーバからフォルダとファイルをダウンロードする

スクリーンショット 2018-07-04 19.58.52

画面下のDocからAtomを再度起動させます。
(Windowsの場合はデスクトップのAtomのアイコンをダブルクリックして起動させてください)

スクリーンショット 2018-07-04 19.58.55

Atomが開きます。

「”git”コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか?」という画面が表示されるので、【今はしない】をクリック。

スクリーンショット 2018-07-04 19.59.01

それでは、いよいよさくらインターネットのサーバにアクセスして必要なフォルダ&ファイルをダウンロードしていきましょう。

スクリーンショット 2018-07-04 19.59.05

今、左側にプロジェクト(PC内のフォルダ&ファイル)が表示されている状態ですが、その隣の【Remote】をクリックします。

【Connect】をクリック。

スクリーンショット 2018-07-04 19.59.08

すると、サーバの中にあるあらゆるデータが表示されます。

スクリーンショット 2018-07-05 11.23.52

【home】を開きます。

スクリーンショット 2018-07-04 20.03.46

さくらインターネットのサーバ情報の中に書かれてある【FTPアカウント】名のフォルダを開きます。

スクリーンショット 2018-07-04 11.30.50

これが【FTPアカウント】です。

※さくらインターネットのサーバ情報を見る方法はATOM | さくらインターネットサーバへの接続設定方法 (.ftpconfig)を参照してください。

スクリーンショット 2018-07-04 20.03.49

今度はさくらインターネットのサーバ情報の中に書かれてある【初期フォルダ】名のフォルダを開きます。

【www】フォルダをクリック。

スクリーンショット 2018-07-04 20.03.51

作ったサイトのフォルダが全て出てくるはずです。

これらをデスクトップに作ったWebフォルダにダウンロードすれば、いつでもエディタでアップロード・ダウンロードができるようになります。

ただ、これらを全てダウンロードしてローカルに入れておく必要はないので、必要なフォルダ&ファイルだけをダウンロードしましょう。

では、まずはサイトのフォルダを1つダウンロードしてみましょう。

スクリーンショット 2018-07-04 20.04.03

もう一度【Project】に戻します。

サイトのフォルダを格納するwebフォルダの中に【.ftpconfig】というリモートするためのファイルがあるので、それをクリック。

スクリーンショット 2018-07-04 20.04.16

エディタの右側に.ftpconfigファイルが表示されます。

「”remote”: “/”」の【/】ところに、さっきフォルダを開けていった順番にパスを記述しましょう。

【/home/FTPアカウント名/初期フォルダ名/】となります。

一旦保存します。(Mac→Command+S、Windows→Ctrl+S)

スクリーンショット 2018-07-04 20.04.30

さっきのリモートがまだつながっている状態なので、リモートし直します。

「Packeges」→「Remote FTP」までは同じですが、今度は【Disconnect】をクリック。

スクリーンショット 2018-07-04 20.04.32

【Connect】をクリック。

スクリーンショット 2018-07-04 20.04.33

すると、自分が管理するサイトのフォルダだけが表示されました。

リモートする時は、【/】だと一番大きなディレクトリが表示され、【/home/FTPアカウント名/初期フォルダ名/】のようにパスでフォルダを指定すると、必要なフォルダ&ファイルだけが表示されるということを覚えておきましょう。

では、WordPressとサイトのファイルをごっそりダウンロードしましょう。

スクリーンショット 2018-07-04 20.04.44

【Remote】の中の、ダウンロードしたいサイトのフォルダを開きます。

WordPressのオリジナルテーマを使っているので、WordPressのフォルダを少しずつ開いていきましょう。

スクリーンショット 2018-07-04 20.06.37

サイトフォルダの中の【wp-content】をクリック。

スクリーンショット 2018-07-04 20.06.39

「themes」→【オリジナルテーマが入っているフォルダ】の順にクリックします。

スクリーンショット 2018-07-04 20.06.48

オリジナルテーマのフォルダの上で右クリック(2本指でタップ)→【Download】をクリック。

スクリーンショット 2018-07-04 20.06.57

エディタの左下に、インジケーターとDownloading ほにゃらら(ファイル名)と表示されます。

インジケーターの表示が消えたらダウンロード完了です!

ダウンロードしたフォルダとファイルをローカルフォルダで確認する

デスクトップのwebフォルダを開いて確認してみましょう。

スクリーンショット 2018-07-04 20.10.17

デスクトップのwebフォルダを開きます。

スクリーンショット 2018-07-04 20.10.22

ダウンロードしたサイト名のフォルダが入っているはずです。

さらに開きます。

スクリーンショット 2018-07-04 20.10.25

WordPressのwp-contentフォルダが入っています。

さらに開きます。

スクリーンショット 2018-07-04 20.10.28

themes(テーマ)フォルダが入っています。

さらに開きます。

スクリーンショット 2018-07-04 20.10.31

オリジナルテーマのフォルダが入っています。

さらに開きます。

スクリーンショット 2018-07-04 20.10.34

サイトを構成する各フォルダとファイルが全て入っていることが確認できました。

これでサーバからのダウンロードは完了です。

他にも必要なサイトのファイルは全てダウンロードしましょう。

テキストエディタでftp接続する時の注意点

ちなみに、他のPCでもテキストエディタでftp接続しているなら注意が必要です。

片方を最新にアップロードした後に古い方でアップロードすると、古い情報に書き換えられてしまいます。

間違えないためにも古い方はデータを削除することをおすすめします。