Webサイトの公開と管理

今回はWebサイトをインターネットに 公開する方法を説明します Dreamweaverで作成したサイトがあります indexページをダブルクリックして開きます これはデベロッパービューですが 「標準」で作業しても構いません 前回説明したとおり リアルタイムのブラウザープレビューには 右下のボタンを使います 「Google Chrome」を選択すれば サイトを表示確認できます しかし、ローカル表示なので このコンピューターでは表示されますが 他の人がインターネットで見ることはできません そこで、Dreamweaverのサイト定義で リモートサーバーとの接続設定 つまり、ホスティングプロバイダーの設定をおこないます 確認しましょう デスクトップ上のサイトは renderedフォルダーにあります indexページ、CSS、すべての画像が入っていますが まだ、このコンピューター内だけのサイトです リモートサーバーにプッシュするには 事前にホスティングプロバイダーとの契約が必要です ホスティングプロバイダーは多数あります GoDaddy、Microsoft Azure Amazon Web Services、Digitaloceanなど様々ですが 手順はほとんど同じなので、心配は不要です では設定しましょう Dreamweaverを開きます 既存のサイトでも、新規作成しても 同じ画面になります これは閉じて 既存のサイトから開いてみましょう サイト／サイトの管理 「Rendered」をダブルクリックすれば 先ほどと同じ 画面が開きます サイトの公開には 「サーバー」を使用します 「+」ボタンをクリックして リモートサーバーを指定します 公開したWebサイトを他の人が表示できるように 設定されたサーバーです 整理しやすいように付ける名前なので 任意に指定して構いません ここでは、「Rendered」と名付けます 接続にはいくつかの方法がありますが FTPとSFTPが一般的です ここでは、セキュリティが強化された SFTPでファイルを転送します 入力情報はホスティングプロバイダーから入手します 電子メール等で通知されます または、ホスティングアカウントにログインして 詳細ページを開くと 表示されるでしょう 設定項目を確認しましょう まず、SFTPアドレスです 通常、WebサイトのURLと同じです 先頭にWWWが付くアドレスです ここでは、仮に「mysite.com」と入力します 皆さんはご自分のURLを入力してください ホストによってはご自分のURLの前に SFTPとピリオドが必要な場合があります FTPであれば、FTP、ピリオド、ご自分のURLとなります 数字で構成されるIPアドレスの場合もあります ホスティングプロバイダーの指示に 従ってください 次に、サイト用のユーザー名とパスワードを指定します ここで、便利なテスト機能を使います テストに成功すれば サーバーに正常に接続されたことを示すメッセージが表示されますが ここでは仮のURLを入力したのでエラーが表示されました 正しく入力したはずでも、問題が生じた場合は 簡単な手順で確認し、修正する方法があります もっとも、一番確かな方法は ホスティングプロバイダーに電話で確認することです サービス加入者なのですから、サポートを使いましょう どのような操作をして、どのような問題が生じたか 伝えれば解決する可能性があります ホスト会社独自のわずかな違いで サーバーの設定が うまくいかないことがあります 以下の項目を確認しましょう まず、先頭のsftpを入れた場合、入れない場合 ルートディレクトリに、「public_html」を入力してみます テストして、修正されなければ削除します 次に確認するのがユーザー名 完全なアドレスが必要な場合があります テストします 最後にもう一点 これで解決しなければ、サポートに電話しましょう 接続中のWifiネットワーク方法を変更してみます オフィスのネットワークに接続している場合は スマートフォン経由の接続を試みます 接続機器の問題でないか確認するためです ごくまれですが、接続機器が原因で 接続できないときは サポートへの電話が無駄になるでしょう これらを試しても解決しないときは ホスティング会社のサポートに 問い合わせてください 正しく設定できたら、「保存」 再度「保存」 「完了」をクリックします 接続を設定し、テストで確認しました 次に、ファイルをサーバーにアップロードして ネットワーク上で表示できるようにします 初めてのアップロードを簡単におこなうには ファイルパネルを使用します ビューの設定により、画面の左側または右側にあります ローカルビューでサイトを表示しています ここで、このボタン 「同期」をクリックして オプションを設定します ここでは、サイト全体を同期します 全ファイルをコンピューターから サイトにプッシュする設定です サイトのファイルの方が新しければ コンピューターにダウンロードされます 今回は新規のため、サイトには何もありませんが Dreamweaverの同期機能が便利なのは 共同作業者がいる場合です 私もグループ作業が多く メンバーが同じリモートサイトにアクセスして ファイルを編集しています ローカルフォルダーで作業を続けると 作業を上書きしてしまう恐れがあるため プロジェクトを開始するときは 「同期」をクリックするように 心がけています メンバーが編集したサーバー上のファイルが ローカルマシンにダウンロードされ それを使用して作業できるからです 「プレビュー」をクリックします 初めてサイトを読み込み 他に共同作業者もいないので すべてのファイルがアップロード つまり、コンピューターからサーバーに送られます 「OK」をクリックして、アップロードが完了するまで待ちます 画像もビデオもすべてアップロードされるので しばらく時間がかかります アップロード完了まで早送りしましょう （早送り） 初回は少し時間がかかるのでご注意ください この機能が便利なのは 少し文字を変更したような場合です 保存して、「同期」をクリックすれば 更新のあるファイルのみ自動更新され 手動アップロードの必要はありません 今回のようにアップロードに時間がかかるのは 多数の画像や大きな動画があるときだけです ところで、このサイトには、ハードドライブとデスクトップに 2つのコピーがあります ローカルビューと呼ばれるものです それにさらに別のコピーが加わり ホスティングプロバイダーのサーバーに置かれ そこから世界に配信されています ここではローカルビューを表示しています ホスティングサーバーの表示と比較するには 「リモートサーバー」をクリックして サーバー上のサイトを表示します この例ではまったく同一です しかし、規模が大きくなると いくつかのファイルは チームのメンバーが更新した後 ローカルに保存されていないことがあります そのような場合は、リモートサーバーを確認しましょう ローカル表示に戻ります 作業は通常ローカルでおこないます この「About」を 「About Us」に変更、保存します 同期して、プレビューします ローカルサイトと サーバーサイトに違いがあるか 比較されます indexページが異なるだけですが 同期を実行しましょう 注意点として、一部のファイルが 毎回同期を繰り返すことがあります 時差やサーバーの違いなどにより この現象が生じるようです 「同期」をクリックすると 毎回サイトがアップロードされ 停止しないときは 「クローク」操作をおこないます このビデオファイルは 24MBの大きなファイルなので 右クリックして「クローク」を選択します 通常の同期処理で 同期確認の対象から外す 設定をおこないました paintwave.mp4を修正した場合にのみ クロークを解除して同期します 特定のファイルのみでも フォルダー単位でも設定できます 画像の更新が必要ない場合は フォルダー単位で設定しましょう 何らかの理由で多数の画像がアップロードされるときは フォルダー単位で除外すると 便利です 以上、サイト定義の調整 リモートサーバーの編集 SFTP情報の編集をおこない サイトを同期して サーバーにアップロードしました これでインターネットユーザーであれば誰でも 皆さんのWebサイトを表示できます Dreamweaverでサイトを公開する方法を説明しました