※この記事は最終更新日から9年以上経過しています。内容が古い可能性があります。

FTP Setting

WebデザイナーになってからずっとDW（Dreamweaver）派だったんだけど、ここ一年くらい時代の流れ（？私のまわりだけ？）の影響で
コーディングの時はEMETも便利な（最近のDWはEMET使えるんだけど・・・なんかDW離れが進んでいる。）
SublimeTextをつかっていました。でもFTPだけはどうしてもDW派だったのです。

でも、いろいろあって最近はFTPもSublimeText使ってみた！
ので、以下覚書。

『Shift + command + P』でPackage controlのinstall機能を起動
SFTPと入力した後、クリックでインストール。
インストール後は、SublimeTextを再起動する。

sftp-config.jsonの設定箇所

『View』>>『Side Bar』>>『Show Side Bar』
でサイドバーを表示、FTPの設定したいフォルダをドラッグ＆ドロップすると、サイドバーに表示される。
※メニューがなかった場合は、『View』>>『Side Bar』>>『Show Open Files』でもよい。

フォルダがサイドバーに表示されたら、サイドバーに表示されているフォルダを右クリックして、
『SFTP/FTP』>>『Map to Remote』をクリックする、『sftp-config.json』というファイルが作成される。

{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help
    
    // sftp, ftp or ftps
    "type": "sftp",←FTPかSFTPかの設定

    "save_before_upload": true,
    "upload_on_save": false,←trueにすると自動アップロード
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_blanker": false,
    
    "host": "example.com",←ホスト名
    "user": "username",←FTPのユーザー名
    //"password": "password",←コメントアウトを外してPWを入力
    //"port": "22",
    
    "remote_path": "/example/path/",←サーバーのどこにアップロードするかの設定
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn/", "\\.hg/", "\\.git/",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",
    
    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ftp_obey_passive_host": false,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],
    
    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
    //"allow_config_upload": false,
}

変更は以下のとおり、
『“type”: “sftp”,』
↓
『“type”: “ftp”,』
今回は、SFTPを使わず、FTPを使用。

『“host”: “example.com”,』
↓
『“host”: “(自分のサイトのドメイン)”,』

『“user”: “username”,』
↓
『“user”: “(サーバーにて自分の登録したユーザ名)”,』

//”password”: “password”,
↓
“password”: “（サーバで設定したパスワード）”,
//でのコメントアウトは取り除く

“remote_path”: “/example/path/”,
↓
“remote_path”: “/home/ユーザー名/www/設定したディレクトリ名”,
ここでは、設定したい階層を選ぶ。
先頭のフォルダ構造(/home/ユーザー名/www)はさくらインターネットの場合。

次にフォルダダウンロードをして接続確認。
sftp-config.jsonを作成したフォルダを右クリックすると、
操作は、『SFTP/FTP』>>『Download Folder』でフォルダダウンロードが出来る。

以上、SublimeTextのFTPを設定の覚書。

ついでに
EmmetでHTMLを書く際最低限知っておくと便利なのは、

！でHTMLのひな形を一瞬で作れる
idは#、classは.

  • タグを表すための<と>は不要。タグ名だけでいい
  • 入れ子にする際にはA>Bのように>を使う
  • 展開した時に連番にしたいときは$を使う
  • 属性を表すときは、[属性名=値]と書く。値に”は不要
  • 各タグにいい感じにデフォルト属性をつけてくれる

linkって書いてTabキーを押すると

<link rel="stylesheet" href="">

nav>ul#menu>li*5>a[href=#]って書いてTabキーを押すと


<nav>
    
<ul class="menu">
        
<li><a href="#"></a></li>

        
<li><a href="#"></a></li>

        
<li><a href="#"></a></li>

        
<li><a href="#"></a></li>

        
<li><a href="#"></a></li>

    </ul>

</nav>

すごく速くで入力できて便利ですねー。
以上、覚書。

More from my site