目次
はじめに
※ご注意！
今回のメモは、決してプロ向けのメモではございません。
また、プロが書いているわけではありません！
僕自身もHTMLやCSSは完全に独学で、わからない事はネットで調べながら自分のサイトを作っております。本当はどなたか専門の方に作って頂きたい。ですが、予算の都合上などで致仕方なく自分のWebサイトを素人ながらに頑張って作らざるを得ない方へ、僕自身がWeb制作上で知って楽になった事を記載したメモです。
フリーランスでWeb制作以外のお仕事をしている方の中にも、ご自身のWebサイトをお持ちの方も多いと思います。WordPress や Facebookページ といったあまり専門知識が無くても、見栄えの良いWebサイトを作る事ができるツールで作成している方も多いと思いますが、ご自身でHTMLやCSSを使ってご自身でイチから制作する方も多いのではないでしょうか？？
僕もその一人です。以前は自分のPC内で作ったサイトをレンタルサーバーにアップロードして、ブラウザで確認するという工程を行なっていました。その結果、
・どのファイルをアップロードして、どのファイルをアップロードしてないか、わからなくなった。
・PC内では見れた画像データが、アップロード先では見れなくなった。原因は画像のパスを書き換えなければならなかったのを忘れたためだった。
の様な、僕みたいな素人にはありがちなミスが頻発してました。
しかし、レンタルサーバーに自分のPCからリモートでアクセスし、既にアップロードしたHTMLファイルやCSSファイルを直接編集するようになってからは、更新ごとにデータをアップロードするという手間から解放されるなど、更新作業が飛躍的に楽になりました。
今までは、 FTP接続 ができるテキストエディタを使って事なきを得ていたのですが、OSのバージョンアップと共に、そのテキストエディタが使えなくなってしまったのを機に、以前から気になっていた、SSH接続 を マイクロソフトが無料で提供している Visual Studio Code(以下、VSCode） というツールを使って実践してみようと思い立ったのですが、色々とつまずいたので、今回はその忘備録の意味でのメモです。
「Visual Studio Code」「SSH接続」 とは??
【Visual Studio Code】とは？？
「ウィキペディア日本語版」には下記の様に掲載されています。
Visual Studio Code（VSCode）はMicrosoftが開発しているWindows、Linux、macOS、web用のソースコードエディタである。Electronをベースにしており、デバッグ、埋め込みGitコントロールとGitHub連携、シンタックスハイライト、インテリジェントなコード補完 、スニペット、コードリファクタリングのサポートが含まれる。カスタマイズ性が高く、テーマやキーボードショートカット、環境設定を変更できたり、機能を追加する拡張機能をインストールすることができる。ソースコードはフリーかつオープンソースで、寛容なMITライセンスの下でリリースされている。コンパイルされたバイナリはプロプライエタリソフトウェアである。
「Visual Studio Code」出典: フリー百科事典『ウィキペディア（Wikipedia）』
この情報は2023年1月4日05:42 (UTC) 時点のものです。
https://ja.wikipedia.org/wiki/Visual_Studio_Code
素人の僕には専門的過ぎて、正直よくわからないです。
個人的には、
「マイクロソフトが無料で提供していて、様々な拡張機能を持ち、コードを記述することに特化した、OSを選ばないテキストエディタ」
という感じで捉えております。
今回は、上記の「様々な拡張機能」のほんの一部を使うことになるのですが、1度設定してしまえば次からはほぼオートで接続できる様になります。
VSCode のインストーラーは下記URLで入手できます。
https://code.visualstudio.com/
イントール方法や日本語化については今回は割愛いたします。
【SSH接続】とは？？
「ウィキペディア日本語版」には下記の様に掲載されています。
Secure Shell（セキュア シェル、SSH）は、暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。パスワードなどの認証部分を含むすべてのネットワーク上の通信が暗号化される。
「Secure Shell」出典: フリー百科事典『ウィキペディア（Wikipedia）』
この情報は2023年1月4日05:42 (UTC) 時点のものです。
https://ja.wikipedia.org/wiki/Secure_Shell
こちらも僕には全く理解できない内容です。
個人的には、
「FTPもSSHも、共にサーバーにリモート接続する方式ではあるけど、SSHの方がセキュリティ的に安全」
という感じで捉えております。
レンタルサーバー側の設定（例：バリューサーバー）
まずは、レンタルサーバー側の設定です。設定自体はとても簡単です。
例として、僕が昔からお世話になっている バリューサーバー の設定を例にしますが、どのレンタルサーバーもそれほど変わらないと思っております。
ただし、レンタルサーバーによっては SSH接続 をサポートしていないところもあるみたいですので、あらかじめご確認ください。
先ほど、「FTPもSSHも、共にサーバーにリモート接続する方式」と書きましたが、SSH接続する際も必要な情報は基本的にはFTPと同じで、
・FTPサーバー
・FTPアカウント
・FTPパスワード
上記3つが必要です。そして、これらの情報は下記画像の赤枠の部分、
「FTP設定・アカウント発行」をクリックすると表示されます。
上記赤枠部分をクリックすると、下記画像のような画面になりますので、赤枠部分をコピーしてメモ帳などにペーストしておきます。後ほど VSCode で使います。
次に、コントロールパネルのHOME画面に戻り、今度は画面の下の方の、
「SSH接続」をクリックします。
クリックすると、下記画像の様な画面になりますので、赤枠の「SSH登録」をクリックしてサーバー側の設定は完了です。
設定した際の注意点です。上記画像の緑枠の部分に注意してください。
Visual Studio Code 側の設定
続いて 、VSCode 側の設定です。僕も含めて、普段こういったツールを使い慣れてない方には少し難しく感じかもしれません。ですが、やってみるとこの程度であれば意外と難しくはありません。
VSCode を起動します。そうすると、下記画像の様な画面になるので、赤枠の「機能拡張」のアイコンをクリックします。
「機能拡張」のアイコンをクリックすると、下記画像の様な画面になりますので、検索欄に
Remote Development
と入力すると、Remote Development の機能拡張が表示されますので、「インストール」をクリックします。
クリックすると、下記画像の様な画面になります。
右側にこの機能拡張を説明するページ表示されますが、気が散る様でしたら黄色枠の「X」マークをクリックして閉じてしまっても問題ありません。
次に、上記画像の様に1〜3の順番でクリックします。
3の「+」マークをクリックすると下記画像の様になりますので、入力欄に先ほどレンタルサーバーでコピペした FTPアカウント と FTPサーバー を使って、
ssh FTPアカウント@FTPサーバー
と入力して Enter を押します。
すると、下記画像の様になりますので、入力欄には何も入力せずに、
/Users/○○○○○/.ssh/config
をクリックします。
ちなみに、「○○○○○」（画像ではモザイク部分）はPCのアカウント名です。
クリック後、下記画像の1の「更新」マークをクリックすると、黄色枠の様に上記で入力したサーバー情報が反映されます。反映されましたら、下記画像の2の「新しいウィンドウで接続」マークをクリックします。
クリックすると、下記画像の様にパスワードを求められるので、レンタルサーバーでコピペしたパスワードを入力して Enter を押します。
接続が成功した場合、Enter を押してしばらく待つと、下記画像の様に左下の緑の部分にSSH : FTPサーバー名 が表示されます。
画面左側のエクスプローラーにはリモート先のサーバーのフォルダ構成が表示されます。
通常、バリューサーバーでは、Webサイトの index.html は public_html フォルダの直下に格納されています。index.html をみつけクリックすると、画面の右側に編集ページが開き、直接編集が可能になります。
ちなみに、編集後は普通のテキストエディタと同様に ⌘ + S（Windows は Ctl + S ）で編集を保存できます。
これでSSH接続は完了です。
最後に
如何でしたでしょうか？？
上記例ではHTMLだけでしたが、もちろんCSSやJavaScript、PHPも編集が可能です。
今まで直接編集をしてこなかった方にはとても便利に感じられると思います。
VSCodeは無料で、OSを選びません。テキストエディタ選びにお困りの方は是非一度使ってみてください。
本来はもっと難易度が高いプログラム言語のエディタとして開発されたツールらしく、Web周りのテキストエディタとしては使い勝手が良くないという意見もあるみたいなのですが、独学レベルの僕には、今となってはこれ以上ないHTMLエディットツールになっています。
最後まで読んで頂きありがとうございます。皆様の制作のご参考になれば幸いです。