MacOSでCyberduckをインストールし設定する手順

Cyberduckは制作したWebサイトのデータを、Webサーバーに公開する時に使用するFTPソフトです。

それをMacOSにインストールし、使用できるまでの手順をまとめました。
ちなみにCyberduckはWindows、MacOSのいずれの環境にもインストールできます。

# 1. Cyberduckのサイトにアクセス
下記のサイトにアクセスし、「Download」をクリックし、次のページで「Cyberduck for MacOS」をクリック。

https://cyberduck.io/

<img width="1436" alt="スクリーンショット 2020-06-18 22.19.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/a9860f1a-0a3d-720b-ea3f-4d2c4a9268b1.png">
<img width="1436" alt="スクリーンショット 2020-06-18 22.20.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/6f35ffb7-7210-4fea-716c-042e3435eaeb.png">


# 2. ダウンロード

自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。
画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。

<img width="704" alt="スクリーンショット_2020-06-18_22_21_06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/0bdcd6fd-7d6e-e444-1046-a2a628c65f31.png">

# 3. アプリケーションフォルダに移動

ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

<img width="882" alt="スクリーンショット_2020-06-18_22_21_22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/f001cdd7-30af-3209-c8ae-e2707a59d5e9.png">

# 4. 認証ボタンを押す（人によっては表示されず、スキップして構いません）

この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

<img width="532" alt="スクリーンショット 2020-06-18 22.21.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/643e9316-e6b7-3903-32a3-9d99a09af63a.png">

# 5. アプリケーションフォルダからCyberduckを開いてください

サイドメニューの「アプリケーション」をクリックし、Cyberduckを見つけ、ダブルクリックで開いてください。

<img width="882" alt="スクリーンショット_2020-06-18_22_22_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/cb0bff73-dbc2-3d9d-a5e8-92fc65ca6db4.png">

## 【開発元が未確認のため開けません】という警告ダイアログが表示された場合

macOS Sierraから、Macのセキュリティ機能であるGateKeeperによって確認が必要な状態となり、不明な開発元（デベロッパIDを持たない開発元）によって作られたアプリは開けなくなりました。
Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。
※ただ不正なコードが含まれる可能師があるアプリも存在します。

このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。


> 1. MacのFinderで、開きたいアプリケーションを検索します
> 2. Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません
> 3. Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します
> 4. 「開く」をクリックします。

### 参考
1. [開発元が未確認のMacアプリケーションを開く](https://support.apple.com/ja-jp/guide/mac-help/mh40616/mac)
2. [Macで「開発元が未確認のため開けません」となりアプリが開けない場合はどうすれば？](https://aprico-media.com/posts/1382)

アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。

# 6. Cyberduckの初期画面

契約したレンタルWebサーバーを追加するために「新規接続」をクリックします。

<img width="714" alt="スクリーンショット_2020-06-18_22_22_37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/53f79b83-394a-e72e-c9dc-e0538de0fe90.png">

# 7. レンタルWebサーバーの情報を入力する

①と②に契約したレンタルWebサーバーのFTP情報を入力します。

<img width="714" alt="スクリーンショット_2020-06-18_22_22_47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/e5a0f80b-ad7a-9019-bbe7-be1531c70479.png">

## 契約したWebサーバーのFTP情報を確認する

上記の①と②に該当する情報をレンタルWebサーバーのアカウントページにログインし、該当の情報をご確認ください。
※それぞれのレンタルWebサーバーのサービスによって掲載場所が変わります。

筆者が契約しているXSERVERでは下記のような画面になります。
※一部情報にマスキングしています。

<img width="1022" alt="スクリーンショット_2020-06-18_23_00_34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/097ea261-c466-412c-b197-c80c51b0ac2b.png">

# 8. 作成したWebサイトのファイルをアップロード

FTP情報を入力し終え、接続成功するとこのような画面になり、Webサーバーのルート（階層トップ）が表示されます。
エラーが表示された際はFTP情報が間違っている可能性があるのでホスト名やユーザー名などを見直してみましょう。

<img width="714" alt="スクリーンショット_2020-06-19_9_05_33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/35481a35-44f5-60d4-bce1-1bac3753655b.png">

レンタルWebサーバー会社によってHTMLなどのファイルのアップロード先が変わるため、契約しているサーバーのマニュアルでそれを確認しましょう。

* XSERVER → [ホームページのファイルはどこへアップロードすればいいですか？](https://support.xserver.ne.jp/faq/service_ftp_setting_upload.php)
* ロリポップ → [ロリポップ！FTPについて](https://lolipop.jp/manual/user/ftp2-01/)
* さくらインターネット → [Cyberduck 6.9 – Mac OS Xを利用する](https://help.sakura.ad.jp/206207101/)

※独自ドメインを設定しているとルートに独自ドメインのフォルダが出来ると思います。
[独自ドメインについて](https://www.kagoya.jp/howto/webhomepage/02/)

<img width="714" alt="スクリーンショット_2020-06-19_9_09_07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74438/bccac276-5947-41a3-80ce-e6da06739f8f.png">

該当フォルダまで移動したら、赤枠の中にファイルをアップロードしてください。
完了したら、ブラウザで確認してみましょう。