Wiki

Wiki

Wikipediaのようなオンライン百科事典を設計します。

背景

Wikipediaは、さまざまなトピックに関する多数の百科事典エントリで構成される無料のオンライン百科事典です。

百科事典の各エントリは、そのエントリのページで表示できます。たとえば、https://en.wikipedia.org/wiki/HTML にアクセスすると、HTML用のWikipediaエントリが表示されます。要求されたページの名前 (HTML) がルート /wiki/HTML で指定されていることに注意してください。また、ページのコンテンツは、ブラウザでレンダリングされるHTMLのみである必要があることにも注意してください。

実際には、WikipediaのすべてのページをHTMLで書かなければならないとしたら、退屈な作業になってしまうでしょう。WikipediaはWikitextと呼ばれるマークアップ言語を使用しますが、このプロジェクトではMarkdown(マークダウン)と呼ばれるマークアップ言語を使用して百科事典のエントリを保存します。

GitHub Markdownガイドを読んで、Markdownの構文の仕組みを理解してください。特に、見出し、太字テキスト、リンク、およびリストのMarkdown構文に注意してください。

各百科事典のエントリを1つのMarkdownファイルで表すことにより、エントリをより人間に適したものにして、記述や編集を行うことができます。ただし、ユーザが百科事典のエントリを表示する場合は、そのMarkdownをHTMLに変換してからユーザに表示する必要があります。

始めるにあたって

理解を深める

配布コードには wiki と呼ばれるDjangoプロジェクトがあり、そこに encyclopedia と呼ばれる単一のアプリが含まれています。

まず、このアプリのURL設定が定義されている encyclopedia/util.py を開きます。ここでは、 views.index 関数に関連付けられた1つの既定ルートから開始します。

次に、encyclopedia/util.py を見てみましょう。このファイルの内容を変更する必要はありませんが、百科事典のエントリを操作するのに便利な機能が3つあることに注意してください。 list_entries は、現在保存されているすべての百科事典エントリの名前のリストを返します。 save_entry は、タイトルとMarkdownのコンテンツを指定して、新しい百科事典エントリを保存します。get_entry は、百科事典のエントリをそのタイトルで取得し、エントリが存在する場合はMarkdownの内容を返し、エントリが存在しない場合は None を返します。作成したビューでは、これらの関数を使用して百科事典のエントリを操作できます。

各百科事典のエントリは、entries/ ディレクトリ内にMarkdownファイルとして保存されます。ここをチェックすると、いくつかのサンプルエントリが事前に作成されています。追加を歓迎します!

では、encyclopedia/views.py を見てみましょう。ここには、index ビューという1つのビューしかありません。このビューはテンプレート encyclopedia/index.html を返し、テンプレートにencyclopedia (これは、util.py で定義されている util.list_entries を呼び出して取得します) のすべてのエントリのリストを提供します。

テンプレートは、encyclopedia/templates/encyclopedia/index.html で見つけることができます。このテンプレートは、ベースとなる layout.html ファイルから継承され、ページのタイトルと、ページの本文の内容 (この場合は、百科事典内のすべてのエントリの順序なしリスト) を指定します。一方、layout.html は、ページのより広い構造を定義しています。各ページにはサイドバーがあり、検索フィールド (まだ機能していません) 、ホームへのリンク、新しいページを作成したり任意のページにアクセスしたりするためのリンク (まだ機能していません) があります。

プロジェクトの仕様

Wiki百科事典の実装を完了します。次の要件を満たしている必要があります。

  • エントリページ/wiki/TITLE ( TITLE は百科事典エントリのタイトル) を表示した際に、その百科事典エントリの内容を表示するページをレンダリングする必要があります。
    • ビューは、適切な util 関数を呼び出して、百科事典エントリの内容を取得します。
    • 存在しないエントリが要求された場合、要求されたページが見つからなかったことを示すエラーページが表示されます。
    • エントリが存在する場合は、エントリの内容を表示するページが表示されます。ページのタイトルには、エントリの名前を含める必要があります。
  • インデックスページ:単に百科事典のすべてのページの名前をリストするのではなく、ユーザが任意のエントリ名をクリックして、そのエントリページに直接移動できるように index.html を更新します。
  • 検索:ユーザがサイドバーの検索ボックスにクエリを入力して、百科事典エントリを検索できるようにします。
    • クエリが百科事典エントリの名前と一致する場合、ユーザはそのエントリのページにリダイレクトされます。
    • クエリが百科事典エントリの名前と一致しない場合、ユーザは、クエリを部分文字列として持つすべての百科事典エントリのリストを表示する検索結果ページに移動する必要があります。たとえば、検索クエリが Py の場合、Python が検索結果に表示されます。
    • 検索結果ページのエントリ名をクリックすると、そのエントリのページに移動します。
  • 新しいページ:サイドバーの「新しいページの作成」をクリックすると、新しい百科事典エントリを作成できるページに移動します。
    • ユーザはページのタイトルを入力し、テキスト領域 textarea にページのMarkdownコンテンツを入力できる必要があります。
    • ボタンをクリックして新しいページを保存できる必要があります。
    • ページを保存するときに、指定したタイトルの百科事典エントリがすでに存在する場合は、エラーメッセージが表示されます。
    • そうでない場合、百科事典のエントリはディスクに保存され、ユーザは新しいエントリのページに移動します。
  • ページの編集:各エントリページで、ユーザはリンクをクリックして、そのエントリのMarkdownコンテンツを textarea で編集できるページに移動できます。
    • textarea には、ページの既存のMarkdownコンテンツが事前に入力されている必要があります (つまり、既存の内容は textarea の初期値でなければなりません) 。
    • ユーザは、ボタンをクリックしてエントリに加えた変更を保存できます。
    • エントリが保存されると、ユーザはそのエントリのページにリダイレクトされます。
  • ランダムページ:サイドバーの「ランダムページ」をクリックすると、ユーザはランダムな百科事典のエントリに移動するはずです。
  • マークダウンからHTMLへの変換:各エントリのページで、エントリファイル内のマークダウンコンテンツをHTMLに変換してから、ユーザに表示する必要があります。この変換は、pip3 install markdown2 を使用してインストールでき、python-markdown2 パッケージを使用して実行できます。
    • 余裕がある受講者への課題:もし余裕がある場合は、外部ライブラリ、サポートする見出し、太字テキスト、順序なしリスト、リンク、および段落を使用せずに、MarkdownをHTML変換に実装してみてください。Pythonで正規表現を使用すると便利です。

ヒント

  • デフォルトでは、Djangoテンプレートの値を置き換える場合、Django HTMLはその値をエスケープして意図しないHTMLを出力しないようにします。HTML文字列を出力できるようにするには、セーフフィルタ  (置換する変数名の後に|safeを追加するなど) を使用します。

提出方法

ちょっと待ってください!以前のバージョンのCS50Wの証明書をすでに受け取っている場合は、ここで中断してください。この課題を提出してはいけません。提出しても、コースの進行には影響がない (edX上の同じコースのままで、修正されたコンテンツのみアップデートされます。証明書を2つ受け取ることはできません) ため、採点者の負荷を増やすだけです!

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

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

たとえば、このプロジェクトでは、採点者が https://github.com/me50/USERNAME/tree/web50/projects/2020/x/wiki  (ここで、USERNAME は、以下のフォームに記載されているユーザ独自のGitHubユーザ名です) にアクセスした場合、3つのサブディレクトリ ( encyclopediaentrieswiki ) と manage.py が表示されます。チェックするときにコードがこのように編成されていない場合は、この規則に合わせて必要に応じてリポジトリを再編成します。

  1. submit50 をインストールしている場合は、次のコマンドを実行します。
submit50 web50/projects/2020/x/wiki

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

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

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

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