a#scroll-to-top{left:0;bottom:0}}.sfl_thumbnail{background-image:url(https://tips4life.me/wp-content/uploads/2017/08/sublime_text-sftp-xserverTP-8.jpg)}.broken_link,a.broken_link{text-decoration:line-through}.inv-recaptcha-holder{margin-bottom:1em}WP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxABOUTお問い合せプロフィールサイトマップ大幅なサイトメンテナンスを行った為、一部「画像が表示されない」などの可能性があります。ページを更新してみて、それでも表示されない場合はご一報お願い致します。3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]で「ロリポップ!でSFTPを使う方法」を紹介しましたが、今回は「Xserver編」となります。XserverでSFTPを使うためには鍵(key)を使って通信をしなくてはならないため、少々手間がかかります。初心者の方にはちょっとハードルが高いかもしれませんが、検索してもなかなか良い記事が見つからなかったので、なるべくわかりやすく書いてるのでこの記事の通りにやってみてください。※もしわからない事などあればコメントかTwitterからご連絡頂ければ出来る範囲でお応えします。3を使うという方は最初から順番にご覧頂く事をおすすめします。Textシリーズ」は皆さん声を揃えて良いと言います。3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」の設定方法と使い方をご紹介します。まとめ全体の流れまずは今回の目的である「鍵を使ってXserverとSFTP接続する」を達成するまでの全体の流れが以下になります。※本記事では、使うフリーソフトに「FileZilla」と「TeraTerm」を使って説明してますが、他のソフトでも出来ると思いますのでご自身にあったソフトを使って頂いて結構です。FileZillaでFTP情報の登録&SSHの設定・確認6.「sftp-config.json」の設定&確認という流れになります。※FileZillaの項目は不要といえば不要なのですが、後述する「id_rsa.ppk」の生成に使うので入れてあります。手間がかかって難しそうな感じがするかもしれませんが、この記事の通りにやれば問題なく出来ますのでさっそくやってみましょう!鍵の作成準備(TeraTermのインストール)XserverとSFTP接続をする為には「鍵」が必要になります。鍵には「公開鍵」と「秘密鍵」があり、この2つの鍵を使ってSFTP接続をします。鍵を作成する方法はいくつかあるのですが、今回はその中でも個人的に一番簡単だと思う「TeraTerm」を使った方法で紹介します。OSDN」へ行き、以下の画像を参考に最新版のファイルをダウンロードします。※クリックで拡大出来ます。ファイルのダウンロードが完了したら、あとは特に難しいポイントもないので画面通りに進めて行けば問題なく簡単にインストール出来ます。TeraTermで公開鍵と秘密鍵の作成TeraTermのインストールが完了したら「公開鍵」と「秘密鍵」の作成です。「公開鍵」に関しては誰に見られても問題ないのですが、「秘密鍵」は絶対に見られてはいけないので必ずローカル上に保存し、自分以外が見れない状態にしておくよう注意して下さい。先程インストールしたTeraTermを開いて、メニューなどが英語表記になっている場合は、まずはこれを日本語表記に変更します。TeraTermを日本語表記にする方法は以下の通りです。[General]と進みます。すると以下の画面が表示されるので「Language」と「LanguageUI」を以下の通りにします。これで日本語化はOKです。次に「公開鍵と秘密鍵の作成」です。[SSH鍵生成]と進みます。以下の画面では「鍵の種類」が「RSA」、「ビット数」が「2048」になっている事を確認して「生成」をクリック。すると以下のように「鍵を生成しました。」と表示されて「鍵のパスフレーズ」と「コメント」が入力出来る様になるので、それぞれ入力します。「パスフレーズ」というのは「長めのパスワード」とでも思って頂ければOKです。※パスフレーズは無くさないよう必ず保管しておきましょう。※パスフレーズは本記事でも何度も使うのでメモ帳などにコピペしていつでも開ける状態にしておくと良いです。コメントに関しては入力してもしなくても問題ありません。「公開鍵の保存」をクリックして任意の場所に公開鍵を保存します。※公開鍵ファイル名は「id_rsa.pub」になっていると思うのでそのままで大丈夫です。次に「秘密鍵の保存」をクリックして、同じく任意の場所に保存します。※秘密鍵のファイル名はid_rsaになっていると思うのでそのままで大丈夫です。これで「公開鍵」と「秘密鍵」の作成&保存が出来ました☆XserverでSSHの設定Xserverもロリポップ!と同じでデフォルトだとSSHは利用できない設定になってます。これを解除する為に、以下の手順でSSHをONにしてあげます。]1.Xserverのインフォパネルへログイン2.Xserverのサーバーパネルへログイン後、「SSH」の項目にある「SSH設定」をクリック。3.「SSH設定」タブでONにするボタンをクリック。これでXserver側でSSHをONに設定出来ました。[FTPソフト設定]のタブを選択して、「FTPサーバー(ホスト)名」、「ユーザー名(アカウント名)」、「パスワード」をメモ帳などにコピペして保存しておきましょう。先程TeraTermで生成した鍵は「公開鍵」と「秘密鍵」ですが、このうち、公開鍵、(id_rsa.pub)をXserverに登録します。いうタブを選択すると以下の画面になります。3でOK)で開き、記述されているコードを全てコピーして以下の赤枠内へ貼り付けます。公開鍵を登録する(確認)をクリックすると確認画面が出るので公開鍵を登録する(確定)をクリックして終了です☆FTPソフト(FileZilla)のインストール今回紹介する方法ではFTPソフトにフリーソフトの「FileZilla」を使いますので、以下を参考に「FileZilla」をインストールしましょう。今サーバーの管理画面でFTPの操作をしてる方も、FTPソフトを使った方が便利で効率的で安心で良い事ばかりなので絶対にFTPソフトは使えるようになった方が良いです。そもそも「FTP」という単語が出てきた時点で「難しそう」と感じるかもしれませんが、実際にやってみると非常に簡単で、すぐに自分にとって必須のツールになっていきます。3シリーズ」で紹介しているテキストエディタに関しても同じことが言えますが、便利なツールを使っていくと「Wordpressの管理画面で作業するのがムリになるほど快適な環境」になるので、その分執筆にも集中出来ます。OSDN」へ行くと以下のような画面が表示されます。リリース」の項目がありますので、以下の画像を参考にご自分の環境にあったものをダウンロードして下さい。あとは特に難しいポイントも無いので、ダウンロードしたファイルを開いて画面通りに進めて行けば問題なく簡単にインストール出来ます。FileZillaでFTP情報の登録FileZillaのインストールが完了したら「FTP情報の登録」です。[サイトマネージャ]と進みます。サイトマネージャを開いたら「新しいサイト」をクリックします。以下の「新規サイト」の部分に任意の名前を入力し、右側の項目に「XserverでSSHの設定」の項でメモした「FTPアカウント設定」の情報を見ながら必要事項を入力します。以下を参考に、Xserverのサーバーパネル内の「FTPアカウント設定」の情報を見ながら入力してください。Protocol「ログオンの種類」→通常でOK「ユーザ」→ユーザー名(アカウント名)「パスワード」→入力しなくてOKです上記の入力が終わったら一旦OKボタンでウィンドウを閉じます。FileZillaでSFTPの設定サイトマネージャでFTP情報の登録が終わったら、SFTPの接続設定を行います。[設定]と進むと以下の画面が表示されます。左のツリーから「SFTP」を選択すると右側が以下のように変わるので「鍵ファイルを追加」をクリック。鍵ファイルを選択する画面になるので、先程「TeraTerm」で作成した「秘密鍵(id_rsa)」を指定します。すると、FileZillaが「RSA」の形式に対応していないので以下のポップアップが表示されるので「はい」をクリック。以下の画面では、TeraTermで鍵を作成した時に「鍵のパスフレーズ」に入力したパスフレーズを入力して「OK」をクリック。ファイルの保存画面になるので、混乱しないように先程と同じ場所に保存します。(説明のために同じ場所と書いてますが別の場所でもOKです)※ファイル名を変更する必要はありませんが、拡張子(.以降の文字)は「ppk」とします。以下のように「id_rsa.ppk」のファイルがアップされたら赤丸のOKをクリックしてウィンドウを閉じます。これでFileZillaに対して「秘密鍵」の設定が完了しました。あとはサイトマネージャーから先程FTP情報を登録したサイトを選択して接続をクリックするとパスフレーズの入力を求められるので、TeraTermで鍵を生成したときに入力したパスフレーズを入力してOKで接続されます。※ここでうまく接続されない場合は、再度ここまでの説明をよく見直してみてください。3のパッケージ「SFTP」で「sftp-config.json」の設定です。※「sftp-config.json」の設定方法までは以下の記事をご覧ください。3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」の設定方法と使い方をご紹介します。私に...tips4life.me2017.09.04今回「sftp-config.json」の中で編集する項目は以下になります。]1.接続方式を選択できます。今回は「sftp」とします。2.アップロード前に保存するかを設定できます。今回は「true」とします。3.「ファイルの保存と同時にアップロードするか」を設定できるので「true」にします。4.サーバーのホスト名を入力します。5.ユーザー名を入力します。6.ここはコメントアウトでOKです。7.ポート番号(10022)を入力します。8.サーバーのディレクトリのパスを入力します。9.「id_rsa.ppk」を置いてあるディレクトリのパスを入力します。※9.の書き方について、迷う方がいるかもしれないのでちょっと補足します。「id_rsa.ppk」は、前項の「FileZilla」のSFTPの設定の時に「秘密鍵」をFileZillaに対応した形式に変換したファイルです。「あれ...なんだっけ??」となった方は、前項の「FileZillaでSFTPの設定」を確認してみてください。【補足2】ディレクトリのパスがわからないという方は、エクスプローラーで「id_rsa.ppk」を選択した状態でエクスプローラーのメニューの中から「パスのコピー」をクリックすればディレクトリのパスをコピー出来ます。【補足3】9.の部分が具体的にどういう感じになるかの例を書いておきます。※「id_rsa.ppk」がCドライブの「Users/keys」の中にある場合の例です。「sftp-config.json」の設定が完了したら、ファイルを保存して接続確認です。同じプロジェクト内のファイル(style.cssなど)を開いてそのままCtrl+Sで保存してみて下さい。3の画面下部にパスフレーズを入力するようコマンドラインが表示されるので、ここまで何度も出てきたパスフレーズを入力してEnter。3の画面下部にログが表示されて「Success」のログが表示されれば成功です。ここで「Failed」と表示される状態は設定のミスが考えられますので「sftp-config.json」を見直しましょう。3をSFTP接続して自動アップロードが出来るようになりました。設定される方にとっては少々難しい(というか面倒)かもしれませんが、一度トライして理解してみれば難しい内容ではありません。可能な限り初めての方でも迷わずに設定出来るよう意識して書いてはいますが、もし不明な点や誤った説明などがありましたらコメント頂ければ幸いです。一般的に鍵を使って接続するSFTPは初心者には難しいと言われているのでちょっと敷居が高いような気がするかもしれませんが、その分セキュリティ的にはしっかりと見合ったものを得られます。3を他のPCでも同じ環境で使う方法」を紹介する予定です。3シリーズ05」を公開致しました。3シリーズ」は一旦最終回とします。しようRA's(らす)@Tips4LifeWordPressでPCやスマホ(iPhone)などのTips(便利情報)、その他日常生活で便利だと感じた事やモノを書いているIT関係のナンデモ屋さんです。Life|毎日が便利で快適なiPhone&PC生活あなたにおすすめの関連記事この記事を読んだ人がよく見る記事です。3シリーズ」は一旦最終回とします。3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」の設定方法と使い方をご紹介します。Textシリーズ」は皆さん声を揃えて良いと言います。05:47突然のご連絡失礼致します!sublimetext3で作成したデータをエックスサーバーにてアップロードしたく、記事を参照させて頂きました。記事の「7.FileZillaでSFTPの設定」まで辿り着いたのですが、FileZilaにて秘密鍵ファイルを登録しようとしたところ、この記事で紹介されている通り、「FileZilaは〜の形式に対応していません。FileZilaに対応した形式に変換しますか?」とメッセージが出るところまでは良いのですが、そのメッセージに「はい」と入力すると「秘密鍵の読み込みに失敗しました」というエラーメッセージが出てしまいます。このような場合、どのような原因が考えられ、どういった修正を施せばよいでしょうか?ご面倒をお掛けしますが、お答え頂けますと幸いです。問題を再現出来るか確認してみたのですが、問題なく登録できてしまい検証出来ない状態です...根本的な回答にはなっておりませんが、一度問題が起きている鍵ファイルを削除して、以下の項目を再確認しながら再度作りなおしてみてください。]の内容を間違いないか確認。「FTPサーバー(ホスト)名」と「ユーザー名(アカウント名)」です。鍵ファイルを作成する際の「パスフレーズ」をテキストエディタなどにコピペしておく。3公開鍵(id_rsa.pub)作成後、秘密鍵(id_rsa)も作成。id_rsa」を選択。5「FileZilaはファイル’~id_rsa’の形式に対応していません。FileZilaに対応した形式に変換しますか?」のウィンドウで、ファイル名の末尾が「id_rsa」になっているか確認。※上記を確認して、「はい」をクリックした直後に「秘密鍵の読み込みに失敗しました」のエラーが表示される場合は、現状私の環境で問題を再現出来ないので原因を判別出来かねます。テキストエディタへコピペしたパスフレーズをコピペします。※ここを手入力で打ったりしてエラーになるパターンは多いです。03:17ご丁寧に返信頂きありがとうございます!ご指摘のように最初からやり直してみたところ解決することができ、無事最後のsuccessの表示がされるところまで辿り着けました。一点、かなり初歩的と思われる質問で申し訳ないのですが、sublimetext3で作成したファイルをこの記事の手順でアップロード出来たと思うのですが、これは指定されたURLを入力すれば、そのsublimetext3で作成したファイルに飛べる状態になっているということなのでしょうか?そしてそのファイルに飛べるURLというのは、どこで確認することができるでしょうか?それとも、URLが付与(というのかわかりませんが...)されるためには、何かまた別の操作をする必要があるのでしょうか?引き続きご面倒をおかけしますが、お答え頂けますと幸いです。ついて少し理解していないとまた少し難しくなるのかなぁ...と思います。知る方法についても基本的に例の通りで、おそらくご質問の内容についてはここで理解出来るまで説明出来る範囲ではないかと思います。ディレクトリ」のようなワードで検索されると詳しい説明を見つけられるかもです。コメントをキャンセルメールアドレスが公開されることはありません。Life』の管理人RA'sです。現在はIT関係のアドバイザー(簡単にいうと何でも屋さん)です。Life』管理人プロフィール自作プラグインWP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxTwitterフォローするとTwitterでブログの更新情報を受け取れます。Life』管理人の個人アカウントです。Facebookいいね!するとFacebookでもブログの更新情報を受け取れます。Life』のFacebookページです。ブログの更新情報をお知らせします。Life』の管理人RA'sです。現在はIT関係のアドバイザー(簡単にいうと何でも屋さん)です。Life』管理人プロフィール自作プラグインWP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxTwitterフォローするとTwitterでブログの更新情報を受け取れます。Life』管理人の個人アカウントです。Facebookいいね!するとFacebookでもブログの更新情報を受け取れます。Life』のFacebookページです。ブログの更新情報をお知らせします。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});performance.mark("https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-end");performance.measure("https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js","https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-start","https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-end");。