Cyberduckは制作したWebサイトのデータを、Webサーバーに公開する時に使用するFTPソフトです。 それをMacOSにインストールし、使用できるまでの手順をまとめました。 ちなみにCyberduckはWindows、MacOSのいずれの環境にもインストールできます。 1. Cyberduckのサイトにアクセス 下記のサイトにアクセスし、「Download」をクリックし、次のページで「Cyberduck for MacOS」をクリック。 https://cyberduck.io/ 2. ダウンロード 自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。 画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。 3. アプリケーションフォルダに移動 ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。 そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。 4. 認証ボタンを押す（人によっては表示されず、スキップして構いません） この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。 5. アプリケーションフォルダからCyberduckを開いてください サイドメニューの「アプリケーション」をクリックし、Cyberduckを見つけ、ダブルクリックで開いてください。 【開発元が未確認のため開けません】という警告ダイアログが表示された場合 macOS Sierraから、Macのセキュリティ機能であるGateKeeperによって確認が必要な状態となり、不明な開発元（デベロッパIDを持たない開発元）によって作られたアプリは開けなくなりました。 Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。 ※ただ不正なコードが含まれる可能師があるアプリも存在します。 このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。 MacのFinderで、開きたいアプリケーションを検索します Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します 「開く」をクリックします。 参考 開発元が未確認のMacアプリケーションを開く Macで「開発元が未確認のため開けません」となりアプリが開けない場合はどうすれば？ アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。 6. Cyberduckの初期画面 契約したレンタルWebサーバーを追加するために「新規接続」をクリックします。 7. レンタルWebサーバーの情報を入力する ①と②に契約したレンタルWebサーバーのFTP情報を入力します。 契約したWebサーバーのFTP情報を確認する 上記の①と②に該当する情報をレンタルWebサーバーのアカウントページにログインし、該当の情報をご確認ください。 ※それぞれのレンタルWebサーバーのサービスによって掲載場所が変わります。 筆者が契約しているXSERVERでは下記のような画面になります。 ※一部情報にマスキングしています。 8. 作成したWebサイトのファイルをアップロード FTP情報を入力し終え、接続成功するとこのような画面になり、Webサーバーのルート（階層トップ）が表示されます。 エラーが表示された際はFTP情報が間違っている可能性があるのでホスト名やユーザー名などを見直してみましょう。 レンタルWebサーバー会社によってHTMLなどのファイルのアップロード先が変わるため、契約しているサーバーのマニュアルでそれを確認しましょう。 XSERVER → ホームページのファイルはどこへアップロードすればいいですか？ ロリポップ → ロリポップ！FTPについて さくらインターネット → Cyberduck 6.9 – Mac OS Xを利用する ※独自ドメインを設定しているとルートに独自ドメインのフォルダが出来ると思います。 独自ドメインについて 該当フォルダまで移動したら、赤枠の中にファイルをアップロードしてください。 完了したら、ブラウザで確認してみましょう。
Cyberduckは制作したWebサイトのデータを、Webサーバーに公開する時に使用するFTPソフトです。
それをMacOSにインストールし、使用できるまでの手順をまとめました。 ちなみにCyberduckはWindows、MacOSのいずれの環境にもインストールできます。
下記のサイトにアクセスし、「Download」をクリックし、次のページで「Cyberduck for MacOS」をクリック。
https://cyberduck.io/
自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。 画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。
ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。 そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。
この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。
サイドメニューの「アプリケーション」をクリックし、Cyberduckを見つけ、ダブルクリックで開いてください。
macOS Sierraから、Macのセキュリティ機能であるGateKeeperによって確認が必要な状態となり、不明な開発元（デベロッパIDを持たない開発元）によって作られたアプリは開けなくなりました。 Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。 ※ただ不正なコードが含まれる可能師があるアプリも存在します。
このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。
MacのFinderで、開きたいアプリケーションを検索します Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します 「開く」をクリックします。
アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。
契約したレンタルWebサーバーを追加するために「新規接続」をクリックします。
①と②に契約したレンタルWebサーバーのFTP情報を入力します。
上記の①と②に該当する情報をレンタルWebサーバーのアカウントページにログインし、該当の情報をご確認ください。 ※それぞれのレンタルWebサーバーのサービスによって掲載場所が変わります。
筆者が契約しているXSERVERでは下記のような画面になります。 ※一部情報にマスキングしています。
FTP情報を入力し終え、接続成功するとこのような画面になり、Webサーバーのルート（階層トップ）が表示されます。 エラーが表示された際はFTP情報が間違っている可能性があるのでホスト名やユーザー名などを見直してみましょう。
レンタルWebサーバー会社によってHTMLなどのファイルのアップロード先が変わるため、契約しているサーバーのマニュアルでそれを確認しましょう。
※独自ドメインを設定しているとルートに独自ドメインのフォルダが出来ると思います。 独自ドメインについて
該当フォルダまで移動したら、赤枠の中にファイルをアップロードしてください。 完了したら、ブラウザで確認してみましょう。
概要 2020-06-16にBootstrap5のα版が公開されました！！ Bootstrap 5 alpha! | Bootstrap Blog 公式のブログを読むと、以下の対応が挙げられていました。 jQueryを捨てたよ IEサポートを捨てたよ 公式ドキュメントを改善したよ Hugoを使っているよ ロゴを新しくしたよ form系の要素を見直したよ Utilitiesを強化したよ htmlとcssのみでボタンのトグルを実装したよ CSSのカスタムプロパティを使い始めたよ カラーパレット拡張したよ 近日公開予定のものは割愛しております。 BootstrapのためにjQuery入れてたりしてたので、脱jQueryは嬉しいですね。 容量を測ってみる 公式でCDN提供されているものから取得しました。 少なくともjQueryの分だけ早くなっているはず……！ Bootstrap5 <!-- css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <!-- js --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script> Bootstrap4 <!-- css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- js --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 結果 Bootstrap5 Bootstrap4 bootstrap.min.css 21.7kB 24.2kB jquery-3.5.1.slim.min.js 0kB 25.1kB popper.min.js 8kB 8kB bootstrap.min.js 16.4kB 15.2kB 合計 46.1kB 72.5kB 26.4kBの減量に成功していております！ まだリリースしていない機能もあるみたいですが、jQueryが消えたのでBootstrap4を超えることはないと思います。 だいぶダイエットしてますね。 参考 Bootstrap5公式 Bootstrap4公式
2020-06-16にBootstrap5のα版が公開されました！！
Bootstrap 5 alpha! | Bootstrap Blog
公式のブログを読むと、以下の対応が挙げられていました。
近日公開予定のものは割愛しております。 BootstrapのためにjQuery入れてたりしてたので、脱jQueryは嬉しいですね。
公式でCDN提供されているものから取得しました。 少なくともjQueryの分だけ早くなっているはず……！
<!-- css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <!-- js --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<!-- css --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- js --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
26.4kBの減量に成功していております！ まだリリースしていない機能もあるみたいですが、jQueryが消えたのでBootstrap4を超えることはないと思います。 だいぶダイエットしてますね。
100日チャレンジの349日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 349日目は、 おはようございます349日目 1.5h・架空LP15日目2.0h(@ririru_123)・ipad版のプロフィール部分作成残業をしいられた（3h）のであんまりできなかったわ#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) June 18, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 349日目は、
おはようございます349日目 1.5h・架空LP15日目2.0h(@ririru_123)・ipad版のプロフィール部分作成残業をしいられた（3h）のであんまりできなかったわ#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) June 18, 2020
おはようございます349日目 1.5h・架空LP15日目2.0h(@ririru_123)・ipad版のプロフィール部分作成残業をしいられた（3h）のであんまりできなかったわ#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
