Kuni

【初心者必見】Web制作・運用に必要な「FTPソフト」「テキストエディタ」は、これを使えばOK

  • この記事を書いた人 アバター
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ftp_text-editor

Webサイトを制作・運用する人にぜひ、使っていただきたいソフトがあります。それが、「FTPソフト(FTPクライアント)」と「テキストエディタ」。

FTPソフトは、サーバーにあるファイルをダウンロードしたり、逆に、アップロードするのに必要。テキストエディタは、htmlやcssファイルの編集に必要です。

両者とも、Googleで検索すると幾つもオススメが見つかります。はたして、その中からどれを選べば良いのか。特に、初心者からすると迷うことでしょう。

そこで、独断と偏見でこれを使えばOKというものをそれぞれ、ご紹介したいと思います。選定条件は、以下。

  • 無料である
  • 日本語に対応している
  • Windows/Mac共に使える
  • 知名度があり、評価も高い
  • ダウンロードして、すぐに使える
  • 複雑な設定などは、不要
  • 初心者にも扱いやすい
  • 使い方など調べれば、幾つも記事が出てくる

FTPソフトに関しては、私も長年愛用しているもの。テキストエディタに関しては、上記、条件を満たすであろうもの、となっています。

「FTPソフト」とは

FTPは、「File Transfer Protocol」の略。ファイル転送プロトコル、と訳されます。ファイルを送受信する仕組み、と言えばなんとなく伝わるのではないでしょうか。

あらかじめ、サーバーのログイン情報を設定しておくことで、ファイルのダウンロードやアップロードが簡単にできるのが、FTPソフトです。

WordPressなど、CMSで運用する場合にもあると便利

WordPressなどのCMSを使って、Webサイトを運用する場合、管理画面から更新できるから必要ないのでは? と思う人がいるかもしれませんので、補足を。

確かに、CMSを使えば記事の更新管理やcssの編集など、管理画面からできます。ただし、不具合が起きて管理画面が機能しなくなったとしたら、どうでしょう。

例えば、WordPressで運用中のWebサイトに、プラグインやテーマを追加したら画面が真っ白になって何も表示されなくなった。なんてことも。

原因は、追加したプラグインやテーマにありそう。削除して、追加する前の状態にすれば復旧する可能性は高い。しかし、管理画面は表示すらされません。

そこで、FTPを使って追加したプラグインやテーマを直接、削除することで早期復旧も可能。そのためにも、あると便利です。他、WordPressを手動でインスールする場合にも必要です。

オススメの無料FTPソフト「FileZilla(ファイルジラ)」

filezilla_main
数あるFTPソフトの中から当サイトがオススメするのは、「FileZilla」。先に申し上げました選定条件を全て満たすソフトで、私も長年愛用しています。

多機能で転送スピードが速いと評判。プロの中にも愛用者は多いですが、操作性が分かりやすいので初心者にもオススメしたい、FTPソフトです。ポイントは…

  • ローカル(お使いのパソコン)とリモート(サーバー)のファイル構造を、ツリー形式で両方表示
  • ローカル・リモート共に、どこの階層を見ているかが分かりやすく、他の階層に移動するのも簡単
  • ファイルのダウンロード・アップロードが、右から左、左から右にドラッグ&ドロップで操作可能
  • 目的のファイルがどこにあったか忘れた場合、検索が可能。条件をつけて絞り込むこともできます

など、挙げられます。

「FileZilla」のダウンロード

「FileZilla」は以下、サイトよりダウンロードできます。

「FileZilla」の設定・使い方

FTP情報の確認

それでは、「FileZilla」の設定から。その前に、エックスサーバーを例に、FTP情報を確認するところからはじめます。

ftp_ 1
1. エックスサーバーの「サーバーパネル」ページを開き、IDとパスワードを入力して、ログインします。

ftp_ 2
2. 画面左下、「設定対象ドメイン」の中から該当するドメインを選択して「設定する」ボタンをクリック。その後、「サブFTPアカウント設定」をクリック。

ftp_ 3
3. 「FTPソフト設定」タブをクリック。

ftp_ 4
4. 初期FTPアカウントの設定内容に記載がある「FTPサーバー(ホスト)名」「ユーザー名(アカウント名)」「パスワード」を確認。「FileZilla」の設定に使います。

「FileZilla」の設定

続いて、「FileZilla」の設定です。今回は、Macを使って説明いたします。すでにソフトをダウンロードして、インストールしてあることを前提に、進めます。

ftp_5
1. 「FileZilla」をインスールすると、アプリケーションに項目が追加されます。まずは、そちらをダブルクリックします。

ftp_6
2. 「FileZilla」を立ち上げた画面。左側(赤枠内)がローカル(お使いのパソコン)、右側(緑枠内)がリモート(サーバー)を指します。

右側が空欄なのは、どこのサーバーにも接続されていないから。それでは、サーバーの設定をしましょう。左上の赤枠箇所をクリックして、設定画面を開きます。

ftp_7
3. 画像に記載がある順に、設定をします。「新しいサイト(N)」をクリックすると、「新規サイト」が追加されるので、任意の名前に変更しておきます。

続いて、右側の設定についてですが、

  • プロトコル:「FTP – ファイル転送プロトコル」を選択
  • ホスト:サーバーの「FTPサーバー(ホスト)名」を入力
  • ポート:無視でOK
  • 暗号化:「明示的なFTP over TLSが必要」を選択
  • ログオン タイプ:「通常」を選択
  • ユーザー:サーバーの「ユーザー名(アカウント名)」を入力
  • パスワード:サーバーの「パスワード」を入力

を選択・入力(初回のみ)します。その後、「接続」ボタンをクリック。

ftp_8
4. はじめて接続する場合、「不明な証明書」のダイアログが出ます。気にせず、「今後もこの証明書を常に信用する」にチェックを入れて、「OK」ボタンをクリック。

はじめ、空欄だった右側(緑枠内)に項目が表示されました。項目名が表示されていないのは、画像編集して消しているため。通常はちゃんと、表示されますのでご安心を。

ftp_9
ちなみにですが、上段と下段の意味についても説明いたします。ローカル・リモート共に、上段は今いる「階層」をツリー構造で表示したもの。下段は、「階層の中身」になります。

画像で言うと、左側はパソコンの中にある「Desktop」を。右側はサーバーの「/(ルート) = ログインして、すぐの階層」を指します。

そして、上段と下段はリンクしています。目的のファイルがある階層まで移動するには、どちらからもできます。

上段のフォルダ(ディレクトリ)を展開していくと、下段の中身も変わります。逆に、下段のフォルダ(ディレクトリ)をダブルクリックすると、上段も下の階層に移動します。

それでは次に、「FileZilla」の使い方について。基本的な機能に絞って、ご説明いたします。

「FileZilla」の使い方:ファイルの移動

ftp_10
ローカル(左側)にある「hogehoge.html」を、サーバー(右側)の「public_html」内にアップします。「hogehoge.html」をドラッグして、そのまま右側にドロップするだけ。すると…

ftp_11
「hogehoge.html」がサーバーにアップされました。逆に、サーバーにあるファイルをローカルに落とす場合も、右から左にドラッグ&ドロップするだけで可能。

「FileZilla」の使い方:ファイルの上書き

ftp_12
次に、ファイルの上書きについてです。ローカルで修正した「hogehoge.html」をサーバーにアップして上書きするとします。

ローカル(左)からサーバー(右)へ、ドラッグ&ドロップすると「ターゲット ファイルは既に存在しています」とダイアログが出ます。このままだと、次回以降も表示されるため、設定します。

ftp_13
「ソースが新しければ上書き」を選択。「常にこのアクションを使用する」にチェックしたら「OK」ボタンをクリック。上書きできました。サーバー(右)からローカル(左)も同様。

「FileZilla」の使い方:ファイルの削除

ftp_14
ファイルを削除する場合。対象を選択して右クリック。ダイアログ内の「削除」をクリックして、さらに「はい」をクリックするとできます。

「テキストエディタ」とは

テキストファイルを作成・編集するためのソフトです。テキストファイルとは、文章のように文字で構成されたものに限らず、半角英数の文字列で構成されたプログラム言語も含みます。

Webサイトでは、htmlやcssといったマークアップ言語で構成されるファイルの作成・編集の際に使うことがよくあります。ちなみに、ファイル形式は「html = .html」「css = .css」です。

WordPressなど、CMSで運用する場合にもあると便利

htmlやcssの知識がなくても運用できるのが、CMSの魅力。ですが、できるようになるとカスタマイズの幅が広がるのは、事実です。

色や形、文字の大きさや書体の変更など。さらに、ちょっとしたアニメーションをつけるなんてこともできたりします。

WordPressであれば、一歩踏み込んでプログラム(PHP)のカスタマイズに挑戦してみるのも良いでしょう。機能面のカスタマイズが実現できます。

これらカスタマイズは、管理画面からできないとは言いません。ですが、htmlやcssに慣れていないのであればテキストエディタを使うべき。効率よく作業できると思います。

初心者からレベルアップすることで、制作会社に頼まずできることも増えます。つまり、コストカットに繋がる。ということです。

オススメの無料エディタ「Brackets」

brackets_main
クリエイティブ業界でお馴染み、Adobe Systemsが開発したテキストエディタが「Brackets」。同社の有償ツール「Dreamweaver CC」のエディタ機能のベースにもなっているとのこと。

動作が軽いのもそうですが、初心者からプロユースにも対応できるのが魅力。ポイントは…

  • 入力支援機能が優秀。ちょっと入力すると候補を表示してくれたり、列単位でコピペが簡単にできる
  • htmlの場合、閉じタグを自動付与してくれたり、タグの閉じ漏れがないか、ハイライト表示してくれたりと、便利
  • 編集したページを即、ブラウザ(Google Chrome)で表示確認することが可能。しかも、ワンクリックで
  • 機能拡張が可能。数ある便利な機能の中から、欲しい機能をプラスして、自分仕様にカスタマイズができる

など、挙げられます。

「Brackets」のダウンロード

「Brackets」は以下、サイトよりダウンロードできます。

「Brackets」の使い方

「Brackets」は、特に設定をすることもなく、インストールした状態で使えます。ここでは、基本的な機能に絞って、ご説明いたします。

edit_1
「FileZilla」同様、Macを使って。すでにソフトをダウンロードして、インストールしてあることを前提に、進めます。アプリケーションに追加された、「Brackets」をダブルクリックします。

「Brackets」の使い方:ファイルをセットする

edit_2
「Brackets」を立ち上げると、サンプルのhtmlとcssが表示されます。ちょっと気になりますが、無視して編集したいファイルをセットしましょう。

edit_3
「Brackets」の画面内に、直接ファイルをドラッグ&ドロップする。もしくは、画面上部の「ファイル」メニューから「開く」「フォルダーを開く」で該当ファイルを選択してください。

「Brackets」の使い方:ファイル形式を変更する

edit_4
テキストを直接、コピペして編集することもできます。画面上部の「ファイル」メニューから「新規作成」をクリック。新しく開いた画面に貼り付けます。

この場合、ファイル形式が初期値の「Text」になっているので、最適なものに変更しましょう。赤枠をクリックして、htmlに変更します。

edit_5
htmlの他、cssやphpなどのプログラム言語も揃っています。

edit_6
htmlに最適化されました。画像からは伝わりにくいかもかもしれませんが、「タグ」と呼ばれる箇所に色がついて、差別化されました。

「Brackets」の使い方:htmlの編集をしながら、cssも直接編集する

edit_7
htmlの見た目を制御する、cssを直接編集します。「タグ」にカーソルを合わせて右クリックをします。その中にある「クイック編集」をクリック。

edit_8
今回は、「bodyタグ」に対して適用されているcssが表示されました。ここで編集した内容は、本体の「main.css」にも反映されます。

edit_9
一箇所、追記してみました。そのまま上書きをします。画面上部の「ファイル」メニューから「保存」をクリック。もしくは、ショートカットキー「⌘ + S(Macの場合)」で保存します。

すると、作業中ファイルに「main.css」が追加されたのを確認いただけると思います。

edit_10
「main.css」に切り替えてみました。追記した箇所が、こちらにも反映されています。

「Brackets」の使い方:ファイルを削除する

edit_11
削除したいファイルを選択、もしくは項目の上で右クリック。「削除」をクリックすると削除できます。ただし、削除したファイルはそのまま「ゴミ箱」に入ってしまうので気を付けてください。

「Brackets」の使い方:画面を2分割する

edit_12
続いて、便利な機能をご紹介。画面を縦横に分割して、2つのファイルを同時に開いて作業できるようにするものです。それでは、赤枠をクリックしましょう。

edit_13
ダイアログが表示されました。現在は、「分割なし」。ためしに、「左右分割」にしてみましょう。

edit_14
左で「index.html」、右で「main.css」を表示してみました。はじめは使わない機能かもしれませんが、覚えておくと役に立つ時もあるかと思います。

「Brackets」の使い方:ブラウザ(Google Chrome)に同期する

edit_15
そして、サーバーにアップする前にブラウザ(Google Chrome)で確認しながら作業する方法についてご紹介します。画面右側の、赤枠をクリックします。

edit_16
色が変わり、アクティブ状態になりました。ブラウザが立ち上がり、常に今の状態が見えるようになります。

edit_17
htmlを編集すると、ブラウザ側でも内容が反映され、表示が変わります。

edit_18
htmlの編集画面で、cssの調整をします。文字の色を黒から赤にします。

edit_19
文字の色が、赤に変わりました。このように、実際にブラウザで表示される画面を確認しながら作業できるので、効率がアップします。

まとめ

FTPソフト、テキストエディタ。それぞれ、数ある中から初心者にも優しいのでは。というものを、独断と偏見でご紹介しました。

無料で使える。初期設定の必要なく、ダウンロードしてすぐに使える点は、チャレンジしやすいのではないでしょうか。Web制作・運用の一助となれば、嬉しいです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Webサイト制作・リニューアルの相談、してみませんか?

  • Webサイトの相談・お見積もり無料
  • お問い合わせ後、翌営業日中に返信
  • 分かりやすい言葉で、ご説明します

文章が苦手、忙しいあなたに代わり、プロのライターが原稿をイチから作成。Web業界歴10年のWebディレクターが、Webサイトを制作いたします。

Webサイトをこれから作りたい、リニューアルしたい。でも、どこに頼めば良いか分からないとお困りの、あなた。まずは、お気軽にご相談ください!


相談する