From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../available_text_editors/index.html | 296 +++++++++++++++++++++ .../index.html | 172 ++++++++++++ .../common_questions/common_web_layouts/index.html | 108 ++++++++ .../design_for_all_types_of_users/index.html | 219 +++++++++++++++ .../how_does_the_internet_work/index.html | 99 +++++++ .../how_much_does_it_cost/index.html | 155 +++++++++++ .../html_features_for_accessibility/index.html | 55 ++++ files/ja/learn/common_questions/index.html | 136 ++++++++++ .../index.html | 120 +++++++++ .../set_up_a_local_testing_server/index.html | 110 ++++++++ .../thinking_before_coding/index.html | 177 ++++++++++++ .../upload_files_to_a_web_server/index.html | 177 ++++++++++++ .../common_questions/using_github_pages/index.html | 108 ++++++++ .../what_are_browser_developer_tools/index.html | 182 +++++++++++++ .../what_are_hyperlinks/index.html | 95 +++++++ .../what_is_a_domain_name/index.html | 160 +++++++++++ .../common_questions/what_is_a_url/index.html | 159 +++++++++++ .../what_is_a_web_server/index.html | 119 +++++++++ .../what_is_accessibility/index.html | 90 +++++++ .../what_software_do_i_need/index.html | 222 ++++++++++++++++ 20 files changed, 2959 insertions(+) create mode 100644 files/ja/learn/common_questions/available_text_editors/index.html create mode 100644 files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/ja/learn/common_questions/common_web_layouts/index.html create mode 100644 files/ja/learn/common_questions/design_for_all_types_of_users/index.html create mode 100644 files/ja/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/ja/learn/common_questions/how_much_does_it_cost/index.html create mode 100644 files/ja/learn/common_questions/html_features_for_accessibility/index.html create mode 100644 files/ja/learn/common_questions/index.html create mode 100644 files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/ja/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/ja/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/ja/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/ja/learn/common_questions/using_github_pages/index.html create mode 100644 files/ja/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/ja/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/ja/learn/common_questions/what_is_a_domain_name/index.html create mode 100644 files/ja/learn/common_questions/what_is_a_url/index.html create mode 100644 files/ja/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/ja/learn/common_questions/what_is_accessibility/index.html create mode 100644 files/ja/learn/common_questions/what_software_do_i_need/index.html (limited to 'files/ja/learn/common_questions') diff --git a/files/ja/learn/common_questions/available_text_editors/index.html b/files/ja/learn/common_questions/available_text_editors/index.html new file mode 100644 index 0000000000..63f591f01a --- /dev/null +++ b/files/ja/learn/common_questions/available_text_editors/index.html @@ -0,0 +1,296 @@ +--- +title: どんなテキストエディタが利用可能ですか？ +slug: Learn/Common_questions/Available_text_editors +translation_of: Learn/Common_questions/Available_text_editors +--- +
{{IncludeSubnav("/ja/Learn")}}
+ +
+

この記事では Web 開発用のテキストエディタをインストールする際に考慮すべき点をいくつか取り上げます。

+
+ + + + + + + + + + + + +
学習の前提:Web サイトを構築するために必要な様々なソフトウェアについて知っていること。
学習の目標Web 開発者としてのニーズに最適なテキストエディタを選択する方法を学びます。
+ +

概要

+ +

Web サイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディタを選びましょう。

+ +

テキストエディタは、コンピュータサイエンスにとって基本的なものです（Web 開発はコンピュータサイエンスそのものですよね）。そのため、膨大な選択肢があります。理想を言えば、できるだけ多くのエディタを試して、ワークフローに適したものを見つけるのが良いです。とは言っても、取っ掛かりをつけるため、いくつかの指針をあげることにします。

+ +

まず以下の点を検討しましょう。

+ + + +

ここまでで価格に言及していないことに注目してください。明らかにそれも重要ですが、製品価格は、その品質や機能とはあまり関係ありません。使いやすいテキストエディタを無料で手に入れることも可能なのです。

+ +

人気のあるエディタの例を挙げてみましょう：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
エディタライセンス価格OSサポートドキュメント機能拡張
AtomMIT/BSD無料Windows, Mac, LinuxForumOnline ManualYes
BracketsMIT/BSD無料Windows, Mac, LinuxForum, IRCGitHub WikiYes
Codaクローズドソース$99MacTwitter, Forum, E-maileBookYes
EmacsGPL 3無料Windows, Mac, LinuxFAQ, Mailing list, News GroupOnline ManualYes
Espressoクローズドソース$75MacFAQ, E-mailNo end user doc,
+ but plug-in doc		Yes
GeditGPL無料Windows, Mac, LinuxMailing list, IRCOnline ManualYes
Komodo EditMPL無料Windows, Mac, LinuxForumOnline ManualYes
Notepad++GPL無料WindowsForumWikiYes
PSPadクローズドソース無料WindowsFAQ, ForumOnline HelpYes
Sublime Textクローズドソース$70Windows, Mac, LinuxForumOfficial, UnofficialYes
TextMateクローズドソース$50MacTwitter, IRC, Mailing list, E-mailOnline Manual, WikiYes
TextWranglerクローズドソース無料MacFAQ, ForumPDF ManualNo
VimSpecific open license無料Windows, Mac, LinuxMailing listOnline ManualYes
Visual Studio CodeOpen Source under MIT licence/ Specific licence for product無料Windows, Mac, LinuxFAQ     DocumentationYes
+ +

アクティブラーニング

+ +

現在利用可能なアクティブラーニングはありません。貢献を考えてください。

+ +

詳しく見てみましょう

+ +

エディタを選択する基準

+ +

それでは、テキストエディタを選ぶとき何を考慮すべきでしょうか？

+ +

どの OS (オペレーティングシステム) を使用するか？

+ +

もちろんそれはあなたの選ぶことです。しかし、特定の OS でしか使えないエディタもあります。そのため、OSを切り替えて開発する場合には、選択肢が狭まります。システム上で実行できるのなら、どんなテキストエディタでも作業を行うことはできます。でも、クロスプラットフォームエディタを使用すると、OS 間の移行が容易になります。

+ +

最初に、あなたが使う OS を選びます。次に、検討中のエディタがその OS をサポートしているか確認してください。ほとんどのエディタは  WindowsやMacのサポート状況を、そのWeb サイトで公開しています。OSのバージョンが限定されている （Windows 7 以降のみをサポートし、Vista はサポートしないなど）場合もあります。Ubuntu を使うのなら、Ubuntu ソフトウェアセンター内を検索することをお勧めします。ただし、Linux/UNIX の世界には多様性があり、ディストリビューションが違うと動作も異なったり、パッケージ間の互換性がなかったりします。あまり流通していないテキストエディタに関心を抱いたりすると、自分でソースからコンパイルする羽目になるかもしれません （気の弱い人にはお勧めできません）。

+ +

どのような技術を扱うのか？

+ +

一般論を言えば、テキストエディタなら、どんなテキストファイルでも開くことができます。自分のメモ書き程度なら、それで十分です。しかし、Web開発を行い、{{Glossary("HTML")}}、{{Glossary("CSS")}}、あるいは{{Glossary("JavaScript")}}をで使ったりすると、ファイルはかなり大きくて複雑なものになります。 Webで扱う技術情報に基づいテキストエディタを選択して、作業を簡単にしましょう。多くのテキストエディタには次のようなサポート機能があります。

+ + + +

コードの着色はほとんどのテキストエディタがサポートしていますが、他の二つの機能はまだのものが多いのが現状です。使用する予定のテキストエディタが、 {{Glossary("HTML")}}、 {{Glossary("CSS")}}、それに {{Glossary("JavaScript")}}を着色できるか確認しておきましょう。

+ +

テキストエディタに、どのような基本機能を求めるか？

+ +

あなたのニーズと計画によりますが、以下の機能は多くの場合に有用です。I

+ + + +

テキストエディタの機能を拡張したいか？

+ +

拡張型のテキストエディタは、標準で組み込まれた機能こそ少ないが、必要に応じて機能を拡張することができます

+ +

あなたの開発に必要な機能が明確でなかったり、使いたい機能がエディタに組み込まれていないときは、拡張型のエディタを検討するのがいいです。良いとされているエディタは、プラグインできる機能を多数持っており、自分で必要なものを探してインストールできるものもあります。

+ +

多くの機能が必要だが、プラグインが多くなってエディタの動作速度が低下するようなら、統合開発環境（IDE: integrated development environment）を検討してみてください。IDEは、統一したインターフェースで多くのツールを使えるので、初心者には少々荷が重いかもしれません。そういう時は、機能を限定して使えばいいのです。有名なIDEの例を下に挙げておきます。

+ + + +

テキストエディタを使用している間、サポートやヘルプが必要か？

+ +

一般にソフトウエアを使うときには、ヘルプがあるかないかを知っておくことは重要です。テキストエディタの場合は、以下の二種類のサポートがあるか調べておくといいです。

+ +
    +
  1. ユーザー向けのコンテンツ（FAQ、マニュアル、オンラインヘルプなど）
    2. +
  2. 開発者や他のユーザーとのディスカッション（フォーラム、メール、チャットなど）
    3. +
+ +

使いかたを学ぶには、1．のコンテンツを読むのが有効です。インストールや使用上の問題を解決するには、他のユーザーの助けが役に立ちます。

+ +

テキストエディタの使い勝手は重要か？

+ +

たしかに、好みの問題かもしれません。いっぽうでは、表示色やボタンの位置など、UI（ユーザーインターフェース）のそこかしこをカスタマイズしたがる人もいます。変更可能な範囲はエディタごとに異なるので、導入前に調べておきましょう。色遣いを変えられるエディタは多くあります。しかし、カスタマイズしたいことがあまり多いようなら、統合開発環境を選んだ方が賢明です。

+ +

インストールとセットアップ

+ +

テキストエディタのインストールは、非常に分かりやすいのが普通です。その方法はプラットフォーム（OS）によって変わりますが、それほど難しいものではありません。:

+ + + +

新しいエディタをインストールしても、OSは既定エディタを変更しない限り、OSは前のエディタを使ってテキストファイルを開こうとします。ファイルをダブルクリックしたときに使う規定エディタを変更するには、以下のリンクにある説明を参照してください。

+ + + +

次のステップ

+ +

良いテキストエディタが見つかったら、基本的な作業環境（テストサーバー）の構築に着手しましょう。あるいは、最初のWebページを書いてみるのもいいでしょう。。

diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..4c3499402f --- /dev/null +++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,172 @@ +--- +title: Web サイトが正しく機能することをどうやって確認しますか？ +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +tags: + - ガイド + - トラブルシューティング + - ドキュメント + - 初心者 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +
+

この記事では、Webサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。

+
+ + + + + + + + + + + + +
前提条件:Web サーバにファイルをアップロードする方法を知る必要があります。
目標:自身の Web サイトで実行できるいくつかの基本的な問題を診断して解決する方法を学びます。
+ +

自身の Web サイトをオンラインで公開しましたか？ 素晴らしい！ ただ、それは適切に動作しているでしょうか？

+ +

別の場所にある Web サーバ は、ローカル Web サーバとはまったく異なった動作をすることが多いため、オンラインになったら Web サイトをテストすることをお勧めします。画像が表示されない、ページが読み込まれない、または読み込みが遅くなるなど、多くの問題が発生するのに驚くかもしれません。ほとんどの場合、大したことではなく、簡単な間違いや Web ホスティング設定の問題です。

+ +

これらの問題を診断して解決する方法を見てみましょう。

+ +

アクティブラーニング

+ +

アクティブラーニングはまだありません。 貢献をご検討ください。

+ +

より深く掘り下げる

+ +

ブラウザでテストする

+ +

Web サイトが正しく機能しているかどうかを知りたければ、まずブラウザを起動し、テストしたいページに移動します。

+ +

ええと、そのイメージはどこですか？

+ +

個人的な Web サイト http://demozilla.examplehostingprovider.net/ を見てみましょう。予想していた画像ではありません。

+ +

Oops, the ‘unicorn’ image is missing

+ +

Firefox のネットワークツール (ツール ➤ Web 開発者 ➤ ネットワーク) を開き、ページをリロードします。

+ +

The image has a 404 error

+ +

一番下に「404」という問題があります。「404」は「リソースが見つかりません」という意味です。そのため、画像が表示されませんでした。

+ +

HTTP ステータス

+ +

サーバは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。

+ +
+
200: OK
+
求めているリソースが配信されました。
+
301: Moved permanently
+
リソースは新しい場所に移動しました。あなたのブラウザでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。
+
304: Not modified
+
最後にファイルをリクエストしてからファイルが変更されていないため、ブラウザはキャッシュからバージョンを表示できるので、応答時間が短縮され、帯域幅がより効率的に使用されます。
+
403: Forbidden
+
そのリソースを表示することを許可されていません。通常それは設定ミス (例えばあなたのホスティングプロバイダがディレクトリへのアクセス権を与えるのを忘れた) と関係があります。
+
404: Not found
+
一目瞭然です。これを解決する方法を以下で説明します。
+
500: Internal server error
+
サーバで何か問題が発生しました。たとえば、サーバサイドの言語 ({{Glossary("PHP")}}、.Net など) が機能しなくなった、または Web サーバ自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダのサポートチームに頼るのが最善です。
+
503: Service unavailable
+
通常、短期間のシステム過負荷が原因です。サーバに何らかの問題があります。しばらくしてからもう一度試してください。
+
+ +

初心者が私たちの (単純な) Web サイトをチェックするとき、私たちは200、304、403、そして404を最もよく扱うでしょう。

+ +

404 を修正する

+ +

では何が悪かったのでしょうか？

+ +

Le list of images in our project

+ +

一見したところ、私たちが求める画像は正しい場所にあるようです...しかしネットワークツールは「404」を報告しました。 HTML コードに unicorn_pic.png ではなく unicorn_pics.png という入力ミスをしたことがわかりました。画像の src 属性を変更して、コードエディタのタイプミスを修正します。

+ +

Deleting the ‘s’

+ +

保存してサーバにプッシュし、ブラウザでページをリロードします。

+ +

The image loads corectly in the browser

+ +

そこに行きます！{{Glossary("HTTP")}} ステータスをもう一度見てみましょう：

+ + + +

さて、エラーを修正し、途中でいくつかの HTTP ステータスを学習しました。

+ +

よくあるエラー

+ +

最もよく見かけるエラーはこれらです：

+ +

アドレスのタイプミス

+ +

http://demozilla.examplehostingprovider.net/ と入力したいのですが、入力が速すぎて「l」を忘れていました。

+ +

Address unreachable

+ +

アドレスが見つかりません。確かに。

+ +

404 エラー

+ +

多くの場合、エラーは単にタイプミスが原因ですが、リソースのアップロードを忘れたか、アップロード中にネットワーク接続が切断された可能性もあります。まずファイルパスの綴りと正確さを確認し、それでも問題が解決しない場合は、ファイルをもう一度アップロードしてください。おそらく問題は解決するでしょう。

+ +

JavaScript エラー

+ +

誰か (おそらくあなた) がそのページにスクリプトを追加する中で間違えました。これでページの読み込みが妨げられることはありませんが、問題が発生したと感じるでしょう。

+ +

コンソールを開き (ツール ➤ Web 開発者 ➤ Web コンソール)、ページをリロードします。

+ +

A Javascript error is shown in the Console

+ +

この例では、エラーが何かを (非常に明確に) 学び、それを修正することができます (別の一連の記事で JavaScript について説明します)。

+ +

その他の事項を確認する

+ +

Web サイトが正しく機能していることを確認する簡単な方法、および発生する可能性がある最も一般的なエラーとそれらの修正方法を示しました。ページがこれらの基準を満たしているかどうかをテストすることもできます。

+ +

パフォーマンスはどうですか？

+ +

ページの読み込みは十分速いですか？ WebPagetest.org のようなリソースや YSlow のようなブラウザアドオンをしようすることで、いくつか興味深いことが分かります。

+ +

Yslow diagnostics

+ +

グレードは A から F までです。私たちのページはごくわずかで、ほとんどの基準を満たしています。しかし、{{Glossary("CDN")}} を使った方が良いでしょう。1つの画像だけを配信する場合はそれほど重要ではありませんが、広帯域幅の Web サイトで何千もの画像を配信する場合は重要になります。

+ +

サーバーは十分に応答しますか？

+ +

ping は指定したドメイン名をテストし、サーバが応答しているかどうかを知らせる便利なシェルツールです。

+ +
$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
+ +

便利なキーボードショートカット、すなわち Ctrl+C を覚えておいてください。Ctrl+C はランタイムに「割り込み」信号を送り、停止するように伝えます。ランタイムを停止しないと、ping は サーバに無期限に ping を実行します。

+ +

簡単なチェックリスト

+ + + +

次のステップ

+ +

おめでとうございます、Web サイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。

+ + diff --git a/files/ja/learn/common_questions/common_web_layouts/index.html b/files/ja/learn/common_questions/common_web_layouts/index.html new file mode 100644 index 0000000000..88fc618791 --- /dev/null +++ b/files/ja/learn/common_questions/common_web_layouts/index.html @@ -0,0 +1,108 @@ +--- +title: 一般的な Web レイアウトには何が含まれていますか？ +slug: Learn/Common_questions/Common_web_layouts +translation_of: Learn/Common_questions/Common_web_layouts +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

When designing pages for your website, it's good to have an idea of the most common layouts.

+
+ + + + + + + + + + + + +
Prerequisites:Make sure you've already thought about what you want to accomplish with your web project.
Objective:Learn where to put things on your webpages, and how to put them there.
+ +

Summary

+ +

There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site.

+ +

Even now with the new focus on mobile Web, almost all mainstream webpages are built from these parts:

+ +
+
Header
+
Visible at the top of every page on the site. Contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system.
+
Main content
+
The biggest region, containing content unique to the current page.
+
Stuff on the side
+
1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, everything not absolutely required by the page's main content.
+
Footer
+
Visible at the bottom of every page on the site. Like the header, contains less prominent global information like legal notices or contact info.
+
+ +

These elements are quite common in all form factors, but they can be laid out different ways. Here are some examples (1 represents header, 2 footer; A main content; B1, B2 things on the side):

+ +

1-column layout. Especially important for mobile browsers so you don't clutter the small screen up.

+ +

Example of a 1 column layout: Main on top and asides stacked beneath it.

+ +

2-column layout. Often used to target tablets, since they have medium-size screens.

+ +

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

+ +

3-column layouts. Only suitable for desktops with big screens. (Even many desktop-users prefer viewing things in small windows rather than full-screen.)

+ +

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

+ +

The real fun begins when you start mixing them all together:

+ +

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

+ +

These are just examples and you're quite free to lay things out as you want. You may notice that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. Also, the main content (A) matters most, so give it most of the space.

+ +

These are rules of thumb you can draw on. There are complex designs and exceptions, of course. In other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. For now, it's best to keep your layout consistent throughout your site.

+ +

Active learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Deeper dive

+ +

Let's study some more concrete examples taken from well-known websites.

+ +

One-column layout

+ +

Invision application. A typical one-column layout providing all the information linearly on one page.

+ +

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+ +

Quite straightforward. Just remember, many people will still browse your site from desktops, so make your content usable/readable there as well.

+ +

Two-column layout.

+ +

Abduzeedo, a simple blog layout. Blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads).

+ +

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+ +

In this example, look at the image (B1) right underneath the header. It's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. It doesn't really matter. What does matter is, if you put something right under the header, it should either be main content or directly related to the main content.

+ +

It's a trap

+ +

MICA. This is a bit trickier. It looks like a three-column layout...

+ +

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+ +

...but it's not. B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.

+ +

Why would you think it's a three-column layout? Because the image on the top-right is L-shaped, because B1 looks like a column supporting the shifted main content, and because the "M" and "I" of the MICA logo create a vertical line of force.

+ +

This is a good example of a classic layout supporting some design creativity. Simple layouts are easier to implement, but allow yourself room to express your creativity in this area.

+ +

A much trickier layout

+ +

The Opera de Paris.

+ +

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+ +

Basically a two-column layout, but you'll notice many tweaks here and there that visually break up the layout. Especially, the header overlaps the image of the main content. The way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. The Opera example looks more complex than the MICA example, but it's actually easier to implement (all right, "easy" is a relative concept).

+ +

As you see, you can craft stunning websites even with just basic layouts. Have a look at your own favorite websites and ask yourself, where's the header, the footer, the main content, and the side content? That will inspire you for your own design and give you good hints for which designs work and which ones don't.

diff --git a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html new file mode 100644 index 0000000000..7c3da5fc1e --- /dev/null +++ b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html @@ -0,0 +1,219 @@ +--- +title: どのようにすべてのタイプのユーザーを対象に設計できますか？ +slug: Learn/Common_questions/Design_for_all_types_of_users +translation_of: Learn/Common_questions/Design_for_all_types_of_users +--- +
{{IncludeSubnav("/ja/Learn")}}
+ +
+

この記事ではあらゆる種類のユーザーのための Web サイトを設計する基本的なヒントを紹介します。

+
+ + + + + + + + + + + + +
前提条件あなたはすでにアクセシビリティとは何か？を読んでいますか？,ここではアクセシビリティについて詳細にカバーしていませんので
目的ユニバーサルデザインとは、障害や技術的制約にかかわらず、すべての人のためのデザインを意味します。 この記事では、ユニバーサルデザインの最も重要なクイックウィンを紹介します。
+ +

概要

+ +

ウェブサイトを構築する際に考えなければならない課題のトップの一つがユニバーサルデザインです。障害、技術的な制約、文化、場所などに関わらず、すべてのユーザーが包含されるものです。

+ +

アクティブラーニング

+ +

まだ、アクティブラーニングがありません。 Please, consider contributing.

+ +

深く掘っていく

+ +

カラーコントラスト

+ +

テキストの読みやすさを維持するためにバックグラウンドカラーと一緒にテキストカラーとのコントラストを良くしなければなりません。視覚的に障害をもつ人々や路上でスマートフォンを使っている人々などを助けるために余計にやさしくしなければなりません。

+ +

{{Glossary("W3C")}}は前景と背景の間の明るさの比のアルゴリズムの計算をして良いカラーの混合を定義しました。計算はかなり複雑なように見えますが、私たち自身の仕事で信頼できるツールにできました。 

+ +

Pacielloグループカラーコントラストアナライザーをダウンロードしてインストールしてみましょう。

+ +
+

注意: あなたはオンライン上でコントラストチェッカーを選択的にウェブ用のカラーコントラストチェッカーのようなものをいくつか見つけることができるでしょう。カラーの値を画面上で見つけ出すのでローカルのカラーチェッカーを私たちはお薦めします。

+
+ +

例えば、どのようにカラーコントラストアナライザーを使えばいいのかこのページでカラーテストを行ってみましょう。

+ +

Colour contrast on this page: excellent!

+ +

テキストと背景明るさの比は 8.30:1 でそれは最小の標準を超えていて (4.5:1) 、視覚障害のある多くの人でもこのページを読めるようにすべきである。

+ +

フォントサイズ

+ +

ウェブサイトにおけるフォントサイズの相関位置と絶対位置のどちらも指定することができます。

+ +

絶対単位

+ +

絶対単位は比例を計算しません。しかし、サイズをストーンに設定して参照します。そうなので、話すために、そして、ピクセルで示すことが最も多いです。例えばCSSはこのように宣言されています。 

+ +
body { font-size:16px; }
+ +

… あなたがブラウザに言うと何かが起こるかもしれません。フォントサイズは16ピクセルにしなければなりません。モダンブラウザでは100%ズームと要素を設定した時にあなたが要求した16ピクセルのふりをすることによってこのルールを得ているかもしれません。

+ +

もう何年間もインターネットエクスプローラーはインターネットエクスプローラー8になるあたりまで断固として16ピクセルは16ピクセルとして表示をしてきました。この場合では拡大することはなく、そしてそれはまだ周りにあることによってそのようにふるまわねばなりません。 

+ +

相関単位

+ +

比例単位と呼ばれているものも、相関単位は親要素に関連して計算されます。相関単位はアクセシビリティに親しみのあるもので、なぜならそれらは、ユーザーシステム上に設定され尊重されるものだからです。 

+ +

相関単位は em 、% や rem:で表現されます。

+ +
+
Percent-based sizes: %
+
Thisこの単位は以前の要素で表現されたフォントサイズN%で示すように指示します。 もし、親がない場合、デフォルトのフォントサイズ計算による基本的なサイズがブラウザで考えられます。 (たいてい16ピクセルに同等になります。)
+
Em-based sizes: em
+
This unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. It is said that "em" is the width of a capital “M” in the alphabet (roughly speaking, an “M” fits into a square).
+
Rem-based sizes: rem
+
This unit is proportional to the root element's font size and is expressed as portions of 1, like em.
+
+ +

Suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px).

+ +

Here is the HTML we're using:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Font size experiment</title>
+</head>
+<body>
+
+    <h1>This is our main heading
+        <span class="subheading">This is our subheading</span>
+    </h1>
+
+</body>
+</html>
+ +

A percent-based CSS will look like this:

+ +
body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */
+
+ +

The same problem expressed with ems:

+ +
body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */
+ +

As you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (Most designs are done in pixel-based software, so the math has to be done by the person coding the CSS).

+ +

Enter rem. This unit is relative to the root element's size and not to any other parent. The CSS can be rewritten thus:

+ +
body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:2rem; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:1rem; } /* original size */
+ +

Easier, isn't it? This works as of Internet Explorer 9 and in every other current browser, so please feel free to use this unit.

+ +
+

Note: You may notice Opera Mini does not support font sizing in rem. It will end up setting its own font size, so don't bother feeding it font units.

+
+ +

Why would I want to use proportional units?

+ +

Because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. Also, check your website's statistics: you may receive visits from older browsers.

+ +

We would advise the following:

+ + + +
+

Note: Your mileage may vary. If you have to cater to older browsers, you'll have to use ems and do a bit more math.

+
+ +

Line width

+ +

There is a longstanding debate about line length on the web, but here's the story. Back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. The solution? Columns.

+ +

Of course the problem doesn't go away when we switch to the Web. The reader's eyes act like a shuttle going from line to line. To make it easier on people's eyes, limit line width to around 60 or 70 characters.

+ +

To achieve this, you can specify a size for your text's container. Let's consider this HTML:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Font size experiment</title>
+</head>
+<body>
+
+<div class="container">
+    <h1>This is our main heading
+        <span class="subheading">This is our subheading</span>
+    </h1>
+
+    <p>[lengthly text that spans many lines]</p>
+</div>
+
+</body>
+</html>
+ +

We have a div with class container. We can style the div either to set its width (using the width property) or its maximum width so that it never gets too large (using the max-width property). If you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more:

+ +
div.container { max-width:70em; }
+ +

Alternative content for images, audio, and video

+ +

Websites often include stuff besides plain text.

+ +

Images

+ +

Images can be either decorative or informative, but there's no guarantee that your users can see them. For example,

+ + + +
+
Decorative images
+
They're just for decoration and don't convey any real information. They could most often be replaced by a background image. Make sure they feature an empty alt attribute: <img src="deco.gif" alt=""> so they don't clog up the text.
+
Informative images
+
They are used to convey information, hence their name. They can, for instance, feature a graph, or show a person's gesture, or any other information. At minimum, you must provide a relevant alt attribute.
+
+ +

If the image can be described succinctly, you can provide an alt attribute and nothing more. If the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a table providing the same data), or resort to a longdesc attribute. This attribute's value is a URL pointing towards a resource explicitly describing in detail the image's content.

+ +
+

Note: the use and even the existence of longdesc has been debated for quite some time. Please refer to the W3C's Image Description Extension (longdesc) for the full explanation and thorough examples.

+
+ +

Audio/video

+ +

You must also provide alternatives to multimedia content.

+ +
+
Subtitling/close-captioning
+
You should include captions in your video to cater to visitors who can't hear the audio. Some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train).
+
Transcript
+
Subtitles only work if somebody watches the video. Many users don't have time, or lack the proper plugin or codec. Additionally, search engines rely mainly on text to index your contents. For all these reasons, please provide a text transcript of the video/audio file.
+
+ +

Image compression

+ +

Some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile devices. If you want a successful website, please compress your images. There are various tools to help you, either online or local:

+ + diff --git a/files/ja/learn/common_questions/how_does_the_internet_work/index.html b/files/ja/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..73899c4026 --- /dev/null +++ b/files/ja/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,99 @@ +--- +title: インターネットはどのように動くのか +slug: Learn/Common_questions/How_does_the_Internet_work +tags: + - WebMechanics + - チュートリアル + - 初心者 +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
{{LearnSidebar}}
+ +
+

この記事はインターネットの仕組みとどのように動いているかを説明します。

+
+ + + + + + + + + + + + +
前提条件:ありませんが、最初にプロジェクトの目標を設定することの記事を先に読むことをおすすめします。
目的:Web の技術インフラストラクチャの基礎と、インターネットと Web の違いについて学びます。
+ +

概要

+ +

インターネットは Web のバックボーンであり、Web を可能にする技術基盤です。最も基本的なインターネットは、すべてが一元的に通信を行う大規模なコンピュータネットワークです。

+ +

インターネットの歴史はやや曖昧です。1960年代に米軍の資金援助を受けて始まった調査プロジェクトに始まり、多くの大学と民間企業の支援を受けて1980年代に公共インフラへと発展しました。インターネットを支える様々なテクノロジーは時間の経過とともに進化してきましたが、大きくは変わっていません。インターネットは、コンピュータを一元的に接続し、何が起きても接続を維持する方法を見つけます。

+ +

アクティブ・ラーニング

+ + + +

より深く

+ +

単純なネットワーク

+ +

２つのコンピューターが通信を必要とする時、物理的に (通常はイーサネットケーブル) や無線 (WiFi や Bluetooth など) で接続する必要があります。現在のすべてのコンピュータでは通信を維持することができます。

+ +
+

注記 : 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。

+
+ +

Two computers linked together

+ +

このようなネットワークでは２つのコンピューターという制限はありません。あなたの望むように多くのコンピューターに接続することができます。しかしそれはすぐに複雑になります。例えば 10 台のコンピューターに接続しようとした場合、45 本のケーブルとそれぞれのコンピューターに 9 つのプラグ差込口が必要になります。

+ +

Ten computers all together

+ +

この問題を解決するために、それぞれのコンピュータがルーターと呼ばれる特別な小さなコンピュータにつなぎます。このルータは一つの仕事だけを行います：電車の信号機のように、特定のコンピュータから送信されたメッセージが正しい宛先コンピュータに到着することを確認します。 コンピュータ B に メッセージを送信するには、コンピュータ A がメッセージをルータに送信し、メッセージをコンピュータ B に転送し、コンピュータ C にメッセージが配信されないようにする必要があります。

+ +

一度ルーターをシステムに追加すると、ネットワークに繋がる 10 個のコンピュータは 10 個のケーブルが必要です。またそれぞれのコンピューターに一つのプラグ差込口が必要でルーターには 10 個のプラグ差込口が必要です。

+ +

Ten computers with a router

+ +

ネットワークのネットワーク

+ +

ここまでは順調ですね。しかし何百、何千、何十億ものコンピュータを接続する場合はどうですか？もちろん、1台のルーターではそれほど規模を拡大することはできませんが、注意深く読んだ場合、ルーターは他のコンピュータと同じようにコンピュータと呼ばれており、２台のルーターを接続するのに問題はないのでしょうか？何も問題はありません。では、繋いでみましょう。

+ +

Two routers linked together

+ +

コンピュータをルータに、そしてルータをルータに接続することで、無限に拡張することができます。

+ +

Routers linked to routers

+ +

このようなネットワークは、私たちがインターネットと呼ぶものに非常に近いものですが、何かが欠けています。私たちは自分自身の目的のためにそのネットワークを構築しました。一方で他のネットワークもあります：あなたの友人、あなたの隣人、誰もが自分のコンピュータのネットワークを持つことができます。しかし、あなたの家と世界の間にケーブルを設置することは実際には可能ではありません。どうすればよいでしょうか？　想像してください。あなたの家には電力や電話などといったもののケーブルが接続されています。電話のインフラはすでに世界中の誰かとあなたの家を接続していますので、私たちが欲しい完璧なワイヤーです。 私たちのネットワークを電話インフラに接続するには、モデムと呼ばれる特別な機器が必要です。 このモデムは、私たちのネットワークからの情報を、電話インフラストラクチャによって管理可能な情報に変換します。また、逆もしかりです。

+ +

A router linked to a modem

+ +

電話のインフラに接続します。次のステップは、私たちのネットワークから接続できるネットワークにメッセージを送信することです。そのために、ネットワークをインターネットサービスプロバイダ (Internet Service Provider:以下 ISP ) に接続します。ISP は、すべてをリンクする特別なルーターを管理する会社で、他のISPのルータにもアクセスできます。 したがって、私たちのネットワークからのメッセージは、ISP ネットワークのネットワークを通して宛先のネットワークに運ばれます。インターネットは、このネットワーク全体のインフラで構成されています。

+ +

Full Internet stack

+ +

コンピューターを探す

+ +

もしコンピューターにメッセージを送りたい場合、どれかを特定する必要があります。 したがって、ネットワークにリンクしたコンピュータは、自身を識別するための固有のアドレスがあり、これは「IPアドレス」(IP はインターネットプロトコルを意味します) と呼ばれます。これは、ドットで区切られた一連の4つの数字からなるアドレスです (例 : 192.168.2.10)。

+ +

それはコンピュータにとって完璧ですが、このようなアドレスを人間が覚えることは難しいです。そこで簡単にするために、ドメイン名と呼ばれる人間がわかりやすい名前で IP アドレスを置き換えることができます。例えば、google.com はトップの IP アドレス173.194.121.32で使用されるドメイン名です。ドメイン名を使用することは、インターネット経由でコンピュータにアクセスする最も簡単な方法です。

+ +

Show how a domain name can alias an IP address

+ +

インターネットとウェブ

+ +

ご存知のとおり、Web ブラウザで Web を閲覧する場合、通常はドメイン名を使用して Web サイトにアクセスします。これはインターネットとウェブが同じであることを意味するのでしょうか？実はそれほど単純な話ではありません。私たちが見てきたように、インターネットは何十億ものコンピュータをすべて接続できる技術インフラです。これらのコンピュータの中には、一部のコンピュータ (Web サーバーと呼ばれる) が Web ブラウザに分かりやすいメッセージを送信することができます。インターネットはインフラですが、Web はインフラの上に構築されたサービスです。 電子メールや {{Glossary("IRC")}} など、インターネット上に構築されたいくつかのサービスがあります。

+ +

次のステップ

+ + diff --git a/files/ja/learn/common_questions/how_much_does_it_cost/index.html b/files/ja/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..d931cb0900 --- /dev/null +++ b/files/ja/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,155 @@ +--- +title: Web で何かをするためにどのくらいコストがかかりますか？ +slug: Learn/Common_questions/How_much_does_it_cost +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +
+

Web に参加することは、見かけほど容易ではありません。この記事では、あなたがどのくらい費用をかける必要があるのか、そしてその理由について説明します。

+
+ + + + + + + + + + + + +
学習の前提:どのソフトウェアが必要か、Web ページ、Web サイトなどの違い、ドメイン名とは何かを理解しているべきです。
学習の目標:Web サイトを作成するための完全なプロセスを確認し、各ステップにかかる費用を確認します。
+ +

要約

+ +

Web サイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。

+ +

ソフトウェア

+ +

テキストエディタ

+ +

Windows のメモ帳、Linux の Gedit、Mac の TextEdit などのテキストエディタを使った経験はおありでしょう。色分けしたり、文法をチェックしたり、コードの構築を手助けしたりするエディタを選択すれば、コードを書くのが楽になります。

+ +

無料のエディタは多くあります。たとえば、Atom、Brackets、Bluefish、TextWrangler、Eclipse、Netbeansなどです。またSublime Textのように好きなだけ試用できるが、料金を支払ったほうが良いものもあります。なかには、PhpStorm,のように、購入ライセンスによって、価格が数百円から２万円の間になるものもあります。Microsoft Visual Studioは数万円から数十万円しますが、Visual Studio Expressは個人やオープンソースプロジェクトでは無料で使えます。 有料ソフトウエアには、無料の試用期間を設けているものもあります。

+ +

最初に何種類かのエディタを試して、用途に合うのはどれか調べるといいでしょう。T {{Glossary("HTML")}}や{{Glossary("CSS")}}、それに{{Glossary("Javascript")}}で簡単なコードを書くのであれば、単純なエディタをお勧めします。

+ +

テキストエディタの品質と使いやすさは、あまり価格と連動しません。実際に使ってみて、目的に合うか調べるようにしてください。例えばSublime Textは安価ですが、多くの無料プラグインがあり、拡張性が高いエディタです。

+ +

画像エディタ

+ +

あなたが使用しているシステムには、単純な画像編集ソフトまたはビューアーが搭載されているでしょう。WindowsではPaint、UbuntuではEye of Gnome、MacではPreviewです。これらのプログラムは比較的制限されているので、レイヤー、エフェクト、およびグループ化を追加するなどのために高機能なエディタが、すぐに必要になります。

+ +

編集ソフトは無料 (GIMP, Paint.NET)、やや高価 (PaintShop Pro, less than $100)、または数百ドル (Adobe Photoshop)のものもあります。

+ +

これらは似たような機能を持っているので、どれを使用しても構いません。この中には様々な機能を網羅しているソフトもありますが、すべての機能を使う日は決して来ないでしょう。 ある時点で他の設計者とプロジェクトを交換する必要がある場合は、彼らがどのツールを使用しているかを調べる必要があります。 編集ソフトは完成したプロジェクトを標準のファイル形式にエクスポートできますが、各編集ソフトは進行中のプロジェクトを独自の特別な形式で保存します。 インターネット上のほとんどの画像は著作権で保護されているので、使用する前にファイルのライセンスを確認することをお勧めします。 Pixabay のようなサイトは、CC0ライセンスの下で画像提供を行なっているので、商用利用のための変更・編集を加えても公開することができます。

+ +

メディアエディタ

+ +

If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).

+ +

For audio files, you can find free software (Audacity, Wavosaur), or paying up to a few hundred dollars (Sony Sound Forge, Adobe Audition). Likewise, video-editing software can be free (PiTiVi, OpenShot for Linux, iMovie for Mac), less than $100 (Adobe Premiere Elements), or several hundred dollars (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). The software you received with your digital camera may cover all your needs.

+ +

パブリッシングツール

+ +

You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)FTP client, RSync, or Git/GitHub.

+ +

Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.

+ +

If you want to install an (S)FTP client, there are several reliable and free options: for example, FileZilla for all platforms, WinSCP for Windows, Cyberduck for Mac or Windows, and more.

+ +

Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.

+ +

ブラウザ

+ +

あなたはすでにブラウザを持っているか、無料でそれを手に入れることができます。必要に応じて、ここから Firefox または Google Chrome をダウンロードしてください。

+ +

Web アクセス

+ +

コンピュータ / モデム

+ +

You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.

+ +

Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.

+ +

You need to upload content to a remote server (see Hosting below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.

+ +

ISP access

+ +

Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:

+ + + +

Hosting

+ +

Understanding bandwidth

+ +

Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.

+ +
+

Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.

+
+ +

Domain names

+ +

Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (1&1, Gandi for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:

+ + + +

Do-it-yourself hosting vs. “packaged” hosting

+ +

When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like Wordpress, Dotclear, spip, etc.), upload pre-made or your own templates.

+ +

You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., Wordpress, Tumblr, Blogger). For the latter, you won't have to pay anything, but you may have less control over templating and other options.

+ +

Free hosting vs. paid hosting

+ +

You might ask, why should I pay for my hosting when there are so many free services?

+ + + +

It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is guaranteed by most paid sites. Most hosting providers give you a huge discount to start with.

+ +

Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.

+ +

Professional website agencies and hosting

+ +

If you desire a professional website, you will likely ask a web agency to do it for you.
+
+ Here, costs depend on multiple factors, such as:

+ + + +

...and for hosting:

+ + + +

Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.

+ +

Next steps

+ +

Now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment.

+ + diff --git a/files/ja/learn/common_questions/html_features_for_accessibility/index.html b/files/ja/learn/common_questions/html_features_for_accessibility/index.html new file mode 100644 index 0000000000..4139cf51e8 --- /dev/null +++ b/files/ja/learn/common_questions/html_features_for_accessibility/index.html @@ -0,0 +1,55 @@ +--- +title: アクセシビリティをよくする HTML の機能にはどんなものがある？ +slug: Learn/Common_questions/HTML_features_for_accessibility +tags: + - Accessibility + - Beginner + - HTML + - Learn + - NeedsContent +translation_of: Learn/Common_questions/HTML_features_for_accessibility +--- +

{{draft}}

+ +

以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。

+ +

タブ移動

+ +

ポインティングデバイスを使用しない、または使用できないユーザーは、リンクを Tab で移動できます。なので、リンクは論理的なタブ移動の順序になっている必要があります。tabindex 属性を使用すると、この順序を定義できます。HTML が線形である場合(そうあるべきなのですが)、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。

+ +
<ul>
+  <li><a href="here.html" tabindex="1">Here</a></li>
+  <li><a href="there.html" tabindex="3">There</a></li>
+  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
+</ul>
+ +

この例（これは純粋にデモンストレーションとして使用されています - こうはしないでください）では、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。

+ + + +

自己記述的ではないリンクがある場合、またはリンク先がより詳細に説明されていることでメリットが得られる場合は、title 属性を使用してリンクに情報を追加できます。

+ +
<p>I'm really bad at writing link text. <a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a> to find out more.</p>
+ +

アクセスキー

+ +

アクセスキーを使用すると、キーボードショートカットをリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが Alt キーまたは Ctrl キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。

+ +
<a href="somepage.html" accesskey="s">Some page</a>
+ + + +

タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。

+ +
<header>
+  <h1>The Heading</h1>
+  <a href="#content">Skip to content</a>
+</header>
+
+<nav>
+  <!-- navigation stuff -->
+</nav>
+
+<section id="content">
+  <!--your content -->
+</section>
diff --git a/files/ja/learn/common_questions/index.html b/files/ja/learn/common_questions/index.html new file mode 100644 index 0000000000..d9990bb91e --- /dev/null +++ b/files/ja/learn/common_questions/index.html @@ -0,0 +1,136 @@ +--- +title: よくある質問 +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

学習エリアのこのセクションでは、浮かんでくるかもしれないけれども、学習ルートの本筋 (例 HTML や CSS 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。

+ +

ウェブはどのように動いているのか

+ +

このセクションでは、ウェブのメカニズムについてのウェブのエコシステムや動作に関係する質問に答えます。

+ +
+
+

インターネットはどうやって動いているの？

+
+
+ +
+
インターネットは、ウェブの骨組みで、ウェブを可能としている技術的なインフラです。ごく簡単に言うと、インターネットとは、おたがいに通信しあうたくさんのコンピューターが繋がってできた巨大なネットワークです。この記事では、おおまなにインターネットがどのように動いているのかを説明します。
+
+

ウェブページ、ウェブサイト、ウェブサーバー、検索エンジン、これらは何が違うの？

+
+
この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどの、ウェブに関係するいろいろな考えについて話します。これらの用語は、ウェブに馴染みのない人にとって、よく混同されたり間違って使われる元になっています。それぞれの意味を発見していきましょう！
+
+ +
+
この記事では、ハイパーリンクがどのようなもので、なぜ大切なのかを説明しています。
+
+

URL って何？

+
+
{{Glossary("Hypertext")}} と {{Glossary("HTTP")}} では、URL とはインターネットのキーとなる考えです。URL は {{Glossary("Browser","ブラウザー")}} が利用する仕組みで、ウェブ上にあるあらゆるリソースを手に入れるために使われます。
+
+

ドメイン名って何？

+
+
ドメイン名は、インターネットのインフラにとって大切なパーツの一つです。インターネット上のウェブサーバーのために、人が読みやすいアドレスを使えるようにしてくれます。
+
+

ウェブサーバーって何?

+
+
「ウェブサーバー」という言葉は、ウェブ上でクライアントにウェブサイトを送信するハードウェアまたはソフトウェアを指します。ときにはその両方を指します。この記事では、ウェブサーバーがどのように動いていて、どうして大切なのかを説明しています。
+
+ +

ツールとセットアップ

+ +

ウェブサイトを作るためのツールやソフトウェアに関係する質問です。

+ +
+
+

ウェブサイトを作るにはどんなソフトウェアが必要？

+
+
この記事では、ウェブサイトの編集、アップロード、閲覧に、それぞれどのようなソフトウェアコンポーネントが必要になるか説明します。
+
+

ウェブ上で何かをするのにどれくらいお金がかかるの？

+
+
ウェブサイトを立ち上げる場合、いっさいお金をかけずにすむこともあれば、高額な費用がかかることもあります。この記事では、ウェブ開発で使用するツールやサービスにどれくらい費用がかかるか、お金をかけた場合、かけなかった場合に、それぞれどのようなことができるか、を説明します。
+
+

どんなテキストエディタが必要？

+
+
この記事では、ウェブ開発で使用するテキストエディタを選択、インストールするときに、考慮すべき点について取り上げます。
+
+

ブラウザーの開発者ツールとは何？

+
+
すべてのブラウザーには、HTML、CSS、その他のウェブ用コードをデバッグするための開発者ツールが用意されています。この記事では、お使いのブラウザーの開発者ツールの基本機能の使い方について説明します。
+
+

ウェブサイトが意図したとおりに動作しないとき、どうすればいい？

+
+
あなたが開発してオンラインに公開したウェブサイト、本当に意図したとおりに動作していますか？ この記事では、基本的なトラブルシューティングの手順について説明します。
+
+

ローカル環境にテスト用サーバーを用意するには、どうすればいい？

+
+
この記事では、使用中のマシンにローカルテスト用のサーバーを準備し、使用する方法について説明します。
+
+

ウェブサーバーにファイルをアップロードするにはどうすればいい？

+
+
+ +
+
ウェブサイトをオンラインで公開して、別のコンピューターからアクセスできるようにするには、FTP ツールがよく使用されます。この記事では、FTP ツールを使ってウェブサイトを公開する方法を説明します。
+
+

GitHub ページを使うにはどうすればいい？

+
+
この記事では、GitHub の GitHub ページ (gh-pages) 機能を使ってコンテンツを公開する方法を説明します。
+
+

Google App Engine を使ってウェブサイトを公開するにはどうすればいい？

+
+
作成したウェブサイトを配置する場所をお探しですか？ この記事では、Google App Engine を使ってウェブサイトを公開する (ホスティングする) 手順を説明します。
+
+

ウェブサイトのデバッグ／パフォーマンス向上に役立つツールにはどのようなものがある？

+
+
リンク先では、FireFox の開発者ツールを使って、ウェブサイトのデバッグ、パフォーマンス向上を行うための記事が一覧にまとめられています。これらの記事では、メモリーの使用状況、JavaScript の呼び出しツリー、レンダリングされた DOM ノードの数、その他について確認する方法などが紹介されています。
+
+ +

デザインとアクセシビリティ

+ +

このセクションでは、ページのデザイン、ページ構成、アクセシビリティについての質問などを取り上げています。

+ +

ウェブサイトの設計では何から始めればいい？

+ +
+
この記事では、すべてのプロジェクトにおいてきわめて重要な第一歩、「そのプロジェクトで何を実現したいのか」を定義する方法を説明します。
+
+

よくあるウェブページのレイアウトには何が含まれてる？

+
+
ウェブサイトを設計するとき、まずは一般的なレイアウトについて知っておくとよいでしょう。この記事では、よくあるウェブレイアウトについていくつか取り上げ、どのような要素で構成されているかを見ていきます。
+
+

アクセシビリティって何？

+
+
この記事では、ウェブアクセシビリティの基本的な概念について紹介します。
+
+

どんなユーザーでも使えるようにデザインするにはどうすればいい？

+
+
この記事では、どのようなユーザーでも利用できるウェブサイトを作成するための基本的なテクニックを説明します。これには、手軽にアクセシビリティを実現する方法や、その他の情報などが含まれます。
+
+

アクセシビリティをよくする HTML の機能にはどんなものがある？

+
+
この記事では、さまざまな障害をもつユーザーがよりウェブサイトを利用しやすいよう使用される、各種の HTML の機能について説明します。
+
+ +

HTML、CSS、JavaScript の質問

+ +

HTML/CSS のよくある問題の解決方法については、次の記事を読んでみてください。

+ + diff --git a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..34646a106f --- /dev/null +++ b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,120 @@ +--- +title: ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？ +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +tags: + - NeedsActiveLearning + - WebMechanics + - 初心者 +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +
+

この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどのウェブに関係する色々な概念に関して解説します。これらの用語はウェブの初心者を混乱させたり、間違って使われたりしています。それぞれの意味を学びましょう。

+
+ + + + + + + + + + + + +
前提条件:インターネットはどのように動くのかを知っておく必要があります。
目的:ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いを説明できるようになること。
+ +

要約

+ +

あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく (興味をお持ちなら用語集があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。

+ +

これらの用語と技術の詳細に関して詳しく説明しますが、これらを簡単に定義することが良いスタートるになるでしょう。

+ +
+
ウェブページ
+
Firefox や Google Chrome、Opera、Microsoft Internet Explorer、Edge、Apple の Safari などのウェブブラウザーで表示可能な文書です。これらはよく単に「ページ」とも呼ばれることもあります。
+
ウェブサイト
+
グループ化され、通常はさまざまな方法で一緒に接続されたウェブページの集まりです。よく「ウェブサイト」または単に「サイト」と呼ばれます。
+
ウェブサーバー
+
インターネット上でウェブサイトをホスティングするコンピューターです。
+
検索エンジン
+
他のウェブページを見つけるのに役立つウェブサービスで、 Google、Bing、Yahoo、DuckDuckGo などがあります。検索エンジンは通常、ウェブブラウザーから (例えば、Firefox、Chrome などのアドレスバーで直接検索エンジンによる検索を実行することができる)、またはウェブページ (例えば bing.com や duckduckgo.com) を介してアクセスされます。
+
+ +

公共図書館に簡単に例えてみましょう。図書館に行ったときに一般的に行うことは次の通りです。

+ +
    +
  1. 検索インデックスを探して、読みたい書籍のタイトルを探します。
    2. +
  2. その書籍のカタログ番号をメモします。
    3. +
  3. 書籍が収蔵されている特定の書架へ行き、カタログ番号を見つけて、本を入手します。
    4. +
+ +

ウェブサーバーと図書館を比較してみましょう。

+ + + +

アクティブラーニング

+ +

利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。

+ +

より深い追求

+ +

それでは、それらの 4 つの用語がどのように関連しているのか、なぜそれらが互いに混同されているのかについて詳しく調べてみましょう。

+ +

ウェブページ

+ +

ウェブページは{{Glossary("browser","ブラウザー")}}で表示することができる簡単な文書です。文書は {{Glossary("HTML")}} 言語で書かれています (他の記事で詳しく説明しています)。ウェブページには、次のような様々な種類のリソースを埋め込むことができます。

+ + + +
+

メモ: ブラウザーは {{Glossary("PDF")}} ファイルや画像などのような他の文書も表示することができますが、ウェブページという用語は、特に HTML 文書を指します。それ以外の場合、単に文書 (またはドキュメント) という用語を使用します。

+
+ +

ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達することができます。ページにアクセスするには、そのアドレスをブラウザーのアドレスバーに入力するだけです。

+ +

ブラウザーのアドレスバーにあるウェブページのアドレスの例

+ +

ウェブサイト

+ +

ウェブサイトはリンクされたウェブページ (および関連するリソース) の集合で、固有のドメイン名を共有しています。指定されたウェブサイトの各ウェブページは明示的なリンク — 多くの場合はクリック可能なテキストの部分の形 — を提供しており、ユーザーがウェブサイトのあるページから他のページに移動することができます。

+ +

ウェブサイトにアクセスするために、ブラウザーのアドレスバーにドメイン名を入力すると、ブラウザーはウェブサイトのメインウェブページ、またはホームページ (略して「ホーム」と呼ばれる) を表示します。

+ +

ブラウザーのアドレスバーにあるウェブサイトのドメイン名の例

+ +

ウェブページとウェブサイトは、特に1枚だけのウェブページを含むウェブサイトである場合に混同しやすくなります。このようなウェブサイトは単一ページのウェブサイトと呼ばれることがあります。

+ +

ウェブサーバー

+ +

ウェブサーバーは、1つ以上のウェブサイトをホスティングするコンピューターです。「ホスティング」はすべてのウェブページや補助的なファイルをコンピューター上で利用できるようにするという意味です。ウェブサーバーは、任意のユーザーのリクエストに応じて、ホスティング中のウェブサイトから任意のウェブページをユーザーのブラウザーに送信します。

+ +

ウェブサイトとウェブサーバーを混同しないようにしてください。例えば、誰かが「私のウェブサイトから応答がありません」と言うのを聞いた場合、実際にはウェブサーバーが応答していないのであり、その結果としてウェブサイトが利用できないのです。もっと重要なことは、ウェブサーバーは複数のウェブサイトをホスティングすることができるため、ウェブサーバーという言葉はウェブサイトを特定するために使用することはできず、大きな混乱を招く可能性があります。先に挙げた例で、「私のウェブサイトから応答がありません」と言った場合、そのウェブサーバー上のウェブサイトがすべて利用できないことになります。

+ +

検索エンジン

+ +

検索エンジンはよくウェブに関する誤解のもとになります。検索エンジンは特殊な種類のウェブサイトで、ユーザーが他のウェブサイトを見つけるのを助けるものです。

+ +

Google, Bing, Yandex, DuckDuckGo など、たくさんあります。一般的なものもあれば、特定のトピックについて専門化されたものもあります。好きなものを使いましょう。

+ +

多くのウェブの初心者は、検索エンジンとブラウザーを混同しています。明確にしましょう。ブラウザーはソフトウェアの一つで、ウェブページを受け取り表示するものです。検索エンジンはウェブサイトであり、人々が他のウェブサイトからウェブページを探すのを手助けします。この混乱は、ブラウザーを起動したとき、ブラウザーが検索エンジンのホームページを表示しているために発生します。これは、ブラウザーで最初にやりたいことが表示させるウェブページであることが明らかであるため、よく分かります。インフラ (ブラウザーなど) とサービス (検索エンジンなど) を混同しないでください。この区別はかなり役立ちますが、専門家によっては曖昧に話すこともあるので、心配しないでください。

+ +

こちらは、 Firefox のインスタンスが既定のスタートアップページとして Google 検索ボックスを表示している様子です。

+ +

Example of Firefox nightly displaying a custom Google page as default

+ +

次の段階

+ + diff --git a/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..fc0c346dfd --- /dev/null +++ b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,110 @@ +--- +title: ローカルのテストサーバーはどのようにセットアップしますか？ +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Node + - PHP + - Python + - django + - lamp + - サーバ + - サーバーサイド + - 初心者 + - 学習 +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

この記事では、マシン上に簡単なローカルテストサーバを設定する方法と、その使い方の基本について説明します。

+
+ + + + + + + + + + + + +
前提条件:最初にインターネットの仕組みや Web サーバについて知っておく必要があります。
目的:ローカルのテストサーバを設定する方法を学習します。
+ +

ローカルファイルとリモートファイル

+ +

ほとんどの学習領域では、ブラウザでサンプルを直接開くだけで済みます。HTML ファイルをダブルクリックするか、ブラウザウィンドウにドラッグ ＆ ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。

+ +

Web アドレスのパスが file:// で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、GitHub でホストされている例 (または他のリモートサーバの例) を見ると、Web アドレスは http:// または https:// で始まっており、ファイルが HTTP 経由で受信されたことを示します。

+ +

ローカルファイルのテストに関する問題

+ +

一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、

+ + + +

シンプルなローカル HTTP サーバの実行

+ +

非同期リクエストの問題を回避するには、ローカル Web サーバを介して実行することによって、そのようなサンプルをテストする必要があります。私たちの目的のためにこれを行う最も簡単な方法の1つは、Python の SimpleHTTPServer モジュールを使うことです。

+ +

これをするためには：

+ +
    +
  1. +

    Python をインストールします。Linux または Mac OS X を使用している場合は、既にシステム上で使用可能になっているはずです。Windows ユーザの方は、Python ホームページからインストーラを入手し、インストーラの指示に従ってインストールすることができます：

    + +
      +
    • python.org に進みます
      • +
    • ダウンロードセクションの下で、Python "3.xxx" のリンクをクリックします
      • +
    • ページ下部の Windows x86 実行可能インストーラを選択してダウンロードします
      • +
    • ダウンロードしたら、それを実行します
      • +
    • インストーラの最初のページで、"Add Python 3.xxx to PATH" チェックボックスをオンにします
      • +
    • [インストール]をクリックし、インストールが完了したら[閉じる]をクリックします
      • +
    +
    2. +
  2. +

    コマンドプロンプト (Windows)/ターミナル (OS X/Linux) を開きます。Python がインストールされていることを確認するには、次のコマンドを入力します

    + + 
    python -V
    +
    3. +
  3. +

    これによりバージョン番号が返されます。OK の場合は、cd コマンドを使用してサンプルが入っているディレクトリに移動します

    + + 
    # include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..
    +
    4. +
  4. +

    ディレクトリの中でサーバを起動するコマンドを入力します

    + + 
    # If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    デフォルトでは、これはローカル Web サーバ上のディレクトリの内容を 8000 番ポート上で実行します。このサーバにアクセスするには、Web ブラウザで localhost:8000 のURL に移動します。ここにディレクトリの内容が表示されるので、実行する HTML ファイルをクリックします

    +
    6. +
+ +
+

メモ: すでに 8000 番ポートで何かが稼働している場合は、server コマンドを実行して別のポート番号を選択することができます。例えば python3 -m http.server 7800 (Python 3.x) または python -m SimpleHTTPServer 7800 (Python 2.x) です。これで localhost:7800 でコンテンツにアクセスできます。

+
+ +

サーバサイドの言語をローカルで実行する

+ +

Python の SimpleHTTPServer (python 2.0) http.server (python 3.0) モジュールは便利ですが、Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバサイドの言語に依存します。いくつかの例があります：

+ + + +
$ cd path/to/your/php/code
+$ php -S localhost:8000
diff --git a/files/ja/learn/common_questions/thinking_before_coding/index.html b/files/ja/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..ec555fe4c4 --- /dev/null +++ b/files/ja/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,177 @@ +--- +title: どのように Web サイトのデザインを始めるのか? +slug: Learn/Common_questions/Thinking_before_coding +tags: + - Beginner + - Composing + - NeedsActiveLearning + - needsSchema + - 初心者 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

この記事では、すべてのプロジェクトの重要な第一歩として、そのプロジェクトで達成したいことを定義します。

+ + + + + + + + + + + + +
前提条件なし
目的目標を定義してウェブプロジェクトの方向性を明らかにする方法を学びます。
+ +

概要

+ +

ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。

+ +

あなたがアイデアを得てそれをウェブサイトにしたいときには、何かをする前に答えるべきいくつかの質問があります：

+ + + +

これらはすべてプロジェクトのアイデア化と呼ばれ、初心者であれ、経験豊富な開発者であれ、目標を達成するための最初のステップです。

+ +

アクティブラーニング

+ +

アクティブラーニングはまだありません。Please, consider contributing.

+ +

より深いダイビング

+ +

プロジェクトは技術的側面から始まることはありません。ミュージシャンは、最初にプレイしたいことのアイデアがない限り、決して音楽を作ってはいけません。これは画家、作家、ウェブ開発者にとっても同じことです。テクニックは 2番目に来ます。

+ +

技術は明らかに重要です。ミュージシャンは楽器をマスターする必要があります。しかし、良いミュージシャンは、アイデアなしに良い音楽を生み出すことはできません。したがって、コードやツールなどの技術的な側面に飛び込む前に最初のステップに戻り、実行したいことを詳細に決定する必要があります。

+ +

はじめに友人と 1時間ディスカッションするのは良いことですが、不十分です。自分のアイデアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイデアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。

+ +
+

メモ: プロジェクトのアイデア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルがプロジェクトの理念、プロジェクト計画、およびプロジェクト管理と呼ぶものを処理する簡単な方法を紹介します。

+
+ +

本当にしたいことは何ですか？

+ +

他のすべてを動かすので、これは答えるべき最も重要な問いです。到達したいすべての目標を列挙してください。お金を稼ぐための商品の販売、政治的意見の表明、新しい友達の会合、ミュージシャンとのギグ、猫の写真の収集など、それは何でもかまいません。

+ +

あなたがミュージシャンだとしましょう。あなたは次のことができます：

+ + + +

そのようなリストを取得したら優先順位を付ける必要があります。目標を最も重要なものからそうでないものに順番に並べます。

+ +
    +
  1. 新しいガールフレンド/ボーイフレンドを探す
    2. +
  2. 人々にあなたの音楽を聞いてもらう
    3. +
  3. あなたの音楽について話す
    4. +
  4. 他のミュージシャンに会う
    5. +
  5. グッズを売る
    6. +
  6. ビデオを通して音楽を教える
    7. +
  7. あなたの猫の写真を公開する
    8. +
+ +

このシンプルなエクササイズ−−目標を作成し、並び替えること−−は意思決定をするうえでの助けになります。(これらの機能を実装し、これらのサービスを使用して、これらのデザインを作成しますか？)

+ +

これで、優先順位付けされた目標リストが作成されたので、次の質問に移りましょう。

+ +

ウェブサイトを使ってどのように目標を達成する？

+ +

あなたは目標のリストを持っており、それらの目標を達成するためにウェブサイトが必要だと感じます。本気ですか？

+ +

例を振り返りましょう。音楽に関連する 5 つの目標があります。私生活に関連した1つの目標 (あなたの重要な他者を見つけること)、そして全く無関係の猫の写真です。これらすべての目標をカバーするために単一のウェブサイトを構築することは合理的ですか？それも必要ですか？結局のところ、既存のウェブサービスのスコアは、新しいウェブサイトを構築せずにあなたを目標に導くかもしれません。

+ +

ガール/ボーイフレンドを見つけることは、まったく新しいサイトを構築するのではなく、既存のリソースを使用することが理にかなっている主要なケースです。どうして？なぜなら、実際にガール/ボーイフレンドを探すよりも、ウェブサイトの構築と保守に多くの時間を費やすからです。私たちの目標は最も重要なものなので、ゼロから始めるのではなく、既存のツールを活用することに力を注ぐべきです。繰り返しになりますが、写真を紹介するためにすでにたくさんのウェブサ ービスが用意されているので、新しいサイトを構築するだけの価値はありません。

+ +

他の 5 つの目標はすべて音楽に関連しています。もちろん、これらの目標に対応できるウェブサービスは数多くありますが、この場合は専用のウェブサイトを構築することが理にかなっています。このようなウェブサイトは、私たちが 1 つの場所 (目標 3,5、および 6 に適しています) に公開し、私たちと公共の間の交流を促進する (目標2 と 4 に良い) すべてのものを集約する最良の方法です。一言で言えば、これらの目標はすべて同じトピックを中心にしているため、すべてを 1 か所にまとめて目標を達成し、フォロワーが私たちとつながるのを助けます。

+ +

ウェブサイトはどのように私の目標を達成するのに役立ちますか？それに答えることによって、あなたの目標に到達し、無駄な労力から自分自身を救う最良の方法を見つけることができます。

+ +

目標を達成するために何をどのような順序で実行する必要がありますか？

+ +

あなたが達成したいことが分かったら、今度はその目標を実行可能なステップに変えてください。副題として、あなたの目標は必ずしも石で設定されているわけではありません。プロジェクトの中でも、予期せぬ障害物が横切ったり、心が変わったりしても、時間の経過と共に進化します。

+ +

長い説明をするのではなく、この表の例に戻ってみましょう。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
目標すべきこと
人々にあなたの音楽を聞いてもらう +
    +
  1. 音楽を録音する
    2. +
  2. オンラインで使用可能なオーディオファイルをいくつか準備します (既存のウェブサービスでこれを行うことができますか？)
    3. +
  3. あなたのウェブサイトのどこかであなたの音楽に他の人がアクセスできるようにする
    4. +
+
あなたの音楽について話す +
    +
  1. ディスカッションを始めるためにいくつかの記事を書く
    2. +
  2. 記事の外観を定義する
    3. +
  3. それらの記事をウェブサイトに公開する(これを行う方法は？)
    4. +
+
他のミュージシャンに会う +
    +
  1. 他の人があなたに連絡する方法を提供します (E メール？Facebook？電話？手紙？)
    2. +
  2. 人々があなたのウェブサイトからそれらの連絡先チャンネルをどのように見つけるかを定義する
    3. +
+
グッズを売る +
    +
  1. グッズを作る
    2. +
  2. グッズを保管する
    3. +
  3. 配送を処理する方法を見つける
    4. +
  4. 支払いを処理する方法を見つける
    5. +
  5. あなたのサイトに人々が注文するためのメカニズムを作ります
    6. +
+
ビデオを通して音楽を教える +
    +
  1. ビデオレッスンを録画する
    2. +
  2. オンラインで表示可能なビデオファイルを準備します (これも既存のウェブサービスで可能ですか？)
    3. +
  3. あなたのウェブサイトのどこかであなたのビデオに他の人がアクセスできるようにする
    4. +
+
+ +

気づくべき 2 つのことがあります。第1 に、これらのアイテムの一部はウェブ関連 (例えば音楽を録音し、記事を書く) ではありません。これらのオフライン活動は、プロジェクトのウェブ側よりも重要な役割を果たすことがよくあります。たとえば、販売では、人々が注文するウェブサイトを構築するよりも、供給、支払い、出荷を処理する方がはるかに重要で時間がかかります。

+ +

第2 に、実行可能なステップを設定することで、答える必要がある新しい質問につながります。通常、当初考えていたよりも多くの疑問が出てきます。(例えば、これをすべて自分で行う方法を学ぶべきか、誰かにそれをさせるか、サードパーティサービスを使用するように頼んでください)。

+ +

結論

+ +

ご覧のとおり、「ウェブサイトを作ってみたい」というシンプルなアイデアでも、考えれば考えるほど ToDo リストが長くなっていきます。嘆きたくなるでしょうが、パニックになる必要はありません。すべての質問に答える必要も、リストの項目の全てを行う必要もありません。大切なことは、あなたは何がしたくて、どのように到達するかというビジョンを持てるかどうかなのです。クリアなビジョンを頭に入れたら、それをいつ、どのように行うかを決める事が必要です。 簡単にはできないような大きなタスクは、実行可能な小さなステップに分割しましょう。小さなステップを一つずつこなすことで、ついには大きな成果を達成することができるでしょう。

+ +

この記事から、ウェブサイトを作成するための大まかな計画を立てることができるはずです。次の記事は、インターネットの仕組みです。

diff --git a/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..92c533f108 --- /dev/null +++ b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,177 @@ +--- +title: どのようにファイルを Web サーバにアップロードしますか？ +slug: Learn/Common_questions/Upload_files_to_a_web_server +tags: + - FTP + - GitHub + - WebMechanics + - rsync + - sftp + - アップロード + - ホスティング + - 初心者 +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +
+

この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。

+
+ + + + + + + + + + + + +
学習の前提Web サーバが何であるか、ドメイン名の仕組みを知っていなければなりません。また、基本的な環境の設定方法や簡単な Web ページの作成方法も理解しておく必要があります。
学習の目的FTP を使用してファイルをサーバにプッシュする方法を学びます。
+ +

概要

+ +

シンプルな Web ページを作成している場合 (例として HTML の基本を参照)、Web サーバ上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。

+ +

SFTP

+ +

 SFTP クライアントには、いくつもの選択肢があります。ここのデモは FileZilla を使うことにします。 Windows、macOS、Linux で使え、無料だからです。FileZilla をインストールするには、FileZilla ダウンロードページに移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラファイルからインストールします。

+ +
+

メモ: もちろん他にもたくさんのオプションがあります。詳細についてはパブリッシングツールを参照してください。

+
+ +

FileZilla アプリケーションを開きます。次のようなものが表示されます。

+ +

+ +

ログイン

+ +

この例では、ホスティングプロバイダ (私たちの HTTP Web サーバをホストするサービス) は架空の会社 "Example Hosting Provider" であり、URL は次のようになります：mypersonalwebsite.examplehostingprovider.net

+ +

私たちはアカウントを開設し、その情報を受け取ったばかりです：

+ +
+

Example Hosting Provider でアカウントを開設しましたことをお祝いします。

+ +

アカウント: demozilla

+ +

あなたのWebサイトは demozilla.examplehostingprovider.net で表示されます。

+ +

このアカウントに公開するには、SFTP を使用して次の資格情報で接続してください：

+ + +
+ +

最初に http://demozilla.examplehostingprovider.net/ を見てみましょう。見ての通り、まだそこには何もありません：

+ +

Our demozilla personal website, seen in a browser: it's empty

+ +
+

メモ: ホスティングプロバイダによっては、最初にあなたの Web アドレスに行ったときに、「このWebサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。

+
+ +

SFTP クライアントを遠隔のサーバに接続するには、次の手順を実行します。

+ +
    +
  1. メインメニューから ファイル > サイトマネージャ と選択します
    2. +
  2. [サイトマネージャ] ウィンドウで、[新規サイト] ボタンをクリックし、提供されたスペースにサイト名を demozilla として入力します
    3. +
  3. ホスティングプロバイダから提供された SFTP サーバのホストを Host: フィールドに入力します
    4. +
  4. [ログオンの種類] ドロップダウンで [標準] を選択し、提供されたユーザ名とパスワードを該当するフィールドに入力します
    5. +
  5. 正しいポートおよびその他の情報を入力します
    6. +
+ +

ウィンドウは次のようになります：

+ +

+ +

次に Connect を押して SFTP サーバに接続します。

+ +

注意: ホスティングプロバイダがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。FTP は本質的に安全ではないため、使用しないでください。

+ +

こちらとあちら：ローカルビューとリモートビュー

+ +

一度接続すると、画面は次のようになります (私たちはあなた自身のアイデアを伝えるために例を挙げています)。

+ +

+ +

あなたが見ているものを調べてみましょう：

+ + + +

サーバへのアップロード

+ +

私たちのホスト命令の例では、「Web 上に公開するには、ファイルを Public/htdocs ディレクトリに入れてください」となっています。右ペインの指定されたディレクトリに移動する必要があります。このディレクトリは実質的にあなたの Web サイトのルートで、index.html ファイルやその他のアセットがどこに行くかを示します。

+ +

ファイルを置く正しいリモートディレクトリが見つかったら、サーバにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ & ドロップする必要があります。

+ +

本当にオンラインですか？

+ +

これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザでWebサイト (例えば http://demozilla.examplehostingprovider.net/) に戻って再確認することができます。

+ +

Here we go: our website is live!

+ +

そしてやりました！ Web サイトは動いています！

+ +

Rsync

+ +

{{Glossary("Rsync")}} はローカルからリモートへのファイル同期ツールで、ほとんどの Unix ベースのシステム (macOS や Linux など) で一般的に利用可能ですが、Windows 版も存在します。

+ +

デフォルトではコマンドラインで使用されるため、SFTP よりも高度なツールと見なされています。基本的なコマンドはこんな感じです：

+ +
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
+ + + +

あなたはホスティングプロバイダからそのような詳細を得る必要があるでしょう。

+ +

詳細およびその他の例については、 How to Use Rsync to Copy/Sync Files Between Servers を参照してください。

+ +

もちろん、FTP の時と同じように安全な接続のもとで使用することをお勧めします。Rsync の場合は -e オプションを使用して、SSH を介した接続を確立するための SSH 詳細を指定します。例えば：

+ +
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
+ +

必要なものの詳細については、How To Copy Files With Rsync Over SSH を参照してください。

+ +

Rsync GUI ツール

+ +

他のコマンドラインツールと同様に、コマンドラインの使用に慣れていない人向けに Rsync 用の GUI ツールもあります。Acrosync はそのようなツールの1つで、Windows と macOS で利用可能です。

+ +

繰り返しになりますが、ホスティングプロバイダから接続認証情報を取得する必要がありますが、この方法でそれらを入力するための GUI が得られます。

+ + + +

GitHub

+ +

GitHub では、GitHub pages (gh-pages) を介して Web サイトを公開することができます。

+ +

これの使い方の基本については、Web 入門の Web サイトの公開の記事で説明しているので、ここでは繰り返しません。

+ +

ただし、GitHub で Web サイトをホストすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは Using a custom domain with GitHub Pages をご覧ください。

+ + + +

ファイルをアップロードするその他の方法

+ +

FTP プロトコルは、Web サイトを公開するためのよく知られた方法の1つですが、唯一の方法ではありません。 他にもいくつかのやり方があります。

+ + diff --git a/files/ja/learn/common_questions/using_github_pages/index.html b/files/ja/learn/common_questions/using_github_pages/index.html new file mode 100644 index 0000000000..2e68d87607 --- /dev/null +++ b/files/ja/learn/common_questions/using_github_pages/index.html @@ -0,0 +1,108 @@ +--- +title: GitHub Pagesを使うには？ +slug: Learn/Common_questions/Using_Github_pages +tags: + - Beginner + - GitHub + - Guide + - Web + - gh-pages + - git + - publish +translation_of: Learn/Common_questions/Using_Github_pages +--- +

GitHub は "ソーシャル・コーディング" のサイトです。Git バージョン管理システムのストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。

+ +

公開コンテンツ

+ +

GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のあるバージョン管理システムです。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。GitHub は GitHub ページと呼ばれる非常に便利な機能を持っています。これはあなたがウェブ上にライブでウェブサイトのコードを公開することを可能にします。

+ +

Github の基本設定

+ +
    +
  1. 初めに、システムに Git をインストールしてください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。
    2. +
  2. 次に、GitHub アカウントにサインアップします。それは単純かつ簡単です。
    3. +
  3. サインアップしたら、ユーザー名とパスワードを使って github.com  にログインします。
    4. +
+ +

ソースコードのアップロード準備

+ +

Github リポジトリーに好きなコードを保存できますが、GitHub ページ機能を最大限に活用するには、コードを典型的なウェブサイトとして構成する必要があります。主なエントリーポイントは、index.html という HTML ファイルです。

+ +

次に進む前に、自身のコードディレクトリーを Git リポジトリとして初期化する必要があります。このために、以下のことを実行してください:

+ +
    +
  1. コマンドラインで test-site のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、cd コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの test-site というディレクトリーに配置した場合は、次のように入力します: + + 
    cd Desktop/test-site
    +
    2. +
  2. コマンドラインが、あなたのウェブサイトディレクトリーの中を指しているとき、ディレクトリーを git リポジトリにそのまま変えるように git ツールに指示する、次のコマンドを入力してください: + 
    git init
    +
    3. +
+ +

コマンドラインインターフェイスの余談

+ +

Github にコードをアップロードする最良の方法は、コマンドラインを使用することです。これは、ユーザーインターフェイス内をクリックするのではなく、ファイルを作成・プログラム実行のような動作のためのコマンドを入力するウィンドウです。それは次のようなものです:

+ +

+ +
+

補足: コマンドラインに不安がある場合は、Git グラフィカルユーザーインターフェイスを使用して、同じ作業を行うことも検討できます。

+
+ +

すべてのオペレーティングシステムには、コマンドラインツールが付属しています：

+ + + +

これには最初は、少し戸惑うかもしれませんが、心配しないでください — すぐに基本のコツをつかむでしょう。上記のようにコマンドを入力して、Enter キーを押すことで、端末で動作するようにコンピューターに指示します。

+ +

ソースコードのリポジトリの作成

+ +
    +
  1. 次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、新しいリポジトリー を選択します。
    2. +
  2. このページの リポジトリー名ボックス に、ソースコードのリポジトリー名 (例: my-repository) を入力します。
    3. +
  3. また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです：
    +
    4. +
  4. Create repository をクリックします。これにより、次のページに移動します:
    +
    5. +
+ +

GitHub へのファイル格納

+ +
    +
  1. 現在のページで、あなたはセクションに興味を持っています... または、コマンドラインから既存のリポジトリーをプッシュします。このセクションに 2 行のコードがリストされているはずです。最初の行全体をコピーしてコマンドラインに貼り付け、Enter キーを押します。コマンドは次のようなものです: + + 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    +
    2. +
  2. 次に、以下の 2 つのコマンドを入力し、それぞれの後に Enter キーを押します。これらは GitHub にアップロードするためのコードを用意し、Git にこれらのファイルを管理するように依頼します。 + 
    git add --all
+git commit -m 'adding my files to my repository'
    +
    3. +
  3. 最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する「または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします： + 
    git push -u origin master
    +
    4. +
  4. ここで、リポジトリーの gh-pages ブランチを作成する必要があります。現在のページを更新すると、以下のようなリポジトリページが表示されます。Branch: master というボタンを押し、テキスト入力に gh-pages と入力してから Create branch: gh-pages という青いボタンを押す必要があります。これにより、gh-pages という特別な場所に公開されている、特別なコードブランチが作成されます。URL は、username.github.io/my-repository-name の形式を取ります。したがって、この例の場合、URL は https://chrisdavidmills.github.io/my-repository になります。表示されているページは index.html ページです。
    +
    5. +
  5. 新しいブラウザータブで、GitHub Pages のウェブアドレスに移動すると、サイトがオンラインなります！友人にそれを電子メールで送って、あなたの習熟を披露してください。
    6. +
+ +
+

注: 困った場合は、GitHub Pages ホームページも大いに役立ちます。

+
+ +

GitHub の詳細

+ +

テストサイトにさらに変更を加えて、GitHub にアップロードしたい場合は、以前と同じようにファイルに変更を加えるだけです。それから、以下のコマンドを入力して (それぞれ Enter キーを押して) GitHub にそれらの変更をプッシュする必要があります:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

another commit をより適切なメッセージに置換して、今行った変更を説明できます。

+ +

私たちは、Git の表面を引っ掻いてみたにすぎません。詳細については、GitHub ヘルプサイト から始めてください。

diff --git a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..4e3fe1667b --- /dev/null +++ b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,182 @@ +--- +title: ブラウザー開発者ツールとは？ +slug: Learn/Common_questions/What_are_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - Dev Tools + - HTML + - JavaScript + - Learn +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
{{IncludeSubnav("/ja/Learn")}}
+ +
+

近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。

+
+ +
+

注: 下のサンプルを実行していく前に、Web入門の記事の中で作りあげる、初心者向けウェブサイトの例を開いてください。後ほどこれを使って説明します。

+
+ +

ブラウザ開発者ツールの開き方

+ +

開発者ツールはブラウザのサブウィンドウの中にいます。大体こんな感じに...。

+ +

+ +

どのように開くのでしょうか？これには 3 つの方法があります。

+ + + +

+ +

インスペクタ: DOM の内容が見られる CSS エディター

+ +

開発者ツールはたいてい最初にインスペクタが開きます。インスペクタの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、HTML と CSS をその場で簡単に編集し、ブラウザのビューポートに表示されている結果に反映することができます。

+ +

+ +

もしインスペクタが表示されていない場合、

+ + + +

DOM インスペクタについて詳しく知る

+ +

まずは、DOM インスペクタ上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザによって異なりますが、重要な機能はほぼ同じです。

+ +

+ + + +

それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。

+ +

CSS エディターについて詳しく知る

+ +

最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。

+ +

+ +

以下の機能は特に便利です。

+ + + +

CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。

+ + + +

もっと知りたいときは...

+ +

各ブラウザのインスペクタの詳細については以下をご覧ください。

+ + + +

The JavaScript console

+ +

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

+ +

If the developer tools are already open, click or press the Console tab.

+ +

If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console. On other browser, open the developer tools and then click the Console tab.

+ +

This will give you a window like the following:

+ +

+ +

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

Now try entering the following incorrect versions of the code and see what you get.

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

+ +

Find out more

+ +

Find more out about the JavaScript console in different browsers:

+ + + +

あわせて参照

+ + diff --git a/files/ja/learn/common_questions/what_are_hyperlinks/index.html b/files/ja/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..97b37bfe75 --- /dev/null +++ b/files/ja/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,95 @@ +--- +title: ハイパーリンクとは？ +slug: Learn/Common_questions/What_are_hyperlinks +tags: + - Beginner + - Infrastructure + - Navigation +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +
+

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

+
+ + + + + + + + + + + + +
前提条件:インターネットの仕組みを理解し、Web ページ、Web サイト、Web サーバ、検索エンジンの違いに精通している必要があります。
目的:Web 上のリンクとその重要性について学びます。
+ +

概要

+ +

ハイパーリンクは通常リンクと呼ばれ、Web の背後にある基本概念です。リンクとは何かを説明するために、Web アーキテクチャの基本に戻る必要があります。

+ +

Web の発明者でもあるティム・バーナーズ・リーは、1989年に Web を支える3つの柱について語りました。

+ +
    +
  1. {{Glossary("URL")}}、Web 文書を追跡するアドレスシステム
    2. +
  2. {{Glossary("HTTP")}}、URL が与えられたときに文書を見つけるための転送プロトコル
    3. +
  3. {{Glossary("HTML")}}、埋め込みハイパーリンクを可能にする文書フォーマット
    4. +
+ +

3つの柱からわかるように、Web 上のすべてのものはドキュメントとそのアクセス方法を中心に展開されています。Web の当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、Web は画像、ビデオ、およびバイナリデータへのアクセスを提供するように進化しましたが、これらの改善によって3つの柱が変わることはほとんどありませんでした。

+ +

Web が登場する前は、ドキュメントにアクセスして別のドキュメントに移動することは非常に困難でした。人が読めるので、URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザはリンクをアクティブにすることで対象の文書にすぐにアクセスできます。

+ +

下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから際立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまでTabキーを押してEnterキーまたはスペースバーを押します。

+ +

Example of a basic display and effect of a link in a web page

+ +

リンクは、Web をとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代の Web デザインにとって重要であることについて説明します。

+ +

より深いダイブ

+ +

すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。

+ +

リンクの種類

+ +
+
内部リンク
+
両方ともあなたの Web サイトに属している 2 つの Web ページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、Web サイトのようなものはありません (もちろん、1ページの Web サイトでもない限りはですが)。
+
外部リンク
+
あなたの Web ページから他の誰かの Web ページへのリンク。Web は Web ページのネットワークであるため、外部リンクがなければ Web はありません。あなたの Web ページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。
+
被リンク
+
他の人の Web ページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。
+
+ +

Web サイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事で Web サイトナビゲーションの設計について説明しますが、原則として、新しい Web ページを追加するときは必ず、他のページの少なくとも1つがその新しいページにリンクしていることを確認してください。一方、サイトに10ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。

+ +

始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です。(詳細については下記を参照してください)。

+ +

アンカー

+ +

ほとんどのリンクは2つの Web ページを結び付けています。 アンカーは1つの文書の2つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザは新しい文書をロードするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。

+ +

Example of a basic display and effect of an anchor in a web page

+ +

リンクと検索エンジン

+ +

リンクはユーザにとっても検索エンジンにとっても重要です。 検索エンジンは、Web ページをクロールするたびに、その Web ページで利用可能なリンクをたどって Web サイトにインデックスを付けます。検索エンジンは、リンクをたどって Web サイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリが対象のWebページにアクセスするのに適しているかを判断します。

+ +

リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。

+ + + +

SEO (検索エンジン最適化) は、検索結果で Web サイトを上位にランク付けする方法の研究です。Web サイトのリンクの使用を改善することは、1つの役に立つ SEO テクニックです。

+ +

次のステップ

+ +

それでは、いくつか Web ページにリンクを設定しましょう。

+ + diff --git a/files/ja/learn/common_questions/what_is_a_domain_name/index.html b/files/ja/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..37d78285c8 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,160 @@ +--- +title: ドメイン名とは何ですか？ +slug: Learn/Common_questions/What_is_a_domain_name +tags: + - Web + - イントロダクション + - インフラ + - ウェブ + - ドメイン名 + - 初心者 + - 導入 +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +
+

この記事ではドメイン名について説明し、何であるか、どのように構造化されているのか、そして取得する方法を説明します。

+
+ + + + + + + + + + + + +
前提知識:まずインターネットの仕組み、 URL とは何かを理解している必要があります。
目的:ドメイン名とはどのようなもので、どのように働くのか、なぜ重要なのかを学びます。
+ +

概要

+ +

ドメイン名はインターネット基盤の重要な部分です。インターネット上で利用できるあらゆるウェブサーバーに対して、人間が読めるアドレスを提供します。

+ +

インターネットに接続しているコンピューターはすべて、パブリック {{Glossary("IP")}} アドレスからアクセスでき、これは IPv4 では32ビット (通常、ドットで区切られた 0〜255 までの4桁の数値 (例: 173.194.121.32) として記述される)、 IPv6 では128ビット (通常はコロンで区切られた4桁の16進数の8つのグループ (例: 2027:0da8:8b73:0000:0000:8a2e:0370:1337)として記述される) で構成されます。コンピューターはこれらのアドレスを簡単に処理できますが、人間にとってはだれがサーバーを運営しているのか、またはウェブサイトがどのようなサービスを提供しているかを理解するのは困難です。 IP アドレスは覚えにくく、時間の経過とともに変わる可能性があります。これらすべての問題を解決するために、ドメイン名と呼ばれる人間が読めるアドレスを使用します。

+ +

より深い追求

+ +

ドメイン名の構造

+ +

ドメイン名は単純な構造であり、ドットで区切られたいくつかの部分 (1つの部分だけの場合もあれば、2つ、3つの場合も...) からできており、右から左に向かって読まれます。

+ +

MDN のドメイン名の構造

+ +

これらのそれぞれの部分は、ドメイン名全体に関する特定の情報を提供します。

+ +
+
{{Glossary("TLD")}} (トップレベルドメイン)
+
TLD は最も一般的な情報を提供します。 TLD は、ドメイン名の背後にあるサービスの全般的な目的をユーザーに伝えます。多くの一般的な TLD (.com, .org, .net) はウェブサービスが特定の基準を満たしていることを要求しませんが、 TLD によってはより厳密な基準を適用するため、目的がより明確になります。例えば、 +
    +
  • .jp, .us, .fr, .se などのローカル TLD では、サービスを特定の言語で提供しているか、特定の国でホスティングされていることを要求します。これらは、特定の言語や国のリソースであることを示しているとみなされます。
    • +
  • .gov や .go.jp を含む TLD は、政府機関のみが使用できます。
    • +
  • .edu や .ac.jp のような TLD は教育・学術機関のみで使用されていると見なされます。
    • +
+ TLD にはラテン文字だけでなく特殊文字も含めることができ、長さは最大63文字ですが、ほとんどは2〜3文字です。
+
ラベル (またはコンポーネント)
+
ラベルは TLD の後に続くものです。ラベルは1文字から完全な一文まで何でも構いません。 TLD の直前にあるラベルは、二次レベルドメイン (SLD) とも呼ばれます。ドメイン名は多数のラベル (またはコンポーネント) を持つことができますが、ドメイン名を構成するのにラベルを3つ持つことが必須でも必要でもありません。例えば、 www.inf.ed.ac.uk は正しいドメイン名です。制御権のあるドメイン (例えば mozilla.org) には、 developer.mozilla.org や https://iot.mozilla.org/ のように、互いに異なる内容で「サブドメイン」を作成することができます。
+
+ +

ドメイン名の購入

+ +

誰がドメイン名を所有しているか

+ +

「ドメイン名を買う」ことはできません。これは、未使用のドメイン名が最終的に他の人が再び使用できるようになるためです。すべてのドメイン名が購入されてしまうと、ウェブはすぐにロックされていて誰も利用ができない未使用のドメイン名であふれてしまいます。

+ +

代わりに、1年間または数年間ドメイン名を使用する権利を購入します。この権利は更新することができ、他の人々の応募よりも更新の方が優先されます。しかし、決してドメイン名を所有するわけではありません。

+ +

登録機関と呼ばれる会社は、ドメイン名のレジストリを使用して、あなたをドメイン名に結び付ける技術的および管理的情報を維持します。

+ +
+

メモ : ドメイン名によっては、追跡を担当している登録機関ではない可能性があります。たとえば、.fire の下のすべてのドメイン名は Amazon によって管理されています。

+
+ +

利用可能なドメイン名を探す

+ +

特定のドメイン名が利用可能かどうかを調べるには、

+ + + +
$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+
+ +

ご覧のとおり、 mozilla.org を登録することはできません。 Mozilla Foundation がすでに登録しているからです。

+ +

一方、 afunkydomainname.org を登録できるかどうか確認しましょう。

+ +
$ whois afunkydomainname.org
+NOT FOUND
+
+ +

ご覧のとおり、ドメインは (執筆時点で) whois データベースには存在しませんので、登録を依頼することができます。知っておくと良いでしょう！

+ +

ドメイン名の取得

+ +

プロセスは非常に簡単です。

+ +
    +
  1. 登録機関のウェブサイトにアクセスします。
    2. +
  2. 通常、「ドメイン名を取得する」という操作があります。それをクリックします。
    3. +
  3. フォームに必要事項をすべて記入してください。希望するドメイン名のスペルを間違えていないことを特に確認してください。支払いが済んだら、手遅れです。
    4. +
  4. 登録機関は、ドメイン名が正しく登録されたことを知らせます。数時間以内に、すべての DNS サーバーがあなたの DNS 情報を受信するでしょう。
    5. +
+ +
+

メモ: この過程で、登録機関は現実世界の住所を尋ねます。国によっては、有効な住所を提供できないと登録機関がドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。

+
+ +

DNS の更新

+ +

DNS データベースは世界中のすべての DNS サーバーに格納されており、これらのサーバーはすべて「権威ネームサーバー」または「トップレベル DNS サーバー」と呼ばれるいくつかの特別なサーバーを参照しています。これらはシステムを管理する上司サーバーのようなものです。

+ +

登録機関が特定のドメインの情報を作成または更新するたびに、すべての DNS データベース内で情報を更新する必要があります。指定されたドメインについて知っている DNS サーバーはそれぞれ、しばらく情報を保持し、その後で情報を自動的に無効化して更新します (DNS サーバーが権威サーバーに照会し、そこから更新された情報を取得します)。したがって、このドメイン名について知っている DNS サーバーが最新の情報を入手するには時間がかかります。

+ +

DNS リクエストはどのように機能するのか

+ +

すでに見たように、ブラウザーにウェブページを表示したい場合は、 IP アドレスよりもドメイン名を入力する方が簡単です。プロセスを見てみましょう。

+ +
    +
  1. ブラウザーのロケーションバーに mozilla.org と入力してください。
    2. +
  2. ブラウザーは、このドメイン名で識別される IP アドレスを (ローカル DNS キャッシュを使用して) すでに認識しているかどうかをコンピューターに確認します。存在する場合、ドメイン名は IP アドレスに変換され、ブラウザーはウェブサーバーとコンテンツをネゴシエートします。話は終わりです。
    3. +
  3. どの IP が mozilla.org の名前の背後にあるのかわからない場合は、DNS サーバーに問い合わせます。DNS サーバーの役割は、登録されている各ドメイン名に一致する IP アドレスをコンピューターに通知することです。
    4. +
  4. コンピューターがリクエストされた IP アドレスを認識したので、ブラウザーはウェブサーバーとコンテンツをネゴシエートできます。
    5. +
+ +

Explanation of the steps needed to obtain the result to a DNS request

+ +

次のステップ

+ +

さて、私たちはプロセスとアーキテクチャについて多くのことを話しました。そろそろ次に進みましょう。

+ + diff --git a/files/ja/learn/common_questions/what_is_a_url/index.html b/files/ja/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..433ead1fa4 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,159 @@ +--- +title: URL とは何か +slug: Learn/Common_questions/What_is_a_URL +tags: + - Infrastructure + - URL + - urls + - インフラ + - リソース + - 初心者 +translation_of: Learn/Common_questions/What_is_a_URL +--- +
+

この記事では Uniform Resource Locators (URL) について説明し、その内容と構造を説明します。

+
+ + + + + + + + + + + + +
前提知識:まずインターネットの仕組み、ウェブサーバーとは何か、および ウェブ上のリンクの背後にある概念を知る必要があります。
目的:URL の内容とウェブ上での URL の仕組みを学習します。
+ +

概要

+ +

URL は{{Glossary("Hypertext", "ハイパーテキスト")}}や {{Glossary("HTTP")}} とともに、ウェブの重要な概念の一つです。{{Glossary("Browser", "ブラウザー")}}がウェブ上の公開されたリソースを取得するために使用するメカニズムです。

+ +

URL は Uniform Resource Locator の略です。URL はウェブ上の特定の一意のリソースのアドレスにすぎません。理論的には、それぞれ有効な URL は一意のリソースを指しています。そのようなリソースは HTML ページ、 CSS 文書、画像などである可能性があります。実際には一部例外もあります。最も一般的なものは、もはや存在しないリソースや移動したリソースを指す URL です。URL で表されるリソースと URL 自体はウェブサーバーによって処理されるため、ウェブサーバーの所有者がそのリソースとその関連 URL を慎重に管理する必要があります。

+ +

アクティブラーニング

+ +

アクティブラーニングはまだありません。協力してください。

+ +

より深く

+ +

基本: URL の解剖

+ +

URL の例を次に示します。

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL
+ +

これらの URL のいずれかをブラウザーのアドレスバーに入力して、関連するページ (リソース) をロードするように指示することができます。

+ +

URL はさまざまな部分で構成されていますが、必須のものと任意のものもあります。次の URL を使用して最も重要な部分を見てみましょう。

+ +
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
+ +
+
プロトコル
+
http はプロトコルです。 URL の最初の部分は、ブラウザーが使用するプロトコルを示します。プロトコルとは、コンピューターネットワークを介してデータを交換または転送するための設定方法です。通常、ウェブサイトの場合は HTTP プロトコルまたはそのセキュアバージョンの HTTPS です。ウェブにはこれらの2つのうちの1つが必要ですが、ブラウザーは mailto: (メールクライアントを開くため) や ftp: などの他のプロトコルを扱う方法も知っていますので、そのようなプロトコルを見ても驚かないでください。
+
ドメイン名
+
www.example.com はドメイン名です。リクエストされるウェブサーバーを示します。他にも {{Glossary("IP address", "IP アドレス")}} を直接使用することも可能ですが、あまり便利ではないため、ウェブ上では頻繁に使用されることはありません。
+
ポート番号
+
:80 はポート番号です。これはウェブサーバー上のリソースにアクセスするために使用される技術的な「ゲート」を示します。ウェブサーバーが HTTP プロトコルの標準ポート (HTTP の場合は80、 HTTPS の場合は443) を使用してそのリソースへのアクセスを許可する場合、通常は省略されます。それ以外の場合は必須です。
+
ファイルへのパス
+
/path/to/myfile.html は、ウェブサーバー上のリソースへのパスです。初期のウェブでは、このようなパスはウェブサーバー上の物理的なファイルの場所を表していました。今日ではほとんどの場合、物理的なものではなくウェブサーバーによって処理される抽象的なものです。
+
引数
+
?key1=value1&key2=value2 は、ウェブサーバーに提供される追加の引数です。これらの引数は & 記号で区切られたキー/値のペアのリストです。ウェブサーバーは、リソースを返す前にこれらの引数を使用して追加の処理を行うことができます。各ウェブサーバーには引数に関する独自のルールがありますので、特定のウェブサーバーが引数を処理するかどうかを確認する確実な方法は、ウェブサーバーの所有者に問い合わせることだけです。
+
アンカー
+
#SomewhereInTheDocument は、リソース自体の別の部分へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表し、ブラウザーにそのブックマークされた場所にあるコンテンツを表示するための指示を与えます。たとえば、 HTML 文書では、ブラウザーはアンカーが定義されている位置までスクロールします。ビデオやオーディオ文書では、ブラウザーはアンカーが表す時刻に移動しようとします。 # の後の部分はフラグメント識別子とも呼ばれ、リクエストとともにサーバーに送信されることはありません。
+
+ +

{{Note('URL に関する他の部分と規則もありますが、それらは通常のユーザーやウェブ開発者には関係ありません。これについて心配する必要はありません。完全に機能する URL を構築して使用するためにそれらを知る必要はありません。')}}

+ +

URL を通常の郵送先住所のように考えるといいかもしれません。プロトコルは、使用したい郵便サービスを表し、ドメイン名は都市または町であり、ポート番号は郵便番号のようなものです。パスは郵便物が配信される建物を表します。引数は建物内の部屋番号などの追加情報を表します。最後に、アンカーは郵便物の宛先に当たる実際の人物を表します。

+ +

URL の使い方

+ +

ブラウザーのアドレスバーの中に正しく URL を入力すれば、それに対応するリソースを得ることができます。しかし、これは氷山の一角にすぎません。

+ +

後で説明する {{Glossary("HTML")}} 言語では、 URL を幅広く使用しています。

+ + + +
+

メモ: <script>, <audio>, <img>, <video> を使用する場合など、ページの一部としてリソースを読み込む URL を指定する場合は、HTTP と HTTPS の URL のみを使用してください。たとえば FTP を使用しても、特に安全になることはなく、、多くのブラウザーでは対応していません。

+
+ +

{{Glossary("CSS")}} や {{Glossary("JavaScript")}} などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。

+ +

絶対 URL と相対 URL

+ +

上記で見たものは絶対 URL と呼ばれていますが、相対 URL と呼ばれるものもあります。その違いが何を意味するのかをもっと詳しく調べてみましょう。

+ +

URL の必須部分は、その URL が使用されているコンテキストによって大きく異なります。ブラウザーのアドレスバーでは、 URL にはコンテキストがありません。そのため、上で見たように、完全 (または絶対) URL を指定する必要があります。プロトコル (ブラウザーは既定で HTTP を使用します) やポート番号 (対象となるウェブサーバーが通常以外のポートを使用している場合にのみ必要) を含める必要はありませんが、 URL の他の部分はすべて必要です。

+ +

HTML ページ内など、文書内で URL が使用されている場合は状況が少し異なります。ブラウザーはすでに文書自身の URL を持っているので、この情報を文書内で利用される URL の欠けている部分を補うために利用することができます。絶対 URL と相対 URL は、 URL のパスの部分を見るだけで区別することができます。 URL のパスの部分が "/" の文字で始まっていれば、ブラウザーは現在の文書で指定されているコンテキストを参照せずに、サーバーの最上位のルートからそのリソースを取得します。

+ +

これを明確にするためにいくつかの例を見てみましょう。

+ +

絶対 URL の例

+ +
+
完全 URL (以前に使用したものと同じ)
+
+ 
https://developer.mozilla.org/en-US/docs/Learn
+
+
暗黙のプロトコル
+
+ 
//developer.mozilla.org/en-US/docs/Learn
+ +

この場合、ブラウザーはその URL をホストしている文書を読み込むために使用されたものと同じプロトコルで、その URL を呼び出します。

+
+
暗黙のドメイン名
+
+ 
/en-US/docs/Learn
+ +

これは、 HTML 文書内の絶対 URL の最も一般的な使用例です。ブラウザーは、その URL をホストしている文書を読み込むために使用されたものと同じプロトコルおよび同じドメイン名を使用します。メモ: プロトコルを省略せずにドメイン名だけ省略することはできません。

+
+
+ +

相対 URL の例

+ +

次の例をよく理解するために、これらの URL が https://developer.mozilla.org/en-US/docs/Learn という URL にある文書内から呼び出されると仮定しましょう。

+ +
+
サブリソース
+
+ 
Skills/Infrastructure/Understanding_URLs
+
+ URL が / で始まっていないので、ブラウザーは現在のリソースを含んでいるディレクトリのサブディレクトリでその文書を見つけようとします。そのため、この例では本当に達したい URL である https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs に到達します。
+
ディレクトリツリーを遡る
+
+ 
../CSS/display
+ +

この場合、 UNIX ファイルシステムの世界から継承された ../ の表記規則を使用して、ブラウザーに1つのディレクトリから上に移動したいことを伝えます。つまり、 https://developer.mozilla.org/en-US/docs/Learn/../CSS/display という URL にアクセスしたいわけで、これは https://developer.mozilla.org/en-US/docs/CSS/display のように単純化できます。

+
+
+ +

セマンティック URL

+ +

URL はとても技術的な香りがするにもかかわらず、人間が読めるウェブサイトの入口を表します。覚えることができ、誰でもブラウザーのアドレスバーに入力することができます。人々はウェブの中核にいるので、セマンティック URL と呼ばれるものを構築することがベストプラクティスと考えられています。セマンティック URL は、技術的な知識に関係なく、誰でも理解できる固有の意味を持つ単語を使用します。

+ +

言語的セマンティックはもちろんコンピューターとは無関係です。おそらくランダムな文字を組み合わせたように見える URL を見たことがあるでしょう。しかし、人間が読める URL を作成することには多くの利点があります。

+ + + +

次のステップ

+ + diff --git a/files/ja/learn/common_questions/what_is_a_web_server/index.html b/files/ja/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..1278ee5d38 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,119 @@ +--- +title: Web サーバとは +slug: Learn/Common_questions/What_is_a_web_server +tags: + - Beginner + - インフラ +translation_of: Learn/Common_questions/What_is_a_web_server +--- +
+

この記事では、Webサーバとは何か、Webサーバの仕組み、なぜWebサーバが重要なのかを復習します。

+
+ + + + + + + + + + + + +
学習の前提:すでにインターネットの仕組みを知っており、Webページ、Webサイト、Webサーバ、検索エンジンの違いを理解していること。
学習の目的:Webサーバとは何かを学び、その仕組みに関して全般的な理解すること。
+ +

概要

+ +

「Webサーバ」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。

+ +
    +
  1. ハードウェアの観点では、Webサーバとは、WebサーバソフトウェアとWebサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、Webに接続された他の端末と物理的なデータ交換に対応しています。
    2. +
  2. ソフトウェアの観点では、Webサーバとは、ホストにあるファイルに対する、Webユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は HTTP サーバです。 HTTP サーバは {{Glossary("URL")}} (Webアドレス) および {{Glossary("HTTP")}} (ブラウザーがWebページを閲覧するためのプロトコル) を理解するソフトウェアのことです。格納しているWebサイトのドメイン名 (mozilla.org など) を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。
    3. +
+ +

最も基本的な水準では、ブラウザーはWebサーバが保持しているファイルが必要になったらいつでも、 HTTP でファイルをリクエストします。リクエストが正しいWebサーバ (ハードウェア) に届くと、 HTTP サーバ (ソフトウェア) がリクエストを受け付け、リクエストされた文書を探し (ない場合は 404 レスポンスが返される)、ブラウザーに HTTP を通して送り返します。

+ +

HTTP を通したクライアント/サーバー接続の基本的な説明

+ +

Webサイトを公開するには、静的または動的Webサーバが必要です。

+ +

静的Webサーバ、はスタックとも呼ばれますが、コンピューター (ハードウェア) と HTTP サーバ (ソフトウェア) から構成されます。サーバが保持しているファイルをブラウザーへ「そのまま」送るので、「静的」と呼ばれます。

+ +

動的Webサーバは、静的Webサーバと追加のソフトウェアからなります。追加ソフトウエアは、一般的にはアプリケーションサーバとデータベースからなります。アプリケーションサーバが、 保持しているファイルを変更してから、HTTP サーバを通してブラウザーに送信するので「動的」と呼ばれます。

+ +

例えば、ブラウザーで見ることができる最終的なWebページを生成するために、アプリケーションサーバはデータベースからのコンテンツで HTML のテンプレートを埋めることがあります。 MDN やウィキペディアのようなサイトは非常に多くのWebページを持っていますが、実際の HTML 文書が存在するわけではなく、巨大なデータベースとわずかな HTML テンプレートのみが存在しているのです。この構成をとることで、より速く、より簡単にコンテンツを保守したり配信したりすることができます。

+ +

アクティブラーニング

+ +

まだアクティブラーニングはありません。ご協力をお願いします。

+ +

より深く学ぶ

+ +

すでに述べたとおり、Webページを呼び出すために、ブラウザーはWebサーバにリクエストを送信し、Webサーバは自身のストレージスペースからリクエストされたファイルを探し始めます。ファイルを見つけると、サーバはファイルを読み込み、必要に応じて処理を行い、ブラウザーに送信します。それらのプロセスを詳細に見てみましょう。

+ +

ファイルの格納

+ +

Webサーバは最初に、Webサイトの HTML 文書およびその関連資産である画像、 CSS スタイルシート、 JavaScript ファイル、フォント、動画などのファイルを格納する必要があります。

+ +

技術的には、Webサーバとは別のコンピューターにこれらのファイルをすべて保持するようにもできます。しかし、次のような理由で、専用のWebサーバにすべてを格納したほうがはるかに便利です。

+ + + +

これらすべての理由から、良いホスティングのプロバイダーを探すことは、Webサイトを構築する上で重要な部分です。様々なサービス会社が提供するものを探し、ニーズや予算に合う一つを選択しましょう (無料から月当たり数千ドルまでのサービスがあります)。詳しくはこの記事にあります。

+ +

Webのホスティングサービスを構成したら、後はWebサーバにファイルをアップロードするだけです。

+ +

HTTP による通信

+ +

次に、Webサーバは {{Glossary("HTTP")}} (Hypertext Transfer Protocol) への対応を提供しています。名前にある通り、 HTTP はコンピューター間でハイパーテキスト (リンクされたWeb文書) を転送する方法を定義しています。

+ +

{{Glossary("Protocol", "プロトコル")}}は二台のコンピューター間で通信をする規則を設定します。 HTTP はテキストによる、ステートレス（下記参照）のプロトコルです。

+ +
+
テキストによる
+
すべてのコマンドがプレーンテキストで、人間が読める形です。
+
ステートレス
+
サーバもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバが必要になります。 (以降の記事で様々な技術を説明します。)
+
+ +

HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で技術記事で説明します。これからは、以下のようなことに気を付けてください。

+ + + +

エラーページの例として、 MDN の 404 ページWebサーバにおいて、 HTTP サーバは受信したリクエストを処理してレスポンスを返す責任があります。

+ +
    +
  1. リクエストを受信すると、 HTTP サーバは最初にリクエストされた URL が既存のファイルに一致するかどうかをチェックします。
    2. +
  2. もしあれば、Webサーバはブラウザーにファイルを送り返します。なければ、アプリケーションサーバが必要なファイルを作成します。
    3. +
  3. どちらの処理もできない場合、Webサーバは {{HTTPStatus("404", "404 Not Found")}} としてよく知られているエラーメッセージをブラウザーに返します。 (このエラーはよく起こるので、多くのWebデザイナーが、404 エラーページのデザインに時間を割くことになります。)
    4. +
+ +

動的コンテンツと静的コンテンツ

+ +

大まかに言って、サーバは静的コンテンツと動的コンテンツのどちらかを提供することができます。「静的」は「そのまま提供する」という意味です。静的なWebサイトは構築するのが最も簡単なので、最初に静的サイトを作成することをお勧めします。

+ +

「動的」はサーバがコンテンツを処理したり、データベースからその場で作成したりすることを意味します。この方法は、柔軟なページを提供できる反面、技術的難易度が高く、Webサイトの構築が複雑になります。

+ +

例を挙げれば、今あなたが見ているページがそれです。この Web サーバには、データベースから記事コンテンツを取り出し、整形し、HTML テンプレート内に配置し、結果を送信するためのアプリケーションサーバがあります。この場合、アプリケーションサーバは Kuma と呼ばれ、 (Django フレームワークを使用した) Python 言語で構築されています。 Mozilla チームは Kuma を MDN の特定のニーズのために作成しましたが、他のたくさんの技術で構築された同様のアプリケーションがたくさんあります。

+ +

アプリケーションサーバは多くの種類があり、特定のサーバを選ぶのはとても難しいといえます。あるものは、ブログ、Wiki、 E ショップなどに特殊化しています。いっぽう、 {{Glossary("CMS")}} (Content Management System) と呼ばれるものはより一般的です。動的Webサイトを構築するときは、ニーズに合ったツールの選択に時間をかけましょう。Webサーバプログラミングを学習しようとするのでなければ (これ自体はエキサイティングな領域ですが)、独自のアプリケーションサーバを作成する必要はありません。それは{{Interwiki("wikipedia", "車輪の再発明")}}のような、無用な努力になるからです。

+ +

次のステップ

+ +

Web サーバのことがよく分かったら、次のステップに進みましょう。

+ + diff --git a/files/ja/learn/common_questions/what_is_accessibility/index.html b/files/ja/learn/common_questions/what_is_accessibility/index.html new file mode 100644 index 0000000000..2790e3bcd2 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_accessibility/index.html @@ -0,0 +1,90 @@ +--- +title: What is accessibility? +slug: Learn/Common_questions/What_is_accessibility +translation_of: Learn/Common_questions/What_is_accessibility +--- +
+

この記事はwebアクセシビリティの背景にある基本的なコンセプトを紹介します。

+
+ + + + + + + + + + + + +
前提条件:なし
対象:アクセスビリティが何なのか、なぜ重要なのかを学ぶ
+ +

概要

+ +

物理的、技術的制限のせいで、たぶんあなたの訪問者はあなたの望むような体験をあなたのウェブサイトからできません。 この記事では一般的なアクセシビリティの原則や平易ないくつかの規則を示します。

+ +

能動的学習

+ +

まだ可能な能動的学習がありません。 Please, consider contributing.

+ +

深く掘っていく

+ +

アクセスビリティ: 一般的な原則

+ +

まず、我々は負の制限に伴うアクセスビリティに関連付けられなければならないだろう。このビルはアクセスブルでなければならず、そうなのでトイレのサイズやエレベーターの設置場所のこれらの規制に従わなければならない。

+ +

それはアクセスビリティで考えられる狭い方法である。人々に委ねたり、より多くの顧客に出す、びっくりするような方法を考えてみて下さい。 ブラジルにいる人々に英語のサイトをどのように出しますか？ スマートフォンのブラウザが重く、大きなデスクトップモニターにデザインされたウェブサイトが乱雑であったり、帯域が制限されていないことなどできますか？それらは別の場所に行くべきでしょう。一般的にターゲット顧客の観点から我々のプロダクトを考え、変化を採用しなければなりません。従って、アクセスビリティなのです。

+ +

ウェブアクセシビリティ

+ +

ウェブの特定の文脈において、アクセシビリティは障害、場所、技術的な制約、他の事情などにも関わらずコンテンツからの利益を誰もが得られることを意味します。 

+ +

ビデオについて考えてみましょう

+ +
+
聴覚障害
+
ビデオを聴覚障害の人はどのようにみるのでしょうか？  字幕を提供しなくてはなりませんし、 —　もしくはそうであってもより良いのはフルテキストの写しです。
+
もしくはその人に適応したボリュームに調整してあげることができます。
+
視覚障害
+
もう一度、ビデオを上映することなしにテキストの写しを説明してあげたり、音声説明を提供することができます。 (ビデオで何が起こっているか述べる画面外の音声)
+
中断する能力
+
ユーザーがビデオで何か理解できない事態に見舞われるかもしれません。ビデオを止めて、字幕や情報のプロセス読むでしょう。 
+
キーボードの能力
+
ビデオの内外のタブを使うことで、仕掛けなしにビデオの再生中断をします。
+
+ +

ウェブアクセスビリティの基本

+ +

いくつかの必要性を基本的なウェブアクセスビリティは含みます。

+ + + +

そして、今、始めよう。

+ +

アクセスビリティのチャンピオンたち

+ +

1999年以来, the {{Glossary("W3C")}} は{{Glossary("WAI","Web Accessibility Initiative")}}と呼ばれるグループを動かしてきた。このグループはガイドライン、マテリアル、国際的なリソースを通じてアクセスビリティを促進してきた。

+ +

より詳細には

+ +

以下を参照して下さい:

+ + + +

次のステップ

+ +

アクセスビリティはウェブデザインや技術構造の両方にインパクトを与えることができます。

+ + diff --git a/files/ja/learn/common_questions/what_software_do_i_need/index.html b/files/ja/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..9b042b3c06 --- /dev/null +++ b/files/ja/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,222 @@ +--- +title: Web サイトを作成するのにどんなソフトウェアが必要か？ +slug: Learn/Common_questions/What_software_do_I_need +tags: + - NeedsActiveLearning + - WebMechanics + - 初心者 +translation_of: Learn/Common_questions/What_software_do_I_need +--- +
+

この記事では、Webサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。

+
+ + + + + + + + + + + + +
学習の前提:Web ページ、Web サイト、Web サーバ、検索エンジンの違いを理解しておいてください。
学習の目的:Web サイトを編集、アップロード、閲覧するときに必要なソフトウェアについて学びます。
+ +

概要

+ +

Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。

+ +

次のようなツールが必要です。

+ + + +

ほぼすべてのオペレーティングシステムには、デフォルトでテキストエディタとブラウザが含まれており、Web サイトの閲覧に使用できます。結果的には、通常はファイルを Web サーバに転送するためのソフトウェアを入手するだけで済みます。

+ +

アクティブラーニング

+ +

実習はまだありません。あなたの力をお貸しください。

+ +

より深く掘り下げる

+ +

Webページの作成と編集

+ +

Webサイトを作成したり編集したりするために、テキストエディターが必要です。テキストエディターは、形式を持たないテキストファイルの作成や修正を行います。 {{Glossary("RTF")}} のような他の形式では、太字や下線のような書式を追加することができます。しかし、これらの形式はWebページの作成には適していません。Webサイトを構築する際に幅広い作業に使用するので、どのテキストエディターを使用するかを考えておきましょう。

+ +

すべてのデスクトップ OS には、基本的なテキストエディターが付属しています。これらのエディターはすべて簡単なものですが、Webページのコーディングのための特別な機能は持っていません。そこで、お望みなら、利用可能なサードパーティのツールがたくさんあります。サードパーティのテキストエディターには、構文の色付け、自動補完、セクションの折りたたみ、コード検索などの便利な追加機能がよくついています。エディターの簡単なリストを挙げておきます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OS内蔵エディターサードパーティのエディター
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS + +
+ +

こちらは、高度なテキストエディターのスクリーンショット例です。

+ +

Notepad++ のスクリーンショット

+ +

こちらは、オンラインのテキストエディターのスクリーンショット例です。

+ +

ShiftEdit のスクリーンショット

+ +

Web上へのファイルのアップロード

+ +

Web サイトを公開する準備が整ったら、Web ページを Web サーバにアップロードする必要があります。さまざまなプロバイダからサーバ上のスペースを購入できます (Web で何かをするためにどのくらいコストがかかりますか？を参照)。どのプロバイダを使用するかが決まったら、プロバイダは通常、SFTP URL、ユーザ名、パスワード、およびそれらのサーバへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、RSync や Git/GitHub のような他のアップロードシステムが普及し始めていることを覚えておいてください。

+ +
+

メモ: FTP は本質的に安全ではありません。ホスティングプロバイダが安全な接続、例えば  SSH を介した SFTP または RSync の使用を許可していることを確認してください。

+
+ +

Web サーバを作成する際、Web サーバにファイルをアップロードすることは非常に重要なステップなので、別の記事で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OSFTP ソフトウェア
Windows + + + +
Linux + +
Mac OS + +
Chrome OS + +
+ +

Webサイトの閲覧

+ +

ご存知の通り、Webサイトを閲覧するためにはWebブラウザが必要です。 私用でブラウザ使う時には、たくさんのブラウザの選択肢がありますが、あなたがWebサイトを開発している時には、あなたのWebサイトがほとんどの人々のために働くことを確認するために、少なくとも以下のブラウザで動作確認、テストをする必要があります。

+ + + +

特定のグループ (技術プラットフォームや国など) を対象にする場合は、追加で Opera, Konqueror, UC Browser などブラウザでサイトをテストする必要があります。

+ +

しかし、ブラウザによっては特定のオペレーティングシステムでしか動作しないものがあるため、テストをすることは複雑になります。 Apple Safari は iOS と Mac OS 上で動作し、 Internet Explorer は Windows 上でのみ動作します。 Browsershots や Browserstack のようなサービスを利用するのが最善です。 Browsershots は、様々なブラウザで見た場合のWebサイトのスナップショットを提供します。 Browserstack は実際には仮想マシンへの完全なリモートアクセスを提供し、最も一般的な環境でサイトをテストすることができます。他にも、独自の仮想マシンをセットアップする方法もありますが、それにはいくらかの専門知識が必要です。 (もしこの方法を使うのであれば、 Microsoft は modern.ie　ですぐに使える仮想マシンを含む開発者のためのいくつかのツールを提供しています。)

+ +

是非、実際のデバイス、特に実際のモバイル機器でいくつかのテストを実行してください。モバイル機器のシミュレーションは、進化中の新技術であり、デスクトップのシミュレーションよりも信頼性が低いです。もちろん、モバイル機器はお金を必要としますので、 Open Device Lab の取り組みを見てみることをお勧めします。多くのプラットフォームでテストする場合は、過度な出費を抑えて機器を共有することもできます。

+ +

次のステップ

+ + -- cgit v1.2.3-54-g00ecf