From 5284caf6861a7db1d295ef4e38972eb04738007d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 14 May 2021 00:01:13 +0900 Subject: Learn/Getting_started_with_the_web/Publishing_your_website を更新 (#696) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/04/24 時点の英語版に同期 - 原語併記マクロを削除 --- .../publishing_your_website/index.html | 97 +++++++++++----------- 1 file changed, 47 insertions(+), 50 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html index effc83ae06..3e60369af4 100644 --- a/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,7 +1,9 @@ --- -title: Web サイトの公開 +title: ウェブサイトの公開 slug: Learn/Getting_started_with_the_web/Publishing_your_website tags: + - Beginner + - CodingScripting - FTP - GitHub - Google App Engine @@ -10,7 +12,6 @@ tags: - l10n:priority - publishing - web server - - コードスクリプティング - 初心者 - 学習 translation_of: Learn/Getting_started_with_the_web/Publishing_your_website @@ -21,114 +22,110 @@ original_slug: Learn/Getting_started_with_the_web/ウェブサイトを公開す
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
-

サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。

+

ウェブサイトを構成するコードやファイルの整理が終わったら、それをオンラインで公開して、人々が見つけられるようにする必要があります。この記事では、簡単なサンプルコードを手軽にオンラインに公開する方法を説明します。

-

どんな選択肢があるのか?

+

どんな選択肢があるのか

-

Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。

+

ウェブサイトの公開には、さまざまな方法があるため、複雑なテーマです。この記事では、すべての可能な方法を説明するつもりはありません。その代わりに、初心者にとって実用的な 3 つのアプローチのメリットとデメリットを説明します。そして、多くの読者がすぐに使える方法を紹介します。

-

ホストとドメイン名を手に入れる

+

ホストとドメイン名を手に入れる

-

もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。

+

コンテンツやウェブサイトの外観をより自由にコントロールするために、多くの人はウェブホスティングとドメイン名の購入を選択します。

-

多くのプロの手による Web サイトはこんな風にして、公開されているわけです。

+

多くのプロの手によるウェブサイトはこんな風にして、公開されているわけです。

-

加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、{{Glossary("FTP", "File Transfer Protocol (FTP)")}} プログラムが必要です (詳しくは、どれくらいお金がかかるか: ソフトウェアのページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。

+

さらに、ウェブサイトのファイルを実際にサーバーに転送するには、{{Glossary("FTP", "File Transfer Protocol (FTP、ファイル転送プロトコル)")}} のプログラム (詳しくは、どのくらいコストがかかりますか: ソフトウェアを参照) が必要です。 FTP プログラムの種類は様々ですが、一般的には、ホスティング会社から提供された詳細情報 (通常、ユーザー名、パスワード、ホスト名) を使ってウェブサーバーに接続する必要があります。その後、プログラムはローカルファイルとウェブサーバーのファイルを 2 つのウィンドウに表示し、ファイルのやり取りを行うことができます。

-

+

-

ホスティングとドメインを見つけるための TIPS(ヒント)

+

ホスティングとドメインを見つけるためのヒント

-

GitHub や Google App Engine のようなオンラインツールを利用する

+

GitHub や Google App Engine のようなオンラインツールの利用

-

特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。

+

ウェブサイトをオンラインで公開できるツールもあります。

-

これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。

+

これらのオプションは通常無料ですが、限定された機能セットでしか成長させることができません。

-

CodePen のような、 Web ベースの IDE を用いる方法。

+

CodePen のようなウェブベースの IDE の利用

-

Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。

+

ウェブサイトの開発環境をエミュレートするウェブアプリは数多くあり、HTML、CSS、JavaScript を入力すると、そのコードの結果をウェブサイトとして表示することができます。一般的に、これらのツールは比較的簡単で、学習にも適しており、コードを共有するのにも適しています (例えば、別のオフィスにいる同僚とテクニックを共有したり、デバッグの助けを求めたりする場合など)。また、 (基本的な機能については) 無料です。レンダリングされたページを、固有のウェブアドレスでホスティングしてくれます。ただし、機能は限られており、通常はアセット (画像など) のホスティングスペースは提供されていません。

-

生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。

- -

これらを試してみて、一番あなたに合ったものを見つけてみましょう。

+

これらを試してみて、一番合ったものを見つけてみましょう。

-

+

-

GitHub 経由での公開

+

GitHub 経由での公開

では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。

    -
  1. まず、 GitHub にサインアップして、あなたのメールアドレスを確認しましょう。
    2. -
  2. 次に ファイルを入れるためのリポジトリを作りましょう。
    3. -
  3. このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。
    - 例えば、私たちの友人である bob smith ならば、
    - bobsmith.github.io と入力することになります。
    - さらに、{{原語併記("README つきでこのリポジトリを初期化", "Initialize this repository with a README")}}をチェックして、{{原語併記("リポジトリの作成", "Create repository")}}をクリックします。
    4. -
  4. Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。
    +
  5. まず、 GitHub にサインアップして、メールアドレスの認証を受けましょう。
    6. +
  6. 次に ファイルを入れるためのリポジトリーを作成しましょう。
    7. +
  7. このページ上の、 Repository name ボックスに ユーザー名.github.io と入力してください。 ユーザー名 はあなたのユーザー名です。例えば、私の友達の Bob Smith であれば bobsmith.github.io と入力します。
    + さらに、 "Initialize this repository with a README" ボックスをチェックし、 "Create repository" をクリックしてください。
    8. +
  8. ウェブサイトのフォルダーをリポジトリーの中にドラッグアンドドロップしたら、 Commit changes をクリックしましょう。
    -

    注: フォルダの中に index.html の名前のファイルがあるかを確認しましょう。

    +

    注: フォルダーの中に index.html ファイルがあるかを確認しましょう。

  9. -

    では、あなたの Web サイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

    +

    では、ウェブサイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

    -

    注: あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。

    +

    注: ウェブサイトに使えるようになるには少し時間がかかるかもしれません。ウェブサイトがすぐに表示されない場合は、少し待ってみてください。そしてもう一度試してみましょう。

もっと詳しく知りたい人は GitHub Pages Help を見てください。

-

参考文献

+

参考文献

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

-

このモジュール

+

このモジュール

-- cgit v1.2.3-54-g00ecf