python + djangoでアプリ開発3
こんばんわ、siroです。
先日python + DjangoでWEBアプリ作ってやるぜ!と以下記事で意気込んでスタートしたんですが、初っ端躓いたのでブログに残しておこうと思います。笑
※前回の記事は以下参照
つまづいたこと
前回の記事でも書きましたが、まずはサンプルのページを作っていこう!
ということになったので、さっそくcssフレームワークであるsemantic-UIを入れて、
サンプルページ開いてみたんです。
その時の画像がこちら。
・・・え!!?
いや、これぺーじ?え?
一瞬何が起きたのか意味不明でした。
だって、本来はこうなるはずなんですから・・・
なんだろうね。
初っ端うまくいかないとやる気なくなるよね。笑
で、色々調べた結果、djangoで静的ファイル(cssとかimgとか)を読み込むときは、
若干設定がいることが判明。
なにやら、セキュリティを意識してどこでもアクセスできるようにしていないんだとか。
そのため、静的ファイルを読み込む設定が必要となるそうな。
※詳しいことはあまり調べていません
Djangoで静的ファイルを読み込む設定方法
設定ファイルと、表示するhtmlの先頭におまじないをし、パス設定時も特定の記述をすれば良いとのことでした。
※以下参考
Python Django チュートリアル(6) - Qiita
setting.pyに以下追加
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
フォルダ構成を以下のように変更
PJ名
|--PJ名
|
|---template
| |---index.html
|
|---static
|--css
|
|--img
|
|--script
|
|--Semantic-UI-master
htmlファイルを以下のように修正
staticファイルを読み込む記述を先頭に追加
{% load staticfiles %} <!-- ← 追加 -->
cssなどの静的ファイル読み込み時のパスを以下のように設定
<link rel="stylesheet" type="text/css" href="{% static 'Semantic-UI-master/dist/components/〇〇〇〇.css' %}">
semantic-UIのサンプルを利用した図書管理システムサンプル
そして、semantic-UIのexampleにあるfixed.htmlを少しいじって、できたサンプル画面がこちら。
おおー
なんとなくそれっぽい画面ができた。笑
ヘッダメニューがあって、コンテンツが真ん中にあるのでいったん良しとします。笑
なにより、
CSSちゃんと読み込めたしOKです!!!!
まさかこんなところで躓くと思わなかったけど、新しい言語学ぶとこういったことはあるあるなので、これからもへこたれずにやろうと思います。
次回はいよいよ新規登録画面作ります。
テキストボックスやら、ラベルやらいろいろ用意して、入力したデータをDBに登録するところって感じですな。
入力チェックもそれなりに入れたいね。凝りすぎない程度に。
ログイン画面はまー、最後でもいいかな。笑
さっそく予定が崩れてきてますが、モチベ優先でやっていこうと思います。笑
ではではーノシ