Search (検索)

Google Search、Google Image Search、およびGoogle Advanced Searchのフロントエンドを設計します。

背景

講義で述べたように、HTMLフォームを作成するには <form> タグを追加して、<input> タグを追加することでそのフォームの入力フィールドを作成できます。このコースの後半では、フォームデータを入力として受け入れるWebアプリケーションの作成方法について説明します。このプロジェクトでは、既存のWebサーバ (Google) にデータを送信するフォームを作成します。

Googleのホームページに検索語を入力して「Google検索」ボタンをクリックするなどしてGoogle検索を行うと、その検索はどのように動作するのか、調べてみましょう。

https://www.google.com/ に移動し、検索フィールドに「Harvard」などの検索語を入力して、「Google検索」ボタンをクリックします。

ご想像のとおり「Harvard」のGoogle検索結果が表示されるはずです。ここでURLを見てみましょう。https://www.google.com/search で始まっているはずです。これはGoogle検索のWebサイトのルートです。そして、そのルートの ? の後に追加情報が続きます。

URL内のこれらの追加情報は、クエリ文字列と呼ばれます。クエリ文字列は一連のGETパラメータで構成され、各パラメータには名前と値があります。クエリ文字列は通常次のようにフォーマットされます。

field1=value1&field2=value2&field3=value3...

ここで、= はパラメータの名前と値を区切り、& 記号はパラメータを相互に区切ります。これらのパラメータは、フォームデータをURLでエンコードすることによって、フォームがWebサーバに情報を送信するための方法です。

Googleの検索結果ページのURLを見てください。Googleが使っているパラメータはかなりあるようですね。URLを見て(テキストエディターにコピーアンドペーストすると見やすいでしょう)、私たちの検索語である「Harvard」に言及していないかどうか調べてください。

URLを見ると、URLのGETパラメーターの1つが q=Harvard であることがわかるはずです。これは、Google検索に対応するパラメータの名前が q (「query」の略) であることを示しています。

他のパラメータはGoogleに有用なデータを提供しますが、検索を実行するために必要なのはqパラメータのみであることが分かりました。これは、他のすべてのパラメータを削除し、https://www.google.com/search?q=Harvard にアクセスすることで確認できます。同じGoogle検索結果が表示されるはずです！

この情報を使って、Googleのホームページのフロントエンドを実装し直すことができます。以下のコードを index.html というHTMLファイルに貼り付け、ブラウザで開きます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <form action="https://google.com/search">
            <input type="text" name="q">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

このページをブラウザで開くと、(非常に単純な) HTMLフォームが表示されます。「Harvard」などの検索語を入力して「Google検索」をクリックすると、Googleの検索結果ページが表示されます！

どのように動作したのでしょうか?この場合、form の action 属性は、フォームの送信時にデータを https://google.com/search に送信するようブラウザに指示します。また、name 属性が q であるフォームにinput フィールドを追加すると、ユーザーがその input フィールドに入力した内容が、URLのGETパラメータとして組み込まれます。

このプロジェクトでは、Googleのインターフェイスを探索して必要なGETパラメータを特定し、必要なHTMLとCSSをあなたのWebサイトに追加することによって、このWebサイトを拡張し、Google検索のための独自のフロントエンドを作成します。

始めるにあたって

https://cdn.cs50.net/web/2020/spring/projects/0/search.zip から配布コードをダウンロードし、解凍します。

プロジェクトの仕様

Webサイトは、次の要件を満たしている必要があります。

ページ。Webサイトには少なくとも3つのページが必要です。1つはGoogle検索、1つはGoogleイメージ検索、もう1つは高度なGoogle検索です。
- Google検索ページでは、ページの右上にイメージ検索または高度な検索へのリンクがあるはずです。他の2ページにはそれぞれ、Google検索に戻るためのリンクが右上にあるはずです。
テキスト検索。Google検索ページでは、ユーザがクエリを入力し、「Google検索」をクリックすると、そのページのGoogle検索結果が表示されるはずです。
- 本来のGoogleのウェブサイトのように、検索バーは角が丸くなっている必要があります。検索ボタンも中央に配置し、検索バーの下に配置します。
イメージ検索。Googleイメージ検索ページでは、クエリを入力し、検索ボタンをクリックすると、そのページのGoogle イメージ検索結果が表示されます。
高度な検索。Google Advanced Searchページでは、以下の4つのフィールドに入力できるはずです (Googleの advanced search 高度な検索オプションから引用しています)。
- 「これらすべての単語:」でページを検索
- 「完全に一致する単語または語句:」でページを検索
- 「次のいずれかの語:」でページを検索
- 「次の言葉を含まない:」でページを検索
外観。Googleの「高度な検索」ページと同様に、4つのオプションは縦に並べ、テキストフィールドはすべて左揃えにします。
- Google独自のCSSと同じく、「高度な検索」ボタンは青色のテキストで表示されます。「高度な検索」ボタンをクリックすると、指定したクエリの結果ページが表示されます。
Lucky。Google検索のメインページに「I’m Feeling Lucky」ボタンを追加します。Google本来の挙動と同じく、このリンクをクリックすると通常の検索結果ページを経由せずに、最初のGoogle検索結果ページに直接ジャンプするようにします。
デザイン。作成するCSSは、Google本来のデザインにできる限り一致させる必要があります。

ヒント

パラメータ名を決定するには、Google検索を実行して結果のURLを確認することをお勧めします。また、ブラウザからGoogleへの要求の詳細を表示するには、ネットワークインスペクタ (Google Chromeで「表示」 -> 「開発者」 -> 「開発者ツール」を選択するとアクセス可能) を開くと便利です。
- すべての <input> 要素(その型が text , submit , number 、または完全に別のものであるかどうかを問わず)は、フォームの送信時にGETパラメータになる name と value の属性を持つことができます。
- GoogleのHTMLを見れば、これらの質問に答えるのに役立つかもしれません。ほとんどのブラウザでは、ページをCtrlキーを押しながらクリックするか、右クリックして「ページソースの表示」を選択すると、そのページの基になっているHTMLを表示できます。
ユーザーが表示または変更できない入力フィールドをフォームに含めるには、“hidden” (非表示) 入力フィールドを使用します。

提出方法

ちょっと待ってください！以前のバージョンのProject 0 (ホームページ) を既に送信し、合格点を取得している場合は、ここで中断してください。あなたは既にこのプロジェクトの単位を取得しています。この課題を送信してはいけません。この課題はあなたのコースの進捗に影響しないため、採点者の負荷を増やすだけです！

このリンクにアクセスして、GitHubアカウントでログインし、「cs 50の承認」をクリックします。次に、コースのスタッフに提出課題へのアクセス権を付与することを示すボックスにチェックを入れ、「コースに参加」をクリックします。
Gitをインストールし、オプションで submit 50 をインストールします。

プロジェクトを送信するときに、web50/projects/2020/x/search ブランチの内容が、最初にダウンロードしてzip解凍した時の配布コードのファイル構造と一致している必要があります。つまり、自分で作成した他のディレクトリ (たとえば、search または project0 ) の中にファイルをネストしてはいけません。ブランチには、ほかのプロジェクトのコードは含まれず、このプロジェクトのコードだけが含まれるようにします。このファイル構造に従わないと、採点が拒否される可能性があります。

たとえば、このプロジェクトでは、採点者が https://github.com/me50/USERNAME/blob/web50/projects/2020/x/search/index.html (ここで、USERNAME は、以下のフォームに記載されているユーザー独自のGitHubユーザー名です) にアクセスした場合、このプロジェクトに対する index.html への提出が表示されます。そうでない場合は、この規則に合わせて必要に応じてリポジトリを再編成します。

submit50 をインストールしている場合は、次のコマンドを実行します。

submit50 web50/projects/2020/x/search

それ以外の場合は、Gitを使用して、https://github.com/me50/USERNAME.git ( USERNAME はGitHubのユーザ名) の web50/projects/2020/x/search というブランチに作業をプッシュします。

長さが5分を超えないようにスクリーンキャストを記録し、プロジェクトの機能を実演します。URLバーは、プロジェクトの実演中は常に表示されている必要があります。上記の仕様のすべての要素がビデオで示されていることを確認してください。このビデオでは、コードを表示する必要はありません。実行中のアプリケーションのみを表示します。GitHubでコードをレビューします。そのビデオをYouTubeなど (リストに非公開あるいはパブリック設定で、プライベート設定にはせずに) にアップロードしてください。ビデオの説明では、それぞれの7つの仕様を示している場所にタイムスタンプを付ける必要があります。これはオプションではなく、説明にタイムスタンプがないビデオは自動的に拒否されます。
このフォームを送信します。

その後、https://cs50.me/cs50w にアクセスして、現在の進捗状況を確認できます。

cs50.me/cs50w の成績に関する重要な注意事項：通常、各暦年の開始直後 (2021年1月11日の週を予定) に、すべての成績を更新します。2020年からのすべての課題は保存されてそのまま続けることができますが、2021年に課題を送信してCS 50 Botにより評価・返却されるまで、成績は一時的に空または使用不可の状態で表示されます。だから心配しないでください！

CS50Wを2020年の最終日に終了した場合、この成績のリセットが行われる前に無料のCS50証明書を申請することが非常に重要ですから、遅れないようにしてください (認証済の証明書はこの影響を受けません) 。