はじめてDjangoで成果物を作ってみた

研修の一環としてチーム開発を想定してDjangoでアプリケーション開発を行い、苦労した部分などをまとめました。初めて成果物を作る人の参考になると嬉しいです。

アプリケーション概要

• 対象者…オーバーウォッチ2のプレイヤー
• 目的…快適にオーバーウォッチ2が遊べること
• 作成期間…2ヶ月

自分の趣味における経験をもとにアプリケーションを作成しました。ユーザー目線で作成できたのではないかと思います。

主な機能　

1. API(OverFast)を用いたプレイヤー検索、戦績情報の表示
2. パーティー募集

設計

要件定義、画面設計、データベース設計を行いました。

要件定義

スケジュールの見積もり

定義した内容だと開発期間に無理があった。当初１ヶ月半の想定だったが、終わらせるのは難しそうだという感覚もあり、実際１ヶ月半では無理だった。

• 原因 : 開発にかかる時間の見積もりができなかった
• 対策 : どんな作業にどのくらい時間がかかったか計測し、経験を積んで工数や作業時間を見積もり計画を立てる

作業時間の計測を行い、css1ページの割り当てや新規機能開発に３時間、修正に1時間半、分岐を含む重めの機能に６時間といった目安が分かった。

画面設計

ツールの選択

最初はgoogleスライドで画面遷移図を作ろうとしました。しかし、要素の配置の際にあまりにも繊細なドラッグ&ドロップが必要だったので諦め、大学時代にハッカソンで適当に触っただけのFigmaを今回ガッツリ使ってみることにしました。ことwebデザインにおいてはFigmaの方が断然使いやすいと感じました。

画面設計図の一部

当時、googleスライドではできない要素の細かい指定ができたり、レイヤーを使えることがFigmaでできることに舞い上がっていましたが、手に余って扱いきれていない感覚がありました。
研修後にfigmaをもっと便利に使えるようになりたいと思い、以下の書籍でコンポーネントやスタイル、オートレイアウトなどについて勉強しました。タイトル通り、これからFigmaを使いはじめる人におすすめの書籍です。

これからはじめるFigma Web・UIデザイン入門

ER図

draw.ioで記述しました。特にパーティー募集機能における部分において、多重度とカラム名に悩みました。
例えば、〇〇_role_numというカラムによってパーティーで役割ごとに募集ができるようにすると同時に、他の人にもその意味合いが伝わるように工夫しました。

ER図の一部

開発で苦しんだ部分

Git

ローカルリポジトリのブランチがぐちゃぐちゃになった

原因:新しいブランチをmainブランチではなく、別の開発中のブランチから切った後、そのままstashしまくって訳がわからなくなった

リモートリポジトリの該当部分

大きな変更ではなかったことと、途中まで復元できたことが幸いしました。

対処:

1. cherry-pickで新しいブランチをmainから切り一部のcommitをpick
2. stashを溜めすぎないためにstash popを使ったり、stash save "〇〇"　で名前をつける

Django

リンクのエスケープ

問題:クエリパラメータに「#1234」を含む文字列を渡す必要があったが、#以降が渡されていない

原因:リンクの#以降はスクロール等する際の場所を指定する時などに使われている、フラグメント識別子と呼ばれている。URLにフラグメント識別子がない場合、このプロパティには空文字列 ("") が入るため、正しく文字列が渡されていなかった。　
参考：mdn URL:ハッシュプロパティ

対処:テンプレートタグでフィルターを使う

template.html

<a class="player-name-link" href="{% url 'overwin:game_player_info' %}?battle_tag={{ player.name|urlencode  }}">{{ player.name }}</a> 

ログインがうまくいかない

原因:フォームを使い回していたため
対処:ログインページではログイン用のフォームを使用する

forms.py

class UserRegisterForm(CustomForm, UserCreationForm):
    class Meta:
        model = User
        fields = ('username', 'email')

class LoginForm(CustomForm, AuthenticationForm):
    class Meta:
        model = User

HTML・CSS

配置がうまくいかない

インライン要素、ブロック要素で中央揃えの方法が違いました。
対処:インライン要素ではtext-align: center;、インラインブロック要素とブロック要素ではmargin: 0 auto;を使う。
インラインブロック要素は何に使うんだと考えていましたが、画像にaタグをうまく付ける時に重宝しました。

まとめ

研修の内容を今後に活かせるように、設計から開発において良かった点と苦しんだ点を書きました。
２ヶ月で多くの学びを得ることができました。今後も挑戦と経験を重ねて成長し続けられるように努めます。