Network

ネットワーク

投稿したりフォローしたりするためのTwitterのようなソーシャルネットワークのウェブサイトをデザインします。

Network page

はじめに

  1. 配布コードをhttps://cdn.cs50.net/web/2020/spring/projects/4/network.zipからダウンロードし、解凍します。
  2. ターミナルで、project4 ディレクトリに cd します。
  3. python manage.py makemigrations network を実行し、network アプリのマイグレーションを行います。
  4. python manage.py migrate を実行して、データベースにマイグレーションを適用します。

理解を深める

配布コードには project4 というDjangoプロジェクトがあり、そこにはプロジェクト2の auctions アプリと同様の構造を持つ network という1つのアプリケーションが含まれています。

まず、このアプリのURL設定が定義されている network/urls.py を開きます。デフォルトの index ルート、/login ルート、/logout ルート、/register ルートなど、いくつかのURLがすでに作成されています。

network/views.py を見て、これらの各ルートに関連付けられているビューを確認してください。現時点では、インデックスビューはほとんど空の index.html テンプレートを返します。login_view ビューは、ユーザがページをGETしようとしたときにログインフォームを表示します。ユーザがPOSTリクエストメソッドを使用してフォームを送信すると、ユーザは認証され、ログインしてインデックスページにリダイレクトされます。logout_view ビューは、ユーザをログアウトしてインデックスページにリダイレクトします。最後に、register ルートはユーザに登録フォームを表示し、フォームの送信時に新しいユーザを作成します。これらはすべて配布コード上で行われるため、アプリケーションを実行してユーザを作成することができます。

python manage.py runserver を実行してDjango Webサーバーを起動し、ブラウザーでWebサイトにアクセスします。「登録」 をクリックし、アカウントを登録します。ユーザアカウントが「次の名前でサインイン(Signed in as)」され、ページ上部のリンクが変更されています。HTMLはどのように変更されましたか？このアプリケーションのHTMLレイアウトについては、network/templates/network/layout.html を参照してください。テンプレートのいくつかの部分は user.is_authenticated でラップされていることに注意してください。これにより、ユーザがサインインしているかどうかに応じて異なるコンテンツをレンダリングできます。レイアウトに何かを追加または変更する場合は、このファイルを変更できます。

最後に、network/models.py を見てみましょう。ここでは、Webアプリケーションのモデルを定義します。各モデルは、データベースに格納するデータのタイプを表します。アプリケーションの各ユーザを表す User モデルから始めてみましょう。AbstractUser から継承しているため、ユーザ名、電子メール、パスワードなどのフィールドはすでにありますが、ユーザに関する追加情報がある場合は、User クラスに新しいフィールドを追加することもできます。また、このファイルに、投稿、like(いいね！)、およびフォロワーに関する詳細を表すモデルを追加する必要があります。network/models.py で変更を行うたびに、まず python manage.py makemigrations を実行し、次に python manage.py migrate を実行して変更をデータベースにマイグレーションする必要があります。

プロジェクトの仕様

Python、JavaScript、HTML、CSSを使って、ユーザが投稿したり、他のユーザをフォローしたり、 「いいね！」ができるように、次の要件を満たしている必要があります。

  • 新しい投稿：サインインしているユーザは、テキスト領域にテキストを入力し、ボタンをクリックして投稿を送信することで、テキストベースの新しい投稿を作成できます。
    • この仕様の上部にあるスクリーンショットは、「新しい投稿」ページの上部にある「すべての投稿」ボックスを示しています。このように実装することもできますし、「新しい投稿」機能を別のページにすることもできます。
  • すべての投稿：ナビゲーションバーの「すべての投稿」リンクをクリックすると、すべてのユーザのすべての投稿が表示されるページが表示され、最新の投稿が最初に表示されます。
    • 各投稿には、投稿者のユーザ名、投稿内容、投稿が行われた日時、投稿に含まれる「いいね！」 の数 (後でこの機能を実装するまで、すべての投稿で0になります) を含める必要があります。
  • プロフィールページ：ユーザ名をクリックすると、そのユーザのプロファイル・ページがロードされます。このページは次のようになります。
    • ユーザがフォローしている人数と、ユーザがフォローしている人数を表示します。
    • そのユーザのすべての投稿を新しい順に表示します。
    • サインインしている他のユーザの場合、このページには 「フォロー中」 または 「フォロー解除」 ボタンも表示され、現在のユーザはこのユーザの投稿をフォローしているかどうかを切り替えることができます。これは 「他の」 ユーザにのみ適用されることに注意してください。ユーザは自分自身をフォローすることはできません。
  • フォロー：ナビゲーションバーの 「フォロー中」 リンクをクリックすると、現在のユーザがフォローしているすべての投稿が表示されるページが表示されます。
    • このページは「すべての投稿」ページと同じように動作しますが、投稿の数がより制限されます。
    • このページは、サインインしているユーザだけが使用できます。
  • ページ区切り：投稿を表示するすべてのページで、投稿はページ上に10のみ表示されます。投稿が10件を超える場合は、ボタンが表示され、ユーザは投稿の次のページ (投稿は現在のページより古い必要があります) に移動します。最初のページに表示されていない場合は、 「Previous」 ボタンが表示され、ユーザは投稿の前のページに移動できます。
    • この実装方法については、ヒントのセクションを参照してください。
  • 投稿の編集：ユーザは、自分の投稿の 「編集」 ボタンまたはリンクをクリックして、その投稿を編集できる必要があります。
    • ユーザが自分の投稿のいずれかで 「編集」 をクリックすると、投稿のコンテンツがテキスト領域textarea に置き換えられ、ユーザが投稿のコンテンツを編集できるようになります。
    • 編集した投稿を 「保存」 できるようになります。JavaScriptを使用すれば、ページ全体をリロードしなくてもこれを実現できるはずです。
    • セキュリティを確保するため、どのような方法であってもユーザが他のユーザの投稿を編集できないようにアプリケーションが設計されていることを確認します。
  • 「Like (いいね！) 」 と 「Unlike」 :ユーザは投稿のボタンやリンクをクリックして、その投稿を 「いいね！」 するかどうかを切り替えることができます。
    • JavaScriptを使用する場合は、ページ全体をリロードしなくても、「いいね！」の数 (fetchを呼び出した場合と同様) を更新し、ページに表示される投稿の類似カウントを更新するようにサーバに非同期で通知する必要があります。

ヒント

  • JavaScriptの fetch 呼び出しの例については、プロジェクト3のルートの一部を参照すると便利です。
  • 1つまたは複数のモデルを network/models.py に作成するか、既存の User モデルを修正して、Webアプリケーションに必要なデータを保存する必要があります。
  • Djangoの Paginator クラスが、バックエンドにページ区切りを実装するのに役立つかもしれません (Pythonコード内)。
  • Bootstrapの Pagination 機能が、フロントエンドにページを表示するのに役立つかもしれません (HTML内)。

提出方法

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

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

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

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

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

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

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

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

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

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