ATOM | さくらインターネットサーバへの接続設定方法 (.ftpconfig)

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

PCを買い替えたり、初期化したりして、管理しているサイトなどのファイルが消えてしまった時、サーバからファイルをダウンロードする方法をご紹介します。

今回使うエディタはAtomです。

無料で使えますし、日本語に対応したパッケージも用意されているので使い勝手がいいです。

まずは、Atomのインストール方法と、サーバと通信するめのremote-ftpパッケージをインストールしましょう。

詳しい手順は、以下のリンクから内容をご覧ください。

Mac | 無料テキストエディタATOM(アトム)のインストール方法

テキストエディタAtomにremote-ftpパッケージをインストールする方法

テキストエディタAtom にremote-ftpパッケージをインストールしたら、サーバと接続するための準備をしましょう。
手順は以下のとおりです。

ファイルを保存するためのファイルを作成する

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

サーバからファイルをダウンロードして保存するためのフォルダを作成します。

とりあえずデスクトップに置くことにしましょう。
(本当はGoogle Driveなどに保存したほうがいいです。)

デスクトップで右クリック(指2本タップ)して【新規フォルダ】を選択します。

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

フォルダに名前をつけます。

フォルダの上で右クリックして【名前を変更】をクリック。

今回は、【web】とつけることにします。

名前は英数小文字でつけましょう。
(日本語や大文字を使わないほうがいいです。)

プロジェクトフォルダの保存先を指定する

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

フォルダを作ったら、Atomをアクティブにします。

(Atomの画面をクリックするとアクティブになります。)

左上の「File」→「Add Project Folder(プロジェクトフォルダを加える)」をクリック。

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

プロジェクトフォルダの保存先を指定します。

左側の「デスクトップ」をクリックして、さきほど作成した「web」フォルダを選択し、【開く】をクリック。

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

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

サーバの接続情報を表示しておく

サーバにつなぐために、接続情報が必要です。

利用しているサーバの管理画面から情報をコピーすることができます。

スクリーンショット 2018-06-28 20.31.26

例:さくらインターネットのサーバコントロールパネルにログインし、管理画面(コントロールパネル)を開きます。

さくらインターネットのコントロールパネルを開く

他のサーバをお使いの方は、それぞれのサーバの管理画面にアクセスしてください。

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

サイドバーのメニューの「サーバ情報とパスワード」の中の【サーバ情報の表示】をクリックします。

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

サーバ情報の表示一覧画面が開きます。

【サーバに関する情報】をクリック。

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

サーバに関する情報画面が開きます。

「FTP設定に関する情報」に書かれた【FTPサーバ】、【FTPアカウント】、【初期フォルダ】、それからここには書かれていませんが、コントロールパネルにログインする時のパスワードが必要です。

サーバの接続情報をAtomの.ftpconfigファイルに入力する

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

まずは【FTPサーバ】表示されている部分をコピーします。

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

Atomに戻り、上のメニューの「Packages」→「Remote FTP」→【Create FTP config file】をクリック。

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

.ftpconfigファイルが開きます。

このファイルでサーバへアクセスするので、情報を入れていきましょう。

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

さきほどコピーした【FTPサーバ】のネームを「”host”: “example.com”」と書かれている【example.com】部分に貼り付けます。

ここで注意しなければいけないことがあります!

テキストをコピペすると、前後に空白が入ったり改行になってしまうことがあります。

Atomの幅を広げてみて、改行になっていたらちゃんと1行に戻しましょう。

空白が入っていないかチェックして、入っていたら必ず削除してくださいね。

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

次に、さくらインターネットのページに戻って【FTPアカウント】をコピーします。

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

【FTPアカウント】を「”user”: “user”」と書かれている右側の【user】部分に貼り付けます。

空白・改行があれば直しましょう。

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

同じようにさくらインターネットのページに戻って【初期フォルダ】をコピーします。

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

【初期フォルダ】を「”remote”: “/”」と書かれている【/】の後ろに貼り付け、パスを書くために必要な【/】を後ろにもつけます。

例:初期フォルダが「www」なら、【”/www/”】と入力します。

空白・改行があれば直しましょう。

※接続時にエラーが出たら、次の記事で対処法を書いていますのでご覧ください。

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

最後にパスワードです。

パスワードは、さくらインターネットの場合コントロールパネルにログインする時のパスワードです。

パスワードを「”pass”: “pass”」と書かれている右側の【pass】部分に入力します。

次は、いよいよサーバにリモートアクセスです!

長くなったので次の記事で。

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