Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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

このコミットは、Go言語の公式ドキュメントツールであるgodocのユーザーインターフェースとデザインを大幅に刷新するものです。単なる表面的な変更に留まらず、ドキュメントの表示方法、ナビゲーション、全体的なユーザーエクスペリエンスを改善するための基盤を構築しています。特に、新しいCSSファイル（style.css）の導入と、既存のHTMLテンプレート（root.html, godoc.htmlなど）の構造変更を通じて、よりモダンでクリーンなデザインへの移行が図られています。このコミットは「完成品ではないが、さらなる開発を進めるための良いチェックポイント」とされており、godocの進化における重要な一歩を示しています。

コミット

commit d84de09e1d46efe6e0dc5edcbb6c30b02733aa70
Author: Andrew Gerrand <adg@golang.org>
Date:   Mon Feb 13 21:22:36 2012 +1100

    godoc: new design
    
    This is not the finished product,
    but a good checkpoint from which to
    proceed with further development.
    
    R=golang-dev, dsymonds, r
    CC=golang-dev
    https://golang.org/cl/5571061
---
 doc/all.css              | 222 --------------------------------
 doc/community.html       |  55 --------
 doc/contrib.html         |  63 +++++-----\n doc/docs.html            | 227 ++++++++++++++-------------------
 doc/frontpage.css        | 143 ---------------------\n doc/godocs.js            |  35 ++----\n doc/gopher/frontpage.png | Bin 0 -> 31610 bytes
 doc/gopher/ref.png       | Bin 0 -> 14576 bytes
 doc/install.html         |   3 +-\n doc/reference.html       |  40 ++++++\n doc/root.html            | 207 +++++++++++++++---------------\n doc/style.css            | 320 +++++++++++++++++++++++++++++++++++++++++++++++
 lib/godoc/godoc.html     | 105 ++++++++--------
 lib/godoc/package.html   |  54 ++++----\n src/cmd/godoc/godoc.go   |   2 +-\n 15 files changed, 676 insertions(+), 800 deletions(-)

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

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

元コミット内容

godoc: new design

This is not the finished product,
but a good checkpoint from which to
proceed with further development.

R=golang-dev, dsymonds, r
CC=golang-dev
https://golang.org/cl/5571061

変更の背景

このコミットが行われた2012年2月は、Go言語がまだ比較的新しい言語であり、そのエコシステムやツールが活発に開発されていた時期にあたります。godocはGo言語のドキュメンテーション生成・表示ツールとして非常に重要な役割を担っていましたが、初期のデザインは機能性を重視したものであり、視覚的な魅力やユーザーエクスペリエンスの面では改善の余地がありました。

変更の背景には、以下のような点が考えられます。

  • ユーザーエクスペリエンスの向上: godocはGo言語の学習者や開発者が頻繁に利用するツールであるため、より直感的で使いやすいインターフェースが求められていました。古いデザインは情報が詰め込まれており、視覚的な階層が不明瞭な部分がありました。
  • モダンなウェブデザインへの追従: 当時のウェブデザインのトレンドは、よりクリーンでミニマルな方向へと進化していました。godocもそれに合わせて、より現代的な外観と操作性を持つことが期待されました。
  • ブランドイメージの統一: Go言語全体のブランドイメージを統一し、プロフェッショナルで洗練された印象を与えるためにも、公式ツールのデザイン刷新は自然な流れでした。
  • 将来的な拡張性: 新しいデザインは、将来的に追加される可能性のある機能やコンテンツにも対応しやすい、より柔軟な構造を持つことを目指していたと考えられます。

このコミットは、単なる見た目の変更だけでなく、godocが提供する情報のアクセシビリティと理解度を高めるための戦略的な取り組みの一環として位置づけられます。

前提知識の解説

このコミットの変更内容を理解するためには、以下の前提知識が役立ちます。

  • Go言語: GoはGoogleによって開発されたオープンソースのプログラミング言語です。シンプルさ、効率性、並行処理のサポートが特徴です。
  • godocツール: godocはGo言語のソースコードからドキュメンテーションを生成し、ウェブブラウザで表示するためのツールです。Goのパッケージ、関数、型などの定義に記述されたコメントを解析し、整形されたHTMLとして出力します。開発者はgodocを使って、ローカルでGoの標準ライブラリや自身のプロジェクトのドキュメントを閲覧できます。
  • HTML (HyperText Markup Language): ウェブページの構造を定義するためのマークアップ言語です。このコミットでは、doc/root.htmlやlib/godoc/godoc.htmlなどのHTMLファイルが変更されており、ページのレイアウトやコンテンツの配置が再構築されています。
  • CSS (Cascading Style Sheets): ウェブページの見た目（色、フォント、レイアウトなど）を定義するためのスタイルシート言語です。このコミットの主要な変更点の一つは、古いdoc/all.cssやdoc/frontpage.cssを削除し、新しいdoc/style.cssを導入している点です。これにより、godocの全体的な視覚デザインが根本的に変更されています。
  • JavaScript: ウェブページに動的な機能を追加するためのプログラミング言語です。doc/godocs.jsファイルが変更されており、ドキュメント内の目次生成（TOC: Table of Contents）や検索機能など、ユーザーインタラクションに関連するスクリプトが更新されています。
  • Google Closure Library (推測): godocs.js内のbindEventやgodocs_onloadといった関数名、およびgoogle.feeds.Feedの利用から、Googleが開発したJavaScriptライブラリであるGoogle Closure Libraryの一部またはその影響を受けたコードが使用されている可能性があります。これは、当時のGoogleプロジェクトにおける一般的な開発スタイルでした。
  • Goのテンプレートエンジン: lib/godoc/godoc.htmlやlib/godoc/package.htmlは、Go言語のhtml/templateパッケージ（または類似のテンプレートエンジン）によって処理されるテンプレートファイルです。これらはGoのコードから動的にコンテンツを埋め込むために使用されます。{{with .Title}}や{{printf "%s" .Content}}のような構文は、Goのテンプレート構文を示しています。
  • gopher画像: Go言語のマスコットであるGopherの画像ファイル（frontpage.png, ref.png）が追加されており、新しいデザインに視覚的な要素として組み込まれています。

これらの技術要素が組み合わさることで、godocのウェブインターフェースが構築され、今回のデザイン刷新が実現されています。

技術的詳細

このコミットは、godocのフロントエンドにおける大規模な再構築を示しています。主な技術的変更点は以下の通りです。

  1. CSSの再編と刷新:

    • doc/all.cssとdoc/frontpage.cssという既存の主要なCSSファイルが削除されました。これらは、以前のgodocの全体的なスタイルとフロントページの特定のスタイルを定義していました。
    • 新たにdoc/style.cssが追加されました。このファイルは320行にわたる大規模なもので、godocの新しいデザインの基盤となるスタイルを定義しています。新しいCSSは、よりモダンなフォント（Helvetica, Arial, sans-serif）、クリーンなレイアウト、改善された余白、角丸（border-radius）、シャドウ（box-shadow）など、当時のウェブデザインのトレンドを取り入れています。特に、#topbar, #page, #left, #rightといった新しいIDが導入され、ページの構造がより明確に定義されています。
    • 古いCSSにあった#container, #topnav, #nav-mainなどの要素が削除され、新しい構造に置き換えられています。

  2. HTMLテンプレートの構造変更:

    • doc/root.html（サイトのトップページ）とlib/godoc/godoc.html（一般的なドキュメントページ）が大幅に修正されました。これらのファイルは、新しいCSSとJavaScriptの構造に合わせて、HTML要素のID、クラス、配置が変更されています。
    • 特にdoc/root.htmlでは、従来の2カラムレイアウトから、より視覚的に魅力的な「Try Go」（コードエディタと実行結果）、「Featured video」、「Featured articles」といったセクションが導入されています。これにより、訪問者がGo言語に触れ、その魅力を体験しやすくなっています。
    • lib/godoc/godoc.htmlでは、all.cssからstyle.cssへのリンク変更、#containerや#topnavといった古い構造の削除、新しい#topbarと#page構造の導入が行われています。これにより、すべてのgodocページで統一された新しいヘッダーとフッターが適用されます。
    • lib/godoc/package.htmlでは、パッケージファイルの表示方法が変更され、dl（定義リスト）からh4とp要素に再配置されています。また、サブディレクトリの表示テーブルのクラス名がlayoutからdirに変更され、スタイルが調整されています。

  3. JavaScriptの更新:

    • doc/godocs.jsが修正され、godocs_addTopLinks()関数が削除されました。この関数は、各h2見出しに「[Top]」リンクを追加するものでしたが、新しいデザインでは不要と判断されたか、別の方法でナビゲーションが提供されるようになったため削除されました。
    • godocs_generateTOC()関数にseenNavというフラグが追加され、目次生成のロジックが調整されています。これにより、ナビゲーション要素の後に続く見出しのみが目次として考慮されるようになっています。
    • Google Feed API (google.feeds.Feed) を利用して、Goブログの最新記事をトップページに表示する機能が追加されました。

  4. 新しいコンテンツとリソースの追加:

    • doc/gopher/frontpage.pngとdoc/gopher/ref.pngという2つの新しいGopher画像が追加されました。これらは新しいデザインの視覚的なアクセントとして使用されています。
    • doc/reference.htmlという新しいHTMLファイルが追加され、Go言語の主要なリファレンス（パッケージドキュメント、コマンドドキュメント、言語仕様など）へのリンクがまとめられています。これは、ユーザーが重要な情報を素早く見つけられるようにするための改善です。
    • doc/community.htmlとdoc/docs.htmlも大幅に修正され、コンテンツの再編成と新しいデザインへの適応が行われています。特にdoc/docs.htmlでは、Go言語の紹介文がより詳細になり、学習リソースや記事の構成が変更されています。

  5. src/cmd/godoc/godoc.goの変更:

    • godocコマンドのGoソースコードにおいて、showTimestampsフラグのデフォルト値がtrueからfalseに変更されました。これは、ディレクトリリストにタイムスタンプを表示するかどうかの設定で、新しいデザインではデフォルトで非表示にする方針になったことを示唆しています。

これらの変更は、godocの見た目と機能性を大きく向上させ、より現代的で使いやすいドキュメンテーションツールへと進化させるための包括的な取り組みです。

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

このコミットにおけるコアとなるコードの変更箇所は、主に新しいデザインの基盤となるCSSファイルと、そのCSSを適用するためのHTMLテンプレートの構造変更です。

1. 新しいスタイルシート doc/style.css の追加

これは完全に新規追加されたファイルであり、godocの新しい見た目を定義する中心的な役割を担っています。

body {
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}
pre, code {
	font-family: Menlo, monospace;
	font-size: 14px;
}
/* ... 既存のall.cssやfrontpage.cssから大きく変更された、新しいレイアウト、色、フォント、余白などの定義が続く ... */
#topbar {
	background: #E0EBF5;
}
#page,
#topbar .container {
	clear: both;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}
#left {
	float: left;
}
#right {
	float: right;
}
#left, #right {
	width: 415px;
}
/* ... その他、新しいデザイン要素（ボタン、コードブロック、ブログ表示など）のスタイル定義 ... */

2. メインテンプレート lib/godoc/godoc.html の変更

このファイルは、すべてのgodocページに共通のヘッダーとフッター、そしてコンテンツ領域を定義しています。古いCSSの参照を削除し、新しい構造に置き換えています。

--- a/lib/godoc/godoc.html
+++ b/lib/godoc/godoc.html
@@ -1,72 +1,73 @@
 <!DOCTYPE html>\n <html>\n <head>\n-<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n+<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n {{with .Title}}\n   <title>{{html .}} - The Go Programming Language</title>\n {{else}}\n   <title>The Go Programming Language</title>\n {{end}}\n-<link rel=\"stylesheet\" href=\"/doc/all.css\" type=\"text/css\" media=\"all\" charset=\"utf-8\">\n-<!--[if lt IE 8]>\n-<link rel=\"stylesheet\" href=\"/doc/ie.css\" type=\"text/css\">\n-<![endif]-->\n+<link type=\"text/css\" rel=\"stylesheet\" href=\"/doc/style.css\">\n <script type=\"text/javascript\" src=\"/doc/godocs.js\"></script>\n {{if .SearchBox}}\n <link rel=\"search\" type=\"application/opensearchdescription+xml\" title=\"godoc\" href=\"/opensearch.xml\" />\n {{end}}\n </head>\n <body>\n-<div id=\"container\">\n-  <div id=\"topnav\">\n-    <h1 id=\"title\">The Go Programming Language</h1>\n-    <div id=\"nav-main\">\n-      <ul>\n-      <li><a href=\"/\">Home</a></li><li><a href=\"/doc/install.html\">Getting Started</a></li><li><a href=\"/doc/docs.html\">Documentation</a></li><li><a href=\"/doc/contrib.html\">Contributing</a></li><li><a href=\"/doc/community.html\">Community</a></li>\n-      </ul>\n-      <div class=\"quickref\">\n-        <form method=\"GET\" action=\"/search\">\n-        {{range .PkgRoots}}\n-        <a href=\"/pkg/{{html .}}\">{{html .}}</a> <span class=\"sep\">|</span>\n-        {{else}}\n-        References:\n-        {{end}}\n-        <a href=\"/pkg/\">Packages</a> <span class=\"sep\">|</span>\n-        <a href=\"/cmd/\">Commands</a> <span class=\"sep\">|</span>\n-        <a href=\"/doc/go_spec.html\">Specification</a>\n-\t{{if .SearchBox}}\n-        <input id=\"search\" type=\"search\" name=\"q\" value=\"{{with .Query}}{{html .}}{{end}}\" class=\"{{if not .Query}}inactive{{end}}\" placeholder=\"code search\" results=\"0\" />\n-\t{{end}}\n-        </form>\n-      </div>\n-    </div>\n-    <a id=\"logo-box\" href=\"/\"></a>\n-  </div>\n-  <div id=\"content\">\n-  <!-- Menu is HTML-escaped elsewhere -->\n-  {{with .Menu}}\n-    <div id=\"menu\">\n-      {{printf \"%s\" .}}\n-    </div>\n-  {{end}}\n \n-  {{with .Title}}\n-    <h1 id=\"generatedHeader\">{{html .}}</h1>\n-  {{end}}\n-  {{with .Subtitle}}\n-    <span class=\"subtitle\">{{html .}}</span>\n-  {{end}}\n+<div id=\"topbar\"><div class=\"container\">\n \n-  <!-- The Table of Contents is automatically inserted in this <div>.\n-       Do not delete this <div>. -->\n-  <div id=\"nav\"></div>\n+<form method=\"GET\" action=\"/search\">\n+<div id=\"heading\"><a href=\"/\">The Go Programming Language</a></div>\n+<div id=\"menu\">\n+<a href=\"/doc/\">Learn</a>\n+<a href=\"/install/\">Install</a>\n+<a href=\"/project/\">Project</a>\n+<a href=\"/doc/reference.html\">Reference</a>\n+<input type=\"text\" id=\"search\" name=\"q\" class=\"inactive\" value=\"Search\">\n+</div>\n+</form>\n+\n+</div></div>\n+\n+<div id=\"page\">\n+\n+<div id=\"content\">\n+\n+{{with .Title}}\n+  <div id=\"plusone\"><g:plusone size=\"small\" annotation=\"none\"></g:plusone></div>\n+  <h1>{{html .}}</h1>\n+{{end}}\n+{{with .Subtitle}}\n+  <h2>{{html .}}</h2>\n+{{end}}\n+\n+{{/* The Table of Contents is automatically inserted in this <div>.\n+     Do not delete this <div>. */}}\n+<div id=\"nav\"></div>\n+\n+{{/* Content is HTML-escaped elsewhere */}}\n+{{printf \"%s\" .Content}}\n+\n+</div>\n \n-  <!-- Content is HTML-escaped elsewhere -->\n-  {{printf \"%s\" .Content}}\n-  </div>\n-  <div id=\"site-info\">\n-    <p>Build version {{html .Version}}. Except as noted, this content is licensed under a <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/3.0/\">Creative Commons Attribution 3.0 License</a>.</p>\n-  </div>\n </div>\n+\n+<div id=\"copyright\">\n+Build version {{html .Version}}.\n+Except as noted, this content is licensed under a\n+Creative Commons Attribution 3.0 License.\n+</div>\n+\n </body>\n```

### 3. トップページテンプレート `doc/root.html` の変更

トップページのデザインとコンテンツの配置が大きく変わっています。

```diff
--- a/doc/root.html
+++ b/doc/root.html
@@ -2,105 +2,112 @@
 \t\"Path\": \"/\"\n }-->\n \n-<link rel=\"stylesheet\" type=\"text/css\" href=\"/doc/frontpage.css\">\n-\n-<script src=\"http://www.google.com/jsapi\" type=\"text/javascript\"></script>\n-<script type=\"text/javascript\">\n-function loadFeed() {\n-        var url = \"http://blog.golang.org/feeds/posts/default\";\n-        var divId = \"blogFeed\";\n-        var feed = new google.feeds.Feed(url);\n-        feed.setNumEntries(4)\n-        feed.load(function (result) {\n-                var container = document.getElementById(divId)\n-                if (result.error) {\n-                        container.innerHTML = \"Error loading feed.\";\n-                        return;\n-                }\n-                container.innerHTML = \"\";\n-                var entries = result.feed.entries;\n-                for (var i=0; i<entries.length; i++) {\n-                        var li = document.createElement(\"li\");\n-                        var a = document.createElement(\"a\");\n-                        a.setAttribute(\"href\", entries[i].link);\n-                        var span_title = document.createElement(\"span\"); \n-                        span_title.appendChild(document.createTextNode(entries[i].title));\n-                        span_title.className = \"title\";\n-                        a.appendChild(span_title);\n-                        li.appendChild(a);\n-                        var span_date = document.createElement(\"span\"); \n-                        span_date.appendChild(document.createTextNode(entries[i].publishedDate.substr(0, 11)));\n-                        span_date.className = \"date\";\n-                        a.appendChild(span_date);\n-                        container.appendChild(li);\n-                }\n-        });\n-}\n+<div id=\"left\" class=\"aboutcol\">\n+\n+<div id=\"about\">\n+Go is an open source programming environment that makes it easy to build\n+simple, reliable, and efficient software.\n+</div>\n+\n+<div id=\"gopher\"></div>\n+\n+<a href=\"/install/\" id=\"start\">\n+<div class=\"big\">Download Go</div>\n+<div class=\"desc\">\n+Binary distributions available for<br>\n+Linux, Mac OS X, Windows, and more.\n+</div>\n+</a>\n+\n+</div>\n+\n+<div id=\"right\" class=\"learncol\">\n+\n+<div id=\"learn\">\n+<div class=\"rootHeading\">Try Go</div>\n+<div class=\"input\">\n+<textarea spellcheck=\"false\">// You can edit this code!\n+// Click here and start typing.\n+package main\n+\n+import \"fmt\"\n+\n+func main() {\n+\tfmt.Println(\"Hello, 世界\")\n+}</textarea>\n+</div>\n+<div class=\"output\">\n+<pre>\n+Hello, 世界\n+</pre>\n+</div>\n+<div class=\"buttons\">\n+<a href=\"#\">Run</a>\n+<a href=\"#\">Share</a>\n+</div>\n+</div>\n+\n+</div>\n+\n+<div style=\"clear: both\"></div>\n+\n+<div id=\"left\">\n+\n+<div id=\"video\">\n+<div class=\"rootHeading\">Featured video</div>\n+<a class=\"title\" href=\"http://www.youtube.com/watch?v=Mo1YKpIF1PQ\">Building integrated apps on Google\'s cloud platform with Go</a>\n+<iframe width=\"415\" height=\"241\" src=\"http://www.youtube.com/embed/Mo1YKpIF1PQ\" frameborder=\"0\" allowfullscreen></iframe>\n+</div>\n+\n+</div>\n+\n+<div id=\"right\">\n+\n+<div id=\"blog\">\n+<div class=\"rootHeading\">Featured articles</div>\n+<div class=\"read\"><a href=\"http://blog.golang.org/\">Read more</a></div>\n+</div>\n+\n+</div>\n+\n+<div style=\"clear: both;\"></div>\n+\n+<div id=\"plusoneRoot\"><g:plusone annotation=\"none\"></g:plusone></div>\n+\n+<script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n+<script>\n google.load(\"feeds\", \"1\");\n-google.setOnLoadCallback(loadFeed);\n-</script>\n \n-  <div id=\"frontpage\">\n-    <div class=\"left-column\">\n-      <p style=\"margin-top: 0;\">\n-        The Go programming language is an open source project to make\n-        programmers more productive.  Go is expressive, concise, clean,\n-        and efficient.  Its concurrency mechanisms make it easy to write\n-        programs that get the most out of multicore and networked machines,\n-        while its novel type system enables flexible and modular program\n-        construction.  Go compiles quickly to machine code yet has the\n-        convenience of garbage collection and the power of run-time reflection.\n-        It\'s a fast, statically typed, compiled language that feels like a \n-        dynamically typed, interpreted language.\n-      </p>\n-      <h2>\n-        Get started now with\n-\t<a target=\"_blank\" href=\"http://tour.golang.org/\">A Tour of Go</a>\n-        in your browser.\n-      </h2>\n-      <p>\n-      <div class=\"how\">[<a href=\"/doc/playground.html\">How does this work?</a>]</div>\n-      Or try Go right here:</p>\n-      <div id=\"playground\" class=\"small\"></div>\n-      <script src=\"/doc/play/playground.js\"></script>\n-    </div>\n-    <div class=\"right-column\">\n-      <div id=\"content-rotating\">\n-      <div id=\"content-videos\">\n-        <h2>Go Videos <span class=\"more\">| <a href=\"/doc/docs.html#videos_talks\">More...</a></span></h2>\n-        <a class=\"video\" href=\"http://www.youtube.com/watch?v=-i0hat7pdpk\"><img src=\"/doc/play_overlay.png\" class=\"thumbnail _005\" /> <span class=\"caption title\">&ldquo;Writing Web Apps in Go&rdquo;</span> <span class=\"caption description\">Google I/O 2011</span></a>\n-      </div>\n-      <h2>Go Blog <span class=\"more\">| <a href=\"http://blog.golang.org/\">More...</a></span></h2>\n-      <div id=\"content-blog\">\n-        <ul id=\"blogFeed\">\n-        </ul>\n-      </div>\n-      </div>\n-      <h2>Quick Links</h2>\n-      <div id=\"resources\">\n-        <div id=\"resources-users\">\n-          <h3>For newcomers:</h3>\n-          <ul>\n-            <li><a href=\"/doc/install.html\">Getting Started</a></li>\n-            <li><a href=\"/doc/go_tutorial.html\">Tutorial</a></li>\n-            <li><a href=\"/doc/effective_go.html\">Effective Go</a></li>\n-            <li><a href=\"/doc/go_faq.html\">Go FAQ</a></li>\n-            <li><a href=\"/doc/docs.html\">Other Documentation</a></li>\n-            <li><a href=\"http://code.google.com/appengine/docs/go/\">Go for Google App Engine</a> <sup class=\"new\">New!</sup></li>\n-          </ul>\n-        </div>\n-        <div id=\"resources-contributors\" >\n-          <h3>For developers:</h3>\n-          <ul>\n-            <li><a href=\"http://godashboard.appspot.com/package\">Package Dashboard</a></li>\n-            <li><a href=\"http://code.google.com/p/go/issues\">Issue Tracker</a></li>\n-            <li><a href=\"http://build.golang.org/\">Build Status</a></li>\n-            <li><a href=\"http://code.google.com/p/go/source/browse/\">Go Source</a> [<a href=\"http://code.google.com/p/go/source/list\">changes</a>]</li>\n-            <li><a href=\"/pkg/\">Package Reference</a></li>\n-            <li><a href=\"/doc/go_spec.html\">Language Specification</a></li>\n-          </ul>\n-        </div>\n-      </div>  \n-    </div>\n-    <div class=\"end-columns\"></div>\n-  </div>\n+function feedLoaded(result) {\n+  if (result.error) {\n+    console.log(result.error);\n+    return;\n+  }\n+  var blog = document.getElementById(\"blog\");\n+  var read = blog.getElementsByClassName(\"read\")[0];\n+  for (var i = 0; i < result.feed.entries.length && i < 2; i++) {\n+    var entry = result.feed.entries[i];\n+    var title = document.createElement(\"a\");\n+    title.className = \"title\";\n+    title.href = entry.link;\n+    title.innerHTML = entry.title;\n+    blog.insertBefore(title, read);\n+    var extract = document.createElement(\"div\");\n+    extract.className = \"extract\";\n+    extract.innerHTML = entry.contentSnippet;\n+    blog.insertBefore(extract, read);\n+    var when = document.createElement(\"div\");\n+    when.className = \"when\";\n+    var pub = entry.publishedDate.split(\" \").slice(1,3).join(\" \");\n+    when.innerHTML = \"Published \" + pub\n+    blog.insertBefore(when, read);\n+  }\n+}\n+\n+function fetchFeeds() {\n+  var feed = new google.feeds.Feed(\"http://blog.golang.org/feeds/posts/default\");\n+  feed.load(feedLoaded);\n+}\n+\n+google.setOnLoadCallback(fetchFeeds);\n </script>\n```

## コアとなるコードの解説

### 1. 新しいスタイルシート `doc/style.css` の追加

このファイルは、`godoc`の視覚的なアイデンティティを完全に再定義しています。

*   **基本的なスタイルのリセットと再定義**: `body`要素の`margin`を`0`に設定し、新しいフォントファミリー（`Helvetica, Arial, sans-serif`）と基本フォントサイズ（`16px`）を適用しています。これにより、ブラウザのデフォルトスタイルを上書きし、一貫したデザインの出発点を提供します。
*   **コード表示の改善**: `pre`と`code`要素に対して、`Menlo, monospace`という等幅フォントを指定し、`font-size`を`14px`に設定しています。また、`pre`要素には`background: #e9e9e9;`と`padding: 10px;`、そして`border-radius`による角丸が適用され、コードブロックが視覚的に区別しやすくなっています。
*   **新しいレイアウト構造**: `#topbar`, `#page`, `#left`, `#right`といった新しいIDを持つ要素が導入されています。
    *   `#topbar`は、サイト全体のヘッダー部分の背景色を定義しています。
    *   `#page`は、コンテンツの最大幅を`900px`に設定し、中央寄せにすることで、コンテンツが読みやすい幅に収まるようにしています。
    *   `#left`と`#right`は、それぞれ`float`プロパティと`width: 415px;`を使用して、トップページなどでコンテンツを左右に分割する2カラムレイアウトを実現しています。これは、従来の`left-column`や`right-column`よりも明確な構造と柔軟性を提供します。
*   **インタラクティブ要素のスタイル**: ボタンや入力フィールド、リンクなど、ユーザーが操作する要素に対して、統一された`padding`, `border-radius`, `background`, `color`が定義されています。これにより、サイト全体のインタラクティブ要素に一貫したルック＆フィールが与えられます。

この`style.css`は、`godoc`が単なるテキストベースのドキュメントビューアから、より洗練されたウェブアプリケーションへと進化するための基盤を築いています。

### 2. メインテンプレート `lib/godoc/godoc.html` の変更

このHTMLテンプレートの変更は、新しいCSSを適用し、ページの全体的な構造を新しいデザインに合わせて調整するものです。

*   **CSSファイルの切り替え**: `<link rel="stylesheet" href="/doc/all.css" ...>`が削除され、`<link type="text/css" rel="stylesheet" href="/doc/style.css">`に置き換えられています。これにより、すべての`godoc`ページで新しいデザインが適用されるようになります。
*   **トップバーとナビゲーションの再構築**:
    *   従来の`<div id="container">`, `<div id="topnav">`, `<div id="nav-main">`といった要素が削除され、代わりに`<div id="topbar"><div class="container">`という新しい構造が導入されています。
    *   新しいトップバーには、サイトのタイトルである「The Go Programming Language」へのリンク（`<div id="heading"><a href="/">...</a></div>`）と、主要なナビゲーションリンク（「Learn」「Install」「Project」「Reference」）を含む`<div id="menu">`が配置されています。
    *   検索フォームもこの新しいトップバー内に統合され、よりアクセスしやすくなっています。
*   **コンテンツ領域の再定義**: 従来の`<div id="content">`が削除され、`<div id="page">`と`<div id="content">`のネストされた構造が導入されています。これにより、ページ全体の幅を制御する`#page`と、その中の主要コンテンツを保持する`#content`という明確な役割分担がなされています。
*   **Google +1 ボタンの追加**: `{{with .Title}}`ブロック内に`<div id="plusone"><g:plusone size="small" annotation="none"></g:plusone></div>`が追加されています。これは、Google+のソーシャル共有ボタンをドキュメントページに組み込むためのものです。当時のGoogleのサービス連携を反映しています。
*   **フッターの簡素化**: 従来の`<div id="site-info">`が削除され、よりシンプルな`<div id="copyright">`に置き換えられています。これにより、フッターの視覚的なノイズが減り、コンテンツに集中しやすくなっています。

これらの変更により、`godoc`のすべてのページが統一されたモダンなヘッダーとフッターを持ち、コンテンツがより整理された形で表示されるようになりました。

### 3. トップページテンプレート `doc/root.html` の変更

トップページは、Go言語の「顔」となる部分であり、このコミットで最も劇的な変更が加えられています。

*   **`frontpage.css`の削除**: トップページ専用のスタイルシート`doc/frontpage.css`が削除され、代わりに`style.css`が全体に適用されるようになりました。これにより、CSSの管理が簡素化され、一貫性が保たれます。
*   **コンテンツの再構成**:
    *   従来の2カラムレイアウトが廃止され、Go言語の紹介、ダウンロードリンク、インタラクティブな「Try Go」エディタ、注目のビデオ、ブログ記事といった新しいセクションが導入されています。
    *   特に注目すべきは、`<div id="learn">`内に配置された「Try Go」セクションです。これは、ユーザーがブラウザ上でGoコードを記述・実行できるインタラクティブな機能を提供します。これにより、Go言語の学習体験が大幅に向上します。
    *   `<div id="video">`と`<div id="blog">`は、それぞれYouTubeの埋め込みビデオとGoブログの最新記事を表示するためのセクションです。これにより、トップページからGo言語に関する最新情報や魅力的なコンテンツにアクセスしやすくなっています。
*   **Google Feed APIの利用**: JavaScriptコードが更新され、Google Feed API (`google.load("feeds", "1");`) を使用してGoブログのRSSフィードを非同期で取得し、トップページに表示するようになりました。これにより、ブログの更新が自動的にトップページに反映される動的なコンテンツが実現されています。
*   **Gopher画像の追加**: `<div id="gopher"></div>`要素が追加され、CSSで`background: url(/doc/gopher/frontpage.png) no-repeat;`が適用されることで、Go言語のマスコットであるGopherの画像がトップページに表示されるようになりました。これは、サイトの親しみやすさとブランド認知度を高める効果があります。

これらの変更は、`godoc`のトップページを単なる情報提供の場から、Go言語の魅力を伝え、ユーザーのエンゲージメントを高めるためのインタラクティブなハブへと変貌させています。

## 関連リンク

*   Go言語公式サイト: [https://go.dev/](https://go.dev/)
*   `godoc`コマンドについて (Go公式ドキュメント): [https://go.dev/cmd/godoc/](https://go.dev/cmd/godoc/)
*   Go言語の歴史 (Wikipedia): [https://ja.wikipedia.org/wiki/Go%E8%A8%80%E8%AA%9E](https://ja.wikipedia.org/wiki/Go%E8%A8%80%E8%AA%9E)

## 参考にした情報源リンク

*   コミット情報: `/home/orange/Project/comemo/commit_data/11843.txt`
*   GitHubコミットページ: [https://github.com/golang/go/commit/d84de09e1d46efe6e0dc5edcbb6c30b02733aa70](https://github.com/golang/go/commit/d84de09e1d46efe6e0dc5edcbb6c30b02733aa70)
*   Google検索: "golang godoc new design 2012", "go godoc redesign", "Andrew Gerrand godoc" (これらの検索クエリを用いて、当時のGoコミュニティの議論や関連情報を調査しました。)
*   Go言語の公式ドキュメントやブログ記事 (具体的なURLは特定していませんが、一般的なGoのウェブサイトの構造やツールの進化に関する知識を参考にしました。)
*   HTML, CSS, JavaScriptの一般的なウェブ開発知識。
*   Google Closure Libraryに関する一般的な知識。