webサイトを作成する方法、パート8、webサイトを公開する

このシリーズのパート8および最後のパートでは、リモートサイトを設定してwebサイトを公開する方法を学習します。

注意：このサンプルファイルには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。

入門

初めてのwebサイト作成に関するこの記事シリーズも、最終パートであるパート8に到達しました。このチュートリアルでは、Dreamweaverでリモートサイトを設定する方法を説明します。一般に、リモートサーバーとはローカルファイルのコピーを保持するリモートコンピューター上のwebサーバーのことを指します。ユーザーは、ブラウザーでページを閲覧するときにリモートサイトにアクセスします。

このチュートリアルでは、リモートサーバーへの接続事例を幅広く紹介しています。トラブルシューティングのヒントにも触れますが、主にリモートサーバーの設定方法について取り上げています。質問があれば、レンタルサーバーのヘルプデスクか、システム管理者に相談してください。

リモートサイトに関する学習

webサイトを作成したら、次はリモートサーバーにファイルをアップロードして公開します。リモートサーバーには、テスト用、制作用、コラボレーション用、および公開用のファイルを（使用環境に応じて）保存します。

先に進むには、レンタルサーバー、依頼元のクライアントが所有するサーバー、または所属する会社のイントラネットサーバーなどといった、リモートwebサーバーへのアクセス権を保持している必要があります。また、インターネットサービスプロバイダー（ISP）は、インターネット接続に関する契約のオプションとして、web公開用のスペースとそのアクセス権も提供しています。そのようなサーバーへのアクセス権がない場合、使用しているISP、クライアント、システム管理者、またはwebホスティングパッケージを提供するレンタルサーバーに連絡してください。無料で利用できるホスティングパッケージもありますが、通常はサイト上に広告が挿入されます。広告の入らないパッケージは、毎月数百円から利用できます。

また、ローカルサイトを定義しておくことも必要です。詳しくは、このチュートリアルシリーズのパート 1「プロジェクト概要およびサイトの設定」を参照してください。

注意：Dreamweaverサイトについて詳しくは、Dreamweaverヘルプのサイトのローカルバージョンの設定を参照してください。

リモートサーバーの定義

Dreamweaverサイト管理は、ローカルファイルがインターネット上のライブサイトの完全な複製であるという原則にもとづいています。したがって、baysideフォルダーのindex.htmlがリモートサイトのトップページになります。上書きしたくない既存の公開中のwebサイトがある場合、サイトのコントロールパネルを使用してbaysideという名前のフォルダーを作成し、そこにBayside Beatファイルをアップロードします。

Dreamweaverでサイト／サイトの管理を選択します。
サイトの管理ダイアログボックスでBayside Responsiveサイトを選択します。

Bayside Responsiveサイトを定義していない場合、Bayside Responsiveサイト用のローカルフォルダーを作成してから続行します。詳しくは、このチュートリアルシリーズのパート 1「プロジェクト概要およびサイトの設定」を参照してください。
サイトの管理ダイアログボックス左下の「編集」アイコンをクリックします（図1を参照）。

サイト設定ダイアログボックス、「サーバー」をクリックし、サーバー定義を追加するパネルを開きます（図2を参照）。

Dreamweaverでは、リモートサーバーにもテスト用サーバーにも複数のサーバー定義を設定できます。しかし、有効にできるのは、タイプごとに1つのみです。

リモートサーバー定義を追加するには、パネル左下の「プラス（+）」ボタンをクリックします。この操作で開く新しいパネルに、サーバーの詳細を入力できます（図 3 を参照）。

「サーバー名」テキストボックスにサーバーの名前を入力します。これはDreamweaverがサーバーを特定するために内部で使用する名前であるため、好きな名前を付けることができます。例えば、クライアントの確認用にファイルをアップロードする先のサーバーや、ライブサイト用の別のサーバーの定義などを作成できます。ここでは、サーバーを1つだけ定義するため、リモートサーバーという名前を付けます。
ポップアップメニューの使用する接続から、サーバーへの接続方式を選択します。

最も一般的なインターネット上のサーバーへの接続方式は、FTP、SFTPおよびFTP over SSL/TLS（FTPSとも呼ぶ）です。いずれの方式も名称が似ているため、混同することがあります。どの接続方式を選択するか迷う場合は、レンタルサーバーのヘルプデスクかシステム管理者に相談してください。リモートサーバーのサポート内容によって、選択は制限されます。

接続方式を選択したら、関連セクションの指示に従ってください。

FTPを使用した接続

FTPとはFile Transfer Protocol（ファイル転送プロトコル）の略称です。最も基本的なリモートサーバーへの接続方法です。他の方式よりも安全性が低いため、リモートサーバーがSFTPまたはFTPSをサポートしていない場合にのみ使用してください。

該当するフィールドにサーバーのFTPアドレス（ftp.yourdomain.comなど）を入力します。
FTPのデフォルトポートは21です。ポートフィールドの値は、リモートサーバーの管理者から指示があった場合にのみ変更してください。
該当するフィールドにユーザー名とパスワードを入力します。
「テスト」をクリックして接続をテストします。

接続できない場合、ユーザー名とパスワードが正しいことを確認してください。通常、パスワードには大文字と小文字の区別があるため、Caps Lockがオンになっていないことを確認します。問題が解決しない場合は、このページの下部にある「トラブルシューティング」セクションを参照してください。
Dreamweaverでは、自動的にパスワードの「保存」チェックボックスがオンになります。パスワードの「保存」チェックボックスをオフにすると、Dreamweaverがサーバーに接続するたびパスワードが要求されます。
ルートディレクトリおよびWeb URLの詳細をこのページの下部の記載に従って入力します。

SFTPを使用した接続

SFTPとはSecure File Transfer Protocol（セキュアファイル転送プロトコル）の略称です。仕組みはFTPと同じですが、サーバーへの接続を暗号化するため、より安全です。SFTPを使用する場合、Dreamweaverにはユーザー名とパスワード、またはプライベートキーファイルを使用してリモートサーバーにログインするオプションがあります。

使用する接続ドロップダウンメニューからSFTPを選択します。
該当するフィールドにサーバーのFTPアドレス（ftp.yourdomain.comなど）を入力します。
SFTPのデフォルトポートは22です。ポートフィールドの値は、リモートサーバーの管理者から指示があった場合にのみ変更してください。
デフォルトでは、ユーザー名とパスワードを使用して認証します。該当するフィールドに値を入力します（図4を参照）。

「プライベートキーファイル」ラジオボタンを選択した場合、図5に示すようにオプションが変更されます。

プライベートキーファイルを使用した接続をサポートするサーバーの場合、ユーザー名フィールドにユーザー名を入力し、IDファイルフィールドの右側にあるフォルダーアイコンをクリックして、プライベートキーファイルのローカルバージョンを参照します。

サーバーによっては、パスフレーズも必要になります。必要に応じて、該当するフィールドにパスフレーズを入力します。Dreamweaverでは、自動的に「パスフレーズを保存」チェックボックスがオンになります。「パスフレーズを保存」チェックボックスをオフにすると、Dreamweaverがサーバーに接続するたびパスフレーズが要求されます。

「テスト」をクリックし、リモートサーバーに正常に接続できることを確認します。

接続できない場合、スペルがすべて正しいかどうかをチェックします。通常、パスワードとパスフレーズには大文字と小文字の区別があります。Caps Lockがオンになっていないことを確認してください。
ルートディレクトリおよびWeb URLの詳細をこのページの下部の記載に従って入力します。

FTPS（FTP over SSL/TLS）を使用した接続

FTPS は、SFTPよりさらに新しく安全な標準です。Secure Sockets Layer（SSL）または Transport Layer Security（TLS）を使用してリモートサーバーに接続します。FTPSは、サーバーの認証情報を認証する際により高い安全性を提供します。つまり、サーバーのセキュリティ証明書を確認することで、確実に既知のサーバーに接続します。

使用する接続ドロップダウンメニューからFTP over SSL/TLSを選択します。次の2とおりの方法があります。
- 暗黙的な暗号化：サーバーは、セキュリティ要求を受信しなかった場合に接続を終了します。
- 明示的な暗号化：サーバーは、セキュリティ要求を受信しなかった場合、安全でないトランザクションを続行するか、接続を終了／制限します。この場合はポート21で接続します。

いずれの方法を選んだ場合も、図6に示す形式で表示されます。

該当するフィールドにサーバーのFTPアドレス（ftp.yourdomain.comなど）を入力します。
暗黙的な暗号化ではポート990を使用して、明示的な暗号化ではポート21を使用して接続します。ポートフィールドの値は、リモートサーバーの管理者から指示があった場合にのみ変更してください。
該当するフィールドにユーザー名とパスワードを入力します。
認証ドロップダウンメニューからサーバーのセキュリティ証明書の確認方法を選択します。次の2とおりの方法があります。
- 信頼するサーバー：サーバーの証明書が信頼する認証局から発行されている場合に使用します。
- なし：サーバーに自己署名証明書がある場合に使用します。証明書は、最初の接続時に表示されます。認証情報を受け入れた場合、Dreamweaverの信頼するサイト認証ストアに証明書が追加されます。
「テスト」をクリックして接続をテストします。

接続できない場合、ユーザー名とパスワードが正しいことを確認してください。通常、パスワードには大文字と小文字の区別があるため、Caps Lockがオンになっていないことを確認します。問題が解決しない場合は、このページの下部にある「トラブルシューティング」セクションを参照してください。

Dreamweaverでは、自動的にパスワードの「保存」チェックボックスがオンになります。パスワードの「保存」チェックボックスをオフにすると、Dreamweaverがサーバーに接続するたびパスワードが要求されます。
ルートディレクトリおよびWeb URLの詳細を次のセクションの記載に従って入力します。

ルートディレクトリおよびWeb URLの設定

ルートディレクトリへの値の入力は、非常に間違いやすい箇所であり、レンタルサーバーおよびサーバー管理者ごとに方針が異なるため、正確な手順を説明するのが困難です。ルートディレクトリの値は、サーバーへのログイン後にindex.htmlをインストールするフォルダーへ移動するために入力するパスでなければなりません。

Bayside Beatホームページをwebサイトのトップページにする場合は、リポートサーバーにサイトルートのパスを指定する必要があります。一部のサーバーでは、public_htmlです。www、wwwrootを使用することも、何も使用しないこともあります。私のリモートサーバーの場合は、/home/username/public_htmlです。質問があれば、レンタルサーバーのヘルプデスクか、システム管理者に相談してください。

Bayside Beatホームページをbaysideという名前のサブフォルダーに入れる場合、そのサブフォルダーへのパスを入力する必要があります。例えば、私のサーバーの場合は、/home/username/public_html/bayside_beatになります。

Web URLフィールドには、ルートディレクトリとして定義したフォルダーのURLが示されるはずです。例：http://www.example.com/またはhttp://www.example.com/bayside/。Dreamweaverが正しい値を推測しますが、あくまで推測です。デフォルト値を受け入れる場合は、必ず慎重に確認してください。

SFTPで接続する場合、設定は図7のようになります。

詳細オプションの設定

ほとんどの場合、サーバーの詳細オプションを変更する必要はありませんが、サーバー定義を保存する前に詳細オプションについて簡単に説明します。

パネル上部にある「詳細設定」ボタンをクリックし、詳細設定オプションを表示します（図8を参照）。

デフォルトでは「同期情報の保持」が選択されています。これにより、リモートサーバー上のファイルの最終更新時が記録され、サイト同期機能を使用できるようになります（Dreamweaverヘルプのファイルの同期を参照）。
公開中のファイルが上書きされてしまうため、「保存時にファイルをサーバーへ自動的にアップロード」を選択することはほとんどありません。誤って設定してしまった場合、誰もが見ることができるリモートサイトにファイルが直ちに表示されてしまいます。
「ファイルのチェックアウトを使用可能にする」はチーム環境で使用します。一度にページを編集できるのは1人だけです（Dreamweaverヘルプのファイルのチェックインおよびチェックアウトを参照）。
テストサーバー：これらのオプションは、PHP、ASP.NET、ColdFusionなど、サーバー側の技術を使用するwebサイトのテストサーバーを定義する場合にのみ該当します。
「保存」をクリックしてサーバー定義を登録します。すると、サイト設定ダイアログボックスのサーバーパネルに戻りますが、このパネルにはサーバー定義がリストされているはずです（図9を参照）。

Dreamweaverでは、「リモート」ラジオボタンが自動で選択されています。

サーバーパネルの下部にあるアイコンで、別のサーバーを追加することや、選択したサーバー定義を削除、編集またはコピーすることができます。別のサーバーに接続するために若干の詳細を変更する場合、コピーを作成すると便利です。

1つのサイトに対して複数のリモートサーバーを定義できますが、リモートカラムの該当するラジオボタンを選択して、一度に1つのリモートサーバーにのみ接続できます。

「保存」をクリックしてサイト設定ダイアログボックスを閉じた後、「完了」をクリックしてサイトの管理ダイアログボックスを閉じます。

ローカルファイルのアップロード

ローカルフォルダーからリモートwebサーバーにファイルをアップロードして、誰もがページにアクセスできるようにします。

現在のサイトにあるすべてのファイルをすばやくアップロードするには、ファイルパネルの一番上にあるサイトのローカルルートフォルダーを選択します。しかし、Bayside Responsiveサイトは、開発の各段階にあるサイトを表示するフォルダーに加えて Microsoft Wordおよびリッチテキスト形式のテキストコンテンツを含んでいます。

Ctrlキー（Windows）またはCmdキー（macOS）を押し、以下のフォルダーおよびファイルを選択します。
- images
- js
- styles
- index.html
- sights.html
ファイルパネルのツールバーにある「ファイルをPUTする」（上向き矢印）アイコンをクリックします（図10を参照）。

Dreamweaverがサーバーに接続するとき、転送に依存ファイルを含めるかどうかを確認するダイアログボックスが表示されます（図11を参照）。

デフォルト値は「No」です。何もしなければ、ダイアログボックスは閉じ、ファイルパネルで選択したファイルのみがアップロードされます。

選択したファイルにリンクするファイルが自動的にアップロードされるため、依存ファイルを含めることができるこのオプションは便利なことがありますが、「Yes」を選択する前に、よく考えてください。スタイルシートが編集中であり、まだアップロードできる状態にはなっていないことがあります。公開中のwebサイト上のスタイルシートがアップロード中のファイルのいずれかにリンクしている場合、「Yes」をクリックするとスタイルシートが上書きされてしまいます。

「次からこのメッセージを表示しない」というチェックボックスを選択した場合、ファイルパネルで選択したファイルのみがアップロードされます。Dreamweaver環境設定のサイトカテゴリーのオプションを変更すれば、後でこの設定を変更することができます。

すべてのファイルが正しくアップロードされたことを確認するには、ブラウザーでリモートサイトを開きます。これでサイトが公開されました。

Bayside Responsiveサイトがない場合、リモートサーバーの定義におけるルートディレクトリの値が、サーバー上の正しいフォルダーを参照していないことを意味します。

（オプション）リモートサーバー設定のトラブルシューティング

リモートサーバーの設定を編集する必要がある場合、サイト／サイトの管理を選択し、リストからサイトを選択した後、鉛筆アイコンをクリックしてサイト設定ダイアログボックスを開きます。そして、左側のリストでサーバーを選択し、編集するサーバーを選択したら、「既存のサーバーの編集」アイコンをクリックします（図12を参照）。

webサーバーの構成にはさまざまな要素を含んでいます。下記のリストには、リモートサーバー設定時によくある問題およびその解決方法についての情報が記載されています。

特定のプロキシサーバー、マルチレベルファイヤーウォールおよびその他の形式の間接的サーバーアクセスにおいては、Dreamweaver FTPが正しく実装されない場合があります。
Dreamweaver の FTP実装では、リモートシステムのルートフォルダーに接続する必要があります。（多くのアプリケーションにおいては、リモートディレクトリに接続できれば、リモートファイルシステムをナビゲーションして目的のディレクトリを見つけることができます）必ずリモートシステムのルートフォルダーあるいは（baysideサブフォルダー）をルートディレクトリとして指定します。ホストディレクトリをシングルスラッシュ（/）で指定して、接続に問題が生じるときは、接続先のディレクトリおよびリモートルートフォルダーの相対パスの指定が必要な場合があります。例えば、リモートルートフォルダーが上位レベルのディレクトリである場合../../を使用してホストディレクトリを指定する場合があります。
スペースや特殊文字を含むファイル名やフォルダー名は、しばしばリモートサイトへの転送中に問題を起こします。スペースの代わりにアンダースコアを使用し、特殊文字の使用は避けてください。コロン（:）、スラッシュ（/）、ピリオド（.）、アポストロフィ（'）はファイル名またはフォルダー名には使用できません。
多くのサーバーでは、シンボリックリンク（UNIX）、ショートカット（Windows）、エイリアス（Mac OS）を使用してサーバーディスク上の特定の場所にあるフォルダーを別の場所のフォルダーに接続させています。例えば、サーバー上のホームディレクトリのpublic_htmlサブディレクトリは、実際には完全にサーバーの別の場所へのリンクであることがあります。通常、このようなエイリアスが、適切なフォルダーやディレクトリへの接続に影響することはありません。しかし、サーバーのある部分には接続できて、ある部分には接続できない場合には、エイリアスに問題がある可能性があります。
「ファイルをputできません」のようなエラーメッセージが表示される場合、リモートフォルダーのディスク容量が不足している可能性があります。詳しくは、FTPログを確認してください。

一般的に、FTP転送で問題が発生した場合は、サイト／詳細／FTPログを選択して、FTPログを検査します。詳しくは、アドビwebサイトのFTP問題のトラブルシューティングを参照してください。

webサイトを公開する

入門