[インデックス 12354] ファイルの概要

このコミットは、Go言語の公式サイトのフロントページのデザインとナビゲーションメニューの変更に関するものです。具体的には、以下の3つのファイルが変更されています。

doc/root.html: ウェブサイトのトップページのHTML構造を定義するファイル。
doc/style.css: ウェブサイトのスタイルを定義するCSSファイル。
lib/godoc/godoc.html: godoc ツールが生成するドキュメントページの共通ヘッダー部分のHTMLテンプレート。

コミット

コミットハッシュ: d1e726c58325e9c9f40162a436decab40d77656a
作者: Andrew Gerrand adg@golang.org
コミット日時: Mon Mar 5 10:34:22 2012 +1100
コミットメッセージ: doc: change menu, tweak front page

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/d1e726c58325e9c9f40162a436decab40d77656a

元コミット内容

doc: change menu, tweak front page

R=golang-dev, kyle, r
CC=golang-dev
https://golang.org/cl/5729052

変更の背景

このコミットは、Go言語公式サイトのユーザーエクスペリエンスと情報アーキテクチャを改善することを目的としています。主な変更点は以下の通りです。

フロントページのレイアウト調整: トップページの「Goについて」や「Goのダウンロード」といった主要な情報ブロックの配置が変更され、視覚的なバランスと情報の流れが改善されています。特に、HTML要素のID (#left, #right) からクラス (.left, .right) への変更は、より柔軟なCSSスタイリングと再利用性を可能にし、将来的なデザイン変更やレスポンシブデザインへの対応を見据えたものと考えられます。
ナビゲーションメニューの再編: サイト全体のナビゲーションがより明確で包括的になるように、メニュー項目が更新されています。「Learn」が「Documents」に、「Reference」が「References」に変更され、新たに「Packages」と「Help」が追加されました。これにより、ユーザーがGo言語のドキュメント、リファレンス、パッケージ情報、およびサポート情報をより簡単に見つけられるようになります。

これらの変更は、ウェブサイトの使いやすさを向上させ、訪問者がGo言語に関する必要な情報に迅速にアクセスできるようにするための継続的な取り組みの一環です。

前提知識の解説

Go言語 (Golang)

Goは、Googleによって開発されたオープンソースのプログラミング言語です。シンプルさ、信頼性、効率性を重視しており、特に並行処理に強みを持っています。ウェブサービス、ネットワークプログラミング、CLIツールなど、幅広い分野で利用されています。

Go公式サイト (golang.org)

golang.org はGo言語の公式ウェブサイトであり、言語のドキュメント、チュートリアル、ダウンロード、コミュニティ情報などが提供されています。このコミットは、この公式サイトのフロントエンド部分に直接影響を与えています。

HTML (HyperText Markup Language)

ウェブページの構造を定義するためのマークアップ言語です。見出し、段落、画像、リンクなど、ページのコンテンツを構成する要素を記述します。

CSS (Cascading Style Sheets)

HTMLで記述されたウェブページの見た目（スタイル）を定義するためのスタイルシート言語です。色、フォント、レイアウト、配置などを指定し、ウェブページを視覚的に魅力的にします。

HTMLの `id` 属性と `class` 属性

id 属性: HTML要素に一意の識別子を付与します。一つのHTMLドキュメント内で同じ id を持つ要素は一つしか存在できません。CSSでは # を使って選択します（例: #myElement { ... }）。JavaScriptから特定の要素を操作する際にもよく使われます。
class 属性: HTML要素に一つ以上のクラス名を付与します。複数の要素が同じクラス名を持つことができ、同じスタイルを適用したり、JavaScriptでまとめて操作したりする際に便利です。CSSでは . を使って選択します（例: .myClass { ... }）。

このコミットでは、レイアウト要素のスタイリングにおいて、より汎用性の高い class 属性への移行が行われています。これは、特定の要素にのみ適用される id よりも、複数の要素や異なるコンテキストで再利用可能な class を使用する方が、CSSの保守性や拡張性が向上するというウェブ開発のベストプラクティスに沿った変更です。

div#left と div#right のセレクタが、それぞれ div.left と div.right に変更されました。これにより、HTMLのクラス属性に対応するスタイルが適用されます。
div#heading の padding と font-size が調整され、ウェブサイトのヘッダー部分の見た目が微調整されました。
div#menu > input (検索ボックス) の width が 100px から 60px に縮小されました。

これらの変更は、新しいHTML構造と視覚的な調整に対応するためのものです。

`lib/godoc/godoc.html` の変更

godoc が生成するページのナビゲーションメニューが更新されました。

既存のメニュー項目が変更されました:
- Learn -> Documents
- Install (削除)
- Project -> The Project
- Reference -> References
新しいメニュー項目が追加されました:
- Packages (/pkg/ へのリンク)
- Help (/help/ へのリンク)

これにより、godoc で表示されるドキュメントページのナビゲーションが、公式サイト全体のナビゲーションと一貫性を持ち、より多くの情報源へのアクセスを提供します。

コアとなるコードの変更箇所

`doc/root.html`

--- a/doc/root.html
+++ b/doc/root.html
@@ -2,26 +2,7 @@
 	"Path": "/"
 }-->
 
-<div id="left" class="aboutcol">
-
-<div id="about">
-Go is an open source programming environment that makes it easy to build
-simple, reliable, and efficient software.
-</div>
-
-<div id="gopher"></div>
-
-<a href="/install/" id="start">
-<div class="big">Download Go</div>
-<div class="desc">
-Binary distributions available for<br>
-Linux, Mac OS X, Windows, and more.
-</div>
-</a>
-
-</div>
-
-<div id="right" class="learncol">
+<div class="left">
 
 <div id="learn">
 <div class="rootHeading">Try Go</div>
@@ -49,9 +30,28 @@ Hello, 世界
 
 </div>
 
+<div class="right">
+
+<div id="about">
+Go is an open source programming environment that makes it easy to build
+simple, reliable, and efficient software.
+</div>
+
+<div id="gopher"></div>
+
+<a href="/install/" id="start">
+<div class="big">Download Go</div>
+<div class="desc">
+Binary distributions available for<br>
+Linux, Mac OS X, Windows, and more.
+</div>
+</a>
+
+</div>
+
 <div style="clear: both"></div>
 
-<div id="left">
+<div class="left">
 
 <div id="video">
 <div class="rootHeading">Featured video</div>
@@ -61,7 +61,7 @@ Hello, 世界
 
 </div>
 
-<div id="right">
+<div class="right">
 
 <div id="blog">
 <div class="rootHeading">Featured articles</div>

`doc/style.css`

--- a/doc/style.css
+++ b/doc/style.css
@@ -118,8 +118,8 @@ table.dir td {
 div#heading {
 	float: left;
 	margin: 0 0 10px 0;
-	padding: 16px 0;
-	font-size: 26px;
+	padding: 21px 0;
+	font-size: 20px;
 	font-weight: normal;
 }
 div#heading a {
@@ -197,7 +197,7 @@ div#menu > a {
 div#menu > input {
 	position: relative;
 	top: 1px;
-	width: 100px;
+	width: 60px;
 	background: white;
 	color: #222;
 }
@@ -205,14 +205,14 @@ div#menu > input.inactive {
 	color: #999;
 }
 
-div#left {
+div.left {
 	float: left;
 }
-div#right {
+div.right {
 	float: right;
 }
-div#left,
-div#right {
+div.left,
+div.right {
 	width: 415px;
 }

`lib/godoc/godoc.html`

--- a/lib/godoc/godoc.html
+++ b/lib/godoc/godoc.html
@@ -20,10 +20,11 @@
 <form method="GET" action="/search">
 <div id="heading"><a href="/">The Go Programming Language</a></div>
 <div id="menu">
-<a href="/doc/">Learn</a>
-<a href="/install/">Install</a>
-<a href="/project/">Project</a>
-<a href="/doc/reference.html">Reference</a>
+<a href="/doc/">Documents</a>
+<a href="/ref/">References</a>
+<a href="/pkg/">Packages</a>
+<a href="/project/">The Project</a>
+<a href="/help/">Help</a>
 <input type="text" id="search" name="q" class="inactive" value="Search">
 </div>
 </form>

コアとなるコードの解説

`doc/root.html` の変更解説

このファイルでは、Go公式サイトのトップページの主要なコンテンツブロックの配置と、それらを囲む div 要素の属性が変更されています。

IDからクラスへの移行: 以前は id="left" と id="right" という一意のIDが使用されていましたが、これらが class="left" と class="right" というクラスに置き換えられました。この変更は、CSSの再利用性と柔軟性を高めるための典型的なウェブ開発のプラクティスです。IDはページ内で一度しか使用できないのに対し、クラスは複数の要素に適用できるため、異なるセクションや将来のレイアウト変更において、同じスタイルを簡単に適用できるようになります。
コンテンツブロックの再配置:
- 元々 id="left" にあった「Goについて」と「Goのダウンロード」のセクションが、新しい class="right" の div 内に移動しました。
- 元々 id="right" にあった「Goを試す」のセクションが、新しい class="left" の div 内に移動しました。この再配置により、ページの視覚的な階層と情報の提示順序が変更され、ユーザーが最初に目にする情報やその後の行動を促す要素が調整されています。

`doc/style.css` の変更解説

このCSSファイルは、doc/root.html のHTML構造の変更に合わせて、スタイリングルールを更新しています。

セレクタの更新: div#left と div#right というIDセレクタが、それぞれ div.left と div.right というクラスセレクタに置き換えられました。これにより、HTMLファイルで変更されたクラス属性を持つ div 要素に、以前と同じ（または調整された）フロートや幅のスタイルが適用されるようになります。これは、HTMLとCSSの整合性を保つために不可欠な変更です。
ヘッダーと検索ボックスのスタイリング調整:
- div#heading の padding が 16px 0 から 21px 0 に、font-size が 26px から 20px に変更されました。これにより、ヘッダーの垂直方向のスペースとテキストサイズが調整され、全体のデザインバランスが改善されています。
- div#menu > input (ナビゲーションメニュー内の検索ボックス) の width が 100px から 60px に縮小されました。これは、ナビゲーションバーのスペースを最適化し、他のメニュー項目とのバランスを取るための調整と考えられます。

`lib/godoc/godoc.html` の変更解説

このファイルは、godoc ツールが生成するドキュメントページの共通ヘッダー部分のHTMLテンプレートです。ここでの変更は、サイト全体のナビゲーションの一貫性を高めることを目的としています。

ナビゲーションリンクのテキストとURLの変更:
- Learn (/doc/) が Documents (/doc/) に変更されました。これは、より直接的で分かりやすい表現への変更です。
- Install (/install/) リンクが削除されました。これは、ダウンロードとインストールの情報がトップページに統合されたためか、あるいは別の場所で提供されるようになったためと考えられます。
- Project (/project/) が The Project (/project/) に変更されました。これも表現の調整です。
- Reference (/doc/reference.html) が References (/ref/) に変更されました。URLもより簡潔なものに更新されています。
新しいナビゲーションリンクの追加:
- Packages (/pkg/) へのリンクが追加されました。これは、Goの豊富なパッケージエコシステムへの直接的なアクセスを提供し、ユーザーがライブラリやツールを簡単に見つけられるようにします。
- Help (/help/) へのリンクが追加されました。これにより、ユーザーが困った際にサポートやFAQなどの情報にアクセスしやすくなります。

これらの変更は、Go公式サイトと godoc が提供するドキュメントのナビゲーションを統一し、ユーザーがGo言語に関するあらゆる情報に効率的にアクセスできるようにするための重要な改善です。

参考にした情報源リンク

HTML id 属性と class 属性の違い: https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id および https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
CSSセレクタ: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
Git Diffの読み方: https://git-scm.com/docs/git-diff (公式ドキュメント)
Gerrit Code Review: https://www.gerritcodereview.com/ (Goプロジェクトでコードレビューに使用されるシステム)
Go言語の歴史と開発プロセスに関する情報 (一般的な知識に基づく)
ウェブサイトのUI/UXデザインの一般的な原則 (一般的な知識に基づく)
Go言語の公式リポジトリの構造と慣習 (一般的な知識に基づく)

comemo