【日記】DjangoでImageFieldを実装したり、object-fitで画像表示したりした。

Django公式チュートリアルで作るpollsアプリケーションの発展型のようなものを作っています。詳しくはまだないしょです。

今日は各投稿の詳細画面をある程度実装しました。デザインはまだ何もいじっていないので見た目カッコ悪いですが……。あとからやります。

ImageField

今日実装したのは画像を扱うフィールド、ImageFieldです。公式チュートリアルでは触れられておらず、ドキュメントでも詳しく触れられていなかったので困りました。ググったところ、Django BrothersのチュートリアルがImageFieldについて扱っていて、非常にわかりやすかったのでこれに沿って実装しました。

ImageFieldを使ってみよう

僕の場合、default値を設定したかったのですが、ファイルを指定するパスが良くわからずだいぶ四苦八苦しました。結果的にこうなりました。

models.py

choice_image = models.ImageField(upload_to='polls', default=os.path.join(BASE_DIR, '/polls/default_icon.jpg'))

詳しくはDjango Brothersチュートリアルを読んでほしいのですが、settings.pyでMEDIA_ROOTを指定したところからのパスで良いようです。

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

つまり、ImageFieldのデフォルト画像のパスは以下のようになります。

/media/polls/default_icon.jpg

object-fit

画像を表示できたは良いものの、画像サイズがそのままなので表示が整いません。縦横比を維持しつつ正方形で表示したかったので調べてみたところ、CSSのobject-fitというものを使えばうまくいきそうです。

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー｜Webクリエイターボックス

実際に書いたコードはこちら

/polls/static/polls/style.css

.choice_image {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

画像にはchoice_imageクラスを指定しました。

細かい話

スーパーリロードというものについて知りました。キャッシュを消してリロードできるので、CSSを変更したのに反映されない！ってときに使うといいです。

Django開発中にクロームでcssが反映されない場合の対処方法 - 知的好奇心

円グラフを表示したかったがうまくいかない

投票された割合を表示する手段として、円グラフを実装したいのですがこれがうまくいかなかったので持ち越しです。Chart.jsというJSライブラリを使おうと思ったのですが、Pythonのfor文とどのように共存させればよいかわからないのです。もしかしたらviews.pyで作成したほうが良いのかもしれないですね。

Chart.jsでグラフを描画してみた

今後の課題です。がんばろう。